Push new data

src/App.vue

@@ -57,11 +57,21 @@
           playable game.
         </p>
 
-        <div v-if="games.length === 0" class="empty-state">
+        <div v-if="loadingGames" class="empty-state">
+          <p>Loading games…</p>
+        </div>
+
+        <div v-else-if="loadError" class="empty-state">
+          <p>Could not load games.</p>
+          <p>{{ loadError }}</p>
+        </div>
+
+        <div v-else-if="games.length === 0" class="empty-state">
           <p>No games found yet.</p>
           <p>
-            Add folders in <code>src/Data/&lt;GameName&gt;/&lt;Category&gt;</code>
-            with <code>Songs</code> and <code>Answers</code> subfolders.
+            Add folders in <code>public/Data/&lt;GameName&gt;/&lt;Category&gt;</code>
+            with <code>Songs</code> and <code>Answers</code> subfolders, then
+            run <code>npm run generate:data</code>.
           </p>
         </div>
 
@@ -223,7 +233,7 @@
 
 <script lang="ts">
 import { nextTick } from 'vue'
-import { gameData, type Game } from './dataLoader'
+import { loadGameData, type Game } from './dataLoader'
 
 type Team = {
   id: string
@@ -253,7 +263,9 @@ export default {
     return {
       step: 'setup',
       teams: [makeTeam(0), makeTeam(1)] as Team[],
-      games: gameData as Game[],
+      games: [] as Game[],
+      loadingGames: true,
+      loadError: '',
       selectedGame: null as Game | null,
       tiles: {} as TileMap,
       currentTileKey: null,
@@ -274,6 +286,16 @@ export default {
       isAnswerClip: false
     }
   },
+  async mounted() {
+    try {
+      this.loadingGames = true
+      this.games = await loadGameData()
+    } catch (error) {
+      this.loadError = error instanceof Error ? error.message : 'Failed to load games.'
+    } finally {
+      this.loadingGames = false
+    }
+  },
   computed: {
     canProceed() {
       return this.teams.length > 0 && this.teams.every((team) => team.name.trim())