From 93873c8faca8c807c37c2c8869ac6fb1ea3dcfd4 Mon Sep 17 00:00:00 2001 From: JoelVenable <30368779+JoelVenable@users.noreply.github.com> Date: Tue, 7 May 2019 21:26:42 -0500 Subject: [PATCH] Updated take pieces functionality and reorganized modules into subfolders --- api/database.json | 756 +----------------- src/scripts/main.js | 4 +- src/scripts/modules/{ => API}/API.js | 0 src/scripts/modules/{ => API}/APIinterface.js | 11 +- .../modules/{ => DOM}/buildDOMElement.js | 1 - src/scripts/modules/{ => DOM}/drawBoard.js | 2 +- src/scripts/modules/{ => DOM}/font.js | 2 +- src/scripts/modules/clickHandler.js | 13 +- src/scripts/modules/moveHandler/movePiece.js | 104 +++ src/scripts/modules/movePiece.js | 68 -- src/scripts/modules/newGame.js | 2 +- src/scripts/modules/placePieces.js | 6 +- 12 files changed, 148 insertions(+), 821 deletions(-) rename src/scripts/modules/{ => API}/API.js (100%) rename src/scripts/modules/{ => API}/APIinterface.js (74%) rename src/scripts/modules/{ => DOM}/buildDOMElement.js (87%) rename src/scripts/modules/{ => DOM}/drawBoard.js (93%) rename src/scripts/modules/{ => DOM}/font.js (90%) create mode 100755 src/scripts/modules/moveHandler/movePiece.js delete mode 100755 src/scripts/modules/movePiece.js diff --git a/api/database.json b/api/database.json index 58f8c05..4775bae 100644 --- a/api/database.json +++ b/api/database.json @@ -2,7 +2,7 @@ "games": [ { "turnColor": "white", - "turnNumber": 8, + "turnNumber": 16, "whitePieces": [ { "type": "pn", @@ -27,14 +27,14 @@ }, { "type": "pn", - "x": 6, + "x": 4, "y": 3, - "moved": false, + "moved": true, "id": 3 }, { "type": "pn", - "x": 4, + "x": 3, "y": 4, "moved": true, "id": 4 @@ -48,16 +48,16 @@ }, { "type": "pn", - "x": 4, - "y": 6, + "x": 3, + "y": 5, "moved": true, "id": 6 }, { "type": "pn", - "x": 6, + "x": 4, "y": 7, - "moved": false, + "moved": true, "id": 7 }, { @@ -83,23 +83,23 @@ }, { "type": "qn", - "moved": false, - "x": 7, + "x": 3, "y": 3, + "moved": true, "id": 11 }, { "type": "ki", - "x": 7, - "y": 4, - "moved": false, + "x": 6, + "y": 5, + "moved": true, "id": 12 }, { "type": "bi", - "moved": false, - "x": 7, - "y": 5, + "x": 3, + "y": 1, + "moved": true, "id": 13 }, { @@ -155,23 +155,23 @@ }, { "type": "pn", - "x": 1, + "x": 3, "y": 5, - "moved": false, + "moved": true, "id": 5 }, { "type": "pn", - "x": 1, + "x": 3, "y": 6, - "moved": false, + "moved": true, "id": 6 }, { "type": "pn", - "x": 1, + "x": 3, "y": 7, - "moved": false, + "moved": true, "id": 7 }, { @@ -184,15 +184,15 @@ { "type": "kn", "x": 4, - "y": 3, + "y": 1, "moved": true, "id": 9 }, { "type": "bi", - "moved": false, - "x": 0, - "y": 2, + "x": 3, + "y": 3, + "moved": true, "id": 10 }, { @@ -218,8 +218,8 @@ }, { "type": "kn", - "x": 2, - "y": 4, + "x": 4, + "y": 5, "moved": true, "id": 14 }, @@ -233,704 +233,6 @@ ], "id": 1 }, - { - "turnColor": "white", - "turnNumber": 4, - "whitePieces": [ - { - "type": "pn", - "x": 6, - "y": 0, - "moved": false, - "id": 0 - }, - { - "type": "pn", - "x": 6, - "y": 1, - "moved": false, - "id": 1 - }, - { - "type": "pn", - "x": 6, - "y": 2, - "moved": false, - "id": 2 - }, - { - "type": "pn", - "x": 4, - "y": 3, - "moved": true, - "id": 3 - }, - { - "type": "pn", - "x": 6, - "y": 4, - "moved": false, - "id": 4 - }, - { - "type": "pn", - "x": 6, - "y": 5, - "moved": false, - "id": 5 - }, - { - "type": "pn", - "x": 6, - "y": 6, - "moved": false, - "id": 6 - }, - { - "type": "pn", - "x": 6, - "y": 7, - "moved": false, - "id": 7 - }, - { - "type": "rk", - "moved": false, - "x": 7, - "y": 0, - "id": 8 - }, - { - "type": "kn", - "moved": false, - "x": 7, - "y": 1, - "id": 9 - }, - { - "type": "bi", - "moved": false, - "x": 7, - "y": 2, - "id": 10 - }, - { - "type": "qn", - "x": 5, - "y": 3, - "moved": true, - "id": 11 - }, - { - "type": "ki", - "x": 7, - "y": 4, - "moved": false, - "id": 12 - }, - { - "type": "bi", - "moved": false, - "x": 7, - "y": 5, - "id": 13 - }, - { - "type": "kn", - "x": 5, - "y": 5, - "moved": true, - "id": 14 - }, - { - "type": "rk", - "moved": false, - "x": 7, - "y": 7, - "id": 15 - } - ], - "blackPieces": [ - { - "type": "pn", - "x": 1, - "y": 0, - "moved": false, - "id": 0 - }, - { - "type": "pn", - "x": 1, - "y": 1, - "moved": false, - "id": 1 - }, - { - "type": "pn", - "x": 1, - "y": 2, - "moved": false, - "id": 2 - }, - { - "type": "pn", - "x": 3, - "y": 3, - "moved": true, - "id": 3 - }, - { - "type": "pn", - "x": 1, - "y": 4, - "moved": false, - "id": 4 - }, - { - "type": "pn", - "x": 3, - "y": 5, - "moved": true, - "id": 5 - }, - { - "type": "pn", - "x": 1, - "y": 6, - "moved": false, - "id": 6 - }, - { - "type": "pn", - "x": 1, - "y": 7, - "moved": false, - "id": 7 - }, - { - "type": "rk", - "moved": false, - "x": 0, - "y": 0, - "id": 8 - }, - { - "type": "kn", - "moved": false, - "x": 0, - "y": 1, - "id": 9 - }, - { - "type": "bi", - "x": 2, - "y": 4, - "moved": true, - "id": 10 - }, - { - "type": "qn", - "moved": false, - "x": 0, - "y": 3, - "id": 11 - }, - { - "type": "ki", - "x": 0, - "y": 4, - "moved": false, - "id": 12 - }, - { - "type": "bi", - "moved": false, - "x": 0, - "y": 5, - "id": 13 - }, - { - "type": "kn", - "moved": false, - "x": 0, - "y": 6, - "id": 14 - }, - { - "type": "rk", - "moved": false, - "x": 0, - "y": 7, - "id": 15 - } - ], - "id": 2 - }, - { - "turnColor": "black", - "turnNumber": 4, - "whitePieces": [ - { - "type": "pn", - "x": 6, - "y": 0, - "moved": false, - "id": 0 - }, - { - "type": "pn", - "x": 6, - "y": 1, - "moved": false, - "id": 1 - }, - { - "type": "pn", - "x": 4, - "y": 2, - "moved": true, - "id": 2 - }, - { - "type": "pn", - "x": 6, - "y": 3, - "moved": false, - "id": 3 - }, - { - "type": "pn", - "x": 3, - "y": 4, - "moved": true, - "id": 4 - }, - { - "type": "pn", - "x": 6, - "y": 5, - "moved": false, - "id": 5 - }, - { - "type": "pn", - "x": 5, - "y": 6, - "moved": true, - "id": 6 - }, - { - "type": "pn", - "x": 6, - "y": 7, - "moved": false, - "id": 7 - }, - { - "type": "rk", - "moved": false, - "x": 7, - "y": 0, - "id": 8 - }, - { - "type": "kn", - "moved": false, - "x": 7, - "y": 1, - "id": 9 - }, - { - "type": "bi", - "moved": false, - "x": 7, - "y": 2, - "id": 10 - }, - { - "type": "qn", - "moved": false, - "x": 7, - "y": 3, - "id": 11 - }, - { - "type": "ki", - "x": 7, - "y": 4, - "moved": false, - "id": 12 - }, - { - "type": "bi", - "moved": false, - "x": 7, - "y": 5, - "id": 13 - }, - { - "type": "kn", - "moved": false, - "x": 7, - "y": 6, - "id": 14 - }, - { - "type": "rk", - "moved": false, - "x": 7, - "y": 7, - "id": 15 - } - ], - "blackPieces": [ - { - "type": "pn", - "x": 1, - "y": 0, - "moved": false, - "id": 0 - }, - { - "type": "pn", - "x": 1, - "y": 1, - "moved": false, - "id": 1 - }, - { - "type": "pn", - "x": 1, - "y": 2, - "moved": false, - "id": 2 - }, - { - "type": "pn", - "x": 1, - "y": 3, - "moved": false, - "id": 3 - }, - { - "type": "pn", - "x": 1, - "y": 4, - "moved": false, - "id": 4 - }, - { - "type": "pn", - "x": 3, - "y": 5, - "moved": true, - "id": 5 - }, - { - "type": "pn", - "x": 1, - "y": 6, - "moved": false, - "id": 6 - }, - { - "type": "pn", - "x": 1, - "y": 7, - "moved": false, - "id": 7 - }, - { - "type": "rk", - "moved": false, - "x": 0, - "y": 0, - "id": 8 - }, - { - "type": "kn", - "x": 4, - "y": 1, - "moved": true, - "id": 9 - }, - { - "type": "bi", - "moved": false, - "x": 0, - "y": 2, - "id": 10 - }, - { - "type": "qn", - "moved": false, - "x": 0, - "y": 3, - "id": 11 - }, - { - "type": "ki", - "x": 0, - "y": 4, - "moved": false, - "id": 12 - }, - { - "type": "bi", - "moved": false, - "x": 0, - "y": 5, - "id": 13 - }, - { - "type": "kn", - "moved": false, - "x": 0, - "y": 6, - "id": 14 - }, - { - "type": "rk", - "moved": false, - "x": 0, - "y": 7, - "id": 15 - } - ], - "id": 3 - }, - { - "turnColor": "white", - "turnNumber": 1, - "whitePieces": [ - { - "type": "pn", - "x": 6, - "y": 0, - "moved": false, - "id": 0 - }, - { - "type": "pn", - "x": 6, - "y": 1, - "moved": false, - "id": 1 - }, - { - "type": "pn", - "x": 6, - "y": 2, - "moved": false, - "id": 2 - }, - { - "type": "pn", - "x": 6, - "y": 3, - "moved": false, - "id": 3 - }, - { - "type": "pn", - "x": 6, - "y": 4, - "moved": false, - "id": 4 - }, - { - "type": "pn", - "x": 6, - "y": 5, - "moved": false, - "id": 5 - }, - { - "type": "pn", - "x": 6, - "y": 6, - "moved": false, - "id": 6 - }, - { - "type": "pn", - "x": 6, - "y": 7, - "moved": false, - "id": 7 - }, - { - "type": "rk", - "moved": false, - "x": 7, - "y": 0, - "id": 8 - }, - { - "type": "kn", - "moved": false, - "x": 7, - "y": 1, - "id": 9 - }, - { - "type": "bi", - "moved": false, - "x": 7, - "y": 2, - "id": 10 - }, - { - "type": "qn", - "moved": false, - "x": 7, - "y": 3, - "id": 11 - }, - { - "type": "ki", - "x": 7, - "y": 4, - "moved": false, - "id": 12 - }, - { - "type": "bi", - "moved": false, - "x": 7, - "y": 5, - "id": 13 - }, - { - "type": "kn", - "moved": false, - "x": 7, - "y": 6, - "id": 14 - }, - { - "type": "rk", - "moved": false, - "x": 7, - "y": 7, - "id": 15 - } - ], - "blackPieces": [ - { - "type": "pn", - "x": 1, - "y": 0, - "moved": false, - "id": 0 - }, - { - "type": "pn", - "x": 1, - "y": 1, - "moved": false, - "id": 1 - }, - { - "type": "pn", - "x": 1, - "y": 2, - "moved": false, - "id": 2 - }, - { - "type": "pn", - "x": 1, - "y": 3, - "moved": false, - "id": 3 - }, - { - "type": "pn", - "x": 1, - "y": 4, - "moved": false, - "id": 4 - }, - { - "type": "pn", - "x": 1, - "y": 5, - "moved": false, - "id": 5 - }, - { - "type": "pn", - "x": 1, - "y": 6, - "moved": false, - "id": 6 - }, - { - "type": "pn", - "x": 1, - "y": 7, - "moved": false, - "id": 7 - }, - { - "type": "rk", - "moved": false, - "x": 0, - "y": 0, - "id": 8 - }, - { - "type": "kn", - "moved": false, - "x": 0, - "y": 1, - "id": 9 - }, - { - "type": "bi", - "moved": false, - "x": 0, - "y": 2, - "id": 10 - }, - { - "type": "qn", - "moved": false, - "x": 0, - "y": 3, - "id": 11 - }, - { - "type": "ki", - "x": 0, - "y": 4, - "moved": false, - "id": 12 - }, - { - "type": "bi", - "moved": false, - "x": 0, - "y": 5, - "id": 13 - }, - { - "type": "kn", - "moved": false, - "x": 0, - "y": 6, - "id": 14 - }, - { - "type": "rk", - "moved": false, - "x": 0, - "y": 7, - "id": 15 - } - ], - "id": 4 - } + ] } \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js index 0488ee8..9c696b6 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -2,6 +2,6 @@ import { drawBoard -} from "./modules/drawBoard"; -import "./modules/APIinterface"; +} from "./modules/DOM/drawBoard"; +import "./modules/API/APIinterface"; import "./modules/clickHandler"; \ No newline at end of file diff --git a/src/scripts/modules/API.js b/src/scripts/modules/API/API.js similarity index 100% rename from src/scripts/modules/API.js rename to src/scripts/modules/API/API.js diff --git a/src/scripts/modules/APIinterface.js b/src/scripts/modules/API/APIinterface.js similarity index 74% rename from src/scripts/modules/APIinterface.js rename to src/scripts/modules/API/APIinterface.js index 85be4c5..6e9ad4e 100755 --- a/src/scripts/modules/APIinterface.js +++ b/src/scripts/modules/API/APIinterface.js @@ -3,16 +3,15 @@ import { } from "./API"; import { placePieces -} from "./placePieces"; +} from "../placePieces"; import { makeNewGameData -} from "./newGame"; +} from "../newGame"; // Game id is stored in the board's 'data-gameid' attribute // API.games.read(1) // .then(placePieces); - makeNewGame(); function makeNewGame() { @@ -27,10 +26,8 @@ function fetchGameData(gameID) { function updateMove(newPieceObject) { let gameID = parseInt(document.getElementById("board").getAttribute("data-gameid")); - API.games.update(gameID, newPieceObject).then(pieces => { - console.log(pieces); - placePieces(pieces); - }); + API.games.update(gameID, newPieceObject) + .then(placePieces); } diff --git a/src/scripts/modules/buildDOMElement.js b/src/scripts/modules/DOM/buildDOMElement.js similarity index 87% rename from src/scripts/modules/buildDOMElement.js rename to src/scripts/modules/DOM/buildDOMElement.js index 712a9f9..f22c6a2 100644 --- a/src/scripts/modules/buildDOMElement.js +++ b/src/scripts/modules/DOM/buildDOMElement.js @@ -6,7 +6,6 @@ module.exports.buildDOMElement = function (tagName, parentElement, id, classArra element.classList.add(cls); }); } catch (e) { - console.log("No arguments passed to classArray"); } if (attributesObject) { for (const key of Object.keys(attributesObject)) { diff --git a/src/scripts/modules/drawBoard.js b/src/scripts/modules/DOM/drawBoard.js similarity index 93% rename from src/scripts/modules/drawBoard.js rename to src/scripts/modules/DOM/drawBoard.js index 1281a22..fd9f86f 100755 --- a/src/scripts/modules/drawBoard.js +++ b/src/scripts/modules/DOM/drawBoard.js @@ -3,7 +3,7 @@ import { } from "./buildDOMElement"; import { getSquareColor -} from "./placePieces"; +} from "../placePieces"; drawBoard(); diff --git a/src/scripts/modules/font.js b/src/scripts/modules/DOM/font.js similarity index 90% rename from src/scripts/modules/font.js rename to src/scripts/modules/DOM/font.js index 33fa9cf..03725c0 100755 --- a/src/scripts/modules/font.js +++ b/src/scripts/modules/DOM/font.js @@ -2,7 +2,7 @@ module.exports.getFontChar = function (piece, color, squareColor) { let lookup = `${color}${piece.type}`; let char = values[lookup]; - console.log(char); + if (squareColor === "black") char = char.toUpperCase(); return char; }; diff --git a/src/scripts/modules/clickHandler.js b/src/scripts/modules/clickHandler.js index dde32bd..269db43 100755 --- a/src/scripts/modules/clickHandler.js +++ b/src/scripts/modules/clickHandler.js @@ -6,14 +6,14 @@ import { } from "./showLegalMoves"; import { movePiece -} from "./movePiece"; +} from "./moveHandler/movePiece"; const chessboard = document.getElementById("board"); chessboard.addEventListener("click", clickHandler); function clickHandler(event) { - let targetSquare = getTargetSquare(event); + let targetSquare = event.target.id; if (containsActiveColorPiece(targetSquare)) { setActivePiece(targetSquare); showLegalMoves(targetSquare); @@ -29,15 +29,6 @@ function clickHandler(event) { -function getTargetSquare(event) { - let squareClicked = event.target; - // get square clicked, finding the parent if the square-inner is target - if (squareClicked.classList.contains("square-inner")) { - squareClicked = squareClicked.parentNode; - } - return squareClicked.id; -} - function containsActiveColorPiece(square) { let activeColor = chessboard.getAttribute("data-turnColor"); let target = document.getElementById(square); diff --git a/src/scripts/modules/moveHandler/movePiece.js b/src/scripts/modules/moveHandler/movePiece.js new file mode 100755 index 0000000..285615f --- /dev/null +++ b/src/scripts/modules/moveHandler/movePiece.js @@ -0,0 +1,104 @@ +import { + getPieceData +} from "../getPieceData"; +import { + fetchGameData, + updateMove +} from "../API/APIinterface"; +import { + isOccupied +} from "../possibleMoves/helpers"; + + +module.exports.movePiece = function (targetSquare) { + fetchGameData(getGameID()) + .then(gameObject => { + updateMove(updateGameObject(gameObject, targetSquare)); + }); +}; + + + + + +function updateGameObject(gameObject, targetSquare) { + const myColor = getActiveColor(), + myPieces = gameObject[`${myColor}Pieces`], + enemyColor = getEnemyColor(), + enemyPieces = gameObject[`${enemyColor}Pieces`], + targetElement = document.getElementById(targetSquare); + + + // Build new object for database + let newGameObject = { + turnColor: enemyColor, + turnNumber: gameObject.turnNumber + }; + if (myColor === "black") newGameObject.turnNumber++; + + + if (isOccupied(targetElement)) { + newGameObject[`${enemyColor}Pieces`] = takeEnemyPiece(targetSquare, enemyPieces); + } + + newGameObject[`${myColor}Pieces`] = updateMyPieces(targetSquare, myPieces); + + return newGameObject; +} + + + +function updateMyPieces(targetSquare, myPieces) { + + let newPieceObject = pieceObjectFactory(targetSquare); + // find piece to update + + // remove existing piece from array + let newPieces = myPieces + .filter(piece => piece.id !== newPieceObject.id); + newPieces.push(newPieceObject); + + return newPieces; +} + + + +function takeEnemyPiece(targetID, enemyPieces) { + let pieceToRemove = getPieceData(targetID); + return enemyPieces + .filter(piece => piece.id !== pieceToRemove.id); + // Return the modified array +} + + +function pieceObjectFactory(targetSquare) { + let chessboard = document.getElementById("board"), + activeSquareID = chessboard.getAttribute("data-activesquare-id"), + pieceToMove = getPieceData(activeSquareID), + newSquare = targetSquare.split("--"); + // TODO: Check for pawn on last row + + return { + type: pieceToMove.type, + x: parseInt(newSquare[1]), + y: parseInt(newSquare[2]), + moved: true, + id: pieceToMove.id + }; + +} + + +function getActiveColor() { + return document.getElementById("board").getAttribute("data-turncolor"); +} + +function getEnemyColor() { + let activeColor = getActiveColor(); + if (activeColor === "white") return "black"; + else return "white"; +} + +function getGameID() { + return parseInt(document.getElementById("board").getAttribute("data-gameID")); +} \ No newline at end of file diff --git a/src/scripts/modules/movePiece.js b/src/scripts/modules/movePiece.js deleted file mode 100755 index 1922885..0000000 --- a/src/scripts/modules/movePiece.js +++ /dev/null @@ -1,68 +0,0 @@ -import { - getPieceData -} from "./getPieceData"; -import { - fetchGameData, - updateMove -} from "./APIinterface"; - -module.exports.movePiece = function (targetSquare) { - fetchGameData(getGameID()) - .then(gameObject => { - updateMove(updateGameObject(gameObject, targetSquare)); - }); -}; - - - - - -function updateGameObject(gameObject, targetSquare) { - let activeColor = getActiveColor(); - let newPieceObject = pieceObjectFactory(targetSquare); - // find piece to update - let colorPieces = gameObject[`${activeColor}Pieces`]; - let pieceIndex = colorPieces - .findIndex(piece => piece.id === newPieceObject.id); - let newData = {}; - colorPieces.splice(pieceIndex, 1, newPieceObject); - newData[`${activeColor}Pieces`] = colorPieces; - if (activeColor === "white") { - newData.turnColor = "black"; - } else { - newData.turnColor = "white"; - newData.turnNumber = ++gameObject.turnNumber; - } - return newData; -} - - - - - - -function pieceObjectFactory(targetSquare) { - let chessboard = document.getElementById("board"), - activeSquareID = chessboard.getAttribute("data-activesquare-id"), - pieceToMove = getPieceData(activeSquareID), - newSquare = targetSquare.split("--"); - // TODO: Check for pawn on last row - - return { - type: pieceToMove.type, - x: parseInt(newSquare[1]), - y: parseInt(newSquare[2]), - moved: true, - id: pieceToMove.id - }; - -} - - -function getActiveColor() { - return document.getElementById("board").getAttribute("data-turncolor"); -} - -function getGameID() { - return parseInt(document.getElementById("board").getAttribute("data-gameID")); -} \ No newline at end of file diff --git a/src/scripts/modules/newGame.js b/src/scripts/modules/newGame.js index 16f7369..b1f2de2 100755 --- a/src/scripts/modules/newGame.js +++ b/src/scripts/modules/newGame.js @@ -1,6 +1,6 @@ import { API -} from "./API"; +} from "./API/API"; import { placePieces } from "./placePieces"; diff --git a/src/scripts/modules/placePieces.js b/src/scripts/modules/placePieces.js index 87c77cf..5eb480c 100755 --- a/src/scripts/modules/placePieces.js +++ b/src/scripts/modules/placePieces.js @@ -1,6 +1,6 @@ import { getFontChar -} from "./font"; +} from "./DOM/font"; module.exports.placePieces = function (game) { clearBoard(); @@ -23,7 +23,9 @@ module.exports.getSquareColor = function (squareID) { function clearBoard() { let squares = document.querySelectorAll(".square"); squares.forEach(square => { - square.classList.remove("occupied", "occupied--white", "occupied--black"); + if (square.classList.contains("square-black")) square.innerHTML = "+"; + else square.innerHTML = " "; + square.classList.remove("occupied", "occupied--white", "occupied--black", "available", "active"); square.removeAttribute("data-piece"); square.removeAttribute("data-hasmoved"); });