diff --git a/src/app/tools/ratings/page.tsx b/src/app/tools/ratings/page.tsx index eda68e495..b762a0a41 100644 --- a/src/app/tools/ratings/page.tsx +++ b/src/app/tools/ratings/page.tsx @@ -1,26 +1,49 @@ 'use client'; -import { Flex, Select } from '@radix-ui/themes'; +import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; +import { Button, Flex, Popover, Select, TextField } from '@radix-ui/themes'; +import { range } from 'lodash'; import { useEffect, useState } from 'react'; import { RatingsInfo } from '../../../commands/ratings'; import PageWrapper from '../../../components/PageWrapper'; -import { Region } from '../../../constants/regions'; +import { REGIONS, REGION_NAMES, Region } from '../../../constants/regions'; +import { + FIRST_ARCHIVED_RATINGS_SEASON, + getLatestArchivedSeasonNumber, +} from '../../../core/blitz/getLatestArchivedSeasonNumber'; import getRatingsInfo from '../../../core/blitz/getRatingsInfo'; -import { RatingsType, useRatings } from '../../../stores/ratings'; +import { useRatings } from '../../../stores/ratings'; export default function Page() { const ratings = useRatings(); - const [awaitedRatingsInfo, setRatingsInfo] = useState( - null, - ); + const [ratingsInfo, setRatingsInfo] = useState(null); + const [jumpToLeague, setJumpToLeague] = useState(0); + const [latestArchivedSeasonNumber, setLatestArchivedSeasonNumber] = useState< + number | null + >(null); + // null being the latest season + const [season, setSeason] = useState(null); useEffect(() => { - getRatingsInfo(ratings.region).then(setRatingsInfo); + (async () => { + const [newRatingsInfo, newLatestArchivedSeasonNumber] = await Promise.all( + [getRatingsInfo(ratings.region), getLatestArchivedSeasonNumber()], + ); + + setRatingsInfo(newRatingsInfo); + setLatestArchivedSeasonNumber(newLatestArchivedSeasonNumber); + + setSeason( + newRatingsInfo.detail == undefined + ? null + : newLatestArchivedSeasonNumber, + ); + })(); }, [ratings.region]); return ( - + @@ -30,46 +53,108 @@ export default function Page() { - North America - Europe - Asia + {REGIONS.map((region) => ( + + {REGION_NAMES[region]} + + ))} + - useRatings.setState({ type: value as RatingsType }) + setSeason(value === 'null' ? null : parseInt(value)) } > - League - Neighbors + {ratingsInfo?.detail === undefined && ( + Current season + )} + + + Archives + + {latestArchivedSeasonNumber && + range( + FIRST_ARCHIVED_RATINGS_SEASON, + latestArchivedSeasonNumber + 1, + ) + .map((season) => ( + + Season {season} + + )) + .reverse()} + - {ratings.type === 'league' ? ( - - useRatings.setState({ league: parseInt(value) }) - } - > - + + + + - - {awaitedRatingsInfo?.detail === undefined && - awaitedRatingsInfo?.leagues.map((league) => ( - - {league.title} - - ))} - - - ) : ( - '1' - )} + + + setJumpToLeague(parseInt(value))} + > + + + + {ratingsInfo?.detail === undefined && + ratingsInfo?.leagues.map(({ index, title }) => ( + + {title} + + ))} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/src/constants/regions.ts b/src/constants/regions.ts index ee4b04781..d6e088235 100644 --- a/src/constants/regions.ts +++ b/src/constants/regions.ts @@ -1,4 +1,6 @@ -export type Region = 'com' | 'eu' | 'asia'; +export const REGIONS = ['com', 'eu', 'asia'] as const; + +export type Region = (typeof REGIONS)[number]; export type RegionSubdomain = 'na' | 'eu' | 'asia'; export const REGION_NAMES: Record = { diff --git a/src/core/blitz/getLatestArchivedSeasonNumber.ts b/src/core/blitz/getLatestArchivedSeasonNumber.ts new file mode 100644 index 000000000..40cf7deac --- /dev/null +++ b/src/core/blitz/getLatestArchivedSeasonNumber.ts @@ -0,0 +1,8 @@ +/** + * The first every season that Blitzkrieg tracked :) + */ +export const FIRST_ARCHIVED_RATINGS_SEASON = 49; + +export async function getLatestArchivedSeasonNumber() { + return 51; +} diff --git a/src/stores/ratings.ts b/src/stores/ratings.ts index 6a9a1fc21..4fb2f3f35 100644 --- a/src/stores/ratings.ts +++ b/src/stores/ratings.ts @@ -2,26 +2,18 @@ import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { Region } from '../constants/regions'; -export type RatingsType = 'neighbors' | 'league'; - interface Ratings { - type: RatingsType; /** * When null, the current season is used unless there ain't one in which case * we do whatever lol */ - season: number | null; region: Region; - league: number; } export const useRatings = create()( devtools( persist( (set) => ({ - type: 'league', - season: null, - league: 0, region: 'com', }), {