From ac2d53b40403e107b7268cbc8480e1bcde7e25c2 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 21 Feb 2026 23:40:24 -0500
Subject: [PATCH] Move Hole indicator and End Game button to mobile bottom bar

- Add round info and leave button to mobile-bottom-bar HTML
- Hide .round-info and #leave-game-btn from header on mobile
- Style round info as subtle text, leave button as red-tinted pill
- Slim down bottom bar: smaller gaps/padding to fit 4 items
- Sync round numbers and leave text via JS (renderGame + bindEvents)
- Frees up header space, reduces mobile crowding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/app.js     | 13 ++++++++++++-
 client/index.html |  2 ++
 client/style.css  | 34 +++++++++++++++++++++++++++-------
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/client/app.js b/client/app.js
index e3eaf3e..f3a572e 100644
--- a/client/app.js
+++ b/client/app.js
@@ -545,6 +545,8 @@ class GolfGame {
         this.addSelectedCpusBtn.addEventListener('click', () => { this.playSound('success'); this.addSelectedCpus(); });
         this.muteBtn.addEventListener('click', () => this.toggleSound());
         this.leaveGameBtn.addEventListener('click', () => { this.playSound('click'); this.leaveGame(); });
+        const mobileLeaveBtn = document.getElementById('mobile-leave-btn');
+        if (mobileLeaveBtn) mobileLeaveBtn.addEventListener('click', () => { this.playSound('click'); this.leaveGame(); });
         this.gameLogoutBtn.addEventListener('click', () => { this.playSound('click'); this.auth?.logout(); });
 
         // Copy room code to clipboard
@@ -3073,7 +3075,10 @@ class GolfGame {
         this.waitingForFlip = false;
         this.previousState = null;
         // Update leave button text based on role
-        this.leaveGameBtn.textContent = this.isHost ? 'End Game' : 'Leave';
+        const leaveText = this.isHost ? 'End Game' : 'Leave';
+        this.leaveGameBtn.textContent = leaveText;
+        const mobileLeave = document.getElementById('mobile-leave-btn');
+        if (mobileLeave) mobileLeave.textContent = leaveText;
         // Update active rules bar
         this.updateActiveRulesBar();
     }
@@ -3750,6 +3755,12 @@ class GolfGame {
         this.currentRoundSpan.textContent = this.gameState.current_round;
         this.totalRoundsSpan.textContent = this.gameState.total_rounds;
 
+        // Sync mobile bottom bar round info
+        const mobileRound = document.getElementById('mobile-current-round');
+        const mobileTotal = document.getElementById('mobile-total-rounds');
+        if (mobileRound) mobileRound.textContent = this.gameState.current_round;
+        if (mobileTotal) mobileTotal.textContent = this.gameState.total_rounds;
+
         // Show/hide final turn badge with enhanced urgency
         const isFinalTurn = this.gameState.phase === 'final_turn';
         if (isFinalTurn) {
diff --git a/client/index.html b/client/index.html
index 402df87..506a339 100644
--- a/client/index.html
+++ b/client/index.html
@@ -401,8 +401,10 @@
 
             <!-- Mobile bottom bar (hidden on desktop) -->
             <div id="mobile-bottom-bar">
+                <div class="mobile-round-info">Hole <span id="mobile-current-round">1</span>/<span id="mobile-total-rounds">9</span></div>
                 <button class="mobile-bar-btn" data-drawer="standings-panel">Standings</button>
                 <button class="mobile-bar-btn" data-drawer="scoreboard">Scores</button>
+                <button id="mobile-leave-btn" class="mobile-bar-btn mobile-leave-btn">End Game</button>
             </div>
 
             <!-- Drawer backdrop for mobile -->
diff --git a/client/style.css b/client/style.css
index 22ddd9d..20400e1 100644
--- a/client/style.css
+++ b/client/style.css
@@ -4960,10 +4960,12 @@ body.mobile-portrait .header-col-right {
     gap: 4px;
 }
 
-/* Hide non-essential header items on mobile */
+/* Hide items moved to bottom bar on mobile */
 body.mobile-portrait .active-rules-bar,
 body.mobile-portrait .game-username,
-body.mobile-portrait #game-logout-btn {
+body.mobile-portrait #game-logout-btn,
+body.mobile-portrait .game-header .round-info,
+body.mobile-portrait .game-header #leave-game-btn {
     display: none !important;
 }
 
@@ -5257,24 +5259,42 @@ body.mobile-portrait #mobile-bottom-bar {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 12px;
+    gap: 8px;
     background: none;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 8px 20px;
-    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
+    padding: 6px 12px;
+    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
     z-index: 500;
 }
 
+body.mobile-portrait #mobile-bottom-bar .mobile-round-info {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.65rem;
+    font-weight: 600;
+    white-space: nowrap;
+    letter-spacing: 0.05em;
+}
+
+body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn {
+    background: rgba(180, 60, 60, 0.3) !important;
+    border-color: rgba(220, 80, 80, 0.4) !important;
+    color: rgba(255, 120, 120, 0.9) !important;
+}
+
+body.mobile-portrait #mobile-bottom-bar .mobile-leave-btn:active {
+    background: rgba(180, 60, 60, 0.5) !important;
+}
+
 body.mobile-portrait #mobile-bottom-bar .mobile-bar-btn {
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.65);
-    font-size: 0.7rem;
+    font-size: 0.65rem;
     font-weight: 600;
-    padding: 7px 20px;
+    padding: 6px 14px;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 0.1em;