feat: action button

packages/website/src/components/PlaylistOrder.tsx

@@ -1,4 +1,17 @@
-import { Button, Checkbox, Flex, Table } from "@radix-ui/themes";
+import {
+  ChevronUpIcon,
+  DoubleArrowDownIcon,
+  DoubleArrowUpIcon,
+  MinusCircledIcon,
+} from "@radix-ui/react-icons";
+import {
+  Button,
+  Checkbox,
+  ChevronDownIcon,
+  Flex,
+  IconButton,
+  Table,
+} from "@radix-ui/themes";
 import { useLocale } from "../hooks/useLocale";
 import { Playlist } from "../stores/playlist";
 import { TankRowHeaderCell } from "./TankRowHeaderCell";
@@ -28,17 +41,120 @@ export function PlaylistOrder() {
             <Table.ColumnHeaderCell>
               {strings.website.tools.playlist.table.tank}
             </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell />
           </Table.Row>
         </Table.Header>
 
         <Table.Body>
-          {list.map(({ tank }) => (
-            <Table.Row>
-              <Table.Cell>
-                <Checkbox variant="classic" checked={Math.random() > 0.5} />
+          {list.map(({ tank, checked }, index) => (
+            <Table.Row key={tank.id}>
+              <Table.Cell
+                onClick={() => {
+                  Playlist.mutate((draft) => {
+                    draft.list![index].checked = !checked;
+                  });
+                }}
+              >
+                <Checkbox variant="classic" checked={checked} />
               </Table.Cell>
 
               <TankRowHeaderCell tank={tank} />
+
+              <Table.Cell>
+                <Flex align="center" height="100%" px="2" mb="-1">
+                  <IconButton
+                    variant="soft"
+                    size="1"
+                    onClick={() => {
+                      Playlist.mutate((draft) => {
+                        draft.list!.splice(index, 1);
+                      });
+                    }}
+                    style={{
+                      borderTopRightRadius: 0,
+                      borderBottomRightRadius: 0,
+                    }}
+                  >
+                    <MinusCircledIcon />
+                  </IconButton>
+
+                  <IconButton
+                    radius="none"
+                    disabled={index === list.length - 1}
+                    variant="soft"
+                    size="1"
+                    color="gray"
+                    highContrast
+                    onClick={() => {
+                      const item = list[index];
+                      Playlist.mutate((draft) => {
+                        draft.list!.splice(index, 1);
+                        draft.list!.push(item);
+                      });
+                    }}
+                  >
+                    <DoubleArrowDownIcon />
+                  </IconButton>
+
+                  <IconButton
+                    radius="none"
+                    disabled={index === 0}
+                    variant="soft"
+                    size="1"
+                    color="gray"
+                    onClick={() => {
+                      const item = list[index];
+                      Playlist.mutate((draft) => {
+                        draft.list!.splice(index, 1);
+                        draft.list!.unshift(item);
+                      });
+                    }}
+                  >
+                    <DoubleArrowUpIcon />
+                  </IconButton>
+
+                  <IconButton
+                    radius="none"
+                    disabled={index === list.length - 1}
+                    variant="soft"
+                    size="1"
+                    color="gray"
+                    highContrast
+                    onClick={() => {
+                      const item = list[index];
+                      Playlist.mutate((draft) => {
+                        const newIndex = index + 1;
+                        draft.list!.splice(index, 1);
+                        draft.list!.splice(newIndex, 0, item);
+                      });
+                    }}
+                  >
+                    <ChevronDownIcon />
+                  </IconButton>
+
+                  <IconButton
+                    disabled={index === 0}
+                    variant="soft"
+                    size="1"
+                    color="gray"
+                    highContrast
+                    onClick={() => {
+                      const item = list[index];
+                      Playlist.mutate((draft) => {
+                        const newIndex = index - 1;
+                        draft.list!.splice(index, 1);
+                        draft.list!.splice(newIndex, 0, item);
+                      });
+                    }}
+                    style={{
+                      borderTopLeftRadius: 0,
+                      borderBottomLeftRadius: 0,
+                    }}
+                  >
+                    <ChevronUpIcon />
+                  </IconButton>
+                </Flex>
+              </Table.Cell>
             </Table.Row>
           ))}
         </Table.Body>

packages/website/src/core/blitzkit/generatePlaylist.ts

@@ -14,7 +14,7 @@ const tanks = Object.values(tankDefinitions.tanks);
 
 export async function generatePlaylist() {
   const id = App.state.logins.wargaming?.id;
-  const filtered = await filterTanks(TankFilters.state, tanks);
+  const filtered = await filterTanks(TankFilters.state, tanks, id);
   const statsList = id ? await getTankStats(idToRegion(id), id) : undefined;
   const stats: Record<number, IndividualTankStats> = {};
 

packages/website/src/stores/playlist.ts

@@ -7,6 +7,7 @@ export interface Playlist {
     tank: TankDefinition;
     battles?: number;
     wins?: number;
+    checked: boolean;
   }[];
 }