Admin/dollhouse-pwa
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add responsive dollhouse shell overlay

Browse Source
This commit is contained in:
Admin 2026-09-22 00:24:20 +00:00
parent 14e40f060c
commit 97170b6d5f
1 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/main.js
View File

@ -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()