Updated take pieces functionality and reorganized modules into subfolders

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";

src/scripts/modules/APIinterface.js → 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);
 }
 
 

src/scripts/modules/buildDOMElement.js → 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)) {

src/scripts/modules/drawBoard.js → src/scripts/modules/DOM/drawBoard.js

@@ -3,7 +3,7 @@ import {
 } from "./buildDOMElement";
 import {
   getSquareColor
-} from "./placePieces";
+} from "../placePieces";
 
 
 drawBoard();

src/scripts/modules/font.js → 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;
 };

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);

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"));
+}

src/scripts/modules/newGame.js

@@ -1,6 +1,6 @@
 import {
   API
-} from "./API";
+} from "./API/API";
 import {
   placePieces
 } from "./placePieces";

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");
   });