From 4dabff91d358402006d2f0994e57ff3bdb7614b3 Mon Sep 17 00:00:00 2001
From: Didictateur <adrien.decosse@gmail.com>
Date: Fri, 13 Mar 2026 23:00:23 +0100
Subject: [PATCH] the discards stopped moving

---
 frontend/pages/riichi/chap5.html | 46 +++++++++++++++++---------------
 1 file changed, 25 insertions(+), 21 deletions(-)

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);
           }
         }