From 02daeff58353c47b8d6c71714a4a52e510fea745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 23 May 2024 13:29:39 -0500
Subject: [PATCH] feat: reduce tanks per page for mobile
---
.../components/TankSearch/components/Sort.tsx | 337 +++++++++++++++++
.../components/TankSearch/index.tsx | 342 +-----------------
2 files changed, 342 insertions(+), 337 deletions(-)
create mode 100644 src/app/tools/tankopedia/components/TankSearch/components/Sort.tsx
diff --git a/src/app/tools/tankopedia/components/TankSearch/components/Sort.tsx b/src/app/tools/tankopedia/components/TankSearch/components/Sort.tsx
new file mode 100644
index 000000000..a2a43dc3c
--- /dev/null
+++ b/src/app/tools/tankopedia/components/TankSearch/components/Sort.tsx
@@ -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 (
+
+
+
+
+
+ By
+
+
+ Meta
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'meta.tier';
+ });
+ }}
+ >
+ Tier
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'meta.name';
+ });
+ }}
+ >
+ Name
+
+
+
+
+
+ Fire
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.dpm';
+ });
+ }}
+ >
+ DPM
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.reload';
+ });
+ }}
+ >
+ Reload
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.caliber';
+ });
+ }}
+ >
+ Caliber
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.standardPenetration';
+ });
+ }}
+ >
+ Standard penetration
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.premiumPenetration';
+ });
+ }}
+ >
+ Premium penetration
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.damage';
+ });
+ }}
+ >
+ Damage
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.shellVelocity';
+ });
+ }}
+ >
+ Shell velocity
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.aimTime';
+ });
+ }}
+ >
+ Aim time
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.dispersionStill';
+ });
+ }}
+ >
+ Dispersion still
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.dispersionMoving';
+ });
+ }}
+ >
+ Dispersion moving
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.gunDepression';
+ });
+ }}
+ >
+ Gun depression
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'fire.gunElevation';
+ });
+ }}
+ >
+ Gun elevation
+
+
+
+
+
+ Maneuverability
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'maneuverability.forwardsSpeed';
+ });
+ }}
+ >
+ Forwards speed
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'maneuverability.backwardsSpeed';
+ });
+ }}
+ >
+ Backwards speed
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'maneuverability.power';
+ });
+ }}
+ >
+ Power
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'maneuverability.powerToWeight';
+ });
+ }}
+ >
+ Power to weight
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'maneuverability.weight';
+ });
+ }}
+ >
+ Weight
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'maneuverability.traverseSpeed';
+ });
+ }}
+ >
+ Traverse speed
+
+
+
+
+
+ Survivability
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'survivability.health';
+ });
+ }}
+ >
+ Health
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'survivability.viewRange';
+ });
+ }}
+ >
+ View range
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'survivability.camouflageStill';
+ });
+ }}
+ >
+ Camouflage
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'survivability.camouflageMoving';
+ });
+ }}
+ >
+ Camouflage moving
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'survivability.camouflageShooting';
+ });
+ }}
+ >
+ Camouflage shooting
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'survivability.volume';
+ });
+ }}
+ >
+ Volume
+
+ {
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.by = 'survivability.length';
+ });
+ }}
+ >
+ Length
+
+
+
+
+
+
+ Direction
+
+ mutateTankopediaPersistent((draft) => {
+ draft.sort.direction = value as TankopediaSortDirection;
+ })
+ }
+ >
+
+ Ascending
+
+
+ Descending
+
+
+
+
+ );
+}
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 7fbae5d7c..7e349f28c 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -1,19 +1,12 @@
import {
- CaretDownIcon,
CaretRightIcon,
MagnifyingGlassIcon,
TrashIcon,
} from '@radix-ui/react-icons';
-import {
- AlertDialog,
- Button,
- DropdownMenu,
- Flex,
- Text,
- TextField,
-} from '@radix-ui/themes';
+import { AlertDialog, Button, Flex, Text, TextField } from '@radix-ui/themes';
import { go } from 'fuzzysort';
import { use, useEffect, useMemo, useRef, useState } from 'react';
+import { isMobileOnly } from 'react-device-detect';
import { TreeType } from '../../../../../components/Tanks';
import { TANK_CLASSES } from '../../../../../components/Tanks/components/Item/constants';
import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
@@ -29,12 +22,12 @@ import {
import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
import mutateTankopediaPersistent, {
SORT_NAMES,
- TankopediaSortDirection,
useTankopediaPersistent,
} from '../../../../../stores/tankopedia';
import { PageTurner } from '../PageTurner';
import { Options } from './components/Options';
import { Results } from './components/Results';
+import { Sort } from './components/Sort';
interface TankSearchProps {
compact?: boolean;
@@ -49,7 +42,7 @@ export function TankSearch({
onSelect = () => {},
onSelectAll,
}: TankSearchProps) {
- const tanksPerPage = compact ? 16 : 96;
+ const tanksPerPage = (compact ? 16 : 96) * (isMobileOnly ? 0.5 : 1);
const nations = use(NATIONS);
const filters = useTankopediaPersistent((state) => state.filters);
const sort = useTankopediaPersistent((state) => state.sort);
@@ -451,332 +444,7 @@ export function TankSearch({
)}
-
-
-
-
-
- By
-
-
- Meta
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'meta.tier';
- });
- }}
- >
- Tier
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'meta.name';
- });
- }}
- >
- Name
-
-
-
-
-
- Fire
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.dpm';
- });
- }}
- >
- DPM
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.reload';
- });
- }}
- >
- Reload
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.caliber';
- });
- }}
- >
- Caliber
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.standardPenetration';
- });
- }}
- >
- Standard penetration
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.premiumPenetration';
- });
- }}
- >
- Premium penetration
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.damage';
- });
- }}
- >
- Damage
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.shellVelocity';
- });
- }}
- >
- Shell velocity
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.aimTime';
- });
- }}
- >
- Aim time
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.dispersionStill';
- });
- }}
- >
- Dispersion still
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.dispersionMoving';
- });
- }}
- >
- Dispersion moving
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.gunDepression';
- });
- }}
- >
- Gun depression
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'fire.gunElevation';
- });
- }}
- >
- Gun elevation
-
-
-
-
-
-
- Maneuverability
-
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'maneuverability.forwardsSpeed';
- });
- }}
- >
- Forwards speed
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'maneuverability.backwardsSpeed';
- });
- }}
- >
- Backwards speed
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'maneuverability.power';
- });
- }}
- >
- Power
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'maneuverability.powerToWeight';
- });
- }}
- >
- Power to weight
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'maneuverability.weight';
- });
- }}
- >
- Weight
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'maneuverability.traverseSpeed';
- });
- }}
- >
- Traverse speed
-
-
-
-
-
- Survivability
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'survivability.health';
- });
- }}
- >
- Health
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'survivability.viewRange';
- });
- }}
- >
- View range
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'survivability.camouflageStill';
- });
- }}
- >
- Camouflage
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'survivability.camouflageMoving';
- });
- }}
- >
- Camouflage moving
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'survivability.camouflageShooting';
- });
- }}
- >
- Camouflage shooting
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'survivability.volume';
- });
- }}
- >
- Volume
-
- {
- mutateTankopediaPersistent((draft) => {
- draft.sort.by = 'survivability.length';
- });
- }}
- >
- Length
-
-
-
-
-
-
- Direction
-
- mutateTankopediaPersistent((draft) => {
- draft.sort.direction = value as TankopediaSortDirection;
- })
- }
- >
-
- Ascending
-
-
- Descending
-
-
-
-
+