Keep elevator proportions correct in portrait layout

src/main.js

@@ -71,7 +71,10 @@ const FLOOR_H = Math.floor(
   ) / FLOOR_COUNT
 )
 const STATUS_Y = HEIGHT - 36
-const ELEVATOR_CAR_H = Math.min(140, Math.max(76, Math.round(FLOOR_H * 0.58)))
+const ELEVATOR_CAR_W = 82
+const ELEVATOR_CAR_H = Math.min(104, Math.max(74, Math.round(FLOOR_H * 0.36)))
+const ELEVATOR_OPENING_W = 72
+const ELEVATOR_OPENING_H = Math.min(96, Math.max(68, Math.round(FLOOR_H * 0.34)))
 
 const PLAYER_DRAG_FOLLOW = 0.18
 const PLAYER_DRAG_OFFSET_Y = 42
@@ -179,26 +182,66 @@ function cropTexture(scene, sourceKey, key, rect) {
   scene.textures.addCanvas(key, canvas)
 }
 
-const ELEVATOR_SVG = `
+function buildElevatorSvg() {
-<svg xmlns="http://www.w3.org/2000/svg" width="120" height="542" viewBox="0 0 120 542">
+  const shaftHeight = FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP
-  <rect x="5" y="2" width="110" height="538" rx="16" fill="#dfe8f1" stroke="#9aaabd" stroke-width="5"/>
+  const openings = Array.from({ length: FLOOR_COUNT }, (_, floor) => {
-  <rect x="16" y="10" width="88" height="522" rx="12" fill="#f7fbff" stroke="#c6d1de" stroke-width="3"/>
+    const centerY = floor * (FLOOR_H + FLOOR_GAP) + FLOOR_H / 2
-  <g fill="#fff3f8" stroke="#c896ad" stroke-width="3">
+    const y = centerY - ELEVATOR_OPENING_H / 2
-    <rect x="24" y="12" width="72" height="82" rx="9"/>
+
-    <rect x="24" y="122" width="72" height="82" rx="9"/>
+    return `
-    <rect x="24" y="232" width="72" height="82" rx="9"/>
+      <rect
-    <rect x="24" y="342" width="72" height="82" rx="9"/>
+        x="${(ELEVATOR_W - ELEVATOR_OPENING_W) / 2}"
-    <rect x="24" y="452" width="72" height="78" rx="9"/>
+        y="${y}"
-  </g>
+        width="${ELEVATOR_OPENING_W}"
-  <g fill="#f28fb3">
+        height="${ELEVATOR_OPENING_H}"
-    <path d="M60 40c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
+        rx="10"
-    <path d="M60 150c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
+        fill="#fff3f8"
-    <path d="M60 260c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
+        stroke="#c896ad"
-    <path d="M60 370c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
+        stroke-width="3"
-    <path d="M60 480c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
+      />
-  </g>
+      <text
+        x="${ELEVATOR_W / 2}"
+        y="${centerY + 2}"
+        text-anchor="middle"
+        dominant-baseline="middle"
+        font-family="Arial, sans-serif"
+        font-size="28"
+        fill="#f28fb3"
+      >♥</text>
+    `
+  }).join('')
+
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${ELEVATOR_W}"
+      height="${shaftHeight}"
+      viewBox="0 0 ${ELEVATOR_W} ${shaftHeight}"
+    >
+      <rect
+        x="5"
+        y="2"
+        width="${ELEVATOR_W - 10}"
+        height="${shaftHeight - 4}"
+        rx="16"
+        fill="#dfe8f1"
+        stroke="#9aaabd"
+        stroke-width="5"
+      />
+      <rect
+        x="16"
+        y="10"
+        width="${ELEVATOR_W - 32}"
+        height="${shaftHeight - 20}"
+        rx="12"
+        fill="#f7fbff"
+        stroke="#c6d1de"
+        stroke-width="3"
+      />
+      ${openings}
     </svg>
   `
+}
 
 class HouseScene extends Phaser.Scene {
   constructor() {
@@ -226,7 +269,7 @@ class HouseScene extends Phaser.Scene {
     this.load.image('character-sheet', '/assets/character-sheet.png')
     this.load.image(
       'elevator-shaft',
-      'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(ELEVATOR_SVG)
+      'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(buildElevatorSvg())
     )
   }
 
@@ -319,15 +362,16 @@ class HouseScene extends Phaser.Scene {
     const stopY = elevatorStopY(currentRoom)
     const cx = ELEVATOR_X + ELEVATOR_W / 2
 
-    this.elevatorCarBack = this.add.rectangle(cx, stopY, 94, ELEVATOR_CAR_H, 0xfff8fb, 1)
+    this.elevatorCarBack = this.add.rectangle(cx, stopY, ELEVATOR_CAR_W, ELEVATOR_CAR_H, 0xfff8fb, 1)
       .setStrokeStyle(3, 0xb98ba2)
       .setDepth(190)
 
-    this.elevatorDoorLeft = this.add.rectangle(cx - 23, stopY, 44, ELEVATOR_CAR_H - 8, 0xf4bfd2, 1)
+    const doorW = Math.floor((ELEVATOR_CAR_W - 6) / 2)
+    this.elevatorDoorLeft = this.add.rectangle(cx - doorW / 2, stopY, doorW, ELEVATOR_CAR_H - 8, 0xf4bfd2, 1)
       .setStrokeStyle(2, 0xc17d9d)
       .setDepth(210)
 
-    this.elevatorDoorRight = this.add.rectangle(cx + 23, stopY, 44, ELEVATOR_CAR_H - 8, 0xf4bfd2, 1)
+    this.elevatorDoorRight = this.add.rectangle(cx + doorW / 2, stopY, doorW, ELEVATOR_CAR_H - 8, 0xf4bfd2, 1)
       .setStrokeStyle(2, 0xc17d9d)
       .setDepth(210)
 
@@ -630,8 +674,11 @@ class HouseScene extends Phaser.Scene {
 
   async setElevatorDoors(open) {
     const cx = ELEVATOR_X + ELEVATOR_W / 2
-    const leftX = open ? cx - 58 : cx - 23
+    const doorW = Math.floor((ELEVATOR_CAR_W - 6) / 2)
-    const rightX = open ? cx + 58 : cx + 23
+    const closedOffset = doorW / 2
+    const openOffset = ELEVATOR_CAR_W / 2 + doorW / 2 + 4
+    const leftX = open ? cx - openOffset : cx - closedOffset
+    const rightX = open ? cx + openOffset : cx + closedOffset
 
     await Promise.all([
       this.tweenAsync({
@@ -934,7 +981,7 @@ const game = new Phaser.Game({
 })
 
 window.__DOLLHOUSE__ = {
-  version: '0.4.2',
+  version: '0.4.3',
   game,
   async resetAll() {
     await clearGameState()