Leaderboard Rough Draft

AquaNet/src/App.svelte

@@ -5,6 +5,7 @@
   import UserHome from "./pages/UserHome.svelte";
   import Icon from '@iconify/svelte';
   import Home from "./pages/Home.svelte";
+  import Ranking from "./pages/Ranking.svelte";
   import { USER } from "./libs/sdk";
 
   export let url = "";
@@ -21,13 +22,14 @@
   {/if}
   <a href="/home">home</a>
   <div>maps</div>
-  <div>rankings</div>
+  <a href="/ranking">rankings</a>
   <div><Icon icon="tabler:search" /></div>
 </nav>
 
 <Router {url}>
   <Route path="/" component={Welcome} />
   <Route path="/home" component={Home} />
+  <Route path="/ranking" component={Ranking} />
   <Route path="/u/:username" component={UserHome} />
   <Route path="/u/:username/:game" component={UserHome} />
   <Route path="/u/:username/:game/rating" component={MaimaiRating} />

AquaNet/src/libs/generalTypes.ts

@@ -62,6 +62,16 @@ export interface GenericGamePlaylog {
   beforeRating: number
 }
 
+export interface GenericRanking {
+  name: string
+  rank: number
+  accuracy: number
+  rating: number
+  fullCombo: number
+  allPerfect: number
+  lastSeen: string
+}
+
 export interface RankCount {
   name: string
   count: number

AquaNet/src/libs/sdk.ts

@@ -119,6 +119,9 @@ export const GAME = {
     post(`/api/v2/game/${game}/trend`, { username }),
   userSummary: (username: string, game: GameName): Promise<GenericGameSummary> =>
     post(`/api/v2/game/${game}/user-summary`, { username }),
+  ranking: (game: GameName): Promise<GenericGameSummary> =>
+      post(`/api/v2/game/${game}/ranking`, { }),
+
 }
 
 export const DATA = {

AquaNet/src/pages/Ranking.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import {CHARTJS_OPT, clz, registerChart, renderCal, title} from "../libs/ui";
+    import { DATA, GAME } from "../libs/sdk";
+    import type { GenericRanking } from "../libs/generalTypes";
+    title(`Ranking`)
+
+    let d: {
+        user: GenericRanking
+  } | null = null
+
+  Promise.all([
+    GAME.ranking('mai2')
+  ]).then(([user]) => {
+    console.log(user)
+
+    d = {user}
+    localStorage.setItem("tmp-ranking-details", JSON.stringify(d))
+  })
+</script>
+
+<main class="content">
+    <h2>Global Leaderboard</h2>
+
+    {#if d !== null}
+    {#each d.user as user}
+    <p>{user.rank}</p>
+    <h4>{user.name}</h4>
+    <h4>{(user.accuracy / 1).toFixed(2)}%</h4>
+    <h4>{user.rating}</h4>
+    <h4>{user.fullCombo}</h4>
+    <h4>{user.allPerfect}</h4>
+    <hr style="width:70vw">
+    {/each}
+    {:else}
+    <p>Please Wait...</p>
+    {/if}
+</main>