diff --git a/frontend/js/game.js b/frontend/js/game.js index 7116d18..3dcff34 100644 --- a/frontend/js/game.js +++ b/frontend/js/game.js @@ -183,8 +183,8 @@ class Game { } botPlay() { - this.draw(this.turn); - const hand = this.hands[this.turn]; + // Le bot défausse une tuile au hasard (supposant qu'il a déjà pioché) + const hand = this.hands[this.turn]; const randomIndex = Math.floor(Math.random() * (hand.tiles.length + (hand.drawn ? 1 : 0))); this.discard(this.turn, randomIndex); } diff --git a/frontend/pages/riichi/chap5.html b/frontend/pages/riichi/chap5.html index 4d42749..b0ad07f 100644 --- a/frontend/pages/riichi/chap5.html +++ b/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 @@
+
+

Riichi Mahjong

+

Entraînez-vous à maîtriser les appels en jouant une partie contre trois bots

+ +
+
@@ -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();