mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 12:09:51 +02:00
feat: reduce tanks per page for mobile
This commit is contained in:
TrèsAbhi committed
1 parent
ddb822054f
commit
02daeff583
2 files changed
+342
-337
No files matched your search
@@ -0,0 +1,337 @@
|
|||||||
|
import { CaretDownIcon } from '@radix-ui/react-icons';
|
||||||
|
import { Button, DropdownMenu } from '@radix-ui/themes';
|
||||||
|
import mutateTankopediaPersistent, {
|
||||||
|
TankopediaSortDirection,
|
||||||
|
useTankopediaPersistent,
|
||||||
|
} from '../../../../../../stores/tankopedia';
|
||||||
|
|
||||||
|
export function Sort() {
|
||||||
|
const sort = useTankopediaPersistent((state) => state.sort);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu.Root>
|
||||||
|
<DropdownMenu.Trigger>
|
||||||
|
<Button variant="soft" color="gray">
|
||||||
|
Sort
|
||||||
|
<CaretDownIcon />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content>
|
||||||
|
<DropdownMenu.Label>By</DropdownMenu.Label>
|
||||||
|
|
||||||
|
<DropdownMenu.Sub>
|
||||||
|
<DropdownMenu.SubTrigger>Meta</DropdownMenu.SubTrigger>
|
||||||
|
<DropdownMenu.SubContent>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'meta.tier'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'meta.tier';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tier
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'meta.name'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'meta.name';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
</DropdownMenu.SubContent>
|
||||||
|
</DropdownMenu.Sub>
|
||||||
|
|
||||||
|
<DropdownMenu.Sub>
|
||||||
|
<DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger>
|
||||||
|
<DropdownMenu.SubContent>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.dpm'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.dpm';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
DPM
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.reload'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.reload';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reload
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.caliber'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.caliber';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Caliber
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.standardPenetration'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.standardPenetration';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Standard penetration
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.premiumPenetration'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.premiumPenetration';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Premium penetration
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.damage'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.damage';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Damage
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.shellVelocity'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.shellVelocity';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Shell velocity
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.aimTime'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.aimTime';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Aim time
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.dispersionStill'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.dispersionStill';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Dispersion still
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.dispersionMoving'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.dispersionMoving';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Dispersion moving
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.gunDepression'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.gunDepression';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Gun depression
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'fire.gunElevation'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'fire.gunElevation';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Gun elevation
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
</DropdownMenu.SubContent>
|
||||||
|
</DropdownMenu.Sub>
|
||||||
|
|
||||||
|
<DropdownMenu.Sub>
|
||||||
|
<DropdownMenu.SubTrigger>Maneuverability</DropdownMenu.SubTrigger>
|
||||||
|
<DropdownMenu.SubContent>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'maneuverability.forwardsSpeed'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'maneuverability.forwardsSpeed';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Forwards speed
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'maneuverability.backwardsSpeed'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'maneuverability.backwardsSpeed';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Backwards speed
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'maneuverability.power'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'maneuverability.power';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Power
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'maneuverability.powerToWeight'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'maneuverability.powerToWeight';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Power to weight
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'maneuverability.weight'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'maneuverability.weight';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Weight
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'maneuverability.traverseSpeed'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'maneuverability.traverseSpeed';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Traverse speed
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
</DropdownMenu.SubContent>
|
||||||
|
</DropdownMenu.Sub>
|
||||||
|
|
||||||
|
<DropdownMenu.Sub>
|
||||||
|
<DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger>
|
||||||
|
<DropdownMenu.SubContent>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'survivability.health'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'survivability.health';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Health
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'survivability.viewRange'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'survivability.viewRange';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
View range
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'survivability.camouflageStill'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'survivability.camouflageStill';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Camouflage
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'survivability.camouflageMoving'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'survivability.camouflageMoving';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Camouflage moving
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'survivability.camouflageShooting'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'survivability.camouflageShooting';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Camouflage shooting
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'survivability.volume'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'survivability.volume';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Volume
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
<DropdownMenu.CheckboxItem
|
||||||
|
checked={sort.by === 'survivability.length'}
|
||||||
|
onClick={() => {
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.by = 'survivability.length';
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Length
|
||||||
|
</DropdownMenu.CheckboxItem>
|
||||||
|
</DropdownMenu.SubContent>
|
||||||
|
</DropdownMenu.Sub>
|
||||||
|
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
|
||||||
|
<DropdownMenu.Label>Direction</DropdownMenu.Label>
|
||||||
|
<DropdownMenu.RadioGroup
|
||||||
|
value={sort.direction}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
mutateTankopediaPersistent((draft) => {
|
||||||
|
draft.sort.direction = value as TankopediaSortDirection;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<DropdownMenu.RadioItem value="ascending">
|
||||||
|
Ascending
|
||||||
|
</DropdownMenu.RadioItem>
|
||||||
|
<DropdownMenu.RadioItem value="descending">
|
||||||
|
Descending
|
||||||
|
</DropdownMenu.RadioItem>
|
||||||
|
</DropdownMenu.RadioGroup>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,19 +1,12 @@
|
|||||||
import {
|
import {
|
||||||
CaretDownIcon,
|
|
||||||
CaretRightIcon,
|
CaretRightIcon,
|
||||||
MagnifyingGlassIcon,
|
MagnifyingGlassIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
} from '@radix-ui/react-icons';
|
} from '@radix-ui/react-icons';
|
||||||
import {
|
import { AlertDialog, Button, Flex, Text, TextField } from '@radix-ui/themes';
|
||||||
AlertDialog,
|
|
||||||
Button,
|
|
||||||
DropdownMenu,
|
|
||||||
Flex,
|
|
||||||
Text,
|
|
||||||
TextField,
|
|
||||||
} from '@radix-ui/themes';
|
|
||||||
import { go } from 'fuzzysort';
|
import { go } from 'fuzzysort';
|
||||||
import { use, useEffect, useMemo, useRef, useState } from 'react';
|
import { use, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { isMobileOnly } from 'react-device-detect';
|
||||||
import { TreeType } from '../../../../../components/Tanks';
|
import { TreeType } from '../../../../../components/Tanks';
|
||||||
import { TANK_CLASSES } from '../../../../../components/Tanks/components/Item/constants';
|
import { TANK_CLASSES } from '../../../../../components/Tanks/components/Item/constants';
|
||||||
import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
|
import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
|
||||||
@@ -29,12 +22,12 @@ import {
|
|||||||
import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
|
import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
|
||||||
import mutateTankopediaPersistent, {
|
import mutateTankopediaPersistent, {
|
||||||
SORT_NAMES,
|
SORT_NAMES,
|
||||||
TankopediaSortDirection,
|
|
||||||
useTankopediaPersistent,
|
useTankopediaPersistent,
|
||||||
} from '../../../../../stores/tankopedia';
|
} from '../../../../../stores/tankopedia';
|
||||||
import { PageTurner } from '../PageTurner';
|
import { PageTurner } from '../PageTurner';
|
||||||
import { Options } from './components/Options';
|
import { Options } from './components/Options';
|
||||||
import { Results } from './components/Results';
|
import { Results } from './components/Results';
|
||||||
|
import { Sort } from './components/Sort';
|
||||||
|
|
||||||
interface TankSearchProps {
|
interface TankSearchProps {
|
||||||
compact?: boolean;
|
compact?: boolean;
|
||||||
@@ -49,7 +42,7 @@ export function TankSearch({
|
|||||||
onSelect = () => {},
|
onSelect = () => {},
|
||||||
onSelectAll,
|
onSelectAll,
|
||||||
}: TankSearchProps) {
|
}: TankSearchProps) {
|
||||||
const tanksPerPage = compact ? 16 : 96;
|
const tanksPerPage = (compact ? 16 : 96) * (isMobileOnly ? 0.5 : 1);
|
||||||
const nations = use(NATIONS);
|
const nations = use(NATIONS);
|
||||||
const filters = useTankopediaPersistent((state) => state.filters);
|
const filters = useTankopediaPersistent((state) => state.filters);
|
||||||
const sort = useTankopediaPersistent((state) => state.sort);
|
const sort = useTankopediaPersistent((state) => state.sort);
|
||||||
@@ -451,332 +444,7 @@ export function TankSearch({
|
|||||||
)}
|
)}
|
||||||
</TextField.Root>
|
</TextField.Root>
|
||||||
|
|
||||||
<DropdownMenu.Root>
|
<Sort />
|
||||||
<DropdownMenu.Trigger>
|
|
||||||
<Button variant="soft" color="gray">
|
|
||||||
Sort
|
|
||||||
<CaretDownIcon />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
<DropdownMenu.Content>
|
|
||||||
<DropdownMenu.Label>By</DropdownMenu.Label>
|
|
||||||
|
|
||||||
<DropdownMenu.Sub>
|
|
||||||
<DropdownMenu.SubTrigger>Meta</DropdownMenu.SubTrigger>
|
|
||||||
<DropdownMenu.SubContent>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'meta.tier'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'meta.tier';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Tier
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'meta.name'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'meta.name';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Name
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
</DropdownMenu.SubContent>
|
|
||||||
</DropdownMenu.Sub>
|
|
||||||
|
|
||||||
<DropdownMenu.Sub>
|
|
||||||
<DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger>
|
|
||||||
<DropdownMenu.SubContent>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.dpm'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.dpm';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
DPM
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.reload'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.reload';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Reload
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.caliber'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.caliber';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Caliber
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.standardPenetration'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.standardPenetration';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Standard penetration
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.premiumPenetration'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.premiumPenetration';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Premium penetration
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.damage'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.damage';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Damage
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.shellVelocity'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.shellVelocity';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Shell velocity
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.aimTime'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.aimTime';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Aim time
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.dispersionStill'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.dispersionStill';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Dispersion still
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.dispersionMoving'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.dispersionMoving';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Dispersion moving
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.gunDepression'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.gunDepression';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Gun depression
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'fire.gunElevation'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'fire.gunElevation';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Gun elevation
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
</DropdownMenu.SubContent>
|
|
||||||
</DropdownMenu.Sub>
|
|
||||||
|
|
||||||
<DropdownMenu.Sub>
|
|
||||||
<DropdownMenu.SubTrigger>
|
|
||||||
Maneuverability
|
|
||||||
</DropdownMenu.SubTrigger>
|
|
||||||
<DropdownMenu.SubContent>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'maneuverability.forwardsSpeed'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'maneuverability.forwardsSpeed';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Forwards speed
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'maneuverability.backwardsSpeed'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'maneuverability.backwardsSpeed';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Backwards speed
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'maneuverability.power'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'maneuverability.power';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Power
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'maneuverability.powerToWeight'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'maneuverability.powerToWeight';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Power to weight
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'maneuverability.weight'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'maneuverability.weight';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Weight
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'maneuverability.traverseSpeed'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'maneuverability.traverseSpeed';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Traverse speed
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
</DropdownMenu.SubContent>
|
|
||||||
</DropdownMenu.Sub>
|
|
||||||
|
|
||||||
<DropdownMenu.Sub>
|
|
||||||
<DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger>
|
|
||||||
<DropdownMenu.SubContent>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'survivability.health'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'survivability.health';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Health
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'survivability.viewRange'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'survivability.viewRange';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
View range
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'survivability.camouflageStill'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'survivability.camouflageStill';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Camouflage
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'survivability.camouflageMoving'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'survivability.camouflageMoving';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Camouflage moving
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'survivability.camouflageShooting'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'survivability.camouflageShooting';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Camouflage shooting
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'survivability.volume'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'survivability.volume';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Volume
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
<DropdownMenu.CheckboxItem
|
|
||||||
checked={sort.by === 'survivability.length'}
|
|
||||||
onClick={() => {
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.by = 'survivability.length';
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Length
|
|
||||||
</DropdownMenu.CheckboxItem>
|
|
||||||
</DropdownMenu.SubContent>
|
|
||||||
</DropdownMenu.Sub>
|
|
||||||
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
|
|
||||||
<DropdownMenu.Label>Direction</DropdownMenu.Label>
|
|
||||||
<DropdownMenu.RadioGroup
|
|
||||||
value={sort.direction}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
mutateTankopediaPersistent((draft) => {
|
|
||||||
draft.sort.direction = value as TankopediaSortDirection;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<DropdownMenu.RadioItem value="ascending">
|
|
||||||
Ascending
|
|
||||||
</DropdownMenu.RadioItem>
|
|
||||||
<DropdownMenu.RadioItem value="descending">
|
|
||||||
Descending
|
|
||||||
</DropdownMenu.RadioItem>
|
|
||||||
</DropdownMenu.RadioGroup>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
color="red"
|
color="red"
|
||||||
|
|||||||
Reference in new issue
Block a user