0d416028c0
* 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
235 lines
9.2 KiB
Markdown
235 lines
9.2 KiB
Markdown
# 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)
|
|
|
|
1. Load game: http://localhost:5173/game/f6f158c4-47b0-41b9-b3c2-8edc8275b70c
|
|
2. Wait for "Connecting..." overlay to disappear
|
|
3. 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:**
|
|
|
|
1. Open game in browser
|
|
2. Take a screenshot
|
|
3. Count the distinct bordered rectangles
|
|
4. If you count 12 extra small rectangles → Bug still exists
|
|
5. 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:
|
|
|
|
1. Check you're on the right branch: `fix/defer-board-creation-until-state`
|
|
2. Verify the build is using the latest code: `git log --oneline -1`
|
|
3. Hard refresh the browser: Ctrl+Shift+R (or Cmd+Shift+R on Mac)
|
|
4. Check console for `usePrizeCards: false` in the logs
|
|
5. 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!** 🚀
|