From 18cfe050471afa31b1d2989ef980474c83cf232f Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Sat, 18 Oct 2025 16:33:05 +0200
Subject: [PATCH] fixed cell size

---
 frontend/public/src/game.js    | 6 ++++++
 frontend/public/src/styles.css | 5 +++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/public/src/game.js b/frontend/public/src/game.js
index 5a1a3d3..caf9561 100644
--- a/frontend/public/src/game.js
+++ b/frontend/public/src/game.js
@@ -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++) {
diff --git a/frontend/public/src/styles.css b/frontend/public/src/styles.css
index 0f15aa9..d048bc0 100644
--- a/frontend/public/src/styles.css
+++ b/frontend/public/src/styles.css
@@ -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}