[#113] Minor fixes to shield

development/code/LogicAdapter.ts

@@ -15,6 +15,7 @@ import {
   highlightLastMove,
   getPieceElementBySquareId,
   highlightLegalMove,
+  spawnItemOnChildElement,
 } from './ui/BoardManager';
 import { renderPlayersInformation } from './ui/Screen';
 import { switchShownInventory, showItemOnInventory, destroyItemInInventory } from './ui/InventoriesUI';
@@ -177,6 +178,15 @@ export function spawnItemOnBoard(item: Item) {
   spawnItemElementOnBoard(item, squareId);
 }
 
+export function spawnItemOnPiece(item: Item) {
+  if (!item.position) return;
+
+  const itemCoordinates = item.position.coordinates;
+  const squareId = itemCoordinates.join(',');
+
+  spawnItemOnChildElement(item, squareId, true);
+}
+
 export function changePieceToAnotherPlayer(piece: Piece) {
   const squareId = piece.position.coordinates.join(',');
   const boadrId = piece.position.boardId;
@@ -207,35 +217,37 @@ export function switchInventory(player: Player) {
 export function canPlaceItemOnBoard(itemElement: HTMLElement, targetElement: HTMLElement): boolean {
   if (game.getWasItemPlacedThisTurn() || !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 currentBoardId = getCurrentBoardId();
+  if (!currentBoardId) return false;
 
   const squareId = getSquareIdByElement(targetElement);
   if (!squareId) return false;
 
-  const squarePosition = getPositionFromSquareId(squareId, currentOpenBoardId);
+  const squarePosition = getPositionFromSquareId(squareId, currentBoardId);
 
   const usedItem = getCurrentPlayerInventoryItemById(itemElement.id);
   if (!usedItem) return false;
 
   usedItem.setPosition(squarePosition);
-  spawnItemOnBoard(usedItem);
-  game.addItem(usedItem);
+
+  switch (itemElement.id) {
+    case 'trap': {
+      if (!targetElement.classList.contains('square')) return false;
+      spawnItemOnBoard(usedItem);
+      game.addItem(usedItem);
+      break;
+    }
+    case 'shield': {
+      if (!targetElement.classList.contains('piece')) return false;
+      spawnItemOnPiece(usedItem);
+      break;
+    }
+    default:
+      break;
+  }
+
   game.getCurrentPlayer().inventory.removeItem(usedItem);
   game.switchWasItemPlacedThisTurn();
-
   destroyItemInInventory(itemElement);
 
   return true;

development/code/ui/BoardManager.ts

@@ -177,6 +177,24 @@ export function spawnItemElementOnBoard(item: Item, targetSquareId: string) {
   board.spawnElementOnBoard(itemElement, squareElement);
 }
 
+export function spawnItemOnChildElement(item: Item, targetSquareId: string, isUntargetable = false) {
+  if (!item.position) return;
+  const board = getBoardbyId(item.position.boardId);
+
+  const squareElement = board.boardElement.querySelectorAll(`
+    [square-id="${targetSquareId}"]
+  `)[0] as HTMLElement;
+
+  const childElement = squareElement.firstChild as HTMLElement;
+
+  const itemElement = board.createItemElement(item);
+  if (isUntargetable) {
+    itemElement.classList.remove('item');
+    itemElement.classList.add('untargetable-item');
+  }
+  childElement.insertBefore(itemElement, childElement.firstChild);
+}
+
 function findSquareElement(element: HTMLElement): HTMLElement | undefined {
   while (element && !element.classList.contains('square')) {
     element = element.parentElement as HTMLElement;

development/styles/styles.css

@@ -129,7 +129,7 @@ path {
   z-index: 9;
 }
 
-.piece, .item, .inventory-item, .shop-item {
+.piece, .item, .inventory-item, .shop-item, .untargetable-item {
   height: var(--square-size);
   width: var(--square-size);
   position: absolute;