dao-game / commit
Generating everything on the fly.
game.js | 29 +++++++++++++++++++++++++---- index.html | 26 +------------------------- 2 files changed, 26 insertions(+), 29 deletions(-) diff --git a/game.js b/game.js index 0715a22..b1edb19 100644 --- a/game.js +++ b/game.js @@ -36,10 +36,10 @@ const blinkingClassName = 'blinking'; // board const board = [ - 0, null, null, 1, - null, 2, 3, null, - null, 4, 5, null, - 6, null, null, 7 + 0, null, null, 4, + null, 1, 5, null, + null, 6, 2, null, + 7, null, null, 3 ]; const rows = 4; const cols = 4; @@ -62,8 +62,29 @@ const squareCoords = [ new Coord(0, 3), ]; +let isWhite = true; +const table = document.getElementById('table'); +for (let r = 0; r < rows; r++) { + const tr = document.createElement('tr'); + table.appendChild(tr); + for (let c = 0; c < cols; c++) { + const td = document.createElement('td'); + tr.appendChild(td); + td.className = isWhite ? 'white' : 'black'; + isWhite = !isWhite; + } + isWhite = !isWhite; +} // DOM references const cells = () => Array.from(document.querySelectorAll("td")); + +board.forEach((value, index) => { + if (value !== null) { + const pieceColor = value < 4 ? 'red-piece' : 'blue-piece'; + cells()[index].innerHTML = `<p class='${pieceColor}' id='${value}'></p>` + } +}); + const redPieces = () => Array.from(document.querySelectorAll(".red-piece")); const bluePieces = () => Array.from(document.querySelectorAll(".blue-piece")); const redTurnText = () => Array.from(document.querySelectorAll(".red-turn-text")); diff --git a/index.html b/index.html index 817ac73..d504b04 100644 --- a/index.html +++ b/index.html @@ -15,31 +15,7 @@ Red </div> - <table> - <tr> - <td class="white"><p class='red-piece' id='0'></p></td> - <td class="black"></td> - <td class="white"></td> - <td class="black"><p class='blue-piece' id='1'></p></td> - </tr> - <tr> - <td class="black"></td> - <td class="white"><p class='red-piece' id='2'></p></td> - <td class="black"><p class='blue-piece' id='3'></p></td> - <td class="white"></td> - </tr> - <tr> - <td class="white"></td> - <td class="black"><p class='blue-piece' id='4'></p></td> - <td class="white"><p class='red-piece' id='5'></p></td> - <td class="black"></td> - </tr> - <tr> - <td class="black"><p class='blue-piece' id='6'></p></td> - <td class="white"></td> - <td class="black"></td> - <td class="white"><p class='red-piece' id='7'></p></td> - </tr> + <table id="table"> </table> <div class="desktop">