feat: P2 - QTE system, subtitles, save thumbnails

- QTESystem: trigger detection via timeupdate, multi-key matching, timeout handling - QTEOverlay: SVG countdown ring + key prompts + success/fail animation - Engine: integrate QTE (timeupdate check, conditional branching, effect application) - Subtitles: WebVTT parsing + synchronized subtitle rendering - GamePlayer: overlay QTE and subtitle components - SaveSystem: DB v2 with thumbnail field, canvas snapshot at 320x180 JPEG - SaveLoadMenu: thumbnail preview for save slots - VideoManager: getActiveVideoElement() for canvas capture - App.vue: QTE/subtitle integration, thumbnail capture on save - stores: QTE state management, save list with thumbnails - demo.json: QTE scene (right_door), subtitles, new event types - ROADMAP: mark P2 as completed
2026-06-07 19:35:14 +08:00
parent c168e30e52
commit 319a379921
18 changed files with 625 additions and 53 deletions
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -154,14 +154,18 @@ interface SaveData {
 - [x] `src/App.vue` — 整合 SaveLoadMenu、双 video、计时器
 - [x] 验证：条件分支走通，存档读档正常，视频切换交叉淡化

-### P2 进阶 — QTE + 字幕 + 多存档槽（1 周）
+### P2 进阶 — QTE + 字幕 + 多存档槽（1 周）✅ 已完成 2026-06-07

- [ ] `engine/systems/QTESystem.ts` — QTE 触发、键盘监听、超时判定
- [ ] `src/components/QTEOverlay.vue` — QTE 视觉遮罩（按键提示 + 倒计时环）
- [ ] `src/components/Subtitles.vue` — WebVTT 解析 + 字幕渲染
- [ ] 多存档槽位 + 存档缩略图（canvas 截图当前视频帧）
- [ ] `engine/core/Engine.ts` — 完整事件总线（sceneChange, choiceMade, qteTriggered 等）
- [ ] 验证：QTE 正常触发与判定，字幕同步，多存档正常工作
+- [x] `engine/systems/QTESystem.ts` — QTE 触发、键盘监听（支持多键匹配）、超时判定
+- [x] `src/components/QTEOverlay.vue` — SVG 倒计时环 + 按键提示 + 成功/失败动画
+- [x] `src/components/Subtitles.vue` — WebVTT 解析 + 字幕同步渲染
+- [x] `engine/core/Engine.ts` — 集成 QTE（timeupdate 检测 + 条件跳转 + 效果应用）
+- [x] 多存档槽位 + 存档缩略图（canvas 截图当前视频帧，320x180 JPEG）
+- [x] `engine/core/VideoManager.ts` — 新增 `getActiveVideoElement()` 供截图
+- [x] `engine/systems/SaveSystem.ts` — DB 版本升级 v2（支持 thumbnail 字段）
+- [x] `src/components/SaveLoadMenu.vue` — 存档缩略图预览
+- [x] 完整事件总线（sceneChange, choiceRequest, choiceTimer, choiceTimeout, videoEnd, qteTrigger, qteTimer, qteResult, gameEnd）
+- [x] 验证：QTE 正常触发与判定（ArrowLeft/ArrowRight/A/D 躲石块），字幕同步，存档缩略图正常

 ### P3 编辑器 — 可视化剧情编辑（2-3 周）

--- a/engine/core/Engine.ts
+++ b/engine/core/Engine.ts
@@ -3,6 +3,7 @@ import { SceneManager } from './SceneManager'
 import { VideoManager } from './VideoManager'
 import { StateManager } from './StateManager'
 import { ChoiceSystem } from '../systems/ChoiceSystem'
+import { QTESystem } from '../systems/QTESystem'

 type EventHandler = (...args: any[]) => void

@@ -11,17 +12,21 @@ export class Engine {
  videoManager: VideoManager
  stateManager: StateManager
  choiceSystem: ChoiceSystem
+  qteSystem: QTESystem

  private currentScene: SceneNode | null = null
  private events: Map<EngineEvent, Set<EventHandler>> = new Map()
  private ended = false
  private isInitialScene = true
+  private qteTriggered = false
+  private qteResolved = false

  constructor() {
    this.sceneManager = new SceneManager()
    this.videoManager = new VideoManager()
    this.stateManager = new StateManager()
    this.choiceSystem = new ChoiceSystem()
+    this.qteSystem = new QTESystem()
  }

  on(event: EngineEvent, handler: EventHandler) {
@@ -46,6 +51,8 @@ export class Engine {

  private goToScene(scene: SceneNode) {
    this.currentScene = scene
+    this.qteTriggered = false
+    this.qteResolved = false

    if (scene.onEnter) {
      this.stateManager.apply(scene.onEnter)
@@ -57,8 +64,14 @@ export class Engine {
    )

    this.videoManager.onEnd(() => {
-      this.emit('videoEnd', scene)
-      this.onVideoEnd(scene)
+      if (!this.qteResolved) {
+        this.emit('videoEnd', scene)
+        this.onVideoEnd(scene)
+      }
+    })
+
+    this.videoManager.onTimeUpdate((time) => {
+      this.checkQTE(scene, time)
    })

    if (this.isInitialScene) {
@@ -71,6 +84,49 @@ export class Engine {
    this.emit('sceneChange', scene)
  }

+  private checkQTE(scene: SceneNode, time: number) {
+    if (!scene.qte || this.qteTriggered) return
+    if (time >= scene.qte.triggerTime) {
+      this.qteTriggered = true
+      const qte = scene.qte
+
+      this.emit('qteTrigger', qte)
+
+      this.qteSystem.trigger(
+        qte,
+        (remaining, total) => {
+          this.emit('qteTimer', { remaining, total })
+        },
+        (success) => {
+          this.qteResolved = true
+          if (success) {
+            if (qte.effects?.success) {
+              this.stateManager.apply(qte.effects.success)
+            }
+            this.emit('qteResult', { success: true })
+            const targetScene = this.sceneManager.getScene(qte.successScene)
+            if (targetScene) {
+              this.goToScene(targetScene)
+            } else {
+              this.endGame()
+            }
+          } else {
+            if (qte.effects?.fail) {
+              this.stateManager.apply(qte.effects.fail)
+            }
+            this.emit('qteResult', { success: false })
+            const targetScene = this.sceneManager.getScene(qte.failScene)
+            if (targetScene) {
+              this.goToScene(targetScene)
+            } else {
+              this.endGame()
+            }
+          }
+        }
+      )
+    }
+  }
+
  private onVideoEnd(scene: SceneNode) {
    const validChoices = this.getValidChoices(scene)

@@ -129,6 +185,7 @@ export class Engine {

  endGame() {
    this.ended = true
+    this.qteSystem.cancel()
    this.emit('gameEnd')
  }

@@ -163,6 +220,7 @@ export class Engine {
  }

  destroy() {
+    this.qteSystem.destroy()
    this.videoManager.detach()
    this.events.clear()
  }
--- a/engine/core/VideoManager.ts
+++ b/engine/core/VideoManager.ts
@@ -132,6 +132,10 @@ export class VideoManager {
    return this.active?.currentTime ?? 0
  }

+  getActiveVideoElement(): HTMLVideoElement | null {
+    return this.active ?? null
+  }
+
  onEnd(cb: VideoEndCallback) {
    this.onEndCallback = cb
  }
--- a/engine/systems/QTESystem.ts
+++ b/engine/systems/QTESystem.ts
@@ -0,0 +1,75 @@
+import type { QTEDefinition } from '../types'
+
+type QTEUpdateCallback = (remaining: number, total: number) => void
+type QTEResultCallback = (success: boolean) => void
+
+export class QTESystem {
+  private timerId: ReturnType<typeof setInterval> | null = null
+  private timeoutId: ReturnType<typeof setTimeout> | null = null
+  private keyHandler: ((e: KeyboardEvent) => void) | null = null
+  private tickMs = 50
+  private active = false
+
+  trigger(
+    qte: QTEDefinition,
+    onUpdate: QTEUpdateCallback,
+    onResult: QTEResultCallback,
+  ) {
+    if (this.active) return
+    this.active = true
+
+    const startTime = Date.now()
+    const total = qte.timeLimit * 1000
+
+    this.keyHandler = (e: KeyboardEvent) => {
+      if (!this.active) return
+      const matched = qte.keys.some(
+        (k) => k.toLowerCase() === e.key.toLowerCase()
+      )
+      if (matched) {
+        this.clear()
+        onResult(true)
+      }
+    }
+    document.addEventListener('keydown', this.keyHandler)
+
+    this.timerId = setInterval(() => {
+      const elapsed = Date.now() - startTime
+      const remaining = Math.max(0, total - elapsed)
+      onUpdate(remaining / 1000, qte.timeLimit)
+      if (remaining <= 0) {
+        this.clear()
+        onResult(false)
+      }
+    }, this.tickMs)
+
+    this.timeoutId = setTimeout(() => {
+      this.clear()
+      onResult(false)
+    }, total)
+  }
+
+  cancel() {
+    this.clear()
+  }
+
+  private clear() {
+    this.active = false
+    if (this.timerId !== null) {
+      clearInterval(this.timerId)
+      this.timerId = null
+    }
+    if (this.timeoutId !== null) {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = null
+    }
+    if (this.keyHandler !== null) {
+      document.removeEventListener('keydown', this.keyHandler)
+      this.keyHandler = null
+    }
+  }
+
+  destroy() {
+    this.clear()
+  }
+}
--- a/engine/systems/SaveSystem.ts
+++ b/engine/systems/SaveSystem.ts
@@ -9,6 +9,7 @@ interface SaveRecord {
  variables: string
  flags: string
  history: string
+  thumbnail?: string
 }

 class SaveDB extends Dexie {
@@ -16,7 +17,7 @@ class SaveDB extends Dexie {

  constructor() {
    super('MovieGameSaves')
-    this.version(1).stores({
+    this.version(2).stores({
      saves: '++id, slot',
    })
  }
@@ -25,14 +26,15 @@ class SaveDB extends Dexie {
 const db = new SaveDB()

 export class SaveSystem {
-  async save(slot: number, data: Omit<SaveData, 'slot' | 'thumbnail'>): Promise<void> {
+  async save(slot: number, data: Omit<SaveData, 'slot'>): Promise<void> {
    const record: SaveRecord = {
      slot,
-      timestamp: Date.now(),
+      timestamp: data.timestamp || Date.now(),
      currentScene: data.currentScene,
      variables: JSON.stringify(data.variables),
      flags: JSON.stringify(data.flags),
      history: JSON.stringify(data.history),
+      thumbnail: data.thumbnail,
    }

    const existing = await db.saves.where('slot').equals(slot).first()
@@ -54,15 +56,17 @@ export class SaveSystem {
      variables: JSON.parse(record.variables),
      flags: JSON.parse(record.flags),
      history: JSON.parse(record.history),
+      thumbnail: record.thumbnail,
    }
  }

-  async listSlots(): Promise<{ slot: number; timestamp: number; sceneLabel: string }[]> {
+  async listSlots(): Promise<{ slot: number; timestamp: number; sceneLabel: string; thumbnail?: string }[]> {
    const records = await db.saves.orderBy('slot').toArray()
    return records.map((r) => ({
      slot: r.slot,
      timestamp: r.timestamp,
      sceneLabel: r.currentScene,
+      thumbnail: r.thumbnail,
    }))
  }

--- a/engine/types.ts
+++ b/engine/types.ts
@@ -69,5 +69,7 @@ export type EngineEvent =
  | 'choiceTimer'
  | 'gameEnd'
  | 'qteTrigger'
+  | 'qteTimer'
+  | 'qteResult'
  | 'videoEnd'
  | 'choiceTimeout'
--- a/public/scenes/demo.json
+++ b/public/scenes/demo.json
@@ -8,11 +8,11 @@
    "intro": {
      "id": "intro",
      "videoUrl": "/videos/intro.mp4",
+      "subtitleUrl": "/subtitles/intro.vtt",
      "choices": [
        {
          "text": "走向左边那扇发光的门",
          "targetScene": "left_door",
-          "timeLimit": 5,
          "effects": [
            { "type": "add", "target": "courage", "value": 10 }
          ]
@@ -33,6 +33,7 @@
    "left_door": {
      "id": "left_door",
      "videoUrl": "/videos/left_door.mp4",
+      "subtitleUrl": "/subtitles/left_door.vtt",
      "choices": [
        {
          "text": "与陌生人握手",
@@ -50,6 +51,36 @@
    "right_door": {
      "id": "right_door",
      "videoUrl": "/videos/right_door.mp4",
+      "qte": {
+        "triggerTime": 1.0,
+        "prompt": "躲避飞来的石块！",
+        "keys": ["ArrowLeft", "ArrowRight", "a", "d"],
+        "timeLimit": 3.0,
+        "successScene": "qte_success",
+        "failScene": "qte_fail",
+        "effects": {
+          "success": [{ "type": "add", "target": "courage", "value": 15 }],
+          "fail": [{ "type": "add", "target": "trust", "value": -20 }]
+        }
+      }
+    },
+    "qte_success": {
+      "id": "qte_success",
+      "videoUrl": "/videos/qte_success.mp4",
+      "choices": [
+        {
+          "text": "继续前进",
+          "targetScene": "continue_ending"
+        },
+        {
+          "text": "回头",
+          "targetScene": "intro"
+        }
+      ]
+    },
+    "qte_fail": {
+      "id": "qte_fail",
+      "videoUrl": "/videos/qte_fail.mp4",
      "choices": [
        {
          "text": "继续前进",
@@ -64,6 +95,7 @@
    "stay": {
      "id": "stay",
      "videoUrl": "/videos/stay.mp4",
+      "subtitleUrl": "/subtitles/stay.vtt",
      "nextScene": "alone_ending"
    },
    "trust_ending": {
--- a/public/subtitles/intro.vtt
+++ b/public/subtitles/intro.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00.000 --> 00:02.000
+你醒来发现自己在一个陌生的房间
+
+00:02.500 --> 00:03.000
+前方有两扇门，你必须做出选择
--- a/public/subtitles/left_door.vtt
+++ b/public/subtitles/left_door.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00.000 --> 00:02.500
+你走进了发光的门，来到一个明亮的大厅
+
+00:02.500 --> 00:03.000
+一位陌生人向你伸出了手
--- a/public/subtitles/stay.vtt
+++ b/public/subtitles/stay.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00.000 --> 00:03.000
+你选择留在原地，时间缓缓流逝...
--- a/public/videos/qte_fail.mp4
+++ b/public/videos/qte_fail.mp4
--- a/public/videos/qte_success.mp4
+++ b/public/videos/qte_success.mp4
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import GamePlayer from '@/components/GamePlayer.vue'
 import ChoicePanel from '@/components/ChoicePanel.vue'
+import QTEOverlay from '@/components/QTEOverlay.vue'
+import Subtitles from '@/components/Subtitles.vue'
 import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
@@ -67,7 +69,20 @@ init()
    <template v-else>
      <div class="game-screen">
        <GamePlayer @video-ready="onVideoReady" />
+        <Subtitles
+          :current-time="store.videoTime"
+          :video-url="store.currentScene?.subtitleUrl ?? null"
+        />
+        <QTEOverlay
+          :visible="store.qteActive"
+          :prompt="store.qteDef?.prompt ?? ''"
+          :keys="store.qteDef?.keys ?? []"
+          :total="store.qteTotal"
+          :remaining="store.qteRemaining"
+          :result="store.qteResult"
+        />
        <ChoicePanel
+          v-if="!store.qteActive"
          :choices="store.choices"
          :timer-total="store.timerTotal"
          :timer-remaining="store.timerRemaining"
--- a/src/components/QTEOverlay.vue
+++ b/src/components/QTEOverlay.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted } from 'vue'
+
+const props = defineProps<{
+  visible: boolean
+  prompt: string
+  keys: string[]
+  total: number
+  remaining: number
+  result: 'none' | 'success' | 'fail'
+}>()
+
+const emit = defineEmits<{
+  done: []
+}>()
+
+const ringRadius = 60
+const ringStroke = 4
+const normalizedRadius = ringRadius - ringStroke * 2
+const circumference = normalizedRadius * 2 * Math.PI
+
+const progress = computed(() => {
+  if (props.total <= 0) return circumference
+  return (props.remaining / props.total) * circumference
+})
+
+const keyLabels = computed(() => props.keys.map(displayKey))
+
+function displayKey(key: string): string {
+  const map: Record<string, string> = {
+    ' ': '空格',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    Enter: '回车',
+    Escape: 'Esc',
+  }
+  return map[key] ?? key.toUpperCase()
+}
+
+watch(() => props.result, (val) => {
+  if (val !== 'none') {
+    setTimeout(() => emit('done'), 800)
+  }
+})
+</script>
+
+<template>
+  <div class="qte-overlay" v-if="visible">
+    <div class="qte-center">
+      <div class="qte-ring" :class="{ 'qte-success': result === 'success', 'qte-fail': result === 'fail' }">
+        <svg width="140" height="140" viewBox="0 0 140 140">
+          <circle
+            stroke="rgba(255,255,255,0.15)"
+            fill="none"
+            :stroke-width="ringStroke"
+            :r="normalizedRadius"
+            :cx="ringRadius + ringStroke"
+            :cy="ringRadius + ringStroke"
+          />
+          <circle
+            class="ring-progress"
+            stroke="#fff"
+            fill="none"
+            :stroke-width="ringStroke"
+            :r="normalizedRadius"
+            :cx="ringRadius + ringStroke"
+            :cy="ringRadius + ringStroke"
+            :stroke-dasharray="circumference + ' ' + circumference"
+            :stroke-dashoffset="circumference - progress"
+            stroke-linecap="round"
+            transform="rotate(-90 64 64)"
+          />
+        </svg>
+        <div class="qte-key">{{ keyLabels[0] }}</div>
+        <div class="qte-time">{{ remaining.toFixed(1) }}s</div>
+      </div>
+      <div class="qte-prompt">{{ prompt }}</div>
+      <div class="qte-result-text" v-if="result === 'success'">成功</div>
+      <div class="qte-result-text fail-text" v-else-if="result === 'fail'">失败</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.qte-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 30;
+}
+
+.qte-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.qte-ring {
+  position: relative;
+  width: 140px;
+  height: 140px;
+}
+
+.qte-ring .ring-progress {
+  transition: stroke-dashoffset 50ms linear, stroke 0.3s;
+}
+
+.qte-ring.qte-success .ring-progress {
+  stroke: #4caf50;
+}
+
+.qte-ring.qte-fail .ring-progress {
+  stroke: #e74c3c;
+}
+
+.qte-key {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -60%);
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 0 12px rgba(255,255,255,0.4);
+}
+
+.qte-time {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: #aaa;
+}
+
+.qte-prompt {
+  font-size: 18px;
+  color: #ddd;
+  letter-spacing: 2px;
+}
+
+.qte-result-text {
+  font-size: 32px;
+  letter-spacing: 4px;
+  color: #4caf50;
+  font-weight: bold;
+}
+
+.qte-result-text.fail-text {
+  color: #e74c3c;
+}
+</style>
--- a/src/components/SaveLoadMenu.vue
+++ b/src/components/SaveLoadMenu.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import type { SlotInfo } from '@/stores/gameStore'

-const props = defineProps<{
+defineProps<{
  saves: SlotInfo[]
 }>()

@@ -21,33 +20,26 @@ const maxSlots = 5
      <h2 class="save-title">存档 / 读档</h2>

      <div class="slot-list">
-        <div class="save-slot auto-save-slot">
-          <div class="slot-label auto-save-label">自动存档</div>
-          <div class="slot-info" v-if="saves.find(s => s.slot === 0)">
-            {{ saves.find(s => s.slot === 0)!.sceneLabel }}
-          </div>
-          <div class="slot-info empty" v-else>暂无自动存档</div>
-          <div class="slot-actions">
-            <button
-              class="slot-btn load-btn"
-              :disabled="!saves.find(s => s.slot === 0)"
-              @click="emit('load', 0)"
-            >
-              读取
-            </button>
-          </div>
-        </div>
-
        <div
          v-for="slot in maxSlots"
          :key="slot"
          class="save-slot"
        >
-          <div class="slot-label">存档 {{ slot }}</div>
-          <div class="slot-info" v-if="saves.find(s => s.slot === slot)">
-            {{ saves.find(s => s.slot === slot)!.sceneLabel }}
+          <div class="slot-thumb">
+            <img
+              v-if="saves.find(s => s.slot === slot)?.thumbnail"
+              :src="saves.find(s => s.slot === slot)!.thumbnail"
+              class="thumb-img"
+            />
+            <span v-else class="thumb-empty">空</span>
+          </div>
+          <div class="slot-meta">
+            <div class="slot-label">存档 {{ slot }}</div>
+            <div class="slot-info" v-if="saves.find(s => s.slot === slot)">
+              {{ saves.find(s => s.slot === slot)!.sceneLabel }}
+            </div>
+            <div class="slot-info empty" v-else>空</div>
          </div>
-          <div class="slot-info empty" v-else>空</div>
          <div class="slot-actions">
            <button class="slot-btn save-btn" @click="emit('save', slot)">保存</button>
            <button
@@ -61,6 +53,7 @@ const maxSlots = 5
        </div>
      </div>

+      <div class="save-hint">游戏会在每次场景切换时自动保存到槽位 0</div>
      <button class="close-btn" @click="emit('close')">关闭</button>
    </div>
  </div>
@@ -82,8 +75,8 @@ const maxSlots = 5
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 32px;
-  min-width: 400px;
-  max-width: 500px;
+  min-width: 480px;
+  max-width: 560px;
 }

 .save-title {
@@ -98,36 +91,53 @@ const maxSlots = 5
 .slot-list {
  display: flex;
  flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }

 .save-slot {
  display: flex;
  align-items: center;
  gap: 12px;
-  padding: 12px 16px;
+  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
 }

-.auto-save-slot {
-  border-color: rgba(100, 200, 255, 0.3);
-  background: rgba(100, 200, 255, 0.06);
+.slot-thumb {
+  width: 64px;
+  height: 36px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }

-.auto-save-label {
-  color: #6cf;
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-empty {
+  font-size: 12px;
+  color: #444;
+}
+
+.slot-meta {
+  flex: 1;
+  min-width: 0;
 }

 .slot-label {
-  font-size: 14px;
-  color: #aaa;
-  white-space: nowrap;
+  font-size: 12px;
+  color: #888;
 }

 .slot-info {
-  flex: 1;
  font-size: 13px;
  color: #ccc;
  overflow: hidden;
@@ -164,9 +174,16 @@ const maxSlots = 5
  cursor: default;
 }

+.save-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  margin-top: 16px;
+}
+
 .close-btn {
  display: block;
-  margin: 24px auto 0;
+  margin: 12px auto 0;
  padding: 10px 32px;
  font-size: 14px;
  color: #888;
--- a/src/components/Subtitles.vue
+++ b/src/components/Subtitles.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface SubCue {
+  start: number
+  end: number
+  text: string
+}
+
+const props = defineProps<{
+  currentTime: number
+  videoUrl: string | null
+}>()
+
+const cues = ref<SubCue[]>([])
+const currentText = ref('')
+const loadedUrl = ref('')
+
+watch(() => props.videoUrl, async (url) => {
+  if (!url || url === loadedUrl.value) return
+  loadedUrl.value = url
+  try {
+    const resp = await fetch(url)
+    const text = await resp.text()
+    cues.value = parseVTT(text)
+  } catch {
+    cues.value = []
+  }
+}, { immediate: true })
+
+watch(() => props.currentTime, (t) => {
+  if (cues.value.length === 0) {
+    currentText.value = ''
+    return
+  }
+  const active = cues.value.find((c) => t >= c.start && t <= c.end)
+  currentText.value = active?.text ?? ''
+})
+
+function parseVTT(raw: string): SubCue[] {
+  const result: SubCue[] = []
+  const lines = raw.split(/\r?\n/)
+  let i = 0
+
+  while (i < lines.length && !lines[i].includes('-->')) {
+    i++
+  }
+
+  for (; i < lines.length; i++) {
+    const line = lines[i].trim()
+    const timeMatch = line.match(
+      /(\d{1,2}:)?(\d{1,2}:)?(\d{1,2}[.,]\d{1,3})\s*-->\s*(\d{1,2}:)?(\d{1,2}:)?(\d{1,2}[.,]\d{1,3})/
+    )
+    if (!timeMatch) continue
+
+    const start = vttTimeToSeconds(timeMatch[0].split('-->')[0].trim())
+    const end = vttTimeToSeconds(timeMatch[0].split('-->')[1].trim())
+
+    let text = ''
+    i++
+    while (i < lines.length && lines[i].trim() !== '') {
+      text += (text ? '\n' : '') + lines[i].trim()
+      i++
+    }
+
+    if (text) {
+      result.push({ start, end, text })
+    }
+  }
+
+  return result
+}
+
+function vttTimeToSeconds(ts: string): number {
+  const parts = ts.replace(',', '.').split(':')
+  if (parts.length === 3) {
+    return parseFloat(parts[0]) * 3600 + parseFloat(parts[1]) * 60 + parseFloat(parts[2])
+  }
+  if (parts.length === 2) {
+    return parseFloat(parts[0]) * 60 + parseFloat(parts[1])
+  }
+  return parseFloat(parts[0])
+}
+</script>
+
+<template>
+  <div class="subtitles" v-if="currentText">
+    <div class="sub-text">{{ currentText }}</div>
+  </div>
+</template>
+
+<style scoped>
+.subtitles {
+  position: absolute;
+  bottom: 80px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  z-index: 5;
+  pointer-events: none;
+}
+
+.sub-text {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 20px;
+  padding: 8px 20px;
+  border-radius: 4px;
+  max-width: 80%;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+  white-space: pre-line;
+}
+</style>
--- a/src/composables/useGameEngine.ts
+++ b/src/composables/useGameEngine.ts
@@ -47,6 +47,22 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
      store.setGameEnded(true)
      engine.choiceSystem.stop()
    })
+
+    engine.on('qteTrigger', (qte) => {
+      store.showQTE(qte)
+    })
+
+    engine.on('qteTimer', ({ remaining }) => {
+      store.updateQTE(remaining)
+    })
+
+    engine.on('qteResult', ({ success }) => {
+      store.resolveQTE(success)
+    })
+
+    engine.videoManager.onTimeUpdate((t: number) => {
+      store.setVideoTime(t)
+    })
  }

  function start() {
@@ -73,12 +89,31 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide

  async function saveGame(slot: number) {
    const state = engine.stateManager
+    const currentScene = store.currentScene
+
+    // Capture thumbnail from active video
+    let thumbnail: string | undefined
+    try {
+      const video = engine.videoManager.getActiveVideoElement()
+      if (video && video.readyState >= 2) {
+        const canvas = document.createElement('canvas')
+        canvas.width = 320
+        canvas.height = 180
+        const ctx = canvas.getContext('2d')
+        if (ctx) {
+          ctx.drawImage(video, 0, 0, 320, 180)
+          thumbnail = canvas.toDataURL('image/jpeg', 0.6)
+        }
+      }
+    } catch { /* ignore canvas errors */ }
+
    await saveSystem.save(slot, {
      timestamp: Date.now(),
-      currentScene: store.currentScene?.id ?? '',
+      currentScene: currentScene?.id ?? '',
      variables: state.variables,
      flags: [...state.flags],
      history: state.history,
+      thumbnail,
    })
    await refreshSaves()
  }
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
 import { ref, shallowRef } from 'vue'
-import type { SceneNode, Choice } from '@engine/types'
+import type { SceneNode, Choice, QTEDefinition } from '@engine/types'

 export interface SlotInfo {
  slot: number
  timestamp: number
  sceneLabel: string
+  thumbnail?: string
 }

 export const useGameStore = defineStore('game', () => {
@@ -16,6 +17,13 @@ export const useGameStore = defineStore('game', () => {
  const timerRemaining = ref(0)
  const saves = ref<SlotInfo[]>([])

+  const qteActive = ref(false)
+  const qteDef = shallowRef<QTEDefinition | null>(null)
+  const qteTotal = ref(0)
+  const qteRemaining = ref(0)
+  const qteResult = ref<'none' | 'success' | 'fail'>('none')
+  const videoTime = ref(0)
+
  function setScene(scene: SceneNode) {
    currentScene.value = scene
  }
@@ -46,9 +54,36 @@ export const useGameStore = defineStore('game', () => {
    saves.value = list
  }

+  function showQTE(qte: QTEDefinition) {
+    qteActive.value = true
+    qteDef.value = qte
+    qteTotal.value = qte.timeLimit
+    qteRemaining.value = qte.timeLimit
+    qteResult.value = 'none'
+  }
+
+  function updateQTE(remaining: number) {
+    qteRemaining.value = remaining
+  }
+
+  function resolveQTE(success: boolean) {
+    qteResult.value = success ? 'success' : 'fail'
+    setTimeout(() => {
+      qteActive.value = false
+      qteDef.value = null
+      qteResult.value = 'none'
+    }, 1000)
+  }
+
+  function setVideoTime(t: number) {
+    videoTime.value = t
+  }
+
  return {
    currentScene, choices, gameEnded, timerTotal, timerRemaining, saves,
+    qteActive, qteDef, qteTotal, qteRemaining, qteResult, videoTime,
    setScene, setChoices, clearChoices, setGameEnded,
    setTimer, clearTimer, setSaves,
+    showQTE, updateQTE, resolveQTE, setVideoTime,
  }
 })