60 lines
3.2 KiB
TypeScript
60 lines
3.2 KiB
TypeScript
import React from 'react';
|
||
import {ClipFigur, Figur, Kamera, type Posenfolge} from '../baukasten/figur';
|
||
import type {Gang} from '../baukasten/gang';
|
||
import {Vignette} from '../baukasten/helfer';
|
||
import {BODEN} from '../baukasten/orte';
|
||
import {Abenddunkel, GartenAbend, Laterne, WAND_VOLL, WandSchatten, laterneInNoasHand} from './teile';
|
||
|
||
// Gemeinsame Bühne für Szene 4–7: die drei an der Hauswand, die Laterne als einzige Lichtquelle.
|
||
// Lulu und Pino werfen ihren Schatten an die Wand (Noa nicht: ihr Bild enthält die Laterne samt Stab,
|
||
// deren Schatten wäre falsch – die Lampe ist ja das Licht); er nimmt dieselbe Pose, Drehung und Stauchung an
|
||
// (nickt Lulu, nickt ihr Schatten mit). Feste Plätze, damit die Szenen zusammenpassen.
|
||
|
||
export const PLATZ = {noa: 700, pino: 880, lulu: 1180, laterneBoden: {x: 560, y: BODEN - 56}};
|
||
|
||
export type Buehne = {
|
||
kam: {x: number; y: number; zoom: number};
|
||
laterne: {inHand: boolean; x?: number; y?: number; licht: number; schwung?: number};
|
||
noa: {pose: string | Posenfolge; x?: number};
|
||
pino: {pose: string | Posenfolge; x: number; gang?: Gang; drehung?: number; y?: number; k?: number; versatz?: number};
|
||
lulu: {pose: string | Posenfolge; x?: number; hell?: number; drehung?: number; stauchY?: number; k?: number};
|
||
wandExtra?: React.ReactNode; // z. B. Hand-Schatten
|
||
f: number;
|
||
};
|
||
|
||
export const Wandszene: React.FC<Buehne> = ({kam, laterne, noa, pino, lulu, wandExtra, f}) => {
|
||
const noaX = noa.x ?? PLATZ.noa;
|
||
const luluX = lulu.x ?? PLATZ.lulu;
|
||
const hand = laterneInNoasHand(noaX);
|
||
const lat = laterne.inHand ? {x: hand.x, y: hand.y} : {x: laterne.x ?? PLATZ.laterneBoden.x, y: laterne.y ?? PLATZ.laterneBoden.y};
|
||
const s = hand.s;
|
||
const kLulu = lulu.k ?? 1.12; // Lulus Schatten: etwas größer als Lulu, Kopf und Hals passen an die Wand
|
||
const kPino = pino.k ?? 1 + 220 / Math.max(80, Math.abs(pino.x - lat.x));
|
||
const hell = lulu.hell ?? 1;
|
||
const pinoGeht = pino.gang?.geht(f);
|
||
return (
|
||
<>
|
||
<Kamera {...kam}>
|
||
<GartenAbend wandVoll />
|
||
{/* Schatten an der Wand (hinter den Figuren) */}
|
||
<WandSchatten pose={lulu.pose} x={luluX} licht={lat} hoehe={340 * 2.05} k={kLulu} wand={WAND_VOLL} drehung={lulu.drehung} stauchY={lulu.stauchY} />
|
||
<WandSchatten pose={pinoGeht ? 'pino_A6_blick-rechts' : pino.pose} x={pino.x} licht={lat} hoehe={340 * 0.4} k={kPino} wand={WAND_VOLL} drehung={pino.drehung} versatz={pino.versatz} />
|
||
{wandExtra}
|
||
<Figur pose={lulu.pose} x={luluX} y={BODEN - 6} drehung={lulu.drehung} stauchY={lulu.stauchY} filter={hell < 1 ? `brightness(${hell})` : undefined} />
|
||
<Figur pose={noa.pose} x={noaX} y={BODEN} />
|
||
{laterne.inHand ? (
|
||
<Laterne x={lat.x} y={lat.y} s={s} licht={laterne.licht} schwung={laterne.schwung ?? 0} stab={false} />
|
||
) : (
|
||
<Laterne x={lat.x} y={lat.y} s={s} licht={laterne.licht} stab={false} />
|
||
)}
|
||
{pinoGeht && pino.gang ? (
|
||
<ClipFigur name="pino_C1_gehen-schleife" start={pino.gang.clipStart} tempo={pino.gang.tempo} schleife spiegeln={pino.gang.spiegeln} x={pino.gang.x(f)} y={BODEN} />
|
||
) : (
|
||
<Figur pose={pino.pose} x={pino.x} y={pino.y ?? BODEN} drehung={pino.drehung} />
|
||
)}
|
||
<Abenddunkel licht={lat} staerke={0.42} radius={640} />
|
||
</Kamera>
|
||
<Vignette />
|
||
</>
|
||
);
|
||
};
|