add in game details

backend/src/app.ts

@@ -96,7 +96,10 @@ app.post('/api/game', jsonParser, async (req, res) => {
 })
 
 app.get('/api/game/:gameId', async (req, res) => {
-  res.send(await Game.findOne({ where: { id: req.params['gameId'] } }))
+
+  const game = await Game.findOne({ where: { id: req.params['gameId'] } })
+  console.log(game)
+  res.send(game)
 })
 
 app.listen(port, async () => {

frontend/src/router/index.ts

@@ -1,18 +1,24 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import GameList from '../vues/GameList.vue'
+import GameDetails from '../vues/GameDetails.vue'
 
-const rootPath = {
+const root = {
   path: '/',
-  component: GameList
+  redirect: '/games'
 }
 
 const gameListRoute = {
-  path: '/potato',
+  path: '/games',
   component: GameList
 }
 
-const routes = [rootPath, gameListRoute]
+const gameDetailsRoute = {
+  path: '/games/:gameId',
+  component: GameDetails
+}
+
+const routes = [root, gameListRoute, gameDetailsRoute]
 
 export default createRouter({
   history: createWebHashHistory(),

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' })
 }