chore: sync latest changes
This commit is contained in:
46
ROADMAP.md
46
ROADMAP.md
@@ -739,9 +739,18 @@ engine.on('choiceRequest', (choiceList) => {
|
|||||||
- [x] `public/scenes/demo.json` — left_door + trust_ending 各一个 prompt 示例
|
- [x] `public/scenes/demo.json` — left_door + trust_ending 各一个 prompt 示例
|
||||||
- [x] 验证:TypeScript + Vite build 通过
|
- [x] 验证:TypeScript + Vite build 通过
|
||||||
|
|
||||||
### P14 成就系统 — 事件触发 + 条件检测 + Toast 弹窗(待实现)
|
### P14 成就系统 — 纯变量检测 + 单一检查点 + Toast 队列 ✅ 已完成 2026-06-09
|
||||||
|
|
||||||
目标:Steam 式成就系统,驱动重玩探索。事件触发或变量条件检测,解锁时底部 toast 滑入。
|
目标:Steam 式成就系统,驱动重玩探索。所有成就通过变量检测,在 `StateManager.apply` 末尾单一检查点触发。
|
||||||
|
|
||||||
|
**设计决策(对标 Detroit / Dark Pictures):**
|
||||||
|
|
||||||
|
| 决策 | 做法 |
|
||||||
|
|------|------|
|
||||||
|
| **检测方式** | **纯变量 + 单一检查点** — `condition: { variable, op, value }`,`StateManager.apply` 末尾 `achievementSystem.check(variables)` |
|
||||||
|
| **Toast 弹出** | **逐个队列** — 同时解锁多个成就时一个消失后下一个才弹出 |
|
||||||
|
| **图标** | **可选 URL** — 有 `icon` 路径则显示缩略图,为空则不显示图标栏 |
|
||||||
|
| **入口** | **仅主菜单** — 不在游戏内 Esc 菜单,属于元游戏层 |
|
||||||
|
|
||||||
**数据结构:**
|
**数据结构:**
|
||||||
|
|
||||||
@@ -754,35 +763,26 @@ engine.on('choiceRequest', (choiceList) => {
|
|||||||
"description": "成功完成一次 QTE",
|
"description": "成功完成一次 QTE",
|
||||||
"icon": "",
|
"icon": "",
|
||||||
"hidden": false,
|
"hidden": false,
|
||||||
"trigger": { "event": "qteResult", "success": true }
|
"condition": { "variable": "qte_succeeded", "op": ">=", "value": 1 }
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "explorer",
|
|
||||||
"title": "探索者",
|
|
||||||
"description": "搜索过房间的每一个角落",
|
|
||||||
"icon": "",
|
|
||||||
"hidden": false,
|
|
||||||
"trigger": { "variable": "investigation", "op": ">=", "value": 2 }
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
触发条件支持:`{ event }`(qteResult / choiceMade / gameEnd / sceneReached)或 `{ variable, op, value }`。
|
QTE 成功 / 到达隐藏结局 / 通关等"事件型"成就,通过在对应 effects 或 onEnter 中变量来驱动检测。
|
||||||
解锁持久化到 IndexedDB,toast 滑入 3 秒消失。
|
|
||||||
|
|
||||||
**实现清单:**
|
**实现清单:**
|
||||||
|
|
||||||
- [ ] `engine/types.ts` — `GameData.achievements`、`AchievementDef` 接口
|
- [x] `engine/types.ts` — `GameData.achievements`、`AchievementDef { id, title, description, icon?, hidden, condition }`
|
||||||
- [ ] `engine/systems/AchievementSystem.ts` — 触发检测 + 解锁 + 回调 onUnlock
|
- [x] `engine/systems/AchievementSystem.ts` — `check(variables)` 遍历未解锁成就;`onUnlock` 回调;toast 队列管理
|
||||||
- [ ] `engine/systems/SaveSystem.ts` — DB v5 新增 `achievements` 表
|
- [x] `engine/systems/SaveSystem.ts` — DB v5 新增 `achievements` 表
|
||||||
- [ ] `engine/core/Engine.ts` — 事件点调用 `achievementSystem.check(event, data)`
|
- [x] `engine/core/StateManager.ts` — `apply` 末尾 `onAfterApply` 回调
|
||||||
- [ ] `src/components/AchievementToast.vue` — 底部弹窗滑入/滑出动画
|
- [x] `engine/core/Engine.ts` — `stateManager.onAfterApply → achievementSystem.check`
|
||||||
- [ ] `src/components/AchievementPanel.vue` — 成就列表(全部/已解锁/未解锁)
|
- [x] `src/components/AchievementToast.vue` — 底部弹窗滑入/滑出动画
|
||||||
- [ ] `src/stores/gameStore.ts` — 成就解锁状态
|
- [x] `src/components/AchievementPanel.vue` — 成就列表(全部/已解锁/未解锁/隐藏)
|
||||||
- [ ] `src/App.vue` — 整合 AchievementToast + 主菜单"成就"入口
|
- [x] `src/stores/gameStore.ts` — 成就定义/解锁/toast 状态
|
||||||
- [ ] `public/scenes/demo.json` — 2~3 个成就示例
|
- [x] `src/App.vue` — 整合 AchievementToast + 主菜单"成就"入口
|
||||||
- [ ] 验证:QTE 成功触发 toast、变量成就自动检测、面板显示正确
|
- [x] `public/scenes/demo.json` — 3 个成就 + QTE success 变量 set + alone_ending onEnter
|
||||||
|
|
||||||
### P15 结局画廊 + 章节回顾 — 分支图可视化(待实现)
|
### P15 结局画廊 + 章节回顾 — 分支图可视化(待实现)
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { StateManager } from './StateManager'
|
|||||||
import { ChoiceSystem } from '../systems/ChoiceSystem'
|
import { ChoiceSystem } from '../systems/ChoiceSystem'
|
||||||
import { QTESystem } from '../systems/QTESystem'
|
import { QTESystem } from '../systems/QTESystem'
|
||||||
import { AudioSystem } from '../systems/AudioSystem'
|
import { AudioSystem } from '../systems/AudioSystem'
|
||||||
|
import { AchievementSystem } from '../systems/AchievementSystem'
|
||||||
|
|
||||||
type EventHandler = (...args: any[]) => void
|
type EventHandler = (...args: any[]) => void
|
||||||
|
|
||||||
@@ -15,6 +16,7 @@ export class Engine {
|
|||||||
choiceSystem: ChoiceSystem
|
choiceSystem: ChoiceSystem
|
||||||
qteSystem: QTESystem
|
qteSystem: QTESystem
|
||||||
audioSystem: AudioSystem
|
audioSystem: AudioSystem
|
||||||
|
achievementSystem: AchievementSystem
|
||||||
|
|
||||||
private currentScene: SceneNode | null = null
|
private currentScene: SceneNode | null = null
|
||||||
private events: Map<EngineEvent, Set<EventHandler>> = new Map()
|
private events: Map<EngineEvent, Set<EventHandler>> = new Map()
|
||||||
@@ -42,6 +44,11 @@ export class Engine {
|
|||||||
this.choiceSystem = new ChoiceSystem()
|
this.choiceSystem = new ChoiceSystem()
|
||||||
this.qteSystem = new QTESystem()
|
this.qteSystem = new QTESystem()
|
||||||
this.audioSystem = new AudioSystem()
|
this.audioSystem = new AudioSystem()
|
||||||
|
this.achievementSystem = new AchievementSystem()
|
||||||
|
|
||||||
|
this.stateManager.onAfterApply = (vars) => {
|
||||||
|
this.achievementSystem.check(vars)
|
||||||
|
}
|
||||||
|
|
||||||
this.videoManager.onTimeUpdate(this.onTimeUpdate)
|
this.videoManager.onTimeUpdate(this.onTimeUpdate)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ export class StateManager {
|
|||||||
variables: Record<string, number> = {}
|
variables: Record<string, number> = {}
|
||||||
flags: Set<string> = new Set()
|
flags: Set<string> = new Set()
|
||||||
history: ChoiceRecord[] = []
|
history: ChoiceRecord[] = []
|
||||||
|
onAfterApply: ((variables: Record<string, number>) => void) | null = null
|
||||||
|
|
||||||
init(initialVars: Record<string, number>) {
|
init(initialVars: Record<string, number>) {
|
||||||
this.variables = { ...initialVars }
|
this.variables = { ...initialVars }
|
||||||
@@ -72,6 +73,7 @@ export class StateManager {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.onAfterApply?.(this.variables)
|
||||||
}
|
}
|
||||||
|
|
||||||
recordChoice(choice: ChoiceRecord) {
|
recordChoice(choice: ChoiceRecord) {
|
||||||
|
|||||||
81
engine/systems/AchievementSystem.ts
Normal file
81
engine/systems/AchievementSystem.ts
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
import type { AchievementDef } from '../types'
|
||||||
|
|
||||||
|
type UnlockCallback = (achievement: AchievementDef) => void
|
||||||
|
|
||||||
|
export class AchievementSystem {
|
||||||
|
private definitions: AchievementDef[] = []
|
||||||
|
private unlockedIds: Set<string> = new Set()
|
||||||
|
private onUnlock: UnlockCallback | null = null
|
||||||
|
private toastQueue: string[] = []
|
||||||
|
private toastActive = false
|
||||||
|
|
||||||
|
init(defs: AchievementDef[], alreadyUnlocked: string[]) {
|
||||||
|
this.definitions = defs
|
||||||
|
this.unlockedIds = new Set(alreadyUnlocked)
|
||||||
|
this.toastQueue = []
|
||||||
|
this.toastActive = false
|
||||||
|
}
|
||||||
|
|
||||||
|
setUnlockCallback(cb: UnlockCallback) {
|
||||||
|
this.onUnlock = cb
|
||||||
|
}
|
||||||
|
|
||||||
|
check(variables: Record<string, number>) {
|
||||||
|
for (const def of this.definitions) {
|
||||||
|
if (this.unlockedIds.has(def.id)) continue
|
||||||
|
|
||||||
|
const cond = def.condition
|
||||||
|
const val = variables[cond.variable] ?? 0
|
||||||
|
let matched = false
|
||||||
|
|
||||||
|
switch (cond.op) {
|
||||||
|
case '==': matched = val === cond.value; break
|
||||||
|
case '!=': matched = val !== cond.value; break
|
||||||
|
case '>': matched = val > (cond.value as number); break
|
||||||
|
case '<': matched = val < (cond.value as number); break
|
||||||
|
case '>=': matched = val >= (cond.value as number); break
|
||||||
|
case '<=': matched = val <= (cond.value as number); break
|
||||||
|
}
|
||||||
|
|
||||||
|
if (matched) {
|
||||||
|
this.unlockedIds.add(def.id)
|
||||||
|
this.onUnlock?.(def)
|
||||||
|
this.enqueueToast(def.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private enqueueToast(id: string) {
|
||||||
|
this.toastQueue.push(id)
|
||||||
|
if (!this.toastActive) {
|
||||||
|
this.showNextToast()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private showNextToast() {
|
||||||
|
if (this.toastQueue.length === 0) {
|
||||||
|
this.toastActive = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.toastActive = true
|
||||||
|
// toast is shown by the UI layer watching toastQueue
|
||||||
|
// UI calls toastDismissed() when the toast animation finishes
|
||||||
|
}
|
||||||
|
|
||||||
|
getToastQueue(): string[] {
|
||||||
|
return [...this.toastQueue]
|
||||||
|
}
|
||||||
|
|
||||||
|
toastDismissed(id: string) {
|
||||||
|
this.toastQueue = this.toastQueue.filter((i) => i !== id)
|
||||||
|
this.showNextToast()
|
||||||
|
}
|
||||||
|
|
||||||
|
getUnlockedIds(): string[] {
|
||||||
|
return [...this.unlockedIds]
|
||||||
|
}
|
||||||
|
|
||||||
|
getDefinitions(): AchievementDef[] {
|
||||||
|
return this.definitions
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -21,17 +21,23 @@ interface WatchedRecord {
|
|||||||
timestamp: number
|
timestamp: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface AchievementRecord {
|
||||||
|
achievementId: string
|
||||||
|
}
|
||||||
|
|
||||||
class SaveDB extends Dexie {
|
class SaveDB extends Dexie {
|
||||||
saves!: Table<SaveRecord, number>
|
saves!: Table<SaveRecord, number>
|
||||||
unlocks!: Table<UnlockRecord, string>
|
unlocks!: Table<UnlockRecord, string>
|
||||||
watched!: Table<WatchedRecord, string>
|
watched!: Table<WatchedRecord, string>
|
||||||
|
achievements!: Table<AchievementRecord, string>
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super('MovieGameSaves')
|
super('MovieGameSaves')
|
||||||
this.version(4).stores({
|
this.version(5).stores({
|
||||||
saves: '++id, slot',
|
saves: '++id, slot',
|
||||||
unlocks: 'chapterId',
|
unlocks: 'chapterId',
|
||||||
watched: 'sceneId',
|
watched: 'sceneId',
|
||||||
|
achievements: 'achievementId',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -120,4 +126,16 @@ export class SaveSystem {
|
|||||||
const records = await db.watched.toArray()
|
const records = await db.watched.toArray()
|
||||||
return records.map((r) => r.sceneId)
|
return records.map((r) => r.sceneId)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async unlockAchievement(id: string) {
|
||||||
|
const exists = await db.achievements.get(id)
|
||||||
|
if (!exists) {
|
||||||
|
await db.achievements.put({ achievementId: id })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async getUnlockedAchievements(): Promise<string[]> {
|
||||||
|
const records = await db.achievements.toArray()
|
||||||
|
return records.map((r) => r.achievementId)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -79,11 +79,21 @@ export interface ChapterInfo {
|
|||||||
defaultVariables?: Record<string, number>
|
defaultVariables?: Record<string, number>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface AchievementDef {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
icon?: string
|
||||||
|
hidden?: boolean
|
||||||
|
condition: Condition
|
||||||
|
}
|
||||||
|
|
||||||
export interface GameData {
|
export interface GameData {
|
||||||
scenes: Record<string, SceneNode>
|
scenes: Record<string, SceneNode>
|
||||||
startScene: string
|
startScene: string
|
||||||
variables: Record<string, number>
|
variables: Record<string, number>
|
||||||
chapters?: ChapterInfo[]
|
chapters?: ChapterInfo[]
|
||||||
|
achievements?: AchievementDef[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ChoiceRecord {
|
export interface ChoiceRecord {
|
||||||
@@ -115,3 +125,4 @@ export type EngineEvent =
|
|||||||
| 'hotspotRequest'
|
| 'hotspotRequest'
|
||||||
| 'hotspotUpdate'
|
| 'hotspotUpdate'
|
||||||
| 'chapterUnlock'
|
| 'chapterUnlock'
|
||||||
|
| 'achievementUnlock'
|
||||||
|
|||||||
@@ -5,6 +5,32 @@
|
|||||||
"courage": 0,
|
"courage": 0,
|
||||||
"investigation": 0
|
"investigation": 0
|
||||||
},
|
},
|
||||||
|
"achievements": [
|
||||||
|
{
|
||||||
|
"id": "qte_master",
|
||||||
|
"title": "反应达人",
|
||||||
|
"description": "成功完成一次 QTE",
|
||||||
|
"icon": "",
|
||||||
|
"hidden": false,
|
||||||
|
"condition": { "variable": "qte_succeeded", "op": ">=", "value": 1 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "explorer",
|
||||||
|
"title": "探索者",
|
||||||
|
"description": "搜索过房间的所有角落",
|
||||||
|
"icon": "",
|
||||||
|
"hidden": false,
|
||||||
|
"condition": { "variable": "investigation", "op": ">=", "value": 2 }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "game_finished",
|
||||||
|
"title": "通关达成",
|
||||||
|
"description": "完成一次游戏",
|
||||||
|
"icon": "",
|
||||||
|
"hidden": false,
|
||||||
|
"condition": { "variable": "completed_game", "op": ">=", "value": 1 }
|
||||||
|
}
|
||||||
|
],
|
||||||
"chapters": [
|
"chapters": [
|
||||||
{
|
{
|
||||||
"id": "ch1",
|
"id": "ch1",
|
||||||
@@ -175,7 +201,10 @@
|
|||||||
"successScene": "qte_success",
|
"successScene": "qte_success",
|
||||||
"failScene": "qte_fail",
|
"failScene": "qte_fail",
|
||||||
"effects": {
|
"effects": {
|
||||||
"success": [{ "type": "add", "target": "courage", "value": 15 }],
|
"success": [
|
||||||
|
{ "type": "add", "target": "courage", "value": 15 },
|
||||||
|
{ "type": "set", "target": "qte_succeeded", "value": 1 }
|
||||||
|
],
|
||||||
"fail": [{ "type": "add", "target": "trust", "value": -20 }]
|
"fail": [{ "type": "add", "target": "trust", "value": -20 }]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -261,7 +290,10 @@
|
|||||||
"alone_ending": {
|
"alone_ending": {
|
||||||
"id": "alone_ending",
|
"id": "alone_ending",
|
||||||
"videoUrl": "/videos/alone_ending.mp4",
|
"videoUrl": "/videos/alone_ending.mp4",
|
||||||
"choices": []
|
"choices": [],
|
||||||
|
"onEnter": [
|
||||||
|
{ "type": "set", "target": "completed_game", "value": 1 }
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"continue_ending": {
|
"continue_ending": {
|
||||||
"id": "continue_ending",
|
"id": "continue_ending",
|
||||||
|
|||||||
20
src/App.vue
20
src/App.vue
@@ -9,6 +9,8 @@ import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
|
|||||||
import ChapterSelect from '@/components/ChapterSelect.vue'
|
import ChapterSelect from '@/components/ChapterSelect.vue'
|
||||||
import PlaybackBar from '@/components/PlaybackBar.vue'
|
import PlaybackBar from '@/components/PlaybackBar.vue'
|
||||||
import LangSwitch from '@/components/LangSwitch.vue'
|
import LangSwitch from '@/components/LangSwitch.vue'
|
||||||
|
import AchievementToast from '@/components/AchievementToast.vue'
|
||||||
|
import AchievementPanel from '@/components/AchievementPanel.vue'
|
||||||
import { useGameEngine } from '@/composables/useGameEngine'
|
import { useGameEngine } from '@/composables/useGameEngine'
|
||||||
import { useGameStore } from '@/stores/gameStore'
|
import { useGameStore } from '@/stores/gameStore'
|
||||||
import { useFullscreen } from '@/composables/useFullscreen'
|
import { useFullscreen } from '@/composables/useFullscreen'
|
||||||
@@ -23,6 +25,7 @@ const loading = ref(true)
|
|||||||
const started = ref(false)
|
const started = ref(false)
|
||||||
const showMenu = ref(false)
|
const showMenu = ref(false)
|
||||||
const showChapterSelect = ref(false)
|
const showChapterSelect = ref(false)
|
||||||
|
const showAchievements = ref(false)
|
||||||
const hasAutoSave = ref(false)
|
const hasAutoSave = ref(false)
|
||||||
const currentSpeed = ref(1)
|
const currentSpeed = ref(1)
|
||||||
const canSkip = ref(false)
|
const canSkip = ref(false)
|
||||||
@@ -199,6 +202,7 @@ init()
|
|||||||
<button class="start-btn" @click="handleStart">{{ t('ui.start') }}</button>
|
<button class="start-btn" @click="handleStart">{{ t('ui.start') }}</button>
|
||||||
<button v-if="hasAutoSave" class="start-btn resume-btn" @click="handleResume">{{ t('ui.resume') }}</button>
|
<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.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>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="store.gameEnded" class="game-end-overlay">
|
<div v-if="store.gameEnded" class="game-end-overlay">
|
||||||
<div class="game-end-text">{{ t('ui.gameEnd') }}</div>
|
<div class="game-end-text">{{ t('ui.gameEnd') }}</div>
|
||||||
@@ -220,6 +224,17 @@ init()
|
|||||||
@select="onStartChapter"
|
@select="onStartChapter"
|
||||||
@back="showChapterSelect = false"
|
@back="showChapterSelect = false"
|
||||||
/>
|
/>
|
||||||
|
<AchievementPanel
|
||||||
|
v-if="showAchievements"
|
||||||
|
:definitions="store.achievementDefs"
|
||||||
|
:unlocked-ids="store.unlockedAchievementIds"
|
||||||
|
@close="showAchievements = false"
|
||||||
|
/>
|
||||||
|
<AchievementToast
|
||||||
|
:achievement-id="store.toastAchievementId"
|
||||||
|
:definitions="store.achievementDefs"
|
||||||
|
@done="store.clearToastAchievement()"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -346,6 +361,11 @@ html, body {
|
|||||||
color: #fc8;
|
color: #fc8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.achievement-btn {
|
||||||
|
border-color: rgba(255, 193, 7, 0.3);
|
||||||
|
color: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
.game-end-actions {
|
.game-end-actions {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
156
src/components/AchievementPanel.vue
Normal file
156
src/components/AchievementPanel.vue
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { AchievementDef } from '@engine/types'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
definitions: AchievementDef[]
|
||||||
|
unlockedIds: Set<string>
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
close: []
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="ach-overlay" @click.self="emit('close')" @keydown.escape="emit('close')">
|
||||||
|
<div class="ach-panel">
|
||||||
|
<h2 class="ach-title">成就</h2>
|
||||||
|
|
||||||
|
<div class="ach-list">
|
||||||
|
<div
|
||||||
|
v-for="ach in definitions"
|
||||||
|
:key="ach.id"
|
||||||
|
class="ach-card"
|
||||||
|
:class="{ locked: !unlockedIds.has(ach.id), hidden: ach.hidden && !unlockedIds.has(ach.id) }"
|
||||||
|
>
|
||||||
|
<div class="ach-icon">
|
||||||
|
<img v-if="ach.icon" :src="ach.icon" class="ach-img" />
|
||||||
|
<span v-else class="ach-star">{{ unlockedIds.has(ach.id) ? '⭐' : '🔒' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="ach-body">
|
||||||
|
<div class="ach-title-text">
|
||||||
|
{{ !unlockedIds.has(ach.id) && ach.hidden ? '???' : ach.title }}
|
||||||
|
</div>
|
||||||
|
<div class="ach-desc-text">
|
||||||
|
{{ !unlockedIds.has(ach.id) && ach.hidden ? '' : ach.description }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="ach-close" @click="emit('close')">关闭</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.ach-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.88);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ddd;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-card.locked {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-card.hidden {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-star {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-title-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-desc-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ach-close:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
108
src/components/AchievementToast.vue
Normal file
108
src/components/AchievementToast.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, watch, ref } from 'vue'
|
||||||
|
import type { AchievementDef } from '@engine/types'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
achievementId: string
|
||||||
|
definitions: AchievementDef[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
done: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
|
|
||||||
|
const def = computed(() => props.definitions.find((d) => d.id === props.achievementId))
|
||||||
|
|
||||||
|
watch(() => props.achievementId, (id) => {
|
||||||
|
if (!id) return
|
||||||
|
visible.value = true
|
||||||
|
setTimeout(() => {
|
||||||
|
visible.value = false
|
||||||
|
setTimeout(() => emit('done'), 400)
|
||||||
|
}, 3000)
|
||||||
|
}, { immediate: true })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="achievement-toast" v-if="visible && def" :class="{ show: visible }">
|
||||||
|
<div class="toast-icon">
|
||||||
|
<img v-if="def.icon" :src="def.icon" class="toast-img" />
|
||||||
|
<span v-else class="toast-star">⭐</span>
|
||||||
|
</div>
|
||||||
|
<div class="toast-body">
|
||||||
|
<div class="toast-label">成就解锁</div>
|
||||||
|
<div class="toast-title">{{ def.title }}</div>
|
||||||
|
<div class="toast-desc">{{ def.description }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.achievement-toast {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 24px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(100px);
|
||||||
|
background: rgba(20, 20, 40, 0.95);
|
||||||
|
border: 1px solid rgba(255, 193, 7, 0.4);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 14px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
z-index: 300;
|
||||||
|
min-width: 320px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.4s ease, opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.achievement-toast.show {
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-star {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #ffc107;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-title {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -26,6 +26,11 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
|
|||||||
await saveSystem.markWatched(sceneId)
|
await saveSystem.markWatched(sceneId)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
engine.achievementSystem.setUnlockCallback(async (ach) => {
|
||||||
|
await saveSystem.unlockAchievement(ach.id)
|
||||||
|
store.addUnlockedAchievement(ach.id)
|
||||||
|
})
|
||||||
|
|
||||||
engine.on('sceneChange', (scene) => {
|
engine.on('sceneChange', (scene) => {
|
||||||
store.setScene(scene)
|
store.setScene(scene)
|
||||||
store.clearChoices()
|
store.clearChoices()
|
||||||
@@ -106,8 +111,14 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
|
|||||||
engine.sceneManager.load(data)
|
engine.sceneManager.load(data)
|
||||||
engine.stateManager.init(data.variables)
|
engine.stateManager.init(data.variables)
|
||||||
store.setChapters(data.chapters || [])
|
store.setChapters(data.chapters || [])
|
||||||
|
store.setAchievementDefs(data.achievements || [])
|
||||||
|
|
||||||
const unlocked = await saveSystem.getUnlockedChapters()
|
const unlocked = await saveSystem.getUnlockedChapters()
|
||||||
store.setUnlockedChapters(unlocked)
|
store.setUnlockedChapters(unlocked)
|
||||||
|
|
||||||
|
const achieved = await saveSystem.getUnlockedAchievements()
|
||||||
|
store.setUnlockedAchievementIds(achieved)
|
||||||
|
engine.achievementSystem.init(data.achievements || [], achieved)
|
||||||
}
|
}
|
||||||
|
|
||||||
function ensureVideo() {
|
function ensureVideo() {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
import { ref, shallowRef } from 'vue'
|
import { ref, shallowRef } from 'vue'
|
||||||
import type { SceneNode, Choice, QTEDefinition, Hotspot, ChapterInfo } from '@engine/types'
|
import type { SceneNode, Choice, QTEDefinition, Hotspot, ChapterInfo, AchievementDef } from '@engine/types'
|
||||||
|
|
||||||
export interface SlotInfo {
|
export interface SlotInfo {
|
||||||
slot: number
|
slot: number
|
||||||
@@ -29,6 +29,10 @@ export const useGameStore = defineStore('game', () => {
|
|||||||
const showChapterSelect = ref(false)
|
const showChapterSelect = ref(false)
|
||||||
const chapters = ref<ChapterInfo[]>([])
|
const chapters = ref<ChapterInfo[]>([])
|
||||||
const unlockedChapterIds = ref<Set<string>>(new Set())
|
const unlockedChapterIds = ref<Set<string>>(new Set())
|
||||||
|
const showAchievements = ref(false)
|
||||||
|
const achievementDefs = ref<AchievementDef[]>([])
|
||||||
|
const unlockedAchievementIds = ref<Set<string>>(new Set())
|
||||||
|
const toastAchievementId = ref('')
|
||||||
|
|
||||||
function setScene(scene: SceneNode) {
|
function setScene(scene: SceneNode) {
|
||||||
currentScene.value = scene
|
currentScene.value = scene
|
||||||
@@ -126,6 +130,28 @@ export const useGameStore = defineStore('game', () => {
|
|||||||
showChapterSelect.value = val
|
showChapterSelect.value = val
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setShowAchievements(val: boolean) {
|
||||||
|
showAchievements.value = val
|
||||||
|
}
|
||||||
|
|
||||||
|
function setAchievementDefs(list: AchievementDef[]) {
|
||||||
|
achievementDefs.value = list
|
||||||
|
}
|
||||||
|
|
||||||
|
function setUnlockedAchievementIds(ids: string[]) {
|
||||||
|
unlockedAchievementIds.value = new Set(ids)
|
||||||
|
}
|
||||||
|
|
||||||
|
function addUnlockedAchievement(id: string) {
|
||||||
|
unlockedAchievementIds.value.add(id)
|
||||||
|
unlockedAchievementIds.value = new Set(unlockedAchievementIds.value)
|
||||||
|
toastAchievementId.value = id
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearToastAchievement() {
|
||||||
|
toastAchievementId.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
function dump() {
|
function dump() {
|
||||||
console.group('GameStore')
|
console.group('GameStore')
|
||||||
console.log('currentScene:', currentScene.value?.id)
|
console.log('currentScene:', currentScene.value?.id)
|
||||||
@@ -142,13 +168,16 @@ export const useGameStore = defineStore('game', () => {
|
|||||||
currentScene, choices, gameEnded, timerTotal, timerRemaining, saves,
|
currentScene, choices, gameEnded, timerTotal, timerRemaining, saves,
|
||||||
qteActive, qteDef, qteTotal, qteRemaining, qteResult, videoTime,
|
qteActive, qteDef, qteTotal, qteRemaining, qteResult, videoTime,
|
||||||
hotspots, isImageScene, showChapterSelect, chapters, unlockedChapterIds,
|
hotspots, isImageScene, showChapterSelect, chapters, unlockedChapterIds,
|
||||||
inputMode,
|
inputMode, showAchievements, achievementDefs, unlockedAchievementIds,
|
||||||
|
toastAchievementId,
|
||||||
setScene, setChoices, clearChoices, setGameEnded,
|
setScene, setChoices, clearChoices, setGameEnded,
|
||||||
setTimer, clearTimer, setSaves,
|
setTimer, clearTimer, setSaves,
|
||||||
showQTE, updateQTE, resolveQTE, clearQTE, setVideoTime,
|
showQTE, updateQTE, resolveQTE, clearQTE, setVideoTime,
|
||||||
setHotspots, clearHotspots, setIsImageScene,
|
setHotspots, clearHotspots, setIsImageScene,
|
||||||
setInputMode,
|
setInputMode,
|
||||||
setChapters, setUnlockedChapters, addUnlockedChapter, setShowChapterSelect,
|
setChapters, setUnlockedChapters, addUnlockedChapter, setShowChapterSelect,
|
||||||
|
setShowAchievements, setAchievementDefs, setUnlockedAchievementIds,
|
||||||
|
addUnlockedAchievement, clearToastAchievement,
|
||||||
dump,
|
dump,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user