diff --git a/assets/images/background-jewelquest-menu.png b/assets/images/background-jewelquest-menu.png new file mode 100644 index 0000000..404f9fa Binary files /dev/null and b/assets/images/background-jewelquest-menu.png differ diff --git a/assets/images/shift/dolphin-underwater.png b/assets/images/shift/dolphin-underwater.png index 641ee18..e6679f2 100644 Binary files a/assets/images/shift/dolphin-underwater.png and b/assets/images/shift/dolphin-underwater.png differ diff --git a/assets/images/shift/fall-bike.png b/assets/images/shift/fall-bike.png index c3e7580..7d41002 100644 Binary files a/assets/images/shift/fall-bike.png and b/assets/images/shift/fall-bike.png differ diff --git a/assets/images/shift/norway-fishing.png b/assets/images/shift/norway-fishing.png index b3453f4..d022e59 100644 Binary files a/assets/images/shift/norway-fishing.png and b/assets/images/shift/norway-fishing.png differ diff --git a/assets/images/shift/puppy-space.png b/assets/images/shift/puppy-space.png index 074e5d7..da21605 100644 Binary files a/assets/images/shift/puppy-space.png and b/assets/images/shift/puppy-space.png differ diff --git a/assets/images/shift/red-dress.png b/assets/images/shift/red-dress.png index 32be3ca..c7ca2e5 100644 Binary files a/assets/images/shift/red-dress.png and b/assets/images/shift/red-dress.png differ diff --git a/assets/images/shift/warrior.png b/assets/images/shift/warrior.png index 56b03fa..cc45f11 100644 Binary files a/assets/images/shift/warrior.png and b/assets/images/shift/warrior.png differ diff --git a/src/data/assetManifest.js b/src/data/assetManifest.js index 026be7a..396a830 100644 --- a/src/data/assetManifest.js +++ b/src/data/assetManifest.js @@ -85,7 +85,10 @@ export const MANIFEST = { ...Array.from({ length: 6 }, (_, i) => image(`bloxorz-bg-${i + 1}`, `assets/images/bloxorz/background-${i + 1}.png`)), ], - jewelquest: [image('bg-jewelquest-battle', 'assets/images/background-jewelquest.png')], + jewelquest: [ + image('bg-jewelquest-battle', 'assets/images/background-jewelquest.png'), + image('bg-jewelquest-menu', 'assets/images/background-jewelquest-menu.png'), + ], bejeweled: [image('bg-bejeweled', 'assets/images/background-bejeweledblitz.png')], dominion: [ // Dominion card art. One 270×390 cell per card (art fills the top ~60%; diff --git a/src/games/jewelquest/JewelQuestGame.js b/src/games/jewelquest/JewelQuestGame.js index af15d49..0cafbdf 100644 --- a/src/games/jewelquest/JewelQuestGame.js +++ b/src/games/jewelquest/JewelQuestGame.js @@ -88,8 +88,12 @@ export default class JewelQuestGame extends Phaser.Scene { } catch (_) { /* private mode */ } this.makeTextures(); - // Solid felt background for non-battle screens (class select, level select, intro) - this.add.rectangle(GAME_WIDTH / 2, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, FELT).setDepth(D.felt); + // Background for non-battle screens (class select, level select, intro) + if (this.textures.exists('bg-jewelquest-menu')) { + this.add.image(GAME_WIDTH / 2, GAME_HEIGHT / 2, 'bg-jewelquest-menu').setDisplaySize(GAME_WIDTH, GAME_HEIGHT).setDepth(D.felt); + } else { + this.add.rectangle(GAME_WIDTH / 2, GAME_HEIGHT / 2, GAME_WIDTH, GAME_HEIGHT, FELT).setDepth(D.felt); + } this.layer = this.add.container(0, 0); if (this.playerClass) this.showLevelSelect(); @@ -361,14 +365,6 @@ export default class JewelQuestGame extends Phaser.Scene { this.clearLayer(); const cx = GAME_WIDTH / 2; - const title = this.add.text(cx, 80, 'JEWEL QUEST', { - fontFamily: 'Righteous', fontSize: '64px', color: COLORS.goldHex, - }).setOrigin(0.5); - const sub = this.add.text(cx, 138, 'Choose your champion. Match gems for mana, match skulls for damage, and spend mana on spells.', { - fontFamily: '"Julius Sans One"', fontSize: '22px', color: COLORS.mutedHex, - }).setOrigin(0.5); - this.layer.add([title, sub]); - const loadout = this.loadout(); const ids = Object.keys(CLASSES); const CARD_W = 430; @@ -376,7 +372,7 @@ export default class JewelQuestGame extends Phaser.Scene { const GAP = 26; const totalW = ids.length * CARD_W + (ids.length - 1) * GAP; const left = cx - totalW / 2 + CARD_W / 2; - const cy = 540; + const cy = 640; ids.forEach((id, i) => { const cls = CLASSES[id]; @@ -459,14 +455,6 @@ export default class JewelQuestGame extends Phaser.Scene { this.clearLayer(); const cx = GAME_WIDTH / 2; - const title = this.add.text(cx, 78, 'JEWEL QUEST', { - fontFamily: 'Righteous', fontSize: '60px', color: COLORS.goldHex, - }).setOrigin(0.5); - const sub = this.add.text(cx, 130, 'Match 3+ gems to bank mana, match skulls to deal damage, and cast spells to break your rival.', { - fontFamily: '"Julius Sans One"', fontSize: '22px', color: COLORS.mutedHex, - }).setOrigin(0.5); - this.layer.add([title, sub]); - if (!this.bank.length) { const msg = this.add.text(cx, 520, 'No levels found in /data/jewelquest.json', { fontFamily: '"Julius Sans One"', fontSize: '26px', color: COLORS.dangerHex, align: 'center', @@ -486,20 +474,27 @@ export default class JewelQuestGame extends Phaser.Scene { `Spells ${loadout.spellCount}/5`, nextMs ? `Next bonus after Level ${nextMs.afterLevel}` : 'All bonuses earned', ].join(' • '); - const prog = this.add.text(cx, 176, `Defeated ${this.levelsCompleted} / ${this.bank.length}`, { + const prog = this.add.text(cx, 376, `Defeated ${this.levelsCompleted} / ${this.bank.length}`, { fontFamily: 'Righteous', fontSize: '24px', color: COLORS.textHex, }).setOrigin(0.5); - const loadoutText = this.add.text(cx, 216, strip, { + const loadoutText = this.add.text(cx, 416, strip, { fontFamily: '"Julius Sans One"', fontSize: '20px', color: COLORS.goldHex, }).setOrigin(0.5); - this.layer.add([prog, loadoutText]); + + // Semi-transparent background behind the status text + const bgW = Math.max(prog.width, loadoutText.width) + 60; + const bgH = 120; + const bg = this.add.graphics().setDepth(D.ui - 1); + bg.fillStyle(0x000000, 0.65); + bg.fillRoundedRect(cx - bgW / 2, 316, bgW, bgH, 12); + this.layer.add([bg, prog, loadoutText]); const COLS = 10; const TILE = 128; const GAP = 16; const gridW = COLS * TILE + (COLS - 1) * GAP; const left = cx - gridW / 2 + TILE / 2; - const top = 330; + const top = 530; this.bank.forEach((lv, i) => { const col = i % COLS; @@ -619,7 +614,14 @@ export default class JewelQuestGame extends Phaser.Scene { const statText = this.add.text(cx, 800, `Skill ${stars} HP ❤ ${lv.hp} Class ${enemyCls}`, { fontFamily: '"Julius Sans One"', fontSize: '28px', color: COLORS.textHex, }).setOrigin(0.5); - this.layer.add([name, bio, tagline, statText]); + + // Semi-transparent background behind the opponent info text + const bgW = Math.max(name.width, bio.width, tagline.width, statText.width) + 60; + const bgH = 240; + const bg = this.add.graphics().setDepth(D.ui - 1); + bg.fillStyle(0x000000, 0.65); + bg.fillRoundedRect(cx - bgW / 2, 600, bgW, bgH, 12); + this.layer.add([bg, name, bio, tagline, statText]); const fight = new Button(this, cx - 130, GAME_HEIGHT - 110, 'FIGHT!', () => this.startBattle(level), { width: 240, height: 66, fontSize: 30 }); diff --git a/src/games/shift/ShiftGame.js b/src/games/shift/ShiftGame.js index 43d2df3..4b0ffc6 100644 --- a/src/games/shift/ShiftGame.js +++ b/src/games/shift/ShiftGame.js @@ -223,10 +223,15 @@ export default class ShiftGame extends Phaser.Scene { this._drawMenuBackground(); const cx = GAME_WIDTH / 2; + const titleBg = this.add.graphics().setDepth(D.overlay - 1); + titleBg.fillStyle(0x000000, 0.55); + titleBg.fillRoundedRect(cx - 310, 75, 620, 90, 12); + titleBg.lineStyle(2, 0xffffff, 0.3); + titleBg.strokeRoundedRect(cx - 310, 75, 620, 90, 12); const title = this.add.text(cx, 120, 'Choose Your Image', { fontFamily: 'Righteous', fontSize: '64px', color: COLORS.goldHex, }).setOrigin(0.5); - this.layer.add(title); + this.layer.add([titleBg, title]); const CARD_W = 310; const CARD_H = 360;