init

src/App.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import GamePlayer from '@/components/GamePlayer.vue'
+import ChoicePanel from '@/components/ChoicePanel.vue'
+import { useGameEngine } from '@/composables/useGameEngine'
+import { useGameStore } from '@/stores/gameStore'
+
+const store = useGameStore()
+const videoElRef = ref<HTMLVideoElement | null>(null)
+const loading = ref(true)
+
+const { loadGame, start, makeChoice } = useGameEngine(() => videoElRef.value)
+
+async function init() {
+  await loadGame('/scenes/demo.json')
+  loading.value = false
+  start()
+}
+
+function onVideoReady(el: HTMLVideoElement) {
+  videoElRef.value = el
+}
+
+function onChoose(index: number) {
+  makeChoice(index)
+}
+
+init()
+</script>
+
+<template>
+  <div class="app-container">
+    <div v-if="loading" class="loading">加载中...</div>
+    <template v-else>
+      <div class="game-screen">
+        <GamePlayer @video-ready="onVideoReady" />
+        <ChoicePanel :choices="store.choices" @choose="onChoose" />
+      </div>
+      <div v-if="store.gameEnded" class="game-end-overlay">
+        <div class="game-end-text">游戏结束</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #000;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style scoped>
+.app-container {
+  width: 100%;
+  height: 100%;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 18px;
+  color: #888;
+}
+
+.game-screen {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.game-end-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.game-end-text {
+  font-size: 36px;
+  letter-spacing: 4px;
+}
+</style>