refactor: replace card terminology with emoji/cell in user-facing text

- Page title: "Pikachu Card Matching" → "Pikachu Connect"
- Menu subtitle: "Card Matching" → "Emoji Matching"
- CLAUDE.md: update descriptions to reflect emoji-based game
- game-design.md: "Card Rendering/States" → "Cell Rendering/States"
- README: remove obsolete card asset pack reference
- Internal code names (cardBg, selectedCards) kept as-is
This commit is contained in:
2026-04-04 17:22:44 +07:00
parent 107a1d6db8
commit 6d6cd80c23
6 changed files with 16 additions and 17 deletions
+7 -7
View File
@@ -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
-1
View File
@@ -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
+5 -5
View File
@@ -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:
```
😀 😂 🥰 😎 🤩 😴 🤔 😱
+1 -1
View File
@@ -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);
+1 -1
View File
@@ -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';
+2 -2
View File
@@ -7,8 +7,8 @@ export default function Home() {
return (
<>
<Head>
<title>Pikachu Card Matching</title>
<meta name="description" content="Classic Pikachu card matching game built with Phaser 3 and Next.js" />
<title>Pikachu Connect</title>
<meta name="description" content="Classic Pikachu emoji matching game built with Phaser 3 and Next.js" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.png" />
</Head>