[+] Add change name for maimai and refactor settings page

AquaNet/src/components/GameSettingFields.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { SETTING } from "../libs/sdk";
+  import type { GameOption } from "../libs/generalTypes";
+  import { ts } from "../libs/i18n";
+  import StatusOverlays from "./StatusOverlays.svelte";
+
+  export let game: string;
+  let gameFields: GameOption[] = []
+  let submitting = ""
+  let error: string;
+
+  SETTING.get().then(s => {
+    gameFields = s.filter(it => it.game === game)
+  })
+
+  function submitGameOption(field: string, value: any) {
+    if (submitting) return
+    submitting = field
+
+    SETTING.set(field, value).catch(e => error = e.message).finally(() => submitting = "")
+  }
+</script>
+
+<main>
+  <div class="fields">
+    {#each gameFields as field}
+      <div class="field">
+        {#if field.type === "Boolean"}
+          <div class="bool">
+            <input id={field.key} type="checkbox" bind:checked={field.value}
+                   on:change={() => submitGameOption(field.key, field.value)}/>
+            <label for={field.key}>
+              <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
+              <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
+            </label>
+          </div>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <StatusOverlays {error} loading={!gameFields.length && !!submitting}/>
+</main>
+
+<style lang="sass">
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+
+  .bool
+    display: flex
+    align-items: center
+    gap: 1rem
+
+    label
+      display: flex
+      flex-direction: column
+
+      .desc
+        opacity: 0.6
+
+  .field
+    display: flex
+    flex-direction: column
+
+    label
+      max-width: max-content
+
+    > div:not(.bool)
+      display: flex
+      align-items: center
+      gap: 1rem
+      margin-top: 0.5rem
+
+      > input
+        flex: 1
+</style>

AquaNet/src/components/Mai2Settings.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { slide, fade } from "svelte/transition";
+  import { FADE_IN, FADE_OUT } from "../libs/config";
+  import GameSettingFields from "./GameSettingFields.svelte";
+  import { t } from "../libs/i18n.js";
+  import Icon from "@iconify/svelte";
+  import StatusOverlays from "./StatusOverlays.svelte";
+  import { GAME } from "../libs/sdk";
+
+  const profileFields = [
+    ['name', t('settings.mai2.name')],
+  ]
+
+  export let username: string;
+  let error: string
+  let submitting = ""
+  let values = Array(profileFields.length).fill('')
+  let changed: string[] = []
+
+  GAME.userSummary(username, 'mai2').then(({name}) => {
+    values = [name]
+  }).catch(e => error = e.message)
+
+  function submit(field: string, value: string) {
+    if (submitting) return
+    submitting = field
+
+    switch (field) {
+      case 'name':
+        GAME.changeName('mai2', value).then(({newName}) => {
+          changed = changed.filter(c => c !== field)
+          values = [newName]
+        }).catch(e => error = e.message).finally(() => submitting = "")
+        break
+    }
+  }
+</script>
+
+<main>
+  <div class="fields" out:fade={FADE_OUT} in:fade={FADE_IN}>
+    {#each profileFields as [field, name], i (field)}
+      <div class="field">
+        <label for={field}>{name}</label>
+        <div>
+          <input id={field} type="text"
+                 bind:value={values[i]} on:input={() => changed = [...changed, field]}
+                 placeholder={field === 'password' ? t('settings.profile.unchanged') : t('settings.profile.unset')}/>
+          {#if changed.includes(field) && values[i]}
+            <button transition:slide={{axis: 'x'}} on:click={() => submit(field, values[i])}>
+              {#if submitting === field}
+                <Icon icon="line-md:loading-twotone-loop"/>
+              {:else}
+                {t('settings.profile.save')}
+              {/if}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+    <GameSettingFields game="mai2"/>
+  </div>
+
+  <StatusOverlays {error} loading={!values[0] || !!submitting}/>
+</main>
+
+<style lang="sass">
+  .fields
+    display: flex
+    flex-direction: column
+    gap: 12px
+
+  .field
+    display: flex
+    flex-direction: column
+
+    label
+      max-width: max-content
+
+    > div:not(.bool)
+      display: flex
+      align-items: center
+      gap: 1rem
+      margin-top: 0.5rem
+
+      > input
+        flex: 1
+</style>

AquaNet/src/components/WaccaSettings.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { fade } from "svelte/transition";
+  import { FADE_IN, FADE_OUT } from "../libs/config";
+  import GameSettingFields from "./GameSettingFields.svelte";
+</script>
+
+<main>
+  <div out:fade={FADE_OUT} in:fade={FADE_IN}>
+    <GameSettingFields game="wacca"/>
+  </div>
+</main>