[+] Allow saving chuni team name

AquaNet/src/components/GameSettingFields.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { slide } from "svelte/transition";
   import { SETTING } from "../libs/sdk";
   import type { GameOption } from "../libs/generalTypes";
   import { ts } from "../libs/i18n";
   import StatusOverlays from "./StatusOverlays.svelte";
+  import InputWithButton from "./ui/InputWithButton.svelte";
 
   export let game: string;
   let gameFields: GameOption[] = []
@@ -13,26 +15,32 @@
     gameFields = s.filter(it => it.game === game)
   })
 
-  function submitGameOption(field: string, value: any) {
+  async function submitGameOption(field: string, value: any) {
-    if (submitting) return
+    if (submitting) return false
     submitting = field
 
-    SETTING.set(field, value).catch(e => error = e.message).finally(() => submitting = "")
+    await SETTING.set(field, value).catch(e => error = e.message).finally(() => submitting = "")
+    return true
   }
 </script>
 
 <div class="fields">
   {#each gameFields as field}
-    <div class="field">
+    <div class="field {field.type.toLowerCase()}">
       {#if field.type === "Boolean"}
-        <div class="bool">
+        <input id={field.key} type="checkbox" bind:checked={field.value}
-          <input id={field.key} type="checkbox" bind:checked={field.value}
+                on:change={() => submitGameOption(field.key, field.value)}/>
-                 on:change={() => submitGameOption(field.key, field.value)}/>
+        <label for={field.key}>
-          <label for={field.key}>
+          <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
-            <span class="name">{ts(`settings.fields.${field.key}.name`)}</span>
+          <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
-            <span class="desc">{ts(`settings.fields.${field.key}.desc`)}</span>
+        </label>
-          </label>
+      {/if}
-        </div>
+      {#if field.type === "String"}
+        <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>
+        <InputWithButton bind:field={field} callback={() => submitGameOption(field.key, field.value)}/>
       {/if}
     </div>
   {/each}
@@ -46,31 +54,27 @@
     flex-direction: column
     gap: 12px
 
-  .bool
+  .field.string
-    display: flex
+    flex-direction: column
+    align-items: flex-start
+    gap: 0.5rem
+
+  .field.boolean
     align-items: center
     gap: 1rem
 
+  .field
+    display: flex
+
     label
       display: flex
       flex-direction: column
+      max-width: max-content
 
       .desc
         opacity: 0.6
 
-  .field
+    input[type="text"]
-    display: flex
+      flex: 1
-    flex-direction: column
+      width: 100%
-
-    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/ui/InputWithButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { ts } from "../../libs/i18n";
+
+  export let field: {key: string, value: string, changed?: boolean};
+  export let callback: () => Promise<boolean>;
+</script>
+
+<div class="field">
+  <input id={field.key} type="text" bind:value={field.value}
+  on:input={() => field.changed = true}/>
+  {#if field.changed}
+    <button on:click={async () => { if (await callback()) field.changed = false } }
+      transition:slide={{axis: 'x'}}>
+      {ts('settings.profile.save')}
+    </button>
+  {/if}
+</div>
+
+<style lang="sass">
+  .field
+    display: flex
+    align-items: center
+    gap: 1rem
+    width: 100%
+
+    input
+      flex: 1
+</style>

AquaNet/src/libs/generalTypes.ts

@@ -125,8 +125,10 @@ export type AllMusic = { [key: string]: MusicMeta }
 export interface GameOption {
   key: string
   value: any
-  type: 'Boolean'
+  type: 'Boolean' | 'String'
   game: string
+
+  changed?: boolean
 }
 
 export interface UserBox {

AquaNet/src/libs/i18n/en_ref.ts

@@ -138,6 +138,8 @@ export const EN_REF_SETTINGS = {
   'settings.fields.waccaInfiniteWp.desc': 'Set WP to 999999',
   'settings.fields.waccaAlwaysVip.name': 'Wacca: Always VIP',
   'settings.fields.waccaAlwaysVip.desc': 'Set VIP expiration date to 2077-01-01',
+  'settings.fields.chusanTeamName.name': 'Chunithm Team Name',
+  'settings.fields.chusanTeamName.desc': 'Customize the text displayed on the top of your profile.',
   'settings.fields.rounding.name': 'Score Rounding',
   'settings.fields.rounding.desc': 'Round the score to one decimal place',
   'settings.fields.optOutOfLeaderboard.name': 'Opt Out of Leaderboard',

AquaNet/src/libs/i18n/zh.ts

@@ -147,6 +147,8 @@ const zhSettings: typeof EN_REF_SETTINGS = {
   'settings.fields.waccaInfiniteWp.desc': '将 WP 设置为 999999',
   'settings.fields.waccaAlwaysVip.name': 'Wacca: 永久会员',
   'settings.fields.waccaAlwaysVip.desc': '将 VIP 到期时间设置为 2077-01-01',
+  'settings.fields.chusanTeamName.name': '中二队名',
+  'settings.fields.chusanTeamName.desc': '自定义显示在个人资料顶部的文本。',
   'settings.fields.rounding.name': '分数舍入',
   'settings.fields.rounding.desc': '把分数四舍五入到一位小数',
   'settings.fields.optOutOfLeaderboard.name': '不参与排行榜',