add in game details

frontend/src/vues/GameDetails.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>{{ gameId }}</div>
+  <div>{{ game }}</div>
+
+  <div>#{{ game.id }} - {{ game.title }}</div>
+  <div>{{ game.gamemaster }}</div>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+const route = useRoute()
+
+const gameId = ref(route.params.gameId)
+const game = ref({})
+
+loadGameDetails()
+
+watch(
+  () => route.params.gameId,
+  (newId, oldId) => {
+    gameId.value = newId
+    loadGameDetails()
+  }
+)
+
+async function loadGameDetails() {
+  const response = await axios.get(`/api/game/${gameId.value}`)
+  game.value = response.data
+}
+</script>

frontend/src/vues/GameList.vue

@@ -9,8 +9,12 @@
     </thead>
     <tbody>
       <tr v-for="game in games.data">
-        <td>{{ game.id }}</td>
-        <td>{{ game.title }}</td>
+        <td>
+          <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
+        </td>
+        <td>
+          <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
+        </td>
         <td>{{ game.status }}</td>
       </tr>
     </tbody>
@@ -30,20 +34,15 @@ let count = 10
 const games = ref({})
 
 onMounted(async () => {
-  console.log('mounted')
-  console.log({ page: `${page}`, count: `${count}`, orderBy: 'id' })
   games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
-  console.log(v)
 })
 
 async function nextPage() {
-  console.log('next')
   page++
   games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
 }
 
 async function previousPage() {
-  console.log('next')
   page--
   games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
 }