feat: playlist table

packages/website/src/components/PlaylistFilters.tsx

@@ -7,12 +7,13 @@ 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 } = useLocale();
+  const { strings, locale } = useLocale();
   const filters = TankFilters.use();
   const randomTankList = useMemo(() => {
     const list = Object.values(tankDefinitions.tanks);
@@ -52,7 +53,10 @@ export function PlaylistPool() {
           width="100%"
         >
           {tanksTrimmed.map((tank) => (
-            <Box
+            <LinkI18n
+              target="_blank"
+              locale={locale}
+              href={`/tanks/${tank.slug}`}
               key={tank.id}
               style={{
                 aspectRatio: "4 / 3",
@@ -72,8 +76,8 @@ export function PlaylistPool() {
           width="100%"
           height="100%"
           style={{
-            background:
-              "linear-gradient(transparent, var(--gray-1) calc(100% - 2rem))",
+            background: "linear-gradient(transparent, var(--gray-1))",
+            pointerEvents: "none",
           }}
         />
       </Box>

packages/website/src/components/PlaylistGenerator.tsx

@@ -0,0 +1,34 @@
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { Button, Flex, Text } from "@radix-ui/themes";
+import { generatePlaylist } from "../core/blitzkit/generatePlaylist";
+import { useLocale } from "../hooks/useLocale";
+import { App } from "../stores/app";
+
+export function PlaylistGenerator() {
+  const { strings } = useLocale();
+  const wargaming = App.use((state) => state.logins.wargaming);
+
+  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>
+
+      {!wargaming && (
+        <Text color="gray">
+          <Flex align="center" gap="1">
+            <ExclamationTriangleIcon />
+            {strings.website.tools.playlist.no_login_warning}
+          </Flex>
+        </Text>
+      )}
+    </Flex>
+  );
+}

packages/website/src/components/PlaylistOrder.tsx

@@ -0,0 +1,38 @@
+import { 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 list = Playlist.use((state) => state.list);
+
+  if (!list) return null;
+
+  return (
+    <Flex justify="center" flexGrow="1" flexBasis="0">
+      <Table.Root variant="surface">
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell />
+            <Table.ColumnHeaderCell>
+              {strings.website.tools.playlist.table.tank}
+            </Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {list.map(({ tank }) => (
+            <Table.Row>
+              <Table.Cell>
+                <Checkbox variant="classic" checked={Math.random() > 0.5} />
+              </Table.Cell>
+
+              <TankRowHeaderCell tank={tank} />
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Flex>
+  );
+}