Upload 125 files

engine/router.py

@@ -270,7 +270,9 @@ async def meta():
 # ── 정적 프론트 ─────────────────────────────────────────────
 @app.get("/")
 async def index():
-    return FileResponse(ROOT / "web" / "index.html")
+    # no-cache: 매 접속마다 재검증 — 배포 후 브라우저가 옛 HTML을 계속 보여주는 사고 방지
+    return FileResponse(ROOT / "web" / "index.html",
+                        headers={"Cache-Control": "no-cache"})
 
 
 app.mount("/static", StaticFiles(directory=ROOT / "web"), name="static")

web/index.html

@@ -69,10 +69,6 @@
   .vn-stage::after { content: ""; position: absolute; inset: 0;
                      background: linear-gradient(rgba(11,14,20,.12) 0%, transparent 22%,
                                                  transparent 40%, rgba(11,14,20,.96) 82%); }
-  .vn-lead { position: absolute; top: 0; left: 0; right: 0; z-index: 1;
-             padding: 16px 22px 26px; font-size: .96rem; color: var(--text);
-             word-break: keep-all; text-shadow: 0 1px 8px rgba(0,0,0,.95);
-             background: linear-gradient(rgba(11,14,20,.82), transparent); }
   .vn-stage-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
                     padding: 0 22px 20px; text-align: center; }
   .vn-stage-panel .vn-line { font-size: 1.02rem; line-height: 1.9; margin: .3em 0;
@@ -347,11 +343,10 @@ function charLines(g) {             // 서사 속 발화 — 좌 화자명 ·
     `<div class="char-line fade"><span class="spk">${esc(name)}</span>“${esc(t)}”</div>`).join('');
 }
 
-function vnStage(g, choices, lead) { // 초상이 프레임을 채우고 하단 패널에 대사+선택지
+function vnStage(g, choices) {       // 독립 화면: 초상 + 이름표 + 그 캐릭터의 대사 (+선택지)만
   let h = `<div class="vn-stage fade">` +
-          `<img class="vn-stage-art" src="${encodeURI(g.portrait)}" alt="${esc(g.spk)}">`;
-  if (lead) h += `<div class="vn-lead">${esc(lead)}</div>`;  // 리드인 — 이미지 상단에
-  h += `<div class="vn-stage-panel"><div class="vn-name">${esc(g.spk)}</div>`;
+          `<img class="vn-stage-art" src="${encodeURI(g.portrait)}" alt="${esc(g.spk)}">` +
+          `<div class="vn-stage-panel"><div class="vn-name">${esc(g.spk)}</div>`;
   for (const t of g.lines) h += `<div class="vn-line">“${esc(t)}”</div>`;
   return h + `<div id="choice-area">${choices}</div></div></div>`;
 }
@@ -377,9 +372,9 @@ function groupNarration(blocks) {
 
 /* 서버 페이지 → 화면들 (스크롤 없는 넘김).
    - 타이틀은 에피소드 첫 페이지의 화(話) 헤더만 — 카드 소제목은 표시하지 않는다 (책의 흐름)
-   - 서사 속 발화는 char-line으로 본문에 흡수, 스테이지(초상 화면)는
-     인터랙션 페이지(선택지·채팅)의 마지막 초상 발화에만 (단독 화면)
-   - 나머지 블록은 실측(#page-measure)으로 뷰포트 예산 안에서 채운다 */
+   - 스테이지(초상 화면)는 이미지+그 캐릭터의 대사(+선택지)만 — 지문은 섞지 않는다
+   - 지문·발화(char-line)는 세그먼트(스테이지 경계 사이)별로 실측 균형 분할:
+     화면 수 k = ceil(총높이/예산)를 먼저 정하고 균등 경계에서 절단 — 한 문장 고아 화면 방지 */
 function buildScreens(step, fresh) {
   const c = step.card;
   let head = '';
@@ -396,42 +391,56 @@ function buildScreens(step, fresh) {
       if (g.lines && g.portrait && !PLAYER_SPEAKERS.has(g.spk)) { stageIdx = k; break; }
     }
   }
+  const stageIsLast = stageIdx === groups.length - 1;
 
   const meas = $('page-measure');
   const budget = Math.max((window.innerHeight || 900) - 190, 320);
+  const measure = (html) => { meas.innerHTML = html; return meas.offsetHeight; };
+
   const screens = [];
-  let cur = head;
-  const flush = () => { if (cur.trim()) screens.push(cur); cur = ''; };
-
-  const stageIsLast = stageIdx === groups.length - 1;  // 마지막 그룹일 때만 선택지 내장
-  // 스테이지 직전의 리드인(role=lead_in 단일 블록)은 스테이지 화면에 얹는다 — 파편 화면 방지
-  let leadIdx = -1;
-  if (stageIdx > 0) {
-    const pg = groups[stageIdx - 1];
-    if (pg.block && pg.block.role === 'lead_in') leadIdx = stageIdx - 1;
-  }
+  let seg = [];                      // 현재 세그먼트의 유닛들 {html, h}
+  const flushSeg = () => {           // 세그먼트를 균형 분할해 화면으로
+    if (!seg.length) return;
+    const total = seg.reduce((s, u) => s + u.h, 0);
+    const k = Math.max(1, Math.ceil(total / budget));
+    const target = total / k;
+    let cur = '', acc = 0, cuts = 0;
+    seg.forEach((u, i) => {
+      cur += u.html; acc += u.h;
+      const remainUnits = seg.length - i - 1;
+      const remainCuts = (k - 1) - cuts;
+      if (cuts < k - 1 && remainUnits > 0) {
+        const boundary = target * (cuts + 1);
+        const nextAcc = acc + seg[i + 1].h;
+        if (Math.abs(acc - boundary) <= Math.abs(nextAcc - boundary)
+            || remainUnits === remainCuts) {
+          screens.push(cur); cur = ''; cuts++;
+        }
+      }
+    });
+    if (cur) screens.push(cur);
+    seg = [];
+  };
+
   groups.forEach((g, k) => {
-    if (k === leadIdx) return;       // 스테이지에 포함
-    if (k === stageIdx) {            // 스테이지 = 단독 화면
-      flush();
-      screens.push(vnStage(g, stageIsLast ? choices : '',
-                           leadIdx >= 0 ? groups[leadIdx].block.text : null));
+    if (k === stageIdx) {            // 스테이지 = 독립 화면 (이미지+대사만)
+      flushSeg();
+      screens.push(vnStage(g, stageIsLast ? choices : ''));
       return;
     }
     const html = g.lines ? charLines(g) : block(g.block);
-    meas.innerHTML = cur + html;
-    if (cur.trim() && meas.offsetHeight > budget) flush();
-    cur += html;
+    seg.push({html, h: measure(html)});
   });
-  if (choices && !stageIsLast) {     // 그 외에는 선택지를 마지막 화면 하단에
+  if (choices && !stageIsLast) {
     const area = `<div id="choice-area">${choices}</div>`;
-    meas.innerHTML = cur + area;
-    if (cur.trim() && meas.offsetHeight > budget) flush();
-    cur += area;
+    seg.push({html: area, h: measure(area)});
   }
-  flush();
+  flushSeg();
   meas.innerHTML = '';
-  return screens.length ? screens : [head];
+
+  if (screens.length) screens[0] = head + screens[0];  // 화(話) 헤더는 첫 화면에
+  else screens.push(head);
+  return screens;
 }
 
 function choicesHtml(step) {