From fbd8cd4a6bca44bbc0f7c4e8153900558805a84a Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 6 Oct 2025 14:24:40 -0500
Subject: [PATCH] feat: integrate GameControlButtons into navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wire up GameControlButtons through PageWithNav and GameContextNav to
enable game control buttons in the navigation bar during gameplay.

- Add onSetup, onNewGame props to PageWithNav and GameContextNav
- Show GameControlButtons when !showFullscreenSelection && !canModifyPlayers
- Pass callbacks through component hierarchy

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/PageWithNav.tsx       |  6 ++-
 .../web/src/components/nav/GameContextNav.tsx | 45 +++++--------------
 2 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/components/PageWithNav.tsx b/apps/web/src/components/PageWithNav.tsx
index a5ff620a..a05150c7 100644
--- a/apps/web/src/components/PageWithNav.tsx
+++ b/apps/web/src/components/PageWithNav.tsx
@@ -11,11 +11,13 @@ interface PageWithNavProps {
   navEmoji?: string
   emphasizeGameContext?: boolean
   onExitSession?: () => void
+  onSetup?: () => void
+  onNewGame?: () => void
   canModifyPlayers?: boolean
   children: React.ReactNode
 }
 
-export function PageWithNav({ navTitle, navEmoji, emphasizeGameContext = false, onExitSession, canModifyPlayers = true, children }: PageWithNavProps) {
+export function PageWithNav({ navTitle, navEmoji, emphasizeGameContext = false, onExitSession, onSetup, onNewGame, canModifyPlayers = true, children }: PageWithNavProps) {
   const { players, activePlayers, setActive, activePlayerCount } = useGameMode()
   const [mounted, setMounted] = React.useState(false)
   const [configurePlayerId, setConfigurePlayerId] = React.useState<string | null>(null)
@@ -73,6 +75,8 @@ export function PageWithNav({ navTitle, navEmoji, emphasizeGameContext = false,
       onRemovePlayer={handleRemovePlayer}
       onConfigurePlayer={handleConfigurePlayer}
       onExitSession={onExitSession}
+      onSetup={onSetup}
+      onNewGame={onNewGame}
       canModifyPlayers={canModifyPlayers}
     />
   ) : null
diff --git a/apps/web/src/components/nav/GameContextNav.tsx b/apps/web/src/components/nav/GameContextNav.tsx
index e3ee07f8..8df5050f 100644
--- a/apps/web/src/components/nav/GameContextNav.tsx
+++ b/apps/web/src/components/nav/GameContextNav.tsx
@@ -3,6 +3,7 @@ import { GameModeIndicator } from './GameModeIndicator'
 import { ActivePlayersList } from './ActivePlayersList'
 import { AddPlayerButton } from './AddPlayerButton'
 import { FullscreenPlayerSelection } from './FullscreenPlayerSelection'
+import { GameControlButtons } from './GameControlButtons'
 
 type GameMode = 'none' | 'single' | 'battle' | 'tournament'
 
@@ -24,6 +25,8 @@ interface GameContextNavProps {
   onRemovePlayer: (playerId: string) => void
   onConfigurePlayer: (playerId: string) => void
   onExitSession?: () => void
+  onSetup?: () => void
+  onNewGame?: () => void
   canModifyPlayers?: boolean
 }
 
@@ -39,6 +42,8 @@ export function GameContextNav({
   onRemovePlayer,
   onConfigurePlayer,
   onExitSession,
+  onSetup,
+  onNewGame,
   canModifyPlayers = true
 }: GameContextNavProps) {
   const [isTransitioning, setIsTransitioning] = React.useState(false)
@@ -97,39 +102,13 @@ export function GameContextNav({
           showFullscreenSelection={showFullscreenSelection}
         />
 
-        {/* Exit Session / Return to Arcade Button - only show during active game */}
-        {onExitSession && !showFullscreenSelection && !canModifyPlayers && (
-          <button
-            onClick={onExitSession}
-            style={{
-              background: 'linear-gradient(135deg, #3498db, #2980b9)',
-              border: 'none',
-              borderRadius: '8px',
-              padding: '6px 12px',
-              fontSize: '13px',
-              fontWeight: 'bold',
-              color: 'white',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '4px',
-              transition: 'all 0.2s ease',
-              boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = 'linear-gradient(135deg, #2980b9, #1c6ca1)'
-              e.currentTarget.style.transform = 'translateY(-1px)'
-              e.currentTarget.style.boxShadow = '0 3px 6px rgba(0, 0, 0, 0.15)'
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'linear-gradient(135deg, #3498db, #2980b9)'
-              e.currentTarget.style.transform = 'translateY(0)'
-              e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)'
-            }}
-          >
-            <span>🏟️</span>
-            <span>Return to Arcade</span>
-          </button>
+        {/* Game Control Buttons - only show during active game */}
+        {!showFullscreenSelection && !canModifyPlayers && (
+          <GameControlButtons
+            onSetup={onSetup}
+            onNewGame={onNewGame}
+            onQuit={onExitSession}
+          />
         )}
 
         {/* Active Players + Add Button */}