[+] Game settings tab

AquaNet/src/libs/i18n/en_ref.ts

@@ -83,7 +83,13 @@ export const EN_REF_HOME = {
   'home.setup-description': 'If you own a cab or arcade setup, begin setting up the connection.',
 }
 
+export const EN_REF_SETTINGS = {
+  'settings.title': 'Settings',
+  'settings.tabs.profile': 'Profile',
+  'settings.tabs.game': 'Game',
+}
+
 export const EN_REF = { ...EN_REF_USER, ...EN_REF_Welcome, ...EN_REF_GENERAL,
-  ...EN_REF_LEADERBOARD, ...EN_REF_HOME }
+  ...EN_REF_LEADERBOARD, ...EN_REF_HOME, ...EN_REF_SETTINGS }
 
 export type LocalizedMessages = typeof EN_REF

AquaNet/src/libs/i18n/zh.ts

@@ -1,4 +1,11 @@
-import { EN_REF_GENERAL, EN_REF_HOME, EN_REF_LEADERBOARD, EN_REF_USER, type EN_REF_Welcome } from "./en_ref";
+import {
+  EN_REF_GENERAL,
+  EN_REF_HOME,
+  EN_REF_LEADERBOARD,
+  EN_REF_SETTINGS,
+  EN_REF_USER,
+  type EN_REF_Welcome
+} from "./en_ref";
 
 const zhUser: typeof EN_REF_USER = {
   'UserHome.ServerRank': '服务器排名',
@@ -85,5 +92,11 @@ const zhHome: typeof EN_REF_HOME = {
   'home.setup-description': '如果您有街机框体或者手台，点击这里设置服务器的连接',
 }
 
+const zhSettings: typeof EN_REF_SETTINGS = {
+  'settings.title': '用户设置',
+  'settings.tabs.profile': '个人资料',
+  'settings.tabs.game': '游戏设置',
+}
+
 export const ZH = { ...zhUser, ...zhWelcome, ...zhGeneral,
-  ...zhLeaderboard, ...zhHome }
+  ...zhLeaderboard, ...zhHome, ...zhSettings }

AquaNet/src/pages/User/Settings.svelte

@@ -1,18 +1,22 @@
 <!-- Svelte 4.2.11 -->
 
 <script lang="ts">
-  import { slide } from "svelte/transition";
+  import { slide, fade } from "svelte/transition";
   import type { AquaNetUser } from "../../libs/generalTypes";
   import { USER } from "../../libs/sdk";
   import StatusOverlays from "../../components/StatusOverlays.svelte";
   import Icon from "@iconify/svelte";
   import { pfp } from "../../libs/ui";
+  import { t, ts } from "../../libs/i18n";
+  import { FADE_IN, FADE_OUT } from "../../libs/config";
 
   USER.ensureLoggedIn()
 
   let me: AquaNetUser;
   let error: string;
   let submitting = ""
+  let tab = 0
+  const tabs = [ 'profile', 'game' ]
 
   const fields = [
     [ 'displayName', "Display Name" ],
@@ -59,45 +63,64 @@
 </script>
 
 <main class="content">
-  <h2 class="outer-title">Profile Settings</h2>
+  <div class="outer-title-options">
-
+    <h2>{t('settings.title')}</h2>
-  <div class="field">
+    <nav>
-    <label for="profile-upload">Profile Picture</label>
+      {#each tabs as tabName, i}
-    <div>
+        <div transition:slide={{axis: 'x'}} class:active={tab === i}
-      {#if me && me.profilePicture}
+             on:click={() => tab = i} on:keydown={e => e.key === 'Enter' && (tab = i)}
-        <div on:click={() => pfpField.click()} on:keydown={e => e.key === 'Enter' && pfpField.click()}
+             role="button" tabindex="0">
-             role="button" tabindex="0" class="clickable">
+          {ts(`settings.tabs.${tabName}`)}
-          <img use:pfp={me} alt="Profile" />
         </div>
-      {:else}
+      {/each}
-        <button on:click={() => pfpField.click()}>
+    </nav>
-          Upload New
-        </button>
-      {/if}
-    </div>
-    <input id="profile-upload" type="file" accept="image/*" style="display: none" bind:this={pfpField}
-           on:change={() => pfpField.files && uploadPfp(pfpField.files[0])} />
   </div>
 
-  {#each fields as [field, name], i (field)}
+  {#if tab === 0}
-    <div class="field">
+    <!-- Tab 0: Profile settings -->
-      <label for={field}>{name}</label>
+    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
-      <div>
+      <div class="field">
-        <input id={field} type="text" use:passwordAction={field === 'password'}
+        <label for="profile-upload">Profile Picture</label>
-               bind:value={values[i]} on:input={() => changed = [...changed, field]}
+        <div>
-               placeholder={field === 'password' ? 'Unchanged' : 'Unset'}/>
+          {#if me && me.profilePicture}
-        {#if changed.includes(field) && values[i]}
+            <div on:click={() => pfpField.click()} on:keydown={e => e.key === 'Enter' && pfpField.click()}
-          <button transition:slide={{axis: 'x'}} on:click={() => submit(field, values[i])}>
+                 role="button" tabindex="0" class="clickable">
-            {#if submitting === field}
+              <img use:pfp={me} alt="Profile" />
-              <Icon icon="line-md:loading-twotone-loop" />
+            </div>
-            {:else}
+          {:else}
-              Save
+            <button on:click={() => pfpField.click()}>
-            {/if}
+              Upload New
-          </button>
+            </button>
-        {/if}
+          {/if}
+        </div>
+        <input id="profile-upload" type="file" accept="image/*" style="display: none" bind:this={pfpField}
+               on:change={() => pfpField.files && uploadPfp(pfpField.files[0])} />
       </div>
+
+      {#each fields as [field, name], i (field)}
+        <div class="field">
+          <label for={field}>{name}</label>
+          <div>
+            <input id={field} type="text" use:passwordAction={field === 'password'}
+                   bind:value={values[i]} on:input={() => changed = [...changed, field]}
+                   placeholder={field === 'password' ? 'Unchanged' : '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}
+                  Save
+                {/if}
+              </button>
+            {/if}
+          </div>
+        </div>
+      {/each}
     </div>
-  {/each}
+  {:else if tab === 1}
+    <!-- Tab 1: Game settings -->
+    <div out:fade={FADE_OUT} in:fade={FADE_IN}>Hello world</div>
+  {/if}
 
   <StatusOverlays {error} loading={!me} />
 </main>