From b3904e307ea7983f57802c01772ffe0927d2d8d1 Mon Sep 17 00:00:00 2001
From: "jmosrael@gmail.com" <I4mmrc()w3>
Date: Sat, 4 May 2024 01:21:09 +0000
Subject: [PATCH] Add in some hierarchy to the game detail view

---
 frontend/src/vues/GameDetails.vue | 34 ++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/frontend/src/vues/GameDetails.vue b/frontend/src/vues/GameDetails.vue
index 86f88e9..14a1911 100644
--- a/frontend/src/vues/GameDetails.vue
+++ b/frontend/src/vues/GameDetails.vue
@@ -1,23 +1,30 @@
 <template>
-  <div>#{{ game.id }} - {{game.title}}</div>
-  <div>{{game.gamemaster}}</div>
   <div>
-    Payout 
-    <div>{{game.payoutEB}} eb</div>
-    <div>{{game.payoutIP}} IP</div>
-    <div>{{game.payoutLoot}}</div>
+    <h1>#{{ game.id }} - {{ game.title }}</h1>
+  </div>
+  <div>
+    <h2>GameMaster: {{ game.gamemaster }}</h2>
+  </div>
+  <div>
+    <h3>Payout</h3>
+    <div>{{ game.payoutEB }} eb</div>
+    <div>{{ game.payoutIP }} IP</div>
+    <div>{{ game.payoutLoot }}</div>
+  </div>
 
-    <div>Picks</div>
+  <div>
+    <h3>Picks</h3>
     <div v-for="pick in picks">
-      {{pick.characterName}}
-    </div>
-
-    <div>Apps</div>
-    <div v-for="app in apps">
-      {{app.characterName}}
+      {{ pick.characterName }}
     </div>
   </div>
 
+  <div>
+    <h3>Apps</h3>
+    <div v-for="app in apps">
+      {{ app.characterName }}
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -58,5 +65,4 @@ async function loadApps() {
   const response = await axios.post(`/api/game/${gameId.value}/apps`)
   apps.value = response.data
 }
-
 </script>