Get the games played and applied for the character details page.

frontend/src/App.vue

@@ -12,6 +12,4 @@
   </v-app>
 </template>
 
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>

frontend/src/vues/CharacterDetails.vue

@@ -3,15 +3,21 @@
     <h1>{{ character.characterName }} - {{ character.role }}</h1>
     <h2>Status: {{ character.status }}</h2>
     <h2>Player: {{ character.playerName }}</h2>
-    <GameTable gameList="gamesPlayed"></GameTable>
-    <game-table gameList="gamesApplied"></game-table>
+    <div>Total Game EB: {{ earnedEB }} --- Total Game IP: {{ earnedIP }}</div>
+    <div>
+      Games Played: {{ gamesPlayedCount }} --- Games Applied: {{ gamesAppliedCount }} -- Pick Rate:
+      {{ pickRate.toFixed(2) }}%
+    </div>
+    <div>Last Game: {{ new Date(gamesPlayed[gamesPlayed.length - 1].postdate * 1000).toISOString().split('T')[0]}}</div>
+    <GameTable title="Games Played" :gameList="gamesPlayed"></GameTable>
+    <game-table title="Games Applied" :gameList="gamesApplied"></game-table>
   </v-container>
 </template>
 
 <style></style>
 
 <script setup lang="ts">
-import { GameTable } from './GameTable.vue'
+import GameTable from './GameTable.vue'
 import { onMounted, watch, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import axios from 'axios'
@@ -22,6 +28,11 @@ const characterId = ref(route.params.characterId)
 const character = ref({})
 const gamesPlayed = ref({})
 const gamesApplied = ref({})
+const earnedEB = ref(0)
+const earnedIP = ref(0)
+const gamesPlayedCount = ref(0)
+const gamesAppliedCount = ref(0)
+const pickRate = ref(0)
 
 async function loadCharacterDetails() {
   const characterResponse = await axios.get(`/api/character/${characterId.value}`)
@@ -33,6 +44,29 @@ async function loadCharacterDetails() {
   character.value = characterResponse.data
   gamesPlayed.value = gameDetails.data.characterPickedForGame
   gamesApplied.value = gameDetails.data.characterAppliedForGame
+
+  calculateDerivedEarnings(gameDetails.data.characterPickedForGame)
+  calculateDerivedGameStats(
+    gameDetails.data.characterPickedForGame,
+    gameDetails.data.characterAppliedForGame
+  )
+}
+
+function calculateDerivedEarnings(gamesPlayedList) {
+  let runningEarnedEb = 0
+  let runningEarnedIp = 0
+  for (let game in gamesPlayedList) {
+    runningEarnedEb += gamesPlayedList[game]['payoutEB']
+    runningEarnedIp += gamesPlayedList[game]['payoutIP']
+  }
+  earnedEB.value = runningEarnedEb
+  earnedIP.value = runningEarnedIp
+}
+
+function calculateDerivedGameStats(gamesPlayedList, gamesAppliedList) {
+  gamesPlayedCount.value = gamesPlayedList.length
+  gamesAppliedCount.value = gamesAppliedList.length
+  pickRate.value = (gamesPlayedList.length / gamesAppliedList.length) * 100
 }
 
 onMounted(async () => {

frontend/src/vues/GameTable.vue

@@ -1,13 +1,12 @@
 <template>
-
-<div>"butts"{{gameList}}</div>
-
-<!--   <v-table>
+  <h3>{{ title }}</h3>
+  <v-table>
     <thead>
       <tr>
         <th class="text-left">ID</th>
         <th class="text-left">Title</th>
         <th class="text-left">Staus</th>
+        <th class="text-left">Post Date</th>
       </tr>
     </thead>
     <tbody>
@@ -19,28 +18,16 @@
           <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
         </td>
         <td>{{ game.status }}</td>
+        <td>
+          {{ new Date(game.postdate * 1000).toISOString().split('T')[0] }}
+        </td>
       </tr>
     </tbody>
-  </v-table> -->
+  </v-table>
 </template>
 
-<style>
-.game-title-box {
-  margin-top: 25px;
-  margin-left: 20px;
-}
-
-.gm-title-box {
-  margin-top: 5px;
-  margin-left: 20px;
-}
-
-.result-box {
-  margin: 10px;
-  margin-top: 40px;
-}
-</style>
+<style></style>
 
 <script setup lang="ts">
-  defineProps(['gameList'])
+defineProps(['title', 'gameList'])
 </script>