[#109] Added inventory UI

development/code/Game.ts

@@ -1,4 +1,4 @@
-import { renderScreen } from './LogicAdapter';
+import { changeShownInventory, renderScreen } from './LogicAdapter';
 import { OVERWORLD_BOARD_ID } from './logic/Constants';
 import { Player, PlayerColors } from './logic/Players';
 import { Item } from './logic/items/Items';
@@ -12,6 +12,7 @@ import { Rook } from './logic/pieces/Rook';
 import { RulesManager } from './logic/rules/RulesManager';
 import { showWinningAlert as showGameEndAlert } from './ui/Screen';
 import { Logger } from './ui/logs/Logger';
+import { initialiseInventoryUI } from './ui/InventoriesUI';
 
 let rulesManager: RulesManager;
 const whitePlayer = new Player(PlayerColors.WHITE);
@@ -59,11 +60,16 @@ let deathCounter = 0;
 let isCastling = false;
 let isFriendlyFire = false;
 let isPieceKilled = false;
+let itemPlacedDownRecently = false;
 let fellOffTheBoardPiece: Piece | undefined;
 let isGameFinished = false;
 
 function initializeGame() {
   rulesManager = new RulesManager();
+
+  players.forEach((player) => {
+    initialiseInventoryUI(player.color);
+  });
 }
 
 function endTurn() {
@@ -82,7 +88,13 @@ function endTurn() {
   }
 
   Logger.logMessages();
+
+  players.forEach((player) => {
+    changeShownInventory(player);
+  });
+
   renderScreen();
+  itemPlacedDownRecently = false;
 
   // element.remove() is scheduled to run in the next event sycle while alert() runs immedietely.
   // To make sure the element is removed before displaying the winning alert, we need to add
@@ -144,6 +156,10 @@ function getItems(): Array<Item> {
   return items;
 }
 
+function addItem(item: Item) {
+  items.push(item);
+}
+
 function setItems(updatedItems: Array<Item>) {
   items = updatedItems;
 }
@@ -200,6 +216,14 @@ function endGame() {
   isGameFinished = true;
 }
 
+function changeItemPlacedRecently() {
+  itemPlacedDownRecently = true;
+}
+
+function wasItemPlacedRecently(){
+  return itemPlacedDownRecently;
+}
+
 export const game = {
   initialize: initializeGame,
   end: endGame,
@@ -211,6 +235,7 @@ export const game = {
   setPieces,
   getItems,
   setItems,
+  addItem,
   getRoundCounter,
   increaseRoundCounter,
   getDeathCounter,
@@ -222,4 +247,6 @@ export const game = {
   setIsPieceKilled,
   getFellOffTheBoardPiece,
   setFellOffTheBoardPiece,
+  changeItemPlacedRecently,
+  wasItemPlacedRecently,
 };

development/code/LogicAdapter.ts

@@ -1,6 +1,6 @@
 import { game } from './Game';
 import { isPlayerAllowedToAct, onPieceFellOffTheBoard, onPlayerAction } from './logic/PieceLogic';
-import { PlayerColors } from './logic/Players';
+import { Player, PlayerColors } from './logic/Players';
 import { comparePositions, convertSquareIdToPosition } from './logic/Utilities';
 import { Item } from './logic/items/Items';
 import { Piece } from './logic/pieces/Piece';
@@ -15,8 +15,10 @@ import {
   spawnPieceElementOnBoard,
   highlightLastMove,
   getPieceElementBySquareId,
+  destroyItemOnInventory,
 } from './ui/BoardManager';
 import { renderPlayersInformation } from './ui/Screen';
+import { switchShownInventory, showItemOnInventory } from './ui/InventoriesUI';
 
 export function renderScreen() {
   renderPlayersInformation();
@@ -56,7 +58,6 @@ export function onActionTriggered(
 
   const targetSquareId = getSquareIdByElement(targetElement);
   if (!targetSquareId) return;
-
   const targetElementPosition = getPositionFromSquareId(targetSquareId, boardId);
 
   if (targetElement.classList.contains('piece')) {
@@ -194,3 +195,86 @@ export function changePieceToAnotherPlayer(piece: Piece) {
 export function endGame(){
   game.end();
 }
+
+export function changeShownInventory(player: Player) {
+  if (switchShownInventory(player.color)) {
+    player.inventory.items.forEach((item) =>  {
+      showItemOnInventory(item,player.color);
+    });
+  }
+}
+
+export function placeItemOnBoard(itemElement: HTMLElement, targetElement: HTMLElement): boolean {
+  if (game.wasItemPlacedRecently() || !targetElement) return false;
+
+
+  switch (itemElement.id) {
+    case 'trap': {
+      if (!targetElement.classList.contains('square')) {
+        return false;
+      }
+      break;
+    }
+    default:
+      break;
+  }
+
+
+  const currentOpenBoardId = getCurrentBoardId();
+  if (!currentOpenBoardId) return false;
+
+  const squareId = getSquareIdByElement(targetElement);
+  if (!squareId) return false;
+
+  const squarePosition = getPositionFromSquareId(squareId, currentOpenBoardId);
+
+
+  const usedItem = getCurrentPlayerItemById(itemElement.id);
+  if (!usedItem) return false;
+
+  usedItem.position = squarePosition;
+  spawnItemOnBoard(usedItem);
+  game.addItem(usedItem);
+  game.getCurrentPlayer().inventory.removeItem(usedItem);
+  game.changeItemPlacedRecently();
+
+  destroyItemOnInventory(itemElement);
+
+  return true;
+}
+
+export function getCurrentBoardId(): string | undefined {
+  const boards = document.getElementsByClassName('board');
+  let currentOpenBoard;
+  for (let i = 0; i < boards.length; i++) {
+    if (!boards[i].classList.contains('collapsed')) {
+      currentOpenBoard = boards[i];
+      break;
+    }
+  }
+
+  return currentOpenBoard?.id;
+}
+
+export function getCurrentPlayerItemById(itemId: string): Item | undefined {
+  const player = game.getCurrentPlayer();
+  let draggedItem = undefined;
+  player.inventory.items.forEach((item) => {
+    if (item.name === itemId) {
+      draggedItem = item;
+      return;
+    }
+  });
+
+  return draggedItem;
+}
+
+export function returnItemToInventory(itemElement: HTMLElement) {
+  const usedItem = getCurrentPlayerItemById(itemElement.id);
+  if (!usedItem) return;
+
+  destroyItemOnInventory(itemElement);
+
+  const player = game.getCurrentPlayer();
+  showItemOnInventory(usedItem, player.color);
+}

development/code/logic/Constants.ts

@@ -3,6 +3,7 @@ export const HELL_BOARD_ID = 'board-hell';
 export const HEAVEN_BOARD_ID = 'board-heaven';
 export const BOTTOM_NOTATION_ID = 'bottom-notations';
 export const LEFT_NOTATION_ID = 'left-notations';
+export const INVENTORY_CLASS_ID = 'inventory-container';
 
 export const OVERWORLD_BOARD_BUTTON_ID = 'board-overworld-button';
 export const HELL_BOARD_BUTTON_ID = 'board-hell-button';
@@ -24,3 +25,4 @@ export const NOTATIONS_NUMBERS = ['8', '7', '6', '5', '4', '3', '2', '1'];
 export const BOARD_WIDTH = 8;
 
 export const MIN_KILLINGS_FOR_BOUNTY = 3;
+export const INVENTORY_WIDTH = 4;

development/code/logic/PieceLogic.ts

@@ -97,6 +97,7 @@ export function onPlayerAction(
     const targetSquare = (target instanceof Item)
       ? { position: target.position }
       : (target as Square);
+
     onActionNonAttackMove(draggedPiece, targetSquare);
   }
 }

development/code/logic/Players.ts

@@ -13,17 +13,17 @@ export enum PlayerColors {
 };
 
 export class Player implements PlayerType {
-  color: string;
+  color: PlayerColors;
   xp: number;
   gold: number;
   inDebtForTurns: number;
   inventory: Inventory;
 
-  constructor(color: string) {
+  constructor(color: PlayerColors) {
     this.color = color;
     this.xp = 0;
     this.gold = 0;
     this.inDebtForTurns = 0;
-    this.inventory = new Inventory();
+    this.inventory = new Inventory(this);
   }
 }

development/code/logic/items/Inventory.ts

@@ -1,13 +1,19 @@
 import { Log } from '../../ui/logs/Log';
+import { INVENTORY_CLASS_ID, INVENTORY_WIDTH } from '../Constants';
 import { Player } from '../Players';
 import { Item } from './Items';
 
 export class Inventory {
   items: Array<Item> = [];
+  player: Player;
 
-  addItem(item: Item, player: Player) {
+  constructor(_player: Player) {
+    this.player = _player;
+  }
+
+  addItem(item: Item) {
     this.items.push(item);
-    new Log(`${player.color} received a ${item.name}.`).addToQueue();
+    new Log(`${this.player.color} received a ${item.name}.`).addToQueue();
   }
 
   removeItem(item: Item) {
@@ -16,16 +22,4 @@ export class Inventory {
       this.items.splice(index, 1);
     }
   }
-
-  toHTMLElement(): HTMLElement {
-    const inventoryElement = document.createElement('ul');
-    this.items.forEach((item) => {
-      const inventoryItemElement = document.createElement('li');
-      inventoryItemElement.innerHTML = item.name;
-
-      inventoryElement.appendChild(inventoryItemElement);
-    });
-
-    return inventoryElement;
-  }
 }

development/code/logic/items/Items.test.ts

@@ -22,6 +22,11 @@ jest.mock('../../ui/Screen.ts', () => ({
 }));
 jest.mock('../../ui/logs/Logger.ts');
 jest.mock('../../ui/Events.ts', () => ({}));
+jest.mock('../../ui/InventoriesUI.ts', () => ({
+  initialiseInventoryUI: jest.fn(),
+  switchShownInventory: jest.fn(),
+  showItemOnInventory: jest.fn(),
+}));
 
 game.getCurrentPlayer = jest.fn().mockReturnValue(whitePlayer);
 

development/code/logic/items/Shop.ts

@@ -11,7 +11,7 @@ export class Shop {
   buy(item: Item, player: Player) {
     if (isPlayerAllowedToAct(player) && player.gold >= item.price) {
       player.gold -= item.price;
-      player.inventory.addItem(item, player);
+      player.inventory.addItem(item);
     }
   }
 }

development/code/logic/pieces/Bishop.test.ts

@@ -22,6 +22,11 @@ jest.mock('../../ui/Screen.ts', () => ({
 }));
 jest.mock('../../ui/logs/Logger.ts');
 jest.mock('../../ui/Events.ts', () => ({}));
+jest.mock('../../ui/InventoriesUI.ts', () => ({
+  initialiseInventoryUI: jest.fn(),
+  switchShownInventory: jest.fn(),
+  showItemOnInventory: jest.fn(),
+}));
 
 game.getCurrentPlayer = jest.fn().mockReturnValue(whitePlayer);
 

development/code/logic/pieces/King.test.ts

@@ -22,6 +22,11 @@ jest.mock('../../ui/Screen.ts', () => ({
 }));
 jest.mock('../../ui/logs/Logger.ts');
 jest.mock('../../ui/Events.ts', () => ({}));
+jest.mock('../../ui/InventoriesUI.ts', () => ({
+  initialiseInventoryUI: jest.fn(),
+  switchShownInventory: jest.fn(),
+  showItemOnInventory: jest.fn(),
+}));
 
 game.getCurrentPlayer = jest.fn().mockReturnValue(whitePlayer);
 

development/code/logic/pieces/Knight.test.ts

@@ -22,6 +22,11 @@ jest.mock('../../ui/Screen.ts', () => ({
 }));
 jest.mock('../../ui/logs/Logger.ts');
 jest.mock('../../ui/Events.ts', () => ({}));
+jest.mock('../../ui/InventoriesUI.ts', () => ({
+  initialiseInventoryUI: jest.fn(),
+  switchShownInventory: jest.fn(),
+  showItemOnInventory: jest.fn(),
+}));
 
 game.getCurrentPlayer = jest.fn().mockReturnValue(whitePlayer);
 

development/code/logic/pieces/Pawn.test.ts

@@ -21,6 +21,11 @@ jest.mock('../../ui/Screen.ts', () => ({
 }));
 jest.mock('../../ui/logs/Logger.ts');
 jest.mock('../../ui/Events.ts', () => ({}));
+jest.mock('../../ui/InventoriesUI.ts', () => ({
+  initialiseInventoryUI: jest.fn(),
+  switchShownInventory: jest.fn(),
+  showItemOnInventory: jest.fn(),
+}));
 
 game.getCurrentPlayer = jest.fn().mockReturnValue(whitePlayer);
 

development/code/logic/pieces/Queen.test.ts

@@ -22,6 +22,11 @@ jest.mock('../../ui/Screen.ts', () => ({
 }));
 jest.mock('../../ui/logs/Logger.ts');
 jest.mock('../../ui/Events.ts', () => ({}));
+jest.mock('../../ui/InventoriesUI.ts', () => ({
+  initialiseInventoryUI: jest.fn(),
+  switchShownInventory: jest.fn(),
+  showItemOnInventory: jest.fn(),
+}));
 
 game.getCurrentPlayer = jest.fn().mockReturnValue(whitePlayer);
 

development/code/logic/pieces/Rook.test.ts

@@ -22,6 +22,11 @@ jest.mock('../../ui/Screen.ts', () => ({
 }));
 jest.mock('../../ui/logs/Logger.ts');
 jest.mock('../../ui/Events.ts', () => ({}));
+jest.mock('../../ui/InventoriesUI.ts', () => ({
+  initialiseInventoryUI: jest.fn(),
+  switchShownInventory: jest.fn(),
+  showItemOnInventory: jest.fn(),
+}));
 
 game.getCurrentPlayer = jest.fn().mockReturnValue(whitePlayer);
 

development/code/ui/Board.ts

@@ -5,7 +5,7 @@ import { PiggyBank } from '../logic/items/PiggyBank';
 import { Item } from '../logic/items/Items';
 import { Piece } from '../logic/pieces/Piece';
 import { Position } from '../logic/pieces/PiecesUtilities';
-import { dragPieceElement } from './Events';
+import { dragElement } from './Events';
 
 export class ChessBoard {
   boardId: string;
@@ -130,7 +130,7 @@ export class ChessBoard {
 
     pieceElement.innerHTML = piece.resource;
 
-    dragPieceElement(pieceElement);
+    dragElement(pieceElement);
 
     return pieceElement;
   }