start button and improved feeling

frontend/js/game.js

@@ -183,8 +183,8 @@ class Game {
     }
 
     botPlay() {
-        this.draw(this.turn);
+        // Le bot défausse une tuile au hasard (supposant qu'il a déjà pioché)
-                const hand = this.hands[this.turn];
+        const hand = this.hands[this.turn];
         const randomIndex = Math.floor(Math.random() * (hand.tiles.length + (hand.drawn ? 1 : 0)));
         this.discard(this.turn, randomIndex);
     }

frontend/pages/riichi/chap5.html

@@ -32,7 +32,7 @@
       position: absolute;
       top: 250px;
       right: 170px;
-      z-index: 1;
+      z-index: 101;
       display: none;
     }
 
@@ -56,11 +56,64 @@
       position: absolute;
       top: 0px;
       left: 350px;
-      display: flex;
+      display: none;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
     }
+
+    #start-screen {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100vw;
+      height: 100vh;
+      background: transparent;
+      z-index: 100;
+    }
+
+    #start-screen h2 {
+      color: white;
+      font-size: 3em;
+      margin-bottom: 20px;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    }
+
+    #start-screen p {
+      color: white;
+      font-size: 1.2em;
+      margin-bottom: 40px;
+      text-align: center;
+      max-width: 500px;
+    }
+
+    #start-button {
+      padding: 15px 50px;
+      font-size: 1.3em;
+      background-color: #FFD700;
+      color: #333;
+      border: none;
+      border-radius: 50px;
+      cursor: pointer;
+      font-weight: bold;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+      transition: all 0.3s ease;
+    }
+
+    #start-button:hover {
+      background-color: #FFA500;
+      transform: scale(1.05);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+    }
+
+    #start-button:active {
+      transform: scale(0.98);
+    }
     #game {
       position: relatives;
       width: var(--game_radius);
@@ -253,6 +306,12 @@
   </div>
   <div id="mascotte"></div>
 
+  <div id="start-screen">
+    <h2>Riichi Mahjong</h2>
+    <p>Entraînez-vous à maîtriser les appels en jouant une partie contre trois bots</p>
+    <button id="start-button">Lancer la partie</button>
+  </div>
+
   <div id="game-center">
     <div id="game">
       <div id="game-info"></div>
@@ -277,6 +336,22 @@
     import { Game } from '/frontend/js/game.js';
     
     window.addEventListener('DOMContentLoaded', () => {
+      // Gestion du bouton de démarrage
+      const startButton = document.getElementById('start-button');
+      const startScreen = document.getElementById('start-screen');
+      const gameCenter = document.getElementById('game-center');
+
+      startButton.addEventListener('click', () => {
+        startScreen.style.display = 'none';
+        gameCenter.style.display = 'flex';
+        // Instancier une nouvelle partie et afficher les mains
+        game = new Game();
+        renderHands();
+        updateTurnIndicator();
+      });
+
+      // Déclarer les variables et fonctions ici pour qu'elles soient accessibles partout
+      let game;
       // Charger le menu
       fetch('/components/menu.html')
         .then(r => r.text())
@@ -297,7 +372,6 @@
       });
 
       // Instancier une nouvelle partie et afficher les mains
-      const game = new Game();
       
       function renderHands() {
         for (let i = 0; i < 4; i++) {
@@ -409,7 +483,12 @@
       async function playBotsSequentially() {
         // Les bots jouent après le joueur humain
         while (game.turn !== 0) {
-          await new Promise(resolve => setTimeout(resolve, 800));
+          await new Promise(resolve => setTimeout(resolve, 500));
+          game.draw(game.turn);
+          renderHands();
+          // Pause aléatoire pour simuler la réflexion
+          const randomDelay = 1000 + Math.random() * 1000;
+          await new Promise(resolve => setTimeout(resolve, randomDelay));
           game.botPlay();
           game.nextTurn();
           updateTurnIndicator();