diff --git a/development/code/LogicAdapter.ts b/development/code/LogicAdapter.ts index d517c56c..bda8b84c 100644 --- a/development/code/LogicAdapter.ts +++ b/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; diff --git a/development/code/ui/BoardManager.ts b/development/code/ui/BoardManager.ts index 448f71b2..d5b0556f 100644 --- a/development/code/ui/BoardManager.ts +++ b/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; diff --git a/development/styles/styles.css b/development/styles/styles.css index 1550e146..15b05c8a 100644 --- a/development/styles/styles.css +++ b/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;