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

affichage plateau

Browse source
This commit is contained in:
Didictateur 2025-10-17 15:57:37 +02:00
parent ec1d441b81
commit ce1300bbfe
5 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/public/game.html
View file

@ -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>

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

@ -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');

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

@ -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}

5
frontend/src/game.js
View file

@ -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');

3
frontend/src/styles.css
View file

@ -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}