adding in character detail stuff

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', {