[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_356":357,"_358":359},"routes/_app.x.$handle.$name",{"_106":105,"_32":46,"_114":92,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":61,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",151,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/modules/AdventureLab.tsx","latestPath","fileId","46326d68-8cf0-11f1-9586-1607ee4eb77e","name","AdventureLab.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport {\n DownloadButton,\n Field,\n LabShell,\n Paper,\n Tags,\n escapeHTML,\n pageShell,\n} from \"../components/LabUI.tsx\";\nimport { ActivityProjectLibrary, ActivitySaveBar, useActivityProjects } from \"../components/ActivityProjects.tsx\";\n\ntype Choice = {\n id: string;\n text: string;\n destinationKey: string;\n};\n\ntype Scene = {\n key: string;\n id: string;\n title: string;\n text: string;\n picture: string;\n ending: boolean;\n endingType: string;\n choices: Choice[];\n};\n\ntype ViewMode = \"plan\" | \"play\" | \"html\";\n\nconst initialScenes: Scene[] = [\n {\n key: \"start\",\n id: \"beginning\",\n title: \"The Beginning\",\n text: \"You reach a fork in the trail just as the sun disappears.\",\n picture: \"🏔️\",\n ending: false,\n endingType: \"\",\n choices: [\n { id: \"choice-cave\", text: \"Enter the glowing cave\", destinationKey: \"cave\" },\n { id: \"choice-tower\", text: \"Climb toward the old tower\", destinationKey: \"tower\" },\n ],\n },\n {\n key: \"cave\",\n id: \"glowing-cave\",\n title: \"The Glowing Cave\",\n text: \"A friendly dragon guards two tunnels and an enormous shelf of books.\",\n picture: \"🐉\",\n ending: false,\n endingType: \"\",\n choices: [\n { id: \"choice-library\", text: \"Ask about the books\", destinationKey: \"library\" },\n { id: \"choice-woods\", text: \"Take the dark tunnel\", destinationKey: \"woods\" },\n ],\n },\n {\n key: \"tower\",\n id: \"old-tower\",\n title: \"The Old Tower\",\n text: \"The tower is actually a telescope pointed at a brand-new planet.\",\n picture: \"🔭\",\n ending: true,\n endingType: \"Mystery\",\n choices: [],\n },\n {\n key: \"library\",\n id: \"dragon-library\",\n title: \"The Dragon Library\",\n text: \"The dragon gives you a library card that opens books into other worlds.\",\n picture: \"📚\",\n ending: true,\n endingType: \"Victory\",\n choices: [],\n },\n {\n key: \"woods\",\n id: \"lost-woods\",\n title: \"Lost in the Woods\",\n text: \"The tunnel leads outside, but now every tree looks exactly the same.\",\n picture: \"🌲\",\n ending: true,\n endingType: \"Disaster\",\n choices: [],\n },\n];\n\nfunction slugify(value: string) {\n return value\n .toLowerCase()\n .trim()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-|-$/g, \"\") || \"new-scene\";\n}\n\nfunction uniqueSceneId(title: string, scenes: Scene[]) {\n const base = slugify(title);\n let id = base;\n let number = 2;\n while (scenes.some((scene) => scene.id === id)) {\n id = base + \"-\" + number;\n number += 1;\n }\n return id;\n}\n\nfunction endingIcon(type: string) {\n if (type === \"Victory\") return \"🏆\";\n if (type === \"Mystery\") return \"🔮\";\n if (type === \"Funny\") return \"😂\";\n if (type === \"Disaster\") return \"💥\";\n return \"🏁\";\n}\n\nfunction sceneMarkup(scene: Scene, scenes: Scene[]) {\n const choices = scene.choices\n .map((choice) => {\n const destination = scenes.find((item) => item.key === choice.destinationKey);\n const href = destination ? \"#\" + destination.id : \"#\";\n return \"

\" + escapeHTML(choice.text || \"Continue\") + \"

\";\n })\n .join(\"\\n\");\n\n const ending = scene.ending\n ? \"

\" + endingIcon(scene.endingType) + \" \" + escapeHTML(scene.endingType || \"The End\") + \"

\\n Play again\"\n : \"

\\n\" + choices + \"\\n \";\n\n return \"

\\n\"\n + \"

\" + escapeHTML(scene.picture) + \"

\\n\"\n + \"

\" + escapeHTML(scene.title) + \"

\\n\"\n + \"

\" + escapeHTML(scene.text) + \"

\\n\"\n + ending + \"\\n\"\n + \"

\";\n}\n\nfunction buildAdventureHTML(title: string, scenes: Scene[]) {\n const body = \"\\n

\\n\"\n + \"

\" + escapeHTML(title) + \"

\\n\"\n + \"

Choose a path to move through the story.

\\n\"\n + scenes.map((scene) => sceneMarkup(scene, scenes)).join(\"\\n\\n\") + \"\\n\"\n + \"

\\n \";\n\n const css = `\n html { scroll-behavior: smooth; }\n section { display: none; min-height: 420px; }\n section:first-of-type { display: block; }\n section:target { display: block; }\n main:has(section:target) section:first-of-type:not(:target) { display: none; }\n .picture { font-size: 7rem; text-align: center; }\n .choices { display: grid; gap: 14px; padding: 0; list-style: none; }\n .choices a { display: block; padding: 16px; background: #ffe17a; border: 3px solid #17233c; text-decoration: none; }\n .ending { padding: 16px; background: #d7c0f4; border: 3px solid #17233c; font-size: 1.25rem; font-weight: bold; }\n `;\n\n return pageShell(title, body, css);\n}\n\ntype AdventureState = {\n title: string; scenes: Scene[]; selectedKey: string; mode: ViewMode; playKey: string;\n history: string[]; discovered: string[]; htmlView: \"scene\" | \"whole\";\n};\n\nconst newAdventure = (): AdventureState => ({\n title: \"The Mystery of Moonlight Mountain\",\n scenes: structuredClone(initialScenes),\n selectedKey: \"start\", mode: \"plan\", playKey: \"start\",\n history: [], discovered: [], htmlView: \"scene\",\n});\n\nexport function AdventureLab({ onBack }: { onBack: () => void }) {\n const saved = useActivityProjects(\"adventure\", newAdventure, (state) => state.title);\n const { state, setState } = saved;\n const { title, scenes, selectedKey, mode, playKey, history, discovered, htmlView } = state;\n const set = (key: K) => (value: AdventureState[K] | ((current: AdventureState[K]) => AdventureState[K])) =>\n setState((current) => ({ ...current, [key]: typeof value === \"function\" ? (value as any)(current[key]) : value }));\n const setTitle = set(\"title\"), setScenes = set(\"scenes\"), setSelectedKey = set(\"selectedKey\");\n const setMode = set(\"mode\"), setPlayKey = set(\"playKey\"), setHistory = set(\"history\");\n const setDiscovered = set(\"discovered\"), setHtmlView = set(\"htmlView\");\n\n const selected = scenes.find((scene) => scene.key === selectedKey) || scenes[0];\n const playing = scenes.find((scene) => scene.key === playKey) || scenes[0];\n const generatedHTML = useMemo(() => buildAdventureHTML(title, scenes), [title, scenes]);\n\n const incoming = useMemo(() => {\n const counts: Record = {};\n scenes.forEach((scene) => { counts[scene.key] = 0; });\n scenes.forEach((scene) => scene.choices.forEach((choice) => {\n if (choice.destinationKey in counts) counts[choice.destinationKey] += 1;\n }));\n return counts;\n }, [scenes]);\n\n const reachable = useMemo(() => {\n const found = new Set();\n const queue = [\"start\"];\n while (queue.length) {\n const key = queue.shift()!;\n if (found.has(key)) continue;\n found.add(key);\n const scene = scenes.find((item) => item.key === key);\n scene?.choices.forEach((choice) => {\n if (choice.destinationKey) queue.push(choice.destinationKey);\n });\n }\n return found;\n }, [scenes]);\n\n const checks = useMemo(() => {\n const messages: string[] = [];\n const duplicateIds = scenes.filter((scene, index) => scenes.findIndex((item) => item.id === scene.id) !== index);\n if (!scenes.some((scene) => scene.ending)) messages.push(\"Your adventure needs at least one ending.\");\n if (duplicateIds.length) messages.push(\"Two scenes have the same HTML id. Give every scene a different id.\");\n scenes.forEach((scene) => {\n if (!reachable.has(scene.key)) messages.push(scene.title + \" cannot be reached from the beginning yet.\");\n if (!scene.ending && scene.choices.length === 0) messages.push(scene.title + \" needs a choice or must be marked as an ending.\");\n scene.choices.forEach((choice) => {\n if (!choice.text.trim()) messages.push(scene.title + \" has a choice with no clickable words.\");\n if (!choice.destinationKey) messages.push(scene.title + \" has a choice that does not lead anywhere.\");\n });\n });\n return messages;\n }, [scenes, reachable]);\n\n function updateScene(key: string, values: Partial) {\n setScenes((current) => current.map((scene) => scene.key === key ? { ...scene, ...values } : scene));\n }\n\n function addScene(title = \"New Scene\") {\n const scene: Scene = {\n key: crypto.randomUUID(),\n id: uniqueSceneId(title, scenes),\n title,\n text: \"What happens in this part of the story?\",\n picture: \"✨\",\n ending: false,\n endingType: \"\",\n choices: [],\n };\n setScenes((current) => [...current, scene]);\n setSelectedKey(scene.key);\n return scene;\n }\n\n function addChoice() {\n updateScene(selected.key, {\n choices: [...selected.choices, { id: crypto.randomUUID(), text: \"\", destinationKey: \"\" }],\n });\n }\n\n function updateChoice(choiceId: string, values: Partial) {\n updateScene(selected.key, {\n choices: selected.choices.map((choice) => choice.id === choiceId ? { ...choice, ...values } : choice),\n });\n }\n\n function createDestination(choiceId: string) {\n const scene = addScene(\"New Scene\");\n setScenes((current) => current.map((item) => item.key === selected.key\n ? { ...item, choices: item.choices.map((choice) => choice.id === choiceId ? { ...choice, destinationKey: scene.key } : choice) }\n : item));\n }\n\n function deleteScene() {\n if (selected.key === \"start\") return;\n setScenes((current) => current\n .filter((scene) => scene.key !== selected.key)\n .map((scene) => ({ ...scene, choices: scene.choices.map((choice) => choice.destinationKey === selected.key ? { ...choice, destinationKey: \"\" } : choice) })));\n setSelectedKey(\"start\");\n }\n\n function choose(destinationKey: string) {\n if (!destinationKey) return;\n setHistory((current) => [...current, playKey]);\n setPlayKey(destinationKey);\n const destination = scenes.find((scene) => scene.key === destinationKey);\n if (destination?.ending) setDiscovered((current) => current.includes(destinationKey) ? current : [...current, destinationKey]);\n }\n\n function restart() {\n setPlayKey(\"start\");\n setHistory([]);\n }\n\n function goBack() {\n const previous = history[history.length - 1];\n if (!previous) return;\n setPlayKey(previous);\n setHistory((current) => current.slice(0, -1));\n }\n\n function renderMapScene(scene: Scene) {\n return (\n

\n \n {scene.ending\n ? ENDING\n : {scene.choices.length} choice{scene.choices.length === 1 ? \"\" : \"s\"}}\n

← {incoming[scene.key] || 0} link{incoming[scene.key] === 1 ? \"\" : \"s\"} arrive here

\n {!scene.ending && scene.choices.length > 0 && (\n

\n “{choice.text || \"Untitled choice\"}”\n {choice.destinationKey ? (\n setSelectedKey(choice.destinationKey)}\n className=\"bg-[#dff0ff] border-2 border-[#17233c] px-2 py-1 text-right font-black\"\n aria-label={(choice.text || \"Untitled choice\") + \" leads to \" + (scenes.find((item) => item.key === choice.destinationKey)?.title || \"missing scene\")}\n >\n → {scenes.find((item) => item.key === choice.destinationKey)?.title || \"Missing scene\"}\n \n ) : → nowhere yet}\n

\n )}\n

\n );\n }\n\n if (!saved.ready) return

Opening saved adventures…

;\n if (!saved.activeId) {\n return ;\n }\n\n return (\n <>\n \n \n

\n \n \n \n

\n\n {mode === \"plan\" && (\n

\n \n \n

Story map

\n \n

Each scene appears once. Its choice arrows show exactly where readers go next.

\n {scenes.filter((scene) => reachable.has(scene.key)).map(renderMapScene)}\n \n {scenes.filter((scene) => !reachable.has(scene.key)).length > 0 && (\n

Unconnected scenes

\n {scenes.filter((scene) => !reachable.has(scene.key)).map((scene) => (\n \n ))}\n

\n )}\n \n\n

Story check

\n {checks.length ?

{message}

✓ Every scene is connected and every path can reach an ending.

}\n

\n\n \n

EDITING SCENE

{selected.picture} {selected.title}

Linked to from {incoming[selected.key] || 0} choice{incoming[selected.key] === 1 ? \"\" : \"s\"}

\n {selected.key !== \"start\" && }\n

\n\n ', text: \"Gives this scene a destination name.\" },\n { code: '', text: \"Makes a choice lead to another scene.\" },\n ]} />\n\n updateScene(selected.key, { title: value })} />\n updateScene(selected.key, { id: slugify(value) })} />\n updateScene(selected.key, { picture: value })} />\n updateScene(selected.key, { text: value })} />\n\n \n updateScene(selected.key, { ending: event.target.checked, choices: event.target.checked ? [] : selected.choices })} className=\"w-6 h-6\" />\n This scene is an ending\n \n\n {selected.ending ? (\n Ending type\n \n \n ) : (\n

Choices

\n \n

\n {selected.choices.length === 0 &&

Add a choice so readers can continue, or mark this scene as an ending.

}\n

\n {selected.choices.map((choice, index) => (\n

Choice {index + 1}

\n \n

\n updateChoice(choice.id, { text: value })} placeholder=\"Enter the glowing cave\" />\n This choice leads to\n \n \n \n

<a href=\"#{escapeHTML(scenes.find((scene) => scene.key === choice.destinationKey)?.id || \"scene-id\")}\">{choice.text || \"Choice words\"}</a>

\n ))}\n

\n )}\n \n

\n )}\n\n {mode === \"play\" && (\n

● ● ● PLAYING YOUR ADVENTURE

{playing.picture}

{playing.title}

{playing.text}

\n {playing.ending ? (\n

{endingIcon(playing.endingType)} {playing.endingType || \"The End\"}

\n \n

\n ) : (\n

\n {playing.choices.map((choice) => )}\n

\n )}\n

\n \n

Endings discovered: {discovered.length} of {scenes.filter((scene) => scene.ending).length}

\n \n

\n )}\n\n {mode === \"html\" && (\n \n

See how the links make branches

Compare each choice’s href with the destination scene’s id.

\n \n \n

\n {htmlView === \"scene\" && (\n Scene to inspect\n \n \n )}\n

{htmlView === \"whole\" ? generatedHTML : sceneMarkup(selected, scenes)}

\n \n \n )}\n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport {\n DownloadButton,\n Field,\n LabShell,\n Paper,\n Tags,\n escapeHTML,\n pageShell,\n} from \"../components/LabUI.tsx\";\nimport { ActivityProjectLibrary, ActivitySaveBar, useActivityProjects } from \"../components/ActivityProjects.tsx\";\n\ntype Choice = {\n id: string;\n text: string;\n destinationKey: string;\n};\n\ntype Scene = {\n key: string;\n id: string;\n title: string;\n text: string;\n picture: string;\n ending: boolean;\n endingType: string;\n choices: Choice[];\n};\n\ntype ViewMode = \"plan\" | \"play\" | \"html\";\n\nconst initialScenes: Scene[] = [\n {\n key: \"start\",\n id: \"beginning\",\n title: \"The Beginning\",\n text: \"You reach a fork in the trail just as the sun disappears.\",\n picture: \"🏔️\",\n ending: false,\n endingType: \"\",\n choices: [\n { id: \"choice-cave\", text: \"Enter the glowing cave\", destinationKey: \"cave\" },\n { id: \"choice-tower\", text: \"Climb toward the old tower\", destinationKey: \"tower\" },\n ],\n },\n {\n key: \"cave\",\n id: \"glowing-cave\",\n title: \"The Glowing Cave\",\n text: \"A friendly dragon guards two tunnels and an enormous shelf of books.\",\n picture: \"🐉\",\n ending: false,\n endingType: \"\",\n choices: [\n { id: \"choice-library\", text: \"Ask about the books\", destinationKey: \"library\" },\n { id: \"choice-woods\", text: \"Take the dark tunnel\", destinationKey: \"woods\" },\n ],\n },\n {\n key: \"tower\",\n id: \"old-tower\",\n title: \"The Old Tower\",\n text: \"The tower is actually a telescope pointed at a brand-new planet.\",\n picture: \"🔭\",\n ending: true,\n endingType: \"Mystery\",\n choices: [],\n },\n {\n key: \"library\",\n id: \"dragon-library\",\n title: \"The Dragon Library\",\n text: \"The dragon gives you a library card that opens books into other worlds.\",\n picture: \"📚\",\n ending: true,\n endingType: \"Victory\",\n choices: [],\n },\n {\n key: \"woods\",\n id: \"lost-woods\",\n title: \"Lost in the Woods\",\n text: \"The tunnel leads outside, but now every tree looks exactly the same.\",\n picture: \"🌲\",\n ending: true,\n endingType: \"Disaster\",\n choices: [],\n },\n];\n\nfunction slugify(value: string) {\n return value\n .toLowerCase()\n .trim()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-|-$/g, \"\") || \"new-scene\";\n}\n\nfunction uniqueSceneId(title: string, scenes: Scene[]) {\n const base = slugify(title);\n let id = base;\n let number = 2;\n while (scenes.some((scene) => scene.id === id)) {\n id = base + \"-\" + number;\n number += 1;\n }\n return id;\n}\n\nfunction endingIcon(type: string) {\n if (type === \"Victory\") return \"🏆\";\n if (type === \"Mystery\") return \"🔮\";\n if (type === \"Funny\") return \"😂\";\n if (type === \"Disaster\") return \"💥\";\n return \"🏁\";\n}\n\nfunction sceneMarkup(scene: Scene, scenes: Scene[]) {\n const choices = scene.choices\n .map((choice) => {\n const destination = scenes.find((item) => item.key === choice.destinationKey);\n const href = destination ? \"#\" + destination.id : \"#\";\n return \"

\" + escapeHTML(choice.text || \"Continue\") + \"

\";\n })\n .join(\"\\n\");\n\n const ending = scene.ending\n ? \"

\" + endingIcon(scene.endingType) + \" \" + escapeHTML(scene.endingType || \"The End\") + \"

\\n Play again\"\n : \"

\\n\" + choices + \"\\n \";\n\n return \"

\\n\"\n + \"

\" + escapeHTML(scene.picture) + \"

\\n\"\n + \"

\" + escapeHTML(scene.title) + \"

\\n\"\n + \"

\" + escapeHTML(scene.text) + \"

\\n\"\n + ending + \"\\n\"\n + \"

\";\n}\n\nfunction buildAdventureHTML(title: string, scenes: Scene[]) {\n const body = \"\\n

\\n\"\n + \"

\" + escapeHTML(title) + \"

\\n\"\n + \"

Choose a path to move through the story.

\\n\"\n + scenes.map((scene) => sceneMarkup(scene, scenes)).join(\"\\n\\n\") + \"\\n\"\n + \"

\n \n {scene.ending\n ? ENDING\n : {scene.choices.length} choice{scene.choices.length === 1 ? \"\" : \"s\"}}\n

← {incoming[scene.key] || 0} link{incoming[scene.key] === 1 ? \"\" : \"s\"} arrive here

\n {!scene.ending && scene.choices.length > 0 && (\n

\n “{choice.text || \"Untitled choice\"}”\n {choice.destinationKey ? (\n setSelectedKey(choice.destinationKey)}\n className=\"bg-[#dff0ff] border-2 border-[#17233c] px-2 py-1 text-right font-black\"\n aria-label={(choice.text || \"Untitled choice\") + \" leads to \" + (scenes.find((item) => item.key === choice.destinationKey)?.title || \"missing scene\")}\n >\n → {scenes.find((item) => item.key === choice.destinationKey)?.title || \"Missing scene\"}\n \n ) : → nowhere yet}\n

\n )}\n

\n );\n }\n\n if (!saved.ready) return

Opening saved adventures…

;\n if (!saved.activeId) {\n return ;\n }\n\n return (\n <>\n \n \n

\n \n \n \n

\n\n {mode === \"plan\" && (\n

\n \n \n

Story map

\n \n

Each scene appears once. Its choice arrows show exactly where readers go next.

\n {scenes.filter((scene) => reachable.has(scene.key)).map(renderMapScene)}\n \n {scenes.filter((scene) => !reachable.has(scene.key)).length > 0 && (\n

Unconnected scenes

\n {scenes.filter((scene) => !reachable.has(scene.key)).map((scene) => (\n \n ))}\n

\n )}\n \n\n

Story check

\n {checks.length ?

{message}

✓ Every scene is connected and every path can reach an ending.

}\n

\n\n \n

EDITING SCENE

{selected.picture} {selected.title}

Linked to from {incoming[selected.key] || 0} choice{incoming[selected.key] === 1 ? \"\" : \"s\"}

\n {selected.key !== \"start\" && }\n

Choices

\n \n

\n {selected.choices.length === 0 &&

Add a choice so readers can continue, or mark this scene as an ending.

}\n

\n {selected.choices.map((choice, index) => (\n

Choice {index + 1}

\n \n

\n updateChoice(choice.id, { text: value })} placeholder=\"Enter the glowing cave\" />\n This choice leads to\n \n \n \n

<a href=\"#{escapeHTML(scenes.find((scene) => scene.key === choice.destinationKey)?.id || \"scene-id\")}\">{choice.text || \"Choice words\"}</a>

\n ))}\n

\n )}\n \n

\n )}\n\n {mode === \"play\" && (\n

● ● ● PLAYING YOUR ADVENTURE

{playing.picture}

{playing.title}

{playing.text}

\n {playing.ending ? (\n

{endingIcon(playing.endingType)} {playing.endingType || \"The End\"}

\n \n

\n ) : (\n

\n {playing.choices.map((choice) => )}\n

\n )}\n

\n \n

Endings discovered: {discovered.length} of {scenes.filter((scene) => scene.ending).length}

\n \n

\n )}\n\n {mode === \"html\" && (\n \n

See how the links make branches

Compare each choice’s href with the destination scene’s id.

\n \n \n

\n {htmlView === \"scene\" && (\n Scene to inspect\n \n \n )}\n

{htmlView === \"whole\" ? generatedHTML : sceneMarkup(selected, scenes)}

● ● ● LIVE WEBPAGE

Diff · v151