dao-game / commit
More object refactoring: moved all DOM code into a dom object.
game.js | 67 +++++++++++++++++++++++++++++++++-------------------------------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/game.js b/game.js index f830476..6c292be 100644 --- a/game.js +++ b/game.js @@ -120,16 +120,19 @@ const player = { } // DOM references -const defaultRedPiece = document.getElementById('default-red-piece'); -const defaultBluePiece = document.getElementById('default-blue-piece'); -const cells = () => Array.from(document.querySelectorAll("td")); -const allPieces = () => Array.from(document.querySelectorAll('.piece')); -const redPieces = () => Array.from(document.querySelectorAll('.red-piece:not(#default-red-piece')); -const bluePieces = () => Array.from(document.querySelectorAll('.blue-piece:not(#default-blue-piece')); -const redTurnText = () => Array.from(document.querySelectorAll(".red-turn-text")); -const blueTurnText = () => Array.from(document.querySelectorAll(".blue-turn-text")); -const resetButton = document.getElementById('reset-button'); -const undoButton = document.getElementById('undo-button'); +const dom = { + defaultRedPiece: document.getElementById('default-red-piece'), + defaultBluePiece: document.getElementById('default-blue-piece'), + cells: () => Array.from(document.querySelectorAll("td")), + allPieces: () => Array.from(document.querySelectorAll('.piece')), + playerPieces: (isRedTurn) => isRedTurn ? + Array.from(document.querySelectorAll('.red-piece:not(#default-red-piece')) : + Array.from(document.querySelectorAll('.blue-piece:not(#default-blue-piece')), + redTurnText: () => Array.from(document.querySelectorAll(".red-turn-text")), + blueTurnText: () => Array.from(document.querySelectorAll(".blue-turn-text")), + resetButton: document.getElementById('reset-button'), + undoButton: document.getElementById('undo-button'), +} const listenerManager = { /** @type {{element: Element, type: string, listener: (event: Event) => void}[]} */ @@ -158,12 +161,12 @@ const listenerManager = { const resetBoard = () => { // resetCells - cells().forEach(cell => { + dom.cells().forEach(cell => { cell.classList.remove(constants.blinkingClassName); }); // reset pieces - allPieces().forEach(piece => { + dom.allPieces().forEach(piece => { if (piece.classList.contains(constants.activePlayerPieceClassName)) { piece.classList.toggle(constants.activePlayerPieceClassName); } @@ -190,10 +193,10 @@ const movePiece = async (sourceIndex, destIndex) => { // create clone for new position const destPiece = piece.cloneNode(true); // add to destination cell - cells()[destIndex].appendChild(destPiece); + dom.cells()[destIndex].appendChild(destPiece); // start animations - const destAnimation = cells()[destIndex].animate([{ opacity: 0 }, { opacity: 1 }], { duration: 1000, iterations: 1 }) + const destAnimation = dom.cells()[destIndex].animate([{ opacity: 0 }, { opacity: 1 }], { duration: 1000, iterations: 1 }) const sourceAnimation = piece.animate([{ opacity: 1, width: '45px', @@ -264,7 +267,7 @@ const nextMove = () => { if (previousSelectedPieceId !== undefined) { const previousPiece = document.getElementById(previousSelectedPieceId); previousPiece.classList.remove(constants.selectedPieceClassName); - cells().forEach(cell => { + dom.cells().forEach(cell => { cell.classList.remove(constants.blinkingClassName); }); } @@ -284,7 +287,7 @@ const nextMove = () => { const pieceIndex = gameBoard.board.indexOf(pieceId); const allowedMoveIndices = getAllowedMoveIndicesForIndex(pieceIndex); allowedMoveIndices.forEach(i => { - const cell = cells()[i]; + const cell = dom.cells()[i]; listenerManager.addListener(cell, 'click', async () => await makeMove(i)); cell.classList.add(constants.blinkingClassName); }); @@ -303,7 +306,7 @@ const nextMove = () => { } // mark active pieces - const playerPieces = player.isRedTurn ? redPieces() : bluePieces() + const playerPieces = dom.playerPieces(player.isRedTurn); playerPieces.forEach(pp => { pp.classList.add(constants.activePlayerPieceClassName); listenerManager.addListener(pp, 'click', selectPiece); @@ -311,8 +314,8 @@ const nextMove = () => { }; // reset text - redTurnText().forEach(t => t.classList.remove(constants.selectedPlayerTextClassName)); - blueTurnText().forEach(t => t.classList.remove(constants.selectedPlayerTextClassName)); + dom.redTurnText().forEach(t => t.classList.remove(constants.selectedPlayerTextClassName)); + dom.blueTurnText().forEach(t => t.classList.remove(constants.selectedPlayerTextClassName)); // changePlayer // 1. flip flag @@ -320,19 +323,19 @@ const nextMove = () => { // 3. set click callbacks if (player.isRedTurn) { player.isRedTurn = false; - blueTurnText().forEach(t => t.classList.add(constants.selectedPlayerTextClassName)); + dom.blueTurnText().forEach(t => t.classList.add(constants.selectedPlayerTextClassName)); } else { player.isRedTurn = true; - redTurnText().forEach(t => t.classList.add(constants.selectedPlayerTextClassName)); + dom.redTurnText().forEach(t => t.classList.add(constants.selectedPlayerTextClassName)); } if (player.moveHistory.length === 0) { - undoButton.disabled = true; - resetButton.disabled = true; + dom.undoButton.disabled = true; + dom.resetButton.disabled = true; } else { - undoButton.disabled = false; - resetButton.disabled = false; + dom.undoButton.disabled = false; + dom.resetButton.disabled = false; } player.selectedPieceId = undefined; @@ -377,10 +380,8 @@ const checkForWin = () => { return isSquare; }; - const playerCoords = elementsToCoords( - player.isRedTurn ? redPieces() : bluePieces()) - const otherCoords = elementsToCoords( - player.isRedTurn ? bluePieces() : redPieces()); + const playerCoords = elementsToCoords(dom.playerPieces(player.isRedTurn)) + const otherCoords = elementsToCoords(dom.playerPieces(!player.isRedTurn)); /** @type {Coord[]} */ const squareCoords = [ new Coord(0, 0), @@ -442,16 +443,16 @@ const init = () => { gameBoard.board.forEach((value, index) => { if (value !== null) { const isRed = value < 4; - const defaultPiece = isRed ? defaultRedPiece : defaultBluePiece; + const defaultPiece = isRed ? dom.defaultRedPiece : dom.defaultBluePiece; const newPiece = defaultPiece.cloneNode(true); newPiece.id = value; - cells()[index].appendChild(newPiece); + dom.cells()[index].appendChild(newPiece); } }); // hook up buttons let blockActions = false; - resetButton.addEventListener('click', () => { + dom.resetButton.addEventListener('click', () => { if (blockActions) { return; } @@ -465,7 +466,7 @@ const init = () => { } blockActions = false; }); - undoButton.addEventListener('click', async () => { + dom.undoButton.addEventListener('click', async () => { if (blockActions) { return; }