Add responsive dollhouse shell overlay

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