From ce1300bbfe2f1f0c279d3539c2266cd7870f3cbe Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Fri, 17 Oct 2025 15:57:37 +0200
Subject: [PATCH] affichage plateau

---
 frontend/public/game.html      | 5 +----
 frontend/public/src/game.js    | 5 ++++-
 frontend/public/src/styles.css | 3 ++-
 frontend/src/game.js           | 5 ++++-
 frontend/src/styles.css        | 3 ++-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/public/game.html b/frontend/public/game.html
index 1209b11..3790192 100644
--- a/frontend/public/game.html
+++ b/frontend/public/game.html
@@ -14,9 +14,7 @@
     .cell .piece{width:100%;height:100%;object-fit:contain;display:block}
     .cell.selected{outline:3px solid rgba(0,128,255,0.6);}    
     /* grid cells will be created dynamically via JS using grid-template */
-  /* checkerboard colors — keep these in case JS doesn't add classes */
-  .board .cell:nth-child(odd){ background: #f0d9b5; }
-  .board .cell:nth-child(even){ background: #b58863; }
+  /* checkerboard colors handled by .cell.light/.cell.dark in src/styles.css */
     #meta{margin-top:8px}
   </style>
 </head>
@@ -27,7 +25,6 @@
   <div id="server-load-indicator" style="margin-top:6px;color:#666">Chargement de l'état du serveur...</div>
     <div id="board-wrapper"><div id="board-container"></div></div>
     <div style="margin-top:8px">
-      <button id="leave">Quitter</button>
     </div>
   </div>
 
diff --git a/frontend/public/src/game.js b/frontend/public/src/game.js
index 611d775..5a1a3d3 100644
--- a/frontend/public/src/game.js
+++ b/frontend/public/src/game.js
@@ -32,7 +32,10 @@ function renderBoardFromState(state) {
   for (let r = 0; r < h; r++) {
     for (let c = 0; c < w; c++) {
       const cell = document.createElement('div');
-      cell.className = 'cell';
+  cell.className = 'cell';
+  // alternate light/dark based on coordinates (classic checkerboard)
+  const isLight = ((r + c) % 2) === 0;
+  cell.classList.add(isLight ? 'light' : 'dark');
       cell.dataset.x = c;
       cell.dataset.y = r;
       const piece = document.createElement('img');
diff --git a/frontend/public/src/styles.css b/frontend/public/src/styles.css
index 4be16f9..0f15aa9 100644
--- a/frontend/public/src/styles.css
+++ b/frontend/public/src/styles.css
@@ -14,7 +14,8 @@ main{padding:16px}
 /* For grid-rendered boards (JS sets display:grid on .board), let cells stretch to the grid track size.
   For row-based rendering, `.row .cell` provides fixed sizing. */
 .board > .cell { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f0d9b5; border:1px solid #b58863; margin:0; }
-.cell:nth-child(even){background:#b58863}
+.cell.light { background: #f0d9b5; }
+.cell.dark { background: #b58863; }
 .board.flipped{transform:rotate(180deg)}
 .piece{width:48px;height:48px}
 .game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
diff --git a/frontend/src/game.js b/frontend/src/game.js
index 611d775..5a1a3d3 100644
--- a/frontend/src/game.js
+++ b/frontend/src/game.js
@@ -32,7 +32,10 @@ function renderBoardFromState(state) {
   for (let r = 0; r < h; r++) {
     for (let c = 0; c < w; c++) {
       const cell = document.createElement('div');
-      cell.className = 'cell';
+  cell.className = 'cell';
+  // alternate light/dark based on coordinates (classic checkerboard)
+  const isLight = ((r + c) % 2) === 0;
+  cell.classList.add(isLight ? 'light' : 'dark');
       cell.dataset.x = c;
       cell.dataset.y = r;
       const piece = document.createElement('img');
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 4be16f9..0f15aa9 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -14,7 +14,8 @@ main{padding:16px}
 /* For grid-rendered boards (JS sets display:grid on .board), let cells stretch to the grid track size.
   For row-based rendering, `.row .cell` provides fixed sizing. */
 .board > .cell { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f0d9b5; border:1px solid #b58863; margin:0; }
-.cell:nth-child(even){background:#b58863}
+.cell.light { background: #f0d9b5; }
+.cell.dark { background: #b58863; }
 .board.flipped{transform:rotate(180deg)}
 .piece{width:48px;height:48px}
 .game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}