TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 03:59:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade TankFilters

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-09-01 19:13:08 -05:00
1 parent d287e66265
commit 6d24ed92d0
10 files changed
+475 -501
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/TankSearch/index.tsx
+111 -112
View File
@@ -5,37 +5,36 @@ import {
SEARCH_KEYS,
unionBoundingBox,
type TankDefinition,
} from '@blitzkit/core';
import { literals } from '@blitzkit/i18n/src/literals';
import { useStore } from '@nanostores/react';
import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
import fuzzysort from 'fuzzysort';
import { times, uniq } from 'lodash-es';
import { memo, useEffect, useMemo, useState } from 'react';
import { awaitableGameDefinitions } from '../../core/awaitables/gameDefinitions';
import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions';
import { awaitableTankDefinitions } from '../../core/awaitables/tankDefinitions';
import { awaitableTankNames } from '../../core/awaitables/tankNames';
import { filterTank } from '../../core/blitzkit/filterTank';
import { resolveReload } from '../../core/blitzkit/resolveReload';
import { useLocale } from '../../hooks/useLocale';
import { $tankFilters } from '../../stores/tankFilters';
import { TankopediaPersistent } from '../../stores/tankopediaPersistent';
import { SORT_UNITS } from '../../stores/tankopediaPersistent/constants';
import { TankSort } from '../../stores/tankopediaSort';
import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
import { ExperimentIcon } from '../ExperimentIcon';
import { TankSearchCard } from './components/Card';
import { FilterControl } from './components/FilterControl';
import { NoResults } from './components/NoResults';
import { RecentlyViewed } from './components/RecentlyViewed';
import { SearchBar } from './components/SearchBar';
import { SkeletonTankCard } from './components/SkeletonTankCard';
import { TankCardWrapper } from './components/TankCardWrapper';
import { MAX_RECENTLY_VIEWED } from './constants';
} from "@blitzkit/core";
import { literals } from "@blitzkit/i18n/src/literals";
import { Callout, Flex, Link, Text, type FlexProps } from "@radix-ui/themes";
import fuzzysort from "fuzzysort";
import { times, uniq } from "lodash-es";
import { memo, useEffect, useMemo, useState } from "react";
import { awaitableGameDefinitions } from "../../core/awaitables/gameDefinitions";
import { awaitableModelDefinitions } from "../../core/awaitables/modelDefinitions";
import { awaitableTankDefinitions } from "../../core/awaitables/tankDefinitions";
import { awaitableTankNames } from "../../core/awaitables/tankNames";
import { filterTank } from "../../core/blitzkit/filterTank";
import { resolveReload } from "../../core/blitzkit/resolveReload";
import { useLocale } from "../../hooks/useLocale";
import { TankFilters } from "../../stores/tankFilters";
import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
import { SORT_UNITS } from "../../stores/tankopediaPersistent/constants";
import { TankSort } from "../../stores/tankopediaSort";
import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
import { ExperimentIcon } from "../ExperimentIcon";
import { TankSearchCard } from "./components/Card";
import { FilterControl } from "./components/FilterControl";
import { NoResults } from "./components/NoResults";
import { RecentlyViewed } from "./components/RecentlyViewed";
import { SearchBar } from "./components/SearchBar";
import { SkeletonTankCard } from "./components/SkeletonTankCard";
import { TankCardWrapper } from "./components/TankCardWrapper";
import { MAX_RECENTLY_VIEWED } from "./constants";
type TankSearchProps = MaybeSkeletonComponentProps &
Omit<FlexProps, 'onSelect'> & {
Omit<FlexProps, "onSelect"> & {
compact?: boolean;
onSelect?: (tank: TankDefinition) => void;
onSelectAll?: (tanks: TankDefinition[]) => void;
@@ -57,21 +56,21 @@ export const TankSearch = memo<TankSearchProps>(
const { strings, locale } = useLocale();
const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
const tankFilters = useStore($tankFilters);
const tankopediaSort = TankSort.use();
const tankFilters = TankFilters.use();
const tanksFiltered = useMemo(() => {
if (tankFilters.search === null) {
const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
filterTank(tankFilters, tank),
filterTank(tankFilters, tank)
);
let sorted: TankDefinition[];
switch (tankopediaSort.by) {
case 'meta.none':
case "meta.none":
sorted = metaSortTank(filtered, gameDefinitions);
break;
case 'survivability.health': {
case "survivability.health": {
sorted = filtered.sort((a, b) => {
const aHealth = a.health + a.turrets.at(-1)!.health;
const bHealth = b.health + b.turrets.at(-1)!.health;
@@ -81,36 +80,36 @@ export const TankSearch = memo<TankSearchProps>(
break;
}
case 'survivability.viewRange':
case "survivability.viewRange":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.view_range - b.turrets.at(-1)!.view_range,
a.turrets.at(-1)!.view_range - b.turrets.at(-1)!.view_range
);
break;
case 'survivability.camouflageStill':
case "survivability.camouflageStill":
sorted = filtered.sort(
(a, b) => a.camouflage_still - b.camouflage_still,
(a, b) => a.camouflage_still - b.camouflage_still
);
break;
case 'survivability.camouflageMoving':
case "survivability.camouflageMoving":
sorted = filtered.sort(
(a, b) => a.camouflage_moving - b.camouflage_moving,
(a, b) => a.camouflage_moving - b.camouflage_moving
);
break;
case 'survivability.camouflageShooting':
case "survivability.camouflageShooting":
sorted = filtered.sort(
(a, b) =>
a.camouflage_still *
a.turrets.at(-1)!.guns.at(-1)!.camouflage_loss -
b.camouflage_still *
b.turrets.at(-1)!.guns.at(-1)!.camouflage_loss,
b.turrets.at(-1)!.guns.at(-1)!.camouflage_loss
);
break;
case 'survivability.volume':
case "survivability.volume":
sorted = filtered.sort((a, b) => {
const aTankModelDefinition = modelDefinitions.models[a.id];
const bTankModelDefinition = modelDefinitions.models[b.id];
@@ -121,14 +120,14 @@ export const TankSearch = memo<TankSearchProps>(
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.bounding_box,
aTurretModelDefinition.bounding_box,
),
aTurretModelDefinition.bounding_box
)
);
const bSize = normalizeBoundingBox(
unionBoundingBox(
bTankModelDefinition.bounding_box,
bTurretModelDefinition.bounding_box,
),
bTurretModelDefinition.bounding_box
)
);
const aVolume = aSize.x * aSize.y * aSize.z;
const bVolume = bSize.x * bSize.y * bSize.z;
@@ -137,7 +136,7 @@ export const TankSearch = memo<TankSearchProps>(
});
break;
case 'survivability.length':
case "survivability.length":
sorted = filtered.sort((a, b) => {
const aTankModelDefinition = modelDefinitions.models[a.id];
const bTankModelDefinition = modelDefinitions.models[b.id];
@@ -148,14 +147,14 @@ export const TankSearch = memo<TankSearchProps>(
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.bounding_box,
aTurretModelDefinition.bounding_box,
),
aTurretModelDefinition.bounding_box
)
);
const bSize = normalizeBoundingBox(
unionBoundingBox(
bTankModelDefinition.bounding_box,
bTurretModelDefinition.bounding_box,
),
bTurretModelDefinition.bounding_box
)
);
const aLength = Math.max(aSize.x, aSize.y, aSize.z);
const bLength = Math.max(bSize.x, bSize.y, bSize.z);
@@ -164,147 +163,147 @@ export const TankSearch = memo<TankSearchProps>(
});
break;
case 'fire.dpm':
case "fire.dpm":
sorted = filtered.sort(
(a, b) =>
resolveDpm(
a.turrets.at(-1)!.guns.at(-1)!,
a.turrets.at(-1)!.guns.at(-1)!.shells[0],
a.turrets.at(-1)!.guns.at(-1)!.shells[0]
) -
resolveDpm(
b.turrets.at(-1)!.guns.at(-1)!,
b.turrets.at(-1)!.guns.at(-1)!.shells[0],
),
b.turrets.at(-1)!.guns.at(-1)!.shells[0]
)
);
break;
case 'fire.dpmPremium':
case "fire.dpmPremium":
sorted = filtered.sort(
(a, b) =>
(a.turrets.at(-1)!.guns.at(-1)!.shells[1]
? resolveDpm(
a.turrets.at(-1)!.guns.at(-1)!,
a.turrets.at(-1)!.guns.at(-1)!.shells[1],
a.turrets.at(-1)!.guns.at(-1)!.shells[1]
)
: 0) -
(b.turrets.at(-1)!.guns.at(-1)!.shells[1]
? resolveDpm(
b.turrets.at(-1)!.guns.at(-1)!,
b.turrets.at(-1)!.guns.at(-1)!.shells[1],
b.turrets.at(-1)!.guns.at(-1)!.shells[1]
)
: 0),
: 0)
);
break;
case 'fire.reload':
case "fire.reload":
sorted = filtered.sort(
(a, b) =>
resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
resolveReload(b.turrets.at(-1)!.guns.at(-1)!)
);
break;
case 'fire.caliber':
case "fire.caliber":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber,
b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber
);
break;
case 'fire.standardPenetration':
case "fire.standardPenetration":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration.near -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration.near,
b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration.near
);
break;
case 'fire.premiumPenetration':
case "fire.premiumPenetration":
sorted = filtered.sort(
(a, b) =>
(a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration.near ??
0) -
(b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration.near ??
0),
0)
);
break;
case 'fire.tertiaryPenetration':
case "fire.tertiaryPenetration":
sorted = filtered.sort(
(a, b) =>
(a.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration.near ??
0) -
(b.turrets.at(-1)!.guns.at(-1)!.shells[2]?.penetration.near ??
0),
0)
);
break;
case 'fire.damage':
case "fire.damage":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage,
b.turrets.at(-1)!.guns.at(-1)!.shells[0].armor_damage
);
break;
case 'fire.moduleDamage':
case "fire.moduleDamage":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage,
b.turrets.at(-1)!.guns.at(-1)!.shells[0].module_damage
);
break;
case 'fire.shellVelocity':
case "fire.shellVelocity":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity,
b.turrets.at(-1)!.guns.at(-1)!.shells[0].velocity
);
break;
case 'fire.shellRange':
case "fire.shellRange":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].range -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].range,
b.turrets.at(-1)!.guns.at(-1)!.shells[0].range
);
break;
case 'fire.shellCapacity':
case "fire.shellCapacity":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shell_capacity -
b.turrets.at(-1)!.guns.at(-1)!.shell_capacity,
b.turrets.at(-1)!.guns.at(-1)!.shell_capacity
);
break;
case 'fire.aimTime':
case "fire.aimTime":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.aim_time -
b.turrets.at(-1)!.guns.at(-1)!.aim_time,
b.turrets.at(-1)!.guns.at(-1)!.aim_time
);
break;
case 'fire.dispersionStill':
case "fire.dispersionStill":
sorted = filtered.sort(
(a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.dispersion_base -
b.turrets.at(-1)!.guns.at(-1)!.dispersion_base,
b.turrets.at(-1)!.guns.at(-1)!.dispersion_base
);
break;
case 'fire.dispersionMoving':
case "fire.dispersionMoving":
sorted = filtered.sort(
(a, b) =>
a.tracks.at(-1)!.dispersion_move -
b.tracks.at(-1)!.dispersion_move,
b.tracks.at(-1)!.dispersion_move
);
break;
case 'fire.gunDepression':
case "fire.gunDepression":
sorted = filtered.sort(
(a, b) =>
modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
@@ -314,11 +313,11 @@ export const TankSearch = memo<TankSearchProps>(
modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
.guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch.max -
(modelDefinitions.models[b.id].initial_turret_rotation?.pitch ??
0),
0)
);
break;
case 'fire.gunElevation':
case "fire.gunElevation":
sorted = filtered.sort(
(a, b) =>
modelDefinitions.models[b.id].turrets[b.turrets.at(-1)!.id]
@@ -328,29 +327,29 @@ export const TankSearch = memo<TankSearchProps>(
modelDefinitions.models[a.id].turrets[a.turrets.at(-1)!.id]
.guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch.min -
(modelDefinitions.models[a.id].initial_turret_rotation?.pitch ??
0),
0)
);
break;
case 'maneuverability.forwardsSpeed':
case "maneuverability.forwardsSpeed":
sorted = filtered.sort(
(a, b) => a.speed_forwards - b.speed_forwards,
(a, b) => a.speed_forwards - b.speed_forwards
);
break;
case 'maneuverability.backwardsSpeed':
case "maneuverability.backwardsSpeed":
sorted = filtered.sort(
(a, b) => a.speed_backwards - b.speed_backwards,
(a, b) => a.speed_backwards - b.speed_backwards
);
break;
case 'maneuverability.power':
case "maneuverability.power":
sorted = filtered.sort(
(a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
(a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power
);
break;
case 'maneuverability.powerToWeight':
case "maneuverability.powerToWeight":
sorted = filtered.sort(
(a, b) =>
a.engines.at(-1)!.power /
@@ -364,11 +363,11 @@ export const TankSearch = memo<TankSearchProps>(
b.engines.at(-1)!.weight +
b.tracks.at(-1)!.weight +
b.turrets.at(-1)!.weight +
b.turrets.at(-1)!.guns.at(-1)!.weight),
b.turrets.at(-1)!.guns.at(-1)!.weight)
);
break;
case 'maneuverability.weight':
case "maneuverability.weight":
sorted = filtered.sort(
(a, b) =>
a.weight +
@@ -380,20 +379,20 @@ export const TankSearch = memo<TankSearchProps>(
b.engines.at(-1)!.weight +
b.tracks.at(-1)!.weight +
b.turrets.at(-1)!.weight +
b.turrets.at(-1)!.guns.at(-1)!.weight),
b.turrets.at(-1)!.guns.at(-1)!.weight)
);
break;
case 'maneuverability.traverseSpeed':
case "maneuverability.traverseSpeed":
sorted = filtered.sort(
(a, b) =>
a.tracks.at(-1)!.traverse_speed -
b.tracks.at(-1)!.traverse_speed,
b.tracks.at(-1)!.traverse_speed
);
break;
}
return tankopediaSort.direction === 'ascending'
return tankopediaSort.direction === "ascending"
? sorted
: sorted.reverse();
} else {
@@ -401,7 +400,7 @@ export const TankSearch = memo<TankSearchProps>(
keys: SEARCH_KEYS,
});
const searchedTanks = searchedRaw.map(
(result) => tankDefinitions.tanks[result.obj.id],
(result) => tankDefinitions.tanks[result.obj.id]
);
return searchedTanks;
}
@@ -459,24 +458,24 @@ export const TankSearch = memo<TankSearchProps>(
)}
</Flex>
{tankopediaSort.by !== 'meta.none' && (
{tankopediaSort.by !== "meta.none" && (
<Text color="gray">
{literals(strings.website.common.tank_search.sorting_by, [
strings.website.common.tank_search.sort[tankopediaSort.by],
])}
{SORT_UNITS[tankopediaSort.by] === undefined
? ''
? ""
: ` (${SORT_UNITS[tankopediaSort.by]})`}
, {tankopediaSort.direction}
</Text>
)}
</Flex>
{tankFilters.testing === 'only' && (
{tankFilters.testing === "only" && (
<Flex justify="center" mt="4">
<Callout.Root color="amber">
<Callout.Icon>
<ExperimentIcon style={{ width: '1em', height: '1em' }} />
<ExperimentIcon style={{ width: "1em", height: "1em" }} />
</Callout.Icon>
<Callout.Text>
{strings.website.common.warnings.test}
@@ -505,12 +504,12 @@ export const TankSearch = memo<TankSearchProps>(
key={index}
onIntersection={() => {
setLoadedCards((state) =>
Math.min(state + 2, tanksFiltered.length),
Math.min(state + 2, tanksFiltered.length)
);
}}
/>
);
},
}
)}
</TankCardWrapper>
)}
@@ -523,15 +522,15 @@ export const TankSearch = memo<TankSearchProps>(
<TankCardWrapper>
{times(
Math.round(
skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random(),
skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random()
),
(index) => (
<SkeletonTankCard key={index} />
),
)
)}
</TankCardWrapper>
)}
</Flex>
);
},
}
);