level backgrounds

src/components/GameCanvas.svelte

@@ -2,7 +2,7 @@
     import { onMount, onDestroy } from 'svelte';
     import { Player } from '../game/Player.js';
     import { get } from 'svelte/store';
-    import { lives, colorOpacity, levelColor, onFragmentCollection, resetLevel, completeLevel } from '../stores/colorStore.js';
+    import { lives, colorOpacity, levelColor, onFragmentCollection, resetLevel, completeLevel, gameCompleted } from '../stores/colorStore.js';
     import { showFragmentQuote, showCompleteQuote } from '../stores/quoteStore.js';
     import { push } from 'svelte-spa-router';
     import { Enemy } from '../game/Enemy.js';
@@ -88,8 +88,11 @@
 
             p.preload = () => {
                 const data = getLevel(levelNumber);
-                if (data?.bg)        bgImg          = p.loadImage(data.bg);
+                const isComplete = get(gameCompleted);
-                if (data?.playerImg) playerImgLoaded = p.loadImage(data.playerImg);
+                const bgPath = isComplete && data?.bgComplete ? data.bgComplete : data?.bg;
+                if (bgPath) bgImg = p.loadImage(bgPath);
+                const playerPath = isComplete ? '/assets/player_level10.png' : data?.playerImg;
+                if (playerPath) playerImgLoaded = p.loadImage(playerPath);
                 splatImg = p.loadImage('/assets/splat.png');
             };
 
@@ -159,19 +162,19 @@
                 p.allSprites.update();
 
                 // ── 2. COLOR TINT OVERLAY ─────────────────────────────────────
-                // as fragments are collected, the world gradually gains color
+                // skipped after game completion — full-color backgrounds need no tint
-                // reveal goes from 0.0 (gray) to 1.0 (full color)
+                if (!get(gameCompleted)) {
-                const reveal = get(colorOpacity);
+                    const reveal = get(colorOpacity);
-                const hex    = get(levelColor);
+                    const hex    = get(levelColor);
-                if (reveal > 0 && hex) {
+                    if (reveal > 0 && hex) {
-                    const col = p.color(hex);
+                        const col = p.color(hex);
-                    // lerp blends between gray (128) and the level color
+                        const r = p.lerp(128, p.red(col),   reveal);
-                    const r = p.lerp(128, p.red(col),   reveal);
+                        const g = p.lerp(128, p.green(col), reveal);
-                    const g = p.lerp(128, p.green(col), reveal);
+                        const b = p.lerp(128, p.blue(col),  reveal);
-                    const b = p.lerp(128, p.blue(col),  reveal);
+                        p.noStroke();
-                    p.noStroke();
+                        p.fill(r, g, b, reveal * 120);
-                    p.fill(r, g, b, reveal * 120); // max alpha 120 so its a subtle tint
+                        p.rect(0, 0, p.width, p.height);
-                    p.rect(0, 0, p.width, p.height);
+                    }
                 }
 
                 // ── 3. PLAYER INPUT ───────────────────────────────────────────

src/game/levelData.js

@@ -11,6 +11,7 @@ export const LEVELS = [
         name: 'Eruption',
         color: '#970505',
         bg: '/backgrounds/level1.png',
+        bgComplete: '/backgrounds/level1_complete.png',
         playerImg: '/assets/player_level1.png',
         spawnX: 60,
         spawnY: 400,
@@ -46,6 +47,7 @@ export const LEVELS = [
         name: 'Sunset',
         color: '#CF8917',
         bg: '/backgrounds/level2.png',
+        bgComplete: '/backgrounds/level2_complete.png',
         playerImg: '/assets/player_level2.png',
         spawnX: 60,
         spawnY: 400,
@@ -86,6 +88,7 @@ export const LEVELS = [
         name: 'Golden',
         color: '#E3D214',
         bg: '/backgrounds/level3.png',
+        bgComplete: '/backgrounds/level3_complete.png',
         playerImg: '/assets/player_level3.png',
         spawnX: 60,
         spawnY: 400,
@@ -128,6 +131,7 @@ export const LEVELS = [
         name: 'Greenery',
         color: '#39BD1C',
         bg: '/backgrounds/level4.png',
+        bgComplete: '/backgrounds/level4_complete.png',
         playerImg: '/assets/player_level4.png',
         spawnX: 60,
         spawnY: 400,
@@ -173,6 +177,7 @@ export const LEVELS = [
         name: 'Tidal',
         color: '#12B6C8',
         bg: '/backgrounds/level5.png',
+        bgComplete: '/backgrounds/level5_complete.png',
         playerImg: '/assets/player_level5.png',
         spawnX: 60,
         spawnY: 400,
@@ -223,6 +228,7 @@ export const LEVELS = [
         name: 'The Abyss',
         color: '#170CB7',
         bg: '/backgrounds/level6.png',
+        bgComplete: '/backgrounds/level6_complete.png',
         playerImg: '/assets/player_level6.png',
         spawnX: 60,
         spawnY: 400,
@@ -276,6 +282,7 @@ export const LEVELS = [
         name: 'Twilight Spire',
         color: '#6613BA',
         bg: '/backgrounds/level7.png',
+        bgComplete: '/backgrounds/level7_complete.png',
         playerImg: '/assets/player_level7.png',
         spawnX: 60,
         spawnY: 400,
@@ -328,6 +335,7 @@ export const LEVELS = [
         name: 'Neon Bloom',
         color: '#C71287',
         bg: '/backgrounds/level8.png',
+        bgComplete: '/backgrounds/level8_complete.png',
         playerImg: '/assets/player_level8.png',
         spawnX: 60,
         spawnY: 400,
@@ -382,6 +390,7 @@ export const LEVELS = [
         name: 'Deep Caves',
         color: '#753F16',
         bg: '/backgrounds/level9.png',
+        bgComplete: '/backgrounds/level9_complete.png',
         playerImg: '/assets/player_level9.png',
         spawnX: 60,
         spawnY: 400,
@@ -439,6 +448,7 @@ export const LEVELS = [
         name: 'The Color Realm',
         color: '#FFD700',
         bg: '/backgrounds/level10.png',
+        bgComplete: '/backgrounds/level10_complete.png',
         playerImg: '/assets/player_level10.png',
         spawnX: 60,
         spawnY: 400,

src/stores/colorStore.js

@@ -12,7 +12,8 @@
 
 // -- so these are the global variables ----
 
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
+import { LEVELS } from '../game/levelData.js';
 
 // world starts gray so unlockedColors start as an empty array (there is none)
 export const unlockedColors = writable([]);
@@ -33,6 +34,12 @@ export const fragmentsCollected = writable(0);
 //player lives
 export const lives = writable(3);
 
+// true once every level's color has been unlocked (game beaten)
+export const gameCompleted = derived(
+    unlockedColors,
+    $colors => LEVELS.every(level => $colors.includes(level.color))
+);
+
 // --- these are the global functions -----
 
 // for collecting a fragment