feat: better landing screen

packages/i18n/strings/en.json

@@ -860,6 +860,7 @@
 
     "tools": {
       "playlist": {
+        "clear": "Clear",
         "table": {
           "tank": "Tank"
         },

packages/website/src/components/PlaylistFilters.tsx

@@ -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 (
-    <Flex direction="column" gap="4" align="center">
-      <FilterControl />
-
-      <Text color="gray">
-        {literals(strings.website.tools.playlist.pool_size, {
-          count: tanks.length,
-        })}
-      </Text>
-
-      <Box position="relative" height="100%" width="100%" overflow="hidden">
-        <Grid
-          columns="repeat(auto-fill, minmax(4rem, 1fr))"
-          flow="dense"
-          overflow="hidden"
-          position="absolute"
-          top="0"
-          left="0"
-          width="100%"
-        >
-          {tanksTrimmed.map((tank) => (
-            <LinkI18n
-              target="_blank"
-              locale={locale}
-              href={`/tanks/${tank.slug}`}
-              key={tank.id}
-              style={{
-                aspectRatio: "4 / 3",
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundImage: `url(${tankIcon(tank.id)})`,
-                backgroundRepeat: "no-repeat",
-              }}
-            />
-          ))}
-        </Grid>
-
-        <Box
-          position="absolute"
-          top="0"
-          left="0"
-          width="100%"
-          height="100%"
-          style={{
-            background: "linear-gradient(transparent, var(--gray-1))",
-            pointerEvents: "none",
-          }}
-        />
-      </Box>
-    </Flex>
-  );
-}

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 (
-    <Flex
-      flexGrow="1"
-      flexBasis="1"
-      direction="column"
-      align="center"
-      justify="center"
-      gap="4"
-    >
-      <Button onClick={generatePlaylist} size="3">
-        {strings.website.tools.playlist.generate}
-      </Button>
+    <Flex justify="center" width="100%" gap="9" align="center">
+      <Flex direction="column" gap="4" align="center">
+        <FilterControl />
+
+        <Button onClick={generatePlaylist} size="3">
+          {strings.website.tools.playlist.generate}
+        </Button>
+
+        {!wargaming && (
+          <Text color="gray">
+            <Flex align="center" gap="1">
+              <ExclamationTriangleIcon />
+              {strings.website.tools.playlist.no_login_warning}
+            </Flex>
+          </Text>
+        )}
+      </Flex>
+
+      <Flex
+        direction="column"
+        flexGrow="1"
+        flexBasis="0"
+        align="center"
+        gap="4"
+      >
+        <Grid
+          columns="repeat(auto-fill, minmax(4rem, 1fr))"
+          flow="dense"
+          overflow="hidden"
+          position="relative"
+          maxHeight={POOL_HEIGHT}
+          width="100%"
+        >
+          {tanksTrimmed.map((tank) => (
+            <LinkI18n
+              target="_blank"
+              locale={locale}
+              href={`/tanks/${tank.slug}`}
+              key={tank.id}
+              style={{
+                aspectRatio: "4 / 3",
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+                backgroundImage: `url(${tankIcon(tank.id)})`,
+                backgroundRepeat: "no-repeat",
+              }}
+            />
+          ))}
+
+          <Box
+            position="absolute"
+            top="0"
+            left="0"
+            width="100%"
+            height="100%"
+            style={{
+              pointerEvents: "none",
+              background: `linear-gradient(transparent, var(--gray-1) ${POOL_HEIGHT})`,
+            }}
+          />
+        </Grid>
 
-      {!wargaming && (
         <Text color="gray">
-          <Flex align="center" gap="1">
-            <ExclamationTriangleIcon />
-            {strings.website.tools.playlist.no_login_warning}
-          </Flex>
+          {literals(strings.website.tools.playlist.pool_size, {
+            count: tanks.length,
+          })}
         </Text>
-      )}
+      </Flex>
     </Flex>
   );
 }

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 (
-    <Flex justify="center" flexGrow="1" flexBasis="0">
+    <Flex direction="column" gap="4" align="center" flexGrow="1" flexBasis="0">
+      <Button
+        onClick={() => {
+          Playlist.mutate((draft) => {
+            draft.list = undefined;
+          });
+        }}
+      >
+        {strings.website.tools.playlist.clear}
+      </Button>
+
       <Table.Root variant="surface">
         <Table.Header>
           <Table.Row>

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 (
     <LocaleProvider locale={locale}>
-      <PageWrapper color="tomato" direction="row" maxWidth="100rem">
-        <PlaylistPool />
+      <PageWrapper color="tomato" direction="row">
         {!list && <PlaylistGenerator />}
         {list && <PlaylistOrder />}
       </PageWrapper>