Update README — add Xbox controller, sprite sheet, music, PNG NPCs, proximity bubble, all current features

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)
 
 ---
 
@@ -16,6 +16,14 @@ pokesql/
 ├── 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 |
+| **A button** (red) | Talk to NPC · Confirm answer · Advance dialog |
-| **B button** (blue) | Talk to NPC on map · Advance dialog |
+| **B button** (blue) | Talk to NPC · Advance dialog |
-| **SELECT / START** | Decorative — reserved for future use |
+| **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
+- The player sprite walks freely around the overworld map using the D-pad, WASD, arrow keys, or Xbox controller
-- Walking animations change based on direction (left, right, up, down)
+- Walking animations use the `player.png` sprite sheet with directional frames
-- Press **A**, **B**, **E**, or **Enter** at any time to talk to the NPC and start the question
+- 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 |
+| localStorage save | Auto-save with shuffled order preserved on continue |
-| 100 T-SQL questions | Progressive difficulty, shuffled answer order every time |
+| 100 T-SQL questions | Randomised order every new game, shuffled answer slots |
-| Randomised answer positions | Correct answer shuffled to a random slot — no pattern to exploit |
+| Numbered answers | Options labelled 1/2/3/4 — no A/B/C/D pattern to exploit |
-| Numbered answers | Options labelled 1/2/3/4 (not A/B/C/D) |
+| PNG NPC sprites | NPCs can use image files or emoji |
-| Name entry | On-screen pixel keyboard, just like the real game |
+| Name entry | On-screen pixel keyboard navigable by gamepad |
-| Typewriter text | Authentic dialog effect, tap/press to skip |
+| Typewriter text | Authentic dialog effect, tap/press/gamepad to skip |
-| 22 NPC characters | Professor Oak, Misty, Brock, Giovanni, Lance… |
+| `...` 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.
 
 ---