diff --git a/assets/images/advancewars/background-image.png b/assets/images/advancewars/background-image.png new file mode 100644 index 0000000..0087172 Binary files /dev/null and b/assets/images/advancewars/background-image.png differ diff --git a/assets/images/zuma/background-menu.png b/assets/images/zuma/background-menu.png new file mode 100644 index 0000000..2b28c0a Binary files /dev/null and b/assets/images/zuma/background-menu.png differ diff --git a/assets/images/zuma/frog.png b/assets/images/zuma/frog.png new file mode 100644 index 0000000..9e45c9d Binary files /dev/null and b/assets/images/zuma/frog.png differ diff --git a/assets/images/zuma/frog.psd b/assets/images/zuma/frog.psd new file mode 100644 index 0000000..c7c5729 Binary files /dev/null and b/assets/images/zuma/frog.psd differ diff --git a/src/data/assetManifest.js b/src/data/assetManifest.js index 396a830..79ad924 100644 --- a/src/data/assetManifest.js +++ b/src/data/assetManifest.js @@ -313,6 +313,9 @@ export const MANIFEST = { // its audio only downloads once Dot Link is actually entered. (scene) => musicFrom(scene, 'hacker-music'), ], + zuma: [ + image('zuma-menu-bg', 'assets/images/zuma/background-menu.png'), + ], '2048': [ // hacker soundtrack (see services/soundtrack.js) — lazy-loaded here so // its audio only downloads once 2048 is actually entered. diff --git a/src/games/zuma/ZumaGame.js b/src/games/zuma/ZumaGame.js index d3d4b46..355d32c 100644 --- a/src/games/zuma/ZumaGame.js +++ b/src/games/zuma/ZumaGame.js @@ -11,7 +11,7 @@ import { const BG = 0x0d1a10; // deep jungle green const PATH_RIM = 0x241b0e; const PATH_BED = 0x4a3a26; -const D = { path: 0, hole: 2, ball: 10, icon: 11, flight: 12, laser: 13, frog: 14, fx: 20, ui: 30, overlay: 60, overlayUI: 62 }; +const D = { path: 0, hole: 2, ball: 10, icon: 11, flight: 12, laser: 13, frog: 14, fx: 20, ui: 30, bg: -2, overlay: 60, overlayUI: 62 }; // glossy marble palette: red, yellow, blue, green, purple, silver const BALL_COLORS = [0xd9403a, 0xeec23d, 0x3f7fdb, 0x43b059, 0x9b59d0, 0xd9dde3]; @@ -202,15 +202,16 @@ export default class ZumaGame extends Phaser.Scene { this.overlayUp = false; this.state = null; this.clearLayer(); - const cx = GAME_WIDTH / 2; - const title = this.add.text(cx, 84, 'ZUMA', { - fontFamily: 'Righteous', fontSize: '72px', color: COLORS.goldHex, - }).setOrigin(0.5); - const sub = this.add.text(cx, 148, 'Shoot marbles into the rolling chain — match 3+ to pop them all before the skull feeds. Right-click or SPACE swaps.', { - fontFamily: '"Julius Sans One"', fontSize: '22px', color: COLORS.mutedHex, - }).setOrigin(0.5); - this.layer.add([title, sub]); + // Background image (falls back to solid color if not loaded) + if (this.textures.exists('zuma-menu-bg')) { + this.layer.add(this.add.image(GAME_WIDTH / 2, GAME_HEIGHT / 2, 'zuma-menu-bg') + .setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(D.bg)); + } else { + this.layer.add(this.add.rectangle(GAME_WIDTH / 2, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, BG).setDepth(D.bg)); + } + + const cx = GAME_WIDTH / 2; if (!this.bank.length) { const msg = this.add.text(cx, 520, 'No levels found.\nRun: node server/scripts/genZuma.js', { @@ -223,17 +224,20 @@ export default class ZumaGame extends Phaser.Scene { } const nextLevel = Math.min(this.levelsCompleted + 1, this.bank.length); - const prog = this.add.text(cx, 192, `Completed ${this.levelsCompleted} / ${this.bank.length}`, { + const bg = this.add.rectangle(cx, 442, 320, 56, 0x000000, 0.55) + .setStrokeStyle(2, 0x6b5638, 0.8) + .setOrigin(0.5); + const prog = this.add.text(cx, 442, `Completed ${this.levelsCompleted} / ${this.bank.length}`, { fontFamily: 'Righteous', fontSize: '24px', color: COLORS.textHex, }).setOrigin(0.5); - this.layer.add(prog); + this.layer.add([bg, prog]); const COLS = 10; const SIZE = 120; const GAP = 16; const gridW = COLS * SIZE + (COLS - 1) * GAP; const left = cx - gridW / 2 + SIZE / 2; - const top = 300; + const top = 550; this.bank.forEach((l, i) => { const col = i % COLS;