[+] 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,8 +63,22 @@
 </script>
 
 <main class="content">
-  <h2 class="outer-title">Profile Settings</h2>
+  <div class="outer-title-options">
+    <h2>{t('settings.title')}</h2>
+    <nav>
+      {#each tabs as tabName, i}
+        <div transition:slide={{axis: 'x'}} class:active={tab === i}
+             on:click={() => tab = i} on:keydown={e => e.key === 'Enter' && (tab = i)}
+             role="button" tabindex="0">
+          {ts(`settings.tabs.${tabName}`)}
+        </div>
+      {/each}
+    </nav>
+  </div>
 
+  {#if tab === 0}
+    <!-- Tab 0: Profile settings -->
+    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
       <div class="field">
         <label for="profile-upload">Profile Picture</label>
         <div>
@@ -98,6 +116,11 @@
           </div>
         </div>
       {/each}
+    </div>
+  {: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>