\" + 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\nexport function AdventureLab({ onBack }: { onBack: () => void }) {\n const [title, setTitle] = useState(\"The Mystery of Moonlight Mountain\");\n const [scenes, setScenes] = useState(initialScenes);\n const [selectedKey, setSelectedKey] = useState(\"start\");\n const [mode, setMode] = useState(\"plan\");\n const [playKey, setPlayKey] = useState(\"start\");\n const [history, setHistory] = useState([]);\n const [discovered, setDiscovered] = useState([]);\n const [htmlView, setHtmlView] = useState<\"scene\" | \"whole\">(\"scene\");\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 return (\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)}

● ● ● LIVE WEBPAGE

History · AdventureLab.tsx