`;
card.addEventListener("click", () => chooseArc(a));
el.arcs.appendChild(card);
});
}
function renderIntro(lines) {
el.introText.innerHTML = "";
lines.forEach((ln, i) => {
const div = document.createElement("div");
div.textContent = ln;
if (i === 0) div.className = "lead";
el.introText.appendChild(div);
});
// Simple reading register: a plain, spoiler-free statement of the rule under
// the atmospheric intro, so a younger player has it in plain words up front.
if (register === "simple" && ui["rules_plain"]) {
const help = document.createElement("div");
help.className = "intro-plain";
help.textContent = ui["rules_plain"];
el.introText.appendChild(help);
}
}
async function chooseArc(a) {
selectedArc = a.id;
// The first time a player ever runs an arc, Act 2 (the touch / action / flavour
// layer) stays out of the way so they meet the core loop first. It holds for
// the whole first run; from the next run on, the layer appears (gated).
if (!mem.arcStarted) mem.arcStarted = {};
firstArcRun = !mem.arcStarted[a.id];
if (firstArcRun) { mem.arcStarted[a.id] = true; saveMem(); }
applyMeta(a); // skin the intro screen immediately
const p = await post("/api/new", { arc: a.id });
applyMeta(p.meta);
introLines = p.intro || []; // keep for the first-reset onboarding panel
cutsceneLines = p.cutscene || []; // the rule cutscene before those instructions
renderIntro(p.intro);
current = p;
drift = 0;
show(el.intro);
}
function enterCorridor() {
show(el.corridor);
run = freshRun(); // a new climb begins
onboarding = false; // safety: never carry a stale instructions gate into a climb
recordPlay(); // notes a play, and the release-day badge if today is the day
if (window.ambience) window.ambience.play((meta && meta.skin) || "hallway");
renderRoom(current);
}
// The URL a winner passes on. Inside the Spaces iframe this is the live app
// itself (directly playable); locally it is the dev origin. Owner can override
// with window.H8_SHARE_URL if a canonical landing page is preferred.
function shareUrl() {
return (window.H8_SHARE_URL || (location.origin + location.pathname))
.replace(/[?#].*$/, "");
}
// Pick one of the eight invitation lines at random and wire the share targets.
// Progressive disclosure: the panel stays collapsed behind the arc's quiet
// prompt until the player taps it, so the win screen stays calm by default.
function buildShare() {
if (!el.share) return;
const t = (k, fb) => ui[k] || fb;
const n = 1 + Math.floor(Math.random() * 8);
const line = t(`share_${n}`, "I found the way out. Now it's your turn.");
const url = shareUrl();
// The trigger is the arc's own (localized) prompt; the panel starts collapsed.
if (el.shareOpen) {
el.shareOpen.textContent = (meta && meta.share_prompt) || t("share_native", "Share");
el.shareOpen.classList.remove("hidden");
}
if (el.sharePanel) {
el.sharePanel.classList.add("hidden");
el.sharePanel.classList.remove("show");
}
if (el.shareLine) el.shareLine.textContent = line;
const eLine = encodeURIComponent(line);
const eUrl = encodeURIComponent(url);
// X and Facebook carry the invitation text; LinkedIn only takes a URL (it
// pulls its own preview text), so the line rides along in the others.
if (el.shareX) el.shareX.href =
`https://twitter.com/intent/tweet?text=${eLine}&url=${eUrl}`;
if (el.shareFb) el.shareFb.href =
`https://www.facebook.com/sharer/sharer.php?u=${eUrl}"e=${eLine}`;
if (el.shareLi) el.shareLi.href =
`https://www.linkedin.com/sharing/share-offsite/?url=${eUrl}`;
// Mobile-first: where a native share sheet exists (all modern phones, many
// desktops), that single button reaches Instagram, Snapchat, X, Messages,
// everything, so we lead with it and hide the explicit platform row. Only
// browsers without the API (mostly older desktop) fall back to the X /
// Facebook / LinkedIn links. Copy link is always available.
const hasNative = typeof navigator.share === "function";
if (el.shareNative) {
el.shareNative.classList.toggle("hidden", !hasNative);
if (hasNative) {
el.shareNative.onclick = () => {
recordShare();
navigator.share({ text: line, url }).catch(() => {});
};
}
}
if (el.sharePlatforms) el.sharePlatforms.classList.toggle("hidden", hasNative);
// Copy link: copies the invitation plus the URL, ready to paste anywhere
// (including an Instagram caption). Brief confirmation, then reverts.
if (el.shareCopy) {
el.shareCopy.onclick = async () => {
recordShare();
const payload = `${line} ${url}`;
try {
await navigator.clipboard.writeText(payload);
} catch (e) {
const ta = document.createElement("textarea");
ta.value = payload;
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); } catch (_) {}
ta.remove();
}
const was = el.shareCopy.textContent;
el.shareCopy.textContent = t("share_copied", "Link copied");
setTimeout(() => { el.shareCopy.textContent = was; }, 1800);
};
}
}
// Clicking any explicit platform target counts as sharing (for the badge).
[el.shareX, el.shareFb, el.shareLi].forEach((a) => {
if (a) a.addEventListener("click", () => recordShare());
});
// Tap the quiet prompt to disclose the share panel (invitation line + targets).
if (el.shareOpen) {
el.shareOpen.addEventListener("click", () => {
el.shareOpen.classList.add("hidden");
el.shareOpen.setAttribute("aria-expanded", "true");
if (el.sharePanel) {
el.sharePanel.classList.remove("hidden");
requestAnimationFrame(() => el.sharePanel.classList.add("show"));
}
});
}
// The fleeting "look back" reveal. Reset to its collapsed state each win; the
// line only appears (and then self-erases) if the player taps the toggle.
let lookText = "";
let lookTimer = null;
let lookFade = null;
function buildLook(p) {
if (!el.look) return;
clearTimeout(lookTimer);
clearTimeout(lookFade);
lookText = p.attempt_text || "";
if (!lookText) {
el.look.classList.add("hidden");
return;
}
el.look.classList.remove("hidden");
el.lookBack.classList.remove("hidden");
el.lookBack.setAttribute("aria-expanded", "false");
el.lookLine.classList.remove("show");
el.lookLine.textContent = "";
}
if (el.lookBack) {
el.lookBack.addEventListener("click", () => {
el.lookBack.classList.add("hidden");
el.lookBack.setAttribute("aria-expanded", "true");
// The run-count line, and (if the climb earned one) the quieter "how you did"
// record beneath it. Both our own catalog strings, so building the node is safe.
el.lookLine.textContent = lookText;
if (readRecordText) {
const rec = document.createElement("span");
rec.className = "look-record";
rec.textContent = readRecordText;
el.lookLine.appendChild(document.createElement("br"));
el.lookLine.appendChild(rec);
}
requestAnimationFrame(() => el.lookLine.classList.add("show"));
// Let it linger, then fade out and reclaim the space so the eye returns to
// sharing or replaying. Under reduced motion we leave it in place: text that
// vanishes on a timer is hostile to anyone who reads slowly.
if (reduceMotion) return;
clearTimeout(lookTimer);
lookTimer = setTimeout(() => {
el.lookLine.classList.remove("show");
clearTimeout(lookFade);
lookFade = setTimeout(() => el.look.classList.add("hidden"), 900);
}, 6500);
});
}
// A quiet, adaptive nudge toward what is left to find: unseen fragments here,
// then the other places, then eight escapes from one.
function buildNudge(arc) {
if (!el.nudge) return;
el.nudge.classList.add("hidden");
el.nudge.textContent = "";
const total = flashCount(arc), seen = flashSeen(arc);
let text = "";
if (total && seen < total) {
text = (ui["nudge_frags"] || "There are {n} memories here you have not seen yet.")
.replace("{n}", String(total - seen));
} else if (!ARC_IDS.every((a) => flashCount(a) && flashSeen(a) >= flashCount(a))) {
text = ui["nudge_arcs"] || "Two other places are also called 8.";
} else {
text = ui["nudge_eight"] || "Eight escapes from one place is a different kind of remembering.";
}
if (text) { el.nudge.textContent = text; el.nudge.classList.remove("hidden"); }
}
// The win screen's primary button: on a first escape it invites the credits
// ("End Credits"); otherwise it replays ("Walk it again").
function setAgainMode(mode) {
againMode = mode;
if (el.again) el.again.textContent = (mode === "credits")
? (ui["end_credits"] || "End Credits")
: (ui["again"] || "Walk it again");
}
// Roll the credits (from the button OR the linger timer), then hand back the
// replay button and reveal the nudge. No-op once played, or if the player has
// already left the win screen.
function playCredits() {
clearTimeout(creditsAutoTimer);
if (againMode !== "credits") return;
if (el.win && el.win.classList.contains("hidden")) return;
openCredits(() => { setAgainMode("replay"); buildNudge(selectedArc); });
}
function showWin(p) {
el.winText.innerHTML = "";
(p.win_text || []).forEach((ln, i) => {
const div = document.createElement("div");
div.textContent = ln;
if (i === p.win_text.length - 1) div.className = "lead";
el.winText.appendChild(div);
});
buildLook(p);
buildShare();
clearTimeout(creditsAutoTimer);
if (winIsFirst) {
// First escape of this arc: the credits are the next beat. Hold the nudge
// back and turn the primary button into the invitation to roll them; the
// nudge and "Walk it again" arrive only after the credits have played, so
// the player has time to sit with the look-back and share first. If they
// just linger, the credits auto-roll after a readable dwell (the win screen
// returns after, so this only ever gives them more).
if (el.nudge) el.nudge.classList.add("hidden");
setAgainMode("credits");
creditsAutoTimer = setTimeout(playCredits, CREDITS_DWELL);
} else {
buildNudge(selectedArc);
setAgainMode("replay");
}
// Let the ending itself land first: the "look back" and share surfaces are
// hushed for a beat so the benediction is not sharing the moment with a
// scoreboard and a share sheet. Then they fade up.
el.win.classList.add("win-hush");
show(el.win);
const settle = () => el.win.classList.remove("win-hush");
if (reduceMotion) settle();
else setTimeout(settle, 1600);
}
async function loadSelect() {
const { arcs } = await get("/api/arcs");
ARCS_BY_ID = Object.fromEntries(arcs.map((a) => [a.id, a]));
renderArcCards(arcs);
el.body.dataset.skin = lastSkin(); // keep the last arc's colour on the landing
show(el.select);
revealSelect(); // returning from a loop: the ways are already known, show them
if (window.ambience) window.ambience.play("landing");
}
// Lines shown when the player admits doubt and is sent back to look again.
// Localized (ui|hesitate_1..4), with an English fallback per line.
const HESITATION_EN = [
"You hesitate. Look again.",
"You're not sure. You take another look.",
"Doubt stops you. Read it once more.",
"You hold back, and let your eyes travel over it again.",
];
function hesitationLine() {
const i = Math.floor(Math.random() * HESITATION_EN.length);
return ui["hesitate_" + (i + 1)] || HESITATION_EN[i];
}
// Commit the pending choice to the server and move on.
async function commit(confidence) {
const dir = pendingChoice;
// Movement sound, keyed to how long the player lingered and, if they answered
// the certainty prompt, how sure they said they were.
if (window.ambience) {
window.ambience.step(dir, performance.now() - decideStart, confidence);
}
el.confidence.classList.add("hidden");
let p;
try {
p = await post("/api/act", { choice: dir, confidence });
if (!p || !p.room || typeof p.correct !== "boolean") throw new Error("bad payload");
} catch (e) {
// Network blip or a bad response mid-commit. /api/act is NOT idempotent, so we
// must not just let the player re-decide against the stale render: the call may
// actually have landed and advanced (or reset) the server. Resync to the
// server's real current room and render THAT, so whatever actually happened,
// the next decision is made against what is truly there. If the server is also
// unreachable, fall back to restoring controls on the current render so the run
// is never soft-locked.
pendingChoice = null;
hesitated = false;
try {
const cur = await get("/api/room");
if (cur && cur.room) { renderRoom(cur); return; }
} catch (e2) { /* still unreachable; fall through to the best-effort restore */ }
el.controls.classList.remove("hidden");
if (current) buildTouch(current);
decideStart = performance.now();
return;
}
pendingChoice = null;
hesitated = false;
// Sparingly, when the player bolts back from a changed loop, add hurried
// running steps. Mostly on a real anomaly; rarely on a false alarm.
if (window.ambience && dir === "back" && Math.random() < (p.had_anomaly ? 0.22 : 0.05)) {
window.ambience.run(dir);
}
flash(p.correct);
noteAnomaly(selectedArc, p.anomaly); // collect a loop-aware NPC acknowledgement
// Hard mode: on a correct turn-back where TWO details had moved, pulse both
// lines so the player learns a second had also changed (keep scanning). Silent,
// post-decision, only when a double really happened. Give it a beat to be seen.
if (p.flare_props && p.flare_props.length >= 2) {
flareLines(p.flare_props);
await sleep(1100);
}
await sleep(1500);
if (p.won) {
// How this climb was won: steady (never guessed), cold (no touches), and
// nerve (the final call was a correct turn-back on a real change).
const marks = {
steady: !run.guessed,
cold: run.touches === 0,
nerve: !!p.had_anomaly && dir === "back",
};
winIsFirst = !((mem.wins[selectedArc] || 0) > 0);
recordWin(selectedArc, p.attempts || 1);
recordRun(marks, p.attempts || 1);
readRecordText = readRecord(marks);
showWin(p);
return;
}
// A wrong call resets to the start (server sends level 0). Re-render the
// restarted place, then, if this is the player's first reset, teach the rule.
const wasReset = !p.correct;
if (wasReset) run = freshRun(); // the climb broke; the next one starts clean
renderRoom(p);
maybeOnboard(wasReset);
}
// choice -> sometimes the game stops to ask how sure you are.
// The chance grows as you near the exit, and never fires twice in one turn.
el.controls.addEventListener("click", (e) => {
const btn = e.target.closest(".choice");
if (!btn) return;
pendingChoice = btn.dataset.choice;
el.controls.classList.add("hidden");
clearTouch(); // touches close once a call is committed
const level = (current && current.level) || 0;
const goal = (current && current.goal) || 8;
const chance = Math.min(0.85, 0.12 + level * (0.7 / goal));
if (!hesitated && Math.random() < chance) {
el.confidence.classList.remove("hidden");
} else {
commit(null);
}
});
// confidence -> certainty commits; doubt buys one more look and a re-decide.
el.confidence.addEventListener("click", (e) => {
const btn = e.target.closest("[data-conf]");
if (!btn || !pendingChoice) return;
const confidence = parseInt(btn.dataset.conf, 10);
if (confidence >= 3) {
commit(confidence);
return;
}
// Uncertain: don't commit. Return to the scene to decide again.
run.guessed = true; // admitting a guess this climb forfeits a "steady" escape
hesitated = true;
pendingChoice = null;
el.confidence.classList.add("hidden");
el.aside.textContent = hesitationLine();
el.aside.classList.add("show");
el.controls.classList.remove("hidden");
if (current) buildTouch(current); // let the room be touched again on re-look
});
if (el.exitTake) el.exitTake.addEventListener("click", takeExit);
if (el.endingBack) el.endingBack.addEventListener("click", loadSelect);
el.begin.addEventListener("click", enterCorridor);
el.giveup.addEventListener("click", loadSelect);
el.introBack.addEventListener("click", loadSelect);
// (the win screen's "Change scenario" was removed; use the backstory Back)
// "Walk it again" returns to the arc's own backstory screen: Begin replays it,
// and Back (on that screen) goes to scenario selection. That backstory Back is
// the route to change scenario, so the win screen needs no separate button.
el.again.addEventListener("click", async () => {
if (againMode === "credits") { playCredits(); return; }
const a = ARCS_BY_ID[selectedArc];
if (a) await chooseArc(a);
});
// --- collection + achievements (persistent, exportable) --------------------
// A per-player memory of what they have seen and done: which flashbacks, which
// arcs cleared and how, alternate endings, the NPC's acknowledgements. It lives
// in localStorage, unlocks achievements, and can be exported to an (obfuscated)
// JSON save. Because the NPC reacts to each player differently, no two full
// saves are alike.
const RELEASE_DAY = "2026-07-06"; // play on this local date...
const RELEASE_REVEAL = "2026-07-07"; // ...and the badge shows from here (all of earth past the 6th)
// Order matches the landing/select screen (server list_arcs: default first, then
// alphabetical), so the Recollections ledger and anything else iterating arcs
// reads in the same order the player sees on the way in.
const ARC_IDS = ["hallway-eight", "coach8", "stairway8"];
const NPC_PROP = { "hallway-eight": "figure", "stairway8": "figure", "coach8": "passenger" };
function blankMem() {
return { v: 1, flash: {}, flashText: {}, wins: {}, hardWins: {}, insaneWins: {}, clean: {}, ends: {}, npc: {},
shared: false, releaseDay: false, plays: 0, promos: [], melon: false, langs: [],
arcStarted: {},
records: { steady: false, cold: false, nerve: false, streak: 0, best: 0 } };
}
let mem = loadMem();
// `mem` now exists, so the Insane unlock gate can finally be evaluated. The first
// applySettings() ran before this (with mem in the temporal dead zone), so redo
// just the difficulty row to reveal an already-earned Insane on a fresh load.
try { applyDifficultyUI(); } catch (e) {}
function loadMem() {
try {
const raw = localStorage.getItem("h8_mem");
if (raw) return Object.assign(blankMem(), JSON.parse(raw));
} catch (e) {}
return blankMem();
}
function saveMem() {
try { localStorage.setItem("h8_mem", JSON.stringify(mem)); } catch (e) {}
if (el.achievements && !el.achievements.classList.contains("hidden")) renderAchievements();
}
function localDate() {
const d = new Date();
const p = (n) => String(n).padStart(2, "0");
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
}
function recordFlashback(arc, idx, line) {
if (idx == null) return;
const a = mem.flash[arc] || (mem.flash[arc] = []);
let dirty = false;
if (!a.includes(idx)) { a.push(idx); dirty = true; }
// Keep the fragment's own words so the collection can recap it later.
if (line) {
if (!mem.flashText) mem.flashText = {};
const t = mem.flashText[arc] || (mem.flashText[arc] = {});
if (t[idx] !== line) { t[idx] = line; dirty = true; }
}
if (dirty) saveMem();
}
function recordWin(arc, attempts) {
// Record the escape, and (if it was a hard/insane run) that tier's escape.
const diff = effectiveDifficulty();
if (diff === "hard") {
if (!mem.hardWins) mem.hardWins = {};
mem.hardWins[arc] = (mem.hardWins[arc] || 0) + 1;
} else if (diff === "insane") {
if (!mem.insaneWins) mem.insaneWins = {};
mem.insaneWins[arc] = (mem.insaneWins[arc] || 0) + 1;
}
mem.wins[arc] = (mem.wins[arc] || 0) + 1;
if (attempts <= 1) mem.clean[arc] = true;
saveMem();
}
// Personal records: a quiet, self-competition ledger of *how* runs were won. Not
// badges, not scored, never sent anywhere. Persisted in mem (so it rides along in
// the exported save) and surfaced on the collection page.
function recordRun(marks, attempts) {
const r = mem.records || (mem.records = { steady: false, cold: false, nerve: false, streak: 0, best: 0 });
if (marks.steady) r.steady = true;
if (marks.cold) r.cold = true;
if (marks.nerve) r.nerve = true;
// A run of consecutive escapes made without a single reset.
r.streak = attempts <= 1 ? (r.streak || 0) + 1 : 0;
r.best = Math.max(r.best || 0, r.streak);
saveMem();
}
// The fleeting "how you did" line for the win screen: one in-world sentence for
// the strongest thing about this climb, or nothing if it was an ordinary win.
function readRecord(marks) {
if (marks.nerve) return ui["read_nerve"] || "You turned back at the very last door, and you were right.";
if (marks.cold) return ui["read_cold"] || "You walked it without a second look.";
if (marks.steady) return ui["read_steady"] || "You never once called it a guess.";
return "";
}
function recordEnding(arc) { mem.ends[arc] = true; saveMem(); }
function recordShare() { if (!mem.shared) { mem.shared = true; saveMem(); } }
function recordNpc(arc, val) {
const m = mem.npc[arc] || (mem.npc[arc] = {});
m[val] = (m[val] || 0) + 1;
saveMem();
}
function recordPlay() {
mem.plays = (mem.plays || 0) + 1;
if (localDate() === RELEASE_DAY) mem.releaseDay = true;
saveMem();
}
// The loop-aware NPC twist: figures that turn/beckon ("knows"), talkers ("speaks").
function noteAnomaly(arc, anomaly) {
if (!anomaly) return;
if (anomaly.prop === NPC_PROP[arc] && (anomaly.val === "knows" || anomaly.val === "speaks")) {
recordNpc(arc, anomaly.val);
}
}
function flashCount(arc) {
const a = ARCS_BY_ID[arc];
return (a && a.flashbacks) || 0;
}
function flashSeen(arc) { return (mem.flash[arc] || []).length; }
// Each achievement is {id, test(mem)->bool}; names/descriptions are UI text.
const ACHS = [
{ id: "out_hallway-eight", test: () => (mem.wins["hallway-eight"] || 0) > 0 },
{ id: "out_stairway8", test: () => (mem.wins["stairway8"] || 0) > 0 },
{ id: "out_coach8", test: () => (mem.wins["coach8"] || 0) > 0 },
{ id: "out_all", test: () => ARC_IDS.every((a) => (mem.wins[a] || 0) > 0) },
{ id: "flawless", test: () => ARC_IDS.some((a) => mem.clean[a]) },
{ id: "eight_times", test: () => ARC_IDS.some((a) => (mem.wins[a] || 0) >= 8) },
{ id: "end_hallway-eight", test: () => !!mem.ends["hallway-eight"] },
{ id: "end_stairway8", test: () => !!mem.ends["stairway8"] },
{ id: "end_coach8", test: () => !!mem.ends["coach8"] },
{ id: "npc_knows", test: () => ARC_IDS.some((a) => mem.npc[a] && Object.keys(mem.npc[a]).length) },
{ id: "shared", test: () => !!mem.shared },
{ id: "opening_night", test: () => mem.releaseDay && localDate() >= RELEASE_REVEAL },
{ id: "flash_hallway-eight", test: () => flashCount("hallway-eight") > 0 && flashSeen("hallway-eight") >= flashCount("hallway-eight") },
{ id: "flash_stairway8", test: () => flashCount("stairway8") > 0 && flashSeen("stairway8") >= flashCount("stairway8") },
{ id: "flash_coach8", test: () => flashCount("coach8") > 0 && flashSeen("coach8") >= flashCount("coach8") },
{ id: "total_recall", test: () => ARC_IDS.every((a) => flashCount(a) > 0 && flashSeen(a) >= flashCount(a)) },
// How a run was won (formerly the "records" ledger): now achievements, so they
// stay hidden until earned like everything else.
{ id: "steady", test: () => !!(mem.records || {}).steady },
{ id: "cold", test: () => !!(mem.records || {}).cold },
{ id: "nerve", test: () => !!(mem.records || {}).nerve },
{ id: "streak", test: () => ((mem.records || {}).best || 0) >= 3 },
// Hard-mode escapes.
{ id: "hard_hallway-eight", test: () => (mem.hardWins || {})["hallway-eight"] > 0 },
{ id: "hard_stairway8", test: () => (mem.hardWins || {})["stairway8"] > 0 },
{ id: "hard_coach8", test: () => (mem.hardWins || {})["coach8"] > 0 },
{ id: "hard_all", test: () => ARC_IDS.every((a) => (mem.hardWins || {})[a] > 0) },
// Insane-tier escapes (the hidden difficulty that randomizes the baseline each
// run). Earnable only after Insane is unlocked, so they are NOT part of the
// unlock gate below (that would be a chicken-and-egg).
{ id: "insane_hallway-eight", test: () => (mem.insaneWins || {})["hallway-eight"] > 0 },
{ id: "insane_stairway8", test: () => (mem.insaneWins || {})["stairway8"] > 0 },
{ id: "insane_coach8", test: () => (mem.insaneWins || {})["coach8"] > 0 },
{ id: "insane_all", test: () => ARC_IDS.every((a) => (mem.insaneWins || {})[a] > 0) },
{ id: "melon", test: () => !!mem.melon }, // studio badge (kept for later use)
];
// Insane unlocks only for a true completionist: every achievement earned, EXCEPT
// the ones that cannot be earned through skill right now (the held studio badge,
// the date-locked opening-night badge) and the Insane badges themselves. Nobody
// is expected to reach this for weeks. Kept out of the difficulty picker until
// then, so Insane ships hidden and unlockable, never breaking the other modes.
const INSANE_GATE_EXCLUDE = new Set([
"melon", "opening_night",
"insane_hallway-eight", "insane_stairway8", "insane_coach8", "insane_all",
]);
function insaneUnlocked() {
// Defensive: this is reachable very early (effectiveDifficulty -> headers on the
// first fetch) before ACHS is initialized. If achievements cannot be computed
// yet, Insane is simply locked (the correct default), never a load-time crash.
try {
const state = computeAch();
return ACHS.every((a) => INSANE_GATE_EXCLUDE.has(a.id) || state[a.id]);
} catch (e) {
return false;
}
}
// English badge text (name + one-line description). Discovered by playing; no
// spoilers of the specific detail to watch.
const ACH_TEXT = {
"out_hallway-eight": ["Out of Hallway 8", "Escape the corridor."],
"out_stairway8": ["Out of Stairway 8", "Reach the ground floor."],
"out_coach8": ["Out of Coach 8", "Step off the train."],
"out_all": ["All the way out", "Escape all three places."],
"flawless": ["Flawless", "Escape a place without a single reset."],
"eight_times": ["Eight times through", "Escape one place eight times."],
"end_hallway-eight": ["The lobby that won't open", "Find Hallway 8's other ending."],
"end_stairway8": ["The stairs that only climb", "Find Stairway 8's other ending."],
"end_coach8": ["The platform that isn't yours", "Find Coach 8's other ending."],
"npc_knows": ["It knows you", "Be acknowledged by the one who is always ahead."],
"shared": ["Passed it on", "Send the place to someone else."],
"opening_night": ["Opening night", "Play on the day it opened."],
"flash_hallway-eight": ["Hallway, remembered", "See every fragment in Hallway 8."],
"flash_stairway8": ["Stairway, remembered", "See every fragment in Stairway 8."],
"flash_coach8": ["Coach, remembered", "See every fragment in Coach 8."],
"total_recall": ["Total recall", "See every last fragment, everywhere."],
"steady": ["Steady", "Escape without a single guess."],
"cold": ["Cold read", "Escape without a second look."],
"nerve": ["Nerve", "Turn back at the final door, and be right."],
"streak": ["On a roll", "Three clean escapes in a row."],
"hard_hallway-eight": ["Hallway, harder", "Escape Hallway 8 on hard."],
"hard_stairway8": ["Stairway, harder", "Escape Stairway 8 on hard."],
"hard_coach8": ["Coach, harder", "Escape Coach 8 on hard."],
"hard_all": ["Nowhere left soft", "Escape all three on hard."],
"insane_hallway-eight": ["Hallway, unmade", "Escape Hallway 8 on insane."],
"insane_stairway8": ["Stairway, unmade", "Escape Stairway 8 on insane."],
"insane_coach8": ["Coach, unmade", "Escape Coach 8 on insane."],
"insane_all": ["Trust nothing", "Escape all three on insane."],
"melon": ["Melon Supporter", "Thank you for keeping the lights on. From all of us at Melon Labs."],
};
function computeAch() {
const out = {};
ACHS.forEach((a) => { try { out[a.id] = !!a.test(); } catch (e) { out[a.id] = false; } });
return out;
}
// Per-badge line glyphs, drawn in the game's own hand: thin single-weight
// strokes on a 24 grid, no fill, inheriting the tile colour (dim when locked,
// accent when earned). Elegant and a little cryptic, never loud or cartoonish.
const ACH_ICON = {
// three ways out: a door swung open, stairs let down, a car with an open side
"out_hallway-eight": '',
"out_stairway8": '',
"out_coach8": '',
"out_all": '',
// flawless: a whole, unbroken gem
"flawless": '',
// eight times: the mark of the place, twice-drawn
"eight_times": '',
// wrong endings: a door with no give, stairs that only rise, a leaving platform
"end_hallway-eight": '',
"end_stairway8": '',
"end_coach8": '',
// it knows you: an eye that is always ahead
"npc_knows": '',
// passed it on: three points, joined and sent outward
"shared": '',
// opening night: a first, thin moon
"opening_night": '',
// fragments remembered (per place): a single spark
"flash_hallway-eight": '',
"flash_stairway8": '',
"flash_coach8": '',
// total recall: every spark, a small constellation
"total_recall": '',
// how a run was won: steady (a level), cold read (a snow star), nerve (a
// return arrow), streak (three in a row).
"steady": '',
"cold": '',
"nerve": '',
"streak": '',
// hard-mode escapes: a sharpened, nested gem; all-three is a small trio.
"hard_hallway-eight": '',
"hard_stairway8": '',
"hard_coach8": '',
"hard_all": '',
"insane_hallway-eight": '',
"insane_stairway8": '',
"insane_coach8": '',
"insane_all": '',
// the studio: handled specially (a full-colour melon), see achIconSvg.
"melon": "",
};
// The one deliberate break from the monochrome line style: a warm, full-colour
// watermelon slice for the studio-supporter badge. A little thank-you that pops.
const ACH_MELON_SVG =
'';
// A padlock for a badge not yet earned: clearer than an abstract node, and it
// keeps the specific glyph (and its hint) hidden until the moment it unlocks.
const ACH_LOCKED_ICON = '' +
'';
function achIconSvg(id, on) {
if (id === "melon" && on) return ACH_MELON_SVG; // the one full-colour badge
const inner = on ? (ACH_ICON[id] || ACH_LOCKED_ICON) : ACH_LOCKED_ICON;
return '';
}
// Localized badge name + description, falling back to the English ACH_TEXT.
function achText(id) {
const fb = ACH_TEXT[id] || [id, ""];
return [ui["ach_n_" + id] || fb[0], ui["ach_d_" + id] || fb[1]];
}
// --- (light) obfuscation for the save file: a keystream XOR seeded with a
// phrase the player never sees, so a save is not human-readable and the number
// of achievements cannot be eyeballed from the JSON. Not real cryptography. ---
function keystream(seed, len) {
let h = 2166136261 >>> 0;
for (const c of seed) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619) >>> 0; }
const out = new Uint8Array(len);
let x = h || 1;
for (let i = 0; i < len; i++) {
x ^= x << 13; x >>>= 0; x ^= x >> 17; x ^= x << 5; x >>>= 0;
out[i] = x & 0xff;
}
return out;
}
const SEED = "melon8";
function encBlob(obj) {
const data = new TextEncoder().encode(JSON.stringify(obj));
const ks = keystream(SEED, data.length);
const out = new Uint8Array(data.length);
for (let i = 0; i < data.length; i++) out[i] = data[i] ^ ks[i];
let s = ""; out.forEach((b) => (s += String.fromCharCode(b)));
return btoa(s);
}
function decBlob(str) {
const bytes = Uint8Array.from(atob(str), (c) => c.charCodeAt(0));
const ks = keystream(SEED, bytes.length);
const out = new Uint8Array(bytes.length);
for (let i = 0; i < bytes.length; i++) out[i] = bytes[i] ^ ks[i];
return JSON.parse(new TextDecoder().decode(out));
}
// The player's chosen settings (difficulty, reading register, display, language)
// travel with the save so a device swap carries the whole setup, not just
// progress. Kept in localStorage; gathered here and restored on import.
const SETTING_KEYS = ["h8_diff", "h8_register", "h8_text", "h8_bright", "h8_motion", "h8_lang"];
function gatherSettings() {
const s = {};
SETTING_KEYS.forEach((k) => { const v = localStorage.getItem(k); if (v != null) s[k] = v; });
return s;
}
function applyImportedSettings(s) {
if (!s || typeof s !== "object") return;
SETTING_KEYS.forEach((k) => {
if (s[k] != null) { try { localStorage.setItem(k, s[k]); } catch (e) {} }
});
// Re-sync the in-memory choices and the whole UI to the restored settings.
difficulty = localStorage.getItem("h8_diff") || "normal";
register = localStorage.getItem("h8_register") || "normal";
const newLang = localStorage.getItem("h8_lang");
if (newLang && newLang !== lang) { lang = newLang; document.documentElement.lang = lang.split("_")[0]; }
applySettings();
applyUI();
}
function exportSave() {
const payload = {
game: "8", version: 1,
memory: encBlob(mem), // NPC memory + collection, obfuscated
achievements: encBlob(computeAch()), // unlocks, obfuscated
settings: encBlob(gatherSettings()), // difficulty, reading, display, language
};
const blob = new Blob([JSON.stringify(payload, null, 1)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url; a.download = "eight-save.json";
document.body.appendChild(a); a.click(); a.remove();
setTimeout(() => URL.revokeObjectURL(url), 1000);
}
function importSave(file) {
const reader = new FileReader();
reader.onload = () => {
try {
const payload = JSON.parse(reader.result);
const loaded = decBlob(payload.memory);
mem = Object.assign(blankMem(), loaded); // decrypted only inside the game
saveMem();
if (payload.settings) {
try { applyImportedSettings(decBlob(payload.settings)); } catch (e) {}
}
rebuildLangPicker(); // unlocked languages persist and reappear in the picker
renderAchievements();
} catch (e) { /* wrong file / wrong seed: ignore */ }
};
reader.readAsText(file);
}
function renderAchievements() {
if (!el.achGrid) return;
const state = computeAch();
// "View credits" appears once any place has been escaped (the credits also
// roll automatically the first time you escape each arc).
if (el.creditsRow) {
const anyWin = Object.values(mem.wins || {}).some((v) => v > 0);
el.creditsRow.classList.toggle("hidden", !anyWin);
}
// Only earned achievements appear; the board fills in as they unlock, so a
// new player is never shown a wall of padlocks or a count that spoils how many
// there are. Kept in ACHS order (grouped), which reads as a natural sort.
const earned = ACHS.filter((a) => state[a.id]);
el.achGrid.innerHTML = "";
if (!earned.length) {
const empty = document.createElement("p");
empty.className = "ach-empty";
empty.textContent = ui["ach_empty"] || "Nothing yet. Escape a place to begin.";
el.achGrid.appendChild(empty);
}
earned.forEach((a) => {
const [name, desc] = achText(a.id);
const tile = document.createElement("div");
tile.className = "ach-tile on";
tile.innerHTML = achIconSvg(a.id, true) +
`
` +
`
${name}
` +
`
${desc}
`;
el.achGrid.appendChild(tile);
});
// Flashback collection: a dot per fragment, filled when seen. A seen dot is a
// button that recaps its fragment's own words below the ledger.
if (el.achFlash) {
el.achFlash.innerHTML = "";
ARC_IDS.forEach((arc) => {
const total = flashCount(arc);
if (!total) return;
const seen = new Set(mem.flash[arc] || []);
const row = document.createElement("div");
row.className = "flash-row";
row.dataset.skin = (ARCS_BY_ID[arc] || {}).skin || "hallway";
const title = (ARCS_BY_ID[arc] || {}).title || arc;
const dots = document.createElement("span");
dots.className = "flash-dots";
for (let i = 0; i < total; i++) {
const got = seen.has(i);
const dot = document.createElement("button");
dot.type = "button";
dot.className = "flash-dot" + (got ? " on" : "");
dot.disabled = !got;
if (got) {
dot.setAttribute("aria-label", (ui["col_recall"] || "Recall this fragment"));
dot.addEventListener("click", () => recapFragment(arc, i, dot));
}
dots.appendChild(dot);
}
const arcLbl = document.createElement("span");
arcLbl.className = "flash-arc"; arcLbl.textContent = title;
const num = document.createElement("span");
num.className = "flash-num"; num.textContent = `${seen.size}/${total}`;
row.appendChild(arcLbl); row.appendChild(dots); row.appendChild(num);
el.achFlash.appendChild(row);
});
// A single quiet line under the ledger where a tapped fragment surfaces.
if (el.colRecap) el.colRecap.textContent = colRecapText || "";
}
}
// The last fragment the player asked to recall, so a re-render keeps it shown.
let colRecapText = "";
function recapFragment(arc, idx, dot) {
// Prefer the fragment in the CURRENT session language (from the localized arc
// list), falling back to the text stored at collection time only if that is
// unavailable (e.g. an old save loaded offline).
const cur = ((ARCS_BY_ID[arc] || {}).flash_texts || [])[idx];
const stored = ((mem.flashText && mem.flashText[arc]) || {})[idx];
colRecapText = cur || stored || (ui["col_recall_empty"] ||
"A fragment you have seen, its words already fading.");
if (el.achFlash) el.achFlash.querySelectorAll(".flash-dot.recall")
.forEach((d) => d.classList.remove("recall"));
if (dot) dot.classList.add("recall");
if (el.colRecap) {
el.colRecap.textContent = colRecapText;
el.colRecap.classList.remove("show");
requestAnimationFrame(() => el.colRecap.classList.add("show"));
}
}
function openAchievements() {
if (!el.achievements) return;
renderAchievements();
el.achievements.classList.remove("hidden");
if (el.achClose) el.achClose.focus();
}
function closeAchievements() { if (el.achievements) el.achievements.classList.add("hidden"); }
if (el.achOpen) el.achOpen.addEventListener("click", openAchievements);
if (el.achClose) el.achClose.addEventListener("click", closeAchievements);
if (el.achievements) {
el.achievements.addEventListener("click", (e) => { if (e.target === el.achievements) closeAchievements(); });
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && !el.achievements.classList.contains("hidden")) closeAchievements();
});
}
if (el.achSave) el.achSave.addEventListener("click", exportSave);
if (el.achLoad) el.achLoad.addEventListener("click", () => el.achFile && el.achFile.click());
if (el.achFile) el.achFile.addEventListener("change", (e) => {
const f = e.target.files && e.target.files[0];
if (f) importSave(f);
e.target.value = "";
});
// Erase: nuke the local memory (runs, achievements, recollections, records)
// back to a blank slate. Gated behind a deliberate, undoable-warning dialog.
// Display/language settings are preferences, not run-memory, so they are kept.
function eraseMemory() {
try { localStorage.removeItem("h8_mem"); } catch (e) {}
// The first-reset onboarding is part of what the place remembers of you, so a
// wipe must forget it too: otherwise the instructions never return, and a
// newly-blank player is never taught the rule on their first wrong call.
try { localStorage.removeItem("h8_onboarded"); } catch (e) {}
mem = blankMem();
saveMem();
renderAchievements();
}
const closeErase = () => { if (el.eraseConfirm) el.eraseConfirm.classList.add("hidden"); };
if (el.achErase) el.achErase.addEventListener("click", () => {
if (el.eraseConfirm) el.eraseConfirm.classList.remove("hidden");
});
if (el.eraseCancel) el.eraseCancel.addEventListener("click", closeErase);
if (el.eraseOk) el.eraseOk.addEventListener("click", () => { eraseMemory(); closeErase(); });
if (el.eraseConfirm) {
el.eraseConfirm.addEventListener("click", (e) => { if (e.target === el.eraseConfirm) closeErase(); });
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && !el.eraseConfirm.classList.contains("hidden")) closeErase();
});
}
// keep a lookup of arcs so "walk it again" can restart the same one
let ARCS_BY_ID = {};
(async function boot() {
document.documentElement.lang = lang.split("_")[0];
await initLangPicker();
await applyUI();
const { arcs } = await get("/api/arcs");
ARCS_BY_ID = Object.fromEntries(arcs.map((a) => [a.id, a]));
renderArcCards(arcs);
el.body.dataset.skin = lastSkin(); // returning visitors keep their arc colour
show(el.select);
// Let the title "8" and the two lead lines stand alone for a beat, then fade
// the ways through in. An early interaction reveals them at once.
setTimeout(revealSelect, 1400);
// Do NOT create the AudioContext at load. On mobile Chrome (and inside the
// Spaces cross-origin iframe) a context constructed before any user gesture
// can get stuck 'suspended' and a later resume() will not reliably start it,
// which is why the landing/arc audio was silent on mobile. Instead the context
// is created lazily INSIDE the first gesture (unlockAudio below), which mobile
// Chrome requires, and the landing theme starts the instant it can be heard.
// Unlock audio on the first real gesture. This is the load-bearing part for
// mobile (and for the Spaces iframe): it must resume the context
// SYNCHRONOUSLY inside the gesture, before any await, or iOS/Safari and mobile
// Chrome will silently refuse to start audio. So it is registered in the
// CAPTURE phase and is NOT {once:true}: every early gesture (including tapping
// an arc, which then awaits a fetch before playing) gets a chance to unlock,
// and the landing theme is rebuilt the moment we can actually hear it. The
// handlers remove themselves once the context is running.
const unlockEvents = ["pointerdown", "touchstart", "keydown"];
const unlockAudio = () => {
const a = window.ambience;
if (!a) return;
const wasSuspended = !a.ctx || a.ctx.state !== "running";
a.unlock();
// Rebuild the landing theme now that it can be heard, but only when we just
// came out of a suspended state and are still on the select screen (so a tap
// that is choosing an arc does not restart it).
if (wasSuspended && el.select && !el.select.classList.contains("hidden")) {
a.play("landing");
}
if (a.ctx && a.ctx.state === "running") {
unlockEvents.forEach((ev) =>
document.removeEventListener(ev, unlockAudio, true)
);
}
};
unlockEvents.forEach((ev) =>
document.addEventListener(ev, unlockAudio, true)
);
// The very first interaction (any kind) reveals the ways, unless it is
// choosing an arc (which leaves the landing straight away). Audio unlock is
// handled separately above so this can stay a one-shot reveal.
const firstGesture = (e) => {
if (e.target.closest && e.target.closest(".arc-card")) return;
revealSelect();
};
["pointerdown", "keydown", "touchstart"].forEach((ev) =>
document.addEventListener(ev, firstGesture, { once: true })
);
})();