[trivial] Remove all highighlights on click on screen

core/development/LogicAdapter.ts

@@ -135,6 +135,13 @@ function highlightLegalMoves(piece: Piece, boardId: string) {
   }
 }
 
+export function removeAllHighlights(boardId: string) {
+  const allSquareElements = getAllSquareElements(boardId);
+  for (const squareElement of allSquareElements) {
+    highlightLegalMove(squareElement, false);
+  }
+}
+
 export function onPieceSelected(pieceElement: HTMLElement, boardId: string) {
   const squareId = getSquareIdByElement(pieceElement);
   if (!squareId) return;

core/development/ui/Events.ts

@@ -4,11 +4,15 @@ import {
   onPieceSelected,
   canPlaceItemOnBoard,
   returnItemToInventory,
+  removeAllHighlights,
 } from '../LogicAdapter';
 import {
   HEAVEN_BOARD_BUTTON_ID,
+  HEAVEN_BOARD_ID,
   HELL_BOARD_BUTTON_ID,
+  HELL_BOARD_ID,
   OVERWORLD_BOARD_BUTTON_ID,
+  OVERWORLD_BOARD_ID,
 } from '../Constants';
 import { HEAVEN_BOARD, HELL_BOARD, OVERWORLD_BOARD } from './BoardManager';
 
@@ -40,15 +44,16 @@ export function initializeEventListeners() {
   const pieces = document.querySelectorAll('.piece');
   pieces.forEach((pieceElement) => {
     pieceElement.addEventListener('mousedown', onPieceMouseDown);
-    pieceElement.addEventListener('click', onMouseClick);
+    pieceElement.addEventListener('click', onPieceMouseClick);
   });
 
-  // Listen for boards' buttons clicks
-  OVERWORLD_BOARD_BUTTON?.addEventListener('click', handleButtonPress);
-  HELL_BOARD_BUTTON?.addEventListener('click', handleButtonPress);
-  HEAVEN_BOARD_BUTTON?.addEventListener('click', handleButtonPress);
+  OVERWORLD_BOARD_BUTTON?.addEventListener('click', handleBoardButtonPress);
+  HELL_BOARD_BUTTON?.addEventListener('click', handleBoardButtonPress);
+  HEAVEN_BOARD_BUTTON?.addEventListener('click', handleBoardButtonPress);
 
   SHOP_UPGRADE_SWAPPER?.addEventListener('click', swapShopAndUpgrade);
+
+  document.addEventListener('click', onClickOnScreen);
 }
 
 function onPieceMouseDown(event: Event) {
@@ -200,7 +205,7 @@ export function initializeDraggingListeners(element: HTMLElement) {
   }
 }
 
-function onMouseClick(event: Event) {
+function onPieceMouseClick(event: Event) {
   let element = event.target as HTMLElement;
   // Prevent clicking if the user clicked on an untargetable area
   while (element.classList.contains('untargetable')) {
@@ -244,7 +249,7 @@ function showBoard(boardId: string) {
   boardElement.classList.remove('collapsed');
 }
 
-function handleButtonPress(event: Event) {
+function handleBoardButtonPress(event: Event) {
   const buttonValue = (event.target as HTMLButtonElement).value;
   showBoard(buttonValue);
 }
@@ -277,3 +282,17 @@ function swapShopAndUpgrade() {
   SHOP_CONTAINER?.classList.add('collapsed');
   UPGRADES_CONTAINER?.classList.remove('collapsed');
 }
+
+function onClickOnScreen(event: Event) {
+  let element = event.target as HTMLElement;
+  // Prevent clicking if the user clicked on an untargetable area
+  while (element.classList.contains('untargetable')) {
+    element = element.parentElement as HTMLElement;
+  }
+
+  if (element.classList.contains('piece')) return;
+
+  removeAllHighlights(OVERWORLD_BOARD_ID);
+  removeAllHighlights(HELL_BOARD_ID);
+  removeAllHighlights(HEAVEN_BOARD_ID);
+}

core/development/ui/UpgradeUI.ts

@@ -11,7 +11,7 @@ export function showUpgradeablePiecesElements(
   if (!upgradesContainer) return;
 
   upgradesContainer.innerHTML = '';
-  
+
   if (upgradeablePieces.length === 0) {
     const noAvailableUpgradesTextElement = document.createElement('p');
     noAvailableUpgradesTextElement.classList.add('piece-upgrades-message');
@@ -20,25 +20,27 @@ export function showUpgradeablePiecesElements(
     upgradesContainer.appendChild(noAvailableUpgradesTextElement);
   } else {
     upgradeablePieces.forEach((upgradeablePieceType) => {
-      const upgradeablePiece = new upgradeablePieceType(game.getCurrentPlayer());
-
+      const upgradeablePiece = new upgradeablePieceType(
+        game.getCurrentPlayer(),
+      );
+
       const upgradeElement = document.createElement('div');
       upgradeElement.id = upgradeablePiece.name;
       upgradeElement.classList.add('upgraded-piece');
       upgradeElement.innerHTML = upgradeablePiece.resource;
       upgradeElement.addEventListener('click', () => {
         upgradePiece(piece, upgradeablePiece);
       });
-  
+
       const upgradePriceElement = document.createElement('p');
       upgradePriceElement.classList.add('piece-upgrade-item-price');
       upgradePriceElement.innerHTML = upgradeablePiece.price.toString();
-  
+
       const upgradeSquare = document.createElement('div');
       upgradeSquare.classList.add('upgrade-square');
       upgradeSquare.appendChild(upgradeElement);
       upgradeSquare.appendChild(upgradePriceElement);
-  
+
       upgradesContainer.appendChild(upgradeSquare);
     });
   }

package.json

@@ -5,9 +5,9 @@
     "lint": "npx nx run-many --target lint",
     "format": "npx nx format:write",
     "test": "npx nx run-many --target test --all",
-    "build": "webpack --config webpack.config.ts",
+    "build": "webpack --mode production --config webpack.config.ts",
     "start": "node server.js",
-    "dev": "webpack serve --config webpack.config.ts"
+    "dev": "webpack serve --mode development --config webpack.config.ts"
   },
   "author": "Ido Barnea",
   "license": "Apache-2.0",

webpack.config.ts

@@ -9,7 +9,6 @@ interface CustomConfiguration extends webpack.Configuration {
 }
 
 const config: CustomConfiguration = {
-  mode: 'production',
   entry: {
     room: './core/development/pages/Room.ts',
   },