From 39c1cc7d693d8b33f01f8a6d5b449792c3ab164d Mon Sep 17 00:00:00 2001 From: Didictateur Date: Fri, 13 Mar 2026 22:55:41 +0100 Subject: [PATCH] can technically discard tiles --- frontend/js/game.js | 26 +++++-- frontend/pages/riichi/chap5.html | 126 ++++++++++++++++++++++++++++++- 2 files changed, 144 insertions(+), 8 deletions(-) diff --git a/frontend/js/game.js b/frontend/js/game.js index 9ab8eeb..7116d18 100644 --- a/frontend/js/game.js +++ b/frontend/js/game.js @@ -20,11 +20,12 @@ class Hand { } discard(k) { - if (k = this.tiles.length) { - tile = this.drawn; + if (k === this.tiles.length) { + const tile = this.drawn; + this.drawn = null; return tile; } else { - tile = this.tiles[k]; + const tile = this.tiles[k]; this.tiles.splice(k, 1); return tile; } @@ -39,7 +40,9 @@ class Hand { } flatten() { - this.tiles.push(this.drawn); + if (this.drawn) { + this.tiles.push(this.drawn); + } this.drawn = null; this.sort(); } @@ -158,9 +161,11 @@ class Game { } discard(player, k) { - const tile = this.hands[player].discard(k); - this.discards[player].add(tile); - this.hands[player].flatten(); + if (player === this.turn) { + const tile = this.hands[player].discard(k); + this.discards[player].add(tile); + this.hands[player].flatten(); + } } chii(player, tiles, dir) { @@ -176,6 +181,13 @@ class Game { console.assert(dir == 1); this.hands[player].makeGroup(tiles, this.discards[player].beingStollen(), dir); } + + botPlay() { + this.draw(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); + } } export { Discard, Draw, Game, Group, Hand }; diff --git a/frontend/pages/riichi/chap5.html b/frontend/pages/riichi/chap5.html index fd71f4e..745b483 100644 --- a/frontend/pages/riichi/chap5.html +++ b/frontend/pages/riichi/chap5.html @@ -136,6 +136,70 @@ transition: transform 0.2s; z-index: 2; } + + #discard-0 { + position: absolute; + transform: translate(-50%, 50%); + bottom: 25%; + left: 50%; + display: flex; + flex-direction: row; + gap: 2px; + flex-wrap: wrap; + width: 400px; + padding: 10px; + } + + #discard-1 { + position: absolute; + transform: translate(-50%, -400%) rotate(-90deg) translate(0%, 450%); + bottom: -25%; + left: 50%; + display: flex; + flex-direction: row; + gap: 2px; + flex-wrap: wrap; + width: 400px; + padding: 10px; + } + + #discard-2 { + position: absolute; + transform: translate(-50%, -400%) rotate(180deg) translate(0%, 450%); + bottom: -25%; + left: 50%; + display: flex; + flex-direction: row; + gap: 2px; + flex-wrap: wrap; + width: 400px; + padding: 10px; + } + + #discard-3 { + position: absolute; + transform: translate(-50%, -400%) rotate(90deg) translate(0%, 450%); + bottom: -25%; + left: 50%; + display: flex; + flex-direction: row; + gap: 2px; + flex-wrap: wrap; + width: 400px; + padding: 10px; + } + + #discard-0 div, + #discard-1 div, + #discard-2 div, + #discard-3 div { + flex-shrink: 0; + } + + .discard-tile svg { + height: 50px; + width: 35px; + } @@ -151,8 +215,11 @@
+
+
+
@@ -197,12 +264,29 @@ const handTiles = document.createElement('div'); handTiles.className = 'hand-tiles'; - for (const tile of game.hands[i].tiles) { + for (let k = 0; k < game.hands[i].tiles.length; k++) { + const tile = game.hands[i].tiles[k]; 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(); + tileDiv.style.cursor = 'pointer'; + const handleClick = (() => { + const tileToDiscard = tile; + return () => { + // Trouver l'index actuel de la tuile + const currentIdx = game.hands[0].tiles.findIndex(t => t === tileToDiscard); + if (currentIdx !== -1) { + game.discard(0, currentIdx); + game.nextTurn(); + renderHands(); + renderDiscards(); + playBotsSequentially(); + } + }; + })(); + tileDiv.addEventListener('click', handleClick); } else { // Bots : afficher le dos tileDiv.innerHTML = ` @@ -221,6 +305,19 @@ if (i === 0) { drawDiv.classList.add('player-tile'); drawDiv.innerHTML = game.hands[i].drawn.getSVG(); + drawDiv.style.cursor = 'pointer'; + const drawnTile = game.hands[i].drawn; + const handleDrawnClick = (() => { + return () => { + // Défausser la tuile piochée (index === tiles.length) + game.discard(0, game.hands[0].tiles.length); + game.nextTurn(); + renderHands(); + renderDiscards(); + playBotsSequentially(); + }; + })(); + drawDiv.addEventListener('click', handleDrawnClick); } else { drawDiv.innerHTML = ` @@ -234,6 +331,33 @@ } } + function renderDiscards() { + for (let i = 0; i < 4; i++) { + const discardDiv = document.getElementById(`discard-${i}`); + discardDiv.innerHTML = ''; + for (const tile of game.discards[i].tiles) { + const tileDiv = document.createElement('div'); + tileDiv.className = 'discard-tile'; + tileDiv.innerHTML = tile.getSVG(); + discardDiv.appendChild(tileDiv); + } + } + } + + async function playBotsSequentially() { + // Les bots jouent après le joueur humain + while (game.turn !== 0) { + await new Promise(resolve => setTimeout(resolve, 800)); + game.botPlay(); + game.nextTurn(); + renderHands(); + renderDiscards(); + } + game.draw(0); + renderHands(); + renderDiscards(); + } + renderHands(); });