diff --git a/README.md b/README.md index 8e2f19e..0081b87 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ A PokΓ©mon-style Game Boy Advance browser game for learning **Microsoft T-SQL**! Play it on your phone, tablet, or PC β€” progress is saved automatically to your browser. ## πŸš€ Play It Live -πŸ‘‰ [Launch PokeSQL](https://justinoros.github.io/pokesql) +πŸ‘‰ [Launch PokΓ©SQL](https://justinoros.github.io/pokesql) --- @@ -12,10 +12,18 @@ Play it on your phone, tablet, or PC β€” progress is saved automatically to your ``` pokesql/ -β”œβ”€β”€ index.html ← Game screens & structure -β”œβ”€β”€ style.css ← GBA PokΓ©mon aesthetic, fully responsive -β”œβ”€β”€ game.js ← Game engine, controller, walking, save system -β”œβ”€β”€ questions.json ← 100 T-SQL questions & answers +β”œβ”€β”€ index.html ← Game screens & structure +β”œβ”€β”€ style.css ← GBA PokΓ©mon aesthetic, fully responsive +β”œβ”€β”€ game.js ← Game engine, controller, walking, save system +β”œβ”€β”€ questions.json ← 100 T-SQL questions & answers +β”œβ”€β”€ player.png ← Player sprite sheet (24 frames, 16Γ—32px) +β”œβ”€β”€ oak.png ← Professor Oak NPC sprite +β”œβ”€β”€ gary.png ← Rival Gary NPC sprite +β”œβ”€β”€ joy.png ← Nurse Joy NPC sprite +β”œβ”€β”€ jenny.png ← Officer Jenny NPC sprite +β”œβ”€β”€ music.mp3 ← Background music (overworld) +β”œβ”€β”€ music-rival.mp3 ← Background music (rival/battle) +β”œβ”€β”€ favicon.ico ← Browser tab icon └── README.md ``` @@ -24,7 +32,7 @@ pokesql/ ## πŸ•ΉοΈ Host on GitHub Pages (free) 1. Create a GitHub repo named **`pokesql`** -2. Upload all **4 files**: `index.html`, `style.css`, `game.js`, `questions.json` +2. Upload all files listed above 3. Go to **Settings β†’ Pages β†’ Source: `main` branch, `/ (root)` folder** 4. Hit **Save** β€” live in ~60 seconds at `https://justinoros.github.io/pokesql` @@ -39,14 +47,28 @@ On mobile, a semi-transparent Game Boy Advance-style controller overlays the bot | Control | Action | |---|---| | **D-pad** | Walk the player around the map | -| **A button** (red) | Talk to NPC on map Β· Confirm answer in battle Β· Advance dialog | -| **B button** (blue) | Talk to NPC on map Β· Advance dialog | -| **SELECT / START** | Decorative β€” reserved for future use | +| **A button** (red) | Talk to NPC Β· Confirm answer Β· Advance dialog | +| **B button** (blue) | Talk to NPC Β· Advance dialog | +| **SELECT / START** | Decorative | The controller is hidden on desktop (β‰₯900px wide) β€” use the keyboard instead. --- +## πŸ•ΉοΈ Xbox / Gamepad Support + +Plug in any Xbox, PlayStation, or USB gamepad and it works automatically: + +| Input | Action | +|---|---| +| **Left stick / D-pad** | Walk on map | +| **A button** | Talk to NPC Β· Confirm answer Β· Advance dialog | +| **B button** | Talk to NPC Β· Advance dialog | +| **Start** | Confirm / advance on all screens | +| **X / Y / LB / RB** | Quick-pick answers 1/2/3/4 in battle | + +--- + ## ⌨️ PC Keyboard Controls | Key | Action | @@ -61,9 +83,11 @@ The controller is hidden on desktop (β‰₯900px wide) β€” use the keyboard instead ## πŸ—ΊοΈ Map & Walking -- The player sprite walks freely around the overworld map using the D-pad or WASD -- Walking animations change based on direction (left, right, up, down) -- Press **A**, **B**, **E**, or **Enter** at any time to talk to the NPC and start the question +- The player sprite walks freely around the overworld map using the D-pad, WASD, arrow keys, or Xbox controller +- Walking animations use the `player.png` sprite sheet with directional frames +- A blinking `β–Ά` arrow on the right edge points toward the next NPC +- A `...` speech bubble appears above the player if you press talk before reaching the NPC +- Press **A**, **B**, **E**, or **Enter** when near the NPC to start the question - Tapping the NPC sprite directly also triggers the conversation --- @@ -72,27 +96,39 @@ The controller is hidden on desktop (β‰₯900px wide) β€” use the keyboard instead Progress is stored in the player's browser (`localStorage`) automatically: -- **Auto-saves** after every answered question and on map return β€” a πŸ’Ύ icon flashes to confirm +- **Auto-saves** after every answered question and on map return +- **Shuffled question order** is saved so continuing a game resumes the exact same sequence - **Continue screen** appears on next visit showing trainer name, progress %, and score - **New Game** option always available β€” prompts confirmation before erasing save - Save clears automatically on completion so the next run starts fresh --- +## 🎡 Music + +- Background music plays automatically on the map (`music.mp3`) +- Music pauses during questions and resumes on return to the map +- **🎡 / πŸ”‡ toggle** in the map header to mute/unmute +- Music resumes correctly after switching browser tabs on mobile + +--- + ## 🎯 Features | Feature | Detail | |---|---| | GBA controller overlay | D-pad + A/B buttons, semi-transparent, mobile only | -| Walking player | Moves freely on map, directional walk animations | +| Xbox / gamepad support | Full navigation on all screens including name entry | +| Walking player | Pixel sprite sheet, directional walk animations | | Mobile-first design | Full-screen on phones with safe-area support, framed on desktop | -| localStorage save | Auto-save with continue screen on return visits | -| 100 T-SQL questions | Progressive difficulty, shuffled answer order every time | -| Randomised answer positions | Correct answer shuffled to a random slot β€” no pattern to exploit | -| Numbered answers | Options labelled 1/2/3/4 (not A/B/C/D) | -| Name entry | On-screen pixel keyboard, just like the real game | -| Typewriter text | Authentic dialog effect, tap/press to skip | -| 22 NPC characters | Professor Oak, Misty, Brock, Giovanni, Lance… | +| localStorage save | Auto-save with shuffled order preserved on continue | +| 100 T-SQL questions | Randomised order every new game, shuffled answer slots | +| Numbered answers | Options labelled 1/2/3/4 β€” no A/B/C/D pattern to exploit | +| PNG NPC sprites | NPCs can use image files or emoji | +| Name entry | On-screen pixel keyboard navigable by gamepad | +| Typewriter text | Authentic dialog effect, tap/press/gamepad to skip | +| `...` proximity bubble | Shows above player when pressing talk too far from NPC | +| Background music | Loops on map, pauses during questions, mute toggle | | Streak bonuses | 3Γ— correct = +150 pts πŸ”₯, 5Γ—+ = +200 pts πŸ”₯ | | Milestone badges | Earned at Q25, Q50, Q75, Q100 | | Correct answer reveal | Wrong answers show the right answer + full explanation | @@ -129,22 +165,22 @@ Edit `questions.json`, add to the `questions` array inside `levels[0]`: } ``` -`answer` is the **0-based index** of the correct option in the `options` array (0 = first option, 1 = second, etc.). The game shuffles the display order randomly at runtime, so the position shown to the player will vary each time. +`answer` is the **0-based index** of the correct option (0 = first, 1 = second, etc.). The game shuffles display order randomly at runtime. --- ## πŸ§‘ Adding NPCs -In `game.js`, add to the `NPC` object at the top: +In `game.js`, add to the `NPC` object: ```js const NPC = { - 'Your NPC Name': 'πŸ§‘', - ... + 'Your NPC Name': 'npc.png', // PNG sprite file in repo root + 'Another NPC': 'πŸ§‘', // or an emoji }; ``` -Then reference `"npc": "Your NPC Name"` in `questions.json`. +Then reference `"npc": "Your NPC Name"` in `questions.json`. PNG files are auto-prefixed with `./` so just use the filename. ---