diff --git a/public/backgrounds/Level10.png b/public/backgrounds/Level10.png new file mode 100644 index 0000000..6fe15da Binary files /dev/null and b/public/backgrounds/Level10.png differ diff --git a/public/backgrounds/Level10_complete.png b/public/backgrounds/Level10_complete.png new file mode 100644 index 0000000..d44e0a5 Binary files /dev/null and b/public/backgrounds/Level10_complete.png differ diff --git a/public/backgrounds/Level1_complete.png b/public/backgrounds/Level1_complete.png new file mode 100644 index 0000000..7f87afa Binary files /dev/null and b/public/backgrounds/Level1_complete.png differ diff --git a/public/backgrounds/Level2_complete.png b/public/backgrounds/Level2_complete.png new file mode 100644 index 0000000..e8ee57e Binary files /dev/null and b/public/backgrounds/Level2_complete.png differ diff --git a/public/backgrounds/Level3_complete.png b/public/backgrounds/Level3_complete.png new file mode 100644 index 0000000..fc2267c Binary files /dev/null and b/public/backgrounds/Level3_complete.png differ diff --git a/public/backgrounds/Level4_complete.png b/public/backgrounds/Level4_complete.png new file mode 100644 index 0000000..e66c643 Binary files /dev/null and b/public/backgrounds/Level4_complete.png differ diff --git a/public/backgrounds/Level5_complete.png b/public/backgrounds/Level5_complete.png new file mode 100644 index 0000000..a172029 Binary files /dev/null and b/public/backgrounds/Level5_complete.png differ diff --git a/public/backgrounds/Level6.png b/public/backgrounds/Level6.png new file mode 100644 index 0000000..d2bff3a Binary files /dev/null and b/public/backgrounds/Level6.png differ diff --git a/public/backgrounds/Level6_complete.png b/public/backgrounds/Level6_complete.png new file mode 100644 index 0000000..15c7450 Binary files /dev/null and b/public/backgrounds/Level6_complete.png differ diff --git a/public/backgrounds/Level7.png b/public/backgrounds/Level7.png new file mode 100644 index 0000000..62da1c9 Binary files /dev/null and b/public/backgrounds/Level7.png differ diff --git a/public/backgrounds/Level7_complete.png b/public/backgrounds/Level7_complete.png new file mode 100644 index 0000000..52bc918 Binary files /dev/null and b/public/backgrounds/Level7_complete.png differ diff --git a/public/backgrounds/Level8.png b/public/backgrounds/Level8.png new file mode 100644 index 0000000..463eb54 Binary files /dev/null and b/public/backgrounds/Level8.png differ diff --git a/public/backgrounds/Level8_complete.png b/public/backgrounds/Level8_complete.png new file mode 100644 index 0000000..1d0eeab Binary files /dev/null and b/public/backgrounds/Level8_complete.png differ diff --git a/public/backgrounds/Level9.png b/public/backgrounds/Level9.png new file mode 100644 index 0000000..eb3d78a Binary files /dev/null and b/public/backgrounds/Level9.png differ diff --git a/public/backgrounds/Level9_complete.png b/public/backgrounds/Level9_complete.png new file mode 100644 index 0000000..71c29ce Binary files /dev/null and b/public/backgrounds/Level9_complete.png differ diff --git a/src/components/GameCanvas.svelte b/src/components/GameCanvas.svelte index f2ced89..0f8d5aa 100644 --- a/src/components/GameCanvas.svelte +++ b/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); - if (data?.playerImg) playerImgLoaded = p.loadImage(data.playerImg); + const isComplete = get(gameCompleted); + 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 - // reveal goes from 0.0 (gray) to 1.0 (full color) - const reveal = get(colorOpacity); - const hex = get(levelColor); - if (reveal > 0 && 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 g = p.lerp(128, p.green(col), reveal); - const b = p.lerp(128, p.blue(col), reveal); - p.noStroke(); - p.fill(r, g, b, reveal * 120); // max alpha 120 so its a subtle tint - p.rect(0, 0, p.width, p.height); + // skipped after game completion — full-color backgrounds need no tint + if (!get(gameCompleted)) { + const reveal = get(colorOpacity); + const hex = get(levelColor); + if (reveal > 0 && hex) { + const col = p.color(hex); + const r = p.lerp(128, p.red(col), reveal); + const g = p.lerp(128, p.green(col), reveal); + const b = p.lerp(128, p.blue(col), reveal); + p.noStroke(); + p.fill(r, g, b, reveal * 120); + p.rect(0, 0, p.width, p.height); + } } // ── 3. PLAYER INPUT ─────────────────────────────────────────── diff --git a/src/game/levelData.js b/src/game/levelData.js index af888fe..f806d9a 100644 --- a/src/game/levelData.js +++ b/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, diff --git a/src/stores/colorStore.js b/src/stores/colorStore.js index 42d1b1a..51ee61f 100644 --- a/src/stores/colorStore.js +++ b/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