/* ISEKAI_MAID — 비주얼 노벨 엔진 * story.json(대사/분기) + manifest.json(에셋 경로)을 읽어 재생한다. * 로컬 서버에서 열어야 함 (fetch 사용). file:// 로는 안 됨. * 기능: 타이틀 화면 / 세이브·로드(브라우저 저장) / 설정 / 메뉴 / 라인정보 / 변수패널 */ const $ = (id) => document.getElementById(id); const SLOTS = ["auto", "1", "2", "3"]; // 자동 슬롯 + 수동 3칸 const LS = { save: (n, d) => localStorage.setItem("isekai_save_" + n, JSON.stringify(d)), load: (n) => { try { return JSON.parse(localStorage.getItem("isekai_save_" + n)); } catch { return null; } }, del: (n) => localStorage.removeItem("isekai_save_" + n), getCfg: () => { try { return JSON.parse(localStorage.getItem("isekai_config")) || {}; } catch { return {}; } }, setCfg: (c) => localStorage.setItem("isekai_config", JSON.stringify(c)), getSeen: () => { try { return JSON.parse(localStorage.getItem("isekai_cg_seen")) || []; } catch { return []; } }, setSeen: (a) => localStorage.setItem("isekai_cg_seen", JSON.stringify(a)), }; const Engine = { story: null, manifest: null, PROTAGONIST: "CHAR_DOYUN", // 주인공 (의상 전환 대상) // 재생 상태 pc: 0, vars: {}, waiting: null, // 'text' | 'title' | 'choice' | null screen: "title", // 'title' | 'playing' typing: false, typeTimer: null, _fullText: "", // 화면(비주얼) 상태 — 세이브에 저장됨 curBg: null, curCgId: null, cgActive: false, curChar: null, // 현재 표시된 sprite src(캐시용) curCharId: null, curCharExpr: null, charHidden: true, bgmAudio: null, bgmId: null, config: { textSpeed: 22, bgm: 0.6, sfx: 0.8 }, // 종류별 볼륨(효과음 볼륨에 곱해짐): 임팩트 큰 건 크게, 배경성은 작게 SFX_VOL: { SFX_MAGIC_CIRCLE: 1.0, SFX_MAGIC_BURST: 1.0, SFX_FOAM: 1.0, SFX_MAGIC_HUM: 0.7, SFX_FIRE_RABBIT: 0.75, SFX_BIRD: 0.6, SFX_GATE: 0.7, SFX_KNIFE: 0.8, SFX_STIR: 0.8, SFX_DOOR: 0.45, SFX_RUN: 0.5, SFX_COOKING: 0.5, SFX_BELL: 0.55, SFX_KNOCK: 0.6, }, history: [], // 백로그(지나온 대사) cgSeen: null, // 본 CG id 집합 (localStorage 연동) async boot() { try { let story, manifest; if (window.STORY && window.MANIFEST) { // 오프라인(더블클릭) 모드: data/story.js, data/manifest.js 로 임베드된 데이터 사용 story = window.STORY; manifest = window.MANIFEST; } else { // 개발 모드: 로컬 서버로 JSON fetch [story, manifest] = await Promise.all([ fetch("data/story.json").then((r) => r.json()), fetch("data/manifest.json").then((r) => r.json()), ]); } this.story = story; this.manifest = manifest; this.config = Object.assign({}, this.config, LS.getCfg()); this.cgSeen = new Set(LS.getSeen()); $("overlay").classList.add("hidden"); this.bindInput(); this.showTitleScreen(); // 바로 시작하지 않고 타이틀부터 } catch (e) { $("overlay").innerHTML = "데이터를 불러오지 못했습니다.

" + "① 로컬 서버로 열었는지 확인하세요 (VS Code Live Server 또는 python -m http.server).
" + "② data/story.json 과 data/manifest.json 이 있는지 확인하세요.

" + "" + (e && e.message ? e.message : e) + ""; console.error(e); } }, // ---- 에셋 경로 해석 ---- bgSrc(id) { return this.manifest.bg[id] || null; }, cgSrc(id) { return this.manifest.cg[id] || null; }, uiSrc(id) { return this.manifest.ui[id] || null; }, bgmSrc(id) { return this.manifest.bgm[id] || null; }, sfxSrc(id) { return this.manifest.sfx[id] || null; }, charSrc(charId, expr) { const c = this.manifest.char[charId]; if (!c) return null; // 주인공 의상: 옷 갈아입기(first_uniform_event) 전엔 현대복(EARTH), 후엔 기본(사용인복) if ( charId === this.PROTAGONIST && c.outfit && c.outfit.EARTH && !this.vars.first_uniform_event ) { return c.dir + "/" + c.outfit.EARTH; } if (expr && c.expr && c.expr[expr]) return c.dir + "/" + c.expr[expr]; if (c.base) return c.dir + "/" + c.base; const k = c.expr ? Object.keys(c.expr)[0] : null; if (k) return c.dir + "/" + c.expr[k]; const o = c.outfit ? Object.keys(c.outfit)[0] : null; return o ? c.dir + "/" + c.outfit[o] : null; }, // ================= 메인 루프 ================= run() { const { lines, index } = this.story; let guard = 0; for (;;) { if (this.pc >= lines.length) return this.end("이야기 끝"); if (++guard > 100000) return this.end("루프 보호 정지"); const line = lines[this.pc]; const t = line.type; // 조건부 라인: 조건 거짓이면 건너뜀 if (line.cond && !this.evalCond(line.cond)) { this.pc++; continue; } if (t === "label") { this.pc++; continue; } if (t === "end") return this.end("— 엔딩 —"); if (t === "if_jump") { if (this.evalCond(line.cond)) { const i = index[line.next]; if (i == null) return this.end("점프 대상 없음"); this.pc = i; } else this.pc++; continue; } if (t === "dialogue" || t === "narration") { this.showText(line); return; } if ( t === "title" || t === "chapter_title" || t === "ending_title" || t === "screen_text" ) { this.showTitle(line); return; } if (t === "choice") { this.showChoices(line); return; } switch (t) { case "bg": case "bg_fade": this.setBg(line.bg); break; case "bgm": this.playBgm(line.bgm); break; case "bgm_stop": this.stopBgm(); break; case "sfx": case "voice": this.playSfx(line.sfx); break; case "cg": case "cg_on": case "cg_show": if ((line.transition || "").toUpperCase() === "OFF") this.hideCg(); else this.showCg(line.cg); break; case "cg_off": case "cg_hide": this.hideCg(); break; case "effect": case "set_var": this.applyEffect(line.effect); break; case "jump": { const i = index[line.next]; if (i == null) return this.end( "프롤로그 완료 — 이어질 챕터(" + (line.next || "?") + ")는 아직 준비 전", ); this.pc = i; continue; } default: break; } this.pc++; } }, advance() { if (this.waiting !== "text") return; if (this.typing) { this.finishTyping(); return; } this.waiting = null; this.hideText(); this.pc++; this.run(); }, choose(choice) { if (this.waiting !== "choice") return; this.waiting = null; $("choices").classList.remove("show"); const i = this.story.index[choice.next]; this.pc = i != null ? i : this.pc + 1; this.run(); }, // ================= 렌더링 ================= setBg(id) { this.curBg = id; const src = this.bgSrc(id); const el = $("bg-layer"); el.innerHTML = ""; el.style.background = "#000"; if (src) { const img = new Image(); img.src = src; el.appendChild(img); } this.hideCg(); }, showCg(id) { this.curCgId = id; this.cgActive = true; if (id && this.cgSeen && !this.cgSeen.has(id)) { this.cgSeen.add(id); LS.setSeen([...this.cgSeen]); } $("char-layer").classList.add("hidden"); // CG 중엔 캐릭터 스탠딩 숨김 const src = this.cgSrc(id); const el = $("cg-layer"); el.innerHTML = ""; if (src) { const img = new Image(); img.src = src; el.appendChild(img); el.classList.add("show"); } }, hideCg() { this.curCgId = null; this.cgActive = false; $("cg-layer").classList.remove("show"); }, setChar(charId, expr) { const layer = $("char-layer"); if (this.cgActive) { layer.classList.add("hidden"); return; } // CG 표시 중엔 스탠딩 억제 if (!charId) { layer.classList.add("hidden"); this.charHidden = true; this.curCharId = null; return; } const src = this.charSrc(charId, expr); if (!src) { layer.classList.add("hidden"); this.charHidden = true; return; } this.curCharId = charId; this.curCharExpr = expr || null; this.charHidden = false; if (this.curChar === src) { layer.classList.remove("hidden"); return; } this.curChar = src; layer.innerHTML = ""; const img = new Image(); img.src = src; layer.appendChild(img); layer.classList.remove("hidden"); }, showText(line) { this.waiting = "text"; const box = $("textbox"); box.classList.add("show"); box.classList.toggle("narration", line.type === "narration"); $("speaker").textContent = line.type === "narration" ? "" : line.speaker || ""; if (line.type === "dialogue") this.setChar(line.character, line.expression); this.typeText(line.text || ""); // 백로그 기록 if (line.text) { this.history.push({ speaker: line.type === "narration" ? "" : line.speaker || "", text: line.text, }); if (this.history.length > 400) this.history.shift(); } this.showLineInfo(line); this.updateDebug(); this.autosave(); }, hideText() { $("indicator").classList.remove("show"); }, typeText(text) { clearInterval(this.typeTimer); const el = $("text"); el.textContent = ""; $("indicator").classList.remove("show"); this._fullText = text; const speed = this.config.textSpeed; if (speed <= 0) { this.finishTyping(); return; } // 즉시 표시 this.typing = true; let i = 0; this.typeTimer = setInterval(() => { el.textContent = text.slice(0, ++i); if (i >= text.length) this.finishTyping(); }, speed); }, finishTyping() { clearInterval(this.typeTimer); $("text").textContent = this._fullText; this.typing = false; $("indicator").classList.add("show"); }, showTitle(line) { $("textbox").classList.remove("show"); const tc = $("titlecard"); tc.querySelector(".card").textContent = line.text || ""; tc.classList.add("show"); this.showLineInfo(line); this.waiting = "title"; this.autosave(); }, hideTitle() { $("titlecard").classList.remove("show"); }, showChoices(line) { this.waiting = "choice"; $("textbox").classList.remove("show"); const wrap = $("choices"); wrap.innerHTML = ""; if (line.prompt) { const p = document.createElement("div"); p.id = "choice-prompt"; p.textContent = line.prompt; wrap.appendChild(p); } (line.choices || []).forEach((c) => { const b = document.createElement("button"); b.className = "choice-btn"; b.textContent = c.text; b.onclick = (e) => { e.stopPropagation(); this.playClick(); this.choose(c); }; wrap.appendChild(b); }); wrap.classList.add("show"); this.showLineInfo(line); this.autosave(); }, // ---- 라인 정보 (우상단) ---- showLineInfo(line) { const el = $("lineinfo"); if (!el || !el.classList.contains("on")) return; const m = (line.id || "").match(/_L?(\d+)$/i); const no = m ? "L" + m[1] : ""; el.dataset.copy = line.id || ""; el.innerHTML = `${line.chapter || ""} · ${line.scene || "-"}` + `${line.id || ""}` + `${no ? no + " · " : ""}#${this.pc}`; }, flashCopied() { const tag = $("lineinfo").querySelector(".li-id"); if (!tag) return; const prev = tag.textContent; tag.textContent = "복사됨 ✓"; setTimeout(() => { tag.textContent = prev; }, 700); }, // ---- 조건식 평가 ---- evalCond(expr) { if (!expr) return true; expr = String(expr).trim(); if (expr.includes("&&")) return expr.split("&&").every((e) => this.evalCond(e)); if (expr.includes("||")) return expr.split("||").some((e) => this.evalCond(e)); const m = expr.match(/^([A-Za-z_]\w*)\s*(==|!=|>=|<=|>|<)\s*(.+)$/); const V = this.vars; if (!m) return !!V[expr] && V[expr] !== 0; // 단독 변수 = 참 체크 let val = m[3].trim().replace(/^["']|["']$/g, ""); const rhs = /^-?\d+(\.\d+)?$/.test(val) ? Number(val) : /^(true|false)$/i.test(val) ? /true/i.test(val) : val; const lhs = V[m[1]]; switch (m[2]) { case "==": return lhs == rhs; case "!=": return lhs != rhs; case ">=": return lhs >= rhs; case "<=": return lhs <= rhs; case ">": return lhs > rhs; case "<": return lhs < rhs; } return true; }, // ---- 변수 ---- applyEffect(ops) { if (!Array.isArray(ops)) return; for (const { var: v, op, value } of ops) { if (op === "+=") this.vars[v] = (this.vars[v] || 0) + value; else if (op === "-=") this.vars[v] = (this.vars[v] || 0) - value; else this.vars[v] = value; } this.updateDebug(); }, updateDebug() { const el = $("debug"); if (!el.classList.contains("show")) return; const keys = ["lizette_affection", "self_place", "comedy", "modern_idea"]; el.innerHTML = "변수
" + keys.map((k) => `${k}: ${this.vars[k] ?? 0}`).join("
") + `

line ${this.pc} / ${this.story.lines.length}`; }, // ---- 오디오 ---- playBgm(id) { const src = this.bgmSrc(id); if (!src) { this.bgmId = id; return; } if (this.bgmId === id && this.bgmAudio) return; this.stopBgm(); this.bgmId = id; this.bgmAudio = new Audio(src); this.bgmAudio.loop = true; this.bgmAudio.volume = this.config.bgm; this.bgmAudio.play().catch(() => {}); }, stopBgm() { if (this.bgmAudio) { this.bgmAudio.pause(); this.bgmAudio = null; } }, playSfx(id) { const src = this.sfxSrc(id); if (!src) return; const catVol = this.SFX_VOL[id] != null ? this.SFX_VOL[id] : 0.8; const a = new Audio(src); a.volume = Math.min(1, this.config.sfx * catVol); a.play().catch(() => {}); }, playClick() { const src = this.manifest.uisfx && this.manifest.uisfx.CLICK; if (!src) return; const a = new Audio(src); a.volume = this.config.sfx; a.play().catch(() => {}); }, end(msg) { this.waiting = null; $("textbox").classList.remove("show"); $("choices").classList.remove("show"); const tc = $("titlecard"); tc.querySelector(".card").textContent = msg || "끝"; tc.classList.add("show"); }, // ================= 세이브 / 로드 ================= snapshot() { const l = this.story.lines[this.pc] || {}; const preview = l.type === "choice" ? l.prompt || "선택지" : ((l.speaker ? l.speaker + ": " : "") + (l.text || "")).slice(0, 40); return { pc: this.pc, vars: structuredClone(this.vars), bg: this.curBg, cg: this.curCgId, charId: this.charHidden ? null : this.curCharId, charExpr: this.curCharExpr, bgm: this.bgmId, ts: Date.now(), scene: l.scene || "", preview, }; }, save(slot) { LS.save(slot, this.snapshot()); }, autosave() { if (this.screen === "playing") this.save("auto"); }, restore(s) { if (!s) return; this.screen = "playing"; $("titlescreen").classList.remove("show"); $("menu-btn").style.display = ""; this.closeModal(); this.vars = structuredClone(s.vars); this.stopBgm(); this.bgmId = null; if (s.bgm) this.playBgm(s.bgm); this.curChar = null; // 강제 재렌더 this.setBg(s.bg); // cg 초기화 포함 if (s.cg) this.showCg(s.cg); if (s.charId) this.setChar(s.charId, s.charExpr); else { $("char-layer").classList.add("hidden"); this.charHidden = true; } this.pc = s.pc; this.waiting = null; this.run(); this.showFirstHint(); }, newGame() { this.vars = structuredClone(this.story.variables || {}); this.history = []; this.pc = this.story.index[this.story.start] ?? 0; this.curBg = this.curCgId = this.curCharId = this.curChar = this.curCharExpr = null; this.charHidden = true; this.stopBgm(); this.bgmId = null; $("char-layer").classList.add("hidden"); $("titlescreen").classList.remove("show"); $("menu-btn").style.display = ""; this.closeModal(); this.screen = "playing"; this.waiting = null; this.run(); this.showFirstHint(); }, // ================= 타이틀 / 메뉴 / 모달 ================= showTitleScreen() { this.screen = "title"; const ts = $("titlescreen"); const bg = this.uiSrc("UI_TITLE_CG_MAIN") || this.uiSrc("UI_TITLE_CG_MAIN_COMPOSITED") || this.bgSrc("BG_CASTLE_HALLWAY_DAY"); const logo = this.uiSrc("UI_TITLE_LOGO"); const hasSave = SLOTS.some((s) => LS.load(s)); ts.innerHTML = (bg ? `

` : "") + `

` + (logo ? `

` : `

이세계 메이드

`) + `` + `

`; ts.classList.add("show"); $("menu-btn").style.display = "none"; }, openModal(html, wide) { $("modal-box").innerHTML = html; $("modal-box").classList.toggle("wide", !!wide); $("modal").classList.add("show"); }, closeModal() { $("modal").classList.remove("show"); }, menuHtml() { return ( `

메뉴

` ); }, helpHtml() { const back = this.screen === "title" ? "title" : "menu"; return ( `

조작법

` + `

클릭 / Space / Enter다음 대사 (타이핑 중엔 즉시 완성)

` + `

선택지 버튼클릭해서 선택

` + `

Esc / ☰메뉴 (저장·불러오기·CG 갤러리·설정)

` + `

B / 마우스 휠 위백로그 (지나온 대사)

` + `

` + // 테스트용 섹션 (V=변수 패널, i=라인 정보) — 배포 시 비활성화 // `

테스트용

` + // `

V변수 패널

` + // `

i라인 정보 (ID 클릭 시 복사)

` + // `

` + `` ); }, showFirstHint() { if (localStorage.getItem("isekai_seen_hint")) return; localStorage.setItem("isekai_seen_hint", "1"); const el = document.createElement("div"); el.className = "first-hint"; el.textContent = "클릭: 다음 · Esc: 메뉴 · B: 백로그"; $("stage").appendChild(el); requestAnimationFrame(() => el.classList.add("show")); setTimeout(() => { el.classList.remove("show"); setTimeout(() => el.remove(), 500); }, 4500); }, esc(s) { return String(s == null ? "" : s).replace( /[&<>"]/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """ })[c], ); }, backlogHtml() { const rows = this.history.length ? this.history .map( (h) => `

${h.speaker ? `${this.esc(h.speaker)}` : ""}${this.esc(h.text)}

`, ) .join("") : `

아직 지나온 대사가 없어요.

`; return ( `

백로그

${rows}

` + `` ); }, galleryHtml() { const all = Object.keys(this.manifest.cg || {}); const cells = all .map((id) => { const seen = this.cgSeen && this.cgSeen.has(id); return seen ? `` : `

🔒

`; }) .join(""); const back = this.screen === "title" ? "title" : "menu"; const seenN = all.filter((id) => this.cgSeen && this.cgSeen.has(id)).length; return ( `

CG 갤러리 (${seenN}/${all.length})

` + `

${cells}

` + `` ); }, cgViewHtml(id) { return ( `

` + `` ); }, slotsHtml(mode) { const rows = SLOTS.map((s) => { const d = LS.load(s); const label = s === "auto" ? "자동" : "슬롯 " + s; const info = d ? `

${d.scene || ""}

${d.preview || ""}

${new Date(d.ts).toLocaleString()}` : `비어있음`; let btn = ""; if (mode === "save" && s !== "auto") btn = ``; if (mode === "load") btn = ``; return `

${label}

${info}

${btn}

`; }).join(""); return ( `

${mode === "save" ? "저장" : "불러오기"}

${rows}

` + `` ); }, configHtml() { const c = this.config; const back = this.screen === "title" ? "title" : "menu"; return ( `

설정

` + `

텍스트 속도 (왼쪽=빠름, 0=즉시)` + `

` + `

BGM 볼륨` + `

` + `

효과음 볼륨` + `

` + `

` + `` + `` + `

` ); }, applyConfig() { const sp = $("cfg-speed"), bg = $("cfg-bgm"), sx = $("cfg-sfx"); if (sp) this.config.textSpeed = Number(sp.value); if (bg) this.config.bgm = Number(bg.value); if (sx) this.config.sfx = Number(sx.value); if (this.bgmAudio) this.bgmAudio.volume = this.config.bgm; LS.setCfg(this.config); }, onModalAction(a, el) { switch (a) { case "close": this.closeModal(); break; case "menu": this.openModal(this.menuHtml()); break; case "save": this.openModal(this.slotsHtml("save")); break; case "load": this.openModal(this.slotsHtml("load")); break; case "config": this.openModal(this.configHtml()); break; case "new": this.newGame(); break; case "title": this.closeModal(); this.showTitleScreen(); break; case "dosave": this.save(el.dataset.slot); this.openModal(this.slotsHtml("save")); break; case "doload": this.restore(LS.load(el.dataset.slot)); break; case "cfgsave": this.applyConfig(); this.openModal( this.screen === "title" ? this.configHtml() : this.menuHtml(), ); break; case "backlog": this.openModal(this.backlogHtml()); { const sc = $("backlog-scroll"); if (sc) sc.scrollTop = sc.scrollHeight; } // 최신 대사로 break; case "gallery": this.openModal(this.galleryHtml(), true); break; case "viewcg": this.openModal(this.cgViewHtml(el.dataset.cg), true); break; case "help": this.openModal(this.helpHtml()); break; } }, // ================= 입력 ================= bindInput() { $("stage").addEventListener("click", () => this.onTap()); $("menu-btn").addEventListener("click", (e) => { e.stopPropagation(); this.playClick(); this.openModal(this.menuHtml()); }); // 타이틀 화면 버튼 $("titlescreen").addEventListener("click", (e) => { e.stopPropagation(); const t = e.target.closest("[data-action]"); if (t) { this.playClick(); this.onModalAction(t.dataset.action, t); } }); // 모달(메뉴/세이브/로드/설정) 위임 처리 $("modal").addEventListener("click", (e) => { e.stopPropagation(); const t = e.target.closest("[data-action]"); if (!t) { if (e.target.id === "modal") this.closeModal(); return; } this.playClick(); this.onModalAction(t.dataset.action, t); }); // 라인 정보 클릭 → line_id 복사 (테스트용 — 배포 시 비활성화) // $("lineinfo").addEventListener("click", (e) => { // e.stopPropagation(); // const id = $("lineinfo").dataset.copy || ""; // if (id && navigator.clipboard) // navigator.clipboard.writeText(id).then(() => this.flashCopied()); // }); window.addEventListener("keydown", (e) => { if (e.key === "Escape") { if (this.screen !== "playing") return; if ($("modal").classList.contains("show")) this.closeModal(); else this.openModal(this.menuHtml()); return; } if (e.code === "Space" || e.code === "Enter") { e.preventDefault(); this.onTap(); } if (e.key === "b" || e.key === "B") { if (this.screen === "playing" && !$("modal").classList.contains("show")) this.onModalAction("backlog"); } if (e.key === "v" || e.key === "V") { $("debug").classList.toggle("show"); this.updateDebug(); } // 라인 정보 토글 (테스트용 — 배포 시 비활성화) // if (e.key === "i" || e.key === "I") { // $("lineinfo").classList.toggle("on"); // } }); // 마우스 휠 위로 → 백로그 (VN 관례) $("stage").addEventListener( "wheel", (e) => { if ( this.screen === "playing" && !$("modal").classList.contains("show") && e.deltaY < 0 ) { this.onModalAction("backlog"); } }, { passive: true }, ); }, onTap() { if (this.screen !== "playing") return; if ($("modal").classList.contains("show")) return; if (this.waiting === "choice") return; if (this.waiting === "title") { this.hideTitle(); this.waiting = null; this.pc++; this.run(); return; } this.advance(); }, }; window.addEventListener("DOMContentLoaded", () => Engine.boot());