From ac84a76c3dfbf98500204f4148d64fb416b7ef0d Mon Sep 17 00:00:00 2001 From: "Aaron D. Lee" Date: Sat, 24 Jan 2026 19:29:08 -0500 Subject: [PATCH] Update client UI with latest changes Co-Authored-By: Claude Opus 4.5 --- client/app.js | 32 +++++++++++++++++++-- client/index.html | 4 ++- client/style.css | 72 ++++++++++++++++++++++++++++++++--------------- 3 files changed, 83 insertions(+), 25 deletions(-) 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 @@
Hole 1/9
-
Deck: 52
+
Your turn
+
Leader: -
+
You: 0 pts
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 {