[O] Split chuni userbox display

Co-Authored-By: Raymond <101374892+raymonable@users.noreply.github.com>

AquaNet/src/components/settings/userbox/ChuniUserboxDisplay.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { initializeDb } from "../../../libs/userbox/userbox"
+  import ChuniPenguinComponent from "./ChuniPenguin.svelte"
+  import ChuniUserplateComponent from "./ChuniUserplate.svelte"
+  import { type UserBox } from "../../../libs/generalTypes"
+  import { DATA, USERBOX } from "../../../libs/sdk"
+  import useLocalStorage from "../../../libs/hooks/useLocalStorage.svelte"
+  import { t } from "../../../libs/i18n"
+
+  /**
+   * This is a UserBox viewer on the Profile page (UserHome), added by raymond
+   * to view other user's penguins on their profile.
+   */
+
+  export let game: string
+  export let username: string
+  export let error: string = ""
+
+  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>
+
+{#if USERBOX_ACTIVE.value && USERBOX_INSTALLED && game == "chu3"}
+  <div class="chuni-userbox-container">
+    <ChuniUserplateComponent chuniCharacter={userbox.characterId} chuniRating={userbox.playerRating / 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}
+
+<style lang="sass">
+.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>

AquaNet/src/pages/UserHome.svelte

@@ -23,6 +23,7 @@
   import RatingComposition from "../components/RatingComposition.svelte";
   import useLocalStorage from "../libs/hooks/useLocalStorage.svelte";
   import Line from "../components/chart/Line.svelte";
+  import ChuniUserboxDisplay from "../components/settings/userbox/ChuniUserboxDisplay.svelte";
 
   const TREND_DAYS = 60
 
@@ -105,41 +106,6 @@
       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">
@@ -167,17 +133,7 @@
       </nav>
     </div>
 
-    {#if USERBOX_ACTIVE.value && USERBOX_INSTALLED && game == "chu3"}
+    <ChuniUserboxDisplay {game} {username} bind:error={error} />
-      <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>
@@ -339,11 +295,9 @@
                     }%
                   </span>
                 </span>
-                {#if game === 'mai2' || game === 'wacca'}
+                <span class:increased={r.afterRating - r.beforeRating > 0} class="dx-change">
-                  <span class:increased={r.afterRating - r.beforeRating > 0} class="dx-change">
+                  {r.afterRating === r.beforeRating ? '-' : (r.afterRating - r.beforeRating).toFixed(0)}
-                    {r.afterRating === r.beforeRating ? '-' : (r.afterRating - r.beforeRating).toFixed(0)}
+                </span>
-                  </span>
-                {/if}
               </div>
             </div>
           </div>
@@ -624,17 +578,5 @@
           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>