diff --git a/public/assets/img/bg_butcher.png b/public/assets/img/bg_butcher.png new file mode 100644 index 0000000..ead2272 Binary files /dev/null and b/public/assets/img/bg_butcher.png differ diff --git a/public/assets/img/bg_coldroom.png b/public/assets/img/bg_coldroom.png new file mode 100644 index 0000000..14fa71d Binary files /dev/null and b/public/assets/img/bg_coldroom.png differ diff --git a/public/assets/img/bg_grill.png b/public/assets/img/bg_grill.png new file mode 100644 index 0000000..e5ffc83 Binary files /dev/null and b/public/assets/img/bg_grill.png differ diff --git a/public/assets/img/bg_pantry.png b/public/assets/img/bg_pantry.png new file mode 100644 index 0000000..770942b Binary files /dev/null and b/public/assets/img/bg_pantry.png differ diff --git a/public/assets/img/bg_pot.png b/public/assets/img/bg_pot.png new file mode 100644 index 0000000..ab237b8 Binary files /dev/null and b/public/assets/img/bg_pot.png differ diff --git a/public/assets/img/bg_stove.png b/public/assets/img/bg_stove.png new file mode 100644 index 0000000..80d231f Binary files /dev/null and b/public/assets/img/bg_stove.png differ diff --git a/scripts/gen-art-batch.sh b/scripts/gen-art-batch.sh index dccbbe2..c0059e4 100755 --- a/scripts/gen-art-batch.sh +++ b/scripts/gen-art-batch.sh @@ -44,4 +44,13 @@ gen hero_eggs 304 "$JSTYLE, glass bowl of whipped glossy egg whites beside t gen hero_poach 305 "$JSTYLE, single perfect poached egg on a slotted spoon, white silky and intact, droplet falling" gen hero_benedict 306 "$JSTYLE, eggs benedict on a toasted muffin, hollandaise dripping down, single plate centered" +# Station backdrops — blurred walls so every scene has a horizon, not fog. +BSTYLE="soft-focus heavily blurred background, muted warm dark tones, no sharp foreground objects, cozy game environment backdrop art, wide shot" +gen bg_grill 401 "$BSTYLE, backyard at dusk seen past a grill, wooden fence, string lights, drifting smoke" +gen bg_stove 402 "$BSTYLE, dark tiled kitchen splashback with hanging copper utensils and a warm lamp" +gen bg_pot 403 "$BSTYLE, steamy stove wall with a shelf of stockpots and rising steam wisps" +gen bg_butcher 404 "$BSTYLE, white tiled butcher shop wall with hanging tools and a wooden rail" +gen bg_pantry 405 "$BSTYLE, warm pantry shelves with egg cartons, flour sacks and preserving jars" +gen bg_coldroom 406 "$BSTYLE, stainless steel commercial kitchen cold room, soft blue-grey light" + echo done diff --git a/src/scenes/eggbench.ts b/src/scenes/eggbench.ts index d836d65..f293607 100644 --- a/src/scenes/eggbench.ts +++ b/src/scenes/eggbench.ts @@ -14,6 +14,7 @@ import { cartonWord, } from '../sim/eggs'; import { el, Panel } from '../ui/hud'; +import { loadBackdrop } from './props'; const BENCH_Y = 0; @@ -62,6 +63,9 @@ export class EggBenchView implements View { onDone: ((result: ReturnType) => void) | null = null; + private bgTex = loadBackdrop('/assets/img/bg_pantry.png'); + private prevBg: unknown = null; + constructor(private app: App) { this.buildScenery(); this.panel = new Panel('egg-panel'); @@ -81,7 +85,7 @@ export class EggBenchView implements View { private buildScenery(): void { const bench = new THREE.Mesh( - new THREE.BoxGeometry(24, 0.4, 12), + new THREE.BoxGeometry(9, 0.4, 6), new THREE.MeshStandardMaterial({ color: 0x4a3524, roughness: 0.85 }), ); bench.position.y = -0.2; @@ -163,9 +167,12 @@ export class EggBenchView implements View { } enter(): void { + this.prevBg = this.app.scene.background; + this.app.scene.background = this.bgTex; this.panel.show(); } exit(): void { + this.app.scene.background = this.prevBg as never; this.panel.hide(); } diff --git a/src/scenes/fridge.ts b/src/scenes/fridge.ts index 822768c..57e7169 100644 --- a/src/scenes/fridge.ts +++ b/src/scenes/fridge.ts @@ -13,6 +13,7 @@ import { FRIDGE_MUSHROOM_ID, } from '../sim/coldchain'; import { el, Panel } from '../ui/hud'; +import { loadBackdrop } from './props'; /** A drop target on the fridge front: a rectangle mapped to (zone, shelf). */ interface Bay { @@ -65,6 +66,9 @@ export class FridgeView implements View { onDone: ((result: ReturnType & { store: ColdStore }) => void) | null = null; + private bgTex = loadBackdrop('/assets/img/bg_coldroom.png'); + private prevBg: unknown = null; + constructor(private app: App) { this.buildScenery(); this.panel = new Panel('fridge-panel'); @@ -177,9 +181,12 @@ export class FridgeView implements View { } enter(): void { + this.prevBg = this.app.scene.background; + this.app.scene.background = this.bgTex; this.panel.show(); } exit(): void { + this.app.scene.background = this.prevBg as never; this.panel.hide(); } diff --git a/src/scenes/grill.ts b/src/scenes/grill.ts index 536370d..a6acf4b 100644 --- a/src/scenes/grill.ts +++ b/src/scenes/grill.ts @@ -18,6 +18,7 @@ import { } from '../sim/charcoal'; import { newOutdoorEnv } from '../sim/heatsource'; import { el, Panel } from '../ui/hud'; +import { loadBackdrop } from './props'; const GRATE_Y = 0.5; const GRATE_W = 3.6; @@ -56,6 +57,9 @@ export class GrillView implements View { onDone: ((result: ReturnType) => void) | null = null; + private bgTex = loadBackdrop('/assets/img/bg_grill.png'); + private prevBg: unknown = null; + constructor(private app: App) { this.buildScenery(); const n = 48; @@ -89,7 +93,7 @@ export class GrillView implements View { private buildScenery(): void { const ground = new THREE.Mesh( - new THREE.BoxGeometry(30, 0.4, 20), + new THREE.BoxGeometry(8, 0.4, 5), new THREE.MeshStandardMaterial({ color: 0x5a6b3e, roughness: 0.95 }), ); ground.position.y = -0.2; @@ -155,9 +159,12 @@ export class GrillView implements View { } enter(): void { + this.prevBg = this.app.scene.background; + this.app.scene.background = this.bgTex; this.panel.show(); } exit(): void { + this.app.scene.background = this.prevBg as never; this.panel.hide(); } diff --git a/src/scenes/pan.ts b/src/scenes/pan.ts index d00bb7b..8c0d32d 100644 --- a/src/scenes/pan.ts +++ b/src/scenes/pan.ts @@ -17,6 +17,7 @@ import { } from '../sim/pan'; import { newIndoorEnv } from '../sim/heatsource'; import { el, Panel } from '../ui/hud'; +import { loadBackdrop } from './props'; import { loadProp } from './assets'; const PAN_Y = 0.55; @@ -49,6 +50,9 @@ export class PanView implements View { onDone: ((result: ReturnType) => void) | null = null; + private bgTex = loadBackdrop('/assets/img/bg_stove.png'); + private prevBg: unknown = null; + constructor(private app: App) { this.buildScenery(); this.panel = new Panel('pan-panel'); @@ -68,7 +72,7 @@ export class PanView implements View { private buildScenery(): void { const bench = new THREE.Mesh( - new THREE.BoxGeometry(24, 0.4, 12), + new THREE.BoxGeometry(9, 0.4, 6), new THREE.MeshStandardMaterial({ color: 0x3a3a3e, roughness: 0.7, metalness: 0.2 }), ); bench.position.y = -0.2; @@ -149,9 +153,12 @@ export class PanView implements View { } enter(): void { + this.prevBg = this.app.scene.background; + this.app.scene.background = this.bgTex; this.panel.show(); } exit(): void { + this.app.scene.background = this.prevBg as never; this.panel.hide(); } diff --git a/src/scenes/poach.ts b/src/scenes/poach.ts index c69f938..f8043bd 100644 --- a/src/scenes/poach.ts +++ b/src/scenes/poach.ts @@ -20,6 +20,7 @@ import { YOLK_TREMBLE, } from '../sim/poach'; import { el, Panel } from '../ui/hud'; +import { loadBackdrop } from './props'; const POT_Y = 0.55; const POT_R = 1.15; @@ -60,6 +61,9 @@ export class PoachView implements View { onDone: ((result: ReturnType) => void) | null = null; + private bgTex = loadBackdrop('/assets/img/bg_pot.png'); + private prevBg: unknown = null; + constructor(private app: App) { this.buildScenery(); this.panel = new Panel('poach-panel'); @@ -79,7 +83,7 @@ export class PoachView implements View { private buildScenery(): void { const bench = new THREE.Mesh( - new THREE.BoxGeometry(24, 0.4, 12), + new THREE.BoxGeometry(9, 0.4, 6), new THREE.MeshStandardMaterial({ color: 0x3a3a3e, roughness: 0.7, metalness: 0.2 }), ); bench.position.y = -0.2; @@ -188,9 +192,12 @@ export class PoachView implements View { } enter(): void { + this.prevBg = this.app.scene.background; + this.app.scene.background = this.bgTex; this.panel.show(); } exit(): void { + this.app.scene.background = this.prevBg as never; this.panel.hide(); } diff --git a/src/scenes/props.ts b/src/scenes/props.ts index 0c463d6..b86351e 100644 --- a/src/scenes/props.ts +++ b/src/scenes/props.ts @@ -196,3 +196,12 @@ export function makeBench(): THREE.Group { g.add(wall); return g; } + +/** A station's blurred backdrop, served as the scene BACKGROUND (screen-space) + * — the top-down cameras never see a far wall, but every uncovered pixel + * becomes horizon this way. Swap it in on enter(), restore on exit(). */ +export function loadBackdrop(url: string): THREE.Texture { + const tex = new THREE.TextureLoader().load(assetUrl(url)); + tex.colorSpace = THREE.SRGBColorSpace; + return tex; +} diff --git a/src/scenes/steakboard.ts b/src/scenes/steakboard.ts index 30c2584..a878506 100644 --- a/src/scenes/steakboard.ts +++ b/src/scenes/steakboard.ts @@ -12,6 +12,7 @@ import { type Doneness, } from '../sim/steak'; import { el, Panel } from '../ui/hud'; +import { loadBackdrop } from './props'; const BOARD_Y = 0.06; const STEAK_W = 1.9; @@ -52,6 +53,9 @@ export class SteakBoardView implements View { onDone: ((result: ReturnType) => void) | null = null; + private bgTex = loadBackdrop('/assets/img/bg_butcher.png'); + private prevBg: unknown = null; + constructor(private app: App) { this.buildScenery(); this.panel = new Panel('steak-panel'); @@ -71,7 +75,7 @@ export class SteakBoardView implements View { private buildScenery(): void { const bench = new THREE.Mesh( - new THREE.BoxGeometry(24, 0.4, 12), + new THREE.BoxGeometry(9, 0.4, 6), new THREE.MeshStandardMaterial({ color: 0x4a3524, roughness: 0.85 }), ); bench.position.y = -0.2; @@ -147,9 +151,12 @@ export class SteakBoardView implements View { } enter(): void { + this.prevBg = this.app.scene.background; + this.app.scene.background = this.bgTex; this.panel.show(); } exit(): void { + this.app.scene.background = this.prevBg as never; this.panel.hide(); }