bounds and refine the storytelling

src/game/Player.js

@@ -43,6 +43,16 @@ export class Player {
             keysDown.jump = false; // consume so it can't re-fire until the next keydown
         }
 
+        // clamp to canvas left/right edges
+        const halfW = this.sprite.w / 2;
+        if (this.sprite.x < halfW) {
+            this.sprite.x = halfW;
+            this.sprite.vel.x = 0;
+        } else if (this.sprite.x > this.p.width - halfW) {
+            this.sprite.x = this.p.width - halfW;
+            this.sprite.vel.x = 0;
+        }
+
         // count down invincibility frames
         if (this.isInvincible) {
             this.invincibleTimer--;

src/game/levelData.js

@@ -8,7 +8,7 @@ export const LEVELS = [
     // ── LEVEL 1: CRIMSON ──────────────────────────────────────────────────────
     {
         id: 1,
-        name: 'Eruption',
+        name: 'A Burning Heart',
         color: '#970505',
         bg: '/backgrounds/level1.png',
         bgComplete: '/backgrounds/level1_complete.png',
@@ -33,18 +33,18 @@ export const LEVELS = [
         ],
         tar: [],
         fragmentQuotes: [
-            'Red is the first color infants learn to see.',
+            'Red is the first color you learn to see.',
-            'Anger, passion, urgency — red holds them all.',
+            'You felt it first, before you had words for it',
             'To feel intensely is not weakness. It is aliveness.',
             'The heart has always beaten in red.',
         ],
-        completeQuote: 'Red is the color of urgency and passion. Of love at its most raw, and fury at its most honest. You do not need to be calm to be whole — sometimes the world needs your fire.',
+        completeQuote: 'Red is the color of being alive. It asks nothing of you except honesty. Red is rage, passion, urgency, and love; The most viceral emotion, it demands to be felt.',
     },
 
     // ── LEVEL 2: AMBER ────────────────────────────────────────────────────────
     {
         id: 2,
-        name: 'Sunset',
+        name: 'Warm Hands',
         color: '#CF8917',
         bg: '/backgrounds/level2.png',
         bgComplete: '/backgrounds/level2_complete.png',
@@ -74,18 +74,18 @@ export const LEVELS = [
             { x: 490, y: 432 },
         ],
         fragmentQuotes: [
-            'Orange reaches toward others.',
+            'Not every fire burns, some just keep you warm',
             'Warmth is a form of courage.',
-            'Creativity begins where comfort ends.',
+            'You made something today.That matters.',
-            'You were built to connect.',
+            'You were built to connect and create.',
         ],
-        completeQuote: 'Amber glows like a hearthfire — the color of gathering, of sharing, of laughter that carries across a room. Enthusiasm is not naivety. It is a choice to stay open. Let yourself be warm.',
+        completeQuote: 'Orange reminds you that making things is an act of hope. It is the color of warmth, creativity, enthusiams, and connection. It is a choice to stay open. Let yourself be warm.',
     },
 
     // ── LEVEL 3: YELLOW ───────────────────────────────────────────────────────
     {
         id: 3,
-        name: 'Golden',
+        name: 'A Bright Ache',
         color: '#E3D214',
         bg: '/backgrounds/level3.png',
         bgComplete: '/backgrounds/level3_complete.png',
@@ -117,18 +117,18 @@ export const LEVELS = [
             { x: 700, y: 432 },
         ],
         fragmentQuotes: [
-            'Yellow is the color of a question.',
+            'Joy is allowed to be simple',
-            'Clarity costs something — it asks you to really look.',
+            'Clarity costs something, it asks you to really look.',
             'Anxiety and curiosity live in the same color.',
-            'The brightest light also casts the sharpest shadow.',
+            'Your mind runs fast because it cares deeply',
         ],
-        completeQuote: 'Yellow is the mind\'s color — quick, restless, brilliant. It carries both hope and anxiety in equal measure. Your nervous energy is not a flaw. It is the same thing as your intelligence.',
+        completeQuote: 'Yellow carries both hope and anxiety in equal measure. It is the color of joy but also of anxeity. Your nervous energy is not a flaw. It is the same thing as your intelligence, it goes hand in hand with your joy\'s .',
     },
 
     // ── LEVEL 4: GREEN ────────────────────────────────────────────────────────
     {
         id: 4,
-        name: 'Greenery',
+        name: 'Growth',
         color: '#39BD1C',
         bg: '/backgrounds/level4.png',
         bgComplete: '/backgrounds/level4_complete.png',
@@ -165,16 +165,16 @@ export const LEVELS = [
         fragmentQuotes: [
             'Growth rarely feels like growth while it\'s happening.',
             'Green is the slowest and most stubborn color.',
-            'Balance is not a destination. It is a practice.',
+            'Healing is not linear',
             'Every root is also a reach.',
         ],
-        completeQuote: 'Green is the color of becoming. It does not rush, does not announce itself. It simply keeps going — through concrete, through drought, through winter. You are allowed to grow quietly, at your own pace.',
+        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 ─────────────────────────────────────────────────────────
     {
         id: 5,
-        name: 'Tidal',
+        name: 'Open Water',
         color: '#12B6C8',
         bg: '/backgrounds/level5.png',
         bgComplete: '/backgrounds/level5_complete.png',
@@ -213,19 +213,19 @@ export const LEVELS = [
             { x: 680, y: 432 },
         ],
         fragmentQuotes: [
-            'Teal lives between blue\'s depth and green\'s life.',
+            'Clarity comes after, not before',
             'Clear water still has a bottom.',
-            'Calm is not the absence of feeling — it\'s feeling without drowning.',
+            'Calm is not the absence of feeling, it\'s feeling without drowning.',
             'To speak honestly is an act of trust.',
             'You can be still and still be powerful.',
         ],
-        completeQuote: 'Cyan is the color of honest water — clear enough to see through, deep enough to matter. It asks you to say what you mean, and listen without armor. Clarity is a gift you can give.',
+        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 ────────────────────────────────────────────────────
     {
         id: 6,
-        name: 'The Abyss',
+        name: 'A Long Quiet',
         color: '#170CB7',
         bg: '/backgrounds/level6.png',
         bgComplete: '/backgrounds/level6_complete.png',
@@ -267,19 +267,19 @@ export const LEVELS = [
             { x: 640, y: 432 },
         ],
         fragmentQuotes: [
-            'Blue is the color humans most often call their favorite.',
+            'Some feelings don\'t have names, they just have weight',
-            'There is beauty in melancholy — it means you loved something.',
+            'There is beauty in melancholy, it means you loved something.',
-            'Depth and heaviness are not the same thing.',
+            'Depth and darkness are not the same thing.',
-            'Trust is built in the dark, not the light.',
+            'You are allowed to sit with it.',
             'Some truths only surface in the quiet.',
         ],
-        completeQuote: 'Blue is the color of depth and devotion. It holds grief and loyalty in the same hand without flinching. Do not be afraid to go deep. That is where the real things live — where you find out who you actually are.',
+        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 ───────────────────────────────────────────────────────
     {
         id: 7,
-        name: 'Twilight Spire',
+        name: 'In-Between',
         color: '#6613BA',
         bg: '/backgrounds/level7.png',
         bgComplete: '/backgrounds/level7_complete.png',
@@ -320,19 +320,19 @@ export const LEVELS = [
             { x: 618, y: 432 },
         ],
         fragmentQuotes: [
-            'Purple is the rarest color found in nature.',
+            'Not everything needs an explanation.',
             'Mystery is an invitation, not a threat.',
-            'Imagination is how you escape — and return changed.',
+            'Your contradictions are not flaws, ther are complexity.',
-            'Wisdom is just questions that have aged well.',
+            'The unknown is not something to fix.',
             'Transformation is always a little uncomfortable.',
         ],
-        completeQuote: 'Purple is the color of the in-between — twilight, magic, the moment before understanding arrives. You do not need everything figured out. Some things are only ever felt, never fully explained. Trust the mystery.',
+        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 ──────────────────────────────────────────────────────
     {
         id: 8,
-        name: 'Neon Bloom',
+        name: 'Tenderness',
         color: '#C71287',
         bg: '/backgrounds/level8.png',
         bgComplete: '/backgrounds/level8_complete.png',
@@ -377,17 +377,17 @@ export const LEVELS = [
         fragmentQuotes: [
             'Pink is strength dressed in softness.',
             'Compassion begins with yourself.',
-            'To love boldly in a hard world is a radical act.',
+            'You would never speak to a friend the way you speak to yourself.',
-            'Playfulness is not childishness — it is aliveness.',
+            'Playfulness is not childishness, it is aliveness.',
             'You are allowed to bloom loudly.',
         ],
-        completeQuote: 'Magenta doesn\'t apologize for being bright. It is the color of unconditional love — love that does not shrink itself to be acceptable. Tenderness is not weakness. You can be soft and still be powerful.',
+        completeQuote: 'Magenta doesn\'t apologize for being bright. Magenta represents compassion, self-love, and softness. It aks you to be as gentel with youself as you are with the people you love the most.',
     },
 
     // ── LEVEL 9: BROWN ────────────────────────────────────────────────────────
     {
         id: 9,
-        name: 'Deep Caves',
+        name: 'What holds you',
         color: '#753F16',
         bg: '/backgrounds/level9.png',
         bgComplete: '/backgrounds/level9_complete.png',
@@ -433,19 +433,19 @@ export const LEVELS = [
             { x: 712, y: 432 },
         ],
         fragmentQuotes: [
-            'Brown is the color of everything that holds.',
+            'Some things stay so that other things can move.',
-            'Stability is not glamorous. It is essential.',
+            'Stability is essential.',
             'The earth holds everything without complaint.',
-            'Reliability is its own kind of love.',
+            'Steadiness is a kind of strenght.',
-            'Roots make the reaching possible.',
+            'Your roors are not holding you back.',
         ],
-        completeQuote: 'Brown is the color of the ground beneath you — steady, patient, without performance. It does not need to be seen to do its work. In a world obsessed with brightness, groundedness is a radical act.',
+        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 ─────────────────────────────────────
     {
         id: 10,
-        name: 'The Color Realm',
+        name: 'The Whole of You',
         color: '#FFD700',
         bg: '/backgrounds/level10.png',
         bgComplete: '/backgrounds/level10_complete.png',
@@ -496,17 +496,17 @@ export const LEVELS = [
             { x: 760, y: 432 },
         ],
         fragmentQuotes: [
-            'Red — the first color you ever saw.',
+            'you burned',
-            'Amber — the warmth you learned to offer.',
+            'you made',
-            'Yellow — the light that made you curious.',
+            'you hoped and worried',
-            'Green — the slow courage to keep growing.',
+            'you grew',
-            'Cyan — the voice you learned to trust.',
+            'you let go',
-            'Blue — the depths you survived.',
+            'you felt deeply',
-            'Purple — the mystery you stopped running from.',
+            'you wondered',
-            'Magenta — the love you let yourself deserve.',
+            'you loved',
-            'Brown — the ground that held you all along.',
+            'you stayed',
         ],
-        completeQuote: 'Every color is an emotion. Every emotion is a part of you. To be fully human is to carry them all — the burning and the quiet, the growing and the grief. You are not broken. You are a spectrum. And you are whole.',
+        completeQuote: 'Every emotion is a part of you. You needed all of it. The rage and the tenderness. The confusion and the clarity. The grief and the joy. A world with only one color is not a world at all. Neither are you. You are the whole spectrum. The full Hue.',
     },
 ];
 

src/routes/Home.svelte

@@ -12,7 +12,7 @@
 
     <div class="content">
         <h1>The Full Hue</h1>
-        <p>Bring back your full color</p>
+        <p>Bring back your color</p>
         <button on:click={startGame}>begin</button>
     </div>
 </div>

src/routes/Win.svelte

@@ -4,8 +4,8 @@
 
 <div class="screen">
     <h1 class="title">color restored</h1>
-    <p class="line1">every fragment found. every hue returned to the world.</p>
+    <p class="line1">every fragment found. every hue returned </p>
-    <p class="line2">the little painter has done it.</p>
+    <p class="line2">Go forth and expereince the world in full color.</p>
     <button on:click={() => push('/')}>back to home</button>
 </div>