Color code the logs

.eslintrc.json

@@ -1,61 +1,61 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "overrides": [
-    {
-      "env": {
-        "node": true
-      },
-      "files": [".eslintrc.{js,cjs}"],
-      "parserOptions": {
-        "sourceType": "script"
-      }
-    }
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["@typescript-eslint"],
-  "rules": {
-    "indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1,
-        "offsetTernaryExpressions": true
-      }
-    ],
-    "quotes": ["error", "single"],
-    "semi": ["error", "always"],
-    "prefer-const": ["error"],
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "vars": "all",
-        "varsIgnorePattern": "_",
-        "argsIgnorePattern": "_",
-        "caughtErrorsIgnorePattern": "_"
-      }
-    ],
-    "no-unneeded-ternary": ["error"],
-    "max-len": [
-      "warn",
-      {
-        "ignoreComments": true,
-        "ignoreStrings": true
-      }
-    ],
-    "comma-dangle": ["error", "always-multiline"],
-    "camelcase": ["error"]
-  }
-}
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "overrides": [
+    {
+      "env": {
+        "node": true
+      },
+      "files": [".eslintrc.{js,cjs}"],
+      "parserOptions": {
+        "sourceType": "script"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1,
+        "offsetTernaryExpressions": true
+      }
+    ],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"],
+    "prefer-const": ["error"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "_",
+        "argsIgnorePattern": "_",
+        "caughtErrorsIgnorePattern": "_"
+      }
+    ],
+    "no-unneeded-ternary": ["error"],
+    "max-len": [
+      "warn",
+      {
+        "ignoreComments": true,
+        "ignoreStrings": true
+      }
+    ],
+    "comma-dangle": ["error", "always-multiline"],
+    "camelcase": ["error"]
+  }
+}

development/src/events.ts

@@ -12,7 +12,9 @@ let triggerOnFallOffTheBoard: (
   board: string,
 ) => void;
 
-const OVERWORLD_BOARD_BUTTON = document.getElementById('board-overworld-button')!;
+const OVERWORLD_BOARD_BUTTON = document.getElementById(
+  'board-overworld-button',
+)!;
 const HELL_BOARD_BUTTON = document.getElementById('board-hell-button')!;
 const HEAVEN_BOARD_BUTTON = document.getElementById('board-heaven-button')!;
 

development/src/items.ts

@@ -7,17 +7,16 @@ import { trapResource } from './resources';
 
 export class Inventory {
   items: Array<Item> = [];
-
   addItem(item: Item) {
     this.items.push(item);
-    Logger.log(`${item.player.color} received a ${item.name}.`);
+    Logger.logItem(`${item.player.color} received a ${item.name}.`);
   }
 
   removeItem(item: Item) {
     const index = this.items.indexOf(item);
     if (index !== -1) {
       this.items.splice(index, 1);
-      Logger.log(`${item.name} was destroyed.`);
+      Logger.logItem(`${item.name} was destroyed.`);
     }
   }
 
@@ -35,11 +34,11 @@ export class Inventory {
 }
 
 interface ItemType {
-    name: string,
-    resource: string,
-    player: Player,
-    position: Position,
-    apply: (piece: Piece) => void;
+  name: string;
+  resource: string;
+  player: Player;
+  position: Position;
+  apply: (piece: Piece) => void;
 }
 
 export class Item implements ItemType {
@@ -48,16 +47,21 @@ export class Item implements ItemType {
   player: Player;
   position: Position;
 
-  constructor(name: string, resource: string, player: Player, position: Position) {
+  constructor(
+    name: string,
+    resource: string,
+    player: Player,
+    position: Position,
+  ) {
     this.name = name;
     this.resource = resource;
     this.player = player;
     this.position = position;
   }
 
   apply(piece: Piece) {
-    Logger.log(`${piece.player.color} used a ${this.name}.`);
-  };
+    Logger.logItem(`${piece.player.color} used a ${this.name}.`);
+  }
 }
 
 export class Trap extends Item {
@@ -66,7 +70,9 @@ export class Trap extends Item {
   }
 
   apply(piece: Piece) {
-    Logger.log(`${this.player.color} ${piece.name} placed a ${this.name} on ${piece.position.coordinates}.`);
+    Logger.logItem(
+      `${this.player.color} ${piece.name} placed a ${this.name} on ${piece.position.coordinates}.`,
+    );
 
     this.position = piece.position;
     items.push(this);

development/src/logger.ts

@@ -1,18 +1,45 @@
 import { NOTATIONS_LETTERS, NOTATIONS_NUMBERS } from './board';
 import { Piece, Square } from './pieces';
 
+const ColorEnum = {
+  DEFAULT: 'gray',
+  KILL: 'red',
+  RULE: 'purple',
+  ITEM: 'green',
+};
+
 export class Logger {
-  static log(message: string) {
+  static log(message: string, color?: string) {
+    if (!color || color == '') color = ColorEnum.DEFAULT;
+
     const logsContainer = document.getElementById('logs-container')!;
-    logsContainer.innerHTML += `<p>> ${message}</p>`;
+    logsContainer.innerHTML += `<p style='color: ${color};'>> ${message}</p>`;
 
     logsContainer.scrollTop = logsContainer.scrollHeight; // Scroll to the last log
   }
 
+  static logKill(message: string) {
+    this.log(message, ColorEnum.KILL);
+  }
+
+  static logRule(message: string) {
+    this.log(message, ColorEnum.RULE);
+  }
+
+  static logItem(message: string) {
+    this.log(message, ColorEnum.ITEM);
+  }
+
   static logMovement(draggedPiece: Piece, targetSquare: Square) {
-    const fromNotation = this.convertPositionToNotation(draggedPiece.position.coordinates);
-    const toNotation = this.convertPositionToNotation(targetSquare.position.coordinates);
-    this.log(`${draggedPiece.player.color} ${draggedPiece.name} moved from ${fromNotation} to ${toNotation}.`);
+    const fromNotation = this.convertPositionToNotation(
+      draggedPiece.position.coordinates,
+    );
+    const toNotation = this.convertPositionToNotation(
+      targetSquare.position.coordinates,
+    );
+    this.log(
+      `${draggedPiece.player.color} ${draggedPiece.name} moved from ${fromNotation} to ${toNotation}.`,
+    );
   }
 
   private static convertPositionToNotation(position: [number, number]) {

development/src/logic.ts

@@ -27,7 +27,7 @@ import { Item } from './items';
 export enum PlayerColors {
   WHITE = 'White',
   BLACK = 'Black',
-};
+}
 
 const whitePlayer = new Player(PlayerColors.WHITE);
 const blackPlayer = new Player(PlayerColors.BLACK);
@@ -100,9 +100,7 @@ export function switchIsCastling() {
   isCastling = !isCastling;
 }
 
-export function getPieceByPosition(
-  position: Position,
-): Piece | undefined {
+export function getPieceByPosition(position: Position): Piece | undefined {
   return pieces.find((piece) => comparePositions(position, piece.position));
 }
 
@@ -127,31 +125,27 @@ export function onAction(
     draggedElement.parentElement as HTMLElement;
 
   const draggedElementPosition: Position = {
-    coordinates: convertSquareIdToPosition(draggedElementParentElement.getAttribute('square-id')!),
+    coordinates: convertSquareIdToPosition(
+      draggedElementParentElement.getAttribute('square-id')!,
+    ),
     board: board,
   };
 
   const draggedPiece: Piece | undefined = pieces.find((piece) =>
-    comparePositions(
-      piece.position,
-      draggedElementPosition,
-    ),
+    comparePositions(piece.position, draggedElementPosition),
   );
 
   if (targetElement.classList.contains('piece')) {
     const squareElement = targetElement.parentElement!;
     const targetElementPosition: Position = {
       coordinates: convertSquareIdToPosition(
-          squareElement.getAttribute('square-id')!,
+        squareElement.getAttribute('square-id')!,
       ),
       board: board,
     };
 
     const targetPiece: Piece | undefined = pieces.find((piece) => {
-      return comparePositions(
-        targetElementPosition,
-        piece.position,
-      );
+      return comparePositions(targetElementPosition, piece.position);
     });
 
     actOnTurn(draggedPiece, targetPiece);
@@ -196,10 +190,7 @@ export function onFallOffTheBoard(draggedElement: HTMLElement, board: string) {
       board: board,
     };
 
-    return comparePositions(
-      draggedElementPosition,
-      piece.position,
-    );
+    return comparePositions(draggedElementPosition, piece.position);
   });
 
   if (!draggedPiece) return;
@@ -254,7 +245,9 @@ function actOnTurnPieceToPiece(draggedPiece: Piece, targetPiece: Piece) {
   destroyPieceOnBoard(targetPiece);
 
   if (targetPiece.position.board === OVERWORLD_BOARD_ID) {
-    Logger.log(`A ${targetPiece.player.color} ${targetPiece.name} was killed by a ${draggedPiece.player.color} ${draggedPiece.name}.`);
+    Logger.logKill(
+      `A ${targetPiece.player.color} ${targetPiece.name} was killed by a ${draggedPiece.player.color} ${draggedPiece.name}.`,
+    );
 
     if (targetPiece.hasKilled) {
       targetPiece.position = {
@@ -283,7 +276,9 @@ function actOnTurnPieceToPiece(draggedPiece: Piece, targetPiece: Piece) {
 
     spawnPieceOnBoard(targetPiece);
   } else {
-    Logger.log(`A ${targetPiece.player.color} ${targetPiece.name} was permanently killed by a ${draggedPiece.player.color} ${draggedPiece.name}.`);
+    Logger.logKill(
+      `A ${targetPiece.player.color} ${targetPiece.name} was permanently killed by a ${draggedPiece.player.color} ${draggedPiece.name}.`,
+    );
     killPiece(targetPiece);
   }
 
@@ -310,8 +305,10 @@ function actOnTurnPieceToTrap(draggedPiece: Piece, targetItem: Item) {
   destroyItemOnBoard(targetItem);
 
   if (draggedPiece.position.board === OVERWORLD_BOARD_ID) {
-    draggedPiece.position = {...targetItem.position};
-    draggedPiece.position.board = draggedPiece.hasKilled ? HELL_BOARD_ID : HEAVEN_BOARD_ID;
+    draggedPiece.position = { ...targetItem.position };
+    draggedPiece.position.board = draggedPiece.hasKilled
+      ? HELL_BOARD_ID
+      : HEAVEN_BOARD_ID;
     spawnPieceOnBoard(draggedPiece);
   }
 
@@ -334,7 +331,8 @@ function castle(kingPiece: Piece, targetSquare: Square) {
     );
   });
 
-  const deltaX = targetSquare.position.coordinates[0] - kingPiece.position.coordinates[0];
+  const deltaX =
+    targetSquare.position.coordinates[0] - kingPiece.position.coordinates[0];
   // Depends on if it's Kingside or Queenside castling
   const isKingsideCastling = deltaX > 0;
   const rookFilter = (piece: Piece) => {