new logic for Game

frontend/js/game.js

@@ -1,8 +1,17 @@
-import "./tile";
+import "./tile.js";
+
+class Group {
+    constructor(tiles, stollenTile = null, dir = null) {
+        this.tiles = tiles;
+        this.stollenTile = stollenTile;
+        this.dir = dir; // 1 for left, 2 for middle, 3 for right
+    }
+}
 
 class Hand {
     constructor(tiles = []) {
         this.tiles = tiles;
+        this.groups = [];
         this.drawn= null;
     }
 
@@ -34,6 +43,18 @@ class Hand {
         this.drawn = null;
         this.sort();
     }
+
+    makeGroup(tiles, stollenTile = null, dir = null) {
+        const group = new Group(tiles, stollenTile, dir);
+        this.groups.push(group);
+        for (let tile of tiles) {
+            const index = this.tiles.findIndex(t => t.equals(tile));
+            if (index !== -1) {
+                this.tiles.splice(index, 1);
+            }
+        }
+        this.flatten();
+    }
 }
 
 class Draw {
@@ -74,6 +95,7 @@ class Discard {
 
     beeingStollen() {
         this.hiddenTiles.push(this.tiles.pop());
+        return this.hiddenTiles[this.hiddenTiles.length - 1];
     }
 
     isIn(tile) {
@@ -83,27 +105,42 @@ class Discard {
 
 class Game {
     constructor() {
-        this.discards = [new Discard(), new Discard(), new Discard(), new Discard()];
+        this.discards = [
-        this.draw = new Draw();
+            new Discard(),
-        this.hands = [
+            new Discard(),
-            new Hand(this.draw.drawHand()),
+            new Discard(),
-            new Hand(this.draw.drawHand()),
+            new Discard()
-            new Hand(this.draw.drawHand()),
-            new Hand(this.draw.drawHand())
         ];
-        this.firstDealer = Math.floor(Math.random() * 4);
+        this.wall = new Draw();
+        this.hands = [
+            this.wall.drawHand(),
+            this.wall.drawHand(),
+            this.wall.drawHand(),
+            this.wall.drawHand()
+        ];
+        for (let hand of this.hands) {
+            hand.sort();
+        }
+        this.firstDealer = Math.floor(Math.random() * 4) * 0;
         this.turn = this.firstDealer;
         this.repeat = 0;
+
+        this.draw(this.turn);
     }
 
     newDeal(hasRepeat = false) {
-        this.discards = [new Discard(), new Discard(), new Discard(), new Discard()];
+        this.discards = [
-        this.draw = new Draw();
+            new Discard(),
+            new Discard(),
+            new Discard(),
+            new Discard()
+        ];
+        this.wall = new Draw();
         this.hands = [
-            new Hand(this.draw.drawHand()),
+            this.wall.drawHand(),
-            new Hand(this.draw.drawHand()),
+            this.wall.drawHand(),
-            new Hand(this.draw.drawHand()),
+            this.wall.drawHand(),
-            new Hand(this.draw.drawHand())
+            this.wall.drawHand()
         ];
         if (!hasRepeat) {
             this.turn = (this.firstDealer + 1) % 4;
@@ -111,4 +148,35 @@ class Game {
             this.repeat++;
         }
     }
-}
+
+    nextTurn() {
+        this.turn = (this.turn + 1) % 4;
+    }
+
+    draw(player) {
+        this.hands[player].drawTile(this.wall.drawTile());
+    }
+
+    discard(player, k) {
+        const tile = this.hands[player].discard(k);
+        this.discards[player].add(tile);
+        this.hands[player].flatten();
+    }
+
+    chii(player, tiles, dir) {
+        const hand = this.hands[player];
+        dir = (player - this.turn) % 4;
+        console.assert(dir == 1);
+        this.hands[player].makeGroup(tiles, this.discards[player].beingStollen(), dir);
+    }
+
+    pon(player, tiles, dir) {
+        const hand = this.hands[player];
+        dir = (player - this.turn) % 4;
+        console.assert(dir == 1);
+        this.hands[player].makeGroup(tiles, this.discards[player].beingStollen(), dir);
+    }
+}
+
+export { Discard, Draw, Game, Group, Hand };
+

frontend/pages/riichi/chap5.html

@@ -131,7 +131,7 @@
       padding: 20px 0 0 20px;
     }
 
-    #hand-0 div:hover {
+    .player-tile:hover {
       transform: translateY(-15px);
       transition: transform 0.2s;
       z-index: 2;
@@ -158,8 +158,9 @@
 
   <script src="/frontend/js/fr/texts.js"></script>
   <script src="/frontend/js/tile.js"></script>
-  <script src="/frontend/js/game.js"></script>
+  <script type="module">
-  <script>
+    import { Game } from '/frontend/js/game.js';
+    
     window.addEventListener('DOMContentLoaded', () => {
       // Charger le menu
       fetch('/components/menu.html')
@@ -180,6 +181,60 @@
           : '<img src="/img/tilineau/idle.png" alt="Tilineau">';
       });
 
+      // Instancier une nouvelle partie et afficher les mains
+      const game = new Game();
+      
+      function renderHands() {
+        for (let i = 0; i < 4; i++) {
+          const handDiv = document.getElementById(`hand-${i}`);
+          handDiv.innerHTML = '';
+          
+          // Conteneur main + draw
+          const handWithDraw = document.createElement('div');
+          handWithDraw.className = 'hand-with-draw';
+          
+          // Sous-div pour les tuiles de la main
+          const handTiles = document.createElement('div');
+          handTiles.className = 'hand-tiles';
+          
+          for (const tile of game.hands[i].tiles) {
+            const tileDiv = document.createElement('div');
+            // Ajouter la classe 'player-tile' uniquement pour le joueur
+            if (i === 0) {
+              tileDiv.className = 'player-tile';
+              tileDiv.innerHTML = tile.getSVG();
+            } else {
+              // Bots : afficher le dos
+              tileDiv.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>`;
+            }
+            handTiles.appendChild(tileDiv);
+          }
+          handWithDraw.appendChild(handTiles);
+          
+          // Afficher la tuile draw si elle existe
+          if (game.hands[i].drawn) {
+            const drawDiv = document.createElement('div');
+            drawDiv.className = 'draw-tile';
+            if (i === 0) {
+              drawDiv.classList.add('player-tile');
+              drawDiv.innerHTML = game.hands[i].drawn.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>`;
+            }
+            handWithDraw.appendChild(drawDiv);
+          }
+          
+          handDiv.appendChild(handWithDraw);
+        }
+      }
+      
+      renderHands();
     });
   </script>
 </body>