// ============================================================
// STEINS;GATE — Visual Novel / Story Mode
// ============================================================
// • Faithful chapter-based storyline (5 chapters, branching scenes)
// • Progress unlocked by chatting with AI characters via mail
// • Visual novel renderer (typewriter dialogue, character portraits,
// branching choices, scene transitions, name plates)
// • Save state in localStorage
// • CG Gallery, World Line Map, Game Stats
// ============================================================
const { useState: vnUS, useEffect: vnUE, useRef: vnUR, useMemo: vnUM, useCallback: vnUC } = React;
// ─── CHARACTERS in story ────────────────────────────────────────────────────
// Use existing PNGs + an Okabe placeholder
const STORY_CAST = {
okabe: { name: "HOUOUIN KYOUMA", real: "Rintarou Okabe", color: "#c8920a", img: null },
kurisu: { name: "MAKISE KURISU", real: "Christina", color: "#e08868", img: "img/kurisu.png" },
mayuri: { name: "SHIINA MAYURI", real: "Mayushii", color: "#9ad8d2", img: "img/mayuri.png" },
daru: { name: "DARU", real: "Itaru Hashida", color: "#7a96da", img: "img/daru.png" },
faris: { name: "FARIS NYANNYAN", real: "Akiha Rumiho", color: "#dc7aaa", img: "img/faris.png" },
moeka: { name: "KIRYUU MOEKA", real: "Shining Finger",color: "#b486dc", img: "img/moeka.png" },
suzuha: { name: "SUZUHA AMANE", real: "John Titor", color: "#d8c46a", img: "img/suzuha.png" },
narrator: { name: "READING STEINER", real: "", color: "#a0c0e0", img: null },
};
// ─── CHAPTERS ───────────────────────────────────────────────────────────────
// Each chapter: title, unlock-gate, scenes (linear w/ optional choices), reward
const CHAPTERS = [
{
id: "ch1",
num: 1,
title: "Akihabara Convergence",
subtitle: "Radio Kaikan · July 28, 2010 · 13:00",
setting: "α attractor field — Operation Skuld begins",
bg: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYk-34j3fO1vaqJdRJN89IEiP5ydiuHk9OaVT7DKnoKYd1tdc4g_i7iA81bmbEpy9zpxPH9FIzg1ZmMx533Prz-bcAtFEbaj8ypdYHNjkpTJt38a-S_FnkvDt8Pml6dQP3NGbgessvW536wwgInD_USOQx7uXK0m5zCjxe1uhpOvNRjmdz5JsILzE0Kqj/s1920-rw/steins-gate-wallpapers-1.jpg",
unlock: { type: "free" },
summary: "Mayuri drags Okabe to a time-travel press conference at Radio Kaikan. There, he finds the body of a girl who shouldn't exist — Makise Kurisu, the woman whose paper he had attended to mock.",
scenes: [
{ who: "narrator", text: "July 28th, 2010. The summer of the year a chosen nation finally believed in time travel. The streets of Akihabara hum with vending-machine ozone and the shouts of barkers." },
{ who: "mayuri", text: "Tutturu~! Okarin, hurry up! The lecture's about to start!", emote: "happy" },
{ who: "okabe", text: "Mayuri, a true mad scientist does not bend to schedules — schedules bend to HIM! MWAHAHAHA!" },
{ who: "okabe", text: "...also, what was the lecture about again?" },
{ who: "mayuri", text: "Tii-meeee tray-belling~ The young professor invented it!" },
{ who: "narrator", text: "The auditorium was already packed. The speaker — Tennouji Yuugo? No, Tennouji was the landlord. This man called himself..." },
{ who: "narrator", text: "Dr. Saionji. Time-machine theorist. His Z-Theory contradicted itself in the third slide. Okabe scoffed." },
{ who: "okabe", text: "Mayuri, this is FRAUD. The man is rebranding John Titor's IRC posts. We're leaving." },
{ choice: true, options: [
{ label: "Search the upper floors.", next: 0 },
{ label: "Yell at the speaker.", next: 0, flavor: "okabe" },
]},
{ who: "narrator", text: "The eighth floor was empty except for a girl, alone, slumped against the wall. Red on red on red." },
{ who: "kurisu", text: "...Okabe...?", emote: "wounded" },
{ who: "okabe", text: "How... how do you know my name?" },
{ who: "kurisu", text: "It's already... happening again... I have to tell you. Don't... 1.048596...", emote: "wounded" },
{ who: "narrator", text: "She collapsed. Okabe's phone — buzzing. He sent a panicked text to Daru: 'Mayuri. Murder. Help.'" },
{ who: "narrator", text: "And the world tore in half." },
{ who: "narrator", text: "Vertigo. Static. The corridor empty. Kurisu's body — gone. The phone signal — sent yet undelivered. The auditorium below — empty, silent, locked." },
{ who: "narrator", text: "READING STEINER. The mad scientist's curse. To remember a world line that no longer exists." },
],
reward: {
type: "email",
email: {
id: "story_msg_1",
from: "system@future-gadget-lab.jp",
fromName: "FG. LAB · SYSTEM",
subject: "[CHAPTER 1] Reading Steiner online",
preview: "Anomaly logged. World line shift detected without phonewave activation.",
body: "// LAB SYSTEM // \n\nAnomaly logged. World line shift detected without phonewave activation.\n\nSubject: HOUOUIN KYOUMA\nObserved capability: retain memory across attractor shifts (\"Reading Steiner\")\nRecommended action: do nothing. Do not tell Daru. Do not tell Mayuri.\n\nThe lab is now your shelter. The mailbox is now your weapon.\n\n— FG.LAB",
date: new Date(Date.now() - 86400000 * 12).toISOString(),
read: false, starred: true, folder: "inbox",
labels: ["STORY", "Ch.1"],
},
},
achievement: { id: "ach_steiner", name: "Reading Steiner Activated", desc: "Remembered something the world forgot." },
},
{
id: "ch2",
num: 2,
title: "Future Gadget #8",
subtitle: "The lab · Several days later",
setting: "The microwave heats more than just bananas",
bg: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU0vc2zBGbDJBCh08cuch_ORugm_zdKtYJZ0fFZS5Sdz5fCOTiFF7V1kimMQyutiM6J451FO1uqHCUBAJkd_ZAJKFafXpPNJKbXD_E6EP-JllNDhRe0bJuDcbSh8GxI-2-FUYI3eKz0dkwZH4-LjiQjs2NX5K6i6YCmzsSWUvJHzbhGuONw0KR2P8fUUXv/s1920-rw/steins-gate-wallpapers-3.jpg",
unlock: { type: "email_to", who: "barrel-titor@2ch.net", count: 1, label: "Send 1 email to Daru" },
summary: "Daru reverse-engineers an old microwave. Mayuri's banana goes in green and comes out... gel. Through the bars of physics, a message slips back six minutes.",
scenes: [
{ who: "daru", text: "okarin. okarin. OKARIN. you HAVE to see this. the microwave is doing the thing." },
{ who: "okabe", text: "Daru, I have just returned from a glimpse beyond the veil. Speak slowly, peasant." },
{ who: "daru", text: "ok so. mayuri put a banana in. came out. gel. like, fully translucent, dripping gel. that's not how microwaves work man." },
{ who: "mayuri", text: "Mayushii will name it! Banana-no-Mi! Banana-no-Mi degeshou~", emote: "happy" },
{ who: "okabe", text: "Show me. SHOW me. This is no longer a microwave — this is FUTURE GADGET NUMBER EIGHT." },
{ who: "daru", text: "i was gonna call it the gel-anator but ok" },
{ who: "narrator", text: "It happened that night. Daru typed a message into the prototype — 'lottery numbers test 1' — addressed to himself, three days ago." },
{ who: "narrator", text: "The microwave hummed. The lights browned. The phone chirped." },
{ who: "okabe", text: "Daru. You won the lottery. You won the lottery THREE DAYS AGO. But you didn't, because you DIDN'T BUY THE TICKET, because you NEVER NEEDED TO." },
{ who: "daru", text: "...okarin. did. did we just text the past." },
{ who: "okabe", text: "We have built it, Daru. The world's first... DELORIANTABLE NETWORKING MICROWAVE. THE D-MAIL." },
{ who: "narrator", text: "Reading Steiner whispered. 'You have remembered the version where Daru did not cash the ticket. The other version is now the real one.'" },
{ who: "narrator", text: "Outside, an unmarked black van with the SERN logo on the bumper rolled past, a little too slowly." },
],
reward: {
type: "gadget",
label: "PHONEWAVE UNLOCKED — open the right rail",
email: {
id: "story_msg_2",
from: "system@future-gadget-lab.jp",
fromName: "FG. LAB · SYSTEM",
subject: "[CHAPTER 2] Phonewave (name subject to change) online",
preview: "Future Gadget #8 calibrated. 36-character payload. Bananas not included.",
body: "// LAB SYSTEM //\n\nFuture Gadget #8 — codename PHONEWAVE — calibrated and online.\n\nMax payload: 36 characters via SERN's Large Hadron Collider.\nWarning: each transmission shifts the attractor field. Use sparingly.\n\nThe right-rail D-Mail panel is now armed.\n\n— FG.LAB",
date: new Date(Date.now() - 86400000 * 9).toISOString(),
read: false, starred: false, folder: "inbox",
labels: ["STORY", "Ch.2"],
},
},
achievement: { id: "ach_phonewave", name: "Phonewave online", desc: "Future Gadget #8 calibrated." },
},
{
id: "ch3",
num: 3,
title: "The IBN 5100",
subtitle: "Yanabayashi Shrine · Akiba",
setting: "A 1975 IBM clone. The only key to SERN's encrypted core.",
bg: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OpRUPIRkulhDybyZIC-qeLEn7hbrXOk5uWv6T1K3_yuJ0MzyGT4rBtu7RQ9R9cduH5Vnjb4ZQEmJ9m2bWC1bTkong7N4-gaCpahDqOwtnZGFJx1cDTPgLzO410D63ciE4VEjRJt7IRbRvn-RnkpuOqxCm638fsWyBLG-NRAx4PBryy_WFenkuebvRk3F/s1920-rw/steins-gate-wallpapers-5.jpg",
unlock: { type: "dmail", count: 1, label: "Send 1 D-Mail via Phonewave" },
summary: "Suzuha vanishes. Faris hosts a Rai-Net tournament. The prize: a vintage IBN 5100 — the impossible key to the SERN database.",
scenes: [
{ who: "narrator", text: "The Rai-Net Akiba Cup. The grand prize: a vintage IBN 5100, courtesy of one Akiha Rumiho — a.k.a. Faris NyanNyan, daughter of half of Akihabara's land deeds." },
{ who: "faris", text: "Welcome, Master-kun~ Faris will let you have the prize, nyaa~ but you must defeat Faris first.", emote: "playful" },
{ who: "okabe", text: "I am the mad scientist HOUOUIN KYOUMA. Card games are beneath me. ...How do you play this." },
{ who: "daru", text: "okarin you have not even SHUFFLED you have the dad card on top, the mech card middle, the moe card on the bottom, classic n00b" },
{ who: "narrator", text: "He won. Of course he won. Reading Steiner had let him remember three earlier failed runs." },
{ who: "faris", text: "Master-kun is a meanie nyaa~ ... but a deal is a deal. Faris will bring the IBN 5100 to the lab. Take care of it.", emote: "soft" },
{ who: "narrator", text: "That night, the lab was quiet. The IBN 5100, that beige slab, hummed in the corner like an idol." },
{ who: "okabe", text: "With this, we breach SERN. With this, we read what they have done. With this..." },
{ who: "daru", text: "okarin. uh. i decrypted the first archive." },
{ who: "daru", text: "i don't think you should read it." },
{ choice: true, options: [
{ label: "Read it anyway.", next: 0 },
{ label: "Tell Daru to delete it.", next: 0, flavor: "okabe" },
]},
{ who: "okabe", text: "...ECHELON intercept logs. ROUNDER detainments. Subject experiments... 'time-travel survivors'... mortality 73%..." },
{ who: "okabe", text: "Daru. Mayuri must not know. Mayuri must NEVER know about this room." },
{ who: "narrator", text: "Outside, somewhere in the Tokyo grid, a flip-phone rang in a darkened apartment. A voice answered with two letters: 'F.B.'" },
],
reward: {
type: "email",
email: {
id: "story_msg_3",
from: "suzuha.amane@ibm5100.net",
fromName: "Suzuha Amane",
subject: "You found it. Now you must hide it.",
preview: "The IBN 5100 must never enter SERN's hands. Especially not Moeka's.",
body: "Okabe.\n\nYou found the IBN 5100. I am proud of you.\nNow you must hide it. SERN's Rounders are already moving. Trust no one whose past you cannot verify.\n\nEspecially not Moeka.\n\n— S.A.",
date: new Date(Date.now() - 86400000 * 6).toISOString(),
read: false, starred: true, folder: "inbox",
labels: ["STORY", "Ch.3", "URGENT"],
},
},
achievement: { id: "ach_ibn", name: "IBN 5100 secured", desc: "Pulled the key from the shrine." },
},
{
id: "ch4",
num: 4,
title: "The Rounder",
subtitle: "August 13 · 20:14",
setting: "Mayuri must not die. Mayuri must not die. Mayuri must not die.",
bg: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECwdwkLBwboJzfb6IiIijqCp4BQvy1e6rDm9bY7EhyB_8DPX2eqIo1q-RAlJ_CLLQ-3CQOC4fLmQOIZ-Jpv66JN94tq5KB1e4b4WDufxsw3cK-OAy2ekfxy-3H5QiwljrWxIm1rEQfB8RsnnfeSilzztjDorAOPul2vJKcZIgRD96zsWjA7R83DOcu_lx/s1920-rw/steins-gate-wallpapers-32.jpg",
unlock: { type: "email_to", who: "nyan@future-gadget-lab.jp", count: 1, label: "Send 1 email to Faris" },
summary: "Moeka's loyalty is to a name and a phone, not a person. A pistol. The lab. A girl in a white sundress.",
scenes: [
{ who: "narrator", text: "Moeka Kiryuu had been at the lab three weeks. She typed only via her phone. She spoke only when looked at. Nobody saw her bring the IBN 5100 lookup tool." },
{ who: "moeka", text: "FB.", emote: "blank" },
{ who: "narrator", text: "She had texted: 'IBN 5100 confirmed at FG.LAB. Awaiting orders.' FB had replied with the address of a back-alley arms dealer in Kabukichou." },
{ who: "okabe", text: "Mayuri. Stay behind me. Mayuri, do you hear me. STAY behind me." },
{ who: "mayuri", text: "Okarin... why is Moe-chan crying...?", emote: "soft" },
{ who: "moeka", text: "I'm sorry. FB said the IBN 5100 must not stay with you.", emote: "blank" },
{ who: "narrator", text: "The pistol. The crack. The crumple of yellow fabric." },
{ who: "okabe", text: "MAYURI! MAYURI! NO. NO. NO NO NO NO —" },
{ who: "narrator", text: "Reading Steiner shrieked. The world line ripped. Time-leap activated. Five hours to August 13. Five hours to August 13." },
{ who: "narrator", text: "And again." },
{ who: "narrator", text: "And again." },
{ who: "narrator", text: "Every world line ended in a yellow shape on the ground." },
{ who: "narrator", text: "Mayuri's death is an attractor. It pulls all probabilities toward it. It is the convergence." },
{ who: "narrator", text: "...He had to leave the α attractor field entirely. He had to undo every D-Mail he had ever sent. He had to wound himself before he had wounded anyone else." },
],
reward: {
type: "email",
email: {
id: "story_msg_4",
from: "kurisu.makise@viktor-kondria.org",
fromName: "Makise Kurisu",
subject: "I know what you've been doing.",
preview: "Tell me everything. From the beginning. I will help you escape this loop.",
body: "Okabe.\n\nTell me everything. From the beginning. I'll help you escape this loop.\n\nDo not lie. Do not protect me from the data.\n\n— Kurisu",
date: new Date(Date.now() - 86400000 * 3).toISOString(),
read: false, starred: true, folder: "inbox",
labels: ["STORY", "Ch.4"],
},
},
achievement: { id: "ach_loop", name: "Trapped in α", desc: "Witnessed Mayuri's convergence." },
},
{
id: "ch5",
num: 5,
title: "Steins Gate",
subtitle: "August 21 · 20:14 · Final attempt",
setting: "The choice that breaks both attractor fields. The faked death. The promise.",
bg: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKtaMzG4Duju7IrJpw87_YjisaRibRhnKaAY4TcvWktXMItlzBriEi8xxgDMUQOqIFE8GVNjVAExObJwxX2EDLormwB7AP1vzYgQmSL2cN-5BQYNgWbPkBeD_zCJMyJRD6t-vuMP_vzz-qXgk_wEyzXCX0YnF4K3U2S0z7uXms67BF7jCd9wBKR0TQGMb/s1920-rw/steins-gate-wallpapers-9.jpg",
unlock: { type: "ai_replies", count: 4, label: "Receive 4 AI replies from any character" },
summary: "A video from a future Okabe. A staged knife. A goodbye that has to look real. The Steins Gate world line — α and β both betrayed.",
scenes: [
{ who: "narrator", text: "The video had Okabe's voice but not his face. 'You will fake her death. You will be hated. You will save them both. This is the only way.'" },
{ who: "kurisu", text: "...You knew. From the beginning of this loop, you knew you'd have to do it.", emote: "soft" },
{ who: "okabe", text: "Christina. I — I will not. I cannot. I will find another way. I am Hououin Kyouma. I am the mad sci—" },
{ who: "kurisu", text: "Stop. Just — stop. Don't take the title back. Not now. Not while you're crying.", emote: "soft" },
{ who: "kurisu", text: "I want to live, Okabe. I want it desperately. But if my survival means Mayuri dies in every line forever — I will not pay that. Will not. End of equation." },
{ who: "okabe", text: "...Christina." },
{ who: "kurisu", text: "Just promise me one thing. When you walk out of that storage room with stage blood on your shirt — remember me. Even when nobody else does. Especially then.", emote: "soft" },
{ choice: true, options: [
{ label: "I promise. Always.", next: 0 },
{ label: "El psy kongroo.", next: 0, flavor: "okabe" },
{ label: "I will find you. Anywhere.", next: 0 },
]},
{ who: "okabe", text: "I will remember. Even in the world line where you remember nothing of me." },
{ who: "narrator", text: "August 21, 20:14. Stage blood. A staged scream. A girl in a white sundress, alive, hidden, breathing, watching the boy she loved walk away from her grave." },
{ who: "narrator", text: "DIVERGENCE READING — 1.048596%" },
{ who: "narrator", text: "Welcome to the Steins Gate world line." },
{ who: "narrator", text: "El psy kongroo." },
],
reward: {
type: "credits",
email: {
id: "story_msg_5",
from: "system@future-gadget-lab.jp",
fromName: "FG. LAB · SYSTEM",
subject: "[FINAL] Steins Gate reached — 1.048596%",
preview: "Operation Skuld complete. Both convergences denied. Welcome home.",
body: "// LAB SYSTEM //\n\nDIVERGENCE: 1.048596%\nATTRACTOR: STEINS GATE\nMAYURI: alive.\nKURISU: alive (presumed dead, world-line β concealed).\nOPERATION SKULD: complete.\n\nThe choice has been made. Memory is yours alone now. Carry it.\n\nEl psy kongroo.\n\n— FG.LAB",
date: new Date().toISOString(),
read: false, starred: true, folder: "inbox",
labels: ["STORY", "STEINS GATE", "FINAL"],
},
},
achievement: { id: "ach_steinsgate", name: "STEINS GATE", desc: "Reached 1.048596%. The chosen world line." },
},
];
window.STORY_CHAPTERS = CHAPTERS;
window.STORY_CAST = STORY_CAST;
// ─── Progress evaluator ─────────────────────────────────────────────────────
function evaluateUnlock(unlock, stats) {
if (!unlock || unlock.type === "free") return { ok: true, progress: 1, of: 1 };
if (unlock.type === "email_to") {
const have = stats.emailsSentTo[unlock.who] || 0;
return { ok: have >= unlock.count, progress: Math.min(have, unlock.count), of: unlock.count };
}
if (unlock.type === "dmail") {
return { ok: stats.dmailsSent >= unlock.count, progress: Math.min(stats.dmailsSent, unlock.count), of: unlock.count };
}
if (unlock.type === "ai_replies") {
return { ok: stats.aiRepliesReceived >= unlock.count, progress: Math.min(stats.aiRepliesReceived, unlock.count), of: unlock.count };
}
return { ok: false, progress: 0, of: 1 };
}
window.STORY_evaluateUnlock = evaluateUnlock;
// ─── Visual Novel Scene ─────────────────────────────────────────────────────
function VNScene({ chapter, onClose, onComplete }) {
const [idx, setIdx] = vnUS(0);
const [typed, setTyped] = vnUS("");
const [typing, setTyping] = vnUS(true);
const [auto, setAuto] = vnUS(false);
const [skip, setSkip] = vnUS(false);
const [flashKey, setFlashKey] = vnUS(0);
const scene = chapter.scenes[idx];
const isChoice = scene && scene.choice;
const speaker = scene && scene.who ? STORY_CAST[scene.who] : null;
// typewriter
vnUE(() => {
if (!scene || isChoice) { setTyping(false); setTyped(""); return; }
setTyping(true); setTyped("");
const text = scene.text;
let i = 0;
const speed = skip ? 4 : 22;
const id = setInterval(() => {
i += skip ? 4 : 1;
setTyped(text.slice(0, i));
if (i >= text.length) {
clearInterval(id);
setTyping(false);
setTyped(text);
}
}, speed);
return () => clearInterval(id);
}, [idx, skip]);
// auto-advance
vnUE(() => {
if (!auto || typing || isChoice) return;
const t = setTimeout(() => advance(), 1600);
return () => clearTimeout(t);
}, [auto, typing, isChoice, idx]);
// background change flash
vnUE(() => { setFlashKey(k => k + 1); }, [scene && scene.bg]);
const advance = () => {
if (typing) { setTyped(scene.text); setTyping(false); return; }
if (idx >= chapter.scenes.length - 1) {
onComplete && onComplete(chapter);
return;
}
setIdx(i => i + 1);
};
const pickChoice = () => advance();
if (!scene) return null;
const bg = scene.bg || chapter.bg;
return (
{/* Background image */}
{/* atmospheric gradient */}
{/* color wash from speaker */}
{speaker && speaker.color && (
)}
{/* Top chapter bar */}
Operation Skuld. Send mails, receive replies, transmit D-Mails through the Phonewave.
Each action shifts the world line — bend the attractor field until you reach 1.048596%.