Frontend Test Mode

Use the test page at /dev/test to view and screenshot any frontend state without API calls. This uses local mock data and existing sprites from /public/sprites/.

Quick Start

•Ensure dev server is running (npm run dev)
•Use the Chrome extension to navigate to test URLs
•Take screenshots with &controls=false for clean captures

URL Reference

State	URL
Arena (turn 1)	`/dev/test?phase=arena&turn=0`
Arena (mid-fight)	`/dev/test?phase=arena&turn=5`
Arena (final turn)	`/dev/test?phase=arena&turn=13`
VS Splash (sprites visible)	`/dev/test?phase=vs_splash&subphase=sprites_visible`
VS Splash (with VS text)	`/dev/test?phase=vs_splash&subphase=vs_text`
Winner Reveal (confetti)	`/dev/test?phase=winner_reveal&subphase=confetti`
Loading (pending)	`/dev/test?phase=loading&subphase=pending`
Loading (sprites)	`/dev/test?phase=loading&subphase=generating_sprites`
Loading (script)	`/dev/test?phase=loading&subphase=generating_script`
Complete (with share button)	`/dev/test?phase=complete`
Error state	`/dev/test?phase=error`

URL Parameters

Parameter	Values	Default	Description
`phase`	`loading`, `vs_splash`, `arena`, `winner_reveal`, `complete`, `error`	`arena`	Main fight phase
`subphase`	Phase-specific (see below)	First	Sub-state within phase
`turn`	`0` to `13`	`0`	Turn index for arena phase
`paused`	`true`, `false`	`true`	Freeze CSS animations
`controls`	`true`, `false`	`true`	Show/hide control panel
`fixture`	`default`, `bwins`	`default`	Mock data set (A wins vs B wins)

Subphases by Phase

•loading: pending, generating_sprites, generating_script
•vs_splash: entering, sprites_visible, vs_text, flash, exiting
•winner_reveal: overlay, confetti, complete

Example Workflow

Taking Screenshots for Documentation

code

1. Navigate to: /dev/test?phase=arena&turn=5&controls=false
2. Take screenshot
3. Navigate to: /dev/test?phase=winner_reveal&subphase=confetti&controls=false
4. Take screenshot

Testing a Component Change

code

1. Navigate to: /dev/test?phase=arena&turn=0
2. Use control panel to scrub through turns with the slider
3. Check different fixtures (default vs bwins) to test winner states

Debugging Animation Issues

code

1. Navigate to: /dev/test?phase=arena&turn=5&paused=false
2. Observe animations running
3. Toggle pause in control panel to freeze state

Mock Data

The test page uses fixtures from /src/data/test-fixtures.ts:

•default: "Ancient Dragon" vs "Sneaky Goblin" (Dragon wins)
•bwins: "Noble Knight" vs "Dark Wizard" (Wizard wins)

Both fixtures have 14 turns with varied impacts (hit, critical, miss).

Control Panel Features

When controls=true (default), the floating panel provides:

•Phase dropdown selector
•Subphase selector (when applicable)
•Turn slider (arena phase only)
•Pause animations toggle
•Fixture selector
•Copy URL button
•Quick state links (Load, VS, Fight, Win)

Tips

•Always use controls=false for clean screenshots
•The paused=true default freezes jiggle/glow animations for stable screenshots
•Use the bwins fixture to test loser states on the left side
•The control panel's "Copy URL" button is useful for sharing specific states