import { fetch } from "https://esm.town/v/std/fetch"; import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=5"; export const ocaps_ink = async (req) => { try { const valvers = 200; const [ink_js_src, story_ink, visitors_info_txt] = await Promise.all([ fetchText( // "https://raw.githubusercontent.com/y-lohse/inkjs/master/templates/browser_serverless/ink.js", "https://unpkg.com/inkjs@2.2.1/dist/ink-full.js", ), fetchText( "https://gist.githubusercontent.com/zarutian/ec15de4eb4780ae6e6c8f7ad1d2d49f6/raw/ocaps.ink", { cache: "no-store", }, ), fetchText( // "https://zarutian-ocaps_ink_visitors.express.val.run", "https://zarutian-ocaps_ink_visitors.web.val.run/", { cache: "no-store", }, ), ]); const mainForBrowser_src = (() => { var _inkStory; var errorHandlerForAll; var load_save; var localStorage; var storyContainer; var save; var wipe_save; var document; var URL; var window; var isAnimationEnabled; var showAfter; var setTimeout; var scrollToBottom; var requestAnimationFrame; var continueStory; var inkjs; var story_version; var prompt; const mainForBrowser = () => { load_save = () => { const save_json = localStorage.getItem("ocaps_ink_story_save"); // var save_json = null; // const t1 = document.location.hash; // if (t1 != "") { // save_json = decodeURIComponent(t1); // } if (save_json != null) { _inkStory.state.LoadJson(save_json); const txtSoFar = localStorage.getItem("ocaps_ink_story_text"); // const txtSoFar = JSON.parse(save_json).txtSoFar; if ( (txtSoFar != undefined) && (txtSoFar != "") && (txtSoFar != null) ) { storyContainer.innerHTML = txtSoFar; var delay = 0.0; storyContainer.querySelectorAll("p").forEach((c) => { showAfter(delay, c); delay += 50.0; }); storyContainer.querySelectorAll("p.choice").forEach((c) => { c.parentNode.removeChild(c); }); } } }; save = () => { const save_json = _inkStory.state.ToJson(); // var save_obj = JSON.parse(ink_save_json); // save_obj. const txtSoFar = storyContainer.innerHTML; // const save_json = JSON.stringify(save_obj); document.getElementById("save_json").innerText = save_json; document.getElementById("save_text").innerText = txtSoFar; localStorage.setItem("ocaps_ink_story_save", save_json); localStorage.setItem("ocaps_ink_story_text", txtSoFar); // document.location.hash = encodeURIComponent(save_json); }; wipe_save = () => { localStorage.removeItem("ocaps_ink_story_save"); localStorage.removeItem("ocaps_ink_story_text"); // document.location.hash = ""; }; document.getElementById("restart").addEventListener( "click", (event) => { try { event.preventDefault(); wipe_save(); const t1 = new URL(document.location); const t2 = t1.searchParams.get("restarts"); const t3 = (t2 == null) ? "0" : t2; const t4 = parseInt(t3, 10) + 1; t1.search = "?".concat( "restarts=", t4.toString(10), "&", "valvers=", valvers.toString(10), "&", "storyvers=", story_version.toString(10), ); document.location = t1.toString(); } catch (err) { errorHandlerForAll("restart error: ".concat(err.toString())); } }, ); /* document.getElementById("share").addEventListener("click", (event) => { try { event.preventDefault(); const save_json = localStorage.getItem("ocaps_ink_story_save"); const txtSoFar = localStorage.getItem("ocaps_ink_story_text"); const t1 = new URL(document.location); const t2 = t1.searchParams.get("restarts"); const t3 = (t2 == null) ? "0" : t2; const t4 = parseInt(t3, 10); t1.search = "?".concat( "restarts=", t4.toString(10), "&", "valvers=", valvers.toString(10), "&", "storyvers=", story_version.toString(10), "&", "saveJSON=", encodeURIComponent(save_json), "&", "txtSoFar=", encodeURIComponent(txtSoFar), ); } catch (err) { errorHandlerForAll("share error: ".concat(err.toString())); } }); */ // isAnimationEnabled = () => window.matchMedia("(prefers-reduced-motion: no-preference)").matches; // const showAfter = (delay, el) => { // setTimeout(() => { el.classList.add("show") }, isAnimationEnabled() ? delay : 0); // "} showAfter = (delay, el) => { const animateDelay = isAnimationEnabled() ? delay : 0; const t1 = { behavior: "smooth", block: "end", inline: "nearest", }; const t2 = () => { el.classList.add("show"); el.scrollIntoView(t1); }; setTimeout(t2, animateDelay); }; scrollToBottom = () => { if (!isAnimationEnabled()) { return; } const start = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; const dist = document.body.scrollHeight - window.innerHeight - start; if (dist < 0) { return; } const duration = 300 + ((300 * dist) / 100); var startTime = null; function step(time) { if (startTime == null) { startTime = time; } const t = (time - startTime) / duration; const lerp = (3 * t * t) - (2 * t * t * t); window.scrollTo(0, start + (lerp * dist)); if (t < 1) { requestAnimationFrame(step); } } requestAnimationFrame(step); }; continueStory = () => { try { var paragraphIndex = 0; var delay = 0.0; // Generate story text - loop through available content while (_inkStory.canContinue) { // Get ink to generate the next paragraph var paragraphText = _inkStory.Continue(); // Create paragraph element var paragraphElement = document.createElement("p"); paragraphElement.innerHTML = paragraphText; storyContainer.appendChild(paragraphElement); // Fade in paragraph after a short delay showAfter(delay, paragraphElement); delay += 200.0; } // Create HTML choices from ink choices _inkStory.currentChoices.forEach(function (choice) { // Create paragraph with anchor element var choiceParagraphElement = document.createElement("p"); choiceParagraphElement.classList.add("choice"); choiceParagraphElement.innerHTML = `${choice.text}`; storyContainer.appendChild(choiceParagraphElement); // Fade choice in after a short delay showAfter(delay, choiceParagraphElement); delay += 200.0; // Click on choice var choiceAnchorEl = choiceParagraphElement.querySelectorAll("a")[0]; const eventListener = function (event) { // Do not follow link event.preventDefault(); // Remove all existing choices // todo: needs tweaking storyContainer.querySelectorAll("p.choice").forEach((c) => { if (event.target == c) { const chosenElement = document.createElement("p"); chosenElement.innerHTML = event.target.innerHTML; chosenElement.classList.add("chosen"); storyContainer.appendChild(chosenElement); } c.parentNode.removeChild(c); }); // Tell the story where to go next _inkStory.ChooseChoiceIndex(choice.index); // Aaand loop continueStory(); }; choiceAnchorEl.addEventListener("click", eventListener); }); // scrollToBottom(); save(); } catch (err) { errorHandlerForAll(err); } }; storyContainer = document.getElementById("story"); const t1 = new inkjs.Compiler(story_ink, { errorHandler: (message, errorType) => { errorHandlerForAll( "_ink compilation error:\n".concat(errorType, "\n", message), ); }, }); const temp1 = (t1) => { try { _inkStory = t1.Compile(); } catch (err) { errorHandlerForAll( "ink compilation error:\n".concat( err.toString(), "\n", t1.errors.join("\n"), ), ); } }; temp1(t1); _inkStory.BindExternalFunction("str_concat", (a, b) => { return a.toString().concat(b.toString()); }); _inkStory.BindExternalFunction("urlfetch", (url) => { throw new Error("Not yet implemented!"); }); _inkStory.BindExternalFunction("json_subscript", (json_data, sub) => { return JSON.stringify(JSON.parse(json_data)[sub]); }); _inkStory.BindExternalFunction( "json_set_subscript", (json_data, sub, item) => { const specimen = JSON.parse(json_data); specimen[sub] = item; return JSON.stringify(specimen); }, ); _inkStory.BindExternalFunction("json_array_length", (json_data) => { return JSON.parse(json_data).length; }); _inkStory.BindExternalFunction("query", (message, defaultValue) => { return prompt(message, defaultValue); }); _inkStory.BindExternalFunction("urlpost", (url, payload) => { const response_p = fetch(url, { method: "POST", cache: "no-cache", credentials: "omit", headers: { "Content-Type": "application/json", }, redirect: "follow", referrerPolicy: "no-referrer", body: payload, }); response_p.then((response) => { }, (err) => { }); }); _inkStory.BindExternalFunction("parseInt", (str) => { return parseInt(str, 10); }); _inkStory.allowExternalFunctionFallbacks = true; _inkStory.onError = (msg, type) => { errorHandlerForAll("Ink story error: ".concat(type, " ", msg)); }; story_version = _inkStory.variablesState["story_version"]; document.getElementById("visitors_info").innerText = visitors_info_txt; _inkStory.variablesState["visitor_info"] = visitors_info_txt; // errorHandlerForAll( // "story_version ='".concat( // story_version, // "' type is ", // typeof (story_version), // ), // ); // const ta = new URL(document.location); // localStorage.setItem( // "ocaps_ink_story_save", // decodeURIComponent(ta.searchParams.get("saveJSON")), // ); // localStorage.setItem( // "ocaps_ink_story_text", // decodeURIComponent(ta.searchParams.get("txtSoFar")), // ); load_save(); continueStory(); }; return mainForBrowser.toString(); })(); const page = "".concat( '\n', "\n", '\n', "Ocaps interactive explainer\n", '\n', "", "", "", '= Restart =', // '', '
.ink behind the interactive narrative, leave comments and suggestions there', "
\n", '

', "

Ocaps interactive explainer

", "

\n", "v", valvers.toString(10), "
\n", '

\n',
      "Error log:",
      "

\n", "

", '

\n',
      "

\n", "

", '

\n',
      "

\n", "

", '

\n',
      "

\n", "

", // "\n", "", "", ); return new Response( page, { status: 200, headers: { "Content-Type": "text/html; charset=utf-8", }, }, ); } catch (err) { const formatted_error = "".concat( "\n", "\n", "

\n",
      err.toString(),
      "

\n", "", "", ); return new Response( formatted_error, { status: 500, headers: { "Content-Type": "text/html; charset=utf-8", } } ); } };

Ocaps interactive explainer

\n', "Error log:", "\n", "", '\n', "\n", "", '\n', "\n", "", '\n', "\n", "

\n', "Error log:", "
\n", "
", '
\n', "
\n", "
", '
\n', "
\n", "
", '
\n', "
\n", "

ocaps_ink

Version 10