Make roof room a rooftop garden and restore disco

src/main.js

@@ -136,7 +136,6 @@ const ARCHITECTURE_CROPS = {
 
 const ROOM_SKINS = {
   disco: { wallpaper: 'wallpaper-disco', floor: 'floor-disco' },
-  'top-lounge': { wallpaper: 'wallpaper-living', floor: 'floor-lightWood' },
   'top-bedroom': { wallpaper: 'wallpaper-topBedroom', floor: 'floor-lightWood' },
   bedroom: { wallpaper: 'wallpaper-bedroom', floor: 'floor-lightWood' },
   study: { wallpaper: 'wallpaper-study', floor: 'floor-warmWood' },
@@ -183,8 +182,8 @@ function makeRoofRoom() {
   const { x, y, width, height } = ROOF_ROOM_BOUNDS
 
   return {
-    id: 'disco',
-    name: 'Disco',
+    id: 'roof-garden',
+    name: 'Rooftop Garden',
     floor: -1,
     side: 'center',
     isRoof: true,
@@ -203,7 +202,7 @@ function makeRoofRoom() {
 
 const ROOMS = [
   makeRoofRoom(),
-  makeRoom('top-lounge', 'Top Lounge', 0, 'left', 0xe9f5ff),
+  makeRoom('disco', 'Disco', 0, 'left', 0xf1e4ff),
   makeRoom('top-bedroom', 'Top Bedroom', 0, 'right', 0xffe8f1),
   makeRoom('bedroom', 'Bedroom', 1, 'left', 0xffeef4),
   makeRoom('study', 'Study', 1, 'right', 0xfff4df),
@@ -587,8 +586,7 @@ class HouseScene extends Phaser.Scene {
   }
 
   drawRoofRoom() {
-    const room = ROOM_BY_ID.get('disco')
-    const skin = ROOM_SKINS.disco
+    const room = ROOM_BY_ID.get('roof-garden')
     const graphics = this.add.graphics().setDepth(9)
 
     const inset = 7
@@ -602,75 +600,60 @@ class HouseScene extends Phaser.Scene {
     const backLeft = room.x + backInset
     const backRight = room.x + room.width - backInset
 
-    // Cut a playable attic/disco opening into the cream gable.
-    graphics.fillStyle(room.color, 1)
+    // Open-air rooftop garden: sky backdrop and a small perspective turf area.
+    graphics.fillStyle(0xcfefff, 1)
     graphics.fillRoundedRect(room.x, room.y, room.width, room.height, 18)
 
-    this.add.image(
-      room.x + room.width / 2,
-      backTop + (horizonY - backTop) / 2,
-      skin.wallpaper
-    )
-      .setDisplaySize(backRight - backLeft, horizonY - backTop)
-      .setDepth(10)
+    graphics.fillStyle(0xbce8ff, 1)
+    graphics.fillRect(backLeft, backTop, backRight - backLeft, horizonY - backTop)
 
-    this.addMaskedImage(
-      room,
-      skin.wallpaper,
-      [
-        { x: left, y: wallTop },
-        { x: backLeft, y: backTop },
-        { x: backLeft, y: horizonY },
-        { x: left, y: bottomY }
-      ],
-      10,
-      0xffedf5
-    )
+    graphics.fillStyle(0x8fd47f, 1)
+    graphics.fillPoints([
+      new Phaser.Geom.Point(backLeft, horizonY),
+      new Phaser.Geom.Point(backRight, horizonY),
+      new Phaser.Geom.Point(right, bottomY),
+      new Phaser.Geom.Point(left, bottomY)
+    ], true)
 
-    this.addMaskedImage(
-      room,
-      skin.wallpaper,
-      [
-        { x: backRight, y: backTop },
-        { x: right, y: wallTop },
-        { x: right, y: bottomY },
-        { x: backRight, y: horizonY }
-      ],
-      10,
-      0xf2f6ff
-    )
+    // Garden edging / planter boxes.
+    graphics.fillStyle(0xf5d2a5, 1)
+    graphics.fillRoundedRect(backLeft + 8, horizonY - 18, 38, 16, 5)
+    graphics.fillRoundedRect(backRight - 46, horizonY - 18, 38, 16, 5)
 
-    this.addMaskedImage(
-      room,
-      skin.floor,
-      [
-        { x: backLeft, y: horizonY },
-        { x: backRight, y: horizonY },
-        { x: right, y: bottomY },
-        { x: left, y: bottomY }
-      ],
-      11
-    )
+    // Simple flowers and leafy plants rendered in Phaser so the roof remains responsive.
+    const plantDepth = 12
+    const flowers = [
+      { x: backLeft + 26, y: horizonY - 24, color: '#ff7fa9' },
+      { x: backLeft + 37, y: horizonY - 30, color: '#ffd86a' },
+      { x: backRight - 30, y: horizonY - 25, color: '#b78cff' },
+      { x: backRight - 18, y: horizonY - 31, color: '#ff8f7e' }
+    ]
 
-    this.add.image(
-      room.x + room.width / 2,
-      horizonY,
-      'architecture-skirting'
-    )
-      .setDisplaySize(backRight - backLeft + 4, 9)
-      .setDepth(12)
+    flowers.forEach((flower) => {
+      this.add.text(flower.x, flower.y, '✿', {
+        fontFamily: 'Arial',
+        fontSize: '18px',
+        color: flower.color
+      }).setOrigin(0.5).setDepth(plantDepth)
+    })
+
+    // Small garden bench in the middle.
+    graphics.fillStyle(0xe5b982, 1)
+    graphics.fillRoundedRect(room.x + room.width / 2 - 24, horizonY - 10, 48, 8, 4)
+    graphics.fillRect(room.x + room.width / 2 - 20, horizonY - 3, 5, 14)
+    graphics.fillRect(room.x + room.width / 2 + 15, horizonY - 3, 5, 14)
 
     graphics.lineStyle(3, 0xd5a4bd, 1)
     graphics.strokeRoundedRect(room.x, room.y, room.width, room.height, 18)
     graphics.lineBetween(left, bottomY, backLeft, horizonY)
     graphics.lineBetween(right, bottomY, backRight, horizonY)
 
-    this.add.text(room.x + 12, room.y + 10, 'Disco  ♪', {
+    this.add.text(room.x + 10, room.y + 8, 'Rooftop Garden', {
       fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif',
-      fontSize: '14px',
-      color: '#765466',
+      fontSize: '13px',
+      color: '#5f7552',
       fontStyle: 'bold',
-      backgroundColor: 'rgba(255,255,255,0.82)',
+      backgroundColor: 'rgba(255,255,255,0.84)',
       padding: { x: 5, y: 2 }
     }).setDepth(13)
   }
@@ -1375,7 +1358,7 @@ const game = new Phaser.Game({
 })
 
 window.__DOLLHOUSE__ = {
-  version: '0.9.0',
+  version: '0.9.1',
   game,
   async resetAll() {
     await clearGameState()