Fix up QPro layout, add in real menu selectors for emblem/qpro

src/components/Cards/EmblemCardBox.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { watch, ref } from "vue";
+import axios from "axios";
+import { watch, ref, reactive } from "vue";
 import BaseButton from "@/components/BaseButton.vue";
 import CardBox from "@/components/CardBox.vue";
 import FormField from "@/components/FormField.vue";
@@ -20,28 +21,78 @@ const props = defineProps({
 
 const userProfile = ref(props.profile);
 const version = ref(props.version);
+const emblemKey = ref(0);
+
+const newEmblem = reactive(formatEmblem(userProfile.value?.last?.emblem));
+const emblemSettings = ref([]);
 
 watch(
   () => props.version,
   () => {
     userProfile.value = props.profile;
+    version.value = props.version;
+    loadEmblemSettings();
+    newEmblem.value = formatEmblem(userProfile.value.last?.emblem);
   }
 );
 
 watch(
-  () => props.version,
+  newEmblem,
   () => {
-    version.value = props.version;
-  }
+    emblemKey.value++;
+  },
+  { deep: true }
 );
 
-const valid_emblem_options = [
-  "background",
-  "main",
-  "ornament",
-  "effect",
-  "speech_bubble",
-];
+loadEmblemSettings();
+function loadEmblemSettings() {
+  axios
+    .get(
+      `https://web3.phaseii.network/gameassets/emblems/${version.value}.json`
+    )
+    .then((r) => {
+      if (r.data) {
+        emblemSettings.value = r.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error.message);
+    });
+}
+
+function formatEmblem(emblem) {
+  if (emblem) {
+    return {
+      background: emblem[0],
+      main: emblem[1],
+      ornament: emblem[2],
+      effect: emblem[3],
+      speech_bubble: emblem[4],
+    };
+  } else {
+    return {
+      background: 0,
+      main: 0,
+      ornament: 0,
+      effect: 0,
+      speech_bubble: 0,
+    };
+  }
+}
+
+function encodeEmblem(emblem) {
+  if (emblem) {
+    return [
+      emblem.background,
+      emblem.main,
+      emblem.ornament,
+      emblem.effect,
+      emblem.speech_bubble,
+    ];
+  } else {
+    return [0, 0, 0, 0, 0];
+  }
+}
 </script>
 
 <template>
@@ -50,18 +101,24 @@ const valid_emblem_options = [
     <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"
+          v-for="option of emblemSettings"
+          :key="option.id"
+          :label="option.name"
+          :help="option.help"
         >
           <FormControl
-            :v-model="profile.last.emblem"
-            :model-value="profile.last.emblem"
+            v-model="newEmblem[option.id]"
+            :options="option.options"
           />
         </FormField>
       </div>
       <div class="place-self-center">
-        <UserEmblem :version="version" :profile="profile" :size="300" />
+        <UserEmblem
+          :key="emblemKey"
+          :version="version"
+          :profile="{ last: { emblem: encodeEmblem(newEmblem) } }"
+          :size="300"
+        />
       </div>
     </div>
 

src/components/Cards/QproCardBox.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { watch, ref } from "vue";
+import axios from "axios";
+import { watch, ref, reactive } from "vue";
 import BaseButton from "@/components/BaseButton.vue";
 import CardBox from "@/components/CardBox.vue";
 import FormField from "@/components/FormField.vue";
@@ -20,11 +21,19 @@ const props = defineProps({
 
 const userProfile = ref(props.profile);
 const version = ref(props.version);
+const QproKey = ref(0);
+
+const newQpro = reactive(
+  userProfile.value?.qpro ?? { head: 0, hair: 0, face: 0, body: 0, hand: 0 }
+);
+const QproSettings = ref([]);
 
 watch(
   () => props.version,
   () => {
     userProfile.value = props.profile;
+    loadQproSettings();
+    newQpro.value = userProfile.value?.qpro;
   }
 );
 
@@ -35,7 +44,27 @@ watch(
   }
 );
 
-const valid_options = ["body", "head", "hair", "face", "hand"];
+watch(
+  newQpro,
+  () => {
+    QproKey.value++;
+  },
+  { deep: true }
+);
+
+loadQproSettings();
+function loadQproSettings() {
+  axios
+    .get(`https://web3.phaseii.network/gameassets/qpro/${version.value}.json`)
+    .then((r) => {
+      if (r.data) {
+        QproSettings.value = r.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error.message);
+    });
+}
 </script>
 
 <template>
@@ -44,20 +73,19 @@ const valid_options = ["body", "head", "hair", "face", "hand"];
     <div class="grid md:grid-cols-2 space-y-6 align-center">
       <div>
         <FormField
-          v-for="option of valid_options"
-          :key="option"
-          :label="option"
+          v-for="option of QproSettings"
+          :key="option.id"
+          :label="option.name"
+          :help="option.help"
         >
-          <FormControl
-            :v-model="profile.qpro[option]"
-            :model-value="profile.qpro[option]"
-          />
+          <FormControl v-model="newQpro[option.id]" :options="option.options" />
         </FormField>
       </div>
       <div class="place-self-center">
         <UserQpro
+          :key="QproKey"
           :version="version"
-          :profile="profile"
+          :profile="{ qpro: newQpro }"
           style="scale: 1.9"
           class="my-16 mb-10"
         />

src/components/UserEmblem.vue

@@ -51,7 +51,6 @@ const emblemImages = computed(() => {
 });
 
 function formatEmblem(emblem) {
-  console.log(emblem);
   if (emblem) {
     return {
       background: emblem[0],

src/components/UserQpro.vue

@@ -33,7 +33,7 @@ const assetPaths = computed(() => {
 <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 }"
+    :style="{ width: `${props.size}px`, height: `${props.size}px` }"
   >
     <div class="qpro-character relative w-full h-full">
       <!-- Hair Back -->
@@ -98,18 +98,12 @@ const assetPaths = computed(() => {
         style="top: -45px; left: -6px; width: 400px"
       />
 
-      <!-- Head -->
+      <!-- Head Back -->
       <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"
+        style="top: -20px; left: 15px; width: 80px"
       />
 
       <!-- Face -->
@@ -147,13 +141,21 @@ const assetPaths = computed(() => {
         class="qpro-hand-left absolute"
         :src="assetPaths.hand + '_l.png'"
         alt="Left Hand"
-        style="top: 35px; left: 53px; width: 70px"
+        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: -10px; width: 70px"
+        style="top: 0px; left: -13px; width: 70px"
+      />
+
+      <!-- Head Front -->
+      <img
+        class="qpro-head-front absolute"
+        :src="assetPaths.head + '_f.png'"
+        alt="Head Front"
+        style="top: -20px; left: 15px; width: 80px"
       />
     </div>
   </div>

src/views/Game/EditView.vue

@@ -218,8 +218,7 @@ async function loadProfile() {
         <QproCardBox
           v-if="
             (gameID == 'iidx' || gameID == 'iidxclass') &&
-            versionForm.currentVersion >= 19 &&
-            myProfile.qpro
+            versionForm.currentVersion >= 19
           "
           :profile="myProfile"
           :version="versionForm.currentVersion"