Pokemon Identification Game

[LFDave]

PRD — Pokémon Identification Game (Web, GitHub Pages)

1) Summary

A lightweight, kid-friendly browser game (ages 8–12) where the player sees a Pokémon image and must pick the correct name from 3 options. Each correct answer grants 1 coin. The game runs as static HTML/CSS/JavaScript and is hosted on GitHub Pages.

2) Goals

• Fun + fast gameplay loop: image → choose name → instant feedback → next.
• Works everywhere: modern browsers + mobile (touch-first).
• Accessible: strong contrast, readable type, keyboard support, WCAG-friendly.
• Progression: coins + medal achievements, saved locally (no login).

3) Non-goals

• Multiplayer, accounts, server-side leaderboards
• Real-money monetization or ads
• Complex Pokémon stats/moves/types

---

4) Target audience & design principles (Kids 8–12)

• Big tap targets (thumb-friendly), minimal reading required.
• Positive feedback (celebratory animations, encouraging messages).
• Low frustration: clear “Correct / Try again” and quick next question.
• Safe by default: no chat, no user-generated content, no tracking.

---

5) Platform & hosting

• Deployment: GitHub Pages.
• Tech: Vanilla HTML + CSS + JS (no build step required).
• State: localStorage only (coins, medals, simple stats).

---

6) Content & assets (Important)

Images: Use Pokémon artwork/sprites sourced from PokémonDB’s image CDN (e.g., img.pokemondb.net). PokémonDB states their written content/layout shouldn’t be reused, but notes official artwork/sprites are used under a “Fair Use Policy” and may be used. (Pokémon Database)
Pokémon itself remains copyrighted/trademarked; include a clear disclaimer and keep the project non-commercial/educational. Pokémon’s official legal pages emphasize content is copyrighted unless stated otherwise. (Pokémon)

Implementation approach (recommended):

• Ship a local data/pokemon.json file containing Pokémon id + name + imageUrl.
• Load that JSON at runtime and display images via their URLs.

---

7) Core gameplay loop

Round structure

1. Game selects a target Pokémon.

2. UI shows its image + 3 name buttons (1 correct, 2 decoys).

3. User taps/clicks one option.

4. Immediate feedback:

   • Correct: +1 coin, increase streak, celebrate
   • Wrong: streak resets, show correct answer, gentle prompt

5. “Next” (or auto-advance after a short delay, configurable).

Rules

• Exactly 3 options per question.

• Only 1 correct option.

• Coins: +1 per correct answer.

• Stats tracked:

  • coins
  • totalAnswered
  • totalCorrect
  • currentStreak
  • bestStreak
  • seenPokemonIds (optional, to reduce repeats)

---

8) Medals / achievements

Medals unlock automatically when criteria are met. Show a celebratory unlock modal/toast once per medal.

Medal ideas (initial set)

Implement medals as a data-driven list:

Medal ID	Name	Unlock condition
coins_5	“5 Coins!”	coins >= 5
coins_10	“10 Coins!”	coins >= 10
coins_20	“20 Coins!”	coins >= 20
streak_3	“On a Roll”	currentStreak >= 3
answered_10	“Explorer”	totalAnswered >= 10
pikachu	“Pikachu Spotted!”	Correctly identify Pokémon with id/name Pikachu at least once

Medal screen

• Grid of medal cards (locked/unlocked states)
• Each card: icon/badge, title, short description
• Locked medals show silhouette + hint (kid-friendly)

---

9) UX & UI requirements

Visual style

• Dark mode by default.
• Bright, crafted accent colors with high contrast and clear button states.
• Avoid relying on color alone (use icons/text for correct/incorrect).
• Use CSS variables for theming (easy adjustments).

Screens (minimum)

1. Home / Start

   • Title, “Play” button
   • Optional: “Medals”, “Settings”

2. Game

   • Top bar: coins, streak, medals shortcut
   • Main: Pokémon image (center), 3 big answer buttons
   • Feedback area (aria-live)

3. Medals

   • Medal grid, progress summary

4. Settings

   • Toggle: Sound on/off (optional)
   • Toggle: Reduced motion (respects system preference)
   • Button: Reset progress (with confirmation)

Interaction & feedback

• Buttons disable immediately after an answer to prevent double taps.
• Correct answer animation: subtle confetti / sparkle (respect prefers-reduced-motion).
• Wrong answer: gentle shake or highlight correct choice; no harsh sounds/text.

Accessibility

• All controls keyboard-accessible (Tab, Enter/Space).
• Clear focus rings.
• Image has alt="Pokémon: <name>" after answer; before answer use neutral alt like alt="Mystery Pokémon" to avoid giving it away.
• Feedback text in an aria-live="polite" region.
• Minimum touch target ~44px.

---

10) Data & content requirements

Pokémon dataset

• Store a curated initial set (e.g., first 151) for performance and kid familiarity.
• Format example:

[
  { "id": 25, "name": "Pikachu", "imageUrl": "https://img.pokemondb.net/artwork/large/pikachu.jpg" }
]

PokémonDB image URLs follow predictable patterns (example shared on PokémonDB’s Meta). (Pokémon Database)

Decoy selection logic

• Decoys must be distinct and not equal to the correct name.

• Prefer decoys from:

  • same generation (optional)
  • similar length names (optional)

• Shuffle options every round.

Repetition rules (recommended)

• Avoid immediate repeats:

  • Keep a small queue of last N Pokémon ids (e.g., 10) and don’t pick them again unless dataset is smaller than N.

---

11) Technical requirements

File structure (suggested)

• index.html
• styles.css
• app.js
• data/pokemon.json
• assets/ (badge icons, UI icons)
• README.md (how to run, credits, legal disclaimer)

State management

• In-memory gameState + persisted localStorage:

  • pokemonGame.progress.v1 = { coins, medalsUnlocked, stats... }

Performance

• Lazy-load images, show loading skeleton.
• Preload the next Pokémon image after the user answers to keep pacing snappy.
• Keep total JS small; no frameworks.

Browser support

• Latest Chrome, Safari, Firefox, Edge + mobile equivalents.
• No reliance on Node/build steps.

---

12) Privacy & safety

• No accounts, no collecting personal data.
• No analytics by default.
• All progress stored locally on device.
• Add a small footer note: “No sign-up. No tracking. Progress saved on this device.”

---

13) Legal/disclaimer requirements

Add a footer in-app + README:

• “Pokémon and Pokémon character names are trademarks of Nintendo / Game Freak / The Pokémon Company.”
• “This is a fan-made educational project, non-commercial.”
• Credit image source: PokémonDB image CDN (and/or the underlying Pokémon copyright holders).
  Pokémon’s legal pages emphasize content is copyrighted unless noted. (Pokémon)
  PokémonDB describes how it treats artwork/sprites and reuse. (Pokémon Database)

---

14) Acceptance criteria (must-have checklist)

• Works on mobile + desktop browsers
• Dark mode default + readable contrast
• Each round shows 1 image + 3 options, exactly 1 correct
• Correct answer increments coins by 1
• Medals unlock for at least: 5/10/20 coins, 3-streak, 10 answered, Pikachu
• Progress persists via localStorage
• Fully playable with keyboard + clear focus indication
• No external dependencies required to run (open index.html locally or via GitHub Pages)

---

15) Nice-to-haves (optional)

• Difficulty modes: “Kanto (151)” / “All Pokémon”
• “Practice” mode: show name after 3 seconds if no answer
• Gentle sound effects + mute toggle
• Mini “collection” view of Pokémon you correctly identified

If you want, I can also provide a ready-to-paste repo scaffold (file names + minimal starter code) that matches this PRD so Copilot can fill in details consistently.