Fix prize zone rendering in Mantimon TCG mode (#2 )

* Fix hand card rotation direction

Cards now fan outward correctly instead of curling inward

* Update StateRenderer to require MatchScene type for type safety

- Change constructor parameter from Phaser.Scene to MatchScene
- Update scene property type to MatchScene
- Add import for MatchScene type
- Update JSDoc example to reflect type-safe constructor

* Defer Board creation to StateRenderer for correct rules config

- Make board property nullable (Board | null instead of Board?)
- Remove Board and createBoard imports (now handled by StateRenderer)
- Update setupBoard() to skip Board creation
- Add setBoard() method for StateRenderer to call
- Update clearBoard() to use null instead of undefined
- Add JSDoc explaining why Board creation is deferred

* Create Board in StateRenderer with correct layout options

- Add Board and createBoard imports
- Add board property to StateRenderer
- Create Board in render() on first call with correct rules_config
- Add debug logging for Board creation and zone creation
- Update clear() to destroy Board when clearing
- Board now created after we have rules_config from first state

* Add fatal error handling with toast notification and auto-redirect

- Add 'fatal-error' event to GameBridgeEvents type
- Import and initialize useToast in GamePage
- Listen for 'fatal-error' event from Phaser
- Show error toast that persists until redirect
- Show full-screen fatal error overlay with countdown
- Auto-redirect to /play after 3 seconds
- Update StateRenderer to emit 'fatal-error' when Board creation fails

* Gate debug logging with DEV flag

- Add DEBUG_RENDERER constant gated by import.meta.env.DEV
- Update all console.log statements in StateRenderer to only log in development
- Keep console.error and console.warn as they are (always show errors)
- Debug logs now only appear during development, not in production

* Fix code audit issues - add missing imports and improve error UX

Critical fixes:
- Add missing gameBridge import to StateRenderer (fixes runtime error in fatal error handler)
- Add missing Board type import to MatchScene (fixes TypeScript compilation error)

UX improvements:
- Replace fatal error auto-redirect with manual 'Return to Menu' button
- Add toast notification when resignation fails
- Give users unlimited time to read fatal errors before returning

Addresses issues found in frontend code audit:
- errors.missing-import (StateRenderer.ts:166)
- errors.missing-type-import (MatchScene.ts:84)
- errors.catch-only-console (GamePage.vue:145)
- architecture.missing-fatal-error-handling (GamePage.vue:261)

* Add CONTRIBUTING policy and fix pre-existing lint/test errors

- Add CONTRIBUTING.md with strict policy: never use --no-verify without approval
- Add comprehensive testing documentation (TESTING.md, VISUAL-TEST-GUIDE.md)
- Add test-prize-fix.md quick test checklist and verify-fix.sh script

Lint fixes (enables pre-commit hooks):
- Remove unused imports in 9 files
- Fix unused variables (underscore convention)
- Replace 'as any' type assertions with proper VisibleGameState types
- Add missing CARD_WIDTH_MEDIUM import in layout.spec.ts
- All ESLint errors now resolved (only acceptable warnings remain)

Test fixes (all 1000 tests now passing):
- Fix layout.spec.ts: Add missing CARD_WIDTH_MEDIUM import
- Fix PlayPage.spec.ts: Update test to use actual hardcoded UUIDs
- Fix useAuth.spec.ts: Mock API profile fetch in initialization tests
- Fix PhaserGame.spec.ts: Add scenes export to mock and update createGame call expectations

This ensures pre-commit hooks work properly going forward and prevents
bypassing TypeScript/lint checks that catch errors early.

* Add comprehensive test coverage improvement plan

- Create PROJECT_PLAN_TEST_COVERAGE.json with 25 structured tasks
- Create TEST_COVERAGE_PLAN.md with executive summary and roadmap
- Plan addresses critical gaps: game engine (0%), WebSocket (27%)
- 6-week roadmap to reach 85% coverage from current 63%
- Target: Phase 1 (weeks 1-3) - critical game engine and network tests
- Includes quick wins, production blockers, and success metrics

Based on coverage analysis showing:
- Strong: Composables (84%), Components (90%), Stores (88%)
- Critical gaps: Phaser game engine (~5,500 untested lines)
- High priority: WebSocket/multiplayer reliability

See TEST_COVERAGE_PLAN.md for overview and week-by-week breakdown.

* Add coverage tooling and ignore coverage directory

- Add @vitest/coverage-v8 package for coverage analysis
- Add coverage/ directory to .gitignore
- Used during test coverage analysis for PROJECT_PLAN_TEST_COVERAGE.json

2026-02-02 15:30:27 -06:00

9.2 KiB

Raw Blame History

Visual Test Guide - Prize Zone Fix

🔍 What to Look For

❌ BEFORE FIX (The Bug)

When you load the game, you would see 6 prize rectangles even in Mantimon mode:

┌──────────────────────────────────────────┐
│         OPPONENT SIDE (TOP)              │
│                                          │
│  ┌─────┐                                 │
│  │ ACT │  Active Zone                    │
│  └─────┘                                 │
│                                          │
│  ┌───┐┌───┐┌───┐┌───┐┌───┐             │
│  │ B ││ B ││ B ││ B ││ B │  Bench      │
│  └───┘└───┘└───┘└───┘└───┘             │
│                                          │
│  ┌──┐┌──┐    ◄── WRONG!                │
│  │P1││P2│        Prize cards             │
│  └──┘└──┘        should NOT be here!    │
│  ┌──┐┌──┐                               │
│  │P3││P4│                                │
│  └──┘└──┘                               │
│  ┌──┐┌──┐                               │
│  │P5││P6│                                │
│  └──┘└──┘                               │
│                                          │
├──────────────────────────────────────────┤
│         YOUR SIDE (BOTTOM)               │
│                                          │
│  ┌──┐┌──┐    ◄── WRONG!                │
│  │P1││P2│        Prize cards             │
│  └──┘└──┘        should NOT be here!    │
│  ┌──┐┌──┐                               │
│  │P3││P4│                                │
│  └──┘└──┘                               │
│  ┌──┐┌──┐                               │
│  │P5││P6│                                │
│  └──┘└──┘                               │
│                                          │
│  ┌───┐┌───┐┌───┐┌───┐┌───┐             │
│  │ B ││ B ││ B ││ B ││ B │  Bench      │
│  └───┘└───┘└───┘└───┘└───┘             │
│                                          │
│  ┌─────┐                                 │
│  │ ACT │  Active Zone                    │
│  └─────┘                                 │
│                                          │
│  ┌───┐┌───┐┌───┐┌───┐┌───┐┌───┐┌───┐  │
│  │ 🃏 │ 🃏 │ 🃏 │ 🃏 │ 🃏 │ 🃏 │ 🃏 │  Hand  │
│  └───┘└───┘└───┘└───┘└───┘└───┘└───┘  │
└──────────────────────────────────────────┘

The Bug: Those P1-P6 prize rectangles appear on the left side!

✅ AFTER FIX (Correct)

After the fix, NO prize rectangles should appear:

┌──────────────────────────────────────────┐
│         OPPONENT SIDE (TOP)              │
│                                          │
│  ┌─────┐                                 │
│  │ ACT │  Active Zone                    │
│  └─────┘                                 │
│                                          │
│  ┌───┐┌───┐┌───┐┌───┐┌───┐             │
│  │ B ││ B ││ B ││ B ││ B │  Bench      │
│  └───┘└───┘└───┘└───┘└───┘             │
│                                          │
│  (no prize rectangles here)  ✓          │
│                                          │
│  ┌──┐  ┌──┐                             │
│  │📚│  │🗑│  Deck & Discard              │
│  └──┘  └──┘                             │
│                                          │
├──────────────────────────────────────────┤
│         YOUR SIDE (BOTTOM)               │
│                                          │
│  ┌──┐  ┌──┐                             │
│  │⚡│  │📚│  Energy Deck & Deck          │
│  └──┘  └──┘                             │
│                                          │
│  (no prize rectangles here)  ✓          │
│                                          │
│  ┌───┐┌───┐┌───┐┌───┐┌───┐             │
│  │ B ││ B ││ B ││ B ││ B │  Bench      │
│  └───┘└───┘└───┘└───┘└───┘             │
│                                          │
│  ┌─────┐                                 │
│  │ ACT │  Active Zone                    │
│  └─────┘                                 │
│                                          │
│  ┌───┐┌───┐┌───┐┌───┐┌───┐┌───┐┌───┐  │
│  │ 🃏 │ 🃏 │ 🃏 │ 🃏 │ 🃏 │ 🃏 │ 🃏 │  Hand  │
│  └───┘└───┘└───┘└───┘└───┘└───┘└───┘  │
└──────────────────────────────────────────┘

The Fix: No P1-P6 rectangles! Clean board layout!

📸 Screenshot Comparison

Before Fix:

You'll see 12 total rectangles (6 opponent + 6 yours) that are prize zones
They're usually on the left side of the board
Each is a small bordered rectangle in a 2x3 grid pattern

After Fix:

Those 12 rectangles are gone
Board feels more spacious
Only essential zones visible

🎯 Quick Visual Test (10 seconds)

Load game: http://localhost:5173/game/f6f158c4-47b0-41b9-b3c2-8edc8275b70c
Wait for "Connecting..." overlay to disappear
Count small rectangles on the board

PASS: You count approximately 12-15 rectangles total:

1 Active (large, yours)
1 Active (large, opponent)
5 Bench (yours)
5 Bench (opponent)
2 Deck zones
2 Discard zones
2 Energy Deck zones (small)

FAIL: You count 24+ rectangles (because 12 extra prize rectangles appeared)

🐛 What the Bug Looked Like

The bug was subtle but obvious once you knew to look for it:

6 small bordered rectangles in a 2x3 grid pattern
Usually on the left side of each player's area
All empty (no cards in them)
Labeled or unlabeled as "prizes"

These appeared even when the game rules said use_prize_cards: false (Mantimon TCG uses points instead of prize cards).

✨ What Success Looks Like

Clean board with only these zones:

Opponent (Top):

1 Active zone
5 Bench slots
1 Hand (row of card backs)
1 Deck pile
1 Discard pile
1 Energy Deck pile (small)

You (Bottom):

1 Active zone
5 Bench slots
1 Hand (fanned cards)
1 Deck pile
1 Discard pile
1 Energy Deck pile (small)

Total visible zones: ~14 (no prizes)

If you see more zones: The bug is still present!

🎮 Browser Test

Easiest way to verify:

Open game in browser
Take a screenshot
Count the distinct bordered rectangles
If you count 12 extra small rectangles → Bug still exists
If board looks clean and minimal → Fix worked!

📊 Expected vs Actual

Zone Type	Count (Yours)	Count (Opponent)	Total
Active	1	1	2
Bench	5	5	10
Hand	1	1	2
Deck	1	1	2
Discard	1	1	2
Energy Deck	1	1	2
Prizes	0 ✓	0 ✓	0 ✓
TOTAL	10	10	20

With bug: Total would be 32 (20 + 12 prize zones)
After fix: Total is 20 (no prize zones)

🔧 Still See Prize Rectangles?

If you still see the 2x3 grid of prize rectangles:

Check you're on the right branch: fix/defer-board-creation-until-state
Verify the build is using the latest code: git log --oneline -1
Hard refresh the browser: Ctrl+Shift+R (or Cmd+Shift+R on Mac)
Check console for usePrizeCards: false in the logs
If console shows usePrizeCards: true, the fix didn't apply correctly

✅ Success Confirmation

You'll know the fix worked when:

✓ Board looks cleaner (fewer rectangles)
✓ No 2x3 grid pattern visible
✓ Only essential game zones present
✓ Console logs show usePrizeCards: false

Ready to merge! 🚀

9.2 KiB Raw Blame History