feat: story gallery progress, type updates, roadmap, cleanup old session file
This commit is contained in:
67
ROADMAP.md
67
ROADMAP.md
@@ -1205,25 +1205,60 @@ npx @electron/packager . MyGame --platform=win32 --arch=x64 --out=release
|
||||
- [x] 验证：点击 ▶ 开始 → 正确跳转到该章节
|
||||
- [x] 验证：已删除 ChapterSelect.vue / EndingGallery.vue 后项目无编译残留
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"vue": "^3.4",
|
||||
"pinia": "^2.1",
|
||||
"@vue-flow/core": "^1.x",
|
||||
"@vue-flow/background": "^1.x",
|
||||
"@vue-flow/controls": "^1.x",
|
||||
"dexie": "^4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0",
|
||||
"typescript": "^5.3",
|
||||
"vite": "^5.0",
|
||||
"vue-tsc": "^2.0"
|
||||
}
|
||||
### P23 玩家树可视化 — 缩进树取代平铺列表 ✅ 已完成 2026-06-10
|
||||
|
||||
目标：将 StoryGallery 的章节回顾从平铺场景列表升级为缩进树形结构。创作图的汇聚节点在树上复制展示，
|
||||
玩家看到的是严格树——每条选择路径看起来都是独立的故事线（对标 Detroit）。
|
||||
|
||||
**核心改动：StoryGallery 的 `sceneListForChapter()` 替换为 `buildPlayerTree()`**
|
||||
——BFS 遍历图 → 保持树形父子关系 → 同节点不同路径各自复制。
|
||||
|
||||
**数据结构：**
|
||||
|
||||
```typescript
|
||||
interface PlayerTreeNode {
|
||||
sceneId: string
|
||||
label: string
|
||||
visited: boolean
|
||||
locked: boolean
|
||||
lockHint?: string
|
||||
children: PlayerTreeNode[]
|
||||
}
|
||||
```
|
||||
|
||||
**渲染效果对比：**
|
||||
|
||||
```
|
||||
之前（平铺列表）： 之后（缩进树）：
|
||||
✅ intro ✅ intro
|
||||
✅ left_door ├ ✅ left_door
|
||||
⬜ trust_ending 🔒 trust>=80 │ ├ ⬜ trust_ending 🔒 trust>=80
|
||||
⬜ alone_ending │ └ ⬜ alone_ending
|
||||
├ ✅ right_door
|
||||
│ ├ ✅ qte_success
|
||||
│ │ └ ✅ continue_ending
|
||||
│ └ ⬜ qte_fail
|
||||
└ ✅ stay
|
||||
└ ⬜ alone_ending ← 汇聚节点，两条路径各出现一次
|
||||
```
|
||||
|
||||
**实现改动：**
|
||||
|
||||
| 文件 | 改动 |
|
||||
|------|------|
|
||||
| `engine/types.ts` | 新增 `PlayerTreeNode` 接口 |
|
||||
| `src/components/StoryGallery.vue` | `sceneListForChapter()` → `buildPlayerTree()`（递归渲染缩进树）+ 纯 CSS 树连线（`border-left` + `::before` 横线） |
|
||||
|
||||
**实现清单：**
|
||||
|
||||
- [x] `engine/types.ts` — `PlayerTreeNode { sceneId, label, visited, locked, lockHint?, children[] }`
|
||||
- [x] `src/components/TreeNode.vue` — **新建** — 递归树节点组件，`depth` 参数控制缩进 + `border-left` 竖线
|
||||
- [x] `src/components/StoryGallery.vue` — `sceneListForChapter()` → `buildPlayerTree(sceneId, depth, pathSet)` + `buildTreeForChapter()`；Template 用 `<TreeNode>` 渲染
|
||||
- 回环检测：`pathSet: Set<string>` 记录当前路径场景 ID，精确剪枝
|
||||
- 深度兜底：`depth > 10` 截断
|
||||
- 汇聚节点：同一 sceneId 在不同父节点下各建一个独立的 PlayerTreeNode
|
||||
- [x] 验证：TypeScript + Vite build 通过
|
||||
|
||||
## 关键架构决策记录
|
||||
|
||||
1. **引擎与 UI 分离**: `engine/` 下纯 TS 类，不 import Vue。UI 层通过 composables 桥接。
|
||||
|
||||
@@ -152,3 +152,12 @@ export type EngineEvent =
|
||||
| 'hotspotUpdate'
|
||||
| 'chapterUnlock'
|
||||
| 'achievementUnlock'
|
||||
|
||||
export interface PlayerTreeNode {
|
||||
sceneId: string
|
||||
label: string
|
||||
visited: boolean
|
||||
locked: boolean
|
||||
lockHint?: string
|
||||
children: PlayerTreeNode[]
|
||||
}
|
||||
|
||||
4871
session-ses_15fa.md
4871
session-ses_15fa.md
File diff suppressed because one or more lines are too long
3689
session/session-ses_15fa.md
Normal file
3689
session/session-ses_15fa.md
Normal file
File diff suppressed because one or more lines are too long
@@ -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) {
|
||||
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 === id && c.conditions && c.conditions.length > 0) {
|
||||
hint = `${c.conditions[0].variable} ${c.conditions[0].op} ${c.conditions[0].value}`
|
||||
break
|
||||
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 (h.targetScene === sceneId && h.conditions && h.conditions.length > 0) {
|
||||
return `${h.conditions[0].variable} ${h.conditions[0].op} ${h.conditions[0].value}`
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hint) break
|
||||
}
|
||||
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)
|
||||
}
|
||||
}
|
||||
return { id, label: scene?.id ?? id, isVisited, hint }
|
||||
})
|
||||
}
|
||||
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;
|
||||
|
||||
56
src/components/TreeNode.vue
Normal file
56
src/components/TreeNode.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user