From d9a332de444a7e08a5f6009eb4996e43935c533c Mon Sep 17 00:00:00 2001 From: Azalea <22280294+hykilpikonna@users.noreply.github.com> Date: Fri, 15 Mar 2024 01:10:15 -0400 Subject: [PATCH] [+] Display rating details --- AquaNet/src/app.sass | 8 +++ AquaNet/src/components/RankDetails.svelte | 64 +++++++++++++++++++++++ AquaNet/src/libs/generalTypes.ts | 1 + AquaNet/src/libs/i18n.ts | 4 ++ AquaNet/src/libs/i18n/en_ref.ts | 3 ++ AquaNet/src/libs/i18n/zh.ts | 3 ++ AquaNet/src/pages/UserHome.svelte | 12 ++++- AquaNet/src/vars.sass | 4 +- 8 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 AquaNet/src/components/RankDetails.svelte diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass index d9ff6069..7cfc4715 100644 --- a/AquaNet/src/app.sass +++ b/AquaNet/src/app.sass @@ -176,6 +176,14 @@ input.error @media (max-width: $w-mobile) margin: 100px 0 0 + .fw-block + margin-left: -32px + margin-right: -32px + padding: 12px 32px + background-color: $ov-darker + // Inner shadow + box-shadow: inset 0 10px 10px -2px $c-shadow, inset 0 -10px 10px -2px $c-shadow + > h2.outer-title, > .outer-title-options margin-top: -5rem margin-bottom: 1rem diff --git a/AquaNet/src/components/RankDetails.svelte b/AquaNet/src/components/RankDetails.svelte new file mode 100644 index 00000000..261864fe --- /dev/null +++ b/AquaNet/src/components/RankDetails.svelte @@ -0,0 +1,64 @@ + + + + +
+
+

{t("UserHome.RankDetail.Title")}

+ + + + + + + + {#each Object.values(g.ranks) as rankMap}{/each} + + + + {#each detail as [level, rankMap]} + + + {#each Object.values(rankMap) as count}{/each} + + {/each} +
{t("UserHome.RankDetail.Level")}{rankMap.name}
{level}{count}
+
+
+ + diff --git a/AquaNet/src/libs/generalTypes.ts b/AquaNet/src/libs/generalTypes.ts index 9c0ad7dc..553ff513 100644 --- a/AquaNet/src/libs/generalTypes.ts +++ b/AquaNet/src/libs/generalTypes.ts @@ -86,6 +86,7 @@ export interface GenericGameSummary { rating: number ratingHighest: number ranks: RankCount[] + detailedRanks: { [key: number]: { [key: string]: number } } maxCombo: number fullCombo: number allPerfect: number diff --git a/AquaNet/src/libs/i18n.ts b/AquaNet/src/libs/i18n.ts index 0b29498d..8da971ff 100644 --- a/AquaNet/src/libs/i18n.ts +++ b/AquaNet/src/libs/i18n.ts @@ -18,6 +18,10 @@ if (navigator.language.startsWith('zh')) { } export function t(key: keyof LocalizedMessages, variables?: { [index: string]: any }) { + if (!msgs[lang][key]) { + console.warn(`Missing translation for ${key}`) + return key + } if (variables) { return msgs[lang][key].replace(/\${(.*?)}/g, (_: string, v: string | number) => variables[v] + "") } diff --git a/AquaNet/src/libs/i18n/en_ref.ts b/AquaNet/src/libs/i18n/en_ref.ts index acd98307..fb978d01 100644 --- a/AquaNet/src/libs/i18n/en_ref.ts +++ b/AquaNet/src/libs/i18n/en_ref.ts @@ -20,6 +20,9 @@ export const EN_REF_USER = { 'UserHome.UnknownSong': "(unknown song)", 'UserHome.Settings': 'Settings', 'UserHome.NoValidGame': "The user hasn't played any game yet.", + 'UserHome.ShowRanksDetails': "Click to show details", + 'UserHome.RankDetail.Title': 'Achievement Details', + 'UserHome.RankDetail.Level': "Level", } export const EN_REF_Welcome = { diff --git a/AquaNet/src/libs/i18n/zh.ts b/AquaNet/src/libs/i18n/zh.ts index e7ef3b89..9cb5a9f5 100644 --- a/AquaNet/src/libs/i18n/zh.ts +++ b/AquaNet/src/libs/i18n/zh.ts @@ -22,6 +22,9 @@ const zhUser: typeof EN_REF_USER = { 'UserHome.UnknownSong': "(未知曲目)", 'UserHome.Settings': '设置', 'UserHome.NoValidGame': "用户还没有玩过游戏", + 'UserHome.ShowRanksDetails': "点击显示评分详细", + 'UserHome.RankDetail.Title': '评分详细', + 'UserHome.RankDetail.Level': "等级", } const zhWelcome: typeof EN_REF_Welcome = { diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte index 85ed3591..7495d720 100644 --- a/AquaNet/src/pages/UserHome.svelte +++ b/AquaNet/src/pages/UserHome.svelte @@ -17,6 +17,7 @@ import StatusOverlays from "../components/StatusOverlays.svelte"; import Icon from "@iconify/svelte"; import { GAME_TITLE, t } from "../libs/i18n"; + import RankDetails from "../components/RankDetails.svelte"; const TREND_DAYS = 60 @@ -40,6 +41,8 @@ validGames: [ string, string ][] } | null + let showDetailRank = false + USER.isLoggedIn() && USER.me().then(u => me = u) @@ -131,7 +134,9 @@ -
+
showDetailRank = !showDetailRank} role="button" tabindex="0" + on:keydown={e => e.key === "Enter" && (showDetailRank = !showDetailRank)}> {#each d.user.ranks as r}
{r.name} @@ -170,6 +175,8 @@
+ {#if showDetailRank}{/if} +

{t('UserHome.PlayActivity')}

@@ -308,6 +315,9 @@ $gap: 20px letter-spacing: 0.1em color: $c-main + .info-bottom + width: max-content + .info-top > div > span:last-child font-size: 1.5rem diff --git a/AquaNet/src/vars.sass b/AquaNet/src/vars.sass index 4eb5069b..3459fc0d 100644 --- a/AquaNet/src/vars.sass +++ b/AquaNet/src/vars.sass @@ -8,8 +8,8 @@ $c-shadow: rgba(0, 0, 0, 0.1) $ov-light: rgba(white, 0.04) $ov-lighter: rgba(white, 0.08) -$ov-dark: rgba(black, 0.04) -$ov-darker: rgba(black, 0.08) +$ov-dark: rgba(black, 0.1) +$ov-darker: rgba(black, 0.18) $nav-height: 4rem $w-mobile: 560px