diff --git a/src/main.js b/src/main.js index f50d45e..1a3b98c 100644 --- a/src/main.js +++ b/src/main.js @@ -106,6 +106,47 @@ const PLAYER_WALK_CROPS = [ { x: 899, y: 324, w: 176, h: 294 } ] +const WALLPAPER_CROPS = { + disco: { x: 32, y: 154, w: 236, h: 244 }, + topBedroom: { x: 299, y: 154, w: 241, h: 244 }, + bedroom: { x: 566, y: 154, w: 241, h: 244 }, + study: { x: 833, y: 154, w: 241, h: 244 }, + living: { x: 32, y: 522, w: 236, h: 255 }, + playroom: { x: 299, y: 522, w: 241, h: 255 }, + kitchen: { x: 566, y: 522, w: 241, h: 255 }, + bathroom: { x: 833, y: 522, w: 241, h: 255 }, + garage: { x: 81, y: 909, w: 294, h: 281 }, + utility: { x: 411, y: 909, w: 294, h: 281 } +} + +const FLOOR_CROPS = { + lightWood: { x: 69, y: 126, w: 389, h: 350 }, + warmWood: { x: 520, y: 126, w: 390, h: 350 }, + blueTile: { x: 972, y: 126, w: 389, h: 350 }, + neutralTile: { x: 69, y: 574, w: 389, h: 350 }, + concrete: { x: 520, y: 574, w: 390, h: 350 }, + disco: { x: 972, y: 574, w: 389, h: 350 } +} + +const ARCHITECTURE_CROPS = { + ceilingTrim: { x: 229, y: 52, w: 990, h: 78 }, + skirting: { x: 239, y: 190, w: 972, h: 63 }, + floorEdge: { x: 210, y: 306, w: 1007, h: 87 } +} + +const ROOM_SKINS = { + disco: { wallpaper: 'wallpaper-disco', floor: 'floor-disco' }, + 'top-bedroom': { wallpaper: 'wallpaper-topBedroom', floor: 'floor-lightWood' }, + bedroom: { wallpaper: 'wallpaper-bedroom', floor: 'floor-lightWood' }, + study: { wallpaper: 'wallpaper-study', floor: 'floor-warmWood' }, + living: { wallpaper: 'wallpaper-living', floor: 'floor-warmWood' }, + playroom: { wallpaper: 'wallpaper-playroom', floor: 'floor-lightWood' }, + kitchen: { wallpaper: 'wallpaper-kitchen', floor: 'floor-neutralTile' }, + bathroom: { wallpaper: 'wallpaper-bathroom', floor: 'floor-blueTile' }, + garage: { wallpaper: 'wallpaper-garage', floor: 'floor-concrete' }, + utility: { wallpaper: 'wallpaper-utility', floor: 'floor-neutralTile' } +} + function floorY(floor) { return HOUSE_TOP + floor * (FLOOR_H + FLOOR_GAP) } @@ -267,6 +308,9 @@ class HouseScene extends Phaser.Scene { preload() { this.load.image('character-sheet', '/assets/character-sheet.png') + this.load.image('architecture-sheet', '/assets/architecture-sheet.png') + this.load.image('wallpaper-sheet', '/assets/wallpaper-sheet.png') + this.load.image('floor-sheet', '/assets/floor-sheet.png') this.load.image( 'elevator-shaft', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(buildElevatorSvg()) @@ -282,6 +326,18 @@ class HouseScene extends Phaser.Scene { cropTexture(this, 'character-sheet', 'player-walk-' + index, rect) }) + Object.entries(WALLPAPER_CROPS).forEach(([key, rect]) => { + cropTexture(this, 'wallpaper-sheet', 'wallpaper-' + key, rect) + }) + + Object.entries(FLOOR_CROPS).forEach(([key, rect]) => { + cropTexture(this, 'floor-sheet', 'floor-' + key, rect) + }) + + Object.entries(ARCHITECTURE_CROPS).forEach(([key, rect]) => { + cropTexture(this, 'architecture-sheet', 'architecture-' + key, rect) + }) + const saved = await loadGameState() this.state = saved?.version === 3 && ROOM_BY_ID.has(saved.player?.roomId) ? saved @@ -304,50 +360,114 @@ class HouseScene extends Phaser.Scene { const graphics = this.add.graphics().setDepth(0) graphics.fillStyle(0xfffbfd, 1) - graphics.fillRoundedRect(28, HOUSE_TOP - 18, 904, FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP + 36, 24) + graphics.fillRoundedRect( + 28, + HOUSE_TOP - 18, + 904, + FLOOR_COUNT * FLOOR_H + (FLOOR_COUNT - 1) * FLOOR_GAP + 36, + 24 + ) for (const room of ROOMS) { + const skin = ROOM_SKINS[room.id] + const inset = 7 + const wallTop = room.y + 8 + const wallBottom = room.walkBand.minY + const wallHeight = Math.max(36, wallBottom - wallTop) + const floorTop = wallBottom - 1 + const floorHeight = room.y + room.height - floorTop - 7 + + // Base room backing gives clean rounded corners behind all textures. graphics.fillStyle(room.color, 1) graphics.fillRoundedRect(room.x, room.y, room.width, room.height, 14) + // Wallpaper layer. + const wallpaper = this.add.tileSprite( + room.x + inset, + wallTop, + room.width - inset * 2, + wallHeight, + skin.wallpaper + ) + .setOrigin(0, 0) + .setDepth(1) + + wallpaper.setTileScale(0.72, 0.72) + + // Separate floor layer so the character always stands on a readable surface. + const floor = this.add.tileSprite( + room.x + inset, + floorTop, + room.width - inset * 2, + floorHeight, + skin.floor + ) + .setOrigin(0, 0) + .setDepth(2) + + floor.setTileScale(0.62, 0.62) + + // Shared architecture layer sits above both wallpaper and floor. + this.add.image( + room.x + room.width / 2, + room.y + 10, + 'architecture-ceilingTrim' + ) + .setDisplaySize(room.width - 12, 18) + .setDepth(5) + + this.add.image( + room.x + room.width / 2, + floorTop, + 'architecture-skirting' + ) + .setDisplaySize(room.width - 12, 14) + .setDepth(5) + + this.add.image( + room.x + room.width / 2, + room.y + room.height - 7, + 'architecture-floorEdge' + ) + .setDisplaySize(room.width - 10, 16) + .setDepth(5) + graphics.lineStyle(4, 0xd5b8c6, 1) graphics.strokeRoundedRect(room.x, room.y, room.width, room.height, 14) - graphics.fillStyle(0xe6caa9, 1) - graphics.fillRoundedRect( - room.x + 6, - room.walkBand.minY, - room.width - 12, - room.walkBand.maxY - room.walkBand.minY, - 6 - ) - - this.add.text(room.x + 14, room.y + 10, room.name, { + this.add.text(room.x + 14, room.y + 16, room.name, { fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif', fontSize: '16px', color: '#765466', - fontStyle: 'bold' - }).setDepth(4) + fontStyle: 'bold', + backgroundColor: 'rgba(255,255,255,0.72)', + padding: { x: 6, y: 3 } + }).setDepth(8) if (room.id === 'disco') { - this.add.text(room.x + room.width - 48, room.y + 12, '♪ ✦', { + this.add.text(room.x + room.width - 48, room.y + 18, '♪ ✦', { fontSize: '18px', color: '#9b65c6' - }).setDepth(4) + }).setDepth(8) } if (room.id === 'garage') { - this.add.text(room.x + room.width - 44, room.y + 11, '🚗', { + this.add.text(room.x + room.width - 44, room.y + 18, '🚗', { fontSize: '18px' - }).setDepth(4) + }).setDepth(8) } } - this.add.text(WIDTH / 2, 48, 'Drag her to walk • press & hold a room to ride the lift', { - fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif', - fontSize: '15px', - color: '#6d4c61' - }).setOrigin(0.5).setDepth(100) + this.add.text( + WIDTH / 2, + 48, + 'Drag her to walk • press & hold a room to ride the lift', + { + fontFamily: 'Arial Rounded MT Bold, ui-rounded, sans-serif', + fontSize: '15px', + color: '#6d4c61' + } + ).setOrigin(0.5).setDepth(100) } buildElevator() { @@ -981,7 +1101,7 @@ const game = new Phaser.Game({ }) window.__DOLLHOUSE__ = { - version: '0.4.3', + version: '0.5.0', game, async resetAll() { await clearGameState()