122 lines
3.5 KiB
TypeScript
122 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { css } from '@styled/css'
|
|
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
|
|
import { useKnowYourWorld } from '../Provider'
|
|
import { getFilteredMapDataSync } from '../maps'
|
|
import { MapRenderer } from './MapRenderer'
|
|
import { GameInfoPanel } from './GameInfoPanel'
|
|
|
|
export function PlayingPhase() {
|
|
const { state, clickRegion } = useKnowYourWorld()
|
|
|
|
const mapData = getFilteredMapDataSync(
|
|
state.selectedMap,
|
|
state.selectedContinent,
|
|
state.difficulty
|
|
)
|
|
const totalRegions = mapData.regions.length
|
|
const foundCount = state.regionsFound.length
|
|
const progress = (foundCount / totalRegions) * 100
|
|
|
|
// Get the display name for the current prompt
|
|
const currentRegionName = state.currentPrompt
|
|
? (mapData.regions.find((r) => r.id === state.currentPrompt)?.name ?? null)
|
|
: null
|
|
|
|
// Debug logging
|
|
console.log('[PlayingPhase] Current prompt lookup:', {
|
|
currentPrompt: state.currentPrompt,
|
|
currentRegionName,
|
|
difficulty: state.difficulty,
|
|
totalFilteredRegions: mapData.regions.length,
|
|
filteredRegionIds: mapData.regions.map((r) => r.id).slice(0, 10),
|
|
regionsToFindCount: state.regionsToFind.length,
|
|
regionsToFindSample: state.regionsToFind.slice(0, 5),
|
|
})
|
|
|
|
return (
|
|
<div
|
|
data-component="playing-phase"
|
|
className={css({
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
})}
|
|
>
|
|
<PanelGroup direction="vertical">
|
|
{/* Top Panel: Game Info */}
|
|
<Panel
|
|
defaultSize={20}
|
|
minSize={12}
|
|
maxSize={35}
|
|
className={css({
|
|
// Ensure scrolling on very small screens
|
|
overflow: 'auto',
|
|
})}
|
|
>
|
|
<GameInfoPanel
|
|
mapData={mapData}
|
|
currentRegionName={currentRegionName}
|
|
foundCount={foundCount}
|
|
totalRegions={totalRegions}
|
|
progress={progress}
|
|
/>
|
|
</Panel>
|
|
|
|
{/* Resize Handle */}
|
|
<PanelResizeHandle
|
|
className={css({
|
|
height: '2px',
|
|
background: '#e5e7eb',
|
|
cursor: 'row-resize',
|
|
transition: 'all 0.2s',
|
|
// Increase hit area for mobile
|
|
position: 'relative',
|
|
_before: {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '-4px',
|
|
bottom: '-4px',
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
_hover: {
|
|
background: '#9ca3af',
|
|
height: '3px',
|
|
},
|
|
})}
|
|
/>
|
|
|
|
{/* Bottom Panel: Map */}
|
|
<Panel minSize={65}>
|
|
<div
|
|
data-component="map-panel"
|
|
className={css({
|
|
width: '100%',
|
|
height: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
})}
|
|
>
|
|
<MapRenderer
|
|
mapData={mapData}
|
|
regionsFound={state.regionsFound}
|
|
currentPrompt={state.currentPrompt}
|
|
difficulty={state.difficulty}
|
|
selectedMap={state.selectedMap}
|
|
selectedContinent={state.selectedContinent}
|
|
onRegionClick={clickRegion}
|
|
guessHistory={state.guessHistory}
|
|
playerMetadata={state.playerMetadata}
|
|
/>
|
|
</div>
|
|
</Panel>
|
|
</PanelGroup>
|
|
</div>
|
|
)
|
|
}
|