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

feat: select all

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-06-25 19:24:33 -05:00
1 parent d186368c98
commit 6eba9e6b94
1 file changed
+360 -338
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tools/tankopedia/components/TankSearch/index.tsx
+360 -338
View File
@@ -1,4 +1,4 @@
import { Callout, Flex, Text } from '@radix-ui/themes'; import { Callout, Flex, Link, Text } from '@radix-ui/themes';
import { go } from 'fuzzysort'; import { go } from 'fuzzysort';
import { times } from 'lodash'; import { times } from 'lodash';
import { memo, use, useMemo } from 'react'; import { memo, use, useMemo } from 'react';
@@ -31,381 +31,403 @@ import { treeTypeOrder } from './constants';
interface TankSearchProps { interface TankSearchProps {
compact?: boolean; compact?: boolean;
onSelect?: (tank: TankDefinition) => void; onSelect?: (tank: TankDefinition) => void;
onSelectAll?: (tanks: TankDefinition[]) => void;
} }
export const TankSearch = memo<TankSearchProps>(({ compact, onSelect }) => { export const TankSearch = memo<TankSearchProps>(
const awaitedGameDefinitions = use(gameDefinitions); ({ compact, onSelect, onSelectAll }) => {
const awaitedModelDefinitions = use(modelDefinitions); const awaitedGameDefinitions = use(gameDefinitions);
const awaitedTankDefinitions = use(tankDefinitions); const awaitedModelDefinitions = use(modelDefinitions);
const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray); const awaitedTankDefinitions = use(tankDefinitions);
const awaitedTankNames = use(tankNames); const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
const filters = useTankopediaFilters(); const awaitedTankNames = use(tankNames);
const tanks = useMemo(() => { const filters = useTankopediaFilters();
if (filters.search === undefined) { const tanks = useMemo(() => {
const filtered = awaitedTanksDefinitionsArray.filter((tank) => if (filters.search === undefined) {
tankopediaFilterTank(filters, tank), const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
); tankopediaFilterTank(filters, tank),
let sorted: TankDefinition[]; );
let sorted: TankDefinition[];
switch (filters.sort.by) { switch (filters.sort.by) {
case 'meta.none': case 'meta.none':
sorted = filtered sorted = filtered
.sort( .sort(
(a, b) =>
treeTypeOrder.indexOf(b.treeType) -
treeTypeOrder.indexOf(a.treeType),
)
.sort(
(a, b) =>
TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class),
)
.sort(
(a, b) =>
awaitedGameDefinitions.nations.indexOf(b.nation) -
awaitedGameDefinitions.nations.indexOf(a.nation),
);
break;
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;
return aHealth - bHealth;
});
break;
}
case 'survivability.viewRange':
sorted = filtered.sort(
(a, b) => (a, b) =>
treeTypeOrder.indexOf(b.treeType) - a.turrets.at(-1)!.viewRange - b.turrets.at(-1)!.viewRange,
treeTypeOrder.indexOf(a.treeType), );
) break;
.sort(
case 'survivability.camouflageStill':
sorted = filtered.sort(
(a, b) => a.camouflage.still - b.camouflage.still,
);
break;
case 'survivability.camouflageMoving':
sorted = filtered.sort(
(a, b) => a.camouflage.moving - b.camouflage.moving,
);
break;
case 'survivability.camouflageShooting':
sorted = filtered.sort(
(a, b) => (a, b) =>
TANK_CLASSES.indexOf(b.class) - TANK_CLASSES.indexOf(a.class), a.camouflage.still *
) a.turrets.at(-1)!.guns.at(-1)!.camouflageLoss -
.sort( b.camouflage.still *
b.turrets.at(-1)!.guns.at(-1)!.camouflageLoss,
);
break;
case 'survivability.volume':
sorted = filtered.sort((a, b) => {
const aTankModelDefinition = awaitedModelDefinitions[a.id];
const bTankModelDefinition = awaitedModelDefinitions[b.id];
const aTurretModelDefinition =
aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
const bTurretModelDefinition =
bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.boundingBox,
aTurretModelDefinition.boundingBox,
),
);
const bSize = normalizeBoundingBox(
unionBoundingBox(
bTankModelDefinition.boundingBox,
bTurretModelDefinition.boundingBox,
),
);
const aVolume = aSize[0] * aSize[1] * aSize[2];
const bVolume = bSize[0] * bSize[1] * bSize[2];
return aVolume - bVolume;
});
break;
case 'survivability.length':
sorted = filtered.sort((a, b) => {
const aTankModelDefinition = awaitedModelDefinitions[a.id];
const bTankModelDefinition = awaitedModelDefinitions[b.id];
const aTurretModelDefinition =
aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
const bTurretModelDefinition =
bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.boundingBox,
aTurretModelDefinition.boundingBox,
),
);
const bSize = normalizeBoundingBox(
unionBoundingBox(
bTankModelDefinition.boundingBox,
bTurretModelDefinition.boundingBox,
),
);
const aLength = Math.max(aSize[0], aSize[1], aSize[2]);
const bLength = Math.max(bSize[0], bSize[1], bSize[2]);
return aLength - bLength;
});
break;
case 'fire.dpm':
sorted = filtered.sort(
(a, b) => (a, b) =>
awaitedGameDefinitions.nations.indexOf(b.nation) - resolveDpm(
awaitedGameDefinitions.nations.indexOf(a.nation), a.turrets.at(-1)!.guns.at(-1)!,
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],
),
); );
break; break;
case 'survivability.health': { case 'fire.reload':
sorted = filtered.sort((a, b) => { sorted = filtered.sort(
const aHealth = a.health + a.turrets.at(-1)!.health; (a, b) =>
const bHealth = b.health + b.turrets.at(-1)!.health; resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
return aHealth - bHealth;
});
break;
}
case 'survivability.viewRange':
sorted = filtered.sort(
(a, b) => a.turrets.at(-1)!.viewRange - b.turrets.at(-1)!.viewRange,
);
break;
case 'survivability.camouflageStill':
sorted = filtered.sort(
(a, b) => a.camouflage.still - b.camouflage.still,
);
break;
case 'survivability.camouflageMoving':
sorted = filtered.sort(
(a, b) => a.camouflage.moving - b.camouflage.moving,
);
break;
case 'survivability.camouflageShooting':
sorted = filtered.sort(
(a, b) =>
a.camouflage.still *
a.turrets.at(-1)!.guns.at(-1)!.camouflageLoss -
b.camouflage.still *
b.turrets.at(-1)!.guns.at(-1)!.camouflageLoss,
);
break;
case 'survivability.volume':
sorted = filtered.sort((a, b) => {
const aTankModelDefinition = awaitedModelDefinitions[a.id];
const bTankModelDefinition = awaitedModelDefinitions[b.id];
const aTurretModelDefinition =
aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
const bTurretModelDefinition =
bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.boundingBox,
aTurretModelDefinition.boundingBox,
),
); );
const bSize = normalizeBoundingBox( break;
unionBoundingBox(
bTankModelDefinition.boundingBox, case 'fire.caliber':
bTurretModelDefinition.boundingBox, 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,
); );
const aVolume = aSize[0] * aSize[1] * aSize[2]; break;
const bVolume = bSize[0] * bSize[1] * bSize[2];
return aVolume - bVolume; case 'fire.standardPenetration':
}); sorted = filtered.sort(
break; (a, b) =>
resolveNearPenetration(
case 'survivability.length': a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
sorted = filtered.sort((a, b) => { ) -
const aTankModelDefinition = awaitedModelDefinitions[a.id]; resolveNearPenetration(
const bTankModelDefinition = awaitedModelDefinitions[b.id]; b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
const aTurretModelDefinition = ),
aTankModelDefinition.turrets[a.turrets.at(-1)!.id];
const bTurretModelDefinition =
bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.boundingBox,
aTurretModelDefinition.boundingBox,
),
); );
const bSize = normalizeBoundingBox( break;
unionBoundingBox(
bTankModelDefinition.boundingBox, case 'fire.premiumPenetration':
bTurretModelDefinition.boundingBox, sorted = filtered.sort(
), (a, b) =>
resolveNearPenetration(
a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0,
) -
resolveNearPenetration(
b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0,
),
); );
const aLength = Math.max(aSize[0], aSize[1], aSize[2]); break;
const bLength = Math.max(bSize[0], bSize[1], bSize[2]);
return aLength - bLength; case 'fire.damage':
}); sorted = filtered.sort(
break; (a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor,
);
break;
case 'fire.dpm': case 'fire.shellVelocity':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
resolveDpm( a.turrets.at(-1)!.guns.at(-1)!.shells[0].speed -
a.turrets.at(-1)!.guns.at(-1)!, b.turrets.at(-1)!.guns.at(-1)!.shells[0].speed,
a.turrets.at(-1)!.guns.at(-1)!.shells[0], );
) - break;
resolveDpm(
b.turrets.at(-1)!.guns.at(-1)!,
b.turrets.at(-1)!.guns.at(-1)!.shells[0],
),
);
break;
case 'fire.reload': case 'fire.aimTime':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
resolveReload(a.turrets.at(-1)!.guns.at(-1)!) - a.turrets.at(-1)!.guns.at(-1)!.aimTime -
resolveReload(b.turrets.at(-1)!.guns.at(-1)!), b.turrets.at(-1)!.guns.at(-1)!.aimTime,
); );
break; break;
case 'fire.caliber': case 'fire.dispersionStill':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber - a.turrets.at(-1)!.guns.at(-1)!.dispersion.base -
b.turrets.at(-1)!.guns.at(-1)!.shells[0].caliber, b.turrets.at(-1)!.guns.at(-1)!.dispersion.base,
); );
break; break;
case 'fire.standardPenetration': case 'fire.dispersionMoving':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
resolveNearPenetration( a.tracks.at(-1)!.dispersion.move -
a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration, b.tracks.at(-1)!.dispersion.move,
) - );
resolveNearPenetration( break;
b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
),
);
break;
case 'fire.premiumPenetration': case 'fire.gunDepression':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
resolveNearPenetration( awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id]
a.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0, .guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch.max +
) - (awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0) -
resolveNearPenetration( awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id]
b.turrets.at(-1)!.guns.at(-1)!.shells[1]?.penetration ?? 0, .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch.max -
), (awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0),
); );
break; break;
case 'fire.damage': case 'fire.gunElevation':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
a.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor - awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id]
b.turrets.at(-1)!.guns.at(-1)!.shells[0].damage.armor, .guns[b.turrets.at(-1)!.guns.at(-1)!.id].pitch.min +
); (awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0) -
break; awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id]
.guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch.min -
(awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0),
);
break;
case 'fire.shellVelocity': case 'maneuverability.forwardsSpeed':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) => a.speed.forwards - b.speed.forwards,
a.turrets.at(-1)!.guns.at(-1)!.shells[0].speed - );
b.turrets.at(-1)!.guns.at(-1)!.shells[0].speed, break;
);
break;
case 'fire.aimTime': case 'maneuverability.backwardsSpeed':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) => a.speed.backwards - b.speed.backwards,
a.turrets.at(-1)!.guns.at(-1)!.aimTime - );
b.turrets.at(-1)!.guns.at(-1)!.aimTime, break;
);
break;
case 'fire.dispersionStill': case 'maneuverability.power':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
a.turrets.at(-1)!.guns.at(-1)!.dispersion.base - );
b.turrets.at(-1)!.guns.at(-1)!.dispersion.base, break;
);
break;
case 'fire.dispersionMoving': case 'maneuverability.powerToWeight':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
a.tracks.at(-1)!.dispersion.move - a.engines.at(-1)!.power /
b.tracks.at(-1)!.dispersion.move, (a.weight +
); a.engines.at(-1)!.weight +
break; a.tracks.at(-1)!.weight +
a.turrets.at(-1)!.weight +
a.turrets.at(-1)!.guns.at(-1)!.weight) -
b.engines.at(-1)!.power /
(b.weight +
b.engines.at(-1)!.weight +
b.tracks.at(-1)!.weight +
b.turrets.at(-1)!.weight +
b.turrets.at(-1)!.guns.at(-1)!.weight),
);
break;
case 'fire.gunDepression': case 'maneuverability.weight':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[ a.weight +
a.turrets.at(-1)!.guns.at(-1)!.id a.engines.at(-1)!.weight +
].pitch.max + a.tracks.at(-1)!.weight +
(awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0) - a.turrets.at(-1)!.weight +
awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[ a.turrets.at(-1)!.guns.at(-1)!.weight -
b.turrets.at(-1)!.guns.at(-1)!.id
].pitch.max -
(awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0),
);
break;
case 'fire.gunElevation':
sorted = filtered.sort(
(a, b) =>
awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id].guns[
b.turrets.at(-1)!.guns.at(-1)!.id
].pitch.min +
(awaitedModelDefinitions[b.id].turretRotation?.pitch ?? 0) -
awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id].guns[
a.turrets.at(-1)!.guns.at(-1)!.id
].pitch.min -
(awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0),
);
break;
case 'maneuverability.forwardsSpeed':
sorted = filtered.sort((a, b) => a.speed.forwards - b.speed.forwards);
break;
case 'maneuverability.backwardsSpeed':
sorted = filtered.sort(
(a, b) => a.speed.backwards - b.speed.backwards,
);
break;
case 'maneuverability.power':
sorted = filtered.sort(
(a, b) => a.engines.at(-1)!.power - b.engines.at(-1)!.power,
);
break;
case 'maneuverability.powerToWeight':
sorted = filtered.sort(
(a, b) =>
a.engines.at(-1)!.power /
(a.weight +
a.engines.at(-1)!.weight +
a.tracks.at(-1)!.weight +
a.turrets.at(-1)!.weight +
a.turrets.at(-1)!.guns.at(-1)!.weight) -
b.engines.at(-1)!.power /
(b.weight + (b.weight +
b.engines.at(-1)!.weight + b.engines.at(-1)!.weight +
b.tracks.at(-1)!.weight + b.tracks.at(-1)!.weight +
b.turrets.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; break;
case 'maneuverability.weight': case 'maneuverability.traverseSpeed':
sorted = filtered.sort( sorted = filtered.sort(
(a, b) => (a, b) =>
a.weight + a.tracks.at(-1)!.traverseSpeed - b.tracks.at(-1)!.traverseSpeed,
a.engines.at(-1)!.weight + );
a.tracks.at(-1)!.weight + break;
a.turrets.at(-1)!.weight + }
a.turrets.at(-1)!.guns.at(-1)!.weight -
(b.weight +
b.engines.at(-1)!.weight +
b.tracks.at(-1)!.weight +
b.turrets.at(-1)!.weight +
b.turrets.at(-1)!.guns.at(-1)!.weight),
);
break;
case 'maneuverability.traverseSpeed': return filters.sort.direction === 'ascending'
sorted = filtered.sort( ? sorted
(a, b) => : sorted.reverse();
a.tracks.at(-1)!.traverseSpeed - b.tracks.at(-1)!.traverseSpeed, } else {
); const searchedRaw = go(filters.search, awaitedTankNames, {
break; key: 'combined',
limit: 25,
});
const searchedTanks = searchedRaw.map(
(result) => awaitedTankDefinitions[result.obj.id],
);
return searchedTanks;
} }
}, [filters]);
return filters.sort.direction === 'ascending' ? sorted : sorted.reverse(); return (
} else { <Flex direction="column" gap="4" flexGrow="1">
const searchedRaw = go(filters.search, awaitedTankNames, { <SearchBar topResult={tanks?.[0]} />
key: 'combined',
limit: 25,
});
const searchedTanks = searchedRaw.map(
(result) => awaitedTankDefinitions[result.obj.id],
);
return searchedTanks;
}
}, [filters]);
return ( {!filters.search && !filters.searching && (
<Flex direction="column" gap="4" flexGrow="1"> <FilterControl compact={compact} />
<SearchBar topResult={tanks?.[0]} /> )}
{!filters.search && !filters.searching && ( {(filters.sort.by !== 'meta.none' || onSelectAll) && (
<FilterControl compact={compact} /> <Flex
)} py="2"
mt="2"
direction="column"
align="center"
justify="center"
>
{filters.sort.by !== 'meta.none' && (
<Text color="gray">
Sorting by {SORT_NAMES[filters.sort.by]}
{SORT_UNITS[filters.sort.by] === undefined
? ''
: ` (${SORT_UNITS[filters.sort.by]})`}
, {filters.sort.direction}
</Text>
)}
{filters.sort.by !== 'meta.none' && ( {onSelectAll && (
<Flex py="2" mt="2" justify="center"> <Link
<Text color="gray"> underline="always"
Sorting by {SORT_NAMES[filters.sort.by]} href="#"
{SORT_UNITS[filters.sort.by] === undefined onClick={() => onSelectAll(tanks)}
? '' >
: ` (${SORT_UNITS[filters.sort.by]})`} Select all {tanks.length} tanks
, {filters.sort.direction} </Link>
</Text> )}
</Flex> </Flex>
)} )}
{filters.testing === 'only' && ( {filters.testing === 'only' && (
<Flex justify="center" mt="4"> <Flex justify="center" mt="4">
<Callout.Root color="amber"> <Callout.Root color="amber">
<Callout.Icon> <Callout.Icon>
<ExperimentIcon style={{ width: '1em', height: '1em' }} /> <ExperimentIcon style={{ width: '1em', height: '1em' }} />
</Callout.Icon> </Callout.Icon>
<Callout.Text> <Callout.Text>
Tanks in testing are subject to change and many not represent the Tanks in testing are subject to change and many not represent
final product. the final product.
</Callout.Text> </Callout.Text>
</Callout.Root> </Callout.Root>
</Flex> </Flex>
)} )}
{!filters.searching && ( {!filters.searching && (
<> <>
{tanks.length > 0 && ( {tanks.length > 0 && (
<TankCardWrapper> <TankCardWrapper>
{tanks.map((tank) => ( {tanks.map((tank) => (
<TankCard onSelect={onSelect} key={tank.id} tank={tank} /> <TankCard onSelect={onSelect} key={tank.id} tank={tank} />
))} ))}
</TankCardWrapper> </TankCardWrapper>
)} )}
{tanks.length === 0 && <NoResults type="search" />} {tanks.length === 0 && <NoResults type="search" />}
</> </>
)} )}
{filters.searching && ( {filters.searching && (
<TankCardWrapper> <TankCardWrapper>
{times(Math.round(10 + 10 * Math.random()), (index) => ( {times(Math.round(10 + 10 * Math.random()), (index) => (
<SkeletonTankCard key={index} /> <SkeletonTankCard key={index} />
))} ))}
</TankCardWrapper> </TankCardWrapper>
)} )}
</Flex> </Flex>
); );
}); },
);