devs/blokus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: placement cells missing width/height and incorrect positioning

Browse Source 
- 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
This commit is contained in:
mattlamb227@gmail.com
2026-08-09 21:56:27 -04:00
parent 4a4eef679a
commit ba6e26ab59
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blokus_ui/static/game.js
+5 -2
View File
@@ -10,6 +10,7 @@ function initGame() {
const sessionId = window.GAME_SESSION_ID; const sessionId = window.GAME_SESSION_ID;
const boardSize = window.BOARD_SIZE; const boardSize = window.BOARD_SIZE;
const cellSize = window.CELL_SIZE || 30; const cellSize = window.CELL_SIZE || 30;
const cellGap = 1;
let selectedPieceId = null; let selectedPieceId = null;
let currentPlacements = []; let currentPlacements = [];
@@ -155,8 +156,10 @@ function initGame() {
const x = cell[0], y = cell[1]; const x = cell[0], y = cell[1];
const el = document.createElement('div'); const el = document.createElement('div');
el.className = 'placement-cell'; el.className = 'placement-cell';
el.style.left = (x * cellSize) + 'px'; el.style.left = (x * (cellSize + cellGap)) + 'px';
el.style.top = (y * cellSize) + 'px'; el.style.top = (y * (cellSize + cellGap)) + 'px';
el.style.width = cellSize + 'px';
el.style.height = cellSize + 'px';
el.dataset.action = placement.action; el.dataset.action = placement.action;
el.addEventListener('click', function() { makeMove(placement.action); }); el.addEventListener('click', function() { makeMove(placement.action); });
overlay.appendChild(el); overlay.appendChild(el);
src/blokus_ui/static/style.css
+2
View File
@@ -205,6 +205,8 @@ h3 {
.placement-cell { .placement-cell {
position: absolute; position: absolute;
width: 30px;
height: 30px;
background: rgba(255, 204, 0, 0.25); background: rgba(255, 204, 0, 0.25);
border: 1px dashed rgba(255, 204, 0, 0.7); border: 1px dashed rgba(255, 204, 0, 0.7);
pointer-events: auto; pointer-events: auto;