Martin Bauer
2a629faf50
Two kids, two looks: ?theme=dolphin or ?theme=dinosaur picks one, and the choice is remembered in the browser so the installed home-screen app keeps it. Everything that differs per child lives in one Skin object per file under web/src/lib/skins/; layout and feature toggles in lib/theme.ts stay shared. The dolphin renders pixel-identical to before. The hardcoded sea hues (210 music, 175 typing game, 340 accent) are now CSS variables written once at startup, and the Gecko-friendly sRGB gradient stops come from the skin. The dinosaur is jungle green with a lava-orange accent, its own mascot, icons, manifest and browser colour. Nothing underwater is left in the dinosaur skin: leaves instead of bubbles (play-view canvas, room page, typing game), a walking mascot, lava blobs in the bubble game, a hatching egg instead of the treasure chest, dino pets that walk or fly, a prehistoric speed ladder with the T-Rex as the hero rung, and renamed games and light colours. Pets and ladder rungs are keyed by the backend's existing ids, used as slots, so the backend and save format are unchanged. Pets show as emoji until drawings exist. python-backend/.gitignore: ignore tippen-curriculum-dino.yml, the dino device's personal curriculum, like the original. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
/** The three transport buttons, at two sizes. The glyphs are CSS shapes, as in the
|
|
* mockup - no icon font to load on a device that boots offline. */
|
|
|
|
interface Props {
|
|
playing: boolean;
|
|
onToggle: () => void;
|
|
onNext: () => void;
|
|
onPrevious: () => void;
|
|
/** Side length of the skip buttons; the play button scales from it. */
|
|
size: number;
|
|
gap: number;
|
|
}
|
|
|
|
export function Transport({ playing, onToggle, onNext, onPrevious, size, gap }: Props) {
|
|
const glyph = Math.round(size * 0.33);
|
|
const bar = Math.max(4, Math.round(size * 0.085));
|
|
const playSize = Math.round(size * 1.26);
|
|
const playBar = Math.max(6, Math.round(playSize * 0.1));
|
|
const playGlyph = Math.round(playSize * 0.37);
|
|
|
|
return (
|
|
<div style={{ display: "flex", alignItems: "center", gap }}>
|
|
<button
|
|
className="round"
|
|
onClick={onPrevious}
|
|
aria-label="Vorheriger Titel"
|
|
style={{ width: size, height: size, background: "oklch(30% 0.04 var(--hue))" }}
|
|
>
|
|
<span style={{ display: "flex", alignItems: "center", gap: 2 }}>
|
|
<span style={{ width: bar, height: glyph, borderRadius: 1, background: "#fff" }} />
|
|
<span
|
|
style={{
|
|
width: glyph,
|
|
height: glyph,
|
|
background: "#fff",
|
|
clipPath: "polygon(100% 0%, 100% 100%, 0% 50%)",
|
|
}}
|
|
/>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
className="round"
|
|
onClick={onToggle}
|
|
aria-label={playing ? "Pause" : "Abspielen"}
|
|
style={{
|
|
width: playSize,
|
|
height: playSize,
|
|
background: "var(--accent)",
|
|
boxShadow: "0 6px 20px oklch(70% 0.16 var(--accent-hue) / .5)",
|
|
}}
|
|
>
|
|
{playing ? (
|
|
<span style={{ display: "flex", gap: playBar * 0.8 }}>
|
|
<span
|
|
style={{ width: playBar, height: playGlyph, borderRadius: 2, background: "#fff" }}
|
|
/>
|
|
<span
|
|
style={{ width: playBar, height: playGlyph, borderRadius: 2, background: "#fff" }}
|
|
/>
|
|
</span>
|
|
) : (
|
|
<span
|
|
style={{
|
|
width: playGlyph,
|
|
height: playGlyph,
|
|
background: "#fff",
|
|
clipPath: "polygon(6% 0%, 100% 50%, 6% 100%)",
|
|
}}
|
|
/>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
className="round"
|
|
onClick={onNext}
|
|
aria-label="Nächster Titel"
|
|
style={{ width: size, height: size, background: "oklch(30% 0.04 var(--hue))" }}
|
|
>
|
|
<span style={{ display: "flex", alignItems: "center", gap: 2 }}>
|
|
<span
|
|
style={{
|
|
width: glyph,
|
|
height: glyph,
|
|
background: "#fff",
|
|
clipPath: "polygon(0% 0%, 0% 100%, 100% 50%)",
|
|
}}
|
|
/>
|
|
<span style={{ width: bar, height: glyph, borderRadius: 1, background: "#fff" }} />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|