From 67f3973913b729f2699d9c6617daf39d002f2489 Mon Sep 17 00:00:00 2001 From: Didictateur Date: Sat, 14 Mar 2026 14:20:34 +0100 Subject: [PATCH] call pon animation --- frontend/pages/riichi/chap5.html | 78 +++++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/frontend/pages/riichi/chap5.html b/frontend/pages/riichi/chap5.html index 35fa1fc..583690c 100644 --- a/frontend/pages/riichi/chap5.html +++ b/frontend/pages/riichi/chap5.html @@ -354,6 +354,46 @@ #skip-button { background-color: #808080; /* Gris */ } + + @keyframes ponAnimation { + 0% { + opacity: 0; + transform: translateX(30px) scale(0.3) rotate(-15deg); + } + 10% { + opacity: 1; + transform: translateX(0) scale(1.2) rotate(0deg); + } + 20% { + opacity: 1; + transform: translateX(0) scale(1) rotate(0deg); + } + 70% { + opacity: 1; + transform: translateX(0) scale(1) rotate(0deg); + } + 85% { + opacity: 1; + transform: translateX(0) scale(1) rotate(0deg); + } + 100% { + opacity: 0; + transform: translateX(-60px) scale(0.5) rotate(20deg); + } + } + + .pon-text { + position: fixed; + font-size: 3.5em; + font-weight: 900; + color: #CC3333; + z-index: 999; + animation: ponAnimation 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; + pointer-events: none; + text-shadow: 0 0 15px rgba(204, 51, 51, 0.7), 0 0 30px rgba(204, 51, 51, 0.3); + transform: translate(-50%, -50%); + white-space: nowrap; + } @@ -672,6 +712,38 @@ } } + + async function showPonAnimation(player) { + // Obtenir la position du joueur + const handDiv = document.getElementById(`hand-${player}`); + const rect = handDiv.getBoundingClientRect(); + + // Positions spécifiques pour chaque joueur + const positionOffsets = { + 0: { left: rect.left + rect.width / 2 - 50, top: rect.top - 100 }, + 1: { left: rect.left + rect.width - 250, top: rect.top + rect.height / 2 - 50}, + 2: { left: rect.left + rect.width / 2 - 75, top: rect.top + rect.height + 30 }, + 3: { left: rect.left +150, top: rect.top + rect.height / 2 - 50 } + }; + + const pos = positionOffsets[player] || { left: rect.left + rect.width / 2, top: rect.top - 50 }; + + // Créer l'élément de texte "Pon" + const ponText = document.createElement('div'); + ponText.className = 'pon-text'; + ponText.textContent = 'Pon'; + ponText.style.left = pos.left + 'px'; + ponText.style.top = pos.top + 'px'; + + document.body.appendChild(ponText); + + // Attendre la fin de l'animation + await new Promise(resolve => setTimeout(resolve, 1500)); + + // Supprimer l'élément + ponText.remove(); + } + async function continueBotPlay() { // Continue la boucle des bots après une réponse du joueur canPlayerAct = false; @@ -697,6 +769,7 @@ const tiles = game.hands[player].tiles.filter(t => t.equals(lastTile)).slice(0, 2); game.pon(player, tiles, (player - game.turn) % 4); game.discards[game.turn].beeingStollen(); + await showPonAnimation(player); game.nextTurn(); updateTurnIndicator(); renderHands(); @@ -755,6 +828,7 @@ const tiles = game.hands[player].tiles.filter(t => t.equals(lastTile)).slice(0, 2); game.pon(player, tiles, (player - game.turn) % 4); game.discards[game.turn].beeingStollen(); + await showPonAnimation(player); game.nextTurn(); updateTurnIndicator(); renderHands(); @@ -848,13 +922,14 @@ } // Gestionnaires des boutons d'appels - document.getElementById('pon-button').addEventListener('click', () => { + document.getElementById('pon-button').addEventListener('click', async () => { if (!canPlayerAct) return; canPlayerAct = false; const lastTile = game.discards[game.turn].tiles[game.discards[game.turn].tiles.length - 1]; const tiles = game.hands[0].tiles.filter(t => t.equals(lastTile)).slice(0, 2); game.pon(0, tiles, (0 - game.turn) % 4); game.discards[game.turn].beeingStollen(); + await showPonAnimation(0); game.nextTurn(); hideCallPanel(); updateTurnIndicator(); @@ -875,6 +950,7 @@ renderHands(); updateTurnIndicator(); } + });