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

call pon animation

Browse source
This commit is contained in:
Didictateur 2026-03-14 14:20:34 +01:00
parent 980cc7bbd3
commit 67f3973913
1 changed files with 77 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}
</style>
</head>
<body>
@ -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();
}
});
</script>
</body>