add story

src/components/GamePage.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { getAuthClient } from '@/api/auth_client';
+import type { Game } from '@/api/generated/crabs/evening_detective_server';
+import HeaderMenu from '@/components/HeaderMenu.vue'
+import { useMessage } from 'naive-ui';
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const client = getAuthClient()
+const router = useRouter()
+const route = useRoute()
+const gameId = route.params.id
+
+const message = useMessage()
+
+const game = ref<Game>({
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    startAt: undefined,
+    status: undefined,
+    scenario: undefined,
+    teams: undefined,
+})
+
+async function getGame(id: number) {
+    const res = await client.GetGame({ id: id })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    game.value = res.game!
+}
+getGame(Number(gameId))
+
+async function toTeamStory(id: number, password: string) {
+    router.push('/team-story/' + id + '?password=' + password)
+}
+</script>
+
+<template>
+    <div class="center-block-custom content-block">
+        <div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)">
+            <div class="team-title">
+                {{ team.name }}
+            </div>
+        </div>
+    </div>
+
+    <HeaderMenu active="games" />
+</template>
+
+<style scoped>
+.team-block {
+    margin: 10px 0;
+    padding: 20px;
+    border-radius: 10px;
+    border: 1px solid #444;
+}
+
+.team-block:hover {
+    cursor: pointer;
+    color: #63e2b7;
+}
+
+.team-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+</style>