fixed tile comparaison and display draw tile appart

frontend/js/game.js

@@ -7,6 +7,10 @@ class Hand {
         this.sort();
     }
 
+    setDraw(t) {
+        this.draw = t;
+    }
+
     sort() {
         this.tiles.sort((a, b) => {
         if (a.lessThan(b)) return -1;
@@ -58,5 +62,7 @@ class Game {
         this.hands = Array.from({ length: 4 }, () => this.wall.drawHand());
         this.discards = Array.from({ length: 4 }, () => new Discard());
         this.turn = 0;
+
+        this.hands[this.turn].setDraw(this.wall.draw());
     }
 }

frontend/js/tile.js

@@ -62,8 +62,11 @@ class Tile {
   }
 
   lessThan(other) {
-    if (this.family !== other.family) {
-      return this.family < other.family;
+    const order = [Family.MAN, Family.PIN, Family.SOU, Family.WIND, Family.DRAGON];
+    const famA = order.indexOf(this.family);
+    const famB = order.indexOf(other.family);
+    if (famA !== famB) {
+      return famA < famB;
     }
     if (typeof this.value === 'object' && 'value' in this.value) {
       return this.value.value < other.value.value;

frontend/pages/riichi/chap5.html

@@ -91,6 +91,22 @@
       padding: 20px 0 0 20px;
     }
 
+      .hand-tiles {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+      }
+      .hand-with-draw {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+      }
+      .draw-tile {
+        margin-left: 12px;
+        position: relative;
+        top: 0;
+        display: inline-block;
+      }
     #hand-2 {
       position: absolute;
       transform: translate(-50%, -400%) rotate(180deg) translate(0%, 450%);
@@ -181,6 +197,21 @@
           }
           handDiv.appendChild(tileDiv);
         }
+        // Affiche la tuile draw à droite de la main, séparée
+        const drawTile = game.hands[i].draw;
+        if (drawTile) {
+          const drawDiv = document.createElement('div');
+          drawDiv.className = 'draw-tile';
+          if (i === 0) {
+            drawDiv.innerHTML = drawTile.getSVG();
+          } else {
+            drawDiv.innerHTML = `<svg class="tile tile-back" viewBox="0 0 310 410" height="82" width="60">
+              <image href="/img/Regular/Gray.svg" x="10" y="10" height="410" width="310"/>
+              <image href="/img/Regular/Back.svg" x="0" y="0" height="410" width="310"/>
+            </svg>`;
+          }
+          handDiv.appendChild(drawDiv);
+        }
       }
     });
   </script>