one last note

README.md

@@ -5,4 +5,168 @@
 **Email**: samantha@kaist.ac.kr
 
 **Gittea Repo**: [https://git.prototyping.id/20266142/The-Full-Hue](https://git.prototyping.id/20266142/The-Full-Hue)
- 
+ 
+ **Video Demo**: [https://youtu.be/UBSl3wiXSGM](https://youtu.be/UBSl3wiXSGM)
+
+ # Game Description 
+ _The Full Hue_ is a 2D platformer game based around the themes of color and emotion. The game begins completely gray. Each level is themed around a specific color and its corresponding meaning: orange is warmth and creativity, yellow is joy and anxiety, blue is depth, and so on. The goal is to collect the color fragments scattered across each levels platforms, restoring color to the world one hue at a time. 
+
+ ### How to play:
+Move utilizing the arrow keys or WASD
+
+| Key | Action | 
+|--------|-----|
+| `← →` or `A D` | Move left/right  |
+| `Space`, ` ↑`, or `w`| Jump|
+
+**Collecting Fragments:** small glowing fragments are placed on the platforms across each level, to collect them simply walk into them. As they are picked up a small quote appears at the top of the screen and the level's background is gradually tinted to its corresponding color. 
+
+**Avoid Hazards:** Enemies walk back and forth on platform. Tar puddles sit on the ground floor. Coming into contact with either costs the player a life, there are 3 lives per level. Taking damage triggers a short invincibility period with a blinking effect so that the player can recover and reset. 
+
+**Completing the level:** You successfully complete a level by collecting every fragment at that stage. An overlay with a short reflection will be shown upon level completion which will allow you to move to the next level. 
+
+**Game progress:** Levels unlock sequentially as they are completed. Completing a level permanently unlock the next one, making it visible on the level select screen. Locked levels show a `?` symbol.
+
+### After beating all levels
+
+Once all 10 levels are completed the game enters a free explore mode. The home screen changes to a new message inviting the player to go through the game again now in full color and without obstacles. Re-entering the game levels removes the tar puddles and enemies and the backgrounds are shown in full color. The game becomes a sort of gallery inviting the player to walk through each level again appreciating the art and reading the messages at a more leisurely 
+pace.
+
+### Game features
+
+**Free-explore mode**: After all 10 levels are beat, re-entering levels removes tar and enemies, and the full color backgrounds are shown. The home screen also changes to a new message with a rainbow animated title. 
+
+**Level visual identities**: I illustrated a background image for each level (created grayscale and full color versions), the enemies, tar puddles, heart icon for lives, and the player. Specific color HEX codes where chosen for HUD, quotes, and overlays. 
+
+**Color tint**: The background of each level changes from gray to full color as each fragment is collected, giving the player a visual feedback on their progress. 
+
+**Browser background**: The area outside of the game canvas has animated dots in the game's 10 hex codes. They blink at randomized rates and phases so that the browser doesn't feel empty, I wanted the dots to mimic the twinkling of stars in a night sky. 
+
+**fragment animations**: The fragments bob up and down based on a sine wave (they are offset with a random phase so that they aren't synchronized), spin, and emit a colored glow. 
+
+**Invincibility**: when a player loses a life they gain 1.5s of invincibility. The sprite is hidden every 6 frames to create a blinking feedback without having to animate anything. 
+
+### Asset creation 
+
+- I illustrated all the game assets myself to give the game a more indie feel. Please access and view all the art time lapses and final products via this notion link. 
+  - [https://www.notion.so/Asset-Creation-The-Full-Hue-34ff941b5e51808da8b1c6204cc0e0ce?source=copy_link](https://www.notion.so/Asset-Creation-The-Full-Hue-34ff941b5e51808da8b1c6204cc0e0ce?source=copy_link)
+
+# Code organization 
+
+### The file structure
+
+My files are organized as illustrated below:
+
+![file organization](public/documentation/File%20organization.png)
+
+### Data Flow
+
+![Data flow](public/documentation/flow%20of%20data.png)
+
+### UML Diagrams
+
+![UML Diagrams](public/documentation/UML%20diagrams.png)
+
+### Game Screen 
+
+using `Game.svelte` I layer four components in a single `800x450` container. The organization is as follows:
+
+| component | contents | z-index|
+|-----------|----------|--------|
+| GameCanvas | p5 canvas | 0 |
+| HUD overlay | lives and fragment info display | 10 |
+| QuoteToast | quote displayed on fragment collection | 20 | 
+| LevelCompleteOverlay | Final level quote & next level button | 30 |
+
+### How GameCanvas.svelte runs the game loop
+
+The p5 `draw()` function is going at 60fps and doing the following each frame:
+
+  -  Draw the background image
+   - `allSprites.update()` - checks for collisions & handles p5play physics 
+   - updates the color tint overlay 
+   - `fragment.drawGlow() and update()` - fragment animation and callback in case of collection
+   - `enemy.update()` and overlap check - enemy animation and updates lives in case of overlap
+   - tar overlap check - updates lives on overlap
+   - splat effect called when triggered 
+   - fall-off-screen check for avatar
+   - `allSprites.draw()` - render all the sprites using p5play
+
+### LevelData.js Organization
+
+```
+{
+    id,
+    name, 
+    color, 
+    bg, 
+    bgcomplete, 
+    playerImg, 
+    spawnX, 
+    spawnY, 
+    platforms: [{x,y,w,h},...],
+    fragments: [{x,y,color},...],
+    enemies: [{x,y,patrol},...],
+    tar: [{x,y},...],
+    fragmentQuotes: [{'...','...'}],
+    completeQuote: '...',
+}
+```
+
+`gameCanvas.setup()` reads this information and draws the game objects from it. This makes it easier to create new levels, change platform positions, text, etc. by only having to update the information on this file. This was especially useful as one of the more tedious parts of making the game was positioning all the platforms, enemies, and puddles in a way that made sense and was playable. I had to play test my levels a lot to make sure they were playable, not too easy but also not too hard. While my level design is simple it required purposeful positioning of each element within the level and that is someting which this structure made simple enough for me to make bulk and quick changes. 
+
+### Svelte stores = shared states
+
+**colorStore.js**
+
+| Function/variable | purpose | 
+|----------|---------|
+| `lives` | player lives (0-3)|
+| `colorOpacity` | controls tint overlay based on fraction of fragments collected |
+| `levelColor` | the hex color of the current level |
+| `fragmentsCollected` | keeps count of the collected fragment number |
+| `unlockedColors` | array of unlocked hex colors per session |
+| `gameCompleted` | `true` when all colors are in `unlockedColors` controls some free-explore mode specifications |
+| `resetLevel()` | resets the level state after 3 lives are gone |
+| `completeLevel()` | pushes level color into `unlockedColors`|
+
+**quoteStore.js**
+
+| Function/variable | purpose |
+|-|-|
+|`fragmentQuote` | controls `QuoteToast` information|
+| `showFragmentQuote()` | controls visibility of `QuoteToast` |
+| `completedQuoteData` | controls `LevelCompleteOverlay` information|
+|`showCOmpletedQuote()/clearCompleteQuote()` | controls overlay visibility | 
+
+
+
+### Coding Patterns used
+
+| Pattern | Where | what it does |
+| --- | --- | --- |
+| **Observer / Stores** | `colorStore`, `quoteStore` → UI | When something changes, every part of the screen that uses that information updates automatically|
+| **Builder** | `levelData.js` | All 10 levels are written in one big list of settings. The game reads that list to build each level|
+| **State Machine** | `_canJump/_peakReached` in Player, `gameState` in GameCanvas | only allows certain changes in order, the game tracks what is happening so impossible things can't occur, like jumping forever|
+
+
+
+# Areas where improvement can be made
+
+- the game progress is tracked by session so refreshing the browser resets things like `unlockedColors` to empty. Essentially, refreshing resets all game progress. 
+- The tint effect on each level uses a rectangle over the canvas that changes in opacity as fragments are collected. This is not ideal as it simply tints the background image instead of revealing the original background colors, however, it still gets the point across. Ideally an animation of some sort or different approach would look more aesthetically pleasing, due to time I could not work on this further. 
+
+
+
+Resource Acknowledgement: The following were utilized in the creation of this project
+
+- Course notes (ID 30011)
+- Resources from w3schools.com
+- p5.js
+- p5play
+- svelte 
+- copilot (coding assistance)
+- claude (coding assistance and spell checker) - I jotted some notes and documentation via a notion page which can be accessed here [https://www.notion.so/Midterm-Documentation-My-notes-and-AI-conversations-34bf941b5e51803cbc26f62c0da8a94f?source=copy_link](https://www.notion.so/Midterm-Documentation-My-notes-and-AI-conversations-34bf941b5e51803cbc26f62c0da8a94f?source=copy_link)
+- Procreate (illustration)
+- Figma (illustration)
+

public/global.css

@@ -1,15 +1,9 @@
 html,
 body {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  color: #333;
   margin: 0;
-  padding: 8px;
+  padding: 0;
+  width: 100%;
+  min-height: 100%;
+  background: #000;
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
 }

src/App.svelte

@@ -1,23 +1,117 @@
 <script>
+import { onMount } from 'svelte';
 import Router from 'svelte-spa-router';
 
-// importing all the different screens
-import Home from './routes/Home.svelte';
+import Home     from './routes/Home.svelte';
 import LevelSelect from './routes/LevelSelect.svelte';
-import Game from './routes/Game.svelte';
+import Game     from './routes/Game.svelte';
 import GameOver from './routes/GameOver.svelte';
-import Win from './routes/Win.svelte';
+import Win      from './routes/Win.svelte';
 
 const routes = {
-  '/': Home,
+  '/':            Home,
   '/levelselect': LevelSelect,
-  '/game': Game,
-  '/gameover': GameOver,
-  '/win': Win,
+  '/game':        Game,
+  '/gameover':    GameOver,
+  '/win':         Win,
 };
+
+const COLORS = [
+  '#970505', '#CF8917', '#E3D214', '#39BD1C',
+  '#12B6C8', '#170CB7', '#6613BA', '#C71287',
+  '#753F16', '#FFD700',
+];
+
+let stars = [];
+
+onMount(() => {
+  stars = Array.from({ length: 90 }, () => ({
+    x:        Math.random() * 100,
+    y:        Math.random() * 100,
+    size:     Math.random() * 2 + 1,
+    color:    COLORS[Math.floor(Math.random() * COLORS.length)],
+    delay:    -(Math.random() * 6),   // negative = start mid-animation so they don't all blink at once
+    duration: Math.random() * 3 + 2,
+  }));
+});
 </script>
 
-<Router {routes} />
+<div class="page">
 
+  <!-- star background -->
+  <div class="starfield" aria-hidden="true">
+    {#each stars as s}
+      <span
+        class="star"
+        style="
+          left: {s.x}%;
+          top: {s.y}%;
+          width: {s.size}px;
+          height: {s.size}px;
+          background: {s.color};
+          box-shadow: 0 0 {s.size * 2}px {s.color};
+          animation-duration: {s.duration}s;
+          animation-delay: {s.delay}s;
+        "
+      ></span>
+    {/each}
+  </div>
 
-  
+  <!-- content column -->
+  <div class="stage">
+    <p class="game-title">the full hue</p>
+    <Router {routes} />
+  </div>
+
+</div>
+
+<style>
+  .page {
+    min-height: 100vh;
+    background: #000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* ── starfield ── */
+  .starfield {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .star {
+    position: absolute;
+    border-radius: 50%;
+    animation: blink linear infinite;
+  }
+
+  @keyframes blink {
+    0%,100% { opacity: 0.9; }
+    50%      { opacity: 0.08; }
+  }
+
+  /* ── content ── */
+  .stage {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .game-title {
+    margin: 0;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 15px;
+    letter-spacing: 0.35em;
+    text-transform: lowercase;
+    color: rgba(255, 255, 255, 0.28);
+  }
+</style>

src/components/GameCanvas.svelte

@@ -19,7 +19,7 @@
     const keysDown = { left: false, right: false, jump: false };
 
     const onKeyDown = (e) => {
-        if (e.key === 'Escape') { push('/levelselect'); return; }
+        if (e.key === 'Escape' || e.key === 'e' || e.key === 'E') { push('/levelselect'); return; }
         if (e.key === 'ArrowLeft'  || e.key === 'a') { keysDown.left  = true; e.preventDefault(); }
         if (e.key === 'ArrowRight' || e.key === 'd') { keysDown.right = true; e.preventDefault(); }
         // e.repeat blocks the browser auto-repeat from re-queuing a jump while held
@@ -134,18 +134,19 @@
                     fragments.push(new Fragment(p, fragData.x, fragData.y, fragData.color));
                 }
 
-                // create enemies from level data
+                // create enemies and tar only when the game hasn't been completed —
+                // after beating all levels the player can explore freely
                 enemies = [];
-                for (const enemyData of levelData.enemies) {
-                    const e = new Enemy(p, enemyData.x, enemyData.y);
-                    e.patrolDistance = enemyData.patrol;
-                    enemies.push(e);
-                }
-
-                // create tar puddles from level data
                 tarPuddles = [];
-                for (const tarData of levelData.tar) {
-                    tarPuddles.push(new TarPuddle(p, tarData.x, tarData.y));
+                if (!get(gameCompleted)) {
+                    for (const enemyData of levelData.enemies) {
+                        const e = new Enemy(p, enemyData.x, enemyData.y);
+                        e.patrolDistance = enemyData.patrol;
+                        enemies.push(e);
+                    }
+                    for (const tarData of levelData.tar) {
+                        tarPuddles.push(new TarPuddle(p, tarData.x, tarData.y));
+                    }
                 }
             };
 
@@ -228,12 +229,15 @@
                 }
 
                 // ── 8. FELL OFF SCREEN ────────────────────────────────────────
-                // if player falls below the canvas, lose a life and respawn
                 if (player.sprite.y > p.height + 100 && gameState === 'playing') {
-                    const dead = player.loseLife(lives);
-                    if (dead) {
-                        gameState = 'gameover';
-                        setTimeout(() => push(`/gameover?level=${levelNumber}`), 500);
+                    if (get(gameCompleted)) {
+                        player.respawn(); // NG+: no damage, just put them back
+                    } else {
+                        const dead = player.loseLife(lives);
+                        if (dead) {
+                            gameState = 'gameover';
+                            setTimeout(() => push(`/gameover?level=${levelNumber}`), 500);
+                        }
                     }
                 }
 

src/game/Enemy.js

@@ -9,7 +9,7 @@ export class Enemy{
         this.speed = 1.5;
         this.direction = 1 // 1 is right, -1 is left
         this.startX = x;
-        this.patrolDisctance = 100; // how far it can walk
+        this.patrolDistance = 100; // how far it can walk
     }
 
     update(){

src/game/Player.js

@@ -56,7 +56,7 @@ export class Player {
             keysDown.jump = false;
         }
 
-        // clamp to canvas left/right edges
+        // limit sprite to canvas left/right edges
         const halfW = this.sprite.w / 2;
         if (this.sprite.x < halfW) {
             this.sprite.x = halfW;
@@ -121,7 +121,7 @@ export class Player {
         this.p.noStroke();
 
         // draw concentric circles getting more transparent outward
-        // this fakes a soft glow without any extra library
+        // this fakes a glow 
         for (let radius = 60; radius > 0; radius -= 8) {
             const alpha = (radius / 60) * 40; // max alpha is 40
             const col = this.p.color(c);
@@ -136,7 +136,6 @@ export class Player {
     // returns false every 6 frames to hide the sprite
     isVisible() {
         if (!this.isInvincible) return true;
-        // show/hide every 6 frames for a blink effect
         return Math.floor(this.invincibleTimer / 6) % 2 === 0;
     }
 }

src/game/levelData.js

@@ -1,11 +1,8 @@
-// level config — one entry per level
-// x,y = center  w,h = dimensions
-// bg        → put your PNG in public/backgrounds/levelN.png
-// playerImg → put your PNG in public/assets/player_levelN.png
+
 
 export const LEVELS = [
 
-    // ── LEVEL 1: CRIMSON ──────────────────────────────────────────────────────
+    // LEVEL 1
     {
         id: 1,
         name: 'A Burning Heart',
@@ -41,7 +38,7 @@ export const LEVELS = [
         completeQuote: 'Red is the color of being alive. It asks nothing of you except honesty. Red is rage, passion, urgency, and love; The most visceral emotion, it demands to be felt.',
     },
 
-    // ── LEVEL 2: AMBER ────────────────────────────────────────────────────────
+    // LEVEL 2
     {
         id: 2,
         name: 'Warm Hands',
@@ -82,7 +79,7 @@ export const LEVELS = [
         completeQuote: 'Orange reminds you that making things is an act of hope. It is the color of warmth, creativity, enthusiasm, and connection. It is a choice to stay open. Let yourself be warm.',
     },
 
-    // ── LEVEL 3: YELLOW ───────────────────────────────────────────────────────
+    // LEVEL 3
     {
         id: 3,
         name: 'A Bright Ache',
@@ -127,7 +124,7 @@ export const LEVELS = [
         completeQuote: 'Yellow carries both hope and anxiety in equal measure. It is the color of joy but also of anxiety. Your nervous energy is not a flaw. It is the same thing as your intelligence, it goes hand in hand with your joy.',
     },
 
-    // ── LEVEL 4: GREEN ────────────────────────────────────────────────────────
+    // LEVEL 4
     {
         id: 4,
         name: 'Growth',
@@ -175,7 +172,7 @@ export const LEVELS = [
         completeQuote: 'Green is the color of becoming. It does not rush, does not announce itself. It doesn\'t ask you to heal, only to keep growing. Green represents growth, healing, balance, the slow work of becoming. You are allowed to grow quietly, at your own pace.',
     },
 
-    // ── LEVEL 5: CYAN ─────────────────────────────────────────────────────────
+    // LEVEL 5
     {
         id: 5,
         name: 'Open Water',
@@ -228,7 +225,7 @@ export const LEVELS = [
         completeQuote: 'Cyan is the color of honest water, clear enough to see through, deep enough to matter, and standing at a calming still. Cyan sits between calmness and clarity. It asks you to say what you mean, and listen with clarity. ',
     },
 
-    // ── LEVEL 6: DEEP BLUE ────────────────────────────────────────────────────
+    // LEVEL 6
     {
         id: 6,
         name: 'A Long Quiet',
@@ -283,7 +280,7 @@ export const LEVELS = [
         completeQuote: 'Blue is the color of depth, sadness, and introspection, the most universally felt emotions. It does not ask you to feel better. It asks you to feel, that is enough. Do not be afraid to go deep. That is where you find out who you actually are.',
     },
 
-    // ── LEVEL 7: PURPLE ───────────────────────────────────────────────────────
+    // LEVEL 7
     {
         id: 7,
         name: 'In-Between',
@@ -330,7 +327,7 @@ export const LEVELS = [
         completeQuote: 'Purple is the color of the in-betweens, it represents mystery and intuition. Purple lives in the questions. You do not need everything figured out. Some things are only ever felt, never fully explained.',
     },
 
-    // ── LEVEL 8: MAGENTA ──────────────────────────────────────────────────────
+    // LEVEL 8
     {
         id: 8,
         name: 'Tenderness',
@@ -382,7 +379,7 @@ export const LEVELS = [
         completeQuote: 'Magenta doesn\'t apologize for being bright. Magenta represents compassion, self-love, and softness. It asks you to be as gentle with yourself as you are with the people you love the most.',
     },
 
-    // ── LEVEL 9: BROWN ────────────────────────────────────────────────────────
+    // LEVEL 9
     {
         id: 9,
         name: 'What holds you',
@@ -435,7 +432,7 @@ export const LEVELS = [
         completeQuote: 'Brown is groundedness and stability. It is the earth beneath everything, often overlooked but everything grows from it. It does not need to be seen to do its work.',
     },
 
-    // ── LEVEL 10: THE COLOR REALM — final ─────────────────────────────────────
+    // LEVEL 10
     {
         id: 10,
         name: 'The Whole of You',

src/routes/Home.svelte

@@ -1,39 +1,271 @@
 <script>
-    import {push} from 'svelte-spa-router';
-    import {unlockedColors} from '../stores/colorStore.js';
+    import { onMount, onDestroy } from 'svelte';
+    import { push } from 'svelte-spa-router';
+    import { gameCompleted, hasSeenControls } from '../stores/colorStore.js';
+
+    const COLORS = [
+        '#970505', '#CF8917', '#E3D214', '#39BD1C',
+        '#12B6C8', '#170CB7', '#6613BA', '#C71287',
+        '#753F16', '#FFD700',
+    ];
+
+    let sparks = [];
+
+    onMount(() => {
+        sparks = Array.from({ length: 140 }, () => ({
+            x:        Math.random() * 100,
+            y:        Math.random() * 100,
+            size:     Math.random() * 3 + 1,
+            color:    COLORS[Math.floor(Math.random() * COLORS.length)],
+            delay:    -(Math.random() * 4),
+            duration: Math.random() * 2 + 1,
+        }));
+    });
+
+    let showControls = false;
+    const miniKeys = { left: false, right: false, jump: false };
 
     function startGame() {
+        if (!$gameCompleted && !$hasSeenControls) {
+            showControls = true;
+        } else {
+            push('/levelselect');
+        }
+    }
+
+    function goReady() {
+        hasSeenControls.set(true);
         push('/levelselect');
     }
+
+    // controls
+    const onKeyDown = (e) => {
+        if (!showControls) return;
+        if (e.key === 'ArrowLeft'  || e.key === 'a') { miniKeys.left  = true; e.preventDefault(); }
+        if (e.key === 'ArrowRight' || e.key === 'd') { miniKeys.right = true; e.preventDefault(); }
+        if ((e.key === 'ArrowUp' || e.key === 'w' || e.key === ' ') && !e.repeat) {
+            miniKeys.jump = true;
+            e.preventDefault();
+        }
+    };
+
+    const onKeyUp = (e) => {
+        if (e.key === 'ArrowLeft'  || e.key === 'a') miniKeys.left  = false;
+        if (e.key === 'ArrowRight' || e.key === 'd') miniKeys.right = false;
+    };
+
+    const onBlur = () => {
+        miniKeys.left  = false;
+        miniKeys.right = false;
+        miniKeys.jump  = false;
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup',   onKeyUp);
+    window.addEventListener('blur',    onBlur);
+
+    function initMiniCanvas(node) {
+        const CANVAS_W = 680;
+        const CANVAS_H = 124;
+        const PLAT_H   = 16;
+
+        const sketch = (p) => {
+            let playerSprite;
+            let playerImg;
+            let canJump    = true;
+            let peakReached = false;
+
+            p.preload = () => {
+                playerImg = p.loadImage('/assets/player.png');
+            };
+
+            p.setup = () => {
+                const canvas = p.createCanvas(CANVAS_W, CANVAS_H);
+                canvas.parent(node);
+                p.world.gravity.y = 30;
+
+                // Ground platform
+                const plat = new p.Sprite(CANVAS_W / 2, CANVAS_H - PLAT_H / 2, CANVAS_W, PLAT_H);
+                plat.collider = 'static';
+                const g = p.createGraphics(CANVAS_W, PLAT_H);
+                g.clear();
+                g.noStroke();
+                g.fill('#888888');
+                g.rect(0, 0, CANVAS_W, PLAT_H, 4);
+                plat.img = g;
+
+                // Player centered above platform
+                playerSprite = new p.Sprite(CANVAS_W / 2, CANVAS_H - PLAT_H - 22, 28, 28);
+                playerSprite.rotationLock = true;
+                playerSprite.bounciness  = 0;
+                if (playerImg) playerSprite.img = playerImg;
+            };
+
+            p.draw = () => {
+                p.background(18);
+                p.allSprites.update();
+
+                if (playerSprite) {
+                    // Jump state machine — mirrors Player.js logic
+                    const vy = playerSprite.vel.y;
+                    if (vy > 2) peakReached = true;
+                    if (peakReached && vy > -0.5 && vy < 1.5) {
+                        canJump     = true;
+                        peakReached = false;
+                    }
+
+                    // Horizontal movement with friction
+                    if (miniKeys.left)  playerSprite.vel.x = -5;
+                    if (miniKeys.right) playerSprite.vel.x =  5;
+                    if (!miniKeys.left && !miniKeys.right) playerSprite.vel.x *= 0.78;
+
+                    // Jump
+                    if (miniKeys.jump && canJump) {
+                        playerSprite.vel.y = -11;
+                        canJump           = false;
+                        miniKeys.jump     = false;
+                    }
+
+                    // Clamp to canvas edges
+                    if (playerSprite.x < 14)            { playerSprite.x = 14;            playerSprite.vel.x = 0; }
+                    if (playerSprite.x > CANVAS_W - 14) { playerSprite.x = CANVAS_W - 14; playerSprite.vel.x = 0; }
+
+                    // Safety respawn
+                    if (playerSprite.y > CANVAS_H + 40) {
+                        playerSprite.x     = CANVAS_W / 2;
+                        playerSprite.y     = CANVAS_H - PLAT_H - 22;
+                        playerSprite.vel.x = 0;
+                        playerSprite.vel.y = 0;
+                    }
+
+                    // Soft white glow under the player
+                    p.push();
+                    p.noStroke();
+                    for (let r = 38; r > 0; r -= 6) {
+                        p.fill(255, 255, 255, (r / 38) * 18);
+                        p.circle(playerSprite.x, playerSprite.y, r * 2);
+                    }
+                    p.pop();
+                }
+
+                p.allSprites.draw();
+            };
+        };
+
+        const inst = new p5(sketch);
+        return { destroy() { inst.remove(); } };
+    }
+
+    onDestroy(() => {
+        window.removeEventListener('keydown', onKeyDown);
+        window.removeEventListener('keyup',   onKeyUp);
+        window.removeEventListener('blur',    onBlur);
+    });
 </script>
 
 <div class="title-screen">
-    <!--<img src="/backgrounds/title_bg.png" class="bg" alt="title background"/>-->
 
-    <div class="content">
-        <h1>The Full Hue</h1>
-        <p>Bring back your color</p>
-        <button on:click={startGame}>begin</button>
-    </div>
+    {#if $gameCompleted}
+
+        <!-- ── NG+ sparkle layer ── -->
+        <div class="sparkfield" aria-hidden="true">
+            {#each sparks as s}
+                <span
+                    class="spark"
+                    style="
+                        left: {s.x}%;
+                        top: {s.y}%;
+                        width: {s.size}px;
+                        height: {s.size}px;
+                        background: {s.color};
+                        box-shadow: 0 0 {s.size * 2}px {s.color};
+                        animation-duration: {s.duration}s;
+                        animation-delay: {s.delay}s;
+                    "
+                ></span>
+            {/each}
+        </div>
+
+        <!-- ── NG+ home screen ── -->
+        <div class="content">
+            <h1 class="rainbow-title">The Full Hue</h1>
+            <p class="ng-lead">you've brought all the color back.</p>
+            <p class="ng-body">
+                go through the world again, now in full color and without sorrows.<br>
+                take your time. view the scenery. learn about your hues.
+            </p>
+            <button on:click={startGame}>go again</button>
+        </div>
+
+    {:else if showControls}
+
+        <!-- ── Controls screen ── -->
+        <div class="content controls-content">
+            <h2>how to play</h2>
+            <p class="ctrl-sub">a short guide before your journey begins</p>
+
+            <div class="key-table">
+                <div class="key-row">
+                    <div class="keys">
+                        <span class="key">←</span>
+                        <span class="key">→</span>
+                        <span class="or">or</span>
+                        <span class="key">A</span>
+                        <span class="key">D</span>
+                    </div>
+                    <span class="dot">·</span>
+                    <span class="key-desc">move left / right</span>
+                </div>
+                <div class="key-row">
+                    <div class="keys">
+                        <span class="key">↑</span>
+                        <span class="or">or</span>
+                        <span class="key">W</span>
+                        <span class="or">or</span>
+                        <span class="key wide">SPACE</span>
+                    </div>
+                    <span class="dot">·</span>
+                    <span class="key-desc">jump</span>
+                </div>
+                <div class="key-row">
+                    <div class="keys">
+                        <span class="key">E</span>
+                    </div>
+                    <span class="dot">·</span>
+                    <span class="key-desc">open level select</span>
+                </div>
+            </div>
+
+            <p class="try-label">try it out ↓</p>
+            <div class="mini-canvas-wrap" use:initMiniCanvas></div>
+
+            <button on:click={goReady}>i'm ready →</button>
+        </div>
+
+    {:else}
+
+        <!-- ── Original home screen ── -->
+        <div class="content">
+            <h1>The Full Hue</h1>
+            <p class="tagline">Bring back your color</p>
+            <button on:click={startGame}>begin</button>
+        </div>
+
+    {/if}
+
 </div>
 
 <style>
-    .title-screen{
+    .title-screen {
         width: 800px;
-        height: 450;
+        height: 450px;
         margin: 0 auto;
         position: relative;
         overflow: hidden;
         background: #111;
-        height: 450px;
     }
-    .bg{
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        opacity: 0.85;   
-    }
-    .content{
+
+    .content {
         position: absolute;
         inset: 0;
         display: flex;
@@ -42,31 +274,198 @@
         justify-content: center;
         gap: 12px;
         color: white;
+        padding: 0 80px;
     }
-    h1{
-        font-family:'Courier New', Courier, monospace;
+
+    /* ── shared heading ── */
+    h1 {
+        font-family: 'Courier New', Courier, monospace;
         font-size: 64px;
         font-weight: 400;
-        text-shadow: 0 2px 12px rgba(0,0,0,0.7);
         margin: 0;
+        text-shadow: 0 2px 12px rgba(0,0,0,0.7);
     }
-    p{
-        font-family:'Courier New', Courier, monospace;
+
+    /* ── original tagline ── */
+    .tagline {
+        font-family: 'Courier New', Courier, monospace;
         font-size: 22px;
         opacity: 0.8;
         margin: 0;
     }
-    button{
+
+    /* ── NG+ rainbow title ── */
+    .rainbow-title {
+        background: linear-gradient(
+            90deg,
+            #FF4136, #FF851B, #FFDC00, #2ECC40,
+            #0074D9, #B10DC9, #FF69B4, #FF4136
+        );
+        background-size: 200% auto;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        animation: shimmer 4s linear infinite;
+    }
+
+    @keyframes shimmer {
+        from { background-position: 0% center; }
+        to   { background-position: 200% center; }
+    }
+
+    /* ── NG+ text ── */
+    .ng-lead {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.75);
+        margin: 4px 0 0;
+        text-align: center;
+    }
+
+    .ng-body {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.45);
+        line-height: 1.75;
+        margin: 0;
+        text-align: center;
+    }
+
+    /* ── shared button ── */
+    button {
         margin-top: 20px;
         padding: 12px 40px;
-        font-family:'Courier New', Courier, monospace;
+        font-family: 'Courier New', Courier, monospace;
         font-size: 22px;
-        background: rgba(255,255,255,0.15);
+        background: rgba(255, 255, 255, 0.15);
         color: white;
-        border: 1px solid rgba(255,255,255,0.4);
+        border: 1px solid rgba(255, 255, 255, 0.4);
         border-radius: 30px;
-        cursor: pointer; 
+        cursor: pointer;
         transition: background 0.2s;
     }
-    button:hover{background: rgba(255,255,255,0.3);}
-</style>
+
+    button:hover { background: rgba(255, 255, 255, 0.3); }
+
+    /* ── NG+ sparkle layer ── */
+    .sparkfield {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+    }
+
+    .spark {
+        position: absolute;
+        border-radius: 50%;
+        animation: sparkle linear infinite;
+    }
+
+    @keyframes sparkle {
+        0%, 100% { opacity: 1;    transform: scale(1);   }
+        50%       { opacity: 0.05; transform: scale(0.4); }
+    }
+
+    /* ── controls screen ── */
+    .controls-content {
+        gap: 9px;
+        padding: 0 60px;
+    }
+
+    h2 {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 28px;
+        font-weight: 400;
+        margin: 0;
+    }
+
+    .ctrl-sub {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.38);
+        margin: 0;
+    }
+
+    .key-table {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        margin: 4px 0 2px;
+    }
+
+    .key-row {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+    }
+
+    .keys {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        min-width: 218px;
+    }
+
+    .key {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 28px;
+        height: 24px;
+        padding: 0 7px;
+        background: rgba(255, 255, 255, 0.09);
+        border: 1px solid rgba(255, 255, 255, 0.28);
+        border-bottom: 2px solid rgba(255, 255, 255, 0.28);
+        border-radius: 5px;
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.82);
+        box-sizing: border-box;
+    }
+
+    .key.wide {
+        min-width: 62px;
+        letter-spacing: 0.04em;
+    }
+
+    .or {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 10px;
+        color: rgba(255, 255, 255, 0.22);
+        padding: 0 1px;
+    }
+
+    .dot {
+        color: rgba(255, 255, 255, 0.18);
+        font-size: 16px;
+        line-height: 1;
+    }
+
+    .key-desc {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.58);
+    }
+
+    .try-label {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.22);
+        margin: 0;
+        text-align: center;
+    }
+
+    .mini-canvas-wrap {
+        width: 680px;
+        height: 124px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.07);
+    }
+
+    /* controls-content button gets less top margin */
+    .controls-content button {
+        margin-top: 6px;
+        font-size: 18px;
+        padding: 10px 36px;
+    }
+</style>

src/routes/Win.svelte

@@ -1,12 +1,52 @@
 <script>
+    import { onMount } from 'svelte';
     import { push } from 'svelte-spa-router';
+
+    const COLORS = [
+        '#970505', '#CF8917', '#E3D214', '#39BD1C',
+        '#12B6C8', '#170CB7', '#6613BA', '#C71287',
+        '#753F16', '#FFD700',
+    ];
+
+    let sparks = [];
+
+    onMount(() => {
+        sparks = Array.from({ length: 140 }, () => ({
+            x:        Math.random() * 100,
+            y:        Math.random() * 100,
+            size:     Math.random() * 3 + 1,
+            color:    COLORS[Math.floor(Math.random() * COLORS.length)],
+            delay:    -(Math.random() * 4),
+            duration: Math.random() * 2 + 1,
+        }));
+
+        const timer = setTimeout(() => push('/'), 5000);
+        return () => clearTimeout(timer);
+    });
 </script>
 
 <div class="screen">
+    <div class="sparkfield" aria-hidden="true">
+        {#each sparks as s}
+            <span
+                class="spark"
+                style="
+                    left: {s.x}%;
+                    top: {s.y}%;
+                    width: {s.size}px;
+                    height: {s.size}px;
+                    background: {s.color};
+                    box-shadow: 0 0 {s.size * 2}px {s.color};
+                    animation-duration: {s.duration}s;
+                    animation-delay: {s.delay}s;
+                "
+            ></span>
+        {/each}
+    </div>
+
     <h1 class="title">color restored</h1>
-    <p class="line1">every fragment found. every hue returned </p>
-    <p class="line2">Go forth and experience the world in full color.</p>
-    <button on:click={() => push('/')}>back to home</button>
+    <p class="line1">every fragment found. every hue returned</p>
+    <p class="line2">Go forth and experience the world in all its colors.</p>
 </div>
 
 <style>
@@ -20,6 +60,25 @@
         align-items: center;
         justify-content: center;
         gap: 14px;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .sparkfield {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+    }
+
+    .spark {
+        position: absolute;
+        border-radius: 50%;
+        animation: sparkle linear infinite;
+    }
+
+    @keyframes sparkle {
+        0%, 100% { opacity: 1;    transform: scale(1);   }
+        50%       { opacity: 0.05; transform: scale(0.4); }
     }
 
     .title {
@@ -36,6 +95,8 @@
         -webkit-text-fill-color: transparent;
         background-clip: text;
         animation: shimmer 4s linear infinite;
+        position: relative;
+        z-index: 1;
     }
 
     @keyframes shimmer {
@@ -48,6 +109,8 @@
         font-size: 18px;
         color: #ccc;
         text-align: center;
+        position: relative;
+        z-index: 1;
     }
 
     .line2 {
@@ -56,22 +119,7 @@
         color: #666;
         text-align: center;
         margin-top: -4px;
-    }
-
-    button {
-        margin-top: 20px;
-        padding: 10px 36px;
-        border-radius: 24px;
-        cursor: pointer;
-        font-family: 'Courier New', Courier, monospace;
-        font-size: 18px;
-        background: rgba(255, 255, 255, 0.06);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        color: white;
-        transition: background 0.15s;
-    }
-
-    button:hover {
-        background: rgba(255, 255, 255, 0.14);
+        position: relative;
+        z-index: 1;
     }
 </style>

src/stores/colorStore.js

@@ -18,6 +18,9 @@ import { LEVELS } from '../game/levelData.js';
 // world starts gray so unlockedColors start as an empty array (there is none)
 export const unlockedColors = writable([]);
 
+// true once the player has seen the controls screen (skip it on future visits)
+export const hasSeenControls = writable(false);
+
 // the current level number 
 export const currentLevel = writable(1);
 

src/stores/quoteStore.js

@@ -1,7 +1,6 @@
 import { writable } from 'svelte/store';
 
-// ── Fragment quote toast ──────────────────────────────────────────────────────
-// Shows a short sentence in the bottom-right when a fragment is collected.
+// ── Fragment quote toast 
 // Auto-clears after 4 seconds; cancels any previous timer so rapid collection
 // always shows the newest quote cleanly.
 
@@ -21,7 +20,7 @@ export function showFragmentQuote(text, color) {
     }, 4200);
 }
 
-// ── Level-complete overlay ────────────────────────────────────────────────────
+// ── Level-complete overlay 
 // Shows the color-psychology takeaway before the level-select redirect.
 
 export const completeQuoteData = writable(null); // { text, color } | null