Refine perspective joins and remove room texture seams

src/main.js

@@ -372,25 +372,21 @@ class HouseScene extends Phaser.Scene {
     return shape.createGeometryMask()
   }
 
-  addMaskedTile(room, texture, points, depth, tileScale = 0.7, tint = null) {
+  addMaskedImage(room, texture, points, depth, tint = null) {
-    const tile = this.add.tileSprite(
+    const image = this.add.image(
-      room.x + 7,
+      room.x + room.width / 2,
-      room.y + 7,
+      room.y + room.height / 2,
-      room.width - 14,
-      room.height - 14,
       texture
     )
-      .setOrigin(0, 0)
+      .setDisplaySize(room.width - 12, room.height - 12)
       .setDepth(depth)
-
+      .setMask(this.createPolygonMask(points))
-    tile.setTileScale(tileScale, tileScale)
-    tile.setMask(this.createPolygonMask(points))
 
     if (tint !== null) {
-      tile.setTint(tint)
+      image.setTint(tint)
     }
 
-    return tile
+    return image
   }
 
   drawHouse() {
@@ -408,66 +404,62 @@ class HouseScene extends Phaser.Scene {
     for (const room of ROOMS) {
       const skin = ROOM_SKINS[room.id]
       const inset = 7
-      const sideInset = Math.round(room.width * 0.18)
+      const sideInset = Math.round(room.width * 0.20)
       const wallTop = room.y + 9
-      const backTop = wallTop + Math.max(10, Math.round(FLOOR_H * 0.04))
+      const backTop = room.y + Math.max(14, Math.round(FLOOR_H * 0.08))
-      const horizonY = room.walkBand.minY
+      const horizonY = room.y + Math.round(FLOOR_H * 0.60)
       const bottomY = room.y + room.height - 8
       const left = room.x + inset
       const right = room.x + room.width - inset
       const backLeft = room.x + sideInset
       const backRight = room.x + room.width - sideInset
 
-      // Base backing remains rectangular so room selection and hold feedback
-      // always have a clean silhouette.
       graphics.fillStyle(room.color, 1)
       graphics.fillRoundedRect(room.x, room.y, room.width, room.height, 14)
 
-      // Back wall: deliberately narrower than the room to create depth.
+      // Back wall: a single fitted image avoids TileSprite repeat seams.
-      const backWall = this.add.tileSprite(
+      this.add.image(
-        backLeft,
+        room.x + room.width / 2,
-        backTop,
+        backTop + (horizonY - backTop) / 2,
-        backRight - backLeft,
-        Math.max(30, horizonY - backTop),
         skin.wallpaper
       )
-        .setOrigin(0, 0)
+        .setDisplaySize(
+          backRight - backLeft,
+          Math.max(30, horizonY - backTop)
+        )
         .setDepth(1)
 
-      backWall.setTileScale(0.67, 0.67)
+      // Left and right walls use the same source image, clipped into true
-
+      // room-side polygons. Their lower edges meet the floor exactly.
-      // Angled side walls. They use the same wallpaper with subtle opposite
+      this.addMaskedImage(
-      // tints so the corner reads clearly without needing baked perspective art.
-      this.addMaskedTile(
         room,
         skin.wallpaper,
         [
           { x: left, y: wallTop },
           { x: backLeft, y: backTop },
           { x: backLeft, y: horizonY },
-          { x: left, y: horizonY + Math.round(FLOOR_H * 0.08) }
+          { x: left, y: bottomY }
         ],
         2,
-        0.67,
+        0xffedf5
-        0xffeaf3
       )
 
-      this.addMaskedTile(
+      this.addMaskedImage(
         room,
         skin.wallpaper,
         [
           { x: backRight, y: backTop },
           { x: right, y: wallTop },
-          { x: right, y: horizonY + Math.round(FLOOR_H * 0.08) },
+          { x: right, y: bottomY },
           { x: backRight, y: horizonY }
         ],
         2,
-        0.67,
+        0xf2f6ff
-        0xf0f4ff
       )
 
-      // Perspective floor: narrow at the back, full-width at the front.
+      // The floor fills the complete perspective trapezoid right to the
-      this.addMaskedTile(
+      // room's front corners, so no base-color wedges can peek through.
+      this.addMaskedImage(
         room,
         skin.floor,
         [
@@ -476,12 +468,19 @@ class HouseScene extends Phaser.Scene {
           { x: right, y: bottomY },
           { x: left, y: bottomY }
         ],
-        3,
+        3
-        0.54
       )
 
-      // Ceiling and skirting architecture. The central trims stay straight,
+      // Subtle depth/shadow where the rear wall meets the floor.
-      // while perspective guide lines make the side walls/floor read in 3D.
+      graphics.fillStyle(0x6d4c61, 0.12)
+      graphics.fillRect(
+        backLeft,
+        horizonY - 2,
+        backRight - backLeft,
+        5
+      )
+
+      // Shared architecture strips.
       this.add.image(
         room.x + room.width / 2,
         backTop,
@@ -506,19 +505,12 @@ class HouseScene extends Phaser.Scene {
         .setDisplaySize(room.width - 10, 15)
         .setDepth(6)
 
+      // Perspective edges/corners.
       graphics.lineStyle(3, 0xd2aabf, 0.95)
-
-      // Rear vertical corners.
       graphics.lineBetween(backLeft, backTop, backLeft, horizonY)
       graphics.lineBetween(backRight, backTop, backRight, horizonY)
-
-      // Ceiling perspective lines.
       graphics.lineBetween(left, wallTop, backLeft, backTop)
       graphics.lineBetween(right, wallTop, backRight, backTop)
-
-      // Floor/skirting perspective lines.
-      graphics.lineBetween(left, horizonY + Math.round(FLOOR_H * 0.08), backLeft, horizonY)
-      graphics.lineBetween(right, horizonY + Math.round(FLOOR_H * 0.08), backRight, horizonY)
       graphics.lineBetween(left, bottomY, backLeft, horizonY)
       graphics.lineBetween(right, bottomY, backRight, horizonY)
 
@@ -530,7 +522,7 @@ class HouseScene extends Phaser.Scene {
         fontSize: '16px',
         color: '#765466',
         fontStyle: 'bold',
-        backgroundColor: 'rgba(255,255,255,0.78)',
+        backgroundColor: 'rgba(255,255,255,0.80)',
         padding: { x: 6, y: 3 }
       }).setDepth(9)
 
@@ -1191,7 +1183,7 @@ const game = new Phaser.Game({
 })
 
 window.__DOLLHOUSE__ = {
-  version: '0.6.0',
+  version: '0.6.1',
   game,
   async resetAll() {
     await clearGameState()