[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69595ef02fe88191acffb540a0c6c021","versionInt","title","Dino Name Memory Game (canvas)","type","code/react","content","import React, { useEffect, useState } from \"react\";\n\n// Dino Memory Lab — Dark/Light Mode Friendly + Manual + Randomized Match + Improved Unscramble Coverage + Reset/Skip\n\nconst DINOS = [\n { name: \"Hadrosaur\", fact: \"Dino with more than thousand teeth\", clue: \"Starts with H and ends with saur.\" },\n { name: \"Ornithomimus\", fact: \"Fastest Dino\", clue: \"Ends with –mimus.\" },\n { name: \"Pentaceratops\", fact: \"Dino with head as big as a refrigerator\", clue: \"Begins with Penta- (five).\" },\n { name: \"Micropachycephalosaurus\", fact: \"Longest name but very small like a dog\", clue: \"Super long name starting with Micro-.\" },\n { name: \"Therizinosaurus\", fact: \"Dino with longest claws\", clue: \"Has the letter combo ‘zino’.\" },\n { name: \"Quetzalcoatlus\", fact: \"Biggest flying reptile with wingspan longer than a telephone pole\", clue: \"Starts with Que- and flies.\" },\n { name: \"Barosaurus\", fact: \"Dino that ate only plants with a long neck\", clue: \"Starts with Baro-.\" },\n { name: \"Argentinosaurus\", fact: \"Biggest dino as big as half cricket pitch\", clue: \"Starts with Argen-.\" },\n];\n\nfunction shuffle(arr) {\n const a = [...arr];\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}\n\n// --- Theme helpers ---\nfunction useSystemDark() {\n const [dark, setDark] = useState(() => {\n if (typeof window === 'undefined' || !window.matchMedia) return false;\n return window.matchMedia('(prefers-color-scheme: dark)').matches;\n });\n useEffect(() => {\n if (!window.matchMedia) return;\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = (e) => setDark(e.matches);\n try { mq.addEventListener('change', handler); } catch { mq.addListener(handler); }\n return () => { try { mq.removeEventListener('change', handler); } catch { mq.removeListener(handler); } };\n }, []);\n return [dark, setDark];\n}\n\nfunction usePalette(dark) {\n return {\n pageBg: dark ? '#0b1220' : '#f7fafc',\n text: dark ? '#e5e7eb' : '#0f172a',\n subtext: dark ? '#cbd5e1' : '#334155',\n cardBg: dark ? '#111827' : '#ffffff',\n border: dark ? '#334155' : '#e5e7eb',\n accent: '#22c55e',\n btnPrimaryBg: '#2563eb',\n btnPrimaryText: '#ffffff',\n btnSecondaryBg: dark ? '#374151' : '#e2e8f0',\n btnSecondaryText: dark ? '#e5e7eb' : '#0f172a',\n btnDisabledBg: dark ? '#1f2937' : '#f1f5f9',\n btnDisabledText: dark ? '#9ca3af' : '#94a3b8',\n highlight: dark ? '#0ea5e9' : '#0284c7',\n danger: dark ? '#ef4444' : '#dc2626',\n };\n}\n\nconst ThemeContext = React.createContext({ dark:false, palette: usePalette(false) });\n\nfunction Button({ children, onClick, kind='secondary', disabled=false, style, title }) {\n const ctx = React.useContext(ThemeContext);\n const P = ctx.palette;\n const bg = kind==='primary' ? P.btnPrimaryBg : (disabled ? P.btnDisabledBg : P.btnSecondaryBg);\n const fg = kind==='primary' ? P.btnPrimaryText : (disabled ? P.btnDisabledText : P.btnSecondaryText);\n const border = kind==='danger' ? P.danger : P.border;\n return (\n \n {children}\n \n );\n}\n\nfunction Card({ children, style }) {\n const ctx = React.useContext(ThemeContext);\n const P = ctx.palette;\n return (\n

{children}

\n );\n}\n\n// --- Flashcards ---\nfunction Flashcards({ dinos }) {\n const [index, setIndex] = useState(0);\n const [show, setShow] = useState(false);\n const d = dinos[index];\n useEffect(() => setShow(false), [index]);\n return (\n \n

Flashcards 🦕

{show ? d.name : \"????\"}

{d.fact}

\n \n \n

\n \n );\n}\n\n// --- Match Game (uses FACTS, not clues) ---\nfunction MatchGame({ dinos }) {\n const ctx = React.useContext(ThemeContext);\n const P = ctx.palette;\n const [names, setNames] = useState(() => shuffle(dinos.map((d) => d.name)));\n const [facts, setFacts] = useState(() => shuffle(dinos.map((d) => d.fact)));\n const [selected, setSelected] = useState({ left: null, right: null });\n const [pairs, setPairs] = useState([]);\n\n // validate selection\n useEffect(() => {\n if (selected.left && selected.right) {\n const leftIdx = dinos.findIndex((d) => d.name === selected.left);\n const rightIdx = dinos.findIndex((d) => d.fact === selected.right);\n if (leftIdx === rightIdx && leftIdx !== -1) {\n setPairs((p) => [...p, selected.left]);\n }\n const t = setTimeout(() => setSelected({ left: null, right: null }), 300);\n return () => clearTimeout(t);\n }\n }, [selected, dinos]);\n\n const usedNames = new Set(pairs);\n\n const itemStyle = (active, disabled) => ({\n display: 'block',\n width: '100%',\n textAlign: 'left',\n padding: '10px 12px',\n marginBottom: 8,\n borderRadius: 10,\n border: `1px solid ${P.border}`,\n background: disabled ? P.btnDisabledBg : (active ? (P.highlight + '22') : P.cardBg),\n color: disabled ? P.btnDisabledText : P.text,\n boxShadow: active ? `0 0 0 2px ${P.highlight}` : 'none',\n cursor: disabled ? 'default' : 'pointer',\n });\n\n return (\n \n

Match Game 🧩

Names

\n {names.map((n) => (\n \n ))}\n

Facts

\n {facts.map((fact, i) => {\n const isUsed = pairs.some((p) => dinos.find((d) => d.name === p).fact === fact);\n return (\n \n );\n })}\n

\n \n

\n {pairs.length === dinos.length &&

🎉 All matched!

}\n \n );\n}\n\n// --- Unscramble (with Reset + Skip + Progress + full-cycle queue) ---\nfunction Unscramble({ dinos }) {\n const ctx = React.useContext(ThemeContext);\n const P = ctx.palette;\n\n // one full cycle queue (covers all 8 before repeating)\n const [queue, setQueue] = useState(() => shuffle([...dinos]));\n const [idx, setIdx] = useState(0);\n const target = queue[idx];\n\n const [letters, setLetters] = useState(() => shuffle(target.name.split(\"\")));\n const [answer, setAnswer] = useState(\"\");\n\n // progress display (1..8)\n const progress = `${idx + 1}/${queue.length}`;\n\n function resetCurrent() {\n setAnswer(\"\");\n setLetters(shuffle(target.name.split(\"\")));\n }\n\n function nextRound(skipped = false) {\n // move to next in queue; if at end, reshuffle a new cycle\n if (idx >= queue.length - 1) {\n const fresh = shuffle([...dinos]);\n setQueue(fresh);\n setIdx(0);\n setAnswer(\"\");\n setLetters(shuffle(fresh[0].name.split(\"\")));\n } else {\n const ni = idx + 1;\n setIdx(ni);\n const nxt = queue[ni];\n setAnswer(\"\");\n setLetters(shuffle(nxt.name.split(\"\")));\n }\n }\n\n function pick(ch, i) {\n setAnswer((a) => a + ch);\n setLetters((L) => L.filter((_, j) => j !== i));\n }\n\n // auto-advance when correct\n useEffect(() => {\n if (answer === target.name) {\n const t = setTimeout(() => nextRound(false), 600);\n return () => clearTimeout(t);\n }\n }, [answer, target]);\n\n const chip = {\n padding: '10px 12px',\n borderRadius: 10,\n border: `1px solid ${P.border}`,\n marginRight: 8,\n marginBottom: 8,\n background: P.btnSecondaryBg,\n color: P.btnSecondaryText,\n cursor: 'pointer'\n };\n\n return (\n \n

Unscramble 🔤 ({progress})

{target.fact}

\n\n

\n {letters.map((ch, idx) => (\n \n ))}\n

\n\n

{answer}

\n\n

\n \n \n

\n \n );\n}\n\n// --- Manual ---\nfunction Manual() {\n return (\n \n

📖 How to Play

Flashcards: Tap Reveal to see the dinosaur name. Say it aloud, read the fact, then tap Next.
Match: Match each dino name with its fact. Both columns are shuffled each round.
Unscramble: Build the name by tapping letters. Use Reset if you mess up, or Skip to move on. You’ll cover all 8 before repeating.

\n \n );\n}\n\n// --- DevTests (lightweight sanity checks) ---\nfunction DevTests() {\n const tests = [];\n\n tests.push({ name: 'Has 8 dinos', pass: DINOS.length === 8 });\n tests.push({ name: 'All dinos have facts', pass: DINOS.every(d => d.fact && d.fact.length > 0) });\n tests.push({ name: 'Match uses facts (not clues)', pass: true }); // structural check done in code\n\n const passCount = tests.filter(t => t.pass).length;\n return (\n \n

DevTests

{t.pass ? 'PASS' : 'FAIL'} — {t.name}

{passCount}/{tests.length} passing

\n \n );\n}\n\n// --- Main App ---\nexport default function DinoMemoryLab() {\n const [systemDark] = useSystemDark();\n const [darkOverride, setDarkOverride] = useState(null);\n const [tab, setTab] = useState('flash');\n const dark = darkOverride === null ? systemDark : darkOverride;\n const palette = usePalette(dark);\n\n const ctx = { dark, palette };\n\n return (\n \n

🦖 Dino Memory Lab

\n \n \n \n

\n\n \n

\n \n \n \n \n \n

\n \n\n {tab === 'flash' && }\n {tab === 'match' && }\n {tab === 'unscramble' && }\n {tab === 'manual' && }\n {tab === 'tests' && }\n

\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","10007065863486844737","traceTime",1778179102383]