mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 11:39:50 +02:00
feat: migrated tank search
This commit is contained in:
TrèsAbhi committed
1 parent
0537418f6a
commit
e241870ece
36 files changed
+868
-718
No files matched your search
@@ -0,0 +1,496 @@
|
||||
import {
|
||||
asset,
|
||||
gameDefinitions,
|
||||
TANK_CLASSES,
|
||||
TIER_ROMAN_NUMERALS,
|
||||
type Tier,
|
||||
} from '@blitzkit/core';
|
||||
import strings from '@blitzkit/core/lang/en-US.json';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { ReloadIcon } from '@radix-ui/react-icons';
|
||||
import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
|
||||
import { times } from 'lodash-es';
|
||||
import { useAwait } from '../../../hooks/useAwait';
|
||||
import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
|
||||
import { classIcons } from '../../ClassIcon';
|
||||
import { ExperimentIcon } from '../../ExperimentIcon';
|
||||
import { ResearchedIcon } from '../../ResearchedIcon';
|
||||
import { ScienceIcon } from '../../ScienceIcon';
|
||||
import { ScienceOffIcon } from '../../ScienceOffIcon';
|
||||
|
||||
interface FilterControlProps {
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export function FilterControl({ compact }: FilterControlProps) {
|
||||
const awaitedGameDefinitions = useAwait(gameDefinitions);
|
||||
const tankFilters = useStore($tankFilters);
|
||||
|
||||
return (
|
||||
<Flex height="fit-content" gap="2" align="start" justify="center">
|
||||
<Flex
|
||||
direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
|
||||
overflow="hidden"
|
||||
style={{ borderRadius: 'var(--radius-5)' }}
|
||||
>
|
||||
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
|
||||
{times(5, (index) => {
|
||||
const tier = (index + 1) as Tier;
|
||||
const selected = tankFilters.tiers?.includes(tier);
|
||||
|
||||
return (
|
||||
<Tooltip key={tier} content={`Tier ${tier}`}>
|
||||
<IconButton
|
||||
key={tier}
|
||||
variant={selected ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={selected ? undefined : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.tiers?.includes(tier)) {
|
||||
// draft.tiers = draft.tiers?.filter((t) => t !== tier);
|
||||
// } else {
|
||||
// draft.tiers = [...(draft.tiers ?? []), tier];
|
||||
// }
|
||||
// })
|
||||
|
||||
{
|
||||
if (tankFilters.tiers.includes(tier)) {
|
||||
$tankFilters.setKey(
|
||||
'tiers',
|
||||
tankFilters.tiers.filter((t) => t !== tier),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('tiers', [
|
||||
...tankFilters.tiers,
|
||||
tier,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
|
||||
{times(5, (index) => {
|
||||
const tier = (index + 6) as Tier;
|
||||
const selected = tankFilters.tiers?.includes(tier);
|
||||
|
||||
return (
|
||||
<Tooltip key={tier} content={`Tier ${tier}`}>
|
||||
<IconButton
|
||||
key={tier}
|
||||
variant={selected ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={selected ? undefined : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.tiers?.includes(tier)) {
|
||||
// draft.tiers = draft.tiers?.filter((t) => t !== tier);
|
||||
// } else {
|
||||
// draft.tiers = [...(draft.tiers ?? []), tier];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.tiers.includes(tier)) {
|
||||
$tankFilters.setKey(
|
||||
'tiers',
|
||||
tankFilters.tiers.filter((t) => t !== tier),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('tiers', [
|
||||
...tankFilters.tiers,
|
||||
tier,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
direction={compact ? 'row' : { initial: 'row', sm: 'column' }}
|
||||
overflow="hidden"
|
||||
style={{ borderRadius: 'var(--radius-5)' }}
|
||||
>
|
||||
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
|
||||
{awaitedGameDefinitions.nations
|
||||
.slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
|
||||
.map((nation) => {
|
||||
const selected = tankFilters.nations?.includes(nation);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
content={
|
||||
strings.common.nations[
|
||||
nation as keyof typeof strings.common.nations
|
||||
]
|
||||
}
|
||||
key={nation}
|
||||
>
|
||||
<IconButton
|
||||
variant={selected ? 'solid' : 'soft'}
|
||||
color={selected ? undefined : 'gray'}
|
||||
highContrast
|
||||
radius="none"
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.nations?.includes(nation)) {
|
||||
// draft.nations = draft.nations?.filter(
|
||||
// (n) => n !== nation,
|
||||
// );
|
||||
// } else {
|
||||
// draft.nations = [...(draft.nations ?? []), nation];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.nations.includes(nation)) {
|
||||
$tankFilters.setKey(
|
||||
'nations',
|
||||
tankFilters.nations.filter((n) => n !== nation),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('nations', [
|
||||
...tankFilters.nations,
|
||||
nation,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
src={asset(`flags/circle/${nation}.webp`)}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
|
||||
{awaitedGameDefinitions.nations
|
||||
.slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
|
||||
.map((nation) => {
|
||||
const selected = tankFilters.nations?.includes(nation);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
content={
|
||||
strings.common.nations[
|
||||
nation as keyof typeof strings.common.nations
|
||||
]
|
||||
}
|
||||
key={nation}
|
||||
>
|
||||
<IconButton
|
||||
key={nation}
|
||||
style={{ flex: 1 }}
|
||||
variant={selected ? 'solid' : 'soft'}
|
||||
color={selected ? undefined : 'gray'}
|
||||
highContrast
|
||||
radius="none"
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.nations?.includes(nation)) {
|
||||
// draft.nations = draft.nations?.filter(
|
||||
// (n) => n !== nation,
|
||||
// );
|
||||
// } else {
|
||||
// draft.nations = [...(draft.nations ?? []), nation];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.nations.includes(nation)) {
|
||||
$tankFilters.setKey(
|
||||
'nations',
|
||||
tankFilters.nations.filter((n) => n !== nation),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('nations', [
|
||||
...tankFilters.nations,
|
||||
nation,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<img
|
||||
style={{ width: '1em', height: '1em' }}
|
||||
src={asset(`flags/circle/${nation}.webp`)}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
overflow="hidden"
|
||||
style={{ borderRadius: 'var(--radius-full)' }}
|
||||
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
|
||||
>
|
||||
{TANK_CLASSES.map((tankClass) => {
|
||||
const Icon = classIcons[tankClass];
|
||||
const selected = tankFilters.classes?.includes(tankClass);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
content={strings.common.tank_class_medium[tankClass]}
|
||||
key={tankClass}
|
||||
>
|
||||
<IconButton
|
||||
variant={selected ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={selected ? undefined : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.classes?.includes(tankClass)) {
|
||||
// draft.classes = draft.classes?.filter(
|
||||
// (c) => c !== tankClass,
|
||||
// );
|
||||
// } else {
|
||||
// draft.classes = [...(draft.classes ?? []), tankClass];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.classes.includes(tankClass)) {
|
||||
$tankFilters.setKey(
|
||||
'classes',
|
||||
tankFilters.classes.filter((c) => c !== tankClass),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('classes', [
|
||||
...tankFilters.classes,
|
||||
tankClass,
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<Icon style={{ width: '1em', height: '1em' }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
overflow="hidden"
|
||||
style={{ borderRadius: 'var(--radius-full)' }}
|
||||
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
|
||||
>
|
||||
<Tooltip content="Researchable">
|
||||
<IconButton
|
||||
variant={
|
||||
tankFilters.types?.includes('researchable') ? 'solid' : 'soft'
|
||||
}
|
||||
radius="none"
|
||||
color={
|
||||
tankFilters.types?.includes('researchable') ? undefined : 'gray'
|
||||
}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.types?.includes('researchable')) {
|
||||
// draft.types = draft.types?.filter(
|
||||
// (t) => t !== 'researchable',
|
||||
// );
|
||||
// } else {
|
||||
// draft.types = [...(draft.types ?? []), 'researchable'];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.types.includes('researchable')) {
|
||||
$tankFilters.setKey(
|
||||
'types',
|
||||
tankFilters.types.filter((t) => t !== 'researchable'),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('types', [
|
||||
...tankFilters.types,
|
||||
'researchable',
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip content="Premium">
|
||||
<IconButton
|
||||
variant={tankFilters.types?.includes('premium') ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={tankFilters.types?.includes('premium') ? 'amber' : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.types?.includes('premium')) {
|
||||
// draft.types = draft.types?.filter((t) => t !== 'premium');
|
||||
// } else {
|
||||
// draft.types = [...(draft.types ?? []), 'premium'];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.types.includes('premium')) {
|
||||
$tankFilters.setKey(
|
||||
'types',
|
||||
tankFilters.types.filter((t) => t !== 'premium'),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('types', [
|
||||
...tankFilters.types,
|
||||
'premium',
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
color={
|
||||
tankFilters.types?.includes('premium') ? undefined : 'amber'
|
||||
}
|
||||
style={{ display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
|
||||
</Text>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip content="Collector">
|
||||
<IconButton
|
||||
variant={
|
||||
tankFilters.types?.includes('collector') ? 'solid' : 'soft'
|
||||
}
|
||||
radius="none"
|
||||
color={tankFilters.types?.includes('collector') ? 'blue' : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.types?.includes('collector')) {
|
||||
// draft.types = draft.types?.filter((t) => t !== 'collector');
|
||||
// } else {
|
||||
// draft.types = [...(draft.types ?? []), 'collector'];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.types.includes('collector')) {
|
||||
$tankFilters.setKey(
|
||||
'types',
|
||||
tankFilters.types.filter((t) => t !== 'collector'),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('types', [
|
||||
...tankFilters.types,
|
||||
'collector',
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
color={
|
||||
tankFilters.types?.includes('collector') ? undefined : 'blue'
|
||||
}
|
||||
style={{ display: 'flex', justifyContent: 'center' }}
|
||||
>
|
||||
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
|
||||
</Text>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
overflow="hidden"
|
||||
style={{ borderRadius: 'var(--radius-full)' }}
|
||||
direction={compact ? 'column' : { sm: 'row', initial: 'column' }}
|
||||
>
|
||||
<Tooltip content="Include test tank">
|
||||
<IconButton
|
||||
variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={tankFilters.testing === 'include' ? undefined : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// draft.testing = 'include';
|
||||
// })
|
||||
{
|
||||
$tankFilters.setKey('testing', 'include');
|
||||
}
|
||||
}
|
||||
>
|
||||
<ExperimentIcon
|
||||
style={{ width: '1em', height: '1em', color: 'currentColor' }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip content="Exclude test tank">
|
||||
<IconButton
|
||||
variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// draft.testing = 'exclude';
|
||||
// })
|
||||
{
|
||||
$tankFilters.setKey('testing', 'exclude');
|
||||
}
|
||||
}
|
||||
>
|
||||
<ScienceOffIcon
|
||||
style={{ width: '1em', height: '1em', color: 'currentColor' }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip content="Only test tank">
|
||||
<IconButton
|
||||
variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={tankFilters.testing === 'only' ? undefined : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// draft.testing = 'only';
|
||||
// })
|
||||
{
|
||||
$tankFilters.setKey('testing', 'only');
|
||||
}
|
||||
}
|
||||
>
|
||||
<ScienceIcon
|
||||
style={{ width: '1em', height: '1em', color: 'currentColor' }}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
|
||||
<Box>
|
||||
<IconButton
|
||||
color="red"
|
||||
onClick={() => {
|
||||
// tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
|
||||
$tankFilters.set(initialTankFilters);
|
||||
}}
|
||||
>
|
||||
<ReloadIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { Flex, Link, Text } from '@radix-ui/themes';
|
||||
import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
|
||||
|
||||
interface NoResultsProps {
|
||||
type?: 'filters' | 'search';
|
||||
}
|
||||
|
||||
export function NoResults({ type = 'filters' }: NoResultsProps) {
|
||||
return (
|
||||
<Flex flexGrow="1" align="center" justify="center">
|
||||
<Text color="gray">
|
||||
No tanks found.{' '}
|
||||
<Link
|
||||
href="#"
|
||||
underline="always"
|
||||
color="red"
|
||||
onClick={() => {
|
||||
$tankFilters.set(initialTankFilters);
|
||||
}}
|
||||
>
|
||||
{type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { type TankDefinition } from '@blitzkit/core';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||
import { Button, Link, TextField } from '@radix-ui/themes';
|
||||
import { $tankFilters } from '../../../stores/tankFilters';
|
||||
|
||||
interface QuickLinkProps {
|
||||
topResult?: TankDefinition;
|
||||
}
|
||||
|
||||
export function QuickLink({ topResult }: QuickLinkProps) {
|
||||
const tankFilters = useStore($tankFilters);
|
||||
|
||||
if (!tankFilters.search || !topResult || tankFilters.searching) return null;
|
||||
|
||||
return (
|
||||
<TextField.Slot>
|
||||
<Link href={`/tools/tankopedia/${topResult.id}`}>
|
||||
<Button variant="ghost">
|
||||
{topResult.name} <CaretRightIcon />
|
||||
</Button>
|
||||
</Link>
|
||||
</TextField.Slot>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import type { TankDefinition } from '@blitzkit/core';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
|
||||
import { Flex, Spinner, TextField } from '@radix-ui/themes';
|
||||
import { debounce } from 'lodash-es';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { type KeyboardEventHandler, useCallback, useRef } from 'react';
|
||||
import { QuickLink } from './QuickLink';
|
||||
import { $tankFilters } from '../../../stores/tankFilters';
|
||||
import { Sort } from './Sort';
|
||||
|
||||
interface SearchBarProps {
|
||||
topResult?: TankDefinition;
|
||||
onSelect?: (tank: TankDefinition) => void;
|
||||
}
|
||||
|
||||
export function SearchBar({ topResult, onSelect }: SearchBarProps) {
|
||||
const tankFilters = useStore($tankFilters);
|
||||
const router = useRouter();
|
||||
const input = useRef<HTMLInputElement>(null);
|
||||
const performSearch = useCallback(
|
||||
debounce(() => {
|
||||
// tankFiltersStore.setState({ searching: false });
|
||||
$tankFilters.setKey('searching', false);
|
||||
|
||||
if (!input.current) return;
|
||||
|
||||
const sanitized = input.current.value.trim();
|
||||
|
||||
// tankFiltersStore.setState({
|
||||
// search: sanitized.length === 0 ? undefined : sanitized,
|
||||
// });
|
||||
$tankFilters.setKey(
|
||||
'search',
|
||||
sanitized.length === 0 ? undefined : sanitized,
|
||||
);
|
||||
}, 500),
|
||||
[],
|
||||
);
|
||||
const handleChange = useCallback(() => {
|
||||
// if (!tankFiltersStore.getState().searching) {
|
||||
// tankFiltersStore.setState({ searching: true });
|
||||
// }
|
||||
if (!tankFilters.searching) {
|
||||
$tankFilters.setKey('searching', true);
|
||||
}
|
||||
|
||||
performSearch();
|
||||
}, [tankFilters]);
|
||||
const handleKeyDown = useCallback<KeyboardEventHandler>(
|
||||
(event) => {
|
||||
if (event.key !== 'Enter' || !topResult || tankFilters.searching) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (onSelect) {
|
||||
onSelect(topResult);
|
||||
} else {
|
||||
router.push(`/tools/tankopedia/${topResult.id}`);
|
||||
}
|
||||
},
|
||||
[topResult],
|
||||
);
|
||||
|
||||
return (
|
||||
<Flex justify="center" mt="4">
|
||||
<Flex gap="2" flexGrow="1">
|
||||
<TextField.Root
|
||||
defaultValue={tankFilters.search}
|
||||
style={{ flex: 1 }}
|
||||
ref={input}
|
||||
placeholder="Search tanks..."
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<TextField.Slot>
|
||||
{tankFilters.searching ? <Spinner /> : <MagnifyingGlassIcon />}
|
||||
</TextField.Slot>
|
||||
|
||||
<QuickLink topResult={topResult} />
|
||||
</TextField.Root>
|
||||
|
||||
<Sort />
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Flex, Skeleton } from '@radix-ui/themes';
|
||||
import { memo, useRef } from 'react';
|
||||
import { useIntersection } from '../../../hooks/useIntersection';
|
||||
|
||||
interface SkeletonTankCardProps {
|
||||
onIntersection?: () => void;
|
||||
}
|
||||
|
||||
export const SkeletonTankCard = memo(
|
||||
({ onIntersection }: SkeletonTankCardProps) => {
|
||||
const card = useRef<HTMLDivElement>(null);
|
||||
|
||||
useIntersection(() => onIntersection?.(), card, {
|
||||
disabled: onIntersection === undefined,
|
||||
});
|
||||
|
||||
return (
|
||||
<Flex direction="column" gap="2" ref={card}>
|
||||
<Skeleton height="64px" />
|
||||
<Skeleton height="1em" />
|
||||
</Flex>
|
||||
);
|
||||
},
|
||||
() => true,
|
||||
);
|
||||
@@ -0,0 +1,301 @@
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { CaretDownIcon } from '@radix-ui/react-icons';
|
||||
import { Button, DropdownMenu } from '@radix-ui/themes';
|
||||
import type { TankopediaSortDirection } from '../../../stores/tankopediaPersistent';
|
||||
import { $tankopediaSort } from '../../../stores/tankopediaSort';
|
||||
|
||||
export function Sort() {
|
||||
const tankopediaSort = useStore($tankopediaSort);
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root modal={false}>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="surface" color="gray">
|
||||
Sort
|
||||
<CaretDownIcon />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Content align="end">
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'meta.none'}
|
||||
onClick={() => {
|
||||
// mutateTankopediaSort((draft) => {
|
||||
// draft.by = 'meta.none';
|
||||
// });
|
||||
$tankopediaSort.setKey('by', 'meta.none');
|
||||
}}
|
||||
>
|
||||
No sort
|
||||
</DropdownMenu.CheckboxItem>
|
||||
|
||||
<DropdownMenu.Label>Sort by</DropdownMenu.Label>
|
||||
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.dpm'}
|
||||
onClick={() => {
|
||||
// mutateTankopediaSort((draft) => {
|
||||
// draft.by = 'fire.dpm';
|
||||
// });
|
||||
$tankopediaSort.setKey('by', 'fire.dpm');
|
||||
}}
|
||||
>
|
||||
Standard DPM
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.dpmPremium'}
|
||||
onClick={() => {
|
||||
// mutateTankopediaSort((draft) => {
|
||||
// draft.by = 'fire.dpmPremium';
|
||||
// });
|
||||
$tankopediaSort.setKey('by', 'fire.dpmPremium');
|
||||
}}
|
||||
>
|
||||
Premium DPM
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.reload'}
|
||||
onClick={() => {
|
||||
// mutateTankopediaSort((draft) => {
|
||||
// draft.by = 'fire.reload';
|
||||
// });
|
||||
$tankopediaSort.setKey('by', 'fire.reload');
|
||||
}}
|
||||
>
|
||||
Reload
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.caliber'}
|
||||
onClick={() => {
|
||||
// mutateTankopediaSort((draft) => {
|
||||
// draft.by = 'fire.caliber';
|
||||
// });
|
||||
$tankopediaSort.setKey('by', 'fire.caliber');
|
||||
}}
|
||||
>
|
||||
Caliber
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.standardPenetration'}
|
||||
onClick={() => {
|
||||
// mutateTankopediaSort((draft) => {
|
||||
// draft.by = 'fire.standardPenetration';
|
||||
// });
|
||||
$tankopediaSort.setKey('by', 'fire.standardPenetration');
|
||||
}}
|
||||
>
|
||||
Standard penetration
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.premiumPenetration'}
|
||||
onClick={() => {
|
||||
// mutateTankopediaSort((draft) => {
|
||||
// draft.by = 'fire.premiumPenetration';
|
||||
// });
|
||||
$tankopediaSort.setKey('by', 'fire.premiumPenetration');
|
||||
}}
|
||||
>
|
||||
Premium penetration
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.damage'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'fire.damage');
|
||||
}}
|
||||
>
|
||||
Damage
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.shellVelocity'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'fire.shellVelocity');
|
||||
}}
|
||||
>
|
||||
Shell velocity
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.aimTime'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'fire.aimTime');
|
||||
}}
|
||||
>
|
||||
Aim time
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.dispersionStill'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'fire.dispersionStill');
|
||||
}}
|
||||
>
|
||||
Dispersion still
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.dispersionMoving'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'fire.dispersionMoving');
|
||||
}}
|
||||
>
|
||||
Dispersion moving
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.gunDepression'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'fire.gunDepression');
|
||||
}}
|
||||
>
|
||||
Gun depression
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'fire.gunElevation'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'fire.gunElevation');
|
||||
}}
|
||||
>
|
||||
Gun elevation
|
||||
</DropdownMenu.CheckboxItem>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>Maneuverability</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'maneuverability.forwardsSpeed'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'maneuverability.forwardsSpeed');
|
||||
}}
|
||||
>
|
||||
Forwards speed
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'maneuverability.backwardsSpeed'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'maneuverability.backwardsSpeed');
|
||||
}}
|
||||
>
|
||||
Backwards speed
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'maneuverability.power'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'maneuverability.power');
|
||||
}}
|
||||
>
|
||||
Power
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'maneuverability.powerToWeight'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'maneuverability.powerToWeight');
|
||||
}}
|
||||
>
|
||||
Power to weight
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'maneuverability.weight'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'maneuverability.weight');
|
||||
}}
|
||||
>
|
||||
Weight
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'maneuverability.traverseSpeed'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'maneuverability.traverseSpeed');
|
||||
}}
|
||||
>
|
||||
Traverse speed
|
||||
</DropdownMenu.CheckboxItem>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'survivability.health'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'survivability.health');
|
||||
}}
|
||||
>
|
||||
Health
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'survivability.viewRange'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'survivability.viewRange');
|
||||
}}
|
||||
>
|
||||
View range
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'survivability.camouflageStill'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'survivability.camouflageStill');
|
||||
}}
|
||||
>
|
||||
Camouflage
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'survivability.camouflageMoving'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'survivability.camouflageMoving');
|
||||
}}
|
||||
>
|
||||
Camouflage moving
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'survivability.camouflageShooting'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey(
|
||||
'by',
|
||||
'survivability.camouflageShooting',
|
||||
);
|
||||
}}
|
||||
>
|
||||
Camouflage shooting
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'survivability.volume'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'survivability.volume');
|
||||
}}
|
||||
>
|
||||
Volume
|
||||
</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem
|
||||
checked={tankopediaSort.by === 'survivability.length'}
|
||||
onClick={() => {
|
||||
$tankopediaSort.setKey('by', 'survivability.length');
|
||||
}}
|
||||
>
|
||||
Length
|
||||
</DropdownMenu.CheckboxItem>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
|
||||
<DropdownMenu.Label>Direction</DropdownMenu.Label>
|
||||
<DropdownMenu.RadioGroup
|
||||
value={tankopediaSort.direction}
|
||||
onValueChange={(value) => {
|
||||
$tankopediaSort.setKey(
|
||||
'direction',
|
||||
value as TankopediaSortDirection,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<DropdownMenu.RadioItem value="ascending">
|
||||
Ascending
|
||||
</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem value="descending">
|
||||
Descending
|
||||
</DropdownMenu.RadioItem>
|
||||
</DropdownMenu.RadioGroup>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
|
||||
export const cardBackgroundVar = createVar();
|
||||
|
||||
export const card = style({
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2)',
|
||||
background: cardBackgroundVar,
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const image = style({
|
||||
height: 64,
|
||||
width: '100%',
|
||||
objectPosition: 'center right',
|
||||
objectFit: 'contain',
|
||||
});
|
||||
|
||||
export const classIcon = style({
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
minWidth: '1em',
|
||||
minHeight: '1em',
|
||||
});
|
||||
|
||||
export const name = style({
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
});
|
||||
|
||||
export const link = style({
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
':hover': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,194 @@
|
||||
import {
|
||||
asset,
|
||||
modelDefinitions,
|
||||
normalizeBoundingBox,
|
||||
resolveDpm,
|
||||
resolveNearPenetration,
|
||||
tankIcon,
|
||||
unionBoundingBox,
|
||||
type TankDefinition,
|
||||
} from '@blitzkit/core';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { Flex, Text } from '@radix-ui/themes';
|
||||
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
||||
import Link from 'next/link';
|
||||
import { useMemo } from 'react';
|
||||
import { resolveReload } from '../../../core/blitzkit/resolveReload';
|
||||
import { useAwait } from '../../../hooks/useAwait';
|
||||
import { $tankopediaSort } from '../../../stores/tankopediaSort';
|
||||
import { classIcons } from '../../ClassIcon';
|
||||
import * as styles from './TankCard.css';
|
||||
|
||||
interface TankCardProps {
|
||||
tank: TankDefinition;
|
||||
onSelect?: (tank: TankDefinition) => void;
|
||||
}
|
||||
|
||||
export function TankCard({ tank, onSelect }: TankCardProps) {
|
||||
const awaitedModelDefinitions = useAwait(modelDefinitions);
|
||||
const Icon = classIcons[tank.class];
|
||||
const tankopediaSort = useStore($tankopediaSort);
|
||||
const discriminator = useMemo(() => {
|
||||
if (tankopediaSort.by.startsWith('meta')) return undefined;
|
||||
|
||||
const turret = tank.turrets.at(-1)!;
|
||||
const gun = turret.guns.at(-1)!;
|
||||
const shell0 = gun.shells[0];
|
||||
const shell1 = gun.shells[1];
|
||||
const tracks = tank.tracks.at(-1)!;
|
||||
const engine = tank.engines.at(-1)!;
|
||||
const tankModelDefinition = awaitedModelDefinitions[tank.id];
|
||||
const turretModelDefinition = tankModelDefinition.turrets[turret.id];
|
||||
const gunModelDefinition = turretModelDefinition.guns[gun.id];
|
||||
|
||||
switch (tankopediaSort.by) {
|
||||
case 'fire.aimTime':
|
||||
return gun.aimTime.toFixed(2);
|
||||
case 'fire.caliber':
|
||||
return shell0.caliber.toFixed(0);
|
||||
case 'fire.damage':
|
||||
return shell0.damage.armor.toFixed(0);
|
||||
case 'fire.dispersionMoving':
|
||||
return tracks.dispersion.move.toFixed(3);
|
||||
case 'fire.dispersionStill':
|
||||
return gun.dispersion.base.toFixed(3);
|
||||
case 'fire.dpm':
|
||||
return resolveDpm(gun, shell0).toFixed(0);
|
||||
case 'fire.dpmPremium':
|
||||
return shell1 ? resolveDpm(gun, shell1).toFixed(0) : '--';
|
||||
case 'fire.reload':
|
||||
return resolveReload(gun).toFixed(2);
|
||||
case 'fire.standardPenetration':
|
||||
return resolveNearPenetration(shell0.penetration).toFixed(0);
|
||||
case 'fire.premiumPenetration':
|
||||
return shell1
|
||||
? resolveNearPenetration(shell1.penetration).toFixed(0)
|
||||
: '--';
|
||||
case 'fire.shellVelocity':
|
||||
return shell0.speed.toFixed(0);
|
||||
case 'fire.gunDepression':
|
||||
return (
|
||||
gunModelDefinition.pitch.max +
|
||||
(tankModelDefinition.turretRotation?.pitch ?? 0)
|
||||
).toFixed(1);
|
||||
case 'fire.gunElevation':
|
||||
return (
|
||||
-gunModelDefinition.pitch.min -
|
||||
(tankModelDefinition.turretRotation?.pitch ?? 0)
|
||||
).toFixed(1);
|
||||
case 'maneuverability.forwardsSpeed':
|
||||
return tank.speed.forwards.toFixed(0);
|
||||
case 'maneuverability.backwardsSpeed':
|
||||
return tank.speed.backwards.toFixed(0);
|
||||
case 'maneuverability.power':
|
||||
return engine.power.toFixed(0);
|
||||
case 'maneuverability.powerToWeight':
|
||||
return (
|
||||
(1000 * engine.power) /
|
||||
(tank.weight +
|
||||
engine.weight +
|
||||
tracks.weight +
|
||||
turret.weight +
|
||||
gun.weight)
|
||||
).toFixed(1);
|
||||
case 'maneuverability.weight':
|
||||
return (
|
||||
(tank.weight +
|
||||
engine.weight +
|
||||
tracks.weight +
|
||||
turret.weight +
|
||||
gun.weight) /
|
||||
1000
|
||||
).toFixed(1);
|
||||
case 'maneuverability.traverseSpeed':
|
||||
return tracks.traverseSpeed.toFixed(1);
|
||||
case 'survivability.health':
|
||||
return (tank.health + turret.health).toFixed(0);
|
||||
case 'survivability.viewRange':
|
||||
return turret.viewRange.toFixed(0);
|
||||
case 'survivability.camouflageStill':
|
||||
return (tank.camouflage.still * 100).toFixed(0);
|
||||
case 'survivability.camouflageMoving':
|
||||
return (tank.camouflage.moving * 100).toFixed(0);
|
||||
case 'survivability.camouflageShooting':
|
||||
return (tank.camouflage.still * gun.camouflageLoss * 100).toFixed(0);
|
||||
case 'survivability.volume': {
|
||||
const dimensions = normalizeBoundingBox(
|
||||
unionBoundingBox(
|
||||
tankModelDefinition.boundingBox,
|
||||
turretModelDefinition.boundingBox,
|
||||
),
|
||||
);
|
||||
|
||||
return (dimensions[0] * dimensions[1] * dimensions[2]).toFixed(0);
|
||||
}
|
||||
|
||||
case 'survivability.length':
|
||||
return Math.max(
|
||||
...normalizeBoundingBox(
|
||||
unionBoundingBox(
|
||||
tankModelDefinition.boundingBox,
|
||||
turretModelDefinition.boundingBox,
|
||||
),
|
||||
),
|
||||
).toFixed(0);
|
||||
}
|
||||
}, [tankopediaSort.by]);
|
||||
|
||||
return (
|
||||
<Text
|
||||
tabIndex={onSelect ? 0 : undefined}
|
||||
size="1"
|
||||
color={
|
||||
tank.treeType === 'collector'
|
||||
? 'blue'
|
||||
: tank.treeType === 'premium'
|
||||
? 'amber'
|
||||
: 'gray'
|
||||
}
|
||||
highContrast={tank.treeType === 'researchable'}
|
||||
onClick={onSelect ? () => onSelect(tank) : undefined}
|
||||
className={styles.card}
|
||||
style={assignInlineVars({
|
||||
[styles.cardBackgroundVar]: `top left / contain no-repeat url(${asset(
|
||||
`flags/scratched/${tank.nation}.webp`,
|
||||
)})`,
|
||||
})}
|
||||
>
|
||||
<Link
|
||||
className={styles.link}
|
||||
href={onSelect ? '#' : `/tools/tankopedia/${tank.id}`}
|
||||
prefetch={false}
|
||||
>
|
||||
<img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
|
||||
|
||||
<Flex
|
||||
justify="center"
|
||||
gap="1"
|
||||
align="center"
|
||||
overflow="hidden"
|
||||
width="100%"
|
||||
>
|
||||
<Icon className={styles.classIcon} />
|
||||
<Text align="center" className={styles.name}>
|
||||
{tank.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
{discriminator && (
|
||||
<Text
|
||||
color="gray"
|
||||
align="center"
|
||||
style={{
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{discriminator}
|
||||
</Text>
|
||||
)}
|
||||
</Link>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Grid, type GridProps } from '@radix-ui/themes';
|
||||
|
||||
export function TankCardWrapper(props: GridProps) {
|
||||
return (
|
||||
<Grid
|
||||
py="4"
|
||||
columns="repeat(auto-fill, minmax(100px, 1fr))"
|
||||
flow="dense"
|
||||
gap="2"
|
||||
gapY="6"
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { type Tier, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { Flex, IconButton, Text } from '@radix-ui/themes';
|
||||
import { times } from 'lodash-es';
|
||||
import { memo } from 'react';
|
||||
import { $tankFilters } from '../../../stores/tankFilters';
|
||||
import { $tankopediaSort } from '../../../stores/tankopediaSort';
|
||||
|
||||
export const TierFilter = memo(() => {
|
||||
const tankFilters = useStore($tankFilters);
|
||||
const tankopediaSort = useStore($tankopediaSort);
|
||||
|
||||
if (tankopediaSort.by !== 'meta.none' || tankFilters.search) return null;
|
||||
|
||||
return (
|
||||
<Flex justify="center">
|
||||
<Flex
|
||||
direction="row"
|
||||
overflow="hidden"
|
||||
style={{ borderRadius: 'var(--radius-full)' }}
|
||||
>
|
||||
{times(10, (index) => {
|
||||
const tier = (10 - index) as Tier;
|
||||
const selected = tankFilters.tiers.includes(tier);
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
key={tier}
|
||||
variant={selected ? 'solid' : 'soft'}
|
||||
radius="none"
|
||||
color={selected ? undefined : 'gray'}
|
||||
highContrast
|
||||
onClick={() =>
|
||||
// mutateTankFilters((draft) => {
|
||||
// if (draft.tiers?.includes(tier)) {
|
||||
// draft.tiers = draft.tiers?.filter((t) => t !== tier);
|
||||
// } else {
|
||||
// draft.tiers = [...(draft.tiers ?? []), tier];
|
||||
// }
|
||||
// })
|
||||
{
|
||||
if (tankFilters.tiers.includes(tier)) {
|
||||
$tankFilters.setKey(
|
||||
'tiers',
|
||||
tankFilters.tiers.filter((t) => t !== tier),
|
||||
);
|
||||
} else {
|
||||
$tankFilters.setKey('tiers', [...tankFilters.tiers, tier]);
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
|
||||
</IconButton>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
import type { TreeType } from '@blitzkit/core';
|
||||
|
||||
export const treeTypeOrder: TreeType[] = [
|
||||
'researchable',
|
||||
'premium',
|
||||
'collector',
|
||||
];
|
||||
@@ -0,0 +1,496 @@
|
||||
import {
|
||||
TANK_CLASSES,
|
||||
gameDefinitions,
|
||||
modelDefinitions,
|
||||
normalizeBoundingBox,
|
||||
resolveDpm,
|
||||
resolveNearPenetration,
|
||||
tankDefinitions,
|
||||
tankDefinitionsArray,
|
||||
tankNames,
|
||||
unionBoundingBox,
|
||||
type TankDefinition,
|
||||
} from '@blitzkit/core';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { Callout, Flex, Link, Text, type FlexProps } from '@radix-ui/themes';
|
||||
import fuzzysort from 'fuzzysort';
|
||||
import { times } from 'lodash-es';
|
||||
import { Fragment, memo, useEffect, useMemo, useState } from 'react';
|
||||
import { filterTank } from '../../core/blitzkit/filterTank';
|
||||
import { resolveReload } from '../../core/blitzkit/resolveReload';
|
||||
import { useAdExempt } from '../../hooks/useAdExempt';
|
||||
import { useAwait } from '../../hooks/useAwait';
|
||||
import { $tankFilters } from '../../stores/tankFilters';
|
||||
import {
|
||||
SORT_NAMES,
|
||||
SORT_UNITS,
|
||||
} from '../../stores/tankopediaPersistent/constants';
|
||||
import { $tankopediaSort } from '../../stores/tankopediaSort';
|
||||
import { AdMidSectionResponsive } from '../AdMidSectionResponsive';
|
||||
import { ExperimentIcon } from '../ExperimentIcon';
|
||||
import { FilterControl } from './components/FilterControl';
|
||||
import { NoResults } from './components/NoResults';
|
||||
import { SearchBar } from './components/SearchBar';
|
||||
import { SkeletonTankCard } from './components/SkeletonTankCard';
|
||||
import { TankCard } from './components/TankCard';
|
||||
import { TankCardWrapper } from './components/TankCardWrapper';
|
||||
import { treeTypeOrder } from './constants';
|
||||
|
||||
type TankSearchProps = Omit<FlexProps, 'onSelect'> & {
|
||||
compact?: boolean;
|
||||
onSelect?: (tank: TankDefinition) => void;
|
||||
onSelectAll?: (tanks: TankDefinition[]) => void;
|
||||
};
|
||||
|
||||
const PREVIEW_COUNT = 25;
|
||||
const DEFAULT_LOADED_CARDS = 75;
|
||||
|
||||
export const TankSearch = memo<TankSearchProps>(
|
||||
({ compact, onSelect, onSelectAll, ...props }) => {
|
||||
const exempt = useAdExempt();
|
||||
const awaitedGameDefinitions = useAwait(gameDefinitions);
|
||||
const awaitedModelDefinitions = useAwait(modelDefinitions);
|
||||
const awaitedTankDefinitions = useAwait(tankDefinitions);
|
||||
const awaitedTanksDefinitionsArray = useAwait(tankDefinitionsArray);
|
||||
const awaitedTankNames = useAwait(tankNames);
|
||||
const tankFilters = useStore($tankFilters);
|
||||
const tankopediaSort = useStore($tankopediaSort);
|
||||
const tanksFiltered = useMemo(() => {
|
||||
console.log(awaitedTanksDefinitionsArray);
|
||||
|
||||
if (tankFilters.search === undefined) {
|
||||
const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
|
||||
filterTank(tankFilters, tank),
|
||||
);
|
||||
let sorted: TankDefinition[];
|
||||
|
||||
switch (tankopediaSort.by) {
|
||||
case 'meta.none':
|
||||
sorted = filtered
|
||||
.sort((a, b) => b.tier - a.tier)
|
||||
.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),
|
||||
)
|
||||
.sort((a, b) => a.tier - b.tier);
|
||||
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.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(
|
||||
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) =>
|
||||
resolveDpm(
|
||||
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;
|
||||
|
||||
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],
|
||||
)
|
||||
: 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],
|
||||
)
|
||||
: 0),
|
||||
);
|
||||
break;
|
||||
|
||||
case 'fire.reload':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
resolveReload(a.turrets.at(-1)!.guns.at(-1)!) -
|
||||
resolveReload(b.turrets.at(-1)!.guns.at(-1)!),
|
||||
);
|
||||
break;
|
||||
|
||||
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,
|
||||
);
|
||||
break;
|
||||
|
||||
case 'fire.standardPenetration':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
resolveNearPenetration(
|
||||
a.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
|
||||
) -
|
||||
resolveNearPenetration(
|
||||
b.turrets.at(-1)!.guns.at(-1)!.shells[0].penetration,
|
||||
),
|
||||
);
|
||||
break;
|
||||
|
||||
case 'fire.premiumPenetration':
|
||||
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,
|
||||
),
|
||||
);
|
||||
break;
|
||||
|
||||
case 'fire.damage':
|
||||
sorted = filtered.sort(
|
||||
(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.shellVelocity':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
a.turrets.at(-1)!.guns.at(-1)!.shells[0].speed -
|
||||
b.turrets.at(-1)!.guns.at(-1)!.shells[0].speed,
|
||||
);
|
||||
break;
|
||||
|
||||
case 'fire.aimTime':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
a.turrets.at(-1)!.guns.at(-1)!.aimTime -
|
||||
b.turrets.at(-1)!.guns.at(-1)!.aimTime,
|
||||
);
|
||||
break;
|
||||
|
||||
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,
|
||||
);
|
||||
break;
|
||||
|
||||
case 'fire.dispersionMoving':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
a.tracks.at(-1)!.dispersion.move -
|
||||
b.tracks.at(-1)!.dispersion.move,
|
||||
);
|
||||
break;
|
||||
|
||||
case 'fire.gunDepression':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
awaitedModelDefinitions[a.id].turrets[a.turrets.at(-1)!.id]
|
||||
.guns[a.turrets.at(-1)!.guns.at(-1)!.id].pitch.max +
|
||||
(awaitedModelDefinitions[a.id].turretRotation?.pitch ?? 0) -
|
||||
awaitedModelDefinitions[b.id].turrets[b.turrets.at(-1)!.id]
|
||||
.guns[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.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.weight':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
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.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':
|
||||
sorted = filtered.sort(
|
||||
(a, b) =>
|
||||
a.tracks.at(-1)!.traverseSpeed - b.tracks.at(-1)!.traverseSpeed,
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
return tankopediaSort.direction === 'ascending'
|
||||
? sorted
|
||||
: sorted.reverse();
|
||||
} else {
|
||||
const searchedRaw = fuzzysort.go(tankFilters.search, awaitedTankNames, {
|
||||
keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
|
||||
});
|
||||
const searchedTanks = searchedRaw.map(
|
||||
(result) => awaitedTankDefinitions[result.obj.id],
|
||||
);
|
||||
return searchedTanks;
|
||||
}
|
||||
}, [tankFilters, tankopediaSort]);
|
||||
const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_CARDS);
|
||||
const tanks = tanksFiltered.slice(0, loadedRows);
|
||||
|
||||
useEffect(() => {
|
||||
setLoadedRows(DEFAULT_LOADED_CARDS);
|
||||
}, [tankFilters, tankopediaSort]);
|
||||
|
||||
return (
|
||||
<Flex direction="column" gap="4" flexGrow="1" {...props}>
|
||||
<SearchBar topResult={tanks?.[0]} onSelect={onSelect} />
|
||||
|
||||
{!tankFilters.search && !tankFilters.searching && (
|
||||
<FilterControl compact={compact} />
|
||||
)}
|
||||
|
||||
<Flex mt="2" gap="1" align="center" justify="center" direction="column">
|
||||
<Flex gap="2">
|
||||
<Text color="gray">
|
||||
{tanksFiltered.length} tank{tanksFiltered.length === 1 ? '' : 's'}
|
||||
</Text>
|
||||
|
||||
{onSelectAll && (
|
||||
<Link
|
||||
underline="always"
|
||||
href="#"
|
||||
onClick={() => onSelectAll(tanksFiltered)}
|
||||
>
|
||||
Select all
|
||||
</Link>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{tankopediaSort.by !== 'meta.none' && (
|
||||
<Text color="gray">
|
||||
Sorting by {SORT_NAMES[tankopediaSort.by]}
|
||||
{SORT_UNITS[tankopediaSort.by] === undefined
|
||||
? ''
|
||||
: ` (${SORT_UNITS[tankopediaSort.by]})`}
|
||||
, {tankopediaSort.direction}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{tankFilters.testing === 'only' && (
|
||||
<Flex justify="center" mt="4">
|
||||
<Callout.Root color="amber">
|
||||
<Callout.Icon>
|
||||
<ExperimentIcon style={{ width: '1em', height: '1em' }} />
|
||||
</Callout.Icon>
|
||||
<Callout.Text>
|
||||
Tanks in testing are subject to change and may not represent the
|
||||
final product.
|
||||
</Callout.Text>
|
||||
</Callout.Root>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{!tankFilters.searching && (
|
||||
<>
|
||||
{tanks.length > 0 && (
|
||||
<TankCardWrapper>
|
||||
{tanks.map((tank, index) => (
|
||||
<Fragment key={tank.id}>
|
||||
<TankCard onSelect={onSelect} tank={tank} />
|
||||
|
||||
{!exempt &&
|
||||
!compact &&
|
||||
(index + 16) % 32 === 0 &&
|
||||
index !== tanks.length - 1 && (
|
||||
<AdMidSectionResponsive gridColumn="1 / -1" />
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
|
||||
{times(
|
||||
Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedRows),
|
||||
(index) => {
|
||||
return (
|
||||
<SkeletonTankCard
|
||||
key={index}
|
||||
onIntersection={() => {
|
||||
setLoadedRows((state) =>
|
||||
Math.min(state + 2, tanksFiltered.length),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</TankCardWrapper>
|
||||
)}
|
||||
|
||||
{tanks.length === 0 && <NoResults type="search" />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{tankFilters.searching && (
|
||||
<TankCardWrapper>
|
||||
{times(Math.round(10 + 10 * Math.random()), (index) => (
|
||||
<SkeletonTankCard key={index} />
|
||||
))}
|
||||
</TankCardWrapper>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
},
|
||||
);
|
||||
Reference in new issue
Block a user