// ═════════════════════════════════════════════════════════════════════════════ // MindForge · Layer 4 · play/screens.jsx // ───────────────────────────────────────────────────────────────────────────── // Role : Every play-side screen: HomeScreen, PlayScreen, the question // components (mc_fr_kr, mc_kr_fr, image, audio, typing, // find_photo, flashcard), RevealScreen, SummaryScreen, // GameOverScreen, plus per-question helpers (useMcChoice, // AttributeRenderer, CustomFieldDisplay, MediaDemonstration). // Loaded : #7 // Reads : window.{ React, MF, OptionRow, CardArt, Waveform, XPFloat, // Sparkles, parseVideoEmbed, useMediaURL, formatSeconds, // answerMatches, attributeLabel, attributeIcon, // effectiveQuizSides, CUSTOM_FIELD_TYPE_ICONS, INTERVAL_BY_CODE, // RevealPdfRegion, useDeck } // Exposes : window.{ HomeScreen, PlayScreen, RevealScreen, SummaryScreen, // GameOverScreen, and each Q* component } // See also : docs/ARCHITECTURE.md §"Play state machine" // ═════════════════════════════════════════════════════════════════════════════ // // MindForge — full screens (Home, Play, Reveal, Summary, GameOver) // ─────────────── Shared question helpers ─────────────── // All the multiple-choice question types (FR→KR, KR→FR, image, audio, video, // find-photo) share the exact same "tap an option, lock the board, reveal // after a short beat" behaviour. useMcChoice centralises it so each question // component only has to describe what its prompt and options look like. // // const { picked, pick, stateFor } = useMcChoice(q, onAnswer); // // picked null until the user taps, then the chosen option index // pick(i) locks the board and, after `delay` ms, calls // onAnswer(isCorrect, chosenOption) // stateFor(i) the OptionRow visual state: 'idle' before a pick, then // 'correct' / 'wrong' / 'dim' to grade the board afterwards const useMcChoice = (q, onAnswer, delay = 600) => { const [picked, setPicked] = useState(null); const pick = (i) => { if (picked != null) return; // ignore taps once the board is locked setPicked(i); setTimeout(() => onAnswer(q.options[i].id === q.card.id, q.options[i]), delay); }; const stateFor = (i) => { if (picked == null) return 'idle'; if (q.options[i].id === q.card.id) return 'correct'; // always green the answer if (i === picked) return 'wrong'; // red the wrong pick return 'dim'; // fade the rest }; return { picked, pick, stateFor }; }; // The scrolling body every question renders inside. Vertical padding differs // slightly per question (hence the parameter); everything else — iOS momentum // scroll, contained overscroll, hidden scrollbar (.mf-scroll) — is constant. const qScrollStyle = (padding = '8px 22px 24px') => ({ flex: 1, display: 'flex', flexDirection: 'column', padding, minHeight: 0, overflowY: 'auto', WebkitOverflowScrolling: 'touch', overscrollBehavior: 'contain', }); // ─────────────── HOME ─────────────── const HomeScreen = ({ profile, deck, decks, onSelectDeck, onStart, onEdit }) => { const [mode, setMode] = useState('daily'); const activeDeck = deck || DECK_TKD; const previewCard = activeDeck.cards[3] || activeDeck.cards[0] || DECK_TKD.cards[0]; const deckList = decks || []; const canPickDeck = deckList.length > 0 && typeof onSelectDeck === 'function'; // No cards in the active deck → swap the run picker for an empty-state that // routes the user straight to the editor (which hosts both Importer + Créer). const isEmpty = activeDeck.cards.length === 0; const deckLabel = (d) => d.builtin ? 'Test général' : d.name; const deckIcon = (d) => d.builtin ? '📚' : d.type === 'manual' ? '📝' : '✨'; const modes = [ { id: 'quick', label: 'Quick', sub: '5 cards · MC', time: '~2 min', n: 5 }, { id: 'daily', label: 'Daily', sub: '24 mixed · with rating', time: '~10 min', n: 24 }, { id: 'survival', label: 'Survival', sub: '3 lives · combo', time: '∞', n: '∞' }, ]; return (
{/* App header */}
MindForge
{onEdit && ( )} 🔥{profile.streak} d
L{profile.level}
{/* Hero greeting + XP bar */}
Welcome back,
Ready for a run?
{profile.xp.toLocaleString()} / {profile.nextLevelXp.toLocaleString()}
{/* Training picker — choose a deck (or the general "Test général") */} {canPickDeck && (
Entraînement {onEdit && ( )}
{deckList.map(d => { const on = d.id === activeDeck.id; return ( ); })} {onEdit && ( )}
)} {/* Empty deck → import / create CTA (no run picker until cards exist) */} {isEmpty && } {/* Deck card */} {!isEmpty && (
Active deck
{activeDeck.name}
{activeDeck.cards.length} cards · 3 mastered
24%
)} {/* Mode picker */} {!isEmpty && (
Pick your run
{modes.map(m => { const on = mode === m.id; return (
setMode(m.id)} className="mf-tap" style={{ padding:'14px 16px', borderRadius:14, background: on ? MF.card2 : MF.card, border:`1.5px solid ${on ? MF.purple : MF.line}`, boxShadow: on ? `0 0 0 1px ${MF.purple}, 0 8px 24px rgba(167,139,250,.12)` : 'none', display:'flex', alignItems:'center', gap:14, }}>
{on && }
{m.badge && {m.badge}} {m.label}
{m.sub}
{m.time}
{m.id==='survival' &&
HIGH XP
}
); })}
)} {/* Play CTA */} {!isEmpty && (
Earn up to +{mode==='survival'?500:mode==='daily'?180:80} XP · keep the streak alive
)}
); }; // ─────────────── Empty-deck call to action ─────────────── // Shown on Home when the active deck has zero cards. Both buttons route to the // editor (onEdit) — the editor toolbar hosts the real "Importer" file picker // and "+ Ajouter" actions; there's nothing to play until cards exist. const EmptyDeckCTA = ({ deckName, onEdit }) => { if (typeof onEdit !== 'function') return null; return (
🃏
Ce deck est vide
{deckName ? <>{deckName} n'a aucune carte. : null} Importe un fichier ou crée tes premières cartes pour lancer une partie.
); }; // ─────────────── PLAY (delegates to question renderer) ─────────────── const PlayScreen = ({ session, onAnswer, onClose, surviveTimer }) => { const q = session.queue[session.idx]; if (!q) return null; const total = session.mode === 'survival' ? Math.max(session.idx + 1, 5) : session.queue.length; return (
{q.type === 'mc_fr_kr' && } {q.type === 'mc_kr_fr' && } {q.type === 'image' && } {q.type === 'typing' && } {q.type === 'audio' && } {q.type === 'find_photo' && } {q.type === 'flashcard' && }
{session.mode === 'survival' && surviveTimer != null && ( )}
); }; // ─────────────── Question: French → Korean (MC) ─────────────── const QFrToKr = ({ q, onAnswer }) => { const { pick, stateFor } = useMcChoice(q, onAnswer); return (
French → Korean
{q.card.fr}
{q.options.map((o, i) => ( pick(i)} /> ))}
); }; // ─────────────── Question: Korean → French (MC) ─────────────── const QKrToFr = ({ q, onAnswer }) => { const { pick, stateFor } = useMcChoice(q, onAnswer); return (
Korean → French
{q.card.kr}
{q.card.ro}
{q.options.map((o, i) => ( pick(i)}/> ))}
); }; // ─────────────── Question: Image identification ─────────────── const QImage = ({ q, onAnswer }) => { const { pick, stateFor } = useMcChoice(q, onAnswer); return (
Identify the technique
{q.options.map((o, i) => ( pick(i)}/> ))}
); }; // ─────────────── Question: Audio dictation ─────────────── const QAudio = ({ q, onAnswer }) => { const { pick, stateFor } = useMcChoice(q, onAnswer); const [playing, setPlaying] = useState(false); const [plays, setPlays] = useState(0); useEffect(() => { // auto-play once on mount setPlaying(true); setPlays(1); const t = setTimeout(() => setPlaying(false), 1400); return () => clearTimeout(t); }, []); const replay = () => { if (plays >= 3 || playing) return; setPlaying(true); setPlays(p => p + 1); setTimeout(() => setPlaying(false), 1400); }; return (
Listen · what did you hear?
Replays {plays} / 3
{q.options.map((o, i) => ( pick(i)}/> ))}
); }; // ─────────────── Question: Typing ─────────────── const QTyping = ({ q, onAnswer }) => { const [value, setValue] = useState(''); const [submitted, setSubmitted] = useState(null); // null | 'correct' | 'wrong' const inputRef = useRef(); useEffect(() => { const t = setTimeout(() => inputRef.current?.focus(), 100); return () => clearTimeout(t); }, []); const submit = () => { if (submitted) return; const ok = answerMatches(value, q.card); setSubmitted(ok ? 'correct' : 'wrong'); setTimeout(() => onAnswer(ok, { ro: value }), 700); }; const giveUp = () => { if (submitted) return; setSubmitted('wrong'); setTimeout(() => onAnswer(false, { ro: '' }), 600); }; const borderColor = submitted === 'correct' ? MF.good : submitted === 'wrong' ? MF.bad : value ? MF.purple : MF.line; return (
Type the Korean (romaja)
{q.card.fr}
Your answer
!submitted && setValue(e.target.value)} onKeyDown={e => e.key === 'Enter' && submit()} placeholder="dollyo chagi…" autoCapitalize="none" autoCorrect="off" spellCheck={false} /> {submitted === 'correct' && (
✓ {q.card.ro} · {q.card.kr}
)} {submitted === 'wrong' && (
✕ correct was {q.card.ro} · {q.card.kr}
)}
romaja accepted spaces ignored
); }; // ─────────────── Survival countdown bar ─────────────── const SurvivalTimer = ({ seconds }) => { const max = 10; const pct = Math.max(0, Math.min(100, (seconds / max) * 100)); const low = seconds <= 3; return (
); }; // ─────────────── Question: Korean name → pick the right PHOTO (visual MC) ─────────────── const QFindPhoto = ({ q, onAnswer }) => { const { picked, pick, stateFor } = useMcChoice(q, onAnswer, 700); // Photo grid maps the shared MC state to its own border/ring colours. const colorFor = (state) => ({ idle: { border: MF.line, ring: 'transparent' }, correct: { border: MF.good, ring: MF.good }, wrong: { border: MF.bad, ring: MF.bad }, dim: { border: MF.line, ring: 'transparent' }, }[state]); return (
Quelle photo correspond ?
{q.card.kr}
{q.card.fr}
{q.options.map((o, i) => { const state = stateFor(i); const col = colorFor(state); const isDim = state === 'dim'; return ( ); })}
); }; // ─────────────── Question: Flashcard (per-card Q/A composition) ─────────────── // // Generic flashcard: render every attribute in q.sides.question as the prompt, // the user self-rates, then the reveal shows every attribute in // q.sides.answer. Backed by the per-card Q/A picker in the editor. // Renders a single card attribute by its key. `attrKey` is one of the core // attributes ('photo' | 'fr' | 'kr' | 'ro' | 'cat' | 'tags') or a custom-field // reference 'custom:'. Used both for the flashcard prompt and for the // reveal answer side; `big` scales the typography up for the (larger) prompt. // Returns null when the attribute is empty or its custom field no longer exists. const AttributeRenderer = ({ attrKey, card, customFields, big }) => { if (attrKey === 'photo') { return (
); } if (attrKey === 'fr') return (
{card.fr}
); if (attrKey === 'kr') return (
{card.kr}
); if (attrKey === 'ro') return (
{card.ro}
); if (attrKey === 'cat') return (
{card.cat}
); if (attrKey === 'tags') return (
{(card.tags || []).map(t => ( {t} ))}
); if (attrKey.startsWith('custom:')) { const fieldId = attrKey.slice(7); const field = (customFields || []).find(f => f.id === fieldId); if (!field) return null; const value = card.custom?.[field.id]; if (!value) return null; return ; } return null; }; // Dispatches a built-in field to the right reveal widget for its type. Kept // separate from AttributeRenderer so the type→widget routing lives in one place // (it's reused by MediaDemonstration below). const CustomFieldDisplay = ({ field, value }) => { if (field.type === 'video_url') return ; if (field.type === 'pdf_region') return ; return null; }; const QFlashcard = ({ q, onAnswer }) => { const [picked, setPicked] = useState(null); const sides = q.sides || { question: [], answer: [] }; // Image-only prompt → single "Reveal" affordance (no self-rate before the // reveal). The user looks at the photo, taps reveal, then rates in the // Daily rating screen (or just continues in Quick/Demo/Survival). const photoOnly = sides.question.length === 1 && sides.question[0] === 'photo'; const choose = (ok) => { if (picked != null) return; setPicked(ok); setTimeout(() => onAnswer(ok, q.card), 400); }; if (photoOnly) { return ( choose(true)} /> ); } return (
Identifie la technique
Rappelle-toi mentalement · la réponse s'affiche ensuite
{sides.question.map(key => ( ))}
); }; // ─────────────── Photo-only flashcard prompt ─────────────── // // Special case of QFlashcard when the user put only "photo" in the Question // column. The photo expands to fill every pixel between the in-screen header // and the reveal button, and tapping it requests fullscreen so the user can // study the technique up close before committing to a recall. const PhotoOnlyFlashcard = ({ card, picked, onReveal }) => { const photoRef = React.useRef(null); const goFullscreen = () => { const el = photoRef.current; if (!el) return; const fn = el.requestFullscreen || el.webkitRequestFullscreen || el.msRequestFullscreen; if (!fn) return; try { fn.call(el)?.catch?.((err) => console.warn('Fullscreen rejected:', err)); } catch (err) { console.warn('Fullscreen failed:', err); } }; return (
Identifie la technique
Tape l'image pour le plein écran · Révéler pour voir la réponse
{card.photo ? ( ) : ( // Card lacks an actual photo — keep the colored placeholder so the // quiz never falls into a blank black rectangle.
)} {card.photo && ( ⛶ Plein écran )}
); }; // ─────────────── Reveal: media demonstration block ─────────────── // Surfaces the two built-in fields attached to the answer card so the reveal // becomes a small study card: the demo video plays the technique and the PDF // region (Carte) shows the cropped diagram. Renders nothing if the card has // neither — preserves the original reveal layout. // Reveal block listing the card's non-empty built-in fields, each under a small // labelled header. Shown on the (non-flashcard) reveal. const MediaDemonstration = ({ card, customFields }) => { const fields = customFields || []; // Walk the schema in declared order so the field order is respected. const items = []; for (const f of fields) { const v = card?.custom?.[f.id]; if (!v) continue; items.push({ field: f, value: v }); } if (items.length === 0) return null; return (
{items.map(({ field, value }) => (
{field.type === 'video_url' ? '📺' : '📄'} {field.type === 'video_url' ? 'Démonstration · ' : ''} {field.name}
{field.type === 'video_url' && } {field.type === 'pdf_region' && }
))}
); }; // External-URL video: pasted into the card, auto-embeds at reveal time. // Appends autoplay=1 to the embed src, preserving any existing query or hash // fragment. Used after the user clicks Rejouer. const _withAutoplay = (src) => { if (!src) return src; const hashIdx = src.indexOf('#'); const head = hashIdx >= 0 ? src.slice(0, hashIdx) : src; const hash = hashIdx >= 0 ? src.slice(hashIdx) : ''; const sep = head.includes('?') ? '&' : '?'; return `${head}${sep}autoplay=1${hash}`; }; const RevealVideoUrl = ({ value }) => { const embed = parseVideoEmbed(value); // Bumping replayKey remounts the iframe / video element, which restarts // playback from the configured startSec (the URL params already encode it). // > 0 also flips the iframe src to include autoplay=1 so the player starts // immediately on remount (YouTube / Vimeo need the URL flag — they don't // accept play() calls from outside their JS API). const [replayKey, setReplayKey] = React.useState(0); const videoRef = React.useRef(null); if (!embed) { // Unknown host — fall back to a tap chip so the user still has access. return ( ↗{value} ); } const hasInterval = embed.startSec != null || embed.endSec != null; // For HTML5