small fixes & redrawn backgrounds

src/components/QuoteToast.svelte

@@ -16,24 +16,27 @@
 <style>
     .toast {
         position: absolute;
-        bottom: 22px;
+        top: 30px;
-        right: 18px;
+        left: 50%;
-        width: 230px;
+        transform: translateX(-50%);
-        padding: 10px 13px;
+        width: 380px;
-        background: rgba(8, 8, 8, 0.88);
+        padding: 5px 20px;
-        border-left: 3px solid;
+        background: rgba(6, 6, 6, 0.60);
-        color: #ccc;
+        border-bottom: 2px solid var(--accent);
+        color: rgba(255, 255, 255, 0.85);
         font-family: 'Courier New', Courier, monospace;
-        font-size: 12.5px;
+        font-size: 13px;
-        line-height: 1.55;
+        line-height: 1.5;
+        text-align: center;
+        letter-spacing: 0.02em;
         pointer-events: none;
         animation: toastIn 4.2s ease forwards;
         z-index: 20;
     }
 
     @keyframes toastIn {
-        0%   { opacity: 0; transform: translateX(14px); }
+        0%   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
-        12%  { opacity: 1; transform: translateX(0);    }
+        12%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
         78%  { opacity: 1; }
         100% { opacity: 0; }
     }

src/game/Player.js

@@ -21,6 +21,9 @@ export class Player {
         this.collectedColors = []; // hex color strings
         this.isInvincible = false;
         this.invincibleTimer = 0;
+
+        this._canJump = true;
+        this._peakReached = false;
     }
 
     // called every frame from the game loop
@@ -36,11 +39,21 @@ export class Player {
             this.sprite.vel.x *= 0.78;
         }
 
-        const onGround = this.sprite.vel.y > -0.5 && this.sprite.vel.y < 1.5;
+        const vel_y = this.sprite.vel.y;
 
-        if (keysDown.jump && onGround) {
+        // Once clearly falling, mark that we've left the ground
+        if (vel_y > 2) this._peakReached = true;
+
+        // Landing: restore jump ability only after having fallen back down
+        if (this._peakReached && vel_y > -0.5 && vel_y < 1.5) {
+            this._canJump = true;
+            this._peakReached = false;
+        }
+
+        if (keysDown.jump && this._canJump) {
             this.sprite.vel.y = -11;
-            keysDown.jump = false; // consume so it can't re-fire until the next keydown
+            this._canJump = false;
+            keysDown.jump = false;
         }
 
         // clamp to canvas left/right edges

src/game/levelData.js

@@ -38,7 +38,7 @@ export const LEVELS = [
             'To feel intensely is not weakness. It is aliveness.',
             'The heart has always beaten in red.',
         ],
-        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.',
+        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 ────────────────────────────────────────────────────────
@@ -76,10 +76,10 @@ export const LEVELS = [
         fragmentQuotes: [
             'Not every fire burns, some just keep you warm',
             'Warmth is a form of courage.',
-            'You made something today.That matters.',
+            'You made something today. That matters.',
             'You were built to connect and create.',
         ],
-        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.',
+        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 ───────────────────────────────────────────────────────
@@ -98,19 +98,21 @@ export const LEVELS = [
             { x: 575, y: 365, w: 150, h: 14 },
             { x: 280, y: 302, w: 120, h: 14 },
             { x: 510, y: 295, w: 120, h: 14 },
-            { x: 155, y: 238, w: 110, h: 14 },
+            { x: 140, y: 238, w: 130, h: 14 },
             { x: 420, y: 228, w: 130, h: 14 },
             { x: 660, y: 220, w: 110, h: 14 },
+            { x: 290, y: 130, w: 120, h: 14 },
         ],
         fragments: [
             { x: 280, y: 270, color: '#E3D214' },
             { x: 660, y: 188, color: '#E3D214' },
-            { x: 155, y: 206, color: '#E3D214' },
+            { x: 285, y: 90, color: '#E3D214' },
             { x: 420, y: 196, color: '#E3D214' },
         ],
         enemies: [
             { x: 575, y: 340, patrol: 52 },
             { x: 420, y: 203, patrol: 45 },
+            { x: 140, y: 200, patrol: 45 },
         ],
         tar: [
             { x: 370, y: 432 },
@@ -122,7 +124,7 @@ export const LEVELS = [
             'Anxiety and curiosity live in the same color.',
             'Your mind runs fast because it cares deeply',
         ],
-        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 .',
+        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 ────────────────────────────────────────────────────────
@@ -144,20 +146,22 @@ export const LEVELS = [
             { x: 165, y: 242, w: 110, h: 14 },
             { x: 380, y: 232, w: 120, h: 14 },
             { x: 610, y: 225, w: 110, h: 14 },
-            { x: 290, y: 175, w:  95, h: 14 },
+            { x: 260, y: 175, w: 100, h: 14 },
             { x: 520, y: 168, w:  95, h: 14 },
         ],
         fragments: [
             { x: 270, y: 273, color: '#39BD1C' },
             { x: 510, y: 266, color: '#39BD1C' },
-            { x: 380, y: 200, color: '#39BD1C' },
+            { x: 260, y: 140, color: '#39BD1C' },
             { x: 520, y: 136, color: '#39BD1C' },
         ],
         enemies: [
             { x: 140, y: 347, patrol: 40 },
             { x: 270, y: 280, patrol: 38 },
             { x: 610, y: 200, patrol: 36 },
-        ],
+            { x: 665, y: 350, patrol: 38 },
+            { x: 380, y: 200, patrol: 38},
+            ],
         tar: [
             { x: 395, y: 432 },
             { x: 610, y: 432 },
@@ -184,21 +188,21 @@ export const LEVELS = [
         platforms: [
             { x: 400, y: 440, w: 800, h: 12 },
             { x: 145, y: 378, w: 140, h: 14 },
+            { x: 145, y: 220, w: 140, h: 14 },
             { x: 355, y: 395, w: 115, h: 14 },
             { x: 540, y: 368, w: 125, h: 14 },
-            { x: 705, y: 348, w: 115, h: 14 },
             { x: 235, y: 308, w: 110, h: 14 },
             { x: 445, y: 295, w: 110, h: 14 },
-            { x: 640, y: 278, w: 115, h: 14 },
+            { x: 640, y: 320, w: 115, h: 14 },
-            { x: 125, y: 248, w:  95, h: 14 },
+            { x: 50, y: 148, w:  95, h: 14 },
             { x: 365, y: 235, w:  90, h: 14 },
             { x: 590, y: 220, w:  90, h: 14 },
-            { x: 755, y: 202, w:  80, h: 14 },
+            { x: 755, y: 202, w:  100, h: 14 },
         ],
         fragments: [
             { x: 235, y: 276, color: '#12B6C8' },
-            { x: 640, y: 246, color: '#12B6C8' },
+            { x: 640, y: 280, color: '#12B6C8' },
-            { x: 125, y: 216, color: '#12B6C8' },
+            { x: 50, y: 100, color: '#12B6C8' },
             { x: 365, y: 203, color: '#12B6C8' },
             { x: 755, y: 170, color: '#12B6C8' },
         ],
@@ -206,6 +210,8 @@ export const LEVELS = [
             { x: 355, y: 370, patrol: 35 },
             { x: 445, y: 270, patrol: 35 },
             { x: 590, y: 195, patrol: 28 },
+            { x: 150, y: 350, patrol: 38 },
+            { x: 145, y: 200, patrol: 38 },
         ],
         tar: [
             { x: 265, y: 432 },
@@ -240,16 +246,16 @@ export const LEVELS = [
             { x: 510, y: 385, w: 105, h: 14 },
             { x: 220, y: 302, w: 100, h: 14 },
             { x: 455, y: 290, w: 100, h: 14 },
-            { x: 660, y: 275, w: 110, h: 14 },
+            { x: 660, y: 275, w: 120, h: 14 },
-            { x: 105, y: 245, w:  88, h: 14 },
+            { x: 105, y: 200, w: 90, h: 14 },
-            { x: 358, y: 232, w:  85, h: 14 },
+            { x: 358, y: 232, w: 90, h: 14 },
-            { x: 580, y: 215, w:  85, h: 14 },
+            //{ x: 580, y: 215, w: 85, h: 14 },
-            { x: 745, y: 198, w:  80, h: 14 },
+            { x: 745, y: 198, w: 80, h: 14 },
-            { x: 268, y: 175, w:  80, h: 14 },
+            { x: 268, y: 100, w: 100, h: 14 },
-            { x: 480, y: 165, w:  80, h: 14 },
+            { x: 480, y: 165, w: 80, h: 14 },
         ],
         fragments: [
-            { x: 308, y: 323, color: '#170CB7' },
+            { x: 270, y: 70, color: '#170CB7' },
             { x: 220, y: 270, color: '#170CB7' },
             { x: 660, y: 243, color: '#170CB7' },
             { x: 358, y: 200, color: '#170CB7' },
@@ -260,6 +266,7 @@ export const LEVELS = [
             { x: 455, y: 265, patrol: 30 },
             { x: 660, y: 250, patrol: 37 },
             { x: 358, y: 207, patrol: 25 },
+            { x: 100, y: 180, patrol: 20 },
         ],
         tar: [
             { x: 230, y: 432 },
@@ -289,30 +296,24 @@ export const LEVELS = [
         platforms: [
             { x: 400, y: 440, w: 800, h: 12 },
             { x: 130, y: 385, w: 115, h: 14 },
-            { x: 308, y: 365, w: 100, h: 14 },
+            { x: 245, y: 300, w:  115, h: 14 }, 
-            { x: 483, y: 390, w: 100, h: 14 },
+            { x: 370, y: 232, w:  115, h: 14 },
-            { x: 652, y: 358, w: 115, h: 14 },
+            { x: 500, y: 170, w:  115, h: 14 }, 
-            { x: 768, y: 300, w:  75, h: 14 },
+            { x: 650, y: 230, w:  150, h: 14 },
-            { x: 578, y: 272, w:  88, h: 14 },
-            { x: 400, y: 295, w:  85, h: 14 },
-            { x: 220, y: 285, w:  90, h: 14 },
-            { x:  90, y: 248, w:  80, h: 14 },
-            { x: 320, y: 232, w:  80, h: 14 },
-            { x: 518, y: 215, w:  80, h: 14 },
-            { x: 698, y: 190, w:  78, h: 14 },
         ],
         fragments: [
-            { x: 652, y: 326, color: '#6613BA' },
+            { x: 160, y: 340, color: '#6613BA' },
-            { x: 220, y: 253, color: '#6613BA' },
+            { x: 220, y: 260, color: '#6613BA' },
-            { x: 320, y: 200, color: '#6613BA' },
+            { x: 400, y: 190, color: '#6613BA' },
-            { x: 518, y: 183, color: '#6613BA' },
+            { x: 470, y: 130, color: '#6613BA' },
-            { x: 698, y: 158, color: '#6613BA' },
+            { x: 690, y: 180, color: '#6613BA' },
         ],
         enemies: [
-            { x: 308, y: 340, patrol: 28 },
+            { x: 130, y: 380, patrol: 28 },
-            { x: 400, y: 270, patrol: 25 },
+            { x: 240, y: 280, patrol: 28 },
-            { x: 578, y: 247, patrol: 26 },
+            { x: 370, y: 210, patrol: 28 },
-            { x:  90, y: 223, patrol: 22 },
+            { x: 500, y: 160, patrol: 28 },
+            { x: 650, y: 220, patrol: 38 },
         ],
         tar: [
             { x: 200, y: 432 },
@@ -322,11 +323,11 @@ export const LEVELS = [
         fragmentQuotes: [
             'Not everything needs an explanation.',
             'Mystery is an invitation, not a threat.',
-            'Your contradictions are not flaws, ther are complexity.',
+            'Your contradictions are not flaws, they are complexity.',
             'The unknown is not something to fix.',
             'Transformation is always a little uncomfortable.',
         ],
-        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.',
+        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 ──────────────────────────────────────────────────────
@@ -342,31 +343,28 @@ export const LEVELS = [
         platforms: [
             { x: 400, y: 440, w: 800, h: 12 },
             { x: 155, y: 380, w: 130, h: 14 },
-            { x: 338, y: 360, w: 118, h: 14 },
+            { x: 300, y: 320, w: 120, h: 14 },
-            { x: 513, y: 380, w: 110, h: 14 },
+            { x: 480, y: 380, w: 110, h: 14 },
-            { x: 688, y: 358, w: 120, h: 14 },
+            { x: 680, y: 340, w: 120, h: 14 },
-            { x: 165, y: 308, w: 100, h: 14 },
+            { x: 540, y: 270, w: 110, h: 14 },
-            { x: 365, y: 300, w:  90, h: 14 },
+            { x: 720, y: 220, w:  100, h: 14 },
-            { x: 553, y: 308, w: 100, h: 14 },
+            { x: 180, y: 240, w:  110, h: 14 },
-            { x: 728, y: 278, w:  78, h: 14 },
+            { x: 360, y: 170, w:  110, h: 14 },
-            { x: 260, y: 248, w:  90, h: 14 },
+            { x: 553, y: 130, w:  150, h: 14 },
-            { x: 448, y: 238, w:  90, h: 14 },
-            { x: 636, y: 222, w:  90, h: 14 },
-            { x: 368, y: 178, w:  80, h: 14 },
-            { x: 553, y: 165, w:  80, h: 14 },
         ],
         fragments: [
-            { x: 165, y: 276, color: '#C71287' },
+            { x: 320, y: 280, color: '#C71287' },
-            { x: 728, y: 246, color: '#C71287' },
+            { x: 700, y: 300, color: '#C71287' },
-            { x: 448, y: 206, color: '#C71287' },
+            { x: 720, y: 180, color: '#C71287' },
-            { x: 368, y: 146, color: '#C71287' },
+            { x: 380, y: 130, color: '#C71287' },
-            { x: 553, y: 133, color: '#C71287' },
+            { x: 553, y: 90, color: '#C71287' },
         ],
         enemies: [
-            { x: 338, y: 335, patrol: 38 },
+            { x: 300, y: 280, patrol: 38 },
-            { x: 688, y: 333, patrol: 40 },
+            { x: 480, y: 370, patrol: 40 },
-            { x: 553, y: 283, patrol: 32 },
+            { x: 540, y: 260, patrol: 32 },
-            { x: 365, y: 275, patrol: 25 },
+            { x: 180, y: 230, patrol: 25 },
+            { x: 553, y: 120, patrol: 50 },
         ],
         tar: [
             { x: 178, y: 432 },
@@ -381,7 +379,7 @@ export const LEVELS = [
             'Playfulness is not childishness, it is aliveness.',
             'You are allowed to bloom loudly.',
         ],
-        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.',
+        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 ────────────────────────────────────────────────────────
@@ -396,38 +394,33 @@ export const LEVELS = [
         spawnY: 400,
         platforms: [
             { x: 400, y: 440, w: 800, h: 12 },
-            { x: 135, y: 382, w: 128, h: 14 },
+            //{ x: 135, y: 382, w: 128, h: 14 },
-            { x: 315, y: 365, w: 112, h: 14 },
+            { x: 315, y: 365, w: 120, h: 14 },
-            { x: 496, y: 388, w: 108, h: 14 },
+            { x: 496, y: 388, w: 110, h: 14 },
-            { x: 660, y: 358, w: 118, h: 14 },
+            { x: 660, y: 358, w: 120, h: 14 },
-            { x: 200, y: 322, w: 100, h: 14 },
+            { x: 180, y: 300, w: 100, h: 14 },
-            { x: 400, y: 312, w:  93, h: 14 },
+            { x: 400, y: 312, w:  100, h: 14 },
-            { x: 578, y: 305, w: 100, h: 14 },
+            { x: 660, y: 200, w: 110, h: 14 },
-            { x: 738, y: 288, w:  78, h: 14 },
+            { x: 550, y: 130, w:  100, h: 14 },
-            { x: 118, y: 262, w:  88, h: 14 },
+            { x: 290, y: 230, w:  100, h: 14 },
-            { x: 310, y: 255, w:  88, h: 14 },
+            { x: 420, y: 190, w:  100, h: 14 },
-            { x: 492, y: 245, w:  88, h: 14 },
-            { x: 658, y: 232, w:  88, h: 14 },
-            { x: 232, y: 195, w:  78, h: 14 },
-            { x: 425, y: 185, w:  78, h: 14 },
-            { x: 608, y: 178, w:  78, h: 14 },
         ],
         fragments: [
-            { x: 578, y: 273, color: '#753F16' },
+            { x: 160, y: 260, color: '#753F16' },
-            { x: 310, y: 223, color: '#753F16' },
+            { x: 310, y: 190, color: '#753F16' },
-            { x: 658, y: 200, color: '#753F16' },
+            { x: 620, y: 320, color: '#753F16' },
             { x: 425, y: 153, color: '#753F16' },
-            { x: 608, y: 146, color: '#753F16' },
+            { x: 660, y: 160, color: '#753F16' },
         ],
         enemies: [
             { x: 315, y: 340, patrol: 35 },
             { x: 660, y: 333, patrol: 40 },
             { x: 400, y: 287, patrol: 28 },
-            { x: 492, y: 220, patrol: 28 },
+            { x: 492, y: 360, patrol: 28 },
-            { x: 738, y: 263, patrol: 22 },
+            { x: 550, y: 110, patrol: 28 },
         ],
         tar: [
-            { x: 152, y: 432 },
+            //{ x: 152, y: 432 },
             { x: 348, y: 432 },
             { x: 540, y: 432 },
             { x: 712, y: 432 },
@@ -436,8 +429,8 @@ export const LEVELS = [
             'Some things stay so that other things can move.',
             'Stability is essential.',
             'The earth holds everything without complaint.',
-            'Steadiness is a kind of strenght.',
+            'Steadiness is a kind of strength.',
-            'Your roors are not holding you back.',
+            'Your roots are not holding you back.',
         ],
         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.',
     },
@@ -462,23 +455,22 @@ export const LEVELS = [
             { x: 420, y: 298, w: 110, h: 14 },
             { x: 628, y: 288, w: 120, h: 14 },
             { x: 115, y: 248, w: 100, h: 14 },
-            { x: 315, y: 238, w:  95, h: 14 },
+            { x: 315, y: 238, w:  100, h: 14 },
-            { x: 515, y: 228, w:  95, h: 14 },
+            { x: 515, y: 228, w:  100, h: 14 },
-            { x: 715, y: 215, w:  90, h: 14 },
+            { x: 715, y: 215, w:  100, h: 14 },
-            { x: 215, y: 178, w:  90, h: 14 },
+            { x: 215, y: 178, w:  100, h: 14 },
-            { x: 415, y: 168, w:  90, h: 14 },
+            { x: 615, y: 160, w:  100, h: 14 },
-            { x: 615, y: 160, w:  90, h: 14 },
+            { x: 415, y: 128, w:  100, h: 14 },
-            { x: 415, y: 128, w:  80, h: 14 },
         ],
         fragments: [
             { x: 310, y: 330, color: '#970505' },
             { x: 700, y: 333, color: '#CF8917' },
             { x: 210, y: 273, color: '#E3D214' },
             { x: 628, y: 256, color: '#39BD1C' },
-            { x: 315, y: 206, color: '#12B6C8' },
+            { x: 335, y: 206, color: '#12B6C8' },
             { x: 715, y: 183, color: '#170CB7' },
             { x: 215, y: 146, color: '#6613BA' },
-            { x: 615, y: 128, color: '#C71287' },
+            { x: 630, y: 128, color: '#C71287' },
             { x: 415, y:  96, color: '#753F16' },
         ],
         enemies: [
@@ -487,6 +479,10 @@ export const LEVELS = [
             { x: 420, y: 273, patrol: 35 },
             { x: 628, y: 263, patrol: 42 },
             { x: 515, y: 203, patrol: 30 },
+            { x: 110, y: 220, patrol: 30 },
+            { x: 315, y: 200, patrol: 30 },
+            { x: 615, y: 120, patrol: 30 },
+
         ],
         tar: [
             { x: 225, y: 432 },
@@ -497,7 +493,7 @@ export const LEVELS = [
         ],
         fragmentQuotes: [
             'you burned',
-            'you made',
+            'you created',
             'you hoped and worried',
             'you grew',
             'you let go',

src/routes/Win.svelte

@@ -5,7 +5,7 @@
 <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 expereince the world in full color.</p>
+    <p class="line2">Go forth and experience the world in full color.</p>
     <button on:click={() => push('/')}>back to home</button>
 </div>