Reversi UI written in JavaScript.
- Auto resize
- Customize style
- Update/Reset UI state
-
create HTML file & add container element
<html> <head> <!-- write script tag later --> </head> <body> <div id="container-id"></div> <!-- any id name --> </body> </html>
-
Read JavaScript file (write script tag)
<script src="reversi-board.js"></script>
-
New/Update/Reset/Resize board
// new ReversiBoard instance let reversiBoard = new ReversiBoard("container-id"); // update board state let state = [ [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 2, 3, 0, 0, 0], [0, 0, 0, 3, 2, 1, 0, 0], [0, 0, 0, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0] ]; reversiBoard.update(state); // reset board reversiBoard.reset(); // set resize event window.onresize = function() { reversiBoard.resize(); }
- ReversiBoard class
Name Description Argument constructor - board container id (String), configurations (Object) update update board state with array 8x8 int Array reset reset board state (no stones, only empty board) no argument resize resize board (board size follows container element width) no argument
You can customize reversi UI when creating a ReversiBoard instance.
// configurations
let config = {
styleStoneWhite: "Blue",
styleStoneBlack: "Red",
}
// new ReversiBoard instance
let reversiBoard = new ReversiBoard("container-id", config);-
State
Key Description Type Default value stateCellEmpty empty cell state Number 0 stateCellAvailable available cell state Number 1 stateStoneWhite white stone state Number 2 stateStoneBlack black stone state Number 3 -
Style
Key Description Type Default value styleStoneWhite white stone color String "white" styleStoneBlack black stone color String "black" styleStoneWhiteBorderColor white stone border color String "white" styleStoneBlackBorderColor black stone border color String "black" styleCellEmpty empty cell color String "green" styleCellAvailable available cell color String "darkgreen" styleCellBorderColor cell border color String "black" styleDotColor Four dots color String "black" -
id & classname
Key Description Type Default value idReversiBoard board element id String "reversiboard" classNameLayer board layer (board, dot, stone and mesh) class name String "reversiboard-layer" classNameRow board row class name String "reversiboard-row" classNameCell board cell class name String "reversiboard-cell" classNameStone board stone class name String "reversiboard-stone" classNameDot board dot class name String "reversiboard-dot" classNameMesh board mesh class name String "reversiboard-mesh" -
Event function
Key Description Type Default value eventFunc event function when a cell clicked. event function can receive values i, j and state. i, j is board coordinate, state is board state number. function function(i, j, state) { console.log("click (x=" + i + ", y=" + j + ")"); } -
Default configration
{ // state stateCellEmpty: 0, stateCellAvailable: 1, stateStoneWhite: 2, stateStoneBlack: 3, // style styleStoneWhite: "white", styleStoneBlack: "black", styleStoneWhiteBorderColor: "white", styleStoneBlackBorderColor: "black", styleCellEmpty: "green", styleCellAvailable: "darkgreen", styleCellBorderColor: "black", styleDotColor: "black", // id and classname idReversiBoard: "reversiboard", classNameLayer: "reversiboard-layer", classNameRow: "reversiboard-row", classNameCell: "reversiboard-cell", classNameStone: "reversiboard-stone", classNameDot: "reversiboard-dot", classNameMesh: "reversiboard-mesh", // event function eventFunc: function(i, j, state) { console.log("click (x=" + i + ", y=" + j + ")"); } }
- Demo site https://mtsalt.github.io/reversi-ui
- Source code is
index.htmlin this repository
- Add other components
- Add animation