Add Qpro and Emblem config

src/components/Cards/EmblemCardBox.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { watch, ref } from "vue";
+import BaseButton from "@/components/BaseButton.vue";
+import CardBox from "@/components/CardBox.vue";
+import FormField from "@/components/FormField.vue";
+import FormControl from "@/components/FormControl.vue";
+import UserEmblem from "@/components/UserEmblem.vue";
+import PillTag from "@/components/PillTag.vue";
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: null,
+  },
+  version: {
+    type: Number,
+    default: 14,
+  },
+});
+
+const userProfile = ref(props.profile);
+const version = ref(props.version);
+
+watch(
+  () => props.version,
+  () => {
+    userProfile.value = props.profile;
+  }
+);
+
+watch(
+  () => props.version,
+  () => {
+    version.value = props.version;
+  }
+);
+
+const valid_emblem_options = [
+  "background",
+  "main",
+  "ornament",
+  "effect",
+  "speech_bubble",
+];
+</script>
+
+<template>
+  <CardBox class="mt-6">
+    <PillTag color="info" label="Emblem" class="mb-2" />
+    <div class="grid md:grid-cols-2 space-y-6 align-center">
+      <div>
+        <FormField
+          v-for="option of valid_emblem_options"
+          :key="option"
+          :label="option"
+        >
+          <FormControl
+            :v-model="profile.last.emblem"
+            :model-value="profile.last.emblem"
+          />
+        </FormField>
+      </div>
+      <div class="place-self-center">
+        <UserEmblem :version="version" :profile="profile" :size="300" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="space-x-2">
+        <BaseButton type="submit" color="success" label="Save" />
+        <BaseButton type="submit" color="danger" label="Revert" />
+      </div>
+    </template>
+  </CardBox>
+</template>

src/components/Cards/ProfileCard.vue

@@ -9,6 +9,7 @@ import { dashCode } from "@/constants/userData";
 import { getGameInfo } from "@/constants";
 import BaseButton from "@/components/BaseButton.vue";
 import UserEmblem from "@/components/UserEmblem.vue";
+import UserQpro from "@/components/UserQpro.vue";
 import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor.js";
 
 const props = defineProps({
@@ -52,6 +53,12 @@ const thisGame = getGameInfo(props.game);
         :profile="profile"
         class="place-self-center pb-6 md:pb-0"
       />
+      <UserQpro
+        v-if="game == 'iidx' && version >= 20 && profile.qpro"
+        :version="version"
+        :profile="profile"
+        class="place-self-center pb-6 md:pb-0"
+      />
       <div class="drop-shadow-xl">
         <h1 :class="colorText()" class="text-4xl md:text-5xl font-bold">
           {{ profile.username }}

src/components/Cards/QproCardBox.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { watch, ref } from "vue";
+import BaseButton from "@/components/BaseButton.vue";
+import CardBox from "@/components/CardBox.vue";
+import FormField from "@/components/FormField.vue";
+import FormControl from "@/components/FormControl.vue";
+import UserQpro from "@/components/UserQpro.vue";
+import PillTag from "@/components/PillTag.vue";
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: null,
+  },
+  version: {
+    type: Number,
+    default: 14,
+  },
+});
+
+const userProfile = ref(props.profile);
+const version = ref(props.version);
+
+watch(
+  () => props.version,
+  () => {
+    userProfile.value = props.profile;
+  }
+);
+
+watch(
+  () => props.version,
+  () => {
+    version.value = props.version;
+  }
+);
+
+const valid_options = ["body", "head", "hair", "face", "hand"];
+</script>
+
+<template>
+  <CardBox class="mt-6">
+    <PillTag color="info" label="QPro" class="mb-2" />
+    <div class="grid md:grid-cols-2 space-y-6 align-center">
+      <div>
+        <FormField
+          v-for="option of valid_options"
+          :key="option"
+          :label="option"
+        >
+          <FormControl
+            :v-model="profile.qpro[option]"
+            :model-value="profile.qpro[option]"
+          />
+        </FormField>
+      </div>
+      <div class="place-self-center">
+        <UserQpro
+          :version="version"
+          :profile="profile"
+          style="scale: 1.9"
+          class="my-16 mb-10"
+        />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="space-x-2">
+        <BaseButton type="submit" color="success" label="Save" />
+        <BaseButton type="submit" color="danger" label="Revert" />
+      </div>
+    </template>
+  </CardBox>
+</template>

src/components/UserEmblem.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: Number,
     default: 14,
   },
+  size: {
+    type: Number,
+    default: 128,
+  },
 });
 
 const userProfile = ref(props.profile);
@@ -62,13 +66,17 @@ function formatEmblem(emblem) {
 
 <template>
   <div class="inner">
-    <div style="position: relative; width: 128px; height: 128px">
+    <div :style="`position: relative; width: ${size}px; height: ${size}px`">
       <div
         v-for="(src, index) in emblemImages"
         :key="index"
         style="position: absolute"
       >
-        <img :src="src" style="width: 128px; height: 128px" />
+        <img
+          :src="src"
+          :style="`width: ${size}px; height: ${size}px`"
+          class="drop-shadow-lg"
+        />
       </div>
     </div>
   </div>

src/components/UserQpro.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, computed, defineProps } from "vue";
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: null,
+  },
+  version: {
+    type: Number,
+    default: 14,
+  },
+  size: {
+    type: Number,
+    default: 128,
+  },
+});
+
+const userProfile = ref(props.profile);
+
+const assetPaths = computed(() => {
+  const templatePath = `https://web3.phaseii.network/gameassets/qpro/${props.version}`;
+  return {
+    head: `${templatePath}/head/${userProfile.value.qpro?.head}`,
+    hair: `${templatePath}/hair/${userProfile.value.qpro?.hair}`,
+    face: `${templatePath}/face/${userProfile.value.qpro?.face}`,
+    body: `${templatePath}/body/${userProfile.value.qpro?.body}`,
+    hand: `${templatePath}/hand/${userProfile.value.qpro?.hand}`,
+  };
+});
+</script>
+
+<template>
+  <div
+    class="justify-center items-center mb-4 md:mb-0 drop-shadow-xl"
+    :style="{ width: `${props.size}px`, height: `${props.size}px`, relative }"
+  >
+    <div class="qpro-character relative w-full h-full">
+      <!-- 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"
+      />
+
+      <!-- Head -->
+      <img
+        class="qpro-head-back absolute"
+        :src="assetPaths.head + '_b.png'"
+        alt="Head Back"
+        style="top: -5px; left: 30px; width: 50px"
+      />
+      <img
+        class="qpro-head-front absolute"
+        :src="assetPaths.head + '_f.png'"
+        alt="Head Front"
+        style="top: -5px; left: 30px; width: 50px"
+      />
+
+      <!-- Face -->
+      <img
+        class="qpro-face absolute"
+        :src="assetPaths.face + '.png'"
+        alt="Face"
+        style="top: -5px; left: 30px; width: 50px"
+      />
+
+      <!-- Hair -->
+      <img
+        class="qpro-hair-back absolute"
+        :src="assetPaths.hair + '_b.png'"
+        alt="Hair Back"
+        style="top: -22px; left: 6px; width: 90px"
+      />
+      <img
+        class="qpro-hair-front absolute"
+        :src="assetPaths.hair + '_f.png'"
+        alt="Hair Front"
+        style="top: -23px; left: 9px; width: 96px"
+      />
+
+      <!-- Left Arm -->
+      <img
+        class="qpro-arm-left-upper absolute"
+        :src="assetPaths.body + '_arm_l_upper.png'"
+        alt="Left Arm Upper"
+        style="top: 35px; left: 53px; 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"
+      />
+
+      <!-- Hands -->
+      <img
+        class="qpro-hand-left absolute"
+        :src="assetPaths.hand + '_l.png'"
+        alt="Left Hand"
+        style="top: 35px; left: 53px; width: 70px"
+      />
+      <img
+        class="qpro-hand-right absolute"
+        :src="assetPaths.hand + '_r.png'"
+        alt="Right Hand"
+        style="top: 0px; left: -10px; width: 70px"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.qpro-character img {
+  width: auto;
+  height: auto;
+}
+</style>

src/views/Game/EditView.vue

@@ -12,6 +12,9 @@ import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import FormField from "@/components/FormField.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import FormControl from "@/components/FormControl.vue";
+import EmblemCardBox from "@/components/Cards/EmblemCardBox.vue";
+import QproCardBox from "@/components/Cards/QproCardBox.vue";
+import PillTag from "@/components/PillTag.vue";
 import { getGameInfo } from "@/constants";
 
 const $route = useRoute();
@@ -159,6 +162,7 @@ async function loadProfile() {
       <div v-if="versionForm.currentVersion && myProfile">
         <CardBox>
           <div>
+            <PillTag color="info" label="General" class="mb-2" />
             <FormField
               v-for="setting of settings"
               :key="setting.id"
@@ -202,6 +206,24 @@ async function loadProfile() {
             </div>
           </template>
         </CardBox>
+        <EmblemCardBox
+          v-if="
+            gameID == 'jubeat' &&
+            versionForm.currentVersion >= 10 &&
+            myProfile.last?.emblem
+          "
+          :profile="myProfile"
+          :version="versionForm.currentVersion"
+        />
+        <QproCardBox
+          v-if="
+            (gameID == 'iidx' || gameID == 'iidxclass') &&
+            versionForm.currentVersion >= 19 &&
+            myProfile.qpro
+          "
+          :profile="myProfile"
+          :version="versionForm.currentVersion"
+        />
       </div>
     </SectionMain>
   </LayoutAuthenticated>