feat: large warning

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",

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 { ChevronRightIcon } from "@radix-ui/react-icons";
-import { useMemo } from "react";
+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,6 +43,40 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
   const tanksTrimmed = useMemo(() => tanks.slice(0, 65), [filters]);
 
   return (
+    <>
+      <AlertDialog.Root
+        open={largeWarningOpen}
+        onOpenChange={setLargeWarningOpen}
+      >
+        <AlertDialog.Content>
+          <AlertDialog.Title>
+            {strings.website.tools.playlist.large_warning.title}
+          </AlertDialog.Title>
+          <AlertDialog.Description>
+            {literals(
+              strings.website.tools.playlist.large_warning.description,
+              {
+                count: tanks.length,
+                time: Math.round(tanks.length * ((2 * 4) / 60)),
+              }
+            )}
+          </AlertDialog.Description>
+
+          <Flex justify="end" gap="2" mt="4">
+            <AlertDialog.Cancel>
+              <Button variant="outline">
+                {strings.website.tools.playlist.large_warning.cancel}
+              </Button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action onClick={generatePlaylist}>
+              <Button color="red">
+                {strings.website.tools.playlist.large_warning.proceed}
+              </Button>
+            </AlertDialog.Action>
+          </Flex>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+
       <Flex justify="center" width="100%" align="center">
         <Flex
           flexGrow="1"
@@ -44,8 +88,18 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
           <Flex direction="column" gap="4" align="center">
             <FilterControl />
 
-          <Button onClick={generatePlaylist} size="3">
+            <Button
-            {strings.website.tools.playlist.generate}
+              onClick={() => {
+                if (tanks.length >= 32) {
+                  setLargeWarningOpen(true);
+                  return;
+                }
+
+                generatePlaylist();
+              }}
+              size="3"
+            >
+              {strings.website.tools.playlist.generate} <ChevronRightIcon />
             </Button>
           </Flex>
 
@@ -112,5 +166,6 @@ export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
           </Flex>
         </Flex>
       </Flex>
+    </>
   );
 }