feat: story gallery progress, type updates, roadmap, cleanup old session file

src/components/StoryGallery.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { ChapterInfo, SceneNode, EndingDef } from '@engine/types'
+import type { ChapterInfo, SceneNode, EndingDef, PlayerTreeNode } from '@engine/types'
 import { useI18n } from '@/composables/useI18n'
+import TreeNode from './TreeNode.vue'
 
 const { t } = useI18n()
 
@@ -48,7 +49,6 @@ function collectReachable(startId: string): Set<string> {
   return visited
 }
 
-// For each chapter, precompute reachable set
 const chapterReachable = computed(() => {
   const result: Record<string, Set<string>> = {}
   for (const ch of props.chapters) {
@@ -57,7 +57,6 @@ const chapterReachable = computed(() => {
   return result
 })
 
-// Which endings belong to each chapter (BFS-based, no chapterId needed)
 const chapterEndings = computed(() => {
   const result: Record<string, EndingDef[]> = {}
   for (const ch of props.chapters) {
@@ -80,36 +79,80 @@ function chapterProgress(chapterId: string) {
   return { count, total: reachable.size, pct: Math.round((count / reachable.size) * 100) }
 }
 
-function sceneListForChapter(chapterId: string) {
-  const reachable = chapterReachable.value[chapterId]
-  if (!reachable) return []
-  return [...reachable].map((id) => {
-    const scene = props.scenes[id]
-    const isVisited = props.visitedIds.has(id)
-    let hint = ''
-    if (!isVisited) {
-      for (const [, 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) {
-              hint = `${c.conditions[0].variable} ${c.conditions[0].op} ${c.conditions[0].value}`
-              break
-            }
-          }
+function lockHint(sceneId: string): string {
+  for (const [, src] of Object.entries(props.scenes)) {
+    if (src.choices) {
+      for (const c of src.choices) {
+        if (c.targetScene === sceneId && c.conditions && c.conditions.length > 0) {
+          return `${c.conditions[0].variable} ${c.conditions[0].op} ${c.conditions[0].value}`
         }
-        if (src.hotspots) {
-          for (const h of src.hotspots) {
-            if (h.targetScene === id && h.conditions && h.conditions.length > 0) {
-              hint = `${h.conditions[0].variable} ${h.conditions[0].op} ${h.conditions[0].value}`
-              break
-            }
-          }
-        }
-        if (hint) break
       }
     }
-    return { id, label: scene?.id ?? id, isVisited, hint }
-  })
+    if (src.hotspots) {
+      for (const h of src.hotspots) {
+        if (h.targetScene === sceneId && h.conditions && h.conditions.length > 0) {
+          return `${h.conditions[0].variable} ${h.conditions[0].op} ${h.conditions[0].value}`
+        }
+      }
+    }
+  }
+  return ''
+}
+
+function buildPlayerTree(sceneId: string, depth: number, pathSet: Set<string>): PlayerTreeNode | null {
+  if (depth > 10) return null
+  if (pathSet.has(sceneId)) return null
+
+  const scene = props.scenes[sceneId]
+  const label = scene?.id ?? sceneId
+  const visited = props.visitedIds.has(sceneId)
+  const hint = visited ? '' : lockHint(sceneId)
+  const locked = !visited && hint !== ''
+
+  pathSet.add(sceneId)
+
+  const children: PlayerTreeNode[] = []
+  if (scene) {
+    if (scene.choices) {
+      for (const c of scene.choices) {
+        if (c.targetScene) {
+          const child = buildPlayerTree(c.targetScene, depth + 1, pathSet)
+          if (child) children.push(child)
+        }
+      }
+    }
+    if (scene.nextScene) {
+      const child = buildPlayerTree(scene.nextScene, depth + 1, pathSet)
+      if (child) children.push(child)
+    }
+    if (scene.qte) {
+      if (scene.qte.successScene) {
+        const child = buildPlayerTree(scene.qte.successScene, depth + 1, pathSet)
+        if (child) children.push(child)
+      }
+      if (scene.qte.failScene) {
+        const child = buildPlayerTree(scene.qte.failScene, depth + 1, pathSet)
+        if (child) children.push(child)
+      }
+    }
+    if (scene.hotspots) {
+      for (const h of scene.hotspots) {
+        if (h.targetScene) {
+          const child = buildPlayerTree(h.targetScene, depth + 1, pathSet)
+          if (child) children.push(child)
+        }
+      }
+    }
+  }
+
+  pathSet.delete(sceneId)
+  return { sceneId, label, visited, locked, lockHint: hint, children }
+}
+
+function buildTreeForChapter(chapterId: string): PlayerTreeNode | null {
+  const ch = props.chapters.find(c => c.id === chapterId)
+  if (!ch) return null
+  return buildPlayerTree(ch.startScene, 0, new Set())
 }
 
 function toggleExpand(chapterId: string) {
@@ -160,18 +203,11 @@ function toggleExpand(chapterId: string) {
           </div>
 
           <div class="card-recap" v-if="expandedChapterId === ch.id">
-            <div class="recap-scene-list">
-              <div
-                v-for="item in sceneListForChapter(ch.id)"
-                :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>
+            <TreeNode
+              v-if="buildTreeForChapter(ch.id)"
+              :node="buildTreeForChapter(ch.id)!"
+              :depth="0"
+            />
           </div>
         </div>
       </div>
@@ -226,7 +262,7 @@ function toggleExpand(chapterId: string) {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
-  width: 200px;
+  width: 240px;
   overflow: hidden;
   transition: border-color 0.2s;
 }
@@ -343,53 +379,10 @@ function toggleExpand(chapterId: string) {
 .card-recap {
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   padding: 12px 14px;
-  max-height: 200px;
+  max-height: 220px;
   overflow-y: auto;
 }
 
-.recap-scene-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.recap-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 6px;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 3px;
-  font-size: 11px;
-}
-
-.recap-item.visited {
-  background: rgba(76, 175, 80, 0.06);
-}
-
-.recap-icon {
-  font-size: 11px;
-  flex-shrink: 0;
-}
-
-.recap-label {
-  color: #aaa;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.recap-item.visited .recap-label {
-  color: #ddd;
-}
-
-.recap-hint {
-  font-size: 10px;
-  color: #ff9800;
-  white-space: nowrap;
-}
-
 .story-close {
   margin-top: 20px;
   padding: 10px 36px;

src/components/TreeNode.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { PlayerTreeNode } from '@engine/types'
+
+defineProps<{
+  node: PlayerTreeNode
+  depth: number
+}>()
+</script>
+
+<template>
+  <div class="tree-row" :style="{ paddingLeft: depth * 16 + 'px' }">
+    <span class="tree-icon">{{ node.visited ? '✅' : node.locked ? '🔒' : '⬜' }}</span>
+    <span class="tree-label" :class="{ visited: node.visited }">{{ node.label }}</span>
+    <span v-if="node.locked && node.lockHint" class="tree-hint">{{ node.lockHint }}</span>
+  </div>
+  <TreeNode
+    v-for="child in node.children"
+    :key="node.sceneId + '-' + child.sceneId"
+    :node="child"
+    :depth="depth + 1"
+  />
+</template>
+
+<style scoped>
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  font-size: 11px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  margin-left: 8px;
+}
+
+.tree-icon {
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.tree-label {
+  color: #aaa;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-label.visited {
+  color: #ddd;
+}
+
+.tree-hint {
+  font-size: 10px;
+  color: #ff9800;
+  white-space: nowrap;
+}
+</style>