First song data loading. Add Jubility Breakdown

src/components/CardBox.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from "vue";
+import { computed, useSlots, ref } from "vue";
 import CardBoxComponentBody from "@/components/CardBoxComponentBody.vue";
 import CardBoxComponentFooter from "@/components/CardBoxComponentFooter.vue";
 
@@ -20,6 +20,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  color: {
+    type: String,
+    default: "bg-slate-900 dark:bg-slate-900",
+  },
 });
 
 const emit = defineEmits(["submit"]);
@@ -28,14 +32,15 @@ const slots = useSlots();
 
 const hasFooterSlot = computed(() => slots.footer && !!slots.footer());
 
-var color = "bg-slate-900 dark:bg-slate-900";
+const color = ref(props.color);
 
 if (props.isAuth) {
-  color = "bg-slate-800 md:bg-slate-900 dark:bg-slate-800 md:dark:bg-slate-900";
+  color.value =
+    "bg-slate-800 md:bg-slate-900 dark:bg-slate-800 md:dark:bg-slate-900";
 }
 
 const componentClass = computed(() => {
-  const base = [props.rounded, props.flex, color];
+  const base = [props.rounded, props.flex, color.value];
 
   if (props.isHoverable) {
     base.push("hover:shadow-lg transition-shadow duration-500");

src/components/Tables/JubilityTable.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import CardBox from "@/components/CardBox.vue";
+import { useMainStore } from "@/stores/main";
+import PillTag from "@/components/PillTag.vue";
+
+const mainStore = useMainStore();
+const songData = ref(null);
+
+const props = defineProps({
+  jubilityData: {
+    type: Array,
+    required: true,
+  },
+  version: {
+    type: Number,
+    required: true,
+  },
+});
+
+const difficultyTable = {
+  0: {
+    label: "Basic",
+    color: "info",
+  },
+  1: {
+    label: "Advanced",
+    color: "warning",
+  },
+  2: {
+    label: "Extreme",
+    color: "danger",
+  },
+};
+
+onMounted(async () => {
+  try {
+    songData.value = null;
+    const songIds = props.jubilityData.map((item) => item.song_id);
+    const fetchedData = await mainStore.getMusicData(
+      "jubeat",
+      props.version,
+      songIds
+    );
+
+    // Combine the fetched data with jubilityData
+    const combinedData = props.jubilityData.map((jubilityItem) => {
+      const matchingSong = fetchedData.find(
+        (song) =>
+          song.id === jubilityItem.song_id && song.chart === jubilityItem.chart
+      );
+      return {
+        ...jubilityItem,
+        ...(matchingSong ? { songData: matchingSong } : {}),
+      };
+    });
+
+    combinedData.sort((a, b) => b.rate - a.rate);
+    songData.value = combinedData;
+  } catch (error) {
+    console.error("Failed to fetch music data:", error);
+  }
+});
+</script>
+
+<template>
+  <template v-if="songData">
+    <CardBox
+      v-for="song of songData"
+      :key="song.id"
+      color="bg-slate-700"
+      class="my-3 p-5"
+      has-table
+    >
+      <div class="flex space-x-2 mb-2">
+        <PillTag
+          :label="difficultyTable[song.chart].label"
+          :color="difficultyTable[song.chart].color"
+        />
+        <PillTag v-if="song.hard" label="Hard Mode" color="danger" />
+      </div>
+      <div class="flex justify-between items-center">
+        <div class="grid">
+          <h1 class="text-lg font-bold">{{ song.songData.name }}</h1>
+          <h2 class="text-md">{{ song.songData.artist }}</h2>
+        </div>
+        <div>
+          <h2 class="text-lg">Rate: {{ song.rate / 10 }}</h2>
+        </div>
+      </div>
+    </CardBox>
+  </template>
+</template>

src/stores/main.js

@@ -298,5 +298,18 @@ export const useMainStore = defineStore("main", {
         throw error;
       }
     },
+
+    async getMusicData(game, version, songIds = null, oneChart = false) {
+      try {
+        const data = await this.callApi(
+          `/music?game=${game}&version=${version}&songIds=${songIds.toString()}` +
+            (oneChart ? "&oneChart=true" : "")
+        );
+        return data.data;
+      } catch (error) {
+        console.log("Error fetching music data:", error);
+        throw error;
+      }
+    },
   },
 });

src/views/Game/PlayerView.vue

@@ -7,14 +7,18 @@ import {
   mdiBackburger,
   mdiPlaylistMusicOutline,
   mdiFormatListText,
+  mdiChartBarStacked,
 } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import CardBoxWidget from "@/components/CardBoxWidget.vue";
+import CardBox from "@/components/CardBox.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import ProfileCard from "@/components/Cards/ProfileCard.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import FormControl from "@/components/FormControl.vue";
+import PillTag from "@/components/PillTag.vue";
+import JubilityTable from "@/components/Tables/JubilityTable.vue";
 import { getGameInfo } from "@/constants";
 import { getIIDXDan } from "@/constants/danClass.js";
 import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor";
@@ -336,6 +340,33 @@ function formatProfile(profile) {
             getIIDXDan(myProfile.dgrade).label
           }}</CardBoxWidget>
         </div>
+
+        <template v-if="myProfile.jubility">
+          <SectionTitleLine
+            :icon="mdiChartBarStacked"
+            title="Jubility Breakdown"
+            main
+          />
+
+          <div class="my-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+            <CardBox v-if="myProfile.pick_up_breakdown">
+              <PillTag label="Pick-Up" color="info" />
+              <JubilityTable
+                :jubility-data="myProfile.pick_up_breakdown"
+                ,
+                :version="versionForm.currentVersion"
+              />
+            </CardBox>
+            <CardBox v-if="myProfile.other_breakdown">
+              <PillTag label="Common" color="info" />
+              <JubilityTable
+                :jubility-data="myProfile.other_breakdown"
+                ,
+                :version="versionForm.currentVersion"
+              />
+            </CardBox>
+          </div>
+        </template>
       </SectionMain>
     </template>
   </LayoutAuthenticated>