/* * config/config.jsx — "בחירת תמונות" — the photo-set configuration tile. * * Roadmap Phase 0 (see docs/roadmap-child-photo-authoring.md). The child * (or parent) builds a custom photo set: exactly ONE illustration per * Hebrew letter, chosen from the gallery of everything in the collection. * * Rules: * - Gallery is grouped by THEME, and within a theme sorted by the * Hebrew alphabet (GAME_CONFIG.letterPool order). * - Tap a photo to choose it for its letter. * - Once a letter has a chosen photo, the OTHER photos of that same * letter gray out (the letter is settled). Tap the chosen one again * to free the letter and re-pick. * - The kid can CONTINUE only once all 22 letters are covered — or tap * "השלם אוטומטית" to let the program fill the remaining letters. * * Persistence: localStorage only for now (Phase 2 makes it survive across * devices). This file is fully self-contained: it READS shared/collection.js, * shared/game-config.js and shared/sounds.js but writes nothing outside * config/, so it cannot affect the rest of the suite or its tests. */ const SELECTION_KEY = "aleph-bet.photo-selection.v1"; // collection.js stores paths relative to its sibling images/ dir; the live // asset lives under assets/. Mirror theme-loader.js's resolution. function resolveFile(f) { return f && f.startsWith("images/") ? "assets/" + f : f; } const LETTERS = window.GAME_CONFIG.letterPool; // 22, in order const LETTER_NAMES = window.GAME_CONFIG.letterNames; const LETTER_INDEX = LETTERS.reduce((m, l, i) => { m[l] = i; return m; }, {}); // Flatten the collection into display photos, grouped by theme. Within a // theme, sort by the canonical alphabet order. function buildThemes() { return (window.COLLECTION.sets || []).map((set) => ({ id: set.id, name: set.name_he || set.id, desc: set.desc_he || "", photos: (set.items || []) .filter((it) => LETTER_INDEX[it.letter] !== undefined) .map((it) => ({ key: set.id + ":" + it.file + ":" + it.letter, letter: it.letter, word: it.item, theme: set.id, file: resolveFile(it.file), })) .sort((a, b) => LETTER_INDEX[a.letter] - LETTER_INDEX[b.letter]), })); } function readSelection() { try { const raw = window.localStorage.getItem(SELECTION_KEY); const parsed = raw ? JSON.parse(raw) : {}; // Guard against valid-but-wrong JSON (null / number / array) so callers // can safely index by letter. return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {}; } catch (_) { return {}; } } function writeSelection(sel) { try { window.localStorage.setItem(SELECTION_KEY, JSON.stringify(sel)); } catch (_) {} } function sound(name) { if (window.SOUNDS) window.SOUNDS.play(name); } // ── A single gallery photo ─────────────────────────────────────────────── // Tap to choose. Selection rides on the browser's native `click`, which is // the one reliable "this was a tap, not a scroll" signal inside a scroll // container — it fires for a stationary touch tap AND keyboard Enter/Space, // and never blocks scrolling. // // History (see ADR 0017): an earlier long-press-to-enlarge feature wired up // pointerdown/move/up + a hold timer and tried to hand-roll tap-vs-scroll // detection. On iOS Safari that detection lost: to reach a tile below the // first screen you must scroll, and Safari then resolves the trailing touch // as a scroll — firing `pointercancel` (and suppressing `click`) instead of // `pointerup`. So below-fold tiles only ever fired the long-press timer // (started on pointerdown, before the cancel), never the tap. Removing the // long-press machinery hands tap detection back to the platform, where it // works. No pointer handlers, no preventDefault. function PhotoTile({ photo, chosen, grayed, onTap }) { return ( ); } // ── Coverage strip: 22 letters, lit as they get a photo ─────────────────── function Coverage({ selection }) { const done = LETTERS.filter((l) => selection[l]).length; return (
{done} / {LETTERS.length}
); } function App() { const [themes] = React.useState(buildThemes); const [selection, setSelection] = React.useState(readSelection); const [done, setDone] = React.useState(false); React.useEffect(() => { writeSelection(selection); }, [selection]); const doneCount = LETTERS.filter((l) => selection[l]).length; const allCovered = doneCount === LETTERS.length; const choose = (photo) => { setSelection((prev) => { const cur = prev[photo.letter]; const next = { ...prev }; if (cur && cur.theme === photo.theme && cur.file === photo.file) { delete next[photo.letter]; // tap the chosen one = free the letter sound("tap"); } else { next[photo.letter] = { theme: photo.theme, file: photo.file, word: photo.word }; sound("correct"); } return next; }); }; const onTap = (photo) => { const cur = selection[photo.letter]; const isChosen = cur && cur.theme === photo.theme && cur.file === photo.file; // A settled letter is locked to its winner: only the winner is tappable // (to free the letter). Alternatives are grayed + inert. if (cur && !isChosen) return; choose(photo); }; // Fill every empty letter with a RANDOM photo, preferring the "team" sets // (alex / animals / david / giborim) over the general `default` bank — so a // fresh auto-fill starts from the themed collections, not the plain default, // and looks different each time. Fall back to `default` only for letters no // team covers (ו, ר, and any the teams skip). See issue #115. const autoFill = () => { setSelection((prev) => { const next = { ...prev }; for (const l of LETTERS) { if (next[l]) continue; const all = []; for (const t of themes) { for (const p of t.photos) if (p.letter === l) all.push(p); } if (!all.length) continue; const team = all.filter((p) => p.theme !== "default"); const pool = team.length ? team : all; const hit = pool[Math.floor(Math.random() * pool.length)]; next[l] = { theme: hit.theme, file: hit.file, word: hit.word }; } return next; }); sound("break"); }; // Apply a whole category at once: for every letter the category covers, // OVERRIDE the current choice with that category's photo. Letters the // category doesn't cover keep their existing selection. The category bar is // always on screen so a category can be (re)chosen at any time. (issue #115) const applyCategory = (themeId) => { const t = themes.find((x) => x.id === themeId); if (!t) return; setSelection((prev) => { const next = { ...prev }; for (const l of LETTERS) { const hit = t.photos.find((p) => p.letter === l); if (hit) next[l] = { theme: hit.theme, file: hit.file, word: hit.word }; } return next; }); sound("correct"); }; const reset = () => { setSelection({}); sound("tap"); }; const onContinue = () => { setDone(true); sound("end"); }; if (done) { return (

התמונות שלך מוכנות!

{/* play with my set — big primary play triangle */} {/* edit — pencil */} {/* home */}
); } return (
{/* The אותיות brand mark — the same single artifact the games' Crown uses; this tool doesn't load game-shared.jsx so it points at it directly. */}
{/* auto-fill — magic wand */} {/* reset — circular arrow */}
{/* Category cards — always visible. Tap one to apply that whole category, overriding existing choices for the letters it covers. */}
{themes.map((t) => ( ))}
{themes.map((t) => (

{t.name}

{t.photos.map((p) => { const cur = selection[p.letter]; const chosen = !!cur && cur.theme === p.theme && cur.file === p.file; const grayed = !!cur && !chosen; return ( ); })}
))}
); } ReactDOM.createRoot(document.getElementById("root")).render();