diff --git a/development/code/Game.ts b/development/code/Game.ts index dafc952c..6eea2494 100644 --- a/development/code/Game.ts +++ b/development/code/Game.ts @@ -1,4 +1,4 @@ -import { renderScreen } from './LogicAdapter'; +import { switchInventory, 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 wasItemPlacedThisTurn = 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) => { + switchInventory(player); + }); + renderScreen(); + wasItemPlacedThisTurn = 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 { return items; } +function addItem(item: Item) { + items.push(item); +} + function setItems(updatedItems: Array) { items = updatedItems; } @@ -200,6 +216,14 @@ function endGame() { isGameFinished = true; } +function switchWasItemPlacedThisTurn() { + wasItemPlacedThisTurn = true; +} + +function getWasItemPlacedThisTurn(){ + return wasItemPlacedThisTurn; +} + 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, + switchWasItemPlacedThisTurn, + getWasItemPlacedThisTurn, }; diff --git a/development/code/LogicAdapter.ts b/development/code/LogicAdapter.ts index ebe290d8..03b04cd8 100644 --- a/development/code/LogicAdapter.ts +++ b/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, + destroyItemInInventory, } from './ui/BoardManager'; import { renderPlayersInformation } from './ui/Screen'; +import { switchShownInventory, showItemOnInventory } from './ui/InventoriesUI'; export function renderScreen() { renderPlayersInformation(); @@ -194,3 +196,85 @@ export function changePieceToAnotherPlayer(piece: Piece) { export function endGame(){ game.end(); } + +export function switchInventory(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.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 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.switchWasItemPlacedThisTurn(); + + destroyItemInInventory(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; + + destroyItemInInventory(itemElement); + + const player = game.getCurrentPlayer(); + showItemOnInventory(usedItem, player.color); +} diff --git a/development/code/logic/Constants.ts b/development/code/logic/Constants.ts index d22b7e22..073c7ee2 100644 --- a/development/code/logic/Constants.ts +++ b/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; diff --git a/development/code/logic/PieceLogic.ts b/development/code/logic/PieceLogic.ts index 6b2e1dc5..f7c39898 100644 --- a/development/code/logic/PieceLogic.ts +++ b/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); } } diff --git a/development/code/logic/Players.ts b/development/code/logic/Players.ts index 53186687..18175b35 100644 --- a/development/code/logic/Players.ts +++ b/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); } } diff --git a/development/code/logic/items/Inventory.ts b/development/code/logic/items/Inventory.ts index 8db9327b..3f3f7836 100644 --- a/development/code/logic/items/Inventory.ts +++ b/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 = []; + 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; - } } diff --git a/development/code/logic/items/Items.test.ts b/development/code/logic/items/Items.test.ts index 32e9c7a1..a0c6137e 100644 --- a/development/code/logic/items/Items.test.ts +++ b/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); diff --git a/development/code/logic/items/Shop.ts b/development/code/logic/items/Shop.ts index c199757d..1e22ec16 100644 --- a/development/code/logic/items/Shop.ts +++ b/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); } } } diff --git a/development/code/logic/pieces/Bishop.test.ts b/development/code/logic/pieces/Bishop.test.ts index 1b520b79..5022e3a3 100644 --- a/development/code/logic/pieces/Bishop.test.ts +++ b/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); diff --git a/development/code/logic/pieces/King.test.ts b/development/code/logic/pieces/King.test.ts index 6ceae80e..f277676b 100644 --- a/development/code/logic/pieces/King.test.ts +++ b/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); diff --git a/development/code/logic/pieces/Knight.test.ts b/development/code/logic/pieces/Knight.test.ts index 9f36e30e..5f88a526 100644 --- a/development/code/logic/pieces/Knight.test.ts +++ b/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); diff --git a/development/code/logic/pieces/Pawn.test.ts b/development/code/logic/pieces/Pawn.test.ts index d6f2844d..7ad5b22b 100644 --- a/development/code/logic/pieces/Pawn.test.ts +++ b/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); diff --git a/development/code/logic/pieces/Queen.test.ts b/development/code/logic/pieces/Queen.test.ts index e073c6a2..64a9ac52 100644 --- a/development/code/logic/pieces/Queen.test.ts +++ b/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); diff --git a/development/code/logic/pieces/Rook.test.ts b/development/code/logic/pieces/Rook.test.ts index 3801ed7f..7fa6e0e0 100644 --- a/development/code/logic/pieces/Rook.test.ts +++ b/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); diff --git a/development/code/ui/Board.ts b/development/code/ui/Board.ts index 1e8ebd73..2dac5534 100644 --- a/development/code/ui/Board.ts +++ b/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; } diff --git a/development/code/ui/BoardManager.ts b/development/code/ui/BoardManager.ts index 04cd1fbb..0a89f013 100644 --- a/development/code/ui/BoardManager.ts +++ b/development/code/ui/BoardManager.ts @@ -172,8 +172,8 @@ export function spawnItemElementOnBoard(item: Item, targetSquareId: string) { [square-id="${targetSquareId}"] `)[0] as HTMLElement; - const pieceElement = board.createItemElement(item); - board.spawnElementOnBoard(pieceElement, squareElement); + const itemElement = board.createItemElement(item); + board.spawnElementOnBoard(itemElement, squareElement); } function findSquareElement(element: HTMLElement): HTMLElement | undefined { @@ -229,3 +229,6 @@ export function highlightLastMove( highlightSquare(targetSquareElement, true, false); } +export function destroyItemInInventory(itemElement: HTMLElement) { + itemElement.remove(); +} diff --git a/development/code/ui/Events.ts b/development/code/ui/Events.ts index f86303ae..c0bf5a5d 100644 --- a/development/code/ui/Events.ts +++ b/development/code/ui/Events.ts @@ -1,5 +1,5 @@ import { game } from '../Game'; -import { onPieceSelected } from '../LogicAdapter'; +import { onPieceSelected, placeItemOnBoard, returnItemToInventory } from '../LogicAdapter'; import { HEAVEN_BOARD_BUTTON_ID, HELL_BOARD_BUTTON_ID, OVERWORLD_BOARD_BUTTON_ID } from '../logic/Constants'; import { HEAVEN_BOARD, HELL_BOARD, OVERWORLD_BOARD } from './BoardManager'; @@ -38,7 +38,7 @@ export function initializeEventListeners() { const pieces = document.querySelectorAll('.piece'); pieces.forEach(pieceElement => { pieceElement.addEventListener('click', onMouseClick); - dragPieceElement(pieceElement as HTMLElement); + dragElement(pieceElement as HTMLElement); }); // Listen for boards' buttons clicks @@ -47,27 +47,27 @@ export function initializeEventListeners() { HEAVEN_BOARD_BUTTON?.addEventListener('click', handleButtonPress); } -export function dragPieceElement(element: HTMLElement) { +export function dragElement(element: HTMLElement) { let startMouseX = 0; let startMouseY = 0; let endMouseX = 0; let endMouseY = 0; - element.onmousedown = dragPieceOnMouseDown; + element.onmousedown = dragElementOnMouseDown; - function dragPieceOnMouseDown(event: MouseEvent) { + function dragElementOnMouseDown(event: MouseEvent) { event.preventDefault(); const currentTurnPlayerColor = game.getCurrentPlayer().color.toLowerCase(); - if (!element.classList.contains(currentTurnPlayerColor)) return; - + if (!(element.classList.contains(currentTurnPlayerColor) || element.classList.contains('item'))) return; endMouseX = event.clientX; endMouseY = event.clientY; - document.onmousemove = pieceElementDrag; - document.onmouseup = stopPieceElementDrag; + document.onmousemove = elementDrag; + document.onmouseup = stopElementDrag; } - function pieceElementDrag(event: MouseEvent) { + function elementDrag(event: MouseEvent) { event.preventDefault(); + element.style.marginTop = '0'; triggerOnHighlight(element, false, true); draggedElement = element; @@ -76,24 +76,26 @@ export function dragPieceElement(element: HTMLElement) { startMouseY = endMouseY - event.clientY; endMouseX = event.clientX; endMouseY = event.clientY; - element.style.left = (element.offsetLeft - startMouseX) + 'px'; element.style.top = (element.offsetTop - startMouseY) + 'px'; } - function stopPieceElementDrag(_: MouseEvent) { + function stopElementDrag(_: MouseEvent) { document.onmouseup = null; document.onmousemove = null; - const initialElement = draggedElement as HTMLElement; if (!initialElement) return; - let boardElement = initialElement.parentElement ?? undefined; - while (boardElement && !boardElement.classList.contains('board')) { - boardElement = boardElement.parentElement ?? undefined; + let parentContainer = initialElement.parentElement ?? undefined; + while ( + parentContainer && + !(parentContainer.classList.contains('board') || + parentContainer.classList.contains('player-inventory')) + ) { + parentContainer = parentContainer.parentElement ?? undefined; } - if (!boardElement) return; + if (!parentContainer) return; const elementXPosition = endMouseX - startMouseX; const elementYPosition = endMouseY - startMouseY; @@ -102,15 +104,18 @@ export function dragPieceElement(element: HTMLElement) { elementYPosition, ) as Array; const droppedOnElement = droppedOnElements.filter(element => { - return element.classList.contains('square') || + return (element.classList.contains('square') || element.classList.contains('item') || - element.classList.contains('piece') && element !== draggedElement; + element.classList.contains('piece') ) && element !== draggedElement; })[0]; - if (droppedOnElement === undefined) { - triggerOnFellOffTheBoard(draggedElement, boardElement.id); + + if (draggedElement.classList.contains('item') && !placeItemOnBoard(draggedElement, droppedOnElement)) { + returnItemToInventory(draggedElement); + } else if (!droppedOnElement) { + triggerOnFellOffTheBoard(draggedElement, parentContainer.id); } else { - triggerOnAction(draggedElement, droppedOnElement, boardElement.id); + triggerOnAction(draggedElement, droppedOnElement, parentContainer.id); } } } diff --git a/development/code/ui/InventoriesUI.ts b/development/code/ui/InventoriesUI.ts new file mode 100644 index 00000000..55bdbd06 --- /dev/null +++ b/development/code/ui/InventoriesUI.ts @@ -0,0 +1,88 @@ +import { INVENTORY_CLASS_ID, INVENTORY_WIDTH } from '../logic/Constants'; +import { PlayerColors } from '../logic/Players'; +import { Item } from '../logic/items/Items'; +import { dragElement } from './Events'; + + +const inventoryElement = document.getElementsByClassName(INVENTORY_CLASS_ID)[0]; + +function createPlayerInventoryElement(playerColor: PlayerColors): HTMLElement { + const playerInventoryElement = document.createElement('div'); + playerInventoryElement.id = playerColor; + playerInventoryElement.classList.add('player-inventory'); + inventoryElement?.appendChild(playerInventoryElement); + + return playerInventoryElement; +} + +export function showItemOnInventory( + item: Item, + playerColor: PlayerColors, +): HTMLElement | undefined { + const inventoryItemElement = document.createElement('div') as HTMLElement; + inventoryItemElement.id = item.name; + inventoryItemElement.classList.add('item'); + inventoryItemElement.classList.add('inventory-item'); + inventoryItemElement.innerHTML = item.resource; + inventoryItemElement.draggable = true; + + dragElement(inventoryItemElement); + + const playerInventoryElement = document.getElementById(playerColor); + + playerInventoryElement?.childNodes.forEach((child) => { + if (!child.hasChildNodes()) { + child.appendChild(inventoryItemElement); + return; + } + }); + + if (playerInventoryElement) return playerInventoryElement; + return undefined; +} + +export function initialiseInventoryUI(playerColor: PlayerColors) { + const playerInventoryElement = createPlayerInventoryElement(playerColor); + + for (let index = 0; index < INVENTORY_WIDTH; index++) { + createInventorySlotElement(playerInventoryElement, playerColor); + } + + if (playerColor === PlayerColors.BLACK) { + playerInventoryElement?.classList.add('collapsed'); + } +} + +function createInventorySlotElement( + playerInventoryElement: HTMLElement, + playerColor: PlayerColors, +) { + const squareElement = document.createElement('div'); + squareElement.classList.add('inventory-square'); + squareElement.setAttribute('player-color', playerColor); + + playerInventoryElement.appendChild(squareElement); +} + +export function switchShownInventory(playerColor: PlayerColors): boolean { + const playerInventoryElement = document.getElementById(playerColor); + if (!playerInventoryElement) { + return false; + } + + const isCollapsed = playerInventoryElement.classList.contains('collapsed'); + if (isCollapsed) { + playerInventoryElement.classList.remove('collapsed'); + } else { + playerInventoryElement.classList.add('collapsed'); + removeItemElements(playerInventoryElement); + } + + return isCollapsed; +} + +function removeItemElements(playerInventoryElement: HTMLElement){ + playerInventoryElement.childNodes.forEach((child) => { + child.firstChild?.remove(); + }); +} diff --git a/development/code/ui/Resources.ts b/development/code/ui/Resources.ts index 7c273311..8f8b7b80 100644 --- a/development/code/ui/Resources.ts +++ b/development/code/ui/Resources.ts @@ -14,6 +14,8 @@ export const pawnResource = export const piggyBankResource = ''; export const trapResource = - ''; + ''; export const shieldResource = ''; +export const coinResource = + ''; diff --git a/development/code/ui/Screen.ts b/development/code/ui/Screen.ts index 4c9f5999..d0d44819 100644 --- a/development/code/ui/Screen.ts +++ b/development/code/ui/Screen.ts @@ -21,10 +21,7 @@ export function renderPlayersInformation() { 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); }); diff --git a/development/styles/styles.css b/development/styles/styles.css index d96d3681..68a2d750 100644 --- a/development/styles/styles.css +++ b/development/styles/styles.css @@ -3,6 +3,7 @@ --board-squares-per-side: 8; --piece-resource-padding: 12px; --notation-padding: 4px; + --inventory-squares-per-side: 4; } body { @@ -45,10 +46,6 @@ body { z-index: 1; } -.collapsed { - display: none; -} - .disabled { cursor: not-allowed !important; pointer-events: none !important; @@ -98,18 +95,22 @@ path { z-index: -2; } -.piece { +.piece, .item { height: var(--square-size); width: var(--square-size); - position: relative; + position: absolute; z-index: 1; cursor: grab; } -.piece:active { +.piece:active, .item:active { cursor: grabbing; } +.inventory-item { + margin-top: 10px; +} + #logs-container { position: absolute; padding: 0.5%; @@ -158,6 +159,35 @@ path { background-color: burlywood; } + + +.inventory-container { + height: var(--square-size); + width: calc(var(--square-size) * var(--inventory-squares-per-side)); + overflow: visible; + padding-left: 32px; + position: absolute; + bottom: 0px; + margin-bottom: 47px; +} + +.player-inventory { + height: 100%; + width: 100%; + outline: 3px solid; + display: flex; + text-align: center; + flex-wrap: wrap; + box-sizing: border-box; +} + +.inventory-square { + outline: 2px solid; + box-sizing: border-box; + height: var(--square-size); + width: var(--square-size); +} + .beige-background { background-color: burlywood; } @@ -224,3 +254,7 @@ path { .log-color-item { color: DarkGoldenRod; } + +.collapsed { + display: none; +} diff --git a/development/views/index.html b/development/views/index.html index 51d320ff..41d79019 100644 --- a/development/views/index.html +++ b/development/views/index.html @@ -13,8 +13,8 @@ -

+