feat: show magnifier only when target region needs it
Add context-aware magnifier visibility that only shows the magnifier when the current target region is small enough to need magnification. This prevents the magnifier from appearing unnecessarily when the player is looking for large regions. Changes: - Add targetNeedsMagnification state to track if current prompt region is very small - Add useEffect to check target region size on prompt/SVG dimension changes - Update shouldShow logic to require both targetNeedsMagnification AND hasSmallRegion - Uses same thresholds as region detection (< 15px or < 200px² area) Also includes cleanup from previous session: - Remove "Give Up" feature and related animation code - Clean up props and state related to give up functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
parent
33faccdf60
commit
c6997ac9a7
|
|
@ -23,7 +23,6 @@ interface KnowYourWorldContextValue {
|
|||
clickRegion: (regionId: string, regionName: string) => void
|
||||
nextRound: () => void
|
||||
endGame: () => void
|
||||
giveUp: () => void
|
||||
endStudy: () => void
|
||||
returnToSetup: () => void
|
||||
|
||||
|
|
@ -98,8 +97,6 @@ export function KnowYourWorldProvider({ children }: { children: React.ReactNode
|
|||
startTime: 0,
|
||||
activePlayers: [],
|
||||
playerMetadata: {},
|
||||
giveUpRegionId: null,
|
||||
giveUpTimestamp: 0,
|
||||
}
|
||||
}, [roomData])
|
||||
|
||||
|
|
@ -184,16 +181,6 @@ export function KnowYourWorldProvider({ children }: { children: React.ReactNode
|
|||
})
|
||||
}, [viewerId, sendMove, state.currentPlayer, activePlayers])
|
||||
|
||||
// Action: Give Up (show current region and advance)
|
||||
const giveUp = useCallback(() => {
|
||||
sendMove({
|
||||
type: 'GIVE_UP',
|
||||
playerId: state.currentPlayer || activePlayers[0] || '',
|
||||
userId: viewerId || '',
|
||||
data: {},
|
||||
})
|
||||
}, [viewerId, sendMove, state.currentPlayer, activePlayers])
|
||||
|
||||
// Setup Action: Set Map
|
||||
const setMap = useCallback(
|
||||
(selectedMap: 'world' | 'usa') => {
|
||||
|
|
@ -375,7 +362,6 @@ export function KnowYourWorldProvider({ children }: { children: React.ReactNode
|
|||
clickRegion,
|
||||
nextRound,
|
||||
endGame,
|
||||
giveUp,
|
||||
endStudy,
|
||||
returnToSetup,
|
||||
setMap,
|
||||
|
|
|
|||
|
|
@ -421,8 +421,6 @@ export class KnowYourWorldValidator
|
|||
startTime: 0,
|
||||
activePlayers: [],
|
||||
playerMetadata: {},
|
||||
giveUpRegionId: null,
|
||||
giveUpTimestamp: 0,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export function GameInfoPanel({
|
|||
}: GameInfoPanelProps) {
|
||||
const { resolvedTheme } = useTheme()
|
||||
const isDark = resolvedTheme === 'dark'
|
||||
const { state, lastError, clearError, giveUp } = useKnowYourWorld()
|
||||
const { state, lastError, clearError } = useKnowYourWorld()
|
||||
|
||||
// Auto-dismiss errors after 3 seconds
|
||||
useEffect(() => {
|
||||
|
|
@ -67,9 +67,6 @@ export function GameInfoPanel({
|
|||
border: '2px solid',
|
||||
borderColor: 'blue.500',
|
||||
minWidth: 0, // Allow shrinking
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
|
|
@ -93,28 +90,6 @@ export function GameInfoPanel({
|
|||
>
|
||||
{currentRegionName || '...'}
|
||||
</div>
|
||||
<button
|
||||
onClick={giveUp}
|
||||
data-action="give-up"
|
||||
className={css({
|
||||
padding: '1',
|
||||
fontSize: '2xs',
|
||||
cursor: 'pointer',
|
||||
bg: isDark ? 'yellow.800' : 'yellow.100',
|
||||
color: isDark ? 'yellow.200' : 'yellow.800',
|
||||
rounded: 'sm',
|
||||
border: '1px solid',
|
||||
borderColor: isDark ? 'yellow.600' : 'yellow.400',
|
||||
fontWeight: 'bold',
|
||||
transition: 'all 0.2s',
|
||||
_hover: {
|
||||
bg: isDark ? 'yellow.700' : 'yellow.200',
|
||||
transform: 'scale(1.02)',
|
||||
},
|
||||
})}
|
||||
>
|
||||
Give Up
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress - compact */}
|
||||
|
|
|
|||
|
|
@ -112,8 +112,6 @@ const Template = (args: StoryArgs) => {
|
|||
onRegionClick={(id, name) => console.log('Clicked:', id, name)}
|
||||
guessHistory={guessHistory}
|
||||
playerMetadata={mockPlayerMetadata}
|
||||
giveUpRegionId={null}
|
||||
giveUpTimestamp={0}
|
||||
forceTuning={{
|
||||
showArrows: args.showArrows,
|
||||
centeringStrength: args.centeringStrength,
|
||||
|
|
|
|||
|
|
@ -68,9 +68,6 @@ interface MapRendererProps {
|
|||
color: string
|
||||
}
|
||||
>
|
||||
// Give up animation
|
||||
giveUpRegionId: string | null
|
||||
giveUpTimestamp: number
|
||||
// Force simulation tuning parameters
|
||||
forceTuning?: {
|
||||
showArrows?: boolean
|
||||
|
|
@ -133,8 +130,6 @@ export function MapRenderer({
|
|||
onRegionClick,
|
||||
guessHistory,
|
||||
playerMetadata,
|
||||
giveUpRegionId,
|
||||
giveUpTimestamp,
|
||||
forceTuning = {},
|
||||
showDebugBoundingBoxes = SHOW_DEBUG_BOUNDING_BOXES,
|
||||
}: MapRendererProps) {
|
||||
|
|
@ -262,10 +257,6 @@ export function MapRenderer({
|
|||
// Track whether current target region needs magnification
|
||||
const [targetNeedsMagnification, setTargetNeedsMagnification] = useState(false)
|
||||
|
||||
// Track give up animation state
|
||||
const [isGivingUpAnimation, setIsGivingUpAnimation] = useState(false)
|
||||
const [giveUpAnimationProgress, setGiveUpAnimationProgress] = useState(0) // 0-1 for flash animation
|
||||
|
||||
// Debug: Track bounding boxes for visualization
|
||||
const [debugBoundingBoxes, setDebugBoundingBoxes] = useState<DebugBoundingBox[]>([])
|
||||
// Debug: Track full zoom search result for detailed panel
|
||||
|
|
@ -470,44 +461,6 @@ export function MapRenderer({
|
|||
})
|
||||
}, [currentPrompt, svgDimensions]) // Re-check when prompt or SVG size changes
|
||||
|
||||
// Handle give up animation
|
||||
useEffect(() => {
|
||||
if (!giveUpRegionId) {
|
||||
setIsGivingUpAnimation(false)
|
||||
setGiveUpAnimationProgress(0)
|
||||
return
|
||||
}
|
||||
|
||||
console.log('[GiveUp] Starting animation for region:', giveUpRegionId)
|
||||
setIsGivingUpAnimation(true)
|
||||
setShowMagnifier(true)
|
||||
setTargetOpacity(1)
|
||||
|
||||
// Animate flash over 3 seconds (3 pulses)
|
||||
const duration = 3000 // 3 seconds total
|
||||
const startTime = Date.now()
|
||||
|
||||
const animate = () => {
|
||||
const elapsed = Date.now() - startTime
|
||||
const progress = Math.min(elapsed / duration, 1)
|
||||
|
||||
// Create pulsing effect: 0 -> 1 -> 0 -> 1 -> 0 -> 1 -> 0 (3 full pulses)
|
||||
const pulseProgress = Math.sin(progress * Math.PI * 3) ** 2
|
||||
|
||||
setGiveUpAnimationProgress(pulseProgress)
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate)
|
||||
} else {
|
||||
setIsGivingUpAnimation(false)
|
||||
setGiveUpAnimationProgress(0)
|
||||
console.log('[GiveUp] Animation complete')
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate)
|
||||
}, [giveUpRegionId, giveUpTimestamp])
|
||||
|
||||
const [labelPositions, setLabelPositions] = useState<RegionLabelPosition[]>([])
|
||||
const [smallRegionLabelPositions, setSmallRegionLabelPositions] = useState<
|
||||
Array<{
|
||||
|
|
|
|||
|
|
@ -112,8 +112,6 @@ export function PlayingPhase() {
|
|||
onRegionClick={clickRegion}
|
||||
guessHistory={state.guessHistory}
|
||||
playerMetadata={state.playerMetadata}
|
||||
giveUpRegionId={state.giveUpRegionId}
|
||||
giveUpTimestamp={state.giveUpTimestamp}
|
||||
/>
|
||||
</div>
|
||||
</Panel>
|
||||
|
|
|
|||
|
|
@ -70,10 +70,6 @@ export interface KnowYourWorldState extends GameState {
|
|||
// Multiplayer
|
||||
activePlayers: string[]
|
||||
playerMetadata: Record<string, any>
|
||||
|
||||
// Give up animation state
|
||||
giveUpRegionId: string | null // Region ID to show/flash when user gives up
|
||||
giveUpTimestamp: number // When the give up was triggered (for animation timing)
|
||||
}
|
||||
|
||||
// Move types
|
||||
|
|
@ -174,10 +170,3 @@ export type KnowYourWorldMove =
|
|||
selectedContinent: ContinentId | 'all'
|
||||
}
|
||||
}
|
||||
| {
|
||||
type: 'GIVE_UP'
|
||||
playerId: string
|
||||
userId: string
|
||||
timestamp: number
|
||||
data: {}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue