From ef173758aabc1d457390005f742f8634d08a13d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sun, 12 Oct 2025 22:48:14 -0500 Subject: [PATCH] feat: better landing screen --- packages/i18n/strings/en.json | 1 + .../src/components/PlaylistFilters.tsx | 86 ------------- .../src/components/PlaylistGenerator.tsx | 116 +++++++++++++++--- .../website/src/components/PlaylistOrder.tsx | 16 ++- .../src/pages/[...locale]/playlist/_index.tsx | 6 +- 5 files changed, 113 insertions(+), 112 deletions(-) delete mode 100644 packages/website/src/components/PlaylistFilters.tsx diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index 9a7815e7c..515686ada 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -860,6 +860,7 @@ "tools": { "playlist": { + "clear": "Clear", "table": { "tank": "Tank" }, diff --git a/packages/website/src/components/PlaylistFilters.tsx b/packages/website/src/components/PlaylistFilters.tsx deleted file mode 100644 index 5f8e83fb6..000000000 --- a/packages/website/src/components/PlaylistFilters.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { tankIcon } from "@blitzkit/core"; -import { literals } from "@blitzkit/i18n"; -import { Box, Flex, Grid, Text } from "@radix-ui/themes"; -import { useMemo } from "react"; -import usePromise from "react-promise-suspense"; -import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions"; -import { filterTanks } from "../core/blitzkit/filterTanks"; -import { useLocale } from "../hooks/useLocale"; -import { TankFilters } from "../stores/tankFilters"; -import { LinkI18n } from "./LinkI18n"; -import { FilterControl } from "./TankSearch/components/FilterControl"; - -const tankDefinitions = await awaitableTankDefinitions; - -export function PlaylistPool() { - const { strings, locale } = useLocale(); - const filters = TankFilters.use(); - const randomTankList = useMemo(() => { - const list = Object.values(tankDefinitions.tanks); - - for (let i = list.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * (i + 1)); - [list[i], list[j]] = [list[j], list[i]]; - } - - return list; - }, [filters]); - const tanks = usePromise( - () => filterTanks(filters, randomTankList), - // react-promise-suspense has awful type annotations - [filters] as any - ); - const tanksTrimmed = useMemo(() => tanks.slice(0, 48), [filters]); - - return ( - - - - - {literals(strings.website.tools.playlist.pool_size, { - count: tanks.length, - })} - - - - - {tanksTrimmed.map((tank) => ( - - ))} - - - - - - ); -} diff --git a/packages/website/src/components/PlaylistGenerator.tsx b/packages/website/src/components/PlaylistGenerator.tsx index e8a968c1d..f93525756 100644 --- a/packages/website/src/components/PlaylistGenerator.tsx +++ b/packages/website/src/components/PlaylistGenerator.tsx @@ -1,34 +1,112 @@ +import { tankIcon } from "@blitzkit/core"; +import { literals } from "@blitzkit/i18n"; import { ExclamationTriangleIcon } from "@radix-ui/react-icons"; -import { Button, Flex, Text } from "@radix-ui/themes"; +import { Box, Button, Flex, Grid, Text } from "@radix-ui/themes"; +import { useMemo } from "react"; +import usePromise from "react-promise-suspense"; +import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions"; +import { filterTanks } from "../core/blitzkit/filterTanks"; import { generatePlaylist } from "../core/blitzkit/generatePlaylist"; import { useLocale } from "../hooks/useLocale"; import { App } from "../stores/app"; +import { TankFilters } from "../stores/tankFilters"; +import { LinkI18n } from "./LinkI18n"; +import { FilterControl } from "./TankSearch/components/FilterControl"; + +const tankDefinitions = await awaitableTankDefinitions; + +const POOL_HEIGHT = "16rem"; export function PlaylistGenerator() { - const { strings } = useLocale(); + const { strings, locale } = useLocale(); const wargaming = App.use((state) => state.logins.wargaming); + const filters = TankFilters.use(); + const randomTankList = useMemo(() => { + const list = Object.values(tankDefinitions.tanks); + + for (let i = list.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [list[i], list[j]] = [list[j], list[i]]; + } + + return list; + }, [filters]); + const tanks = usePromise( + () => filterTanks(filters, randomTankList, wargaming?.id), + // react-promise-suspense has awful type annotations + [filters] as any + ); + const tanksTrimmed = useMemo(() => tanks.slice(0, 65), [filters]); return ( - - + + + + + + + {!wargaming && ( + + + + {strings.website.tools.playlist.no_login_warning} + + + )} + + + + + {tanksTrimmed.map((tank) => ( + + ))} + + + - {!wargaming && ( - - - {strings.website.tools.playlist.no_login_warning} - + {literals(strings.website.tools.playlist.pool_size, { + count: tanks.length, + })} - )} + ); } diff --git a/packages/website/src/components/PlaylistOrder.tsx b/packages/website/src/components/PlaylistOrder.tsx index e1439384f..1d02e022f 100644 --- a/packages/website/src/components/PlaylistOrder.tsx +++ b/packages/website/src/components/PlaylistOrder.tsx @@ -1,16 +1,26 @@ -import { Checkbox, Flex, Table } from "@radix-ui/themes"; +import { Button, Checkbox, Flex, Table } from "@radix-ui/themes"; import { useLocale } from "../hooks/useLocale"; import { Playlist } from "../stores/playlist"; import { TankRowHeaderCell } from "./TankRowHeaderCell"; export function PlaylistOrder() { - const { unwrap, strings } = useLocale(); + const { strings } = useLocale(); const list = Playlist.use((state) => state.list); if (!list) return null; return ( - + + + diff --git a/packages/website/src/pages/[...locale]/playlist/_index.tsx b/packages/website/src/pages/[...locale]/playlist/_index.tsx index ce45efe53..499528bdb 100644 --- a/packages/website/src/pages/[...locale]/playlist/_index.tsx +++ b/packages/website/src/pages/[...locale]/playlist/_index.tsx @@ -1,8 +1,7 @@ import { useEffect } from "react"; import { PageWrapper } from "../../../components/PageWrapper"; -import { PlaylistPool } from "../../../components/PlaylistFilters"; import { PlaylistGenerator } from "../../../components/PlaylistGenerator"; -import { PlaylistOrder } from "../../../components/PLaylistOrder"; +import { PlaylistOrder } from "../../../components/PlaylistOrder"; import { LocaleProvider } from "../../../hooks/useLocale"; import { App } from "../../../stores/app"; import { Playlist } from "../../../stores/playlist"; @@ -30,8 +29,7 @@ export function Page({ return ( - - + {!list && } {list && }