From 4650b20a84e2c6160705ed3ce7ee04b78121d9e8 Mon Sep 17 00:00:00 2001
From: iamBadgers <jmosrael@gmail.com>
Date: Sat, 27 Apr 2024 17:32:03 -0700
Subject: [PATCH] add in game details

---
 backend/src/app.ts                |  5 ++++-
 frontend/src/router/index.ts      | 14 +++++++++----
 frontend/src/vues/GameDetails.vue | 33 +++++++++++++++++++++++++++++++
 frontend/src/vues/GameList.vue    | 13 ++++++------
 4 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/vues/GameDetails.vue

diff --git a/backend/src/app.ts b/backend/src/app.ts
index d348c86..93cde4d 100644
--- a/backend/src/app.ts
+++ b/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 () => {
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d14a5e5..6233f42 100644
--- a/frontend/src/router/index.ts
+++ b/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(),
diff --git a/frontend/src/vues/GameDetails.vue b/frontend/src/vues/GameDetails.vue
new file mode 100644
index 0000000..734318f
--- /dev/null
+++ b/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>
diff --git a/frontend/src/vues/GameList.vue b/frontend/src/vues/GameList.vue
index 853aea5..e5bfbb5 100644
--- a/frontend/src/vues/GameList.vue
+++ b/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' })
 }