save

frontend/index.html

@@ -214,6 +214,73 @@
   }
   #settings-save-btn:hover{background:rgba(232,193,114,.22)}
   #settings-save-btn:disabled{opacity:.5; cursor:wait}
+  /* ---- ending overlays (victory / defeat) ---- */
+  #ending-overlay{
+    position:fixed; inset:0; z-index:50; display:none; flex-direction:column;
+    align-items:center; justify-content:center; padding:40px 24px;
+    text-align:center; overflow:hidden;
+  }
+  #ending-overlay.show{ display:flex }
+  #ending-overlay.victory{
+    background:radial-gradient(ellipse at 50% 0%, #2e1030 0%, #150920 50%, #08050f 100%);
+  }
+  #ending-overlay.defeat{
+    background:radial-gradient(ellipse at 50% 0%, #1a0808 0%, #0d0505 50%, #050305 100%);
+  }
+  /* Dark veil over the image so text stays readable */
+  #ending-overlay::before{
+    content:""; position:absolute; inset:0; pointer-events:none;
+    background:var(--ending-dim, rgba(10,6,18,.72));
+    z-index:0;
+  }
+  /* Particle shimmer layer */
+  #ending-overlay::after{
+    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
+    background-image:
+      radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px),
+      radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
+    background-size:120px 120px, 80px 80px;
+    background-position:0 0, 40px 40px;
+    animation:endingDrift 20s linear infinite;
+    opacity:.5;
+  }
+  #ending-overlay.defeat::after{ opacity:.18 }
+  /* All direct children must sit above the pseudo-elements */
+  #ending-overlay > *{ position:relative; z-index:1 }
+  @keyframes endingDrift{
+    from{ background-position:0 0, 40px 40px }
+    to  { background-position:120px 120px, 160px 160px }
+  }
+  .ending-icon{ font-size:3.6rem; margin-bottom:16px; animation:endingPulse 2s ease-in-out infinite }
+  @keyframes endingPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
+  .ending-title{
+    font-family:var(--display); font-size:2rem; letter-spacing:.15em;
+    margin-bottom:10px; position:relative;
+  }
+  .victory .ending-title{ color:#e8c172 }
+  .defeat  .ending-title{ color:#c87e7e }
+  .ending-subtitle{
+    font-size:.78rem; letter-spacing:.3em; color:var(--ink-dim); margin-bottom:28px;
+    text-transform:uppercase;
+  }
+  .ending-divider{
+    font-size:.65rem; letter-spacing:.5em; margin-bottom:20px;
+  }
+  .victory .ending-divider{ color:#a07c3a }
+  .defeat  .ending-divider{ color:#7c3a3a }
+  #ending-text{
+    font-family:var(--body); font-size:1.02rem; line-height:1.75;
+    max-width:520px; color:var(--ink); font-style:italic;
+    margin-bottom:36px; position:relative;
+  }
+  #ending-replay{
+    padding:12px 32px; border-radius:8px; cursor:pointer;
+    font-family:var(--display); font-size:.95rem; letter-spacing:.2px;
+    border:none; position:relative; transition:opacity .2s;
+  }
+  #ending-replay:hover{ opacity:.85 }
+  .victory #ending-replay{ background:rgba(232,193,114,.2); border:1px solid rgba(232,193,114,.5); color:var(--gold) }
+  .defeat  #ending-replay{ background:rgba(200,126,126,.15); border:1px solid rgba(200,126,126,.4); color:#c87e7e }
   /* ---- book intro overlay ---- */
   #intro-book{
     position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
@@ -421,8 +488,9 @@
   }
   .bond-graph-wrap svg{ width:100%; max-height:280px; display:block; overflow:visible }
   .bond-list{ padding:0 4px 12px }
-  .bond-pair{ margin-bottom:7px; padding:5px 9px; background:rgba(255,255,255,.04); border-radius:7px }
-  .bond-row{ display:flex; align-items:center; gap:5px; padding:2px 0; font-size:.78rem }
+  .bond-pair{ margin-bottom:7px; padding:6px 9px; background:rgba(255,255,255,.04); border-radius:7px }
+  .bond-row{ display:flex; align-items:center; gap:5px; padding:4px 0; font-size:.78rem }
+  .bond-row + .bond-row{ border-top:1px solid rgba(255,255,255,.06); margin-top:2px }
   .bond-name{ font-family:var(--display); min-width:56px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
   .bond-arrow{ color:var(--ink-dim); flex-shrink:0; font-size:.7rem }
   .bond-note{ font-style:italic; flex:1; font-size:.73rem }
@@ -517,6 +585,16 @@
     </div>
   </div>
 
+  <!-- Ending overlay (victory / defeat) -->
+  <div id="ending-overlay">
+    <div class="ending-icon" id="ending-icon">✦</div>
+    <div class="ending-title" id="ending-title">The End</div>
+    <div class="ending-subtitle" id="ending-subtitle"></div>
+    <div class="ending-divider">· · · · ·</div>
+    <p id="ending-text"></p>
+    <button id="ending-replay">Play again</button>
+  </div>
+
   <!-- Choice screen: new game or load file -->
   <div id="choice-screen" style="position:fixed;inset:0;z-index:10;display:grid;place-items:center;
     background:radial-gradient(80% 80% at 50% 30%, var(--dusk-2), var(--dusk-0))">
@@ -960,6 +1038,44 @@ function render(v){
 
   // target chips — show only when multiple characters are on stage
   updateTargetRow(v.present);
+
+  // ── Ending screen ───────────────────────────────���──────────────────────────
+  if (v.ended && v.ending_text) {
+    setTimeout(() => showEnding(v.ending_kind, v.ending_text, v.backdrop_url), 1800);
+  }
+}
+
+function showEnding(kind, text, backdropUrl) {
+  const overlay = $("ending-overlay");
+  const isDefeat = kind === "defeat";
+  overlay.className = "show " + (isDefeat ? "defeat" : "victory");
+  // Use the generated ending illustration as the overlay background
+  if (backdropUrl) {
+    overlay.style.backgroundImage = `url(${backdropUrl})`;
+    overlay.style.backgroundSize  = "cover";
+    overlay.style.backgroundPosition = "center";
+    // Darken overlay content area so text stays readable over the image
+    overlay.style.setProperty("--ending-dim", isDefeat
+      ? "rgba(5,3,5,.78)" : "rgba(10,6,18,.65)");
+  }
+  $("ending-icon").textContent   = isDefeat ? "💀" : "💕";
+  $("ending-title").textContent  = isDefeat ? "Game Over" : "✦ Fin ✦";
+  $("ending-subtitle").textContent = isDefeat
+    ? "The wanderer walks alone…"
+    : "A warm ending";
+  // Typewrite the epilogue text
+  const el = $("ending-text");
+  el.textContent = "";
+  let i = 0;
+  const iv = setInterval(() => {
+    if (i >= text.length) { clearInterval(iv); return; }
+    el.textContent += text[i++];
+  }, 28);
+  // Replay button label
+  $("ending-replay").textContent = isDefeat ? "Try again" : "Play again";
+  // Music: overlay already triggered set_music via render, but be safe
+  if (isDefeat && !bgmTrackName?.includes("sad"))  switchMusic("sad");
+  if (!isDefeat && !bgmTrackName?.includes("romantic")) switchMusic("romantic");
 }
 
 function showNotif(msg){
@@ -1158,6 +1274,24 @@ $("book-close").addEventListener("click", () => {
   $("say").focus();
 });
 
+// --- ending replay ---
+$("ending-replay").addEventListener("click", () => {
+  // Stop music, reset ending overlay, go back to choice screen
+  if (bgmCurrent) { _bgmFade(bgmCurrent, bgmCurrent.volume, 0, 800, () => { bgmCurrent.pause(); bgmCurrent.src = ""; }); bgmCurrent = null; }
+  bgmTrackName = null;
+  $("ending-overlay").className = "";   // hide
+  // Reset game UI state
+  history = []; journalTurn = 0; knownChars = []; npcBonds = [];
+  $("place").textContent = ""; $("speaker").textContent = ""; $("line").textContent = "";
+  $("sprites").innerHTML = ""; lastBg = null;
+  $("backdrop").style.backgroundImage = "none"; $("backdrop").classList.remove("on");
+  $("journal-btn").classList.add("hidden");
+  $("settings-btn").classList.add("hidden");
+  $("enter").disabled = false;
+  $("enter").textContent = "Enter the story";
+  $("choice-screen").classList.remove("hidden");
+});
+
 // --- choice screen ---
 $("btn-new").addEventListener("click", () => {
   $("choice-screen").classList.add("hidden");

visualnovel/engine.py

@@ -202,7 +202,12 @@ class Engine:
         s = self.state
         assert s is not None
         with collector.measure("painter_backdrop", turn=turn):
-            backdrop = self.painter.backdrop(s)  # cached -> cheap even when unchanged
+            if s.beat == "ended":
+                # Generate a dedicated ending illustration instead of the regular backdrop
+                ending_kind = s.flags.get("ending_kind", "warm")
+                backdrop = self.painter.ending_backdrop(s, ending_kind)
+            else:
+                backdrop = self.painter.backdrop(s)  # cached -> cheap even when unchanged
         present = []
         for cid in s.scene.present:
             ch = s.characters.get(cid)
@@ -281,6 +286,7 @@ class Engine:
             beat=s.beat,
             ended=s.beat == "ended",
             ending_text=s.flags.get("ending_text"),
+            ending_kind=s.flags.get("ending_kind"),
             turn_index=s.turn_index,
             notifications=notifications or [],
             intro_text=intro_text,

visualnovel/memory.py

@@ -34,6 +34,28 @@ def assemble_context(state: GameState, player_input: str) -> str:
     if off_stage:
         parts.append("KNOWN BUT OFF STAGE (can return — use their existing id):\n" + "\n".join(off_stage))
 
+    # ── Ending milestone hints — injected when a character hits ±100 ──────────
+    for ch in state.characters.values():
+        if ch.relationship >= 100 and ch.id in state.scene.present:
+            parts.append(
+                f"*** ROMANCE PEAK: {ch.name}'s affection is at MAX (100/100). ***\n"
+                f"This turn MUST be their heartfelt confession. Emit ending(kind=\"warm\") "
+                f"with a poetic 2-4 sentence epilogue. Also emit set_music=\"romantic\"."
+            )
+        elif ch.relationship <= -100 and ch.id in state.scene.present:
+            parts.append(
+                f"*** RELATIONSHIP BROKEN: {ch.name} is at MIN (-100/100). ***\n"
+                f"They storm off with a final cutting line. MUST emit exit_character=\"{ch.id}\". "
+                f"If the stage becomes empty after this, also emit ending(kind=\"defeat\") "
+                f"with a dark 2-4 sentence epilogue. Emit set_music=\"sad\"."
+            )
+    # If scene already empty and not yet ended — nudge for defeat
+    if not state.scene.present and state.beat != "ended" and state.characters:
+        parts.append(
+            "*** THE STAGE IS EMPTY — the wanderer is completely alone. ***\n"
+            "Emit ending(kind=\"defeat\") with a melancholic epilogue. Emit set_music=\"sad\"."
+        )
+
     # Surface the current music track prominently so the LLM doesn't switch it needlessly.
     current_music = state.flags.get("current_music")
     if current_music:

visualnovel/painter.py

@@ -134,6 +134,35 @@ class PainterBase:
             negative_prompt=_SPRITE_NEGATIVE,
         )
 
+    def ending_backdrop(self, state: GameState, kind: str) -> Path:
+        """Generate (and cache) a special ending illustration based on the ending kind."""
+        style = _backdrop_style(state.style_guide)
+        _ENDING_DESCS: dict[str, tuple[str, str]] = {
+            "warm":        ("cherry blossom park at golden sunset, petals falling softly, "
+                            "empty bench under blooming trees, warm amber light filtering through branches",
+                            "romantic warm"),
+            "bittersweet": ("misty autumn street at twilight, fallen leaves on cobblestones, "
+                            "distant lamplight, empty path fading into soft fog",
+                            "melancholic gentle"),
+            "strange":     ("surreal moonlit garden, glowing silver motes drifting upward, "
+                            "impossible geometry, dreamlike luminous plants",
+                            "mysterious ethereal"),
+            "defeat":      ("rain-soaked empty park bench at night, fallen leaves in puddles, "
+                            "single dim lamppost, deserted street receding into darkness",
+                            "desolate cold"),
+        }
+        desc, mood = _ENDING_DESCS.get(kind, _ENDING_DESCS["warm"])
+        prompt = (
+            f"background art, empty scenic environment, wide establishing shot, no humans, "
+            f"uninhabited location, {desc}, {mood} atmosphere, {style}, no text"
+        )
+        seed = (state.seed * 1234567 + sum(ord(c) for c in kind)) % (2 ** 31)
+        return self._cached(
+            kind="ending", key=kind, prompt=prompt, seed=seed,
+            negative_prompt=_BACKDROP_NEGATIVE,
+            guidance_scale=config.BACKDROP_GUIDANCE,
+        )
+
     # -- internals --
     def _cached(self, *, kind: str, key: str, prompt: str, seed: int,
                 negative_prompt: str = "", guidance_scale: float = 0.0,

visualnovel/prompts.py

@@ -43,9 +43,16 @@ Rules:
   - Relationship_delta ranges from -100 to +100. Romantic warmth builds it up; coldness,
     insults, or rejection bring it down. React authentically to negative moments — hurt, cold,
     quietly withdrawing. Do NOT loop the same response — escalate or shift the dynamic.
+  - If a character's relationship reaches +100 -> this is the romance climax. They
+    confess their feelings; the moment is beautiful and emotional. MUST emit
+    ending(kind="warm") with 2-4 sentences of poetic epilogue narration (what happens
+    next, the future they share, the feeling in the air). Also emit set_music="romantic".
   - If a character's relationship reaches -100 -> they have had enough. They storm off,
     say something final and cutting, and MUST emit exit_character. They will NOT return
     unless the story calls for a dramatic reconciliation arc.
+  - If ALL characters have left the stage after a -100 exit and the scene is now empty ->
+    emit ending(kind="defeat") with 2-4 sentences of dark epilogue: the wanderer is left
+    alone, their failures echo, the world feels cold. Also emit set_music="sad".
   - If a character explicitly says goodbye, storms off, or leaves for good -> emit
     exit_character with their exact id to remove them from the stage.
   - NPCs have their own bonds with each other (shown in "bonds with others" on each sheet).

visualnovel/schemas.py

@@ -18,7 +18,7 @@ from pydantic import BaseModel, Field
 # --- small enums (kept as Literals so they show up cleanly in the JSON schema) ---
 Emotion = Literal["neutral", "joy", "fear", "anger", "sad", "surprise", "tender"]
 Beat = Literal["opening", "rising", "turn", "resolution", "ended"]
-EndingKind = Literal["warm", "bittersweet", "strange"]
+EndingKind = Literal["warm", "bittersweet", "strange", "defeat"]
 
 
 # --------------------------------------------------------------------------- #
@@ -187,6 +187,7 @@ class ViewState(BaseModel):
     beat: Beat = "opening"
     ended: bool = False
     ending_text: str | None = None
+    ending_kind: str | None = None  # "warm"|"bittersweet"|"strange"|"defeat"
     turn_index: int = 0
     notifications: list[str] = Field(default_factory=list)  # popup messages this turn
     intro_text: str = ""  # shown once in the book overlay at game start; empty on subsequent turns