diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index edb890560..a57a6a6ed 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -881,6 +881,13 @@ "wins": "Wins" }, + "large_warning": { + "title": "That's a lot of tanks!", + "description": "Are you sure you want to create a playlist of {count} tanks? That's {time} hours of gameplay at 50% winrate!", + "cancel": "Cancel", + "proceed": "Proceed" + }, + "generate": "Generate playlist", "name": "Playlist", "description": "Tank playlist generator", diff --git a/packages/website/src/components/PlaylistGenerator.tsx b/packages/website/src/components/PlaylistGenerator.tsx index c4c279102..f3cf8e965 100644 --- a/packages/website/src/components/PlaylistGenerator.tsx +++ b/packages/website/src/components/PlaylistGenerator.tsx @@ -1,7 +1,16 @@ import { fisherYates, tankIcon } from "@blitzkit/core"; import { literals } from "@blitzkit/i18n"; -import { Box, Button, Flex, Grid, Skeleton, Text } from "@radix-ui/themes"; -import { useMemo } from "react"; +import { ChevronRightIcon } from "@radix-ui/react-icons"; +import { + AlertDialog, + Box, + Button, + Flex, + Grid, + Skeleton, + Text, +} from "@radix-ui/themes"; +import { useMemo, useState } from "react"; import usePromise from "react-promise-suspense"; import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions"; import { filterTanks } from "../core/blitzkit/filterTanks"; @@ -18,6 +27,7 @@ const tankDefinitions = await awaitableTankDefinitions; const POOL_HEIGHT = "16rem"; export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) { + const [largeWarningOpen, setLargeWarningOpen] = useState(false); const { strings, locale } = useLocale(); const wargaming = App.use((state) => state.logins.wargaming); const filters = TankFilters.use(); @@ -33,84 +43,129 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) { const tanksTrimmed = useMemo(() => tanks.slice(0, 65), [filters]); return ( - - + - - - - - - - - - {tanksTrimmed.map((tank) => - skeleton ? ( - - - - ) : ( - - ) + + + {strings.website.tools.playlist.large_warning.title} + + + {literals( + strings.website.tools.playlist.large_warning.description, + { + count: tanks.length, + time: Math.round(tanks.length * ((2 * 4) / 60)), + } )} + - + + + + + + + + + + + + + + + + + - - {literals(strings.website.tools.playlist.pool_size, { - count: tanks.length, - })} - + + + {tanksTrimmed.map((tank) => + skeleton ? ( + + + + ) : ( + + ) + )} + + + + + + {literals(strings.website.tools.playlist.pool_size, { + count: tanks.length, + })} + + - + ); }