diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index 1b7b3c9d3..35dce2336 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -860,12 +860,16 @@ "tools": { "playlist": { - "clear": "Clear", + "reset": "Reset", + "shuffle": "Shuffle", + "sort": "Sort by", + "table": { "index": "#", "never": "Never", "tank": "Tank", - "last_played": "Last played" + "last_played": "Last played", + "battles": "Battles" }, "no_login_warning": "You are not logged in. BlitzKit will not keep track of your played tanks.", "generate": "Generate playlist", diff --git a/packages/website/src/components/PlaylistActions.tsx b/packages/website/src/components/PlaylistActions.tsx new file mode 100644 index 000000000..12fc319e9 --- /dev/null +++ b/packages/website/src/components/PlaylistActions.tsx @@ -0,0 +1,33 @@ +import { CaretDownIcon } from "@radix-ui/react-icons"; +import { Button, Flex } from "@radix-ui/themes"; +import { useLocale } from "../hooks/useLocale"; +import { Playlist } from "../stores/playlist"; + +export function PlaylistActions() { + const { strings } = useLocale(); + + return ( + + + + + + + + ); +} diff --git a/packages/website/src/components/PlaylistOrder.tsx b/packages/website/src/components/PlaylistOrder.tsx index 514e9d206..d90448881 100644 --- a/packages/website/src/components/PlaylistOrder.tsx +++ b/packages/website/src/components/PlaylistOrder.tsx @@ -1,11 +1,10 @@ -import { Box, Button, Flex } from "@radix-ui/themes"; +import { Box, Flex } from "@radix-ui/themes"; import { useLocale } from "../hooks/useLocale"; -import { Playlist } from "../stores/playlist"; import { CurrentlyPlaying } from "./CurrentlyPlaying"; +import { PlaylistActions } from "./PlaylistActions"; import { PlaylistTable } from "./PlaylistTable"; export function PlaylistOrder() { - const { strings } = useLocale(); return ( - + diff --git a/packages/website/src/components/PlaylistTable.tsx b/packages/website/src/components/PlaylistTable.tsx index 92ed64efb..dcd91cd63 100644 --- a/packages/website/src/components/PlaylistTable.tsx +++ b/packages/website/src/components/PlaylistTable.tsx @@ -39,6 +39,10 @@ export function PlaylistTable() { {strings.website.tools.playlist.table.last_played} + + {strings.website.tools.playlist.table.battles} + + diff --git a/packages/website/src/components/PlaylistTankEntry.tsx b/packages/website/src/components/PlaylistTankEntry.tsx index 923adba00..ff59e54a0 100644 --- a/packages/website/src/components/PlaylistTankEntry.tsx +++ b/packages/website/src/components/PlaylistTankEntry.tsx @@ -8,7 +8,13 @@ interface Props extends PlaylistEntry { index: number; } -export function PlaylistTankEntry({ tank, checked, last, index }: Props) { +export function PlaylistTankEntry({ + tank, + checked, + last, + battles, + index, +}: Props) { const { locale, strings } = useLocale(); const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }); const nowDays = Date.now() / (1000 * 60 * 60 * 24); @@ -26,6 +32,8 @@ export function PlaylistTankEntry({ tank, checked, last, index }: Props) { : strings.website.tools.playlist.table.never} + {battles} + { Playlist.mutate((draft) => {