From b14881bd10db4db0d626b4928853d4bac82d362d Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Sun, 20 Oct 2024 00:16:20 -0400
Subject: [PATCH] Add IIDX videos, fix Qpro formatting

---
 src/components/Cards/ProfileCard.vue |   2 +-
 src/components/Cards/QproCardBox.vue |   4 +-
 src/components/UserQpro.vue          | 161 ++++++++++++++-------------
 src/constants/index.js               |   5 +
 4 files changed, 93 insertions(+), 79 deletions(-)

diff --git a/src/components/Cards/ProfileCard.vue b/src/components/Cards/ProfileCard.vue
index 4cb7e7e6..98ae018c 100644
--- a/src/components/Cards/ProfileCard.vue
+++ b/src/components/Cards/ProfileCard.vue
@@ -57,7 +57,7 @@ const thisGame = getGameInfo(props.game);
         v-if="game == 'iidx' && version >= 20 && profile.qpro"
         :version="version"
         :profile="profile"
-        class="place-self-center pb-6 md:pb-0"
+        class="place-self-center md:mt-10 mb-10 md:mb-0"
       />
       <div class="drop-shadow-2xl">
         <p
diff --git a/src/components/Cards/QproCardBox.vue b/src/components/Cards/QproCardBox.vue
index 05315b9e..e834e2fb 100644
--- a/src/components/Cards/QproCardBox.vue
+++ b/src/components/Cards/QproCardBox.vue
@@ -138,8 +138,8 @@ function revert() {
           :key="QproKey"
           :version="version"
           :profile="{ qpro: newQpro }"
-          style="scale: 1.9"
-          class="my-16 mb-10"
+          style="scale: 1.6"
+          class="my-16 md:my-0 md:mb-8"
         />
       </div>
     </div>
diff --git a/src/components/UserQpro.vue b/src/components/UserQpro.vue
index 01be9d4a..dd2bb3ff 100644
--- a/src/components/UserQpro.vue
+++ b/src/components/UserQpro.vue
@@ -26,76 +26,24 @@ const assetPaths = computed(() => {
     face: `${templatePath}/face/${userProfile.value.qpro?.face}`,
     body: `${templatePath}/body/${userProfile.value.qpro?.body}`,
     hand: `${templatePath}/hand/${userProfile.value.qpro?.hand}`,
+    bg: `${templatePath}/bg/${userProfile.value.qpro?.bg}`,
   };
 });
 </script>
 
 <template>
   <div
-    class="justify-center items-center mb-4 md:mb-0 drop-shadow-xl"
+    class="w-full drop-shadow-xl"
     :style="{ width: `${props.size}px`, height: `${props.size}px` }"
   >
-    <div class="qpro-character relative w-full h-full">
-      <!-- Hair Back -->
+    <div class="qpro-character absolute w-full h-full mt-8 md:mt-0">
+      <!-- BG -->
       <img
-        class="qpro-hair-back absolute"
-        :src="assetPaths.hair + '_b.png'"
-        alt="Hair Back"
-        style="top: -22px; left: 6px; width: 90px"
-      />
-
-      <!-- Right Arm -->
-      <img
-        class="qpro-arm-right-upper absolute"
-        :src="assetPaths.body + '_arm_r_upper.png'"
-        alt="Right Arm Upper"
-        style="top: 33px; left: -15px; width: 70px"
-      />
-      <img
-        class="qpro-arm-right-lower absolute"
-        :src="assetPaths.body + '_arm_r_lower.png'"
-        alt="Right Arm Lower"
-        style="top: 33px; left: -15px; width: 70px"
-      />
-
-      <!-- Legs -->
-      <img
-        class="qpro-leg-left-upper absolute"
-        :src="assetPaths.body + '_leg_l_upper.png'"
-        alt="Left Leg Upper"
-        style="top: 70px; left: 42px; width: 55px"
-      />
-      <img
-        class="qpro-leg-left-lower absolute"
-        :src="assetPaths.body + '_leg_l_lower.png'"
-        alt="Left Leg Lower"
-        style="top: 70px; left: 42px; width: 55px"
-      />
-      <img
-        class="qpro-leg-right-upper absolute"
-        :src="assetPaths.body + '_leg_r_upper.png'"
-        alt="Right Leg Upper"
-        style="top: 67px; left: 12px; width: 55px"
-      />
-      <img
-        class="qpro-leg-right-lower absolute"
-        :src="assetPaths.body + '_leg_r_lower.png'"
-        alt="Right Leg Lower"
-        style="top: 67px; left: 12px; width: 55px"
-      />
-
-      <!-- Body -->
-      <img
-        class="qpro-body-back absolute"
-        :src="assetPaths.body + '_b.png'"
-        alt="Body Back"
-        style="top: -45px; left: -6px; width: 400px"
-      />
-      <img
-        class="qpro-body-front absolute"
-        :src="assetPaths.body + '_f.png'"
-        alt="Body Front"
-        style="top: -45px; left: -6px; width: 400px"
+        v-if="profile?.qpro?.bg"
+        class="qpro-bg absolute"
+        :src="assetPaths.bg + '_bg.png'"
+        alt="bg"
+        style="top: -50px; left: -6px; width: 200px"
       />
 
       <!-- Head Back -->
@@ -103,7 +51,76 @@ const assetPaths = computed(() => {
         class="qpro-head-back absolute"
         :src="assetPaths.head + '_b.png'"
         alt="Head Back"
-        style="top: -20px; left: 15px; width: 80px"
+        style="top: -20px; left: 10px; width: 90px"
+      />
+
+      <!-- Hair Back -->
+      <img
+        class="qpro-hair-back absolute"
+        :src="assetPaths.hair + '_b.png'"
+        alt="Hair Back"
+        style="top: -20px; left: 17px; width: 90px"
+      />
+
+      <!-- Right Arm -->
+      <img
+        class="qpro-arm-right-upper absolute"
+        :src="assetPaths.body + '_arm_r_upper.png'"
+        alt="Right Arm Upper"
+        style="top: 33px; left: -9px; width: 70px"
+      />
+      <img
+        class="qpro-arm-right-lower absolute"
+        :src="assetPaths.body + '_arm_r_lower.png'"
+        alt="Right Arm Lower"
+        style="top: 33px; left: -9px; width: 70px"
+      />
+      <img
+        class="qpro-hand-right absolute"
+        :src="assetPaths.hand + '_r.png'"
+        alt="Right Hand"
+        style="top: -25px; left: -18px; width: 90px"
+      />
+
+      <!-- Legs -->
+      <img
+        class="qpro-leg-left-lower absolute"
+        :src="assetPaths.body + '_leg_l_lower.png'"
+        alt="Left Leg Lower"
+        style="top: 70px; left: 48px; width: 55px"
+      />
+      <img
+        class="qpro-leg-left-upper absolute"
+        :src="assetPaths.body + '_leg_l_upper.png'"
+        alt="Left Leg Upper"
+        style="top: 70px; left: 48px; width: 55px"
+      />
+
+      <img
+        class="qpro-leg-right-lower absolute"
+        :src="assetPaths.body + '_leg_r_lower.png'"
+        alt="Right Leg Lower"
+        style="top: 69.5px; left: 17.5px; width: 55px"
+      />
+      <img
+        class="qpro-leg-right-upper absolute"
+        :src="assetPaths.body + '_leg_r_upper.png'"
+        alt="Right Leg Upper"
+        style="top: 68px; left: 17px; width: 55px"
+      />
+
+      <!-- Body -->
+      <img
+        class="qpro-body-back absolute"
+        :src="assetPaths.body + '_b.png'"
+        alt="Body Back"
+        style="top: -45px; left: 0px; width: 400px"
+      />
+      <img
+        class="qpro-body-front absolute"
+        :src="assetPaths.body + '_f.png'"
+        alt="Body Front"
+        style="top: -45px; left: 0px; width: 400px"
       />
 
       <!-- Face -->
@@ -111,7 +128,7 @@ const assetPaths = computed(() => {
         class="qpro-face absolute"
         :src="assetPaths.face + '.png'"
         alt="Face"
-        style="top: -5px; left: 30px; width: 50px"
+        style="top: -5px; left: 36px; width: 50px"
       />
 
       <!-- Hair Front -->
@@ -119,7 +136,7 @@ const assetPaths = computed(() => {
         class="qpro-hair-front absolute"
         :src="assetPaths.hair + '_f.png'"
         alt="Hair Front"
-        style="top: -23px; left: 9px; width: 96px"
+        style="top: -18.5px; left: 16px; width: 92px"
       />
 
       <!-- Left Arm -->
@@ -127,27 +144,19 @@ const assetPaths = computed(() => {
         class="qpro-arm-left-upper absolute"
         :src="assetPaths.body + '_arm_l_upper.png'"
         alt="Left Arm Upper"
-        style="top: 35px; left: 53px; width: 70px"
+        style="top: 35px; left: 60px; width: 70px"
       />
       <img
         class="qpro-arm-left-lower absolute"
         :src="assetPaths.body + '_arm_l_lower.png'"
         alt="Left Arm Lower"
-        style="top: 35px; left: 53px; width: 70px"
+        style="top: 35px; left: 60px; width: 70px"
       />
-
-      <!-- Hands -->
       <img
         class="qpro-hand-left absolute"
         :src="assetPaths.hand + '_l.png'"
         alt="Left Hand"
-        style="top: -25px; left: 45px; width: 70px"
-      />
-      <img
-        class="qpro-hand-right absolute"
-        :src="assetPaths.hand + '_r.png'"
-        alt="Right Hand"
-        style="top: 0px; left: -13px; width: 70px"
+        style="top: -63px; left: 50px; width: 90px"
       />
 
       <!-- Head Front -->
@@ -155,7 +164,7 @@ const assetPaths = computed(() => {
         class="qpro-head-front absolute"
         :src="assetPaths.head + '_f.png'"
         alt="Head Front"
-        style="top: -20px; left: 15px; width: 80px"
+        style="top: -19px; left: 20px; width: 90px"
       />
     </div>
   </div>
diff --git a/src/constants/index.js b/src/constants/index.js
index 975ae880..110c77e9 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1144,6 +1144,11 @@ export const gameData = [
     icon: "/assets/icon/iidx.webp",
     cardBG: "/assets/card/iidx.webp",
     videoTable: [
+      VersionConstants.IIDX_TRICORO,
+      VersionConstants.IIDX_SPADA,
+      VersionConstants.IIDX_PENDUAL,
+      VersionConstants.IIDX_COPULA,
+      VersionConstants.IIDX_SINOBUZ,
       VersionConstants.IIDX_CANNON_BALLERS,
       VersionConstants.IIDX_ROOTAGE,
       VersionConstants.IIDX_HEROIC_VERSE,