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; }[]; }