Keep elevator proportions correct in portrait layout
This commit is contained in:
parent
56e638900d
commit
8af0769704
103
src/main.js
103
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 = `
|
||||
<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()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user