add story

src/components/GamesPage.vue

@@ -1,11 +1,68 @@
 <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 { useRouter } from 'vue-router';
+
+const client = getAuthClient()
+const message = useMessage()
+const router = useRouter()
+
+const games = ref<Game[]>([])
+
+async function getGames() {
+  games.value = []
+  const res = await client.GetGames({})
+  if (res.error != '') {
+    message.error(res.error!)
+    return
+  }
+  games.value = res.games || []
+}
+getGames()
+
+async function toGame(id: number) {
+  router.push('/games/' + id)
+}
 </script>
 
 <template>
-  <div class="center-block-custom content-block">Игры</div>
+  <div class="center-block-custom content-block">
+    <div v-for="game in games" class="game-block" @click="toGame(game.id!)">
+      <div class="game-title">
+        {{ game.name }}
+      </div>
+      <div class="game-description">
+        {{ game.description }}
+      </div>
+    </div>
+  </div>
 
   <HeaderMenu active="games" />
 </template>
 
-<style scoped></style>
+<style scoped>
+.game-block {
+  margin: 10px 0;
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid #444;
+}
+
+.game-block:hover {
+  cursor: pointer;
+  color: #63e2b7;
+}
+
+.game-title {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+
+.game-description {
+  color: #aaa;
+  margin-bottom: 10px;
+}
+</style>