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