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

positionnement des cases

Browse source
This commit is contained in:
Didictateur 2025-10-17 15:47:14 +02:00
parent 990c8c5c36
commit ec1d441b81
4 changed files with 26 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -94,3 +94,5 @@ Regarde les trois prochaines cartes de la pioche.
Une pièce choisie ne peut maintenant se déplacer que si elle capture.
### Tous les mêmes
Au yeux de l'ennemie, toutes les pièces se ressemblent pendant 2 tours.
### Petit pion
Le joueur choisit un pion. À partir du prochain tour, il est promu en reine dès qu'il capture un pièce non pion.

15
frontend/public/game.html
View file

@ -6,20 +6,17 @@
<title>ChessNut 1 Partie</title>
<link rel="stylesheet" href="src/styles.css">
<style>
/* Minimal board CSS: grid that adapts to container size */
/* Minimal board CSS: keep responsive wrapper but delegate main layout to linked stylesheet */
.game-page{max-width:1000px;margin:12px auto;padding:8px}
#board-wrapper{width:100%;max-width:900px;margin:0 auto}
.board{display:grid;border:2px solid #333;box-sizing:border-box}
.row{display:contents}
.cell{position:relative;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* keep a wrapper that forces a square area; the actual .board/.cell layout lives in src/styles.css */
#board-wrapper .board{width:100%;aspect-ratio:1/1;box-sizing:border-box}
.cell .piece{width:100%;height:100%;object-fit:contain;display:block}
.cell.selected{outline:3px solid rgba(0,128,255,0.6);}
/* make board square and responsive: use a wrapper with aspect-ratio */
#board-wrapper .board{width:100%;aspect-ratio:1/1}
/* grid cells will be created dynamically via JS using grid-template */
/* checkerboard colors */
.board .cell:nth-child(odd){ background: #f0d9b5; }
.board .cell:nth-child(even){ background: #b58863; }
/* 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; }
#meta{margin-top:8px}
</style>
</head>

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

@ -6,9 +6,14 @@ 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;border:4px solid #444;width:calc(var(--cell-size)*8);}
.row{display:flex}
.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;background:#f0d9b5;border:1px solid #b58863}
.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);}
.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 */
*, *::before, *::after { box-sizing: border-box; }
/* 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}
.board.flipped{transform:rotate(180deg)}
.piece{width:48px;height:48px}

11
frontend/src/styles.css
View file

@ -6,9 +6,14 @@ 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;border:4px solid #444;width:calc(var(--cell-size)*8);}
.row{display:flex}
.cell{width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center;background:#f0d9b5;border:1px solid #b58863}
.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);}
.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 */
*, *::before, *::after { box-sizing: border-box; }
/* 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}
.board.flipped{transform:rotate(180deg)}
.piece{width:48px;height:48px}