rework score layout

ppy-sb · May 3, 2024 · cd02625 · cd02625
1 parent ccbc2f0
commit cd02625
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 101 deletions.
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
@@ -117,3 +117,8 @@ dialog {
     }
   }
 }
+
+.color-theme-light-invert {
+  filter: invert(100%);
+  @apply dark:[filter:invert(0)];
+}
diff --git a/src/components/app/mode-switcher.vue b/src/components/app/mode-switcher.vue
@@ -106,9 +106,4 @@ watch(switcher, () => emitData())
     @apply w-7 h-7 p-[1px];
   }
 }
-
-.color-theme-light-invert {
-  filter: invert(100%);
-  @apply dark:[filter:invert(0)];
-}
 </style>
diff --git a/src/components/app/nav/index.vue b/src/components/app/nav/index.vue
@@ -36,12 +36,12 @@ function clearFocus() {
     :class="[detached && 'detached']"
   >
     <div
-      class="navbar transition-[border-radius]" :class="[
+      class="navbar w-full transition-[border-radius]" :class="[
         shownMenu.left && 'navbar-tint',
         shownMenu.user && 'navbar-tint',
       ]"
     >
-      <div class="navbar-start">
+      <div class="self-start -navbar-start me-auto">
         <label for="app-drawer-toggle" class="btn btn-ghost drawer-button lg:hidden">
           <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
@@ -63,12 +63,12 @@ function clearFocus() {
           </svg>
         </button>
       </div>
-      <div class="navbar-end w-full items-baseline !gap-2">
-        <ul class="menu nav-menu menu-horizontal hidden lg:inline-flex">
+      <div class="-navbar-end self-end items-baseline !gap-2">
+        <ul class="hidden menu nav-menu menu-horizontal lg:inline-flex flex-nowrap">
           <app-nav-items />
         </ul>
         <button
-          class="btn btn-ghost btn-circle hidden lg:flex"
+          class="hidden btn btn-ghost btn-circle lg:flex"
           @click.prevent="() => searchModalWrapper?.searchModal?.showModal()"
         >
           <svg
@@ -81,13 +81,13 @@ function clearFocus() {
             />
           </svg>
         </button>
-        <div class="dropdown dropdown-end self-center">
-          <label tabindex="0" class="pr-1 flex cursor-pointer active:scale-90 transition-transform">
+        <div class="self-center dropdown dropdown-end">
+          <label tabindex="0" class="flex pr-1 transition-transform cursor-pointer active:scale-90">
             <img v-if="session.loggedIn" :src="session.$state.user?.avatarSrc" class="avatar-img">
             <icon v-else class="w-full h-full avatar-img" name="solar:emoji-funny-circle-broken" />
           </label>
           <ul
-            tabindex="0" class="menu menu-tint menu-md dropdown-content mt-4 p-2 w-52" :class="{
+            tabindex="0" class="p-2 mt-4 menu menu-tint menu-md dropdown-content w-52" :class="{
               'dropdown-open': shownMenu.user,
             }"
           >
@@ -135,7 +135,7 @@ function clearFocus() {
                   {{ t('title.admin-panel') }}
                 </nuxt-link-locale>
               </li>
-              <div class="divider my-0" />
+              <div class="my-0 divider" />
               <li>
                 <nuxt-link-locale :to="{ name: 'auth-logout', query: { redirect: route.fullPath } }" @click="clearFocus">
                   <icon name="majesticons:logout-half-circle-line" class="w-5 h-5" size="100%" />

diff --git a/src/components/app/score/heading.vue b/src/components/app/score/heading.vue
@@ -9,6 +9,7 @@ import type { AppRouter } from '~/server/trpc/routers'
 type RouterOutput = inferRouterOutputs<AppRouter>
 
 type Score = NonNullable<RouterOutput['score']['id']>
+
 defineProps<{
   score: Score
   rankingSystem: RankingSystem
@@ -33,8 +34,8 @@ const { locale } = useI18n()
 
 <i18n lang="yaml">
 en-GB:
-  title: '{title} by {artist}'
-  map: '{version} made by {creator}'
+  title: "{title}\nby {artist}"
+  map: "{version}\nmade by {creator}"
   play: '{player} played at {time}'
   download-replay: Download replay
 
@@ -52,88 +53,144 @@ fr-FR:
 </i18n>
 
 <template>
-  <div v-if="beatmapIsVisible(score.beatmap)" class="whitespace-pre-wrap">
-    <i18n-t keypath="title" tag="p" class="font-light">
-      <template #title>
-        <nuxt-link-locale
-          :to="{ name: 'beatmapset-id', params: { id: score.beatmap.beatmapset.id }, query: { mode: score.mode } }"
-          class="text-3xl font-semibold g-link-style"
-        >
-          {{ autoLocale(score.beatmap.beatmapset.meta).title }}
-        </nuxt-link-locale>
-      </template>
+  <div v-if="beatmapIsVisible(score.beatmap)" class="flex flex-col items-stretch gap-4 md:flex-row">
+    <div class="w-full md:max-w-32 grow">
+      <img :src="score.beatmap.beatmapset.assets.list" class="mx-auto rounded-lg">
+    </div>
+    <div class="whitespace-pre-wrap">
+      <i18n-t keypath="title" tag="p" class="font-light">
+        <template #title>
+          <nuxt-link-locale
+            :to="{ name: 'beatmapset-id', params: { id: score.beatmap.beatmapset.id }, query: { mode: score.mode } }"
+            class="text-2xl font-semibold g-link-style"
+          >
+            {{ autoLocale(score.beatmap.beatmapset.meta).title }}
+          </nuxt-link-locale>
+        </template>
+        <template #artist>
+          <span class="text-xl font-normal">
+            {{ autoLocale(score.beatmap.beatmapset.meta).artist }}
+          </span>
+        </template>
+      </i18n-t>
+      <i18n-t keypath="map" tag="p" class="mt-4 font-light">
+        <template #version>
+          <nuxt-link-locale
+            class="text-xl font-semibold g-link-style"
+            :to="{ name: 'beatmapset-id', params: { id: score.beatmap.beatmapset.id }, query: { beatmap: score.beatmap.md5, mode: score.mode } }"
+          >
+            {{ score.beatmap.version }} (<img src="~/assets/icons/overall-difficulty.png" alt="" class="inline w-6 align-middle color-theme-light-invert">{{ score.beatmap.properties.starRate }})
+          </nuxt-link-locale>
+        </template>
+        <template #creator>
+          <span class="text-lg font-semibold">{{ score.beatmap.creator }}</span>
+        </template>
+      </i18n-t>
+    </div>
+  </div>
+  <i18n-t keypath="play" tag="div" class="flex items-center pt-4 font-light gap-x-1">
+    <template #player>
+      <nuxt-link-locale
+        class="inline-flex gap-1"
+        :to="{
+          name: 'user-handle',
+          params: {
+            handle: `@${score.user.safeName}`,
+          },
+        }"
+      >
+        <img class="object-cover mask mask-squircle" width="30" :src="score.user.avatarSrc" :alt="score.user.name">
+        <div class="text-xl font-bold g-link-style">
+          {{ score.user.name }}
+        </div>
+      </nuxt-link-locale>
+    </template>
+    <template #time>
+      <span class="font-semibold underline decoration-dashed">
+        {{ score.playedAt.toLocaleString(locale, { dateStyle: 'long', timeStyle: 'full' }) }}
+      </span>
+    </template>
+  </i18n-t>
+  <div class="divider" />
+  <div class="flex flex-col items-center mt-4 md:flex-row">
+    <div class="grid items-baseline w-full grid-cols-3 md:grid-cols-6 gap-y-3 gap-x-1">
+      <div class="col-span-2 font-mono text-4xl text-end md:col-span-5">
+        {{ scoreFmt(score.score) }}
+      </div>
 
-      <template #artist>
-        <span class="text-2xl font-normal">
-          {{ autoLocale(score.beatmap.beatmapset.meta).artist }}
-        </span>
-      </template>
-    </i18n-t>
-    <i18n-t keypath="map" tag="p" class="font-light">
-      <template #version>
-        <nuxt-link-locale
-          class="text-2xl font-semibold g-link-style"
-          :to="{ name: 'beatmapset-id', params: { id: score.beatmap.beatmapset.id }, query: { beatmap: score.beatmap.md5, mode: score.mode } }"
-        >
-          {{ score.beatmap.version }} (*{{ score.beatmap.properties.starRate }})
-        </nuxt-link-locale>
+      <template v-if="hasRuleset(score.mode, score.ruleset) && hasRankingSystem(score.mode, score.ruleset, Rank.PPv2)">
+        <span class="col-span-2 font-mono text-2xl md:col-span-5 text-end">{{ scoreFmt(score[Rank.PPv2].pp) }}</span>
+        <span class="text-xl">{{ $t(localeKey.root.global.pp.__path__) }}</span>
       </template>
 
-      <template #creator>
-        <span class="text-xl font-semibold">{{ score.beatmap.creator }}</span>
-      </template>
-    </i18n-t>
-    <i18n-t keypath="play" tag="p" class="pt-6 font-light">
-      <template #player>
-        <nuxt-link-locale
-          class="inline-flex align-bottom"
-          :to="{
-            name: 'user-handle',
-            params: {
-              handle: `@${score.user.safeName}`,
-            },
-          }"
-        >
-          <img class="inline object-cover align-bottom mask mask-squircle" width="30" :src="score.user.avatarSrc" :alt="score.user.name">
-          <div class="text-3xl font-normal g-link-style">
-            {{ score.user.name }}
-          </div>
-        </nuxt-link-locale>
+      <div class="col-span-3 -my-2 divider md:col-span-6" />
+
+      <template v-if="haveManiaHitCounts(score)">
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit[300]) }}</span>
+        <span>x 300</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit.max) }}</span>
+        <span>x 300P</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit[200]) }}</span>
+        <span>x 200</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit[100]) }}</span>
+        <span>x 100</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit[50]) }}</span>
+        <span>x 50</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit.miss) }}</span>
+        <span>x miss</span>
       </template>
 
-      <template #time>
-        <span class="font-semibold underline decoration-dashed">
-          {{ score.playedAt.toLocaleString(locale, { dateStyle: 'long', timeStyle: 'full' }) }}
-        </span>
+      <template v-else-if="haveStandardHitCounts(score)">
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit[300]) }}</span>
+        <span>x 300</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit.geki) }}</span>
+        <span>x geki</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit[100]) }}</span>
+        <span>x 100</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit.katu) }}</span>
+        <span>x katu</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit[50]) }}</span>
+        <span>x 50</span>
+
+        <span />
+        <span class="font-mono text-4xl text-end">{{ scoreFmt(score.hit.miss) }}</span>
+        <span>x miss</span>
       </template>
-    </i18n-t>
-  </div>
-  <div class="divider" />
-  <div class="flex flex-col items-center justify-between w-full md:flex-row">
-    <div class="flex flex-col items-baseline flex-grow w-full gap-2 md:w-auto">
-      <div>
-        <template v-if="rankingSystem === Rank.Score">
-          <span class="text-5xl">{{ scoreFmt(score.score) }}</span>
-        </template>
-        <template v-else-if="rankingSystem === Rank.PPv2 && hasRuleset(score.mode, score.ruleset) && hasRankingSystem(score.mode, score.ruleset, Rank.PPv2)">
-          <span class="text-5xl">{{ scoreFmt(score[Rank.PPv2].pp) }}</span>
-          <span class="text-3xl">{{ $t('global.pp') }}</span>
-        </template>
-      </div>
-      <div v-if="haveManiaHitCounts(score)" class="grid w-full grid-flow-row grid-cols-2 gap-4">
-        <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit[300]) }}</span>x 300</div> <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit.max) }}</span>x 300p</div>
-        <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit[200]) }}</span>x 200</div> <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit[100]) }}</span>x 100</div>
-        <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit[50]) }}</span>x 50</div> <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit.miss) }}</span>x miss</div>
-      </div>
-      <div v-else-if="haveStandardHitCounts(score)" class="grid w-full grid-flow-row grid-cols-2 gap-4">
-        <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit[300]) }}</span>x 300</div> <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit.geki) }}</span>x geki</div>
-        <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit[100]) }}</span>x 100</div> <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit.katu) }}</span>x katu</div>
-        <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit[50]) }}</span>x 50</div> <div><span class="font-mono text-4xl">{{ scoreFmt(score.hit.miss) }}</span>x miss</div>
-      </div>
-      <div>Accuracy {{ score.accuracy }} %</div>
+
+      <div class="col-span-3 -my-2 md:col-span-6 divider" />
+
+      <span class="text-xl text-nowrap">{{ $t(localeKey.root.global.accuracy.__path__) }}</span>
+      <span class="font-mono text-2xl text-end">{{ score.accuracy }}</span>
+      <span class="text-lg">%</span>
+
+      <span class="text-xl text-nowrap">{{ $t(localeKey.root.global['max-combo'].__path__) }}</span>
+      <span class="font-mono text-2xl text-end">{{ score.maxCombo }}</span>
+      <span class="text-lg">x</span>
     </div>
-    <div class="text-8xl">
-      {{ score.grade }}
+    <div class="flex min-w-54">
+      <span class="mx-auto text-8xl">
+        {{ score.grade }}
+      </span>
     </div>
   </div>
   <div class="divider" />

diff --git a/src/locales/@types.d.ts b/src/locales/@types.d.ts
@@ -32,6 +32,7 @@ type KGlobal =
 | 'played-at'
 | 'acc'
 | 'accuracy'
+| 'max-combo'
 | 'play-count'
 | 'beatmapsets'
 | 'beatmaps'

diff --git a/src/locales/base/en-GB.ts b/src/locales/base/en-GB.ts
@@ -69,6 +69,7 @@ export default {
     'email': 'Email',
     'otp': 'One time code',
     'verify': 'Verify',
+    'max-combo': 'Max combo',
   },
   role: {
     [UserRole.Disabled]: 'Disabled',

diff --git a/src/locales/base/zh-CN.ts b/src/locales/base/zh-CN.ts
@@ -59,6 +59,7 @@ export default {
     'email': '邮箱',
     'otp': '验证码',
     'verify': '验证',
+    'max-combo': '最大连击',
   },
 
   role: {

diff --git a/src/pages/beatmapset/[id].vue b/src/pages/beatmapset/[id].vue
@@ -258,7 +258,7 @@ fr-FR:
         <t-tabs
           v-model="selectedMapMd5"
           size="md"
-          class="self-end mx-4 bg-transparent tabs-bordered flex flex-wrap"
+          class="flex flex-wrap self-end mx-4 bg-transparent tabs-bordered"
           @update:model-value="update"
         >
           <t-tab
@@ -313,9 +313,9 @@ fr-FR:
         </div>
         <div class="flex flex-col md:flex-row">
           <div class="w-full md:w-1/3 grow">
-            <div class="p-4 md:p-3 text-center relative">
+            <div class="relative p-4 text-center md:p-3">
               <img
-                class="shadow-md rounded-xl mx-auto min-w-1/2"
+                class="mx-auto shadow-md rounded-xl min-w-1/2"
                 :src="beatmapset.assets['list@2x']"
                 :alt="selectedMap.version"
                 :onerror="placeholder"
@@ -533,14 +533,14 @@ fr-FR:
         :ruleset="switcher.ruleset" @update:model-value="update"
       />
       <div
-        class="overflow-x-auto relative bg-base-100 rounded-lg" :class="{
+        class="relative overflow-x-auto rounded-lg bg-base-100" :class="{
           '!rounded-tl-none': scoreRS?.rankingSystems[0] === switcher.rankingSystem,
           '!rounded-tr-none': scoreRS?.rankingSystems.at(-1) === switcher.rankingSystem,
         }"
       >
         <app-scores-table
           v-if="leaderboard" :scores="leaderboard" :ranking-system="switcher.rankingSystem"
-          class="transition-filter transition-opacity opacity-100"
+          class="transition-opacity opacity-100 transition-filter"
           :class="{
             'clear-rounded-tl': scoreRS?.rankingSystems[0] === switcher.rankingSystem,
             'opacity-30 saturate-50 blur-md': pendingLeaderboard,
@@ -614,11 +614,6 @@ fr-FR:
   }
 }
 
-.color-theme-light-invert {
-  filter: invert(100%);
-  @apply dark:[filter:invert(0)];
-}
-
 .h-mode {
   @apply transition duration-200 ease-in-out font-semibold cursor-pointer opacity-50;
   @apply sm:py-1 sm:my-0;