Created inventory system

.eslintrc.json

@@ -0,0 +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"]
+  }
+}

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
+    "usernamehw.errorlens",
     "firsttris.vscode-jest-runner"
   ]
 }

development/src/board.ts

@@ -1,3 +1,4 @@
+import { Item } from './items';
 import { pieces } from './logic';
 import { Piece, Square } from './pieces';
 
@@ -54,7 +55,7 @@ export class ChessBoard implements ChessBoardType {
       pieces.forEach((piece) => {
         const pieceElement = this.createPieceElement(piece);
         const square = document.querySelectorAll(
-          `[square-id="${piece.position}"]`,
+          `[square-id="${piece.position.coordinates}"]`,
         )[0];
         square.appendChild(pieceElement);
       });
@@ -104,48 +105,78 @@ export class ChessBoard implements ChessBoardType {
         : this.lightSquareColor;
   }
 
-  createPieceElement(piece: Piece) {
+  createPieceElement(piece: Piece): HTMLElement {
     const pieceElement = document.createElement('div');
     pieceElement.classList.add('piece');
     pieceElement.setAttribute('draggable', 'true');
     pieceElement.setAttribute('id', piece.name);
 
-    pieceElement.classList.add(piece.player.color);
+    pieceElement.classList.add(piece.player.color.toLowerCase());
 
     pieceElement.innerHTML = piece.resource;
 
     return pieceElement;
   }
 
+  createItemElement(item: Item): HTMLElement {
+    const itemElement = document.createElement('div');
+    itemElement.classList.add('item');
+    itemElement.setAttribute('id', item.name);
+
+    itemElement.classList.add(item.player.color.toLowerCase());
+
+    itemElement.innerHTML = item.resource;
+
+    return itemElement;
+  }
+
   movePieceOnBoard(draggedPiece: Piece, targetSquare: Square) {
     const draggedPieceSquareElement = this.boardElement.querySelector(
-      `[square-id="${draggedPiece.position.join(',')}"]`,
+      `[square-id="${draggedPiece.position.coordinates.join(',')}"]`,
     ) as HTMLElement;
     const draggedPieceElement =
       draggedPieceSquareElement?.firstElementChild as HTMLElement;
 
     const targetSquareElement = this.boardElement.querySelector(
-      `[square-id="${targetSquare.position.join(',')}"]`,
+      `[square-id="${targetSquare.position.coordinates.join(',')}"]`,
     ) as HTMLElement;
 
     targetSquareElement.appendChild(draggedPieceElement);
   }
 
   destroyPieceOnBoard(targetPiece: Piece) {
     const targetPieceSquareElement = this.boardElement.querySelector(
-      `[square-id="${targetPiece.position.join(',')}"]`,
+      `[square-id="${targetPiece.position.coordinates.join(',')}"]`,
     );
     const targetPieceElement =
       targetPieceSquareElement?.firstElementChild as HTMLElement;
 
     targetPieceElement.remove();
   }
 
+  destroyItemOnBoard(targetItem: Item) {
+    const targetItemSquareElement = this.boardElement.querySelector(
+      `[square-id="${targetItem.position.coordinates!.join(',')}"]`,
+    );
+    const targetItemElement =
+      targetItemSquareElement?.firstElementChild as HTMLElement;
+
+    targetItemElement.remove();
+  }
+
   spawnPieceOnBoard(piece: Piece) {
     const pieceElement = this.createPieceElement(piece);
     const square = this.boardElement.querySelectorAll(
-      `[square-id="${piece.position}"]`,
+      `[square-id="${piece.position.coordinates}"]`,
     )[0];
     square.appendChild(pieceElement);
   }
+
+  spawnItemOnBoard(item: Item) {
+    const itemElement = this.createItemElement(item);
+    const square = this.boardElement.querySelectorAll(
+      `[square-id="${item.position.coordinates}"]`,
+    )[0];
+    square.appendChild(itemElement);
+  }
 }

development/src/boards.ts

@@ -1,4 +1,5 @@
 import { ChessBoard } from './board';
+import { Item } from './items';
 import { Piece, Square } from './pieces';
 
 let overworld: ChessBoard;
@@ -46,7 +47,7 @@ export function initializeBoards() {
 }
 
 export function movePieceOnBoard(draggedPiece: Piece, targetSquare: Square) {
-  switch (draggedPiece.board) {
+  switch (draggedPiece.position.board) {
     case OVERWORLD_BOARD_ID:
       overworld.movePieceOnBoard(draggedPiece, targetSquare);
       break;
@@ -59,7 +60,7 @@ export function movePieceOnBoard(draggedPiece: Piece, targetSquare: Square) {
 }
 
 export function destroyPieceOnBoard(targetPiece: Piece) {
-  switch (targetPiece.board) {
+  switch (targetPiece.position.board) {
     case OVERWORLD_BOARD_ID:
       overworld.destroyPieceOnBoard(targetPiece);
       break;
@@ -72,8 +73,22 @@ export function destroyPieceOnBoard(targetPiece: Piece) {
   }
 }
 
+export function destroyItemOnBoard(targetItem: Item) {
+  switch (targetItem.position.board) {
+    case OVERWORLD_BOARD_ID:
+      overworld.destroyItemOnBoard(targetItem);
+      break;
+    case HELL_BOARD_ID:
+      hell.destroyItemOnBoard(targetItem);
+      break;
+    case HEAVEN_BOARD_ID:
+      heaven.destroyItemOnBoard(targetItem);
+      break;
+  }
+}
+
 export function spawnPieceOnBoard(piece: Piece) {
-  switch (piece.board) {
+  switch (piece.position.board) {
     case HELL_BOARD_ID:
       hell.spawnPieceOnBoard(piece);
       HELL_BOARD_BUTTON.classList.remove('collapsed');
@@ -82,7 +97,22 @@ export function spawnPieceOnBoard(piece: Piece) {
       heaven.spawnPieceOnBoard(piece);
       HEAVEN_BOARD_BUTTON.classList.remove('collapsed');
       break;
+    default:
+      return;
+  }
+}
 
+export function spawnItemOnBoard(item: Item) {
+  switch (item.position.board) {
+    case OVERWORLD_BOARD_ID:
+      overworld.spawnItemOnBoard(item);
+      break;
+    case HELL_BOARD_ID:
+      hell.spawnItemOnBoard(item);
+      break;
+    case HEAVEN_BOARD_ID:
+      heaven.spawnItemOnBoard(item);
+      break;
     default:
       return;
   }

development/src/events.ts

@@ -12,9 +12,7 @@ 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/game.ts

@@ -29,10 +29,19 @@ export function updatePlayersInformation() {
   playersElement.innerHTML = 'Players:';
 
   players.forEach((player) => {
-    const playerInformationElement = document.createElement('p');
+    const playerInformationElement = document.createElement('div');
+
+    const statusElement = document.createElement('p');
     const isCurrentPlayer = getCurrentPlayer() === player;
     const title = `${isCurrentPlayer ? '> ' : ''} ${player.color} Player:`;
-    playerInformationElement.innerHTML = `${title} ${player.xp} XP; ${player.gold} Gold.`;
+    const status = `${title} ${player.xp} XP; ${player.gold} Gold.`;
+    statusElement.innerHTML = status;
+
+    const inventoryElement = player.inventory.toHTMLElement();
+
+    playerInformationElement.appendChild(statusElement);
+    playerInformationElement.appendChild(inventoryElement);
+
     playersElement.appendChild(playerInformationElement);
   });