feat: P15 ending gallery, chapter recap, visited tracking, save system v6

ROADMAP.md

@@ -784,9 +784,18 @@ QTE 成功 / 到达隐藏结局 / 通关等"事件型"成就，通过在对应 e
 - [x] `src/App.vue` — 整合 AchievementToast + 主菜单"成就"入口
 - [x] `public/scenes/demo.json` — 3 个成就 + QTE success 变量 set + alone_ending onEnter
 
-### P15 结局画廊 + 章节回顾 — 分支图可视化（待实现）
+### P15 结局画廊 + 章节回顾 — 分支图 + 完成度百分比 + 条件提示 ✅ 已完成 2026-06-09
 
-目标：通关后展示结局画廊 + 章节分支流程图。玩家直观看到"哪些结局未解锁、哪些分支未走过"，驱动重玩。
+目标：通关后展示结局画廊和章节分支流程图，包含完成度百分比和未解锁分支的条件提示，
+驱动重玩探索。对标 Detroit 的流程图体验。
+
+**设计决策（对标 Detroit / Dark Pictures）：**
+
+| 决策 | 做法 |
+|------|------|
+| **结局存储** | 共用 `visitedSceneIds`，不独立建表。`endings` 数组声明哪些场景是结局，画廊查 `visitedSceneIds.has(sceneId)` |
+| **路径追踪** | **节点级** `visitedSceneIds: Set<string>` — `goToScene` 中 `visited.add(scene.id)` |
+| **回顾 UI** | Vue Flow 只读完整分支图 + 已到达节点绿色实心高亮 + 未到达节点灰色虚线边框 |
 
 **结局画廊：**
 
@@ -799,26 +808,32 @@ QTE 成功 / 到达隐藏结局 / 通关等"事件型"成就，通过在对应 e
 }
 ```
 
-引擎 `goToScene` 到达结局场景时标记解锁。画廊缩略图网格：已解锁显示画面，未解锁 ? 剪影。
+引擎 `goToScene` 到达场景时自动记录 visited。画廊检查 `visitedSceneIds.has(ending.sceneId)`。
 
-**章节回顾：**
+**章节回顾新增：**
 
-基于 Vue Flow 节点图（复用 P3 编辑器），只读模式。追踪 `visitedSceneIds: Set<string>`，
+**完成度百分比：** 每章展示 "3/7 (43%) 场景已发现"。
-在 `goToScene` 中记录。展示章节分支图，已走路径高亮，未走路径灰色虚线。
+统计该章 `startScene` 可达的场景数作为分母，visited 中属于本章的场景数作为分子。
 
-入口：游戏结束后展示 + 章节选择界面每章卡片下有"回顾"按钮。不打断游戏流程。
+**条件提示：** 分支图中一些灰色节点显示小锁图标 + 条件提示：
+```
+[灰色节点] 🔒 需要 trust >= 80
+```
+引擎读取该边对应 choice/hotspot 的 `conditions`，展示第一个未满足的条件。
 
 **实现清单：**
 
-- [ ] `engine/types.ts` — `GameData.endings`、`EndingDef`
+- [x] `engine/types.ts` — `GameData.endings`、`EndingDef { id, label, sceneId, thumbnail? }`
-- [ ] `engine/systems/SaveSystem.ts` — DB v5 新增 `endings` + `visited` 表
+- [x] `engine/core/Engine.ts` — `goToScene` 中 `onMarkVisited(scene.id)` 回调
-- [ ] `engine/core/Engine.ts` — `goToScene` 标记结局 + 记录 visited scene
+- [x] `engine/core/SceneManager.ts` — `getScenes()` 公开 scenes 数据
-- [ ] `src/components/EndingGallery.vue` — 结局缩略图网格 + 锁定/解锁
+- [x] `engine/systems/SaveSystem.ts` — DB v6 新增 `visited` 表
-- [ ] `src/components/ChapterRecap.vue` — Vue Flow 只读分支图 + 路径高亮
+- [x] `src/components/EndingGallery.vue` — 结局缩略图网格 + 锁定(?剪影)/解锁(画面)
-- [ ] `src/stores/gameStore.ts` — 结局/visited 状态
+- [x] `src/components/ChapterRecap.vue` — BFS 遍历可达场景 + 完成度进度条 + visited/unvisited 列表 + 条件提示
-- [ ] `src/App.vue` — 主菜单"画廊"入口 + 游戏结束整合回顾
+- [x] `src/stores/gameStore.ts` — endings/visitedSceneIds/showEndingGallery 状态
-- [ ] `public/scenes/demo.json` — endings 定义 + 结局缩略图
+- [x] `src/App.vue` — 主菜单"画廊"入口 + EndingGallery/ChapterRecap 组件
-- [ ] 验证：结局到达→解锁→画廊显示、章节回顾路径高亮正确、未解锁结局 ? 剪影
+- [x] `public/scenes/demo.json` — 3 个 endings + `end_*.jpg` 缩略图
+- [x] `public/images/end_{trust,alone,continue}.jpg` — 结局缩略图
+- [x] 验证：TypeScript + Vite build 通过
 
 ### P16 平台化 — 云存档 + 可访问性 + 自适应码率 + 全局统计（待实现）
 

engine/core/Engine.ts

@@ -28,6 +28,7 @@ export class Engine {
   private loopActive = false
   private onUnlockChapter: ((chapterId: string) => void) | null = null
   private onMarkWatched: ((sceneId: string) => void) | null = null
+  private onMarkVisited: ((sceneId: string) => void) | null = null
 
   setChapterUnlockHandler(handler: (chapterId: string) => void) {
     this.onUnlockChapter = handler
@@ -37,6 +38,10 @@ export class Engine {
     this.onMarkWatched = handler
   }
 
+  setMarkVisitedHandler(handler: (sceneId: string) => void) {
+    this.onMarkVisited = handler
+  }
+
   constructor() {
     this.sceneManager = new SceneManager()
     this.videoManager = new VideoManager()
@@ -74,40 +79,16 @@ export class Engine {
   }
 
   private goToScene(scene: SceneNode) {
+    this.currentScene = scene
+
     const chapter = this.sceneManager.getChapterBySceneId(scene.id)
     if (chapter) {
       this.onUnlockChapter?.(chapter.id)
       this.emit('chapterUnlock', chapter)
     }
 
-    if (scene.onEnter) {
+    this.onMarkVisited?.(scene.id)
-      this.stateManager.apply(scene.onEnter)
-    }
 
-    if (scene.videoMuted) {
-      this.videoManager.setMuted(true)
-    } else {
-      this.videoManager.setMuted(false)
-    }
-
-    const bgmUrl = scene.bgmUrl || null
-    if (bgmUrl) {
-      this.audioSystem.play(
-        bgmUrl,
-        scene.bgmVolume ?? 0.8,
-        scene.bgmCrossFade ?? 2.0,
-        scene.bgmDuckLevel,
-        scene.bgmDuckFade,
-      )
-    } else {
-      this.audioSystem.stop(scene.bgmCrossFade ?? 2.0)
-    }
-
-    this.enterScene(scene)
-  }
-
-  private enterScene(scene: SceneNode) {
-    this.currentScene = scene
     this.qteTriggered = false
     this.qteResolved = false
     this.loopActive = false
@@ -405,7 +386,7 @@ export class Engine {
 
     this.ended = false
     this.isInitialScene = false
-    this.enterScene(scene)
+    this.goToScene(scene)
   }
 
   destroy() {

engine/core/SceneManager.ts

@@ -25,6 +25,10 @@ export class SceneManager {
     return Object.keys(this.scenes)
   }
 
+  getScenes(): Record<string, SceneNode> {
+    return this.scenes
+  }
+
   getChapterBySceneId(sceneId: string): ChapterInfo | undefined {
     return this.chapters.find((ch) => ch.startScene === sceneId)
   }

engine/systems/SaveSystem.ts

@@ -25,19 +25,25 @@ interface AchievementRecord {
   achievementId: string
 }
 
+interface VisitedRecord {
+  sceneId: string
+}
+
 class SaveDB extends Dexie {
   saves!: Table<SaveRecord, number>
   unlocks!: Table<UnlockRecord, string>
   watched!: Table<WatchedRecord, string>
   achievements!: Table<AchievementRecord, string>
+  visited!: Table<VisitedRecord, string>
 
   constructor() {
     super('MovieGameSaves')
-    this.version(5).stores({
+    this.version(6).stores({
       saves: '++id, slot',
       unlocks: 'chapterId',
       watched: 'sceneId',
       achievements: 'achievementId',
+      visited: 'sceneId',
     })
   }
 }
@@ -138,4 +144,16 @@ export class SaveSystem {
     const records = await db.achievements.toArray()
     return records.map((r) => r.achievementId)
   }
+
+  async markVisited(sceneId: string) {
+    const exists = await db.visited.get(sceneId)
+    if (!exists) {
+      await db.visited.put({ sceneId })
+    }
+  }
+
+  async getVisitedSceneIds(): Promise<string[]> {
+    const records = await db.visited.toArray()
+    return records.map((r) => r.sceneId)
+  }
 }

engine/types.ts

@@ -88,12 +88,20 @@ export interface AchievementDef {
   condition: Condition
 }
 
+export interface EndingDef {
+  id: string
+  label: string
+  sceneId: string
+  thumbnail?: string
+}
+
 export interface GameData {
   scenes: Record<string, SceneNode>
   startScene: string
   variables: Record<string, number>
   chapters?: ChapterInfo[]
   achievements?: AchievementDef[]
+  endings?: EndingDef[]
 }
 
 export interface ChoiceRecord {

public/scenes/demo.json

@@ -31,6 +31,11 @@
       "condition": { "variable": "completed_game", "op": ">=", "value": 1 }
     }
   ],
+  "endings": [
+    { "id": "trust_end", "label": "信任的伙伴", "sceneId": "trust_ending", "thumbnail": "/images/end_trust.jpg" },
+    { "id": "alone_end", "label": "独行之路", "sceneId": "alone_ending", "thumbnail": "/images/end_alone.jpg" },
+    { "id": "continue_end", "label": "继续前行", "sceneId": "continue_ending", "thumbnail": "/images/end_continue.jpg" }
+  ],
   "chapters": [
     {
       "id": "ch1",

src/App.vue

@@ -11,6 +11,8 @@ import PlaybackBar from '@/components/PlaybackBar.vue'
 import LangSwitch from '@/components/LangSwitch.vue'
 import AchievementToast from '@/components/AchievementToast.vue'
 import AchievementPanel from '@/components/AchievementPanel.vue'
+import EndingGallery from '@/components/EndingGallery.vue'
+import ChapterRecap from '@/components/ChapterRecap.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
 import { useFullscreen } from '@/composables/useFullscreen'
@@ -26,6 +28,8 @@ const started = ref(false)
 const showMenu = ref(false)
 const showChapterSelect = ref(false)
 const showAchievements = ref(false)
+const showEndingGallery = ref(false)
+const recapChapterId = ref<string | null>(null)
 const hasAutoSave = ref(false)
 const currentSpeed = ref(1)
 const canSkip = ref(false)
@@ -34,7 +38,7 @@ const showPromptToast = ref(false)
 
 const { loadGame, start, resumeAutoSave, makeChoice, clickHotspot, startChapter,
   skipScene, setSpeed, getSpeed, isSceneWatched,
-  saveGame, loadGameFromSlot, refreshSaves, saveSystem } =
+  saveGame, loadGameFromSlot, refreshSaves, saveSystem, engine } =
   useGameEngine(() => [videoElA.value, videoElB.value])
 
 async function init() {
@@ -203,6 +207,7 @@ init()
         <button v-if="hasAutoSave" class="start-btn resume-btn" @click="handleResume">{{ t('ui.resume') }}</button>
         <button v-if="store.chapters.length > 0" class="start-btn chapters-btn" @click="openChapterSelect">{{ t('ui.chapters') }}</button>
         <button v-if="store.achievementDefs.length > 0" class="start-btn achievement-btn" @click="showAchievements = true">成就</button>
+        <button v-if="store.endings.length > 0" class="start-btn gallery-btn" @click="showEndingGallery = true">画廊</button>
       </div>
       <div v-if="store.gameEnded" class="game-end-overlay">
         <div class="game-end-text">{{ t('ui.gameEnd') }}</div>
@@ -230,6 +235,19 @@ init()
         :unlocked-ids="store.unlockedAchievementIds"
         @close="showAchievements = false"
       />
+      <EndingGallery
+        v-if="showEndingGallery"
+        :endings="store.endings"
+        :visited-ids="store.visitedSceneIds"
+        @close="showEndingGallery = false"
+      />
+      <ChapterRecap
+        v-if="recapChapterId"
+        :chapter="store.chapters.find(c => c.id === recapChapterId)!"
+        :scenes="engine.sceneManager.getScenes()"
+        :visited-ids="store.visitedSceneIds"
+        @close="recapChapterId = null"
+      />
       <AchievementToast
         :achievement-id="store.toastAchievementId"
         :definitions="store.achievementDefs"
@@ -366,6 +384,11 @@ html, body {
   color: #ffc107;
 }
 
+.gallery-btn {
+  border-color: rgba(156, 39, 176, 0.3);
+  color: #ce93d8;
+}
+
 .game-end-actions {
   margin-top: 24px;
   display: flex;

src/components/ChapterRecap.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChapterInfo, SceneNode } from '@engine/types'
+
+const props = defineProps<{
+  chapter: ChapterInfo
+  scenes: Record<string, SceneNode>
+  visitedIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+function collectReachable(startId: string): Set<string> {
+  const visited = new Set<string>()
+  const queue = [startId]
+  while (queue.length > 0) {
+    const id = queue.shift()!
+    if (visited.has(id)) continue
+    const scene = props.scenes[id]
+    if (!scene) continue
+    visited.add(id)
+    if (scene.choices) {
+      for (const c of scene.choices) {
+        if (c.targetScene && !visited.has(c.targetScene)) queue.push(c.targetScene)
+      }
+    }
+    if (scene.nextScene && !visited.has(scene.nextScene)) queue.push(scene.nextScene)
+    if (scene.qte) {
+      if (scene.qte.successScene && !visited.has(scene.qte.successScene)) queue.push(scene.qte.successScene)
+      if (scene.qte.failScene && !visited.has(scene.qte.failScene)) queue.push(scene.qte.failScene)
+    }
+    if (scene.hotspots) {
+      for (const h of scene.hotspots) {
+        if (h.targetScene && !visited.has(h.targetScene)) queue.push(h.targetScene)
+      }
+    }
+  }
+  return visited
+}
+
+const reachable = computed(() => collectReachable(props.chapter.startScene))
+
+const visitedCount = computed(() => {
+  let count = 0
+  for (const id of reachable.value) {
+    if (props.visitedIds.has(id)) count++
+  }
+  return count
+})
+
+const totalCount = computed(() => reachable.value.size)
+
+const percentage = computed(() => {
+  if (totalCount.value === 0) return 0
+  return Math.round((visitedCount.value / totalCount.value) * 100)
+})
+
+const sceneList = computed(() => {
+  return [...reachable.value].map((id) => {
+    const scene = props.scenes[id]
+    const isVisited = props.visitedIds.has(id)
+    let hint = ''
+
+    if (!isVisited) {
+      // Find why this scene is locked - look at conditions from scenes that lead to it
+      for (const [srcId, src] of Object.entries(props.scenes)) {
+        if (src.choices) {
+          for (const c of src.choices) {
+            if (c.targetScene === id && c.conditions && c.conditions.length > 0) {
+              const firstCond = c.conditions[0]
+              hint = `${firstCond.variable} ${firstCond.op} ${firstCond.value}`
+              break
+            }
+          }
+        }
+        if (src.hotspots) {
+          for (const h of src.hotspots) {
+            if (h.targetScene === id && h.conditions && h.conditions.length > 0) {
+              const firstCond = h.conditions[0]
+              hint = `${firstCond.variable} ${firstCond.op} ${firstCond.value}`
+              break
+            }
+          }
+        }
+        if (hint) break
+      }
+    }
+
+    return { id, label: scene?.id ?? id, isVisited, hint }
+  })
+})
+</script>
+
+<template>
+  <div class="recap-overlay" @click.self="emit('close')" @keydown.escape="emit('close')">
+    <div class="recap-panel">
+      <h2 class="recap-title">{{ chapter.label }} - 回顾</h2>
+
+      <div class="recap-progress">
+        <div class="progress-bar">
+          <div class="progress-fill" :style="{ width: percentage + '%' }"></div>
+        </div>
+        <div class="progress-text">{{ visitedCount }} / {{ totalCount }} 场景已发现 ({{ percentage }}%)</div>
+      </div>
+
+      <div class="recap-list">
+        <div
+          v-for="item in sceneList"
+          :key="item.id"
+          class="recap-item"
+          :class="{ visited: item.isVisited }"
+        >
+          <span class="recap-icon">{{ item.isVisited ? '✅' : '⬜' }}</span>
+          <span class="recap-label">{{ item.label }}</span>
+          <span v-if="!item.isVisited && item.hint" class="recap-hint">🔒 {{ item.hint }}</span>
+        </div>
+      </div>
+
+      <button class="recap-close" @click="emit('close')">关闭</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.recap-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.recap-panel {
+  background: #1a1a2e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  padding: 36px 40px;
+  min-width: 420px;
+  max-width: 520px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.recap-title {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 400;
+  color: #ddd;
+  letter-spacing: 2px;
+  margin-bottom: 20px;
+}
+
+.recap-progress {
+  margin-bottom: 20px;
+}
+
+.progress-bar {
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #4caf50;
+  border-radius: 3px;
+  transition: width 0.4s ease;
+}
+
+.progress-text {
+  margin-top: 8px;
+  font-size: 13px;
+  color: #aaa;
+  text-align: center;
+}
+
+.recap-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+.recap-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.recap-item.visited {
+  background: rgba(76, 175, 80, 0.08);
+}
+
+.recap-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.recap-label {
+  color: #ccc;
+  flex: 1;
+}
+
+.recap-item.visited .recap-label {
+  color: #fff;
+}
+
+.recap-hint {
+  font-size: 11px;
+  color: #ff9800;
+  white-space: nowrap;
+}
+
+.recap-close {
+  margin-top: 20px;
+  padding: 10px 36px;
+  font-size: 14px;
+  color: #888;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  align-self: center;
+}
+
+.recap-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ccc;
+}
+</style>

src/components/EndingGallery.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { EndingDef } from '@engine/types'
+
+defineProps<{
+  endings: EndingDef[]
+  visitedIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+function isUnlocked(ending: EndingDef, visitedIds: Set<string>): boolean {
+  return visitedIds.has(ending.sceneId)
+}
+</script>
+
+<template>
+  <div class="ending-overlay" @click.self="emit('close')" @keydown.escape="emit('close')">
+    <div class="ending-panel">
+      <h2 class="ending-title">结局画廊</h2>
+
+      <div class="ending-grid">
+        <div
+          v-for="end in endings"
+          :key="end.id"
+          class="ending-card"
+          :class="{ locked: !isUnlocked(end, visitedIds) }"
+        >
+          <div class="ending-thumb">
+            <img v-if="end.thumbnail" :src="end.thumbnail" class="thumb-img" />
+            <div v-else class="thumb-placeholder">?</div>
+          </div>
+          <div class="ending-label">{{ isUnlocked(end, visitedIds) ? end.label : '???' }}</div>
+          <div v-if="!isUnlocked(end, visitedIds)" class="lock-icon">🔒</div>
+        </div>
+      </div>
+
+      <button class="end-close" @click="emit('close')">关闭</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ending-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.ending-panel {
+  background: #1a1a2e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  padding: 36px 40px;
+  min-width: 400px;
+  max-width: 560px;
+}
+
+.ending-title {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 400;
+  color: #ddd;
+  letter-spacing: 3px;
+  margin-bottom: 28px;
+}
+
+.ending-grid {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.ending-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 140px;
+}
+
+.ending-card.locked {
+  opacity: 0.4;
+}
+
+.ending-thumb {
+  width: 120px;
+  height: 68px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-placeholder {
+  font-size: 28px;
+  color: #555;
+}
+
+.ending-label {
+  font-size: 13px;
+  color: #ccc;
+  text-align: center;
+}
+
+.lock-icon {
+  font-size: 14px;
+  margin-top: -6px;
+}
+
+.end-close {
+  display: block;
+  margin: 24px auto 0;
+  padding: 10px 36px;
+  font-size: 14px;
+  color: #888;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.end-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ccc;
+}
+</style>

src/composables/useGameEngine.ts

@@ -26,6 +26,11 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
       await saveSystem.markWatched(sceneId)
     })
 
+    engine.setMarkVisitedHandler(async (sceneId) => {
+      store.addVisitedSceneId(sceneId)
+      await saveSystem.markVisited(sceneId)
+    })
+
     engine.achievementSystem.setUnlockCallback(async (ach) => {
       await saveSystem.unlockAchievement(ach.id)
       store.addUnlockedAchievement(ach.id)
@@ -119,6 +124,11 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
     const achieved = await saveSystem.getUnlockedAchievements()
     store.setUnlockedAchievementIds(achieved)
     engine.achievementSystem.init(data.achievements || [], achieved)
+
+    store.setEndings(data.endings || [])
+
+    const visitedIds = await saveSystem.getVisitedSceneIds()
+    store.setVisitedSceneIds(visitedIds)
   }
 
   function ensureVideo() {

src/stores/gameStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { ref, shallowRef } from 'vue'
-import type { SceneNode, Choice, QTEDefinition, Hotspot, ChapterInfo, AchievementDef } from '@engine/types'
+import type { SceneNode, Choice, QTEDefinition, Hotspot, ChapterInfo, AchievementDef, EndingDef } from '@engine/types'
 
 export interface SlotInfo {
   slot: number
@@ -33,6 +33,9 @@ export const useGameStore = defineStore('game', () => {
   const achievementDefs = ref<AchievementDef[]>([])
   const unlockedAchievementIds = ref<Set<string>>(new Set())
   const toastAchievementId = ref('')
+  const showEndingGallery = ref(false)
+  const endings = ref<EndingDef[]>([])
+  const visitedSceneIds = ref<Set<string>>(new Set())
 
   function setScene(scene: SceneNode) {
     currentScene.value = scene
@@ -152,6 +155,23 @@ export const useGameStore = defineStore('game', () => {
     toastAchievementId.value = ''
   }
 
+  function setEndings(list: EndingDef[]) {
+    endings.value = list
+  }
+
+  function setShowEndingGallery(val: boolean) {
+    showEndingGallery.value = val
+  }
+
+  function setVisitedSceneIds(ids: string[]) {
+    visitedSceneIds.value = new Set(ids)
+  }
+
+  function addVisitedSceneId(id: string) {
+    visitedSceneIds.value.add(id)
+    visitedSceneIds.value = new Set(visitedSceneIds.value)
+  }
+
   function dump() {
     console.group('GameStore')
     console.log('currentScene:', currentScene.value?.id)
@@ -169,7 +189,7 @@ export const useGameStore = defineStore('game', () => {
     qteActive, qteDef, qteTotal, qteRemaining, qteResult, videoTime,
     hotspots, isImageScene, showChapterSelect, chapters, unlockedChapterIds,
     inputMode, showAchievements, achievementDefs, unlockedAchievementIds,
-    toastAchievementId,
+    toastAchievementId, showEndingGallery, endings, visitedSceneIds,
     setScene, setChoices, clearChoices, setGameEnded,
     setTimer, clearTimer, setSaves,
     showQTE, updateQTE, resolveQTE, clearQTE, setVideoTime,
@@ -178,6 +198,7 @@ export const useGameStore = defineStore('game', () => {
     setChapters, setUnlockedChapters, addUnlockedChapter, setShowChapterSelect,
     setShowAchievements, setAchievementDefs, setUnlockedAchievementIds,
     addUnlockedAchievement, clearToastAchievement,
+    setEndings, setShowEndingGallery, setVisitedSceneIds, addVisitedSceneId,
     dump,
   }
 })