feat: 💄 aquabox on profiles + avatar fixes

AquaNet/src/pages/UserHome.svelte

@@ -105,6 +105,41 @@
       d!.user.rival = isAdd
     }).catch(e => error = e.message).finally(() => isLoading = false)
   }
+
+  /* Aquabox */
+  
+  import { userboxFileProcess, ddsDB, initializeDb } from "../libs/userbox/userbox"
+  import ChuniPenguinComponent from "../components/settings/userbox/ChuniPenguin.svelte"
+  import ChuniUserplateComponent from "../components/settings/userbox/ChuniUserplate.svelte";
+  import {
+    type UserBox,
+    type UserItem,
+  } from "../libs/generalTypes";
+  import { USERBOX } from "../libs/sdk";
+
+  let USERBOX_ACTIVE = useLocalStorage("userboxNewProfile", false);
+  let USERBOX_INSTALLED = false;
+  
+  let userbox: UserBox;
+  let allItems: Record<string, Record<string, { name: string }>> = {};
+
+  if (game == "chu3" && USERBOX_ACTIVE.value) {
+    indexedDB.databases().then(async (dbi) => {
+      let databaseExists = dbi.some(db => db.name == "userboxChusanDDS");
+      if (databaseExists) {
+        await initializeDb();
+        const profile = await USERBOX.getUserProfile(username).catch(_ => null)
+        if (!profile) return;
+        userbox = profile;
+        console.log(userbox);
+
+        allItems = await DATA.allItems('chu3').catch(_ => {
+          error = t("userbox.error.nodata")
+        }) as typeof allItems
+        USERBOX_INSTALLED = databaseExists;
+      }
+    })
+  }
 </script>
 
 <main id="user-home" class="content">
@@ -132,6 +167,18 @@
       </nav>
     </div>
 
+    {#if USERBOX_ACTIVE.value && USERBOX_INSTALLED && game == "chu3"}
+      <div class="chuni-userbox-container">
+        <ChuniUserplateComponent chuniCharacter={userbox.characterId} chuniRating={d.user.rating / 100} chuniLevel={userbox.level.toString()}
+          chuniNameplate={userbox.nameplateId} chuniName={userbox.userName} chuniTrophyName={allItems.trophy[userbox.trophyId].name}></ChuniUserplateComponent>
+        <div class="chuni-penguin-container">
+          <ChuniPenguinComponent classPassthrough="chuni-penguin-float" chuniWear={userbox.avatarWear} chuniHead={userbox.avatarHead} chuniBack={userbox.avatarBack} 
+          chuniFront={userbox.avatarFront} chuniFace={userbox.avatarFace} chuniItem={userbox.avatarItem}
+          chuniSkin={userbox.avatarSkin}></ChuniPenguinComponent>
+        </div>
+      </div>
+    {/if}
+
     <div>
       <h2>{titleText} {t('UserHome.Statistics')}</h2>
       <div class="scoring-info">
@@ -576,4 +623,18 @@
         &:before
           content: "+"
         color: vars.$c-good
+
+.chuni-userbox-container
+  display: flex
+  align-items: center
+  justify-content: center
+
+  .chuni-penguin-container
+    height: 256px
+    aspect-ratio: 1
+    position: relative
+
+@media (max-width: 1000px)
+  .chuni-userbox-container
+    flex-wrap: wrap
 </style>