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

Keep elevator proportions correct in portrait layout

Browse Source
This commit is contained in:
Admin 2026-09-21 23:47:11 +00:00
parent 56e638900d
commit 8af0769704
1 changed files with 75 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/main.js
View File

@ -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 = `
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="542" viewBox="0 0 120 542">
<rect x="5" y="2" width="110" height="538" rx="16" fill="#dfe8f1" stroke="#9aaabd" stroke-width="5"/>
<rect x="16" y="10" width="88" height="522" rx="12" fill="#f7fbff" stroke="#c6d1de" stroke-width="3"/>
<g fill="#fff3f8" stroke="#c896ad" stroke-width="3">
<rect x="24" y="12" width="72" height="82" rx="9"/>
<rect x="24" y="122" width="72" height="82" rx="9"/>
<rect x="24" y="232" width="72" height="82" rx="9"/>
<rect x="24" y="342" width="72" height="82" rx="9"/>
<rect x="24" y="452" width="72" height="78" rx="9"/>
</g>
<g fill="#f28fb3">
<path d="M60 40c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
<path d="M60 150c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
<path d="M60 260c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
<path d="M60 370c-11-15-33-4-23 14 10 17 23 23 23 23s13-6 23-23c10-18-12-29-23-14z"/>
<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>
</svg>
`
function buildElevatorSvg() {
const shaftHeight = FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP
const openings = Array.from({ length: FLOOR_COUNT }, (_, floor) => {
const centerY = floor * (FLOOR_H + FLOOR_GAP) + FLOOR_H / 2
const y = centerY - ELEVATOR_OPENING_H / 2
return `
<rect
x="${(ELEVATOR_W - ELEVATOR_OPENING_W) / 2}"
y="${y}"
width="${ELEVATOR_OPENING_W}"
height="${ELEVATOR_OPENING_H}"
rx="10"
fill="#fff3f8"
stroke="#c896ad"
stroke-width="3"
/>
<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 rightX = open ? cx + 58 : cx + 23
const doorW = Math.floor((ELEVATOR_CAR_W - 6) / 2)
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()