// leyend-screens.jsx — the flow screens (ChainZoku-inspired) // Exported: WelcomeScreen, QuizScreen, SeekScreen, RevealScreen, QuestScreen, // CompleteScreen, ShareScreen, JournalScreen function Chevron({ dir = 'left' }) { return ( ); } function Check() { return ; } function TopBar({ onBack, label, right }) { return (
{onBack && }
{label &&
{label}
}
{right}
); } // ───────────────────────── Welcome ───────────────────────── function WelcomeScreen({ onBegin, onSignIn }) { return (
Legend
Take a side. Live a legend.

The universe deals you a quest. You decide if you have the nerve to live it.

Mint your legend Download desktop app
); } // ───────────────────────── Sign in ───────────────────────── function SignInScreen({ onContinue, onBack }) { const [name, setName] = React.useState(''); const submit = () => { const v = name.trim(); if (v) onContinue(v); }; return (
Welcome back

{'Reclaim your\npath'}

Speak the name on your legend to return to your constellation.

> setName(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && submit()} />
Enter your path ); } // ───────────────────────── Quiz ───────────────────────── function QuizScreen({ onComplete, onBack }) { const [step, setStep] = React.useState(0); const [answers, setAnswers] = React.useState({}); const [legend, setLegend] = React.useState(''); const [age, setAge] = React.useState(QUIZ.find((q) => q.kind === 'slider')?.default || 26); const q = QUIZ[step]; const last = step === QUIZ.length - 1; const answered = q.kind === 'slider' ? true : q.kind === 'text' ? q.optional || legend.trim() : answers[q.id] != null; const choose = (opt, idx) => setAnswers((a) => ({ ...a, [q.id]: opt.label, [q.id + '_i']: idx })); const next = () => { if (!answered) return; if (last) { const final = { ...answers, age }; if (legend.trim()) final.legend = legend.trim(); onComplete(final); } else setStep((s) => s + 1); }; const back = () => {if (step === 0) onBack && onBack();else setStep((s) => s - 1);}; return (

{q.prompt}

{q.note}

{q.kind === 'slider' &&
{age} {q.unit}
setAge(+e.target.value)} />
{q.min}{q.max}
} {q.kind === 'choice' && q.options.map((opt, idx) => { const sel = answers[q.id + '_i'] === idx; return ( ); })} {q.kind === 'binary' &&
{q.options.map((opt, idx) => { const sel = answers[q.id + '_i'] === idx; return ( ); })}
} {q.kind === 'text' &&
> setLegend(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && next()} />
}
{last ? 'Consult the universe' : q.kind === 'text' ? 'Skip for now' : 'Continue'} ); } // ───────────────────────── Seek (trigger) ───────────────────────── function SeekScreen({ triggerType, answers, exclude, onReveal, onBack }) { const sub = triggerType === 'card' ? 'Lay your hand on the spread. One card will rise.' : triggerType === 'phone' ? 'A signal is reaching for you across the dark.' : 'Cast the die. Where it lands, your path begins.'; return (

Ask, and the
universe answers

{sub}

); } // ───────────────────────── Reveal ───────────────────────── function RevealScreen({ quest, onAccept, onReroll }) { return (
{quest.omen}
{quest.sigil}

{quest.title}

{quest.essence}

Accept the quest
); } // ───────────────────────── Quest in progress ───────────────────────── function QuestScreen({ quest, done, onToggle, onComplete, onBack }) { const count = done.filter(Boolean).length; return (
{quest.sigil}

{quest.title}

{quest.theme}

{quest.essence}

The Rituals{String(count).padStart(2, '0')} / {String(quest.rituals.length).padStart(2, '0')}
{quest.rituals.map((r, i) => )}
{count === quest.rituals.length ? 'Seal this legend' : 'I have lived this'} ); } // ───────────────────────── Proof of legend ───────────────────────── const PROOF_ACCEPT = 'image/*,video/*,.png,.jpg,.jpeg,.gif,.webp,.heic,.mp4,.mov,.m4v,.webm,.avi,.mkv'; function isVideoFile(file) { return (file.type && file.type.startsWith('video/')) || /\.(mp4|mov|m4v|webm|avi|mkv)$/i.test(file.name || ''); } // Read one picked file into a { src, kind } proof item. Images are downscaled to // a jpeg data URL; videos are kept as-is (data URL) so they can play in previews. function readProofFile(file) { return new Promise((resolve) => { const reader = new FileReader(); reader.onerror = () => resolve(null); if (isVideoFile(file)) { reader.onload = (ev) => resolve({ src: ev.target.result, kind: 'video' }); reader.readAsDataURL(file); return; } reader.onload = (ev) => { const image = new Image(); image.onload = () => { const max = 900, sc = Math.min(1, max / Math.max(image.width, image.height)); const c = document.createElement('canvas'); c.width = Math.round(image.width * sc); c.height = Math.round(image.height * sc); c.getContext('2d').drawImage(image, 0, 0, c.width, c.height); let out; try { out = c.toDataURL('image/jpeg', 0.82); } catch (err) { out = ev.target.result; } resolve({ src: out, kind: 'image' }); }; image.onerror = () => resolve({ src: ev.target.result, kind: 'image' }); image.src = ev.target.result; }; reader.readAsDataURL(file); }); } // Normalize proof (array of items, or a legacy single data-url string) to items. function proofItems(proof) { if (Array.isArray(proof)) return proof.filter(Boolean); if (proof) return [{ src: proof, kind: 'image' }]; return []; } function proofForDisplay(proof, outputUrl) { const items = proofItems(proof); if (items.length) return items; if (outputUrl) return [{ src: outputUrl, kind: 'video' }]; return []; } function lySharePageUrl(jobId) { const bp = LY_BASE || ''; const origin = typeof window !== 'undefined' ? window.location.origin : ''; return `${origin}${bp}/s/${jobId}`; } function ProofMedia({ item, alt }) { if (!item) return null; if (item.kind === 'video') { return