diff --git a/CLAUDE.md b/CLAUDE.md index d3878ac..65c9c13 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -3,7 +3,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. ## Overview -This is a Pikachu card matching game built with Phaser 3 and Next.js. The game implements the classic "Pikachu" card matching rules where players must match identical cards using I, L, U, or Z-shaped connection patterns. +This is a Pikachu emoji matching game built with Phaser 3 and Next.js. The game implements the classic "Pikachu" matching rules where players must match identical emoji pairs using I, L, U, or Z-shaped connection patterns. ## Commands @@ -48,22 +48,22 @@ This is a Pikachu card matching game built with Phaser 3 and Next.js. The game i 1. **Boot** - Initial boot scene 2. **Preloader** - Asset loading scene 3. **MainMenu** - Main menu interface -4. **PikachuGame** - Main game scene with card matching logic +4. **PikachuGame** - Main game scene with emoji matching logic ### Game Logic -- **Board**: 20x8 grid of cards using standard playing card assets +- **Board**: 20x8 grid of emoji cells - **Matrix System**: 10x22 matrix with border padding (8x20 actual game board) -- **Matching Rules**: Cards must be identical and connected via valid paths: +- **Matching Rules**: Cells must contain identical emojis and be connected via valid paths: - **I-pattern**: Straight line (horizontal or vertical) - **L-pattern**: Single 90-degree turn - **U-pattern**: Path extending to board border with two turns - **Z-pattern**: Two-turn path through empty cells -- **Game Features**: New game, hint system, card selection with visual feedback, debug visualization toggle -- **Testing**: Comprehensive Jest test suite with 90+ test cases covering all patterns +- **Game Features**: New game, hint system, selection with visual feedback, score/combo/timer, debug visualization toggle +- **Testing**: Comprehensive Jest test suite with 84 test cases covering all patterns ### Asset Structure -- Cards are stored in `public/assets/cards/` with naming convention like `2S.png`, `KC.png` - Background image at `public/assets/bg.png` +- Emoji symbols rendered as Phaser text objects (no image assets needed) - Assets are loaded through Phaser's standard asset loading system ### React-Phaser Communication diff --git a/README.md b/README.md index b878eee..5b2b22b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@ ## Credit Rule: https://www.scribd.com/document/718603193/Pikachu -Assets: https://natomarcacini.itch.io/card-asset-pack # Phaser Next.js Template diff --git a/docs/game-design.md b/docs/game-design.md index 6bcf2c3..ef778bb 100644 --- a/docs/game-design.md +++ b/docs/game-design.md @@ -187,13 +187,13 @@ The game is complete when no visible cells remain on the board (all 160 cells ha - Accent color (titles): `#f1c40f` (gold) - Text: `#ecf0f1` (light), `#7f8c8d` (muted) -### Card Rendering +### Cell Rendering -Cards are rendered as Phaser containers with: -- **Background rectangle:** 50x50px cream (`#faf8ef`) with 1px border (`#d5ceb8`) +Cells are rendered as Phaser containers with: +- **Background:** 48x48px rounded rectangle (6px radius) with dark fill and subtle border - **Emoji symbol:** 28px centered with padding to prevent glyph clipping -### Card States +### Cell States | State | Visual | |-------|--------| @@ -228,7 +228,7 @@ All buttons have hover scale (1.05x) and press feedback (0.95x). ## Symbol Set -The game uses 24 emoji symbols as card faces: +The game uses 24 emoji symbols as cell faces: ``` 😀 😂 🥰 😎 🤩 😴 🤔 😱 diff --git a/src/game/scenes/MainMenu.js b/src/game/scenes/MainMenu.js index 7962653..f7326a4 100644 --- a/src/game/scenes/MainMenu.js +++ b/src/game/scenes/MainMenu.js @@ -32,7 +32,7 @@ export class MainMenu extends Scene { }); // Subtitle — slide up + fade - const subtitle = this.add.text(600, 345, 'Card Matching', { + const subtitle = this.add.text(600, 345, 'Emoji Matching', { fontFamily: 'Arial', fontSize: 28, color: '#ecf0f1', align: 'center' }).setOrigin(0.5).setAlpha(0); diff --git a/src/game/scenes/pikachu-path-renderer.js b/src/game/scenes/pikachu-path-renderer.js index 95b4f38..7262779 100644 --- a/src/game/scenes/pikachu-path-renderer.js +++ b/src/game/scenes/pikachu-path-renderer.js @@ -1,4 +1,4 @@ -// Path drawing utilities for connection lines between matched/mismatched cards +// Path drawing utilities for connection lines between matched/mismatched cells import { BOARD_WIDTH, BOARD_X, BOARD_Y, CARD_W, CARD_H } from './pikachu-game-config.js'; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index c18dbc3..5184b8d 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -7,8 +7,8 @@ export default function Home() { return ( <>
-