Update client UI with latest changes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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) {

client/index.html

@@ -191,7 +191,9 @@
                 <div class="game-main">
                     <div class="game-header">
                         <div class="round-info">Hole <span id="current-round">1</span>/<span id="total-rounds">9</span></div>
-                        <div class="deck-info">Deck: <span id="deck-count">52</span></div>
+                        <div class="turn-info" id="turn-info">Your turn</div>
+                        <div class="leader-info" id="leader-info">Leader: -</div>
+                        <div class="score-info">You: <span id="your-score">0</span> pts</div>
                         <button id="mute-btn" class="mute-btn" title="Toggle sound">🔊</button>
                     </div>
 

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;
+    font-size: 0.85rem;
-    width: calc(100vw - 30px);
+    width: calc(100vw - 250px);
-    max-width: 1400px;
+    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;
+    top: 15px;
-    right: 10px;
+    right: 15px;
-    background: rgba(0,0,0,0.7);
+    background: linear-gradient(145deg, rgba(20, 60, 40, 0.95) 0%, rgba(10, 35, 25, 0.98) 100%);
-    border-radius: 8px;
+    border-radius: 12px;
-    padding: 10px;
+    padding: 12px;
-    width: 200px;
+    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;
+    margin-bottom: 10px;
-    opacity: 0.9;
+    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 {