Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-06-02 22:26:57 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tiers page show current SP criteria for each

Browse Source
This commit is contained in:
Kalle 2023-10-14 11:45:31 +03:00
parent b2a401a746
commit b1b4e928ca
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/features/sendouq/routes/tiers.tsx
View File

@ -1,15 +1,33 @@
import { useLoaderData } from "@remix-run/react";
import { TierImage } from "~/components/Image";
import { Main } from "~/components/Main";
import { ordinalToSp } from "~/features/mmr";
import {
TEAM_LEADERBOARD_MIN_ENTRIES_FOR_LEVIATHAN,
TIERS,
USER_LEADERBOARD_MIN_ENTRIES_FOR_LEVIATHAN,
} from "~/features/mmr/mmr-constants";
import { currentOrPreviousSeason } from "~/features/mmr/season";
import { userSkills } from "~/features/mmr/tiered.server";
export const loader = async () => {
const season = currentOrPreviousSeason(new Date());
const { intervals } = await userSkills(season!.nth);
return {
intervals,
};
};
export default function TiersPage() {
const data = useLoaderData<typeof loader>();
return (
<Main halfWidth className="stack md">
{TIERS.map((tier) => {
const neededOrdinal = data.intervals.find(
(i) => !i.isPlus && i.name === tier.name,
)?.neededOrdinal;
return (
<div key={tier.name} className="stack horizontal sm items-center">
<TierImage tier={{ isPlus: false, name: tier.name }} width={150} />
@ -18,6 +36,16 @@ export default function TiersPage() {
<div className="text-lg font-bold text-lighter">
{tier.percentile}%
</div>
{neededOrdinal ? (
<>
<div className="text-xs font-semi-bold text-lighter">
Current criteria
</div>
<div className="text-sm font-semi-bold text-lighter">
{ordinalToSp(neededOrdinal)}SP
</div>
</>
) : null}
</div>
</div>
);