@@ -87,10 +88,13 @@
boardEl.style.width = side + 'px';
boardEl.style.height = side + 'px';
}
- if(data.boardState) renderBoardFromState(data.boardState);
+ if(data.boardState) {
+ renderBoardFromState(data.boardState);
+ updateTurnBanner(data.boardState);
+ }
});
- socket.on('game:over', (data)=>{ log('game:over', data); if(data.boardState) renderBoardFromState(data.boardState); });
- socket.on('game:started', (data)=>{ log('game:started', data); if(data.boardState) renderBoardFromState(data.boardState); });
+ socket.on('game:over', (data)=>{ log('game:over', data); if(data.boardState){ renderBoardFromState(data.boardState); updateTurnBanner(data.boardState); } });
+ socket.on('game:started', (data)=>{ log('game:started', data); if(data.boardState){ renderBoardFromState(data.boardState); updateTurnBanner(data.boardState); } });
// selection events (include moves) broadcasted by server
socket.on('game:select', (data) => {
try{
@@ -152,6 +156,24 @@
connectAndJoin();
+ function updateTurnBanner(boardState){
+ const banner = document.getElementById('turnBanner');
+ if(!banner) return;
+ if(!boardState || !boardState.turn || !myColor){
+ banner.classList.remove('show');
+ return;
+ }
+ // myColor is 'white' or 'black', boardState.turn is 'w' or 'b'
+ const myShort = (myColor && myColor[0]) || '';
+ if(myShort === boardState.turn){
+ banner.textContent = "C'est à vous de jouer";
+ banner.classList.add('show');
+ } else {
+ banner.textContent = "En attente du coup de l'adversaire";
+ banner.classList.add('show');
+ }
+ }
+
// movement UI removed: legalMoves and move markers are disabled
// selection helpers (client-side)
diff --git a/public/styles/style.css b/public/styles/style.css
index de01a27..6e05f0f 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -40,6 +40,10 @@ a:hover{text-decoration:underline}
/* layout helpers used from game.html */
.layout-row{display:flex;gap:20px;align-items:flex-start}
+/* turn banner */
+#turnBanner{color:#0b1220;background:#f6ad55;padding:8px 12px;border-radius:8px;font-weight:700;display:none}
+#turnBanner.show{display:inline-block}
+
/* board tweaks */
#board{border:1px solid #333;position:relative;background-image: url('/assets/chess-pieces/boards/8x8_wood.svg');background-size:cover}