Adrien/Riichi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

start button and improved feeling

Browse source
This commit is contained in:
Didictateur 2026-03-14 10:56:22 +01:00
parent 169aa0e72b
commit 662ee8fd10
2 changed files with 85 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/js/game.js
View file

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

87
frontend/pages/riichi/chap5.html
View file

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