diff --git a/client/app.js b/client/app.js
index df32033..9919bf2 100644
--- a/client/app.js
+++ b/client/app.js
@@ -138,7 +138,9 @@ class GolfGame {
// Game elements
this.currentRoundSpan = document.getElementById('current-round');
this.totalRoundsSpan = document.getElementById('total-rounds');
- this.deckCountSpan = document.getElementById('deck-count');
+ this.turnInfo = document.getElementById('turn-info');
+ this.leaderInfo = document.getElementById('leader-info');
+ this.yourScore = document.getElementById('your-score');
this.muteBtn = document.getElementById('mute-btn');
this.opponentsRow = document.getElementById('opponents-row');
this.deck = document.getElementById('deck');
@@ -762,7 +764,33 @@ class GolfGame {
// Update header
this.currentRoundSpan.textContent = this.gameState.current_round;
this.totalRoundsSpan.textContent = this.gameState.total_rounds;
- this.deckCountSpan.textContent = this.gameState.deck_remaining;
+
+ // Update turn info
+ const currentPlayer = this.gameState.players.find(p => p.id === this.gameState.current_player_id);
+ if (currentPlayer) {
+ if (currentPlayer.id === this.playerId) {
+ this.turnInfo.textContent = "Your turn!";
+ this.turnInfo.style.color = "#f4a460";
+ } else {
+ this.turnInfo.textContent = `${currentPlayer.name}'s turn`;
+ this.turnInfo.style.color = "#fff";
+ }
+ }
+
+ // Update leader info (by total score)
+ const sortedByTotal = [...this.gameState.players].sort((a, b) => a.total_score - b.total_score);
+ const leader = sortedByTotal[0];
+ if (leader && this.gameState.current_round > 1) {
+ this.leaderInfo.textContent = `Leader: ${leader.name} (${leader.total_score})`;
+ } else {
+ this.leaderInfo.textContent = "";
+ }
+
+ // Update your score
+ const me = this.gameState.players.find(p => p.id === this.playerId);
+ if (me) {
+ this.yourScore.textContent = me.round_score ?? 0;
+ }
// Update discard pile
if (this.gameState.discard_top) {
diff --git a/client/index.html b/client/index.html
index 37ce113..e6f87f1 100644
--- a/client/index.html
+++ b/client/index.html
@@ -191,7 +191,9 @@
diff --git a/client/style.css b/client/style.css
index 2d56e5a..ce230b6 100644
--- a/client/style.css
+++ b/client/style.css
@@ -24,7 +24,7 @@ body {
max-width: none;
width: 100vw;
margin-left: calc(-50vw + 50%);
- padding: 0 15px;
+ padding: 0;
box-sizing: border-box;
}
@@ -281,14 +281,28 @@ input::placeholder {
/* Game Screen */
.game-header {
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
- padding: 5px 12px;
+ gap: clamp(15px, 3vw, 40px);
+ padding: 6px 15px;
background: rgba(0,0,0,0.2);
border-radius: 6px;
- font-size: 0.8rem;
- width: calc(100vw - 30px);
- max-width: 1400px;
+ font-size: 0.85rem;
+ width: calc(100vw - 250px);
+ margin-left: 10px;
+}
+
+.game-header .turn-info {
+ font-weight: 600;
+ color: #f4a460;
+}
+
+.game-header .leader-info {
+ opacity: 0.9;
+}
+
+.game-header .score-info {
+ opacity: 0.9;
}
.mute-btn {
@@ -653,26 +667,35 @@ input::placeholder {
max-width: 100%;
}
-/* Scoreboard Panel - positioned as overlay */
+/* Scoreboard Panel - positioned as overlay with cool styling */
.scoreboard-panel {
position: fixed;
- top: 10px;
- right: 10px;
- background: rgba(0,0,0,0.7);
- border-radius: 8px;
- padding: 10px;
- width: 200px;
+ top: 15px;
+ right: 15px;
+ background: linear-gradient(145deg, rgba(20, 60, 40, 0.95) 0%, rgba(10, 35, 25, 0.98) 100%);
+ border-radius: 12px;
+ padding: 12px;
+ width: 210px;
flex-shrink: 0;
overflow: hidden;
z-index: 100;
- backdrop-filter: blur(4px);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(244, 164, 96, 0.3);
+ box-shadow:
+ 0 4px 20px rgba(0, 0, 0, 0.4),
+ 0 0 30px rgba(244, 164, 96, 0.1),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.scoreboard-panel > h4 {
- font-size: 0.85rem;
+ font-size: 0.9rem;
text-align: center;
- margin-bottom: 8px;
- opacity: 0.9;
+ margin-bottom: 10px;
+ color: #f4a460;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ font-weight: 700;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.scoreboard-panel table {
@@ -683,27 +706,32 @@ input::placeholder {
.scoreboard-panel th,
.scoreboard-panel td {
- padding: 5px 4px;
+ padding: 6px 5px;
text-align: center;
- border-bottom: 1px solid rgba(255,255,255,0.15);
+ border-bottom: 1px solid rgba(255,255,255,0.1);
}
.scoreboard-panel th {
font-weight: 600;
- background: rgba(0,0,0,0.2);
+ background: rgba(0,0,0,0.3);
font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: rgba(255, 255, 255, 0.7);
}
.scoreboard-panel td:first-child {
text-align: left;
+ font-weight: 500;
}
.scoreboard-panel tr.winner {
- background: rgba(244, 164, 96, 0.3);
+ background: linear-gradient(90deg, rgba(244, 164, 96, 0.4) 0%, rgba(244, 164, 96, 0.2) 100%);
}
.scoreboard-panel tr.current-player {
- background: rgba(244, 164, 96, 0.15);
+ background: rgba(244, 164, 96, 0.2);
+ box-shadow: inset 3px 0 0 #f4a460;
}
.game-buttons {