All files / web/src/arcade-games/know-your-world/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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import { PageWithNav } from '@/components/PageWithNav'
import { StandardGameLayout } from '@/components/StandardGameLayout'
import { useGameLayoutMode } from '@/contexts/GameLayoutContext'
import { CROP_MODE_EVENT, type CropModeEventDetail } from '../customCrops'
import { useKnowYourWorld } from '../Provider'
import { SetupPhase } from './SetupPhase'
import { PlayingPhase } from './PlayingPhase'
import { ResultsPhase } from './ResultsPhase'

export function GameComponent() {
  const router = useRouter()
  const { state, exitSession, returnToSetup, endGame } = useKnowYourWorld()
  const layoutMode = useGameLayoutMode()

  // Track crop mode to hide nav (dev only)
  const [cropModeActive, setCropModeActive] = useState(false)

  useEffect(() => {
    const handleCropModeChange = (e: Event) => {
      const detail = (e as CustomEvent<CropModeEventDetail>).detail
      setCropModeActive(detail.active)
    }

    window.addEventListener(CROP_MODE_EVENT, handleCropModeChange)
    return () => window.removeEventListener(CROP_MODE_EVENT, handleCropModeChange)
  }, [])

  // Guard against undefined state during session initialization
  if (!state) {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100vh',
          color: '#888',
        }}
      >
        Loading...
      </div>
    )
  }

  // Determine current player for turn indicator (if turn-based mode)
  const currentPlayerId =
    state.gamePhase === 'playing' && state.gameMode === 'turn-based'
      ? state.currentPlayer
      : undefined

  // Map game mode to nav display
  const baseModeDisplay = {
    cooperative: { label: 'Co-op', emoji: '🤝', color: '#10b981' },
    race: { label: 'Race', emoji: '🏁', color: '#ef4444' },
    'turn-based': { label: 'Turns', emoji: '🔄', color: '#8b5cf6' },
  }[state.gameMode] ?? { label: 'Co-op', emoji: '🤝', color: '#10b981' }

  // Map assistance level to display info
  const assistanceDisplay =
    {
      learning: { label: 'Learning', emoji: '🌱' },
      guided: { label: 'Guided', emoji: '🧭' },
      helpful: { label: 'Helpful', emoji: '💡' },
      standard: { label: 'Standard', emoji: '🎯' },
      none: { label: 'Challenge', emoji: '🏆' },
    }[state.assistanceLevel] ?? null

  // Combine mode and assistance level in the label
  const modeDisplay = {
    ...baseModeDisplay,
    label: assistanceDisplay
      ? `${baseModeDisplay.label} • ${assistanceDisplay.emoji} ${assistanceDisplay.label}`
      : baseModeDisplay.label,
  }

  // Setup phase renders its own full-screen layout (map behind nav)
  // Playing phase uses StandardGameLayout (respects nav height)
  // Results phase uses normal flow

  // When crop mode is active (dev only), render without nav to allow unobstructed drawing
  if (cropModeActive) {
    return (
      <>
        {state.gamePhase === 'setup' && <SetupPhase />}
        {state.gamePhase === 'playing' && (
          <StandardGameLayout>
            <PlayingPhase />
          </StandardGameLayout>
        )}
        {state.gamePhase === 'results' && <ResultsPhase />}
      </>
    )
  }

  // When in container mode (practice game break), render without PageWithNav
  // The parent (GameBreakScreen) handles layout and nav
  if (layoutMode === 'container') {
    return (
      <>
        {state.gamePhase === 'setup' && <SetupPhase />}
        {state.gamePhase === 'playing' && (
          <StandardGameLayout>
            <PlayingPhase />
          </StandardGameLayout>
        )}
        {state.gamePhase === 'results' && <ResultsPhase />}
      </>
    )
  }

  return (
    <PageWithNav
      navTitle="Know Your World"
      navEmoji="🌍"
      emphasizePlayerSelection={state.gamePhase === 'setup'}
      currentPlayerId={currentPlayerId}
      playerScores={state.scores}
      onExitSession={() => {
        exitSession()
        router.push('/arcade')
      }}
      onSetup={state.gamePhase !== 'setup' ? returnToSetup : undefined}
      onNewGame={state.gamePhase !== 'setup' && state.gamePhase !== 'results' ? endGame : undefined}
      customModeLabel={modeDisplay.label}
      customModeEmoji={modeDisplay.emoji}
      customModeColor={modeDisplay.color}
    >
      {state.gamePhase === 'setup' && <SetupPhase />}
      {state.gamePhase === 'playing' && (
        <StandardGameLayout>
          <PlayingPhase />
        </StandardGameLayout>
      )}
      {state.gamePhase === 'results' && <ResultsPhase />}
    </PageWithNav>
  )
}