define props on game component

site/src/App.vue

@@ -8,17 +8,15 @@
 		</v-app-bar>
 		<v-main>
 			<TheLanding v-if="!playing" @play="playing = !playing" />
-			<Game v-else />
+			<Game v-else :game="testGame" :dealer="true" />
 		</v-main>
 	</v-app>
 </template>
 
 <script setup lang="ts">
-import {
-	useDark,
-	useToggle,
-} from '@vueuse/core';
+import { useDark, useToggle } from '@vueuse/core';
 import { computed, ref } from 'vue';
+import type { Game } from '@/lib/game';
 
 const dark = useDark();
 const toggleDark = useToggle(dark);
@@ -26,4 +24,15 @@ const theme = computed(() => dark.value ? 'dark' : 'light');
 const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-white-balance-sunny');
 
 const playing = ref(false);
+
+const testGame: Game = {
+	players: [
+		{ hp: 4, items: ['🔍', '', '', '', '', '', '', ''] },
+		{ hp: 3, items: ['🔍', '🔍', '', '', '', '', '', ''] },
+	],
+	round: 1,
+	dealer: true,
+	damage: 1,
+	previous: true,
+};
 </script>

site/src/components/Game.vue

@@ -4,18 +4,18 @@
             <v-sheet :elevation="2" width="800">
                 <v-row class="d-flex justify-center">
                     <v-col cols="auto">
-                        <GameStatus :game="testGame" />
+                        <GameStatus :game="props.game" />
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col cols="6">
                         <!-- dealer -->
-                        <Player :stats="testGame.players[0]" :dealer="true" />
+                        <Player :stats="props.game.players[0]" :dealer="true" />
                     </v-col>
                     <v-divider vertical />
                     <v-col cols="6">
                         <!-- challenger -->
-                        <Player :stats="testGame.players[1]" :dealer="false" />
+                        <Player :stats="props.game.players[1]" :dealer="false" />
                     </v-col>
                 </v-row>
             </v-sheet>
@@ -26,14 +26,10 @@
 <script setup lang="ts">
 import type { Game } from '@/lib/game';
 
-const testGame: Game = {
-    players: [
-        { hp: 4, items: ['🔍', '', '', '', '', '', '', ''] },
-        { hp: 3, items: ['🔍', '🔍', '', '', '', '', '', ''] },
-    ],
-    round: 1,
-    dealer: true,
-    damage: 1,
-    previous: true,
-};
+export interface Props {
+    game: Game;
+    dealer: boolean;
+}
+
+const props = defineProps<Props>();
 </script>