final revisions and clean up code

README.md

@@ -113,7 +113,7 @@ The p5 `draw()` function is going at 60fps and doing the following each frame:
 }
 ```
 
-`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. 
+`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
 
@@ -127,7 +127,7 @@ The p5 `draw()` function is going at 60fps and doing the following each frame:
 | `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 exhausted |
+| `resetLevel()` | resets the level state after 3 lives are gone |
 | `completeLevel()` | pushes level color into `unlockedColors`|
 
 **quoteStore.js**

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

@@ -38,6 +38,7 @@
         push('/levelselect');
     }
 
+    // controls
     const onKeyDown = (e) => {
         if (!showControls) return;
         if (e.key === 'ArrowLeft'  || e.key === 'a') { miniKeys.left  = true; e.preventDefault(); }

src/routes/Win.svelte.bak

@@ -1,77 +0,0 @@
-<script>
-    import { push } from 'svelte-spa-router';
-</script>
-
-<div class="screen">
-    <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>
-</div>
-
-<style>
-    .screen {
-        width: 800px;
-        height: 450px;
-        margin: 0 auto;
-        background: #0a0a0a;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 14px;
-    }
-
-    .title {
-        font-family: 'Courier New', Courier, monospace;
-        font-size: 52px;
-        font-weight: 400;
-        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; }
-    }
-
-    .line1 {
-        font-family: 'Courier New', Courier, monospace;
-        font-size: 18px;
-        color: #ccc;
-        text-align: center;
-    }
-
-    .line2 {
-        font-family: 'Courier New', Courier, monospace;
-        font-size: 15px;
-        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);
-    }
-</style>

src/stores/quoteStore.js

@@ -1,7 +1,6 @@
 import { writable } from 'svelte/store';
 
-// ── Fragment quote toast ──────────────────────────────────────────────────────
+// ── Fragment quote toast 
-// Shows a short sentence in the bottom-right when a fragment is collected.
 // 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