Adrien/ChessNut
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed cell size

Browse source
This commit is contained in:
Didictateur 2025-10-18 16:33:05 +02:00
parent 6853fcc4ec
commit 18cfe05047
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/public/src/game.js
View file

@ -28,6 +28,12 @@ function renderBoardFromState(state) {
boardEl.style.display = 'grid';
boardEl.style.gridTemplateColumns = `repeat(${w}, 1fr)`;
boardEl.style.gridTemplateRows = `repeat(${h}, 1fr)`;
// Keep cells square regardless of board dimensions by setting an aspect-ratio on the board element.
// We want height / width ratio so each grid cell becomes square: aspect-ratio = h / w
boardEl.style.aspectRatio = `${w} / ${h}`; // CSS aspect-ratio uses width/height, but grid tracks make squares when width/height ratio is set accordingly
// Make the board responsive: max size will be limited by container width
boardEl.style.maxWidth = 'min(90vmin, 80vw)';
boardEl.style.width = '100%';
for (let r = 0; r < h; r++) {
for (let c = 0; c < w; c++) {

5
frontend/public/src/styles.css
View file

@ -6,7 +6,8 @@ body{font-family: Arial, Helvetica, sans-serif; margin:0; padding:0;}
header{background:#222;color:#fff;padding:10px}
main{padding:16px}
.card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
.board{display:flex;flex-direction:column;gap:0 /* no gap between rows */; /* remove outer border so cell borders touch */ width:calc(var(--cell-size)*8);}
/* The board will be a CSS grid with an aspect-ratio set by JS to keep cells square regardless of board dimensions. */
.board{display:grid; gap:0; margin:0 auto;}
.row{display:flex;gap:0 /* no gap between cells */}
.row .cell { width:var(--cell-size); height:var(--cell-size); }
/* Make sizing include borders so borders don't add extra space */
@ -17,6 +18,6 @@ main{padding:16px}
.cell.light { background: #f0d9b5; }
.cell.dark { background: #b58863; }
.board.flipped{transform:rotate(180deg)}
.piece{width:48px;height:48px}
.piece{width:70%;height:70%;object-fit:contain}
.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.controls button{margin-left:8px}