diff --git a/frontend/pages/riichi/chap5.html b/frontend/pages/riichi/chap5.html
index 0f6cf73..4d42749 100644
--- a/frontend/pages/riichi/chap5.html
+++ b/frontend/pages/riichi/chap5.html
@@ -137,6 +137,20 @@
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 {
position: absolute;
transform: translate(-50%, 50%);
@@ -192,6 +206,43 @@
height: 65px;
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;
+ }
@@ -204,14 +255,19 @@
@@ -272,6 +328,7 @@
if (currentIdx !== -1) {
game.discard(0, currentIdx);
game.nextTurn();
+ updateTurnIndicator();
renderHands();
renderDiscards();
playBotsSequentially();
@@ -304,6 +361,7 @@
// Défausser la tuile piochée (index === tiles.length)
game.discard(0, game.hands[0].tiles.length);
game.nextTurn();
+ updateTurnIndicator();
renderHands();
renderDiscards();
playBotsSequentially();
@@ -354,6 +412,7 @@
await new Promise(resolve => setTimeout(resolve, 800));
game.botPlay();
game.nextTurn();
+ updateTurnIndicator();
renderHands();
renderDiscards();
}
@@ -362,7 +421,19 @@
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();
+ updateTurnIndicator();
});