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

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 触发、键盘监听、超时判定
+- [x] `engine/systems/QTESystem.ts` — QTE 触发、键盘监听（支持多键匹配）、超时判定
-- [ ] `src/components/QTEOverlay.vue` — QTE 视觉遮罩（按键提示 + 倒计时环）
+- [x] `src/components/QTEOverlay.vue` — SVG 倒计时环 + 按键提示 + 成功/失败动画
-- [ ] `src/components/Subtitles.vue` — WebVTT 解析 + 字幕渲染
+- [x] `src/components/Subtitles.vue` — WebVTT 解析 + 字幕同步渲染
-- [ ] 多存档槽位 + 存档缩略图（canvas 截图当前视频帧）
+- [x] `engine/core/Engine.ts` — 集成 QTE（timeupdate 检测 + 条件跳转 + 效果应用）
-- [ ] `engine/core/Engine.ts` — 完整事件总线（sceneChange, choiceMade, qteTriggered 等）
+- [x] 多存档槽位 + 存档缩略图（canvas 截图当前视频帧，320x180 JPEG）
-- [ ] 验证：QTE 正常触发与判定，字幕同步，多存档正常工作
+- [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 周）
 

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(() => {
+      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()
   }

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
   }

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()
+  }
+}

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,
     }))
   }
 

engine/types.ts

@@ -69,5 +69,7 @@ export type EngineEvent =
   | 'choiceTimer'
   | 'gameEnd'
   | 'qteTrigger'
+  | 'qteTimer'
+  | 'qteResult'
   | 'videoEnd'
   | 'choiceTimeout'

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": {

public/subtitles/intro.vtt

@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00.000 --> 00:02.000
+你醒来发现自己在一个陌生的房间
+
+00:02.500 --> 00:03.000
+前方有两扇门，你必须做出选择

public/subtitles/left_door.vtt

@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00.000 --> 00:02.500
+你走进了发光的门，来到一个明亮的大厅
+
+00:02.500 --> 00:03.000
+一位陌生人向你伸出了手

public/subtitles/stay.vtt

@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00.000 --> 00:03.000
+你选择留在原地，时间缓缓流逝...

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"

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>

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-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-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;
+  min-width: 480px;
-  max-width: 500px;
+  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 {
+.slot-thumb {
-  border-color: rgba(100, 200, 255, 0.3);
+  width: 64px;
-  background: rgba(100, 200, 255, 0.06);
+  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 {
+.thumb-img {
-  color: #6cf;
+  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;
+  font-size: 12px;
-  color: #aaa;
+  color: #888;
-  white-space: nowrap;
 }
 
 .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;

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>

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()
   }

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,
   }
 })