diff --git a/packages/website/src/components/PlaylistOrder.tsx b/packages/website/src/components/PlaylistOrder.tsx
index 1d02e022f..37519dd3e 100644
--- a/packages/website/src/components/PlaylistOrder.tsx
+++ b/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() {
{strings.website.tools.playlist.table.tank}
+
- {list.map(({ tank }) => (
-
-
- 0.5} />
+ {list.map(({ tank, checked }, index) => (
+
+ {
+ Playlist.mutate((draft) => {
+ draft.list![index].checked = !checked;
+ });
+ }}
+ >
+
+
+
+
+ {
+ Playlist.mutate((draft) => {
+ draft.list!.splice(index, 1);
+ });
+ }}
+ style={{
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+ }}
+ >
+
+
+
+ {
+ const item = list[index];
+ Playlist.mutate((draft) => {
+ draft.list!.splice(index, 1);
+ draft.list!.push(item);
+ });
+ }}
+ >
+
+
+
+ {
+ const item = list[index];
+ Playlist.mutate((draft) => {
+ draft.list!.splice(index, 1);
+ draft.list!.unshift(item);
+ });
+ }}
+ >
+
+
+
+ {
+ const item = list[index];
+ Playlist.mutate((draft) => {
+ const newIndex = index + 1;
+ draft.list!.splice(index, 1);
+ draft.list!.splice(newIndex, 0, item);
+ });
+ }}
+ >
+
+
+
+ {
+ 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,
+ }}
+ >
+
+
+
+
))}
diff --git a/packages/website/src/core/blitzkit/generatePlaylist.ts b/packages/website/src/core/blitzkit/generatePlaylist.ts
index b47235906..0a3ddf209 100644
--- a/packages/website/src/core/blitzkit/generatePlaylist.ts
+++ b/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 = {};
diff --git a/packages/website/src/stores/playlist.ts b/packages/website/src/stores/playlist.ts
index 2084e15e7..387545808 100644
--- a/packages/website/src/stores/playlist.ts
+++ b/packages/website/src/stores/playlist.ts
@@ -7,6 +7,7 @@ export interface Playlist {
tank: TankDefinition;
battles?: number;
wins?: number;
+ checked: boolean;
}[];
}