fix:leaderboard

Squashed commit of the following:

commit 91c0f587c1966b9e127f97cd762268774bc783fb
Author: arily <[email protected]>
Date:   Fri Aug 18 12:35:51 2023 +0900

    handle rows

src/components/header/simple/title-with-sub.vue

@@ -17,7 +17,7 @@ export default {
 <template>
   <div class="app-header">
     <div>
-      <h1 v-if="title" class="text-3xl font-bold">
+      <h1 v-if="title" :id="$attrs.id" class="text-3xl font-bold">
         {{ title }}
       </h1>
       <h2

src/components/leaderboard/user-table.vue

@@ -8,7 +8,7 @@ import { Rank } from '~/def'
 
 type RouterOutput = inferRouterOutputs<AppRouter>
 
-type Leaderboard = NonNullable<RouterOutput['leaderboard']['overall']>[number]
+type Leaderboard = NonNullable<RouterOutput['rank']['leaderboard']>[number]
 const props = defineProps<{
   user: Leaderboard['user']
   inThisLeaderboard: ComponentLeaderboard<string>['inThisLeaderboard']

src/pages/beatmapset/[id].vue

@@ -66,7 +66,7 @@ const { data: leaderboard, refresh } = await useAsyncData(async () => {
     return null
   }
 
-  return await app.$client.leaderboard.beatmap.query({
+  return await app.$client.rank.beatmap.query({
     ...switcher,
     page: 0,
     pageSize: 20,

src/pages/leaderboard/[[mode]].vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" async>
 // TODO check max pages
 import type { ActiveMode, ActiveRuleset, LeaderboardRankingSystem } from '~/def/common'
 import type { SwitcherPropType } from '~/composables/useSwitcher'
@@ -37,37 +37,43 @@ const page = shallowRef((isString(pPage) && Number.parseInt(pPage)) || 1)
 
 const perPage = 20
 
-const total = await app$.$client.leaderboard.overallRange.query()
-
-const outOfRange = page.value * perPage - perPage > total
-if (outOfRange) {
-  page.value = Math.floor(total / perPage)
-}
-
 const selected = shallowRef<Required<SwitcherPropType<LeaderboardRankingSystem>>>({
   mode,
   ruleset,
   rankingSystem,
 })
+const { data: total, refresh: refreshCount } = await app$.$client.rank.countLeaderboard.useQuery(selected)
+
 const {
   data: table,
   pending,
   refresh,
-} = await useAsyncData(() =>
-  app$.$client.leaderboard.overall.query({
+} = await useAsyncData(async () => {
+  await refreshCount()
+
+  boundaryPage()
+
+  return app$.$client.rank.leaderboard.query({
     mode: selected.value.mode,
     ruleset: selected.value.ruleset,
     rankingSystem: selected.value.rankingSystem,
     page: page.value - 1,
     pageSize: perPage,
   })
-)
+})
 
 useHead({
   titleTemplate: `%s - Leaderboard - ${config.title}`,
   title: computed(() => ` ${selected.value.mode} | ${selected.value.ruleset} | ${selected.value.rankingSystem}`),
 })
 
+function boundaryPage() {
+  const outOfRange = page.value * perPage - perPage > total.value
+  if (outOfRange) {
+    page.value = Math.floor(total.value / perPage)
+  }
+}
+
 function rewriteHistory() {
   const l = window.location
   const r = router.resolve({
@@ -99,6 +105,7 @@ function reloadPage(i?: number) {
 en-GB:
   no-score: No one played this mode yet.
   no-score-alt: Wanna be the first one? Go for it.
+  total: '{total} rows'
 
 zh-CN:
   no-score: 该模式目前还没有人玩过。
@@ -108,23 +115,30 @@ zh-CN:
 <template>
   <div class="flex flex-col h-full leaderboard custom-container mx-auto">
     <header-simple-title-with-sub
+      id="desc"
       class="container mx-auto custom-container !max-w-4xl"
       :title="t('titles.leaderboard')"
       :subtitle="
-        (selected.mode
+        selected.mode
           && selected.ruleset
           && selected.rankingSystem
           && `${t(localeKey.mode(selected.mode))} - ${
             t(localeKey.ruleset(selected.ruleset))
-          } | ${t(localeKey.rankingSystem(selected.rankingSystem))}`)
-          || ''
+          } | ${t(localeKey.rankingSystem(selected.rankingSystem))}`
       "
     >
       <app-mode-switcher
         v-model="selected"
         :show-sort="true"
         @update:model-value="reloadPage()"
       />
+      <template #after-title>
+        <i18n-t keypath="total" tag="p" class="opacity-40 text-xs">
+          <template #total>
+            <span class="font-mono">{{ total }}</span>
+          </template>
+        </i18n-t>
+      </template>
     </header-simple-title-with-sub>
     <div
       v-if="table"
@@ -133,10 +147,8 @@ zh-CN:
         content: table.length,
       }"
     >
-      <!-- <fetch-overlay :fetching="pending" /> -->
-
       <div v-if="table.length" class="relative mx-auto xl:rounded-lg w-full max-w-max">
-        <table class="table table-sm px-2 whitespace-nowrap">
+        <table class="table table-sm px-2 whitespace-nowrap" aria-describedby="desc">
           <thead>
             <tr class="bg-base-100">
               <th>Rank</th>
@@ -180,23 +192,6 @@ zh-CN:
       <div class="join mx-auto outline outline-2">
         <input v-for="i in 5" :key="`pagination-${i}`" class="join-item btn btn-ghost checked:outline outline-2" type="radio" name="options" :aria-label="i.toString()" @click="reloadPage(i)">
       </div>
-      <div class="flex py-4">
-        <!-- <t-tabs
-          :model-value="page"
-          class="mx-auto items-baseline"
-          size="lg"
-          @update:model-value="v => reloadPage(v)"
-        >
-          <t-tab
-            v-for="i in 5"
-            :key="`pagination-${i}`"
-            :value="i"
-            class="bigger-when-active"
-          >
-            {{ i }}
-          </t-tab>
-        </t-tabs> -->
-      </div>
     </div>
   </div>
 </template>

src/server/backend/$base/server/index.ts

@@ -1,4 +1,4 @@
-export * from './leaderboard'
+export * from './rank'
 export * from './map'
 export * from './score'
 export * from './server-status'

src/server/backend/$base/server/leaderboard.ts → src/server/backend/$base/server/rank.ts

@@ -11,32 +11,47 @@ import type {
   ComponentLeaderboard,
 } from '~/def/leaderboard'
 
-export namespace LeaderboardProvider {
+export namespace RankProvider {
+
+  export interface Pagination {
+    page: number
+    pageSize: number
+  }
+
   export interface BaseQueryOptionalMode<M extends ActiveMode = ActiveMode> {
     mode?: M
     ruleset: ActiveRuleset
-    page: number
-    pageSize: number
   }
   export interface BaseQuery<M extends ActiveMode = ActiveMode> {
     mode: M
     ruleset: AvailableRuleset<M>
-    page: number
-    pageSize: number
   }
 }
 
-export interface LeaderboardProvider<Id> extends idTransformable {
-  getLeaderboard(
-    query: LeaderboardProvider.BaseQuery & {
+export interface RankProvider<Id> extends idTransformable {
+  leaderboard(
+    query: RankProvider.BaseQuery & RankProvider.Pagination & {
       rankingSystem: LeaderboardRankingSystem
     }
   ): PromiseLike<ComponentLeaderboard<Id>[]>
 
-  getBeatmapLeaderboard(
-    query: LeaderboardProvider.BaseQueryOptionalMode & {
+  countLeaderboard(
+    query: RankProvider.BaseQuery & {
+      rankingSystem: LeaderboardRankingSystem
+    }
+  ): PromiseLike<number>
+
+  beatmap(
+    query: RankProvider.BaseQueryOptionalMode & RankProvider.Pagination & {
       rankingSystem: RankingSystem
       md5: string
     }
   ): PromiseLike<BeatmapLeaderboard<Id>[]>
+
+  countBeatmap(
+    query: RankProvider.BaseQueryOptionalMode & {
+      rankingSystem: RankingSystem
+      md5: string
+    }
+  ): PromiseLike<number>
 }

src/server/backend/bancho.py/env.ts

@@ -7,7 +7,7 @@ export const database = literal('database')
 export const header = literal('header')
 export const api = literal('api')
 export const dsn = string().url()
-export const leaderboard = discriminatedUnion('leaderboardSource', [
+export const rank = discriminatedUnion('leaderboardSource', [
   object({
     leaderboardSource: database,
   }),
@@ -30,6 +30,6 @@ export const validator = base.and(object({
   dsn,
   avatar,
   api: apiEndpoint,
-}).and(leaderboard))
+}).and(rank))
 
 export const config = lazySingleton(() => validator.parse(env))

src/server/backend/bancho.py/server/index.ts

@@ -1,5 +1,5 @@
 export { ArticleProvider } from './article'
-export { LeaderboardProvider } from './leaderboard'
+export { RankProvider } from './rank'
 export { MapProvider } from './map'
 export { ScoreProvider } from './score'
 export { ServiceStatusProvider } from './server-status'