From 97170b6d5f8c8a2ff8647d2ac7d9f6dab5d74eb7 Mon Sep 17 00:00:00 2001 From: Admin Date: Tue, 22 Sep 2026 00:24:20 +0000 Subject: [PATCH] Add responsive dollhouse shell overlay --- src/main.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 69 insertions(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 9a33405..f3b9a26 100644 --- a/src/main.js +++ b/src/main.js @@ -134,6 +134,15 @@ const ARCHITECTURE_CROPS = { floorEdge: { x: 210, y: 306, w: 1007, h: 87 } } +const HOUSE_SHELL_CROPS = { + roof: { x: 0, y: 0, w: 1122, h: 245 }, + leftPost: { x: 24, y: 240, w: 76, h: 150 }, + rightPost: { x: 1020, y: 240, w: 76, h: 150 }, + beamLeft: { x: 72, y: 397, w: 400, h: 64 }, + beamRight: { x: 638, y: 397, w: 408, h: 64 }, + foundation: { x: 0, y: 1250, w: 1122, h: 152 } +} + const ROOM_SKINS = { disco: { wallpaper: 'wallpaper-disco', floor: 'floor-disco' }, 'top-bedroom': { wallpaper: 'wallpaper-topBedroom', floor: 'floor-lightWood' }, @@ -311,6 +320,7 @@ class HouseScene extends Phaser.Scene { this.load.image('architecture-sheet', '/assets/architecture-sheet.png') this.load.image('wallpaper-sheet', '/assets/wallpaper-sheet.png') this.load.image('floor-sheet', '/assets/floor-sheet.png') + this.load.image('house-shell-sheet', '/assets/house-shell-overlay.png') this.load.image( 'elevator-shaft', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(buildElevatorSvg()) @@ -338,6 +348,10 @@ class HouseScene extends Phaser.Scene { cropTexture(this, 'architecture-sheet', 'architecture-' + key, rect) }) + Object.entries(HOUSE_SHELL_CROPS).forEach(([key, rect]) => { + cropTexture(this, 'house-shell-sheet', 'house-shell-' + key, rect) + }) + const saved = await loadGameState() this.state = saved?.version === 3 && ROOM_BY_ID.has(saved.player?.roomId) ? saved @@ -346,6 +360,7 @@ class HouseScene extends Phaser.Scene { this.cameras.main.setBackgroundColor('#ccecff') this.drawHouse() + this.buildHouseShell() this.buildElevator() this.buildUi() this.spawnPlayer() @@ -552,6 +567,59 @@ class HouseScene extends Phaser.Scene { ).setOrigin(0.5).setDepth(100) } + buildHouseShell() { + const shellDepth = 7 + const stackHeight = FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP + const stackBottom = HOUSE_TOP + stackHeight + + // Decorative roof/cap. It is intentionally compressed vertically so it + // fits above the responsive room stack without stealing playable space. + this.add.image(WIDTH / 2, HOUSE_TOP + 10, 'house-shell-roof') + .setOrigin(0.5, 1) + .setDisplaySize(1000, 96) + .setDepth(shellDepth) + + // Continuous outer posts make the ten room openings read as one house. + this.add.image(LEFT_X - 17, HOUSE_TOP + stackHeight / 2, 'house-shell-leftPost') + .setDisplaySize(46, stackHeight + 14) + .setDepth(shellDepth) + + this.add.image( + RIGHT_X + BANK_W + 17, + HOUSE_TOP + stackHeight / 2, + 'house-shell-rightPost' + ) + .setDisplaySize(46, stackHeight + 14) + .setDepth(shellDepth) + + // Reuse the generated decorative floor beam at every storey boundary. + for (let floor = 0; floor < FLOOR_COUNT - 1; floor += 1) { + const beamY = floorY(floor) + FLOOR_H + FLOOR_GAP / 2 + + this.add.image( + LEFT_X + BANK_W / 2, + beamY, + 'house-shell-beamLeft' + ) + .setDisplaySize(BANK_W + 26, 28) + .setDepth(shellDepth) + + this.add.image( + RIGHT_X + BANK_W / 2, + beamY, + 'house-shell-beamRight' + ) + .setDisplaySize(BANK_W + 26, 28) + .setDepth(shellDepth) + } + + // Bottom plinth/foundation ties both banks and the lift together. + this.add.image(WIDTH / 2, stackBottom - 3, 'house-shell-foundation') + .setOrigin(0.5, 0) + .setDisplaySize(1000, 52) + .setDepth(shellDepth) + } + buildElevator() { const shaftHeight = FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP @@ -1183,7 +1251,7 @@ const game = new Phaser.Game({ }) window.__DOLLHOUSE__ = { - version: '0.6.1', + version: '0.7.0', game, async resetAll() { await clearGameState()