From ce81438c480c0069bab8091f6a1709df86e06180 Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Sat, 18 Oct 2025 23:21:30 +0200
Subject: [PATCH] affichage de la partie

---
 frontend/public/game.html   | 2 +-
 frontend/public/src/game.js | 2 ++
 frontend/src/game.js        | 4 ++++
 frontend/src/styles.css     | 6 ++++++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontend/public/game.html b/frontend/public/game.html
index 3bdb11d..a67988c 100644
--- a/frontend/public/game.html
+++ b/frontend/public/game.html
@@ -34,7 +34,7 @@
   </div>
 
   <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
-  <script src="src/game.js?v=3"></script>
+  <script src="src/game.js?v=4"></script>
   <script>
     // small bootstrap: fetch initial game state and wire socket updates
     (function(){
diff --git a/frontend/public/src/game.js b/frontend/public/src/game.js
index 56c63d6..6a0fa44 100644
--- a/frontend/public/src/game.js
+++ b/frontend/public/src/game.js
@@ -97,11 +97,13 @@ function renderBoardFromState(state, asWhite = null) {
     }
   }
   container.appendChild(boardEl);
+  // (previously: overlay/drawing code removed per user request)
   // ensure player color display is in sync
   try{ const pc = document.getElementById('player-color'); if(pc && window && window.myColor) pc.textContent = 'Couleur: ' + window.myColor; }catch(e){}
   console.log('renderBoardFromState: board appended (w=' + w + ', h=' + h + ')');
 }
 
+
 function setMeta(text) { q('#meta').textContent = text; }
 
 function renderPlayersList(gameObj){
diff --git a/frontend/src/game.js b/frontend/src/game.js
index a59903f..1456337 100644
--- a/frontend/src/game.js
+++ b/frontend/src/game.js
@@ -10,7 +10,9 @@ function renderBoardFromState(state) {
   const container = q('#board-container');
   if(!container){ console.error('renderBoardFromState: #board-container not found'); return; }
   console.log('renderBoardFromState called, state present?', !!state);
+  // clear previous board and overlays
   container.innerHTML = '';
+  removeExistingOverlay(container);
   const boardEl = document.createElement('div');
   boardEl.className = 'board';
 
@@ -67,9 +69,11 @@ function renderBoardFromState(state) {
     }
   }
   container.appendChild(boardEl);
+  // (previously: overlay/drawing code removed per user request)
   console.log('renderBoardFromState: board appended (w=' + w + ', h=' + h + ')');
 }
 
+
 function setMeta(text) { q('#meta').textContent = text; }
 
 q('#create-only')?.addEventListener('click', async () => {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 92ab72c..5be1939 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -22,3 +22,9 @@ main{padding:16px}
 
 /* Ensure selected cells have no visual effect (display-only mode) */
 .cell.selected{outline: none !important; box-shadow: none !important; border-color: inherit !important; background: inherit !important}
+
+/* Overlay for drawings (arrows/circles) */
+.board-overlay-wrapper{position:relative;width:100%;height:100%;}
+.board-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:auto;z-index:30}
+.overlay-controls button{background:rgba(255,255,255,0.9);border:1px solid #ccc;padding:6px 8px;border-radius:4px;cursor:pointer}
+.overlay-controls button:hover{filter:brightness(0.95)}