All files / web/src/arcade-games/complement-race/components GameComponent.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Complement Race Game Component with Navigation
 * Wraps the existing ComplementRaceGame with PageWithNav for arcade play
 */

'use client'

import { useRouter } from 'next/navigation'
import { PageWithNav } from '@/components/PageWithNav'
import { ComplementRaceGame } from '@/app/arcade/complement-race/components/ComplementRaceGame'
import { useComplementRace } from '../Provider'

export function GameComponent() {
  const router = useRouter()
  const { state, exitSession, goToSetup } = useComplementRace()

  // Get display name based on style
  const getNavTitle = () => {
    switch (state.style) {
      case 'sprint':
        return 'Steam Sprint'
      case 'survival':
        return 'Endless Circuit'
      case 'practice':
      default:
        return 'Complement Race'
    }
  }

  // Get emoji based on style
  const getNavEmoji = () => {
    switch (state.style) {
      case 'sprint':
        return '🚂'
      case 'survival':
        return '♾️'
      case 'practice':
      default:
        return '🏁'
    }
  }

  return (
    <PageWithNav
      navTitle={getNavTitle()}
      navEmoji={getNavEmoji()}
      emphasizePlayerSelection={state.gamePhase === 'controls'}
      onExitSession={() => {
        exitSession()
        router.push('/arcade')
      }}
      onNewGame={() => {
        goToSetup()
      }}
    >
      <ComplementRaceGame />
    </PageWithNav>
  )
}