[F] Fix userbox

AquaNet/src/components/UserBox.svelte

@@ -8,7 +8,6 @@
   import { USER, USERBOX } from "../libs/sdk";
   import { t, ts } from "../libs/i18n";
   import { DATA_HOST, HAS_USERBOX_ASSETS } from "../libs/config";
-  import { FADE_IN, FADE_OUT } from "../libs/config";
   import { fade, slide } from "svelte/transition";
   import StatusOverlays from "./StatusOverlays.svelte";
   import Icon from "@iconify/svelte";
@@ -19,9 +18,6 @@
   let submitting = "";
   let changed: string[] = [];
 
-  let tab = 0;
-  const tabs = ["chusan", "ongeki", "maimai"];
-
   // Things that can be changed in the userbox
   const userBoxFields = [
     {
@@ -149,9 +145,9 @@
     const currentValues = await USERBOX.getProfile().catch((e) => {
       loading = false;
       error = t("userbox.error.noprofile")
-    });
+    })
 
-    if(!currentValues) return;
+    if (!currentValues) return
 
     values = {
       nameplate: currentValues.nameplateId,
@@ -174,7 +170,7 @@
       return
     });
 
-    if(!itemLabels) return;
+    if (!itemLabels) return;
 
     await Promise.all(
       userBoxItems.map(async (kind) => {
@@ -300,45 +296,14 @@
 </script>
 
 {#if !loading && !error}
-  <div class="outer-container">
-    <nav>
-      {#each tabs as tabName, i}
-        <div
-          transition:slide={{ axis: "x" }}
-          class:active={tab === i}
-          on:click={() => {
-            tab = i;
-
-            // Set url params
-            window.history.pushState({}, "", `/settings?tab=${tab}`);
-          }}
-          on:keydown={(e) => e.key === "Enter" && (tab = i)}
-          role="button"
-          tabindex="0"
-        >
-          {ts(`userbox.tabs.${tabName}`)}
-        </div>
-      {/each}
-    </nav>
-    {#if tab === 0}
-      <div class="container" out:fade={FADE_OUT} in:fade={FADE_IN}>
   <div class="fields">
     {#each userBoxFields as { key, label, kind }, i (key)}
       <div class="field">
         <label for={key}>{label}</label>
         <div>
-                <select
+          <select bind:value={values[key]} id={key} on:change={() => changed = [...changed, key]}>
-                  bind:value={values[key]}
+            {#each availableOptions[key] as option}
-                  id={key}
+              <option value={option.id}>{option.label || `${key} ${option.id.toString()}`}</option>
-                  on:change={() => {
-                    changed = [...changed, key];
-                  }}
-                >
-                  {#each availableOptions[key] as option (option)}
-                    <option value={option.id}
-                      >{option.label ||
-                        `${key} ${option.id.toString()}`}</option
-                    >
             {/each}
           </select>
           {#if changed.includes(key)}
@@ -463,13 +428,6 @@
       </div>
     </div>
   {/if}
-      </div>
-    {:else}
-      <div>
-        <p>WIP</p>
-      </div>
-    {/if}
-  </div>
 {/if}
 <StatusOverlays {error} {loading} />
 

AquaNet/src/libs/sdk.ts

@@ -266,7 +266,9 @@ export const USERBOX = {
     get('/api/v2/game/chu3/user-box', {}),
   getUnlockedItems: (itemId: UserBoxItemKind): Promise<{ itemKind: number, itemId: number, stock: number, isValid: boolean }[]> =>
     get(`/api/v2/game/chu3/user-box-item-by-kind`,{ itemId }),
-  getItemLabels: () => get(`/api/v2/game/chu3/user-box-all-items`, {}),
+  getItemLabels: () => get(`/api/v2/game/chu3/user-box-all-items`, {}).then(it =>
+    Object.fromEntries(Object.entries(it).map(([key, value]) =>
+      [key, Object.fromEntries((value as any[]).map(it => [it.id, it.name]))]))),
   setUserBox: (d: { field: string, value: number | string }) =>
     post(`/api/v2/game/chu3/user-detail-set`, d),
 }