view character page created (#24)

components/SideMenu.vue

@@ -67,13 +67,26 @@ const slideover = useSlideover();
               class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
             >
               <UIcon
-                name="material-symbols:person-book"
+                name="material-symbols:add-box"
                 class="w-5 h-5 mt-1 ml-4"
               />
               <p class="text-lg">Create a Character</p>
             </div>
           </NuxtLink>
         </li>
+        <li>
+          <NuxtLink to="/view-characters" @click="slideover.close">
+            <div
+              class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"
+            >
+              <UIcon
+                name="material-symbols:folder-open-rounded"
+                class="w-5 h-5 mt-1 ml-4"
+              />
+              <p class="text-lg">View Characters</p>
+            </div>
+          </NuxtLink>
+        </li>
         <li>
           <div
             class="flex p-2 ml-2 gap-2 hover:bg-green-400 hover:text-black hover:cursor-pointer"

components/View-Character.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+type Character = {
+  uuid: string;
+  campaignUuid: string;
+  creatorUuid: string;
+  ownerUuid: string;
+  firstName: string;
+  lastName: string;
+  race: string;
+  class: string;
+  age: number;
+  height: number;
+  weight: number;
+  eyeColor: string;
+  skinColor: string;
+  hairColor: string;
+  ruleset: string;
+  created: {
+    time: string;
+    valid: boolean;
+  };
+  lastUpdated: null | string;
+};
+
+type Props = {
+  character: Character;
+};
+
+const { character } = defineProps<Props>();
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h3 class="text-xl capitalize">{{ character.firstName || "none" }}</h3>
+    </template>
+    <div class="flex gap-2">
+      <UIcon name="heroicons:user-group-solid" class="w-5 h-5" />
+      <p class="capitalize">Race: {{ character.race || "none" }}</p>
+    </div>
+    <div class="flex gap-2">
+      <UIcon name="material-symbols-light:book-2-rounded" class="w-5 h-5" />
+      <p class="capitalize">Class: {{ character.class || "none" }}</p>
+    </div>
+    <template #footer>
+      <UButton block>View Details</UButton>
+    </template>
+  </UCard>
+</template>

pages/view-characters.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+type Character = {
+  uuid: string;
+  campaignUuid: string;
+  creatorUuid: string;
+  ownerUuid: string;
+  firstName: string;
+  lastName: string;
+  race: string;
+  class: string;
+  age: number;
+  height: number;
+  weight: number;
+  eyeColor: string;
+  skinColor: string;
+  hairColor: string;
+  ruleset: string;
+  created: {
+    time: string;
+    valid: boolean;
+  };
+  lastUpdated: null | string;
+};
+
+type ApiResponse = {
+  data: {
+    characters: Character;
+  };
+  message: string;
+  status: number;
+  statusText: string;
+  timestamp: string;
+};
+
+definePageMeta({
+  middleware: "fresh-token",
+});
+const config = useRuntimeConfig();
+const authStore = useAuthStore();
+
+const { data: apiResponse } = await useFetch<ApiResponse>(
+  "/account/owned-characters",
+  {
+    baseURL: config.public.baseURL,
+    headers: {
+      Authorization: `Bearer ${authStore.token}`,
+      "Content-Type": "application/json",
+    },
+  },
+);
+
+const characters = computed(() => apiResponse.value?.data.characters ?? []);
+</script>
+
+<template>
+  <div>
+    <h2 class="text-5xl text-center p-2 mb-4">Characters</h2>
+    <div
+      v-if="characters.length > 0"
+      class="grid gap-6 mb-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+    >
+      <ViewCharacter
+        v-for="character in characters"
+        :key="character.uuid"
+        :character="character"
+      />
+    </div>
+    <p v-else>No characters found.</p>
+  </div>
+</template>