[+] Switching games in leaderboard

AquaNet/src/app.sass

@@ -177,14 +177,28 @@ input.error
   @media (max-width: $w-mobile)
     margin: 100px 0 0
 
-  > h2.outer-title
+  > h2.outer-title, > .outer-title-options
     margin-top: -5rem
     margin-bottom: 1rem
 
     @media (max-width: $w-mobile)
       text-align: center
 
-  > h2
+  > .outer-title-options
+    display: flex
+    justify-content: space-between
+    align-items: center
+
+    nav
+      display: flex
+      flex-direction: row
+      gap: 10px
+      top: 4px
+
+    @media (max-width: $w-mobile)
+      flex-direction: column
+
+  > h2, > .outer-title-options > h2
     margin: 0
 
 main.content

AquaNet/src/libs/i18n.ts

@@ -1,5 +1,6 @@
 import { EN_REF, type LocalizedMessages } from "./i18n/en_ref";
 import { ZH } from "./i18n/zh";
+import type { GameName } from "./scoring";
 
 type Lang = 'en' | 'zh'
 
@@ -22,3 +23,6 @@ export function t(key: keyof LocalizedMessages, variables?: { [index: string]: a
   }
   return msgs[lang][key]
 }
+
+export const GAME_TITLE: { [key in GameName]: string } =
+  {chu3: t("game.chu3"), mai2: t("game.mai2"), ongeki: t("game.ongeki")}

AquaNet/src/libs/i18n/en_ref.ts

@@ -17,9 +17,6 @@ export const EN_REF_USER = {
   'UserHome.Version': 'Last Version',
   'UserHome.RecentScores': 'Recent Scores',
   'UserHome.NoData': 'No data in the past ${days} days',
-  'UserHome.Game.Mai2': "Mai",
-  'UserHome.Game.Chu3': "Chuni",
-  'UserHome.Game.Ongeki': "Ongeki",
   'UserHome.UnknownSong': "(unknown song)",
   'UserHome.Settings': 'Settings',
   'UserHome.NoValidGame': "The user hasn't played any game yet.",
@@ -46,6 +43,12 @@ export const EN_REF_Welcome = {
   'welcome.verification-failed': 'Verification failed: ${message}. Please try again.',
 }
 
-export const EN_REF = { ...EN_REF_USER, ...EN_REF_Welcome }
+export const EN_REF_GENERAL = {
+  'game.mai2': "Mai",
+  'game.chu3': "Chuni",
+  'game.ongeki': "Ongeki",
+}
+
+export const EN_REF = { ...EN_REF_USER, ...EN_REF_Welcome, ...EN_REF_GENERAL }
 
 export type LocalizedMessages = typeof EN_REF

AquaNet/src/libs/i18n/zh.ts

@@ -1,4 +1,4 @@
-import { EN_REF_USER, type EN_REF_Welcome } from "./en_ref";
+import { EN_REF_GENERAL, EN_REF_USER, type EN_REF_Welcome } from "./en_ref";
 
 const zhUser: typeof EN_REF_USER = {
   'UserHome.ServerRank': '服务器排名',
@@ -19,9 +19,6 @@ const zhUser: typeof EN_REF_USER = {
   'UserHome.Version': '最新最热否',
   'UserHome.RecentScores': '成绩',
   'UserHome.NoData': '过去 ${days} 天内没有玩过',
-  'UserHome.Game.Mai2': "舞萌",
-  'UserHome.Game.Chu3': "中二",
-  'UserHome.Game.Ongeki': "音击",
   'UserHome.UnknownSong': "(未知曲目)",
   'UserHome.Settings': '设置',
   'UserHome.NoValidGame': "用户还没有玩过游戏",
@@ -48,4 +45,10 @@ const zhWelcome: typeof EN_REF_Welcome = {
   'welcome.verification-failed': '验证失败：${message}。请重试',
 }
 
-export const ZH = { ...zhUser, ...zhWelcome }
+const zhGeneral: typeof EN_REF_GENERAL = {
+  'game.mai2': "舞萌",
+  'game.chu3': "中二",
+  'game.ongeki': "音击",
+}
+
+export const ZH = { ...zhUser, ...zhWelcome, ...zhGeneral }

AquaNet/src/pages/Ranking.svelte

@@ -4,6 +4,7 @@
   import type { GenericRanking } from "../libs/generalTypes";
   import StatusOverlays from "../components/StatusOverlays.svelte";
   import type { GameName } from "../libs/scoring";
+  import { GAME_TITLE } from "../libs/i18n";
 
   export let game: GameName = 'mai2';
 
@@ -20,7 +21,14 @@
 </script>
 
 <main class="content leaderboard">
-  <h2 class="outer-title">Global Leaderboard</h2>
+  <div class="outer-title-options">
+    <h2>Global Leaderboard</h2>
+    <nav>
+      {#each Object.entries(GAME_TITLE) as [k, v]}
+        <a href="/ranking/{k}" class:active={k === game}>{v}</a>
+      {/each}
+    </nav>
+  </div>
 
   {#if d}
     <div class="leaderboard-container">

AquaNet/src/pages/UserHome.svelte

@@ -5,8 +5,7 @@
     GenericGameSummary,
     MusicMeta,
     TrendEntry,
-    AquaNetUser,
-    CardSummary
+    AquaNetUser
   } from "../libs/generalTypes";
   import { DATA_HOST } from "../libs/config";
   import 'cal-heatmap/cal-heatmap.css';
@@ -17,7 +16,7 @@
   import { type GameName, getMult } from "../libs/scoring";
   import StatusOverlays from "../components/StatusOverlays.svelte";
   import Icon from "@iconify/svelte";
-  import {t} from "../libs/i18n";
+  import { GAME_TITLE, t } from "../libs/i18n";
 
   const TREND_DAYS = 60
 
@@ -30,8 +29,6 @@
   let me: AquaNetUser
   title(`User ${username}`)
 
-  const GAME_TITLE: { [key in GameName]: string } =
-    {chu3: t("UserHome.Game.Chu3"), mai2: t("UserHome.Game.Mai2"), ongeki: t("UserHome.Game.Ongeki")}
   const titleText = GAME_TITLE[game]
 
   interface MusicAndPlay extends MusicMeta, GenericGamePlaylog {}