diff --git a/frontend/pages/riichi/chap5.html b/frontend/pages/riichi/chap5.html
index 745b483..56a646b 100644
--- a/frontend/pages/riichi/chap5.html
+++ b/frontend/pages/riichi/chap5.html
@@ -142,11 +142,9 @@
transform: translate(-50%, 50%);
bottom: 25%;
left: 50%;
- display: flex;
- flex-direction: row;
- gap: 2px;
- flex-wrap: wrap;
- width: 400px;
+ display: block;
+ width: 250px;
+ height: auto;
padding: 10px;
}
@@ -155,11 +153,9 @@
transform: translate(-50%, -400%) rotate(-90deg) translate(0%, 450%);
bottom: -25%;
left: 50%;
- display: flex;
- flex-direction: row;
- gap: 2px;
- flex-wrap: wrap;
- width: 400px;
+ display: block;
+ width: 250px;
+ height: auto;
padding: 10px;
}
@@ -168,11 +164,9 @@
transform: translate(-50%, -400%) rotate(180deg) translate(0%, 450%);
bottom: -25%;
left: 50%;
- display: flex;
- flex-direction: row;
- gap: 2px;
- flex-wrap: wrap;
- width: 400px;
+ display: block;
+ width: 250px;
+ height: auto;
padding: 10px;
}
@@ -181,11 +175,9 @@
transform: translate(-50%, -400%) rotate(90deg) translate(0%, 450%);
bottom: -25%;
left: 50%;
- display: flex;
- flex-direction: row;
- gap: 2px;
- flex-wrap: wrap;
- width: 400px;
+ display: block;
+ width: 250px;
+ height: auto;
padding: 10px;
}
@@ -335,10 +327,22 @@
for (let i = 0; i < 4; i++) {
const discardDiv = document.getElementById(`discard-${i}`);
discardDiv.innerHTML = '';
- for (const tile of game.discards[i].tiles) {
+ for (let tileIndex = 0; tileIndex < game.discards[i].tiles.length; tileIndex++) {
+ const tile = game.discards[i].tiles[tileIndex];
const tileDiv = document.createElement('div');
tileDiv.className = 'discard-tile';
tileDiv.innerHTML = tile.getSVG();
+
+ // Calculer la position en grille (6 tuiles par ligne)
+ const row = Math.floor(tileIndex / 6);
+ const col = tileIndex % 6;
+ const x = col * 37; // 35px width + 2px gap
+ const y = row * 52; // 50px height + 2px gap
+
+ tileDiv.style.position = 'absolute';
+ tileDiv.style.left = x + 'px';
+ tileDiv.style.top = y + 'px';
+
discardDiv.appendChild(tileDiv);
}
}