From ba6e26ab59cb6e8a89c01ac67df3e35104d9fa6b Mon Sep 17 00:00:00 2001 From: "mattlamb227@gmail.com" Date: Sun, 9 Aug 2026 21:56:27 -0400 Subject: [PATCH] fix: placement cells missing width/height and incorrect positioning - Add width/height (30px) to .placement-cell CSS so cells are visible - Account for CSS grid gap (1px) in placement cell positioning - Set width/height dynamically in JS for consistency --- src/blokus_ui/static/game.js | 7 +++++-- src/blokus_ui/static/style.css | 2 ++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/blokus_ui/static/game.js b/src/blokus_ui/static/game.js index f19595b..40eb28e 100644 --- a/src/blokus_ui/static/game.js +++ b/src/blokus_ui/static/game.js @@ -10,6 +10,7 @@ function initGame() { const sessionId = window.GAME_SESSION_ID; const boardSize = window.BOARD_SIZE; const cellSize = window.CELL_SIZE || 30; + const cellGap = 1; let selectedPieceId = null; let currentPlacements = []; @@ -155,8 +156,10 @@ function initGame() { const x = cell[0], y = cell[1]; const el = document.createElement('div'); el.className = 'placement-cell'; - el.style.left = (x * cellSize) + 'px'; - el.style.top = (y * cellSize) + 'px'; + el.style.left = (x * (cellSize + cellGap)) + 'px'; + el.style.top = (y * (cellSize + cellGap)) + 'px'; + el.style.width = cellSize + 'px'; + el.style.height = cellSize + 'px'; el.dataset.action = placement.action; el.addEventListener('click', function() { makeMove(placement.action); }); overlay.appendChild(el); diff --git a/src/blokus_ui/static/style.css b/src/blokus_ui/static/style.css index fd0ee1d..e110115 100644 --- a/src/blokus_ui/static/style.css +++ b/src/blokus_ui/static/style.css @@ -205,6 +205,8 @@ h3 { .placement-cell { position: absolute; + width: 30px; + height: 30px; background: rgba(255, 204, 0, 0.25); border: 1px dashed rgba(255, 204, 0, 0.7); pointer-events: auto;