From d2948142bb376e2d8021fb02478dc699bbd2e086 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Fri, 14 Jun 2024 21:40:21 -0400
Subject: [PATCH] Add in new game stats

---
 src/components/Cards/ProfileCard.vue |  12 +-
 src/constants/index.js               |   8 +-
 src/views/Game/GameView.vue          |   2 +-
 src/views/Game/PlayerView.vue        | 403 +++++++++++++++------------
 4 files changed, 235 insertions(+), 190 deletions(-)

diff --git a/src/components/Cards/ProfileCard.vue b/src/components/Cards/ProfileCard.vue
index 023f3b6..54fef01 100644
--- a/src/components/Cards/ProfileCard.vue
+++ b/src/components/Cards/ProfileCard.vue
@@ -37,7 +37,7 @@ const thisGame = getGameInfo(props.game);
 </script>
 
 <template>
-  <div class="md:flex content-center justify-center items-center">
+  <div class="content-center justify-center items-center">
     <!-- <img v-if="profile.avatar" class="h-40" :src="profile.avatar" /> -->
     <div class="grid grid-cols-1 text-center">
       <h1 :class="colorText()" class="text-4xl md:text-5xl font-bold">
@@ -50,11 +50,11 @@ const thisGame = getGameInfo(props.game);
         Last played at <b>{{ profile.last.arcade }}</b> on
         <b>{{ profile.last.date }}</b>
       </p> -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div class="pt-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
         <BaseButton
           v-if="!useSmall && game"
           :icon="mdiAccountDetails"
-          :href="`/#/games/${game}/profiles/${profile.id}`"
+          :href="`/#/games/${game}/profiles/${profile.userId}`"
           :outline="false"
           color="info"
           label="View Profile"
@@ -62,14 +62,14 @@ const thisGame = getGameInfo(props.game);
         <BaseButton
           v-if="!useSmall && game"
           :icon="mdiCog"
-          :href="`/#/games/${game}/profiles/${profile.id}/edit`"
+          :href="`/#/games/${game}/profiles/${profile.userId}/edit`"
           :outline="false"
           color="info"
           label="Edit Profile"
         />
         <BaseButton
           v-if="!useSmall && !thisGame.noScores"
-          :href="`/#/games/${game}/scores/${profile.id}`"
+          :href="`/#/games/${game}/scores/${profile.userId}`"
           :icon="mdiPlaylistMusicOutline"
           :outline="false"
           color="info"
@@ -77,7 +77,7 @@ const thisGame = getGameInfo(props.game);
         />
         <BaseButton
           v-if="!useSmall && !thisGame.noRecords"
-          :href="`/#/games/${game}/records/${profile.id}`"
+          :href="`/#/games/${game}/records/${profile.userId}`"
           :icon="mdiFormatListText"
           :outline="false"
           color="info"
diff --git a/src/constants/index.js b/src/constants/index.js
index e2797c7..531efdf 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -915,13 +915,13 @@ export const gameData = [
       { text: "DP DAN", value: "dp.dan", sortable: true, width: 100 },
       {
         text: "SP DJPOINT",
-        value: "sp.point",
+        value: "stats.single_dj_points",
         sortable: true,
         width: 150,
       },
       {
         text: "DP DJPOINT",
-        value: "dp.point",
+        value: "stats.double_dj_points",
         sortable: true,
         width: 150,
       },
@@ -1062,13 +1062,13 @@ export const gameData = [
       { text: "DP DAN", value: "dp.dan", sortable: true, width: 100 },
       {
         text: "SP DJPOINT",
-        value: "sp.point",
+        value: "stats.single_dj_points",
         sortable: true,
         width: 150,
       },
       {
         text: "DP DJPOINT",
-        value: "dp.point",
+        value: "stats.double_dj_points",
         sortable: true,
         width: 150,
       },
diff --git a/src/views/Game/GameView.vue b/src/views/Game/GameView.vue
index 7732966..e8054f1 100644
--- a/src/views/Game/GameView.vue
+++ b/src/views/Game/GameView.vue
@@ -209,7 +209,7 @@ function filterVersions(haveVersions) {
                 <template v-if="myProfile.records">
                   <CardBoxWidget
                     v-if="myProfile.records.skill"
-                    :number="myProfile.records.skill"
+                    :number="myProfile.records.skill / 100"
                     label="Skill Points"
                   />
                 </template>
diff --git a/src/views/Game/PlayerView.vue b/src/views/Game/PlayerView.vue
index 9785cb1..814d681 100644
--- a/src/views/Game/PlayerView.vue
+++ b/src/views/Game/PlayerView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, onMounted } from "vue";
+import { reactive, ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useMainStore } from "@/stores/main";
 import {
@@ -25,104 +25,6 @@ const mainStore = useMainStore();
 var gameID = null;
 var thisGame = null;
 
-const versionForm = reactive({
-  currentVersion: null,
-});
-
-const profile = {
-  id: 1,
-  name: "Trmazi",
-  extid: 12345678,
-  avatar:
-    "https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
-  last: {
-    arcade: "GhettoCade",
-    date: "7/16/2023",
-  },
-  stats: {
-    firstPlay: "1/14/2021",
-    singlePlays: 165,
-    singleDan: 1900,
-    singlePoint: 1877,
-    doublePlays: 15,
-    doubleDan: 0,
-    doublePoint: 187,
-    skillPoints: 193090,
-    jubility: 7600,
-  },
-};
-
-var userVersions = {};
-onMounted(() => {
-  userVersions = mainStore.profiles[gameID];
-  console.log(userVersions);
-  if (userVersions != undefined) {
-    versionForm.currentVersion = Math.max(...userVersions);
-  }
-});
-
-const loadStats = [
-  {
-    id: 0,
-    label: "Register Date",
-    type: String,
-    span: "md:col-span-2",
-    key: "firstPlay",
-  },
-  {
-    id: 1,
-    label: "Single Plays",
-    type: Number,
-    key: "singlePlays",
-  },
-  {
-    id: 2,
-    label: "Single Dan",
-    type: String,
-    key: "singleDan",
-    isIIDXDan: true,
-  },
-  {
-    id: 3,
-    label: "Single DJ POINT",
-    type: Number,
-    key: "singlePoint",
-  },
-  {
-    id: 4,
-    label: "Double Plays",
-    type: Number,
-    key: "doublePlays",
-  },
-  {
-    id: 5,
-    label: "Double Dan",
-    type: String,
-    key: "doubleDan",
-    isIIDXDan: true,
-  },
-  {
-    id: 6,
-    label: "Double DJ POINT",
-    type: Number,
-    key: "doublePoint",
-  },
-  {
-    id: 7,
-    label: "SKILL Points",
-    type: Number,
-    key: "skillPoints",
-    isSkill: true,
-  },
-  {
-    id: 8,
-    label: "Jubility",
-    type: Number,
-    key: "jubility",
-    isJubility: true,
-  },
-];
-
 gameID = $route.params.game;
 thisGame = getGameInfo(gameID);
 
@@ -135,10 +37,88 @@ if (!thisGame) {
   });
 }
 
+const versionForm = reactive({
+  currentVersion: null,
+});
+
+watch(
+  () => versionForm.currentVersion,
+  () => {
+    loadProfile();
+  }
+);
+
+const myProfile = ref(null);
+
+onMounted(async () => {
+  loadProfile();
+});
+
 if (!thisGame.versions) {
   versionForm.currentVersion = 1;
 }
 
+async function loadProfile() {
+  try {
+    const data = await mainStore.getUserProfile(
+      gameID,
+      versionForm.currentVersion
+    );
+    myProfile.value = formatProfile(data);
+
+    if (data && !versionForm.currentVersion) {
+      versionForm.currentVersion = data.versions[data.versions.length - 1];
+    }
+  } catch (error) {
+    console.error("Failed to fetch user profile data:", error);
+  }
+}
+
+var loadStats = [
+  {
+    label: "Register Date",
+    type: String,
+    span: "md:col-span-2",
+    key: "first_play_timestamp",
+  },
+  {
+    label: "Last Play",
+    type: String,
+    span: "md:col-span-2",
+    key: "last_play_timestamp",
+  },
+  {
+    label: "Total Plays",
+    type: Number,
+    key: "total_plays",
+  },
+  {
+    label: "EXP",
+    type: Number,
+    key: "exp",
+  },
+  {
+    label: "Single Plays",
+    type: Number,
+    key: "single_plays",
+  },
+  {
+    label: "Double Plays",
+    type: Number,
+    key: "double_plays",
+  },
+  {
+    label: "Single DJPOINT",
+    type: Number,
+    key: "single_dj_points",
+  },
+  {
+    label: "Double DJPOINT",
+    type: Number,
+    key: "double_dj_points",
+  },
+];
+
 function getSources() {
   var sources = null;
   if (!versionForm.currentVersion) {
@@ -157,7 +137,28 @@ function getCardStyle() {
     `;
 }
 
-function returnNumber(stat) {
+function colorText(stat, profile) {
+  if (profile) {
+    if (stat.isSkill && profile.jubility) {
+      return getGitadoraColor(profile.jubility);
+    } else if (stat.isJubility && profile.records.skill) {
+      return getJubilityColor(profile.records.skill);
+    }
+  }
+  return "";
+}
+
+function filterVersions(haveVersions) {
+  var filtered = [];
+  for (const version of thisGame.versions) {
+    if (haveVersions.includes(version.id)) {
+      filtered.push(version);
+    }
+  }
+  return filtered;
+}
+
+function returnNumber(stat, profile) {
   if (stat.isSkill) {
     return profile.stats[stat.key] / 100;
   } else if (stat.isJubility) {
@@ -167,94 +168,138 @@ function returnNumber(stat) {
   return profile.stats[stat.key];
 }
 
-function colorText(stat) {
-  if (stat.isSkill) {
-    return getGitadoraColor(profile.stats[stat.key]);
-  } else if (stat.isJubility) {
-    return getJubilityColor(profile.stats[stat.key]);
+function formatNumber(number, tenth) {
+  if (!tenth) {
+    return number / 100;
+  } else {
+    return number / 10;
   }
-  return "";
+}
+
+function formatProfile(profile) {
+  if (profile.stats) {
+    if (profile.stats.first_play_timestamp) {
+      const date = new Date(profile.stats.first_play_timestamp * 1000);
+      profile.stats.first_play_timestamp = date.toLocaleString();
+    }
+
+    if (profile.stats.last_play_timestamp) {
+      const date = new Date(profile.stats.last_play_timestamp * 1000);
+      profile.stats.last_play_timestamp = date.toLocaleString();
+    }
+
+    if (profile.dp) {
+      if (profile.dp.dan !== undefined) {
+        profile.dp.dan = getIIDXDan(profile.dp.dan).short;
+      }
+    }
+  }
+
+  return profile;
 }
 </script>
 
 <template>
   <LayoutAuthenticated>
-    <SectionMain>
-      <div class="md:flex pb-6 md:justify-between md:items-center">
-        <BaseButton
-          :icon="mdiBackburger"
-          :href="`/#/games/${gameID}`"
-          class="w-full md:w-auto"
-          color="info"
-          :label="`${
-            thisGame.shortName ? thisGame.shortName : thisGame.name
-          } Home`"
-        />
-
-        <div
-          v-if="thisGame.versions && profile && userVersions"
-          class="mt-2 md:mt-0 md:w-1/3 md:text-right"
-        >
-          <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
-            Select Version
-          </h2>
-          <FormControl
-            v-model="versionForm.currentVersion"
-            :options="thisGame.versions"
+    <template v-if="myProfile">
+      <SectionMain>
+        <div class="md:flex pb-6 md:justify-between md:items-center">
+          <BaseButton
+            :icon="mdiBackburger"
+            :href="`/#/games/${gameID}`"
+            class="w-full md:w-auto"
+            color="info"
+            :label="`${
+              thisGame.shortName ? thisGame.shortName : thisGame.name
+            } Home`"
           />
-        </div>
-      </div>
-      <SectionTitleLine :icon="mdiAccountOutline" title="View Profile" main />
-      <div
-        v-if="versionForm.currentVersion && profile && userVersions"
-        :style="getCardStyle()"
-        class="rounded-2xl mb-6"
-      >
-        <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
-          <div class="w-full">
-            <ProfileCard use-small :profile="profile">
-              <div class="my-4 w-full flex gap-2 justify-center">
-                <BaseButton
-                  :href="`/#/games/${gameID}/scores/${profile.id}`"
-                  :icon="mdiPlaylistMusicOutline"
-                  class="w-full md:w-auto"
-                  color="info"
-                  label="View Scores"
-                />
 
-                <BaseButton
-                  :href="`/#/games/${gameID}/records/${profile.id}`"
-                  :icon="mdiFormatListText"
-                  class="w-full md:w-auto"
-                  color="info"
-                  label="View Records"
-                />
-              </div>
-              <div class="my-6 grid grid-cols-1 md:grid-cols-4 gap-6">
-                <CardBoxWidget
-                  v-for="stat in loadStats"
-                  :key="stat.id"
-                  :class="stat.span"
-                  :label="stat.label"
-                  :number="stat.type == Number ? returnNumber(stat) : None"
-                  :num-color="colorText(stat)"
-                >
-                  {{
-                    stat.type == String && !stat.isIIDXDan && !stat.isSkill
-                      ? profile.stats[stat.key]
-                      : None
-                  }}
-                  {{
-                    stat.type == String && stat.isIIDXDan
-                      ? getIIDXDan(profile.stats[stat.key]).label
-                      : None
-                  }}
-                </CardBoxWidget>
-              </div>
-            </ProfileCard>
+          <div
+            v-if="thisGame.versions && myProfile"
+            class="mt-2 md:mt-0 md:w-1/3 md:text-right"
+          >
+            <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
+              Select Version
+            </h2>
+            <FormControl
+              v-model="versionForm.currentVersion"
+              :options="filterVersions(myProfile.versions)"
+            />
           </div>
         </div>
-      </div>
-    </SectionMain>
+        <SectionTitleLine :icon="mdiAccountOutline" title="View Profile" main />
+        <div
+          v-if="versionForm.currentVersion && myProfile"
+          :style="getCardStyle()"
+          class="rounded-2xl mb-6"
+        >
+          <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
+            <div class="w-full">
+              <ProfileCard use-small :profile="myProfile">
+                <div class="md:w-1/3 grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <BaseButton
+                    :href="`/#/games/${gameID}/scores/${myProfile.id}`"
+                    :icon="mdiPlaylistMusicOutline"
+                    class="w-full md:w-auto"
+                    color="info"
+                    label="View Scores"
+                  />
+
+                  <BaseButton
+                    :href="`/#/games/${gameID}/records/${myProfile.id}`"
+                    :icon="mdiFormatListText"
+                    class="w-full md:w-auto"
+                    color="info"
+                    label="View Records"
+                  />
+                </div>
+              </ProfileCard>
+            </div>
+          </div>
+        </div>
+        <div class="my-6 grid grid-cols-1 md:grid-cols-4 gap-6">
+          <template v-for="stat in loadStats" :key="stat">
+            <CardBoxWidget
+              v-if="myProfile.stats[stat.key]"
+              :class="stat.span"
+              :label="stat.label"
+              :number="
+                stat.type == Number ? returnNumber(stat, myProfile) : null
+              "
+              :num-color="colorText(stat)"
+            >
+              {{ stat.type == String ? myProfile.stats[stat.key] : null }}
+              <!-- {{
+                      stat.type == String && stat.isIIDXDan
+                        ? getIIDXDan(myProfile[stat.key]).label
+                        : None
+                    }} -->
+            </CardBoxWidget>
+          </template>
+          <CardBoxWidget
+            v-if="myProfile.skill"
+            label="Skill Points"
+            :number="formatNumber(myProfile.skill, false)"
+            :num-color="getGitadoraColor(myProfile.skill)"
+          />
+          <CardBoxWidget
+            v-if="myProfile.profile_skill"
+            label="Skill Level"
+            :number="myProfile.profile_skill"
+          />
+          <CardBoxWidget
+            v-if="myProfile.deller"
+            label="Deller"
+            :number="myProfile.deller"
+          />
+          <CardBoxWidget v-if="myProfile.sgrade" label="SP DAN">{{
+            getIIDXDan(myProfile.sgrade).label
+          }}</CardBoxWidget>
+          <CardBoxWidget v-if="myProfile.dgrade" label="DP DAN">{{
+            getIIDXDan(myProfile.dgrade).label
+          }}</CardBoxWidget>
+        </div>
+      </SectionMain>
+    </template>
   </LayoutAuthenticated>
 </template>