adding in character detail stuff

backend/src/app.ts

@@ -83,7 +83,7 @@ app.post('/api/character', jsonParser, async (req, res) => {
     offset: page * count,
     limit: count
   })
-  const pageCount = Math.ceil(await Character.count() / count)
+  const pageCount = Math.ceil((await Character.count()) / count)
 
   res.setHeader('Content-Type', 'application/json')
   res.json({ characterData, pageCount })
@@ -94,15 +94,18 @@ app.get('/api/game/:characterId', async (req, res) => {
 })
 
 app.post('/api/game', jsonParser, async (req, res) => {
-  const page = req.body.page
-  const orderBy = req.body.orderBy
-  const count = req.body.count
+  const page = req.body.page || 0
+  const orderBy = req.body.orderBy || 'id' 
+  const count = req.body.count || 10
+  const filter = req.body.filter || ''
+
+  console.log(filter)
 
   const gameData = await Game.findAll({
     offset: page * count,
     limit: count
   })
-  const pageCount = Math.ceil(await Character.count() / count)
+  const pageCount = Math.ceil((await Character.count()) / count)
 
   res.setHeader('Content-Type', 'application/json')
   res.send({ gameData, pageCount })

frontend/src/router/index.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import GameList from '../vues/GameList.vue'
 import GameDetails from '../vues/GameDetails.vue'
 import CharacterList from '../vues/CharacterList.vue'
+import CharacterDetails from '../vues/CharacterDetails.vue'
 
 const root = {
   path: '/',
@@ -24,7 +25,12 @@ const characterListRoute = {
   component: CharacterList
 }
 
-const routes = [root, gameListRoute, gameDetailsRoute, characterListRoute]
+const characterDetailsRoute = {
+  path: '/characters/:characterId',
+  component: CharacterDetails
+}
+
+const routes = [root, gameListRoute, gameDetailsRoute, characterListRoute, characterDetailsRoute]
 
 export default createRouter({
   history: createWebHashHistory(),

frontend/src/vues/CharacterDetails.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-container>
+    {{ character.characterName }}
+    {{ character.playerName }}
+    {{ character.role }}
+    {{ character.status }}
+  </v-container>
+</template>
+
+<style></style>
+
+<script setup lang="ts">
+import { onMounted, watch, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+const route = useRoute()
+
+const characterId = ref(route.params.characterId)
+const character = ref({})
+
+async function loadCharacterDetails() {
+  const characterResponse = await axios.get(`/api/character/${characterId.value}`)
+  const gameDetails = await axios.post("/api/game", {
+  })
+
+  console.log(characterResponse)
+
+  character.value = characterResponse.data
+}
+
+onMounted(async () => {
+  loadCharacterDetails()
+})
+</script>

frontend/src/vues/CharacterList.vue

@@ -46,7 +46,7 @@ import axios from 'axios'
 let page = 0
 let count = 10
 const characters = ref({})
-const pageCount = ref({})
+const pageCount = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/character', {

frontend/src/vues/GameList.vue

@@ -35,7 +35,7 @@ import axios from 'axios'
 let page = 1
 let count = 10
 const games = ref({})
-const pageCount = ref({})
+const pageCount = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/game', {