);
}
// ── Stories data ──────────────────────────────────────────────
// `rootScene` (optional) overrides the default 'start' scene-key used by
// DemoApp.openStory(). `badge` is rendered as a small ribbon on the
// HomeScreen featured + shelf cards.
const STORIES = [
// ── Variácie product: 3 real audiobooks with authored mid-story
// branches. Each plays the original recording, pauses at a clean
// sentence boundary, asks a scene-aware Slovak question, plays an
// ack MP3 for the picked branch, then continues.
// ── EN Pippi core: the three flagship books, authored English
// adaptations of our own licensed narration (see inputs/en-tales/
// *-script.json), rendered in the clone voice with the same
// audited split structure as their SK originals.
{
id: 'circus', title: 'Pippi Goes to the Circus', art: StoryFairy, color: PIPI.pink,
mood: 'classic', age: '4–8', len: '10 min', lang: 'en',
rootScene: 'circus_book', badge: 'Most loved',
lesson: 'The best trick of all is noticing other people.',
product: 'variations',
},
{
id: 'outing', title: 'Pippi Goes on an Outing', art: StorySea, color: PIPI.blue,
mood: 'adventure', age: '4–8', len: '9 min', lang: 'en',
rootScene: 'outing_book',
lesson: 'An adventure is best when it is shared.',
product: 'variations',
},
{
id: 'burglars', title: 'Pippi and the Burglars', art: StoryRobot, color: PIPI.lilac,
mood: 'exciting', age: '5–8', len: '8 min', lang: 'en',
rootScene: 'burglars_book',
lesson: 'Courage is knowing how to stay calm.',
product: 'variations',
},
// ── First English book. Public-domain source (Joseph Jacobs, 1890), so unlike
// the three Pipi books below it carries no IP blocker and is launchable.
{
id: 'goldilocks', title: 'Goldilocks and the Three Bears', art: StoryDragon, color: PIPI.green, lang: 'en',
mood: 'classic', age: '4-8', len: '4 min',
rootScene: 'goldilocks_book', badge: 'New',
lesson: 'Asking first beats sneaking in, and sorry is a brave word.',
product: 'variations',
},
{
id: 'cirkus', title: 'Pipi ide do cirkusu', art: StoryFairy, color: PIPI.pink, lang: 'sk',
mood: 'klasika', age: '4–8', len: '15 min',
rootScene: 'cirkus_book', badge: 'Najobľúbenejšie',
lesson: 'Najkrajší trik je všimnúť si druhých.',
product: 'variations',
},
{
id: 'vylet', title: 'Pipi usporiada výlet', art: StorySea, color: PIPI.blue, lang: 'sk',
mood: 'dobrodružné', age: '4–8', len: '14 min',
rootScene: 'vylet_book',
lesson: 'Dobrodružstvo je lepšie, keď sa rozdelí.',
product: 'variations',
},
{
id: 'zlodeji', title: 'Pipi navštívia zlodeji', art: StoryRobot, color: PIPI.lilac, lang: 'sk',
mood: 'napínavé', age: '5–8', len: '12 min',
rootScene: 'zlodeji_book',
lesson: 'Odvaha je vedieť ostať pokojný.',
product: 'variations',
},
// Cirkus-test: dense-splits 5-min sandbox version of cirkus, used to
// iterate quickly on voice/classifier behaviour without sitting
// through the full 15:38 audiobook. Shares the cirkus source MP3
// but with 6 splits in the first 5 minutes and endAtSec=300.
{
id: 'cirkusTest', title: 'Cirkus test (5 min)', art: StoryFairy, color: PIPI.yellow, lang: 'sk',
mood: 'test', age: 'dev', len: '5 min',
rootScene: 'cirkusTest_book', badge: 'TEST',
lesson: 'Rýchla iterácia pre dev.',
product: 'variations',
dev: true,
},
// ── Custom product: one interactive book where every decision is
// fully AI-generated. The 3-round custom chain: scene → open
// question → child speaks → AI extends; ×3 rounds, lesson only at
// the end of the third round (not per round).
{ id: 'vila', title: 'Pipi a tajomstvo vily', art: StoryFairy, color: PIPI.lilac, mood: 'interaktívne', age: '4–7', len: '~5 min', lang: 'sk',
lesson: 'Čo poviete, to sa stane. Vy ste rozprávkár.',
product: 'custom' },
].filter((s) => !s.dev || (typeof window !== 'undefined' && (
// dev-only entries (cirkusTest) stay hidden from real users — same
// switches as demo-app.jsx SHOW_DEV_BOOKS, evaluated here too because
// this list renders the cards even when the scene graph is gated.
/[?&]dev=1(\b|&|$)/.test(window.location.search) ||
(() => { try { return localStorage.getItem('pipi.devBooks') === '1'; } catch { return false; } })()
)));
// Which stories a given UI language shows. Book audio is per-language
// (an EN child cannot follow SK narration), so the shelf filters hard
// instead of showing translated cards for unplayable books.
function visibleStories(lang) {
const want = lang === 'sk' ? 'sk' : 'en';
return STORIES.filter((s) => (s.lang || 'en') === want);
}
// ── Phone shell wrapper ───────────────────────────────────────
// Default: renders content inside the IOSDevice mockup (status bar,
// dynamic island, home indicator, rounded outer frame) — used on the
// landing's hero preview where the iPhone-shaped mockup is the point.
// bare={true}: drops the iPhone chrome and renders fullscreen — used
// by the demo on real mobile screens so the child gets a true full-
// screen app, not a tiny mockup inside a fake iPhone.
function PhoneShell({ children, label, sublabel, w = 402, h = 874, bare = false }) {
if (bare) {
return (
{children}
);
}
return (
{children}
);
}
// Phone status row (replaces iOS dark status — already in IOSDevice).
// Just a top header row inside the app.
function AppHeader({ greeting, sub, right = null }) {
return (
{greeting}
{sub &&
{sub}
}
{right}
);
}
// ── 1. HOME screen ────────────────────────────────────────────
// The content (header → greeting → featured → shelf → bedtime) lives
// inside a flex:1 / overflow-y:auto wrapper so it scrolls on small
// screens while the tab bar stays pinned to the bottom of the viewport.
// `t` is the caller's DEMO_STRINGS slice. It is optional because this same
// component doubles as the landing page's hero phone mock, which has no
// dictionary loaded — so every lookup carries an English default rather than
// leaving the mock blank.
function HomeScreen({ onOpen, onTab, showTabBar = true, resume = null, onResume = null, t = null, lang = 'en' }) {
const vis = visibleStories(lang);
const tx = (k, d) => (t && t[k]) || d;
// The demo passes a real per-kid `resume` ({ story, progress }); the
// landing hero preview passes nothing and falls back to the showcase.
const contStory = resume ? resume.story : vis[0];
const contProgress = resume ? resume.progress : 0.42;
const contOpen = resume && onResume ? onResume : () => onOpen(vis[0]);
return (
<>
}
/>
{/* Pipi greeting bubble */}
Pipi:{' '}
{tx('home_bubble', 'Today we are off to the enchanted wood. Will you help me?')}
{/* Continue listening — large featured card */}
{tx('home_continue', 'Continue listening')}
{/* Shelf */}
{tx('home_shelf', 'Story shelf')}
{tx('home_all', 'all →')}
{vis.slice(1).map(s => (
onOpen(s)}/>
))}
{/* tonight section — kept as a visible demo card so the hero phone
preview reads as a full app screen. */}
{tx('home_bedtime', 'Before bed')}
{tx('home_quiet_card_t', 'A quiet story with the moon')}
{tx('home_quiet_card_s', '12 min · no loud scenes')}
}>
{tx('home_play_btn', 'play')}
{/* Bottom breathing room so the last card isn't hugging the tab bar. */}
{/* end scrollable */}
{showTabBar && }
);
}
function StoryBadge({ label }) {
if (!label) return null;
return (
★ {label}
);
}
function FeaturedRow({ story, progress = 0.4, onOpen }) {
const Art = story.art;
return (
);
}
function ShelfCard({ story, onOpen }) {
const Art = story.art;
return (
{story.title}
{story.age} · {story.len}
);
}
// ── 2. PLAYER screen ──────────────────────────────────────────
function PlayerScreen({ story, playing, onTogglePlay, onBack, onAskChoice, progress = 0.42 }) {
const Art = story.art;
return (
<>
Kapitola 3 z 7
{/* Hero */}
{story.title}
rozpráva Pipi · {story.len}
{/* Timeline */}
7:38{'\u2605 voľba o 2 min'}-10:22
{/* Controls */}
{/* Try the listening state */}
▸ Skús voľbu
);
}
// ── 3. LISTENING state ────────────────────────────────────────
function ListeningScreen({ story, onCancel, onHeard }) {
const Art = story.art;
const [rings, setRings] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setRings(r => r + 1), 700);
return () => clearInterval(t);
}, []);
return (
<>
Pipi počúva…
{/* Big animated mic + pipi */}
{[0, 1, 2].map(i => (
))}
"Otvor dvere, alebo radšej uteč?"
Povedz odpoveď nahlas — alebo klikni na obrázok.
{/* Waveform visualization removed by request — the rings + Pipi already
say "listening", and the live bars implied "the browser is hearing
your voice" which we don't want in the child-facing flow. */}
Počul som ťa ✓ — vybrať
);
}
// ── 4. CHOICE moment ──────────────────────────────────────────
function ChoiceScreen({ story, onPick, onBack }) {
const choices = [
{ id: 'open', label: 'Otvor dvere', desc: 'Možno tam býva víla.', color: PIPI.green, Icon: () => },
{ id: 'run', label: 'Uteč preč', desc: 'Tam vnútri niečo škrabe.', color: PIPI.coral, Icon: () => },
{ id: 'knock', label: 'Zaklopaj', desc: 'Kto klope, ten je slušný.', color: PIPI.blue, Icon: () => },
];
return (
<>