[#45] Code refactoring & removing highlights when another piece is se…

…lected
Ido-Barnea · Jan 18, 2024 · 23157ed · 23157ed
1 parent cf88a7b
commit 23157ed
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/development/code/LogicAdapter.ts b/development/code/LogicAdapter.ts
@@ -1,12 +1,12 @@
 import { game } from './Game';
 import { MOUSE_HIGHLIGHT_CLASS, SELECTED_PIECE_CLASS } from './logic/Constants';
-import { isAllowedToAct, onPieceFellOffTheBoard, onPlayerAction } from './logic/PieceLogic';
+import { isPlayerAllowedToAct, onPieceFellOffTheBoard, onPlayerAction } from './logic/PieceLogic';
 import { comparePositions, convertSquareIdToPosition } from './logic/Utilities';
 import { Item } from './logic/items/Items';
 import { Piece } from './logic/pieces/Pieces';
 import { Position, Square } from './logic/pieces/PiecesUtilities';
 import { BaseRule } from './logic/rules/BaseRule';
-import { destroyElementOnBoard, getAllSquareElements, getSquareElementById, highlightSquare, moveElementOnBoard, spawnItemElementOnBoard, spawnPieceElementOnBoard } from './ui/BoardManager';
+import { destroyElementOnBoard, getHighlightedSquareElements, getSquareElementById, highlightSquare, moveElementOnBoard, spawnItemElementOnBoard, spawnPieceElementOnBoard } from './ui/BoardManager';
 import { renderPlayersInformation, renderNewRule } from './ui/Screen';
 
 export function renderScreen() {
@@ -82,7 +82,7 @@ export function onFellOffTheBoardTriggered(
 
   const draggedElementPosition = getPositionFromSquareId(squareId, boardId);
   const draggedPiece = findPieceAtPosition(draggedElementPosition);
-  if (!draggedPiece || !isAllowedToAct(draggedPiece)) return;
+  if (!draggedPiece || !isPlayerAllowedToAct(draggedPiece)) return;
 
   onPieceFellOffTheBoard(draggedPiece);
 }
@@ -95,11 +95,9 @@ function highlightLegalMoves(
   const isAlreadySelected = pieceElement.classList.contains(SELECTED_PIECE_CLASS);
 
   // Remove all highlights
-  const allSquareElements = getAllSquareElements(boardId);
+  const allSquareElements = getHighlightedSquareElements(boardId);
   for (const squareElement of allSquareElements) {
-    if (!squareElement.classList.contains(MOUSE_HIGHLIGHT_CLASS)) {
-      highlightSquare(squareElement, false, false);
-    }
+    highlightSquare(squareElement, false, false);
   }
 
   if (isAlreadySelected) {
@@ -109,9 +107,7 @@ function highlightLegalMoves(
       const squareElement = getSquareElementById(positionSquareId, boardId) as HTMLElement;
       highlightSquare(squareElement, true, false);
     }
-  }
 
-  if (isAlreadySelected) {
     pieceElement.classList.remove(SELECTED_PIECE_CLASS);
   } else {
     pieceElement.classList.add(SELECTED_PIECE_CLASS);
@@ -127,7 +123,7 @@ export function onPieceSelected(
 
   const pieceElementPosition = getPositionFromSquareId(squareId, boardId);
   const piece = findPieceAtPosition(pieceElementPosition);
-  if (!piece || !isAllowedToAct(piece)) return;
+  if (!piece || !isPlayerAllowedToAct(piece)) return;
 
   highlightLegalMoves(piece, pieceElement, boardId);
 }

diff --git a/development/code/logic/PieceLogic.ts b/development/code/logic/PieceLogic.ts
@@ -19,7 +19,7 @@ function validatePlayerAction(
   draggedPiece: Piece,
   target: Piece | Square | Item,
 ): boolean {
-  if (!isAllowedToAct(draggedPiece)) return false;
+  if (!isPlayerAllowedToAct(draggedPiece)) return false;
   if (draggedPiece === target) return false;
   if (draggedPiece.position.boardId !== target.position.boardId) return false;
 
@@ -138,7 +138,7 @@ function castle(
   return true;
 }
 
-export function isAllowedToAct(draggedPiece: Piece) {
+export function isPlayerAllowedToAct(draggedPiece: Piece) {
   return draggedPiece.player === game.getCurrentPlayer();
 }
 

diff --git a/development/code/ui/Board.ts b/development/code/ui/Board.ts
@@ -12,6 +12,7 @@ export class ChessBoard {
   boardButtonElement: HTMLElement;
   lightSquareColor: string;
   darkSquareColor: string;
+  highlightedSquares: Array<HTMLElement>;
 
   constructor(
     boardId: string,
@@ -25,6 +26,7 @@ export class ChessBoard {
     this.boardButtonElement = boardButtonElement;
     this.darkSquareColor = darkSquareColor;
     this.lightSquareColor = lightSquareColor;
+    this.highlightedSquares = [];
 
     this.initializeBoard();
   }

diff --git a/development/code/ui/BoardManager.ts b/development/code/ui/BoardManager.ts
@@ -98,12 +98,9 @@ export function createNotationGraphics(notation: string) {
   }
 }
 
-export function getAllSquareElements(boardId: string): Array<HTMLElement> {
+export function getHighlightedSquareElements(boardId: string): Array<HTMLElement> {
   const board = getBoardbyId(boardId);
-  const boardElement = board.boardElement;
-
-  const squares = boardElement.querySelectorAll('[square-id]');
-  return Array.from(squares) as Array<HTMLElement>;
+  return board.highlightedSquares;
 }
 
 export function getSquareElementById(
@@ -166,21 +163,44 @@ function findSquareElement(element: HTMLElement): HTMLElement | undefined {
   return element && element.classList.contains('square') ? element : undefined;
 }
 
+function getBoardBySquareElement(squareElement: HTMLElement): ChessBoard {
+  let boardElement = squareElement.parentNode as HTMLElement ?? undefined;
+
+  while (boardElement && !boardElement.classList.contains('board')) {
+    boardElement = boardElement.parentNode as HTMLElement;
+  }
+
+  return getBoardbyId(boardElement.id);
+}
+
 export function highlightSquare(targetElement: HTMLElement, shouldAddHighlight: boolean, isMouseHighlight: boolean) {
   const squareElement = findSquareElement(targetElement);
 
   if (squareElement) {
+    const board = getBoardBySquareElement(squareElement);
+
     if (shouldAddHighlight) {
       if (isMouseHighlight && !targetElement.classList.contains(LIGHT_GRAY_SQUARE_COLOR)) {
         targetElement.classList.add(MOUSE_HIGHLIGHT_CLASS);
+      } else {
+        if (board.highlightedSquares.indexOf(squareElement) == -1) {
+          board.highlightedSquares.push(squareElement);
+        }
       }
+
       targetElement.classList.add(LIGHT_GRAY_SQUARE_COLOR);
     } else {
-      if (isMouseHighlight && targetElement.classList.contains(MOUSE_HIGHLIGHT_CLASS)) {
+      const shouldRemoveMouseHighlight = isMouseHighlight && targetElement.classList.contains(MOUSE_HIGHLIGHT_CLASS);
+      const shouldRemoveHighlight = !isMouseHighlight || shouldRemoveMouseHighlight;
+
+      if (shouldRemoveMouseHighlight) {
         targetElement.classList.remove(MOUSE_HIGHLIGHT_CLASS);
+      }
+
+      if (shouldRemoveHighlight) {
         targetElement.classList.remove(LIGHT_GRAY_SQUARE_COLOR);
-      } else if (!isMouseHighlight) {
-        targetElement.classList.remove(LIGHT_GRAY_SQUARE_COLOR);
+        const indexToRemove = board.highlightedSquares.indexOf(squareElement);
+        board.highlightedSquares.splice(indexToRemove, 1);
       }
     }
   }