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

turn indicator

Browse source
This commit is contained in:
Didictateur 2026-03-14 10:40:49 +01:00
parent b28046d935
commit 169aa0e72b
1 changed files with 71 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -137,6 +137,20 @@
z-index: 2; z-index: 2;
} }
#game-info {
position: absolute;
top: 65.5%;
left: 49%;
transform: translate(-50%, -50%);
width: 259px;
height: 259px;
background-color: #f5f5f0;
border-radius: 20px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1;
}
#discard-0 { #discard-0 {
position: absolute; position: absolute;
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
@ -192,6 +206,43 @@
height: 65px; height: 65px;
width: 48px; width: 48px;
} }
.turn-indicator {
position: absolute;
display: none;
height: 6px;
background: linear-gradient(90deg, #FFD700, #FFA500);
border-radius: 3px;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
#turn-indicator-0 {
transform: translate(-50%, 50%);
bottom: 20%;
left: 49%;
width: 250px;
}
#turn-indicator-1 {
transform: translate(-50%, -400%) rotate(-90deg) translate(0%, 450%);
bottom: 32.5%;
left: 61%;
width: 250px;
}
#turn-indicator-2 {
transform: translate(-50%, -400%) rotate(180deg) translate(0%, 450%);
bottom: 44%;
left: 49%;
width: 250px;
}
#turn-indicator-3 {
transform: translate(-50%, -400%) rotate(90deg) translate(0%, 450%);
bottom: 32%;
left: 37%;
width: 250px;
}
</style> </style>
</head> </head>
<body> <body>
@ -204,14 +255,19 @@
<div id="game-center"> <div id="game-center">
<div id="game"> <div id="game">
<div id="game-info"></div>
<div id="hand-0"></div> <div id="hand-0"></div>
<div id="discard-0"></div> <div id="discard-0"></div>
<div id="turn-indicator-0" class="turn-indicator"></div>
<div id="hand-1"></div> <div id="hand-1"></div>
<div id="discard-1"></div> <div id="discard-1"></div>
<div id="turn-indicator-1" class="turn-indicator"></div>
<div id="hand-2"></div> <div id="hand-2"></div>
<div id="discard-2"></div> <div id="discard-2"></div>
<div id="turn-indicator-2" class="turn-indicator"></div>
<div id="hand-3"></div> <div id="hand-3"></div>
<div id="discard-3"></div> <div id="discard-3"></div>
<div id="turn-indicator-3" class="turn-indicator"></div>
</div> </div>
</div> </div>
@ -272,6 +328,7 @@
if (currentIdx !== -1) { if (currentIdx !== -1) {
game.discard(0, currentIdx); game.discard(0, currentIdx);
game.nextTurn(); game.nextTurn();
updateTurnIndicator();
renderHands(); renderHands();
renderDiscards(); renderDiscards();
playBotsSequentially(); playBotsSequentially();
@ -304,6 +361,7 @@
// Défausser la tuile piochée (index === tiles.length) // Défausser la tuile piochée (index === tiles.length)
game.discard(0, game.hands[0].tiles.length); game.discard(0, game.hands[0].tiles.length);
game.nextTurn(); game.nextTurn();
updateTurnIndicator();
renderHands(); renderHands();
renderDiscards(); renderDiscards();
playBotsSequentially(); playBotsSequentially();
@ -354,6 +412,7 @@
await new Promise(resolve => setTimeout(resolve, 800)); await new Promise(resolve => setTimeout(resolve, 800));
game.botPlay(); game.botPlay();
game.nextTurn(); game.nextTurn();
updateTurnIndicator();
renderHands(); renderHands();
renderDiscards(); renderDiscards();
} }
@ -362,7 +421,19 @@
renderDiscards(); renderDiscards();
} }
function updateTurnIndicator() {
for (let i = 0; i < 4; i++) {
const indicator = document.getElementById(`turn-indicator-${i}`);
if (i === game.turn) {
indicator.style.display = 'block';
} else {
indicator.style.display = 'none';
}
}
}
renderHands(); renderHands();
updateTurnIndicator();
}); });
</script> </script>
</body> </body>