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

feat: migrated tank search

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-09-17 22:13:35 -05:00
1 parent 0537418f6a
commit e241870ece
36 files changed
+868 -718
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/core/src/blitzkit/index.ts
+7 -7
View File
@@ -1,5 +1,5 @@
export * from './assertSecret';
// export * from './asset';
export * from './asset';
// export * from './availableProvisions';
// export * from './averageDefinitions';
// export * from './camouflageDefinitions';
@@ -24,14 +24,14 @@ export * from './gameDefinitions';
// export * from './isExplosive';
// export * from './linkBlitzAndDiscord';
// export * from './mapDefinitions';
// export * from './modelDefinitions';
// export * from './normalizeBoundingBox';
export * from './modelDefinitions';
export * from './normalizeBoundingBox';
// export * from './parseBkni';
// export * from './patientFetch';
// export * from './patientFetchJSON';
// export * from './progressiveStat';
// export * from './provisionDefinitions';
// export * from './resolveDpm';
export * from './resolveDpm';
// export * from './resolvePenetrationCoefficient';
// export * from './reviews';
// export * from './skillDefinitions';
@@ -39,9 +39,9 @@ export * from './gameDefinitions';
export * from './superCompress';
export * from './superDecompress';
export * from './tankDefinitions';
// export * from './tankIcon';
// export * from './tankNames';
// export * from './unionBoundingBox';
export * from './tankIcon';
export * from './tankNames';
export * from './unionBoundingBox';
// export * from './uniqueGuns';
// export * from './unwrapBlitzkitResponse';
// export * from './votes';
packages/core/src/blitzkit/tankNames.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { deburr } from 'lodash-es';
import { camouflageDefinitions, tankDefinitionsArray } from '.';
import { tankDefinitionsArray } from '.';
import { camouflageDefinitions } from './camouflageDefinitions';
export const tankNames = Promise.all([
tankDefinitionsArray,
packages/website-legacy/src/app/tools/performance/components/Controls.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { FilterControl } from '../../tankopedia/components/FilterControl';
import { FilterControl } from '../../../../../../website/src/components/TankSearch/components/FilterControl';
import { PlayerCountControl } from './PlayerCountControl';
export function Controls() {
packages/website-legacy/src/app/tools/tankopedia/[id]/components/Lighting.tsx
-8
View File
@@ -3,14 +3,6 @@ import { useModel } from '../../../../../hooks/useModel';
import * as Duel from '../../../../../stores/duel';
import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
export const ENVIRONMENTS = [
'lobby',
'apartment',
'warehouse',
'dawn',
'sunset',
] as const;
export function Lighting() {
const protagonist = Duel.use((state) => state.protagonist);
const { hasPbr } = useModel(protagonist.tank.id);
packages/website-legacy/src/app/tools/tankopedia/components/FilterControl.tsx
-372
View File
@@ -1,372 +0,0 @@
import {
asset,
gameDefinitions,
TANK_CLASSES,
Tier,
TIER_ROMAN_NUMERALS,
} from '@blitzkit/core';
import strings from '@blitzkit/core/lang/en-US.json';
import { ReloadIcon } from '@radix-ui/react-icons';
import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
import { times } from 'lodash-es';
import { use } from 'react';
import { classIcons } from '../../../../components/ClassIcon';
import { ExperimentIcon } from '../../../../components/ExperimentIcon';
import { ResearchedIcon } from '../../../../components/ResearchedIcon';
import { ScienceIcon } from '../../../../components/ScienceIcon';
import { ScienceOffIcon } from '../../../../components/ScienceOffIcon';
import * as TankFilters from '../../../../stores/tankFilters';
interface FilterControlProps {
compact?: boolean;
}
export function FilterControl({ compact }: FilterControlProps) {
const awaitedGameDefinitions = use(gameDefinitions);
const filters = TankFilters.use();
const mutateTankFilters = TankFilters.useMutation();
const tankFiltersStore = TankFilters.useStore();
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 = filters.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];
}
})
}
>
<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 = filters.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];
}
})
}
>
<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 = filters.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];
}
})
}
>
<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 = filters.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];
}
})
}
>
<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 = filters.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];
}
})
}
>
<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={filters.types?.includes('researchable') ? 'solid' : 'soft'}
radius="none"
color={filters.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'];
}
})
}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</IconButton>
</Tooltip>
<Tooltip content="Premium">
<IconButton
variant={filters.types?.includes('premium') ? 'solid' : 'soft'}
radius="none"
color={filters.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'];
}
})
}
>
<Text
color={filters.types?.includes('premium') ? undefined : 'amber'}
style={{ display: 'flex', justifyContent: 'center' }}
>
<ResearchedIcon style={{ width: '1em', height: '1em' }} />
</Text>
</IconButton>
</Tooltip>
<Tooltip content="Collector">
<IconButton
variant={filters.types?.includes('collector') ? 'solid' : 'soft'}
radius="none"
color={filters.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'];
}
})
}
>
<Text
color={filters.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={filters.testing === 'include' ? 'solid' : 'soft'}
radius="none"
color={filters.testing === 'include' ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
draft.testing = 'include';
})
}
>
<ExperimentIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
<Tooltip content="Exclude test tank">
<IconButton
variant={filters.testing === 'exclude' ? 'solid' : 'soft'}
radius="none"
color={filters.testing === 'exclude' ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
draft.testing = 'exclude';
})
}
>
<ScienceOffIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
<Tooltip content="Only test tank">
<IconButton
variant={filters.testing === 'only' ? 'solid' : 'soft'}
radius="none"
color={filters.testing === 'only' ? undefined : 'gray'}
highContrast
onClick={() =>
mutateTankFilters((draft) => {
draft.testing = 'only';
})
}
>
<ScienceIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }}
/>
</IconButton>
</Tooltip>
</Flex>
<Box>
<IconButton
color="red"
onClick={() => {
tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
}}
>
<ReloadIcon />
</IconButton>
</Box>
</Flex>
);
}
packages/website-legacy/src/app/tools/tankopedia/components/TierFilter.tsx
-51
View File
@@ -1,51 +0,0 @@
import { Tier, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
import { Flex, IconButton, Text } from '@radix-ui/themes';
import { times } from 'lodash-es';
import { memo } from 'react';
import * as TankFilters from '../../../../stores/tankFilters';
import * as TankopediaSort from '../../../../stores/tankopediaSort';
export const TierFilter = memo(() => {
const tierFilter = TankFilters.use((state) => state.tiers);
const sort = TankopediaSort.use();
const search = TankFilters.use((state) => state.search);
const mutateTankFilters = TankFilters.useMutation();
if (sort.by !== 'meta.none' || 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 = tierFilter.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];
}
})
}
>
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton>
);
})}
</Flex>
</Flex>
);
});
packages/website-legacy/tsconfig.json
+5 -1
View File
@@ -7,5 +7,9 @@
}
]
},
"include": ["src/**/*", ".next/types/**/*.ts"]
"include": [
"src/**/*",
".next/types/**/*.ts",
"../website/src/components/TankSearch/components/FilterControl.tsx"
]
}
packages/website/src/components/Ad.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import { imgur } from '@blitzkit/core';
import { Box, BoxProps, Text } from '@radix-ui/themes';
import { Box, type BoxProps, Text } from '@radix-ui/themes';
import { uniqueId } from 'lodash-es';
import { useEffect, useRef } from 'react';
import { Vector2Tuple } from 'three';
import type { Vector2Tuple } from 'three';
export enum AdType {
MediumRectangleHorizontalPurple = 738182777,
packages/website/src/components/AdMidSectionNarrowOnly.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Flex, FlexProps } from '@radix-ui/themes';
import { Flex, type FlexProps } from '@radix-ui/themes';
import { Ad, AdType } from './Ad';
export function AdMidSectionNarrowOnly(props: FlexProps) {
packages/website/src/components/AdMidSectionResponsive.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Flex, FlexProps } from '@radix-ui/themes';
import { Flex, type FlexProps } from '@radix-ui/themes';
import { Ad, AdType } from './Ad';
export function AdMidSectionResponsive(props: FlexProps) {
packages/website/src/components/AdMidSectionWideOnly.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Flex, FlexProps } from '@radix-ui/themes';
import { Flex, type FlexProps } from '@radix-ui/themes';
import { Ad, AdType } from './Ad';
export function AdMidSectionWideOnly(props: FlexProps) {
packages/website/src/components/ConsumablesManager.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { ConsumableEntry } from '@blitzkit/core';
import { Flex, FlexProps } from '@radix-ui/themes';
import { Flex, type FlexProps } from '@radix-ui/themes';
import { ConsumableButton } from './ModuleButtons/ConsumableButton';
type ConsumablesManagerProps = FlexProps & {
packages/website/src/components/Navbar.astro
-2
View File
@@ -18,11 +18,9 @@ import {
Text,
} from '@radix-ui/themes';
import { BRANCH_NAMES } from '../constants/branches';
import { NAVBAR_HEIGHT } from '../constants/navbar';
import { homeTool, TOOLS } from '../constants/tools';
import { PatreonIcon } from './PatreonIcon';
import { NavbarAccount } from './NavbarAccount';
import { TestComponent } from '../pages/TestComponent';
const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
const tools = [homeTool, ...toolsFiltered];
packages/website/src/components/PageWrapper.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { Flex, FlexProps, Theme } from '@radix-ui/themes';
import { Flex, type FlexProps, Theme } from '@radix-ui/themes';
import type { ComponentProps } from 'react';
import { RadixSize } from '../../../website-legacy/src/stores/embedState';
import type { RadixSize } from '../stores/embedState';
type PageWrapperProps = FlexProps & {
color?: ComponentProps<typeof Theme>['accentColor'];
packages/website/src/components/Speedometer.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import { Flex, FlexProps, Text } from '@radix-ui/themes';
import { ReactNode } from 'react';
import { Flex, type FlexProps, Text } from '@radix-ui/themes';
import type { ReactNode } from 'react';
type SpeedometerProps = FlexProps & {
value: ReactNode;
packages/website/src/components/TankSearch/components/FilterControl.tsx
+496
View File
@@ -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>
);
}
packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx → packages/website/src/components/TankSearch/components/NoResults.tsx
+4 -6
View File
@@ -1,13 +1,11 @@
import { Flex, Link, Text } from '@radix-ui/themes';
import * as TankFilters from '../../../../stores/tankFilters';
import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
interface NoResultsProps {
type?: 'filters' | 'search';
}
export function NoResults({ type = 'filters' }: NoResultsProps) {
const tankFiltersStore = TankFilters.useStore();
return (
<Flex flexGrow="1" align="center" justify="center">
<Text color="gray">
@@ -16,9 +14,9 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
href="#"
underline="always"
color="red"
onClick={() =>
tankFiltersStore.setState(tankFiltersStore.getInitialState(), true)
}
onClick={() => {
$tankFilters.set(initialTankFilters);
}}
>
{type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
</Link>
packages/website-legacy/src/app/tools/tankopedia/components/QuickLink.tsx → packages/website/src/components/TankSearch/components/QuickLink.tsx
+4 -4
View File
@@ -1,17 +1,17 @@
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 * as TankFilters from '../../../../stores/tankFilters';
import { $tankFilters } from '../../../stores/tankFilters';
interface QuickLinkProps {
topResult?: TankDefinition;
}
export function QuickLink({ topResult }: QuickLinkProps) {
const search = TankFilters.use((state) => state.search);
const searching = TankFilters.use((state) => state.searching);
const tankFilters = useStore($tankFilters);
if (!search || !topResult || searching) return null;
if (!tankFilters.search || !topResult || tankFilters.searching) return null;
return (
<TextField.Slot>
packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx → packages/website/src/components/TankSearch/components/SearchBar.tsx
+23 -16
View File
@@ -1,11 +1,12 @@
import { TankDefinition } from '@blitzkit/core';
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 { KeyboardEventHandler, useCallback, useRef } from 'react';
import * as TankFilters from '../../../../stores/tankFilters';
import { type KeyboardEventHandler, useCallback, useRef } from 'react';
import { QuickLink } from './QuickLink';
import { $tankFilters } from '../../../stores/tankFilters';
import { Sort } from './Sort';
interface SearchBarProps {
@@ -14,35 +15,41 @@ interface SearchBarProps {
}
export function SearchBar({ topResult, onSelect }: SearchBarProps) {
const tankFiltersStore = TankFilters.useStore();
const lastSearch = tankFiltersStore.getState().search;
const tankFilters = useStore($tankFilters);
const router = useRouter();
const input = useRef<HTMLInputElement>(null);
const searching = TankFilters.use((state) => state.searching);
const performSearch = useCallback(
debounce(() => {
tankFiltersStore.setState({ searching: false });
// 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,
});
// 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 (!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 || searching) return;
if (event.key !== 'Enter' || !topResult || tankFilters.searching) return;
event.preventDefault();
@@ -59,7 +66,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
<Flex justify="center" mt="4">
<Flex gap="2" flexGrow="1">
<TextField.Root
defaultValue={lastSearch}
defaultValue={tankFilters.search}
style={{ flex: 1 }}
ref={input}
placeholder="Search tanks..."
@@ -67,7 +74,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
onKeyDown={handleKeyDown}
>
<TextField.Slot>
{searching ? <Spinner /> : <MagnifyingGlassIcon />}
{tankFilters.searching ? <Spinner /> : <MagnifyingGlassIcon />}
</TextField.Slot>
<QuickLink topResult={topResult} />
packages/website-legacy/src/app/tools/tankopedia/components/SkeletonTankCard.tsx → packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Flex, Skeleton } from '@radix-ui/themes';
import { memo, useRef } from 'react';
import { useIntersection } from '../../../../hooks/useIntersection';
import { useIntersection } from '../../../hooks/useIntersection';
interface SkeletonTankCardProps {
onIntersection?: () => void;
packages/website-legacy/src/app/tools/tankopedia/components/Sort.tsx → packages/website/src/components/TankSearch/components/Sort.tsx
+89 -118
View File
@@ -1,11 +1,11 @@
import { useStore } from '@nanostores/react';
import { CaretDownIcon } from '@radix-ui/react-icons';
import { Button, DropdownMenu } from '@radix-ui/themes';
import { TankopediaSortDirection } from '../../../../stores/tankopediaPersistent';
import * as TankopediaSort from '../../../../stores/tankopediaSort';
import type { TankopediaSortDirection } from '../../../stores/tankopediaPersistent';
import { $tankopediaSort } from '../../../stores/tankopediaSort';
export function Sort() {
const sort = TankopediaSort.use();
const mutateTankopediaSort = TankopediaSort.useMutation();
const tankopediaSort = useStore($tankopediaSort);
return (
<DropdownMenu.Root modal={false}>
@@ -18,11 +18,12 @@ export function Sort() {
<DropdownMenu.Content align="end">
<DropdownMenu.CheckboxItem
checked={sort.by === 'meta.none'}
checked={tankopediaSort.by === 'meta.none'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'meta.none';
});
// mutateTankopediaSort((draft) => {
// draft.by = 'meta.none';
// });
$tankopediaSort.setKey('by', 'meta.none');
}}
>
No sort
@@ -34,131 +35,123 @@ export function Sort() {
<DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dpm'}
checked={tankopediaSort.by === 'fire.dpm'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.dpm';
});
// mutateTankopediaSort((draft) => {
// draft.by = 'fire.dpm';
// });
$tankopediaSort.setKey('by', 'fire.dpm');
}}
>
Standard DPM
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dpmPremium'}
checked={tankopediaSort.by === 'fire.dpmPremium'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.dpmPremium';
});
// mutateTankopediaSort((draft) => {
// draft.by = 'fire.dpmPremium';
// });
$tankopediaSort.setKey('by', 'fire.dpmPremium');
}}
>
Premium DPM
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.reload'}
checked={tankopediaSort.by === 'fire.reload'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.reload';
});
// mutateTankopediaSort((draft) => {
// draft.by = 'fire.reload';
// });
$tankopediaSort.setKey('by', 'fire.reload');
}}
>
Reload
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.caliber'}
checked={tankopediaSort.by === 'fire.caliber'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.caliber';
});
// mutateTankopediaSort((draft) => {
// draft.by = 'fire.caliber';
// });
$tankopediaSort.setKey('by', 'fire.caliber');
}}
>
Caliber
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.standardPenetration'}
checked={tankopediaSort.by === 'fire.standardPenetration'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.standardPenetration';
});
// mutateTankopediaSort((draft) => {
// draft.by = 'fire.standardPenetration';
// });
$tankopediaSort.setKey('by', 'fire.standardPenetration');
}}
>
Standard penetration
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.premiumPenetration'}
checked={tankopediaSort.by === 'fire.premiumPenetration'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.premiumPenetration';
});
// mutateTankopediaSort((draft) => {
// draft.by = 'fire.premiumPenetration';
// });
$tankopediaSort.setKey('by', 'fire.premiumPenetration');
}}
>
Premium penetration
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.damage'}
checked={tankopediaSort.by === 'fire.damage'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.damage';
});
$tankopediaSort.setKey('by', 'fire.damage');
}}
>
Damage
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.shellVelocity'}
checked={tankopediaSort.by === 'fire.shellVelocity'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.shellVelocity';
});
$tankopediaSort.setKey('by', 'fire.shellVelocity');
}}
>
Shell velocity
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.aimTime'}
checked={tankopediaSort.by === 'fire.aimTime'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.aimTime';
});
$tankopediaSort.setKey('by', 'fire.aimTime');
}}
>
Aim time
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dispersionStill'}
checked={tankopediaSort.by === 'fire.dispersionStill'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.dispersionStill';
});
$tankopediaSort.setKey('by', 'fire.dispersionStill');
}}
>
Dispersion still
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dispersionMoving'}
checked={tankopediaSort.by === 'fire.dispersionMoving'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.dispersionMoving';
});
$tankopediaSort.setKey('by', 'fire.dispersionMoving');
}}
>
Dispersion moving
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.gunDepression'}
checked={tankopediaSort.by === 'fire.gunDepression'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.gunDepression';
});
$tankopediaSort.setKey('by', 'fire.gunDepression');
}}
>
Gun depression
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'fire.gunElevation'}
checked={tankopediaSort.by === 'fire.gunElevation'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'fire.gunElevation';
});
$tankopediaSort.setKey('by', 'fire.gunElevation');
}}
>
Gun elevation
@@ -170,61 +163,49 @@ export function Sort() {
<DropdownMenu.SubTrigger>Maneuverability</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent>
<DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.forwardsSpeed'}
checked={tankopediaSort.by === 'maneuverability.forwardsSpeed'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'maneuverability.forwardsSpeed';
});
$tankopediaSort.setKey('by', 'maneuverability.forwardsSpeed');
}}
>
Forwards speed
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.backwardsSpeed'}
checked={tankopediaSort.by === 'maneuverability.backwardsSpeed'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'maneuverability.backwardsSpeed';
});
$tankopediaSort.setKey('by', 'maneuverability.backwardsSpeed');
}}
>
Backwards speed
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.power'}
checked={tankopediaSort.by === 'maneuverability.power'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'maneuverability.power';
});
$tankopediaSort.setKey('by', 'maneuverability.power');
}}
>
Power
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.powerToWeight'}
checked={tankopediaSort.by === 'maneuverability.powerToWeight'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'maneuverability.powerToWeight';
});
$tankopediaSort.setKey('by', 'maneuverability.powerToWeight');
}}
>
Power to weight
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.weight'}
checked={tankopediaSort.by === 'maneuverability.weight'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'maneuverability.weight';
});
$tankopediaSort.setKey('by', 'maneuverability.weight');
}}
>
Weight
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.traverseSpeed'}
checked={tankopediaSort.by === 'maneuverability.traverseSpeed'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'maneuverability.traverseSpeed';
});
$tankopediaSort.setKey('by', 'maneuverability.traverseSpeed');
}}
>
Traverse speed
@@ -236,71 +217,60 @@ export function Sort() {
<DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent>
<DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.health'}
checked={tankopediaSort.by === 'survivability.health'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'survivability.health';
});
$tankopediaSort.setKey('by', 'survivability.health');
}}
>
Health
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.viewRange'}
checked={tankopediaSort.by === 'survivability.viewRange'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'survivability.viewRange';
});
$tankopediaSort.setKey('by', 'survivability.viewRange');
}}
>
View range
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageStill'}
checked={tankopediaSort.by === 'survivability.camouflageStill'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'survivability.camouflageStill';
});
$tankopediaSort.setKey('by', 'survivability.camouflageStill');
}}
>
Camouflage
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageMoving'}
checked={tankopediaSort.by === 'survivability.camouflageMoving'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'survivability.camouflageMoving';
});
$tankopediaSort.setKey('by', 'survivability.camouflageMoving');
}}
>
Camouflage moving
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageShooting'}
checked={tankopediaSort.by === 'survivability.camouflageShooting'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'survivability.camouflageShooting';
});
$tankopediaSort.setKey(
'by',
'survivability.camouflageShooting',
);
}}
>
Camouflage shooting
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.volume'}
checked={tankopediaSort.by === 'survivability.volume'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'survivability.volume';
});
$tankopediaSort.setKey('by', 'survivability.volume');
}}
>
Volume
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.length'}
checked={tankopediaSort.by === 'survivability.length'}
onClick={() => {
mutateTankopediaSort((draft) => {
draft.by = 'survivability.length';
});
$tankopediaSort.setKey('by', 'survivability.length');
}}
>
Length
@@ -310,12 +280,13 @@ export function Sort() {
<DropdownMenu.Label>Direction</DropdownMenu.Label>
<DropdownMenu.RadioGroup
value={sort.direction}
onValueChange={(value) =>
mutateTankopediaSort((draft) => {
draft.direction = value as TankopediaSortDirection;
})
}
value={tankopediaSort.direction}
onValueChange={(value) => {
$tankopediaSort.setKey(
'direction',
value as TankopediaSortDirection,
);
}}
>
<DropdownMenu.RadioItem value="ascending">
Ascending
packages/website-legacy/src/app/tools/tankopedia/components/TankCard.css.ts → packages/website/src/components/TankSearch/components/TankCard.css.ts
View File
File renamed without changes.
packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx → packages/website/src/components/TankSearch/components/TankCard.tsx
+14 -12
View File
@@ -4,17 +4,19 @@ import {
normalizeBoundingBox,
resolveDpm,
resolveNearPenetration,
TankDefinition,
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 { use, useMemo } from 'react';
import { classIcons } from '../../../../components/ClassIcon';
import { resolveReload } from '../../../../core/blitzkit/resolveReload';
import * as TankopediaSort from '../../../../stores/tankopediaSort';
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 {
@@ -23,11 +25,11 @@ interface TankCardProps {
}
export function TankCard({ tank, onSelect }: TankCardProps) {
const awaitedModelDefinitions = use(modelDefinitions);
const awaitedModelDefinitions = useAwait(modelDefinitions);
const Icon = classIcons[tank.class];
const sortBy = TankopediaSort.use((state) => state.by);
const tankopediaSort = useStore($tankopediaSort);
const discriminator = useMemo(() => {
if (sortBy.startsWith('meta')) return undefined;
if (tankopediaSort.by.startsWith('meta')) return undefined;
const turret = tank.turrets.at(-1)!;
const gun = turret.guns.at(-1)!;
@@ -39,7 +41,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
const turretModelDefinition = tankModelDefinition.turrets[turret.id];
const gunModelDefinition = turretModelDefinition.guns[gun.id];
switch (sortBy) {
switch (tankopediaSort.by) {
case 'fire.aimTime':
return gun.aimTime.toFixed(2);
case 'fire.caliber':
@@ -131,7 +133,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
),
).toFixed(0);
}
}, [sortBy]);
}, [tankopediaSort.by]);
return (
<Text
@@ -141,8 +143,8 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
tank.treeType === 'collector'
? 'blue'
: tank.treeType === 'premium'
? 'amber'
: 'gray'
? 'amber'
: 'gray'
}
highContrast={tank.treeType === 'researchable'}
onClick={onSelect ? () => onSelect(tank) : undefined}
packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx → packages/website/src/components/TankSearch/components/TankCardWrapper.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { Grid, GridProps } from '@radix-ui/themes';
import { Grid, type GridProps } from '@radix-ui/themes';
export function TankCardWrapper(props: GridProps) {
return (
packages/website/src/components/TankSearch/components/TierFilter.tsx
+60
View File
@@ -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>
);
});
packages/website-legacy/src/app/tools/tankopedia/components/TankSearch/constants.tsx → packages/website/src/components/TankSearch/constants.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { TreeType } from '@blitzkit/core';
import type { TreeType } from '@blitzkit/core';
export const treeTypeOrder: TreeType[] = [
'researchable',
packages/website-legacy/src/app/tools/tankopedia/components/TankSearch/index.tsx → packages/website/src/components/TankSearch/index.tsx
+47 -41
View File
@@ -1,6 +1,5 @@
import {
TANK_CLASSES,
TankDefinition,
gameDefinitions,
modelDefinitions,
normalizeBoundingBox,
@@ -10,28 +9,31 @@ import {
tankDefinitionsArray,
tankNames,
unionBoundingBox,
type TankDefinition,
} from '@blitzkit/core';
import { Callout, Flex, FlexProps, Link, Text } from '@radix-ui/themes';
import { go } from 'fuzzysort';
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, use, useEffect, useMemo, useState } from 'react';
import { AdMidSectionResponsive } from '../../../../../components/AdMidSectionResponsive';
import { ExperimentIcon } from '../../../../../components/ExperimentIcon';
import { filterTank } from '../../../../../core/blitzkit/filterTank';
import { resolveReload } from '../../../../../core/blitzkit/resolveReload';
import { useAdExempt } from '../../../../../hooks/useAdExempt';
import * as TankFilters from '../../../../../stores/tankFilters';
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 * as TankopediaSort from '../../../../../stores/tankopediaSort';
import { FilterControl } from '../FilterControl';
import { NoResults } from '../NoResults';
import { SearchBar } from '../SearchBar';
import { SkeletonTankCard } from '../SkeletonTankCard';
import { TankCard } from '../TankCard';
import { TankCardWrapper } from '../TankCardWrapper';
} 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'> & {
@@ -46,21 +48,23 @@ const DEFAULT_LOADED_CARDS = 75;
export const TankSearch = memo<TankSearchProps>(
({ compact, onSelect, onSelectAll, ...props }) => {
const exempt = useAdExempt();
const awaitedGameDefinitions = use(gameDefinitions);
const awaitedModelDefinitions = use(modelDefinitions);
const awaitedTankDefinitions = use(tankDefinitions);
const awaitedTanksDefinitionsArray = use(tankDefinitionsArray);
const awaitedTankNames = use(tankNames);
const filters = TankFilters.use();
const sort = TankopediaSort.use();
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(() => {
if (filters.search === undefined) {
console.log(awaitedTanksDefinitionsArray);
if (tankFilters.search === undefined) {
const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
filterTank(filters, tank),
filterTank(tankFilters, tank),
);
let sorted: TankDefinition[];
switch (sort.by) {
switch (tankopediaSort.by) {
case 'meta.none':
sorted = filtered
.sort((a, b) => b.tier - a.tier)
@@ -370,9 +374,11 @@ export const TankSearch = memo<TankSearchProps>(
break;
}
return sort.direction === 'ascending' ? sorted : sorted.reverse();
return tankopediaSort.direction === 'ascending'
? sorted
: sorted.reverse();
} else {
const searchedRaw = go(filters.search, awaitedTankNames, {
const searchedRaw = fuzzysort.go(tankFilters.search, awaitedTankNames, {
keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
});
const searchedTanks = searchedRaw.map(
@@ -380,19 +386,19 @@ export const TankSearch = memo<TankSearchProps>(
);
return searchedTanks;
}
}, [filters, sort]);
}, [tankFilters, tankopediaSort]);
const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_CARDS);
const tanks = tanksFiltered.slice(0, loadedRows);
useEffect(() => {
setLoadedRows(DEFAULT_LOADED_CARDS);
}, [filters, sort]);
}, [tankFilters, tankopediaSort]);
return (
<Flex direction="column" gap="4" flexGrow="1" {...props}>
<SearchBar topResult={tanks?.[0]} onSelect={onSelect} />
{!filters.search && !filters.searching && (
{!tankFilters.search && !tankFilters.searching && (
<FilterControl compact={compact} />
)}
@@ -413,18 +419,18 @@ export const TankSearch = memo<TankSearchProps>(
)}
</Flex>
{sort.by !== 'meta.none' && (
{tankopediaSort.by !== 'meta.none' && (
<Text color="gray">
Sorting by {SORT_NAMES[sort.by]}
{SORT_UNITS[sort.by] === undefined
Sorting by {SORT_NAMES[tankopediaSort.by]}
{SORT_UNITS[tankopediaSort.by] === undefined
? ''
: ` (${SORT_UNITS[sort.by]})`}
, {sort.direction}
: ` (${SORT_UNITS[tankopediaSort.by]})`}
, {tankopediaSort.direction}
</Text>
)}
</Flex>
{filters.testing === 'only' && (
{tankFilters.testing === 'only' && (
<Flex justify="center" mt="4">
<Callout.Root color="amber">
<Callout.Icon>
@@ -438,7 +444,7 @@ export const TankSearch = memo<TankSearchProps>(
</Flex>
)}
{!filters.searching && (
{!tankFilters.searching && (
<>
{tanks.length > 0 && (
<TankCardWrapper>
@@ -477,7 +483,7 @@ export const TankSearch = memo<TankSearchProps>(
</>
)}
{filters.searching && (
{tankFilters.searching && (
<TankCardWrapper>
{times(Math.round(10 + 10 * Math.random()), (index) => (
<SkeletonTankCard key={index} />
packages/website/src/constants/lightingEnvironments.ts
+7
View File
@@ -0,0 +1,7 @@
export const ENVIRONMENTS = [
'lobby',
'apartment',
'warehouse',
'dawn',
'sunset',
] as const;
packages/website/src/hooks/useIntersection.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { RefObject, useLayoutEffect, useRef } from 'react';
import { type RefObject, useLayoutEffect, useRef } from 'react';
interface UseIntersectionOptions extends IntersectionObserverInit {
disabled: boolean;
packages/website/src/layouts/ToolLayout.astro
+66
View File
@@ -0,0 +1,66 @@
---
import { imgur, ImgurSize } from '@blitzkit/core';
import { Box, Flex, Heading, Text } from '@radix-ui/themes';
import { TOOLS } from '../constants/tools';
import RootLayout from './RootLayout.astro';
const { pathname } = Astro.url;
const pathSplit = pathname.split('/');
const toolId = pathSplit.at(2);
const isToolRoot = pathname === `/tools/${toolId}`;
const tool = TOOLS.find((tool) => tool.id === toolId);
---
<RootLayout>
{
tool && (
<>
{isToolRoot && (
<>
<title>{tool.title}</title>
<meta property="og:image" content={imgur(tool.image)} />
{tool.pageDescription !== undefined && (
<>
<meta name="description" content={tool.pageDescription} />
<meta
property="og:description"
content={tool.pageDescription}
/>
</>
)}
</>
)}
</>
)
}
{
pathSplit.length === 3 && (
<Box
style={{
backgroundImage: `url(${imgur(tool!.image, {
format: 'jpeg',
size: ImgurSize.HugeThumbnail,
})})`,
backgroundSize: 'cover',
}}
>
<Flex
direction="column"
align="center"
py="6"
style={{
backdropFilter: 'blur(4rem)',
WebkitBackdropFilter: 'blur(4rem)',
}}
>
<Heading size="7">{tool?.title}</Heading>
<Text>{tool?.description}</Text>
</Flex>
</Box>
)
}
<slot />
</RootLayout>
packages/website/src/pages/TestComponent.tsx
-21
View File
@@ -1,21 +0,0 @@
import { Button, Flex, Popover, Text } from '@radix-ui/themes';
import { BlitzKitTheme } from '../components/BlitzKitTheme';
export function TestComponent() {
return (
<Popover.Root>
<Popover.Trigger>
<Button>Radix UI</Button>
</Popover.Trigger>
<BlitzKitTheme>
<Popover.Content>
<Flex direction="column">
<Text>I should be in a dark mode popover</Text>
<Button>And I should be yellow and have full border radius!</Button>
</Flex>
</Popover.Content>
</BlitzKitTheme>
</Popover.Root>
);
}
packages/website/src/pages/test.astro
-16
View File
@@ -1,16 +0,0 @@
---
import { BlitzKitTheme } from '../components/BlitzKitTheme';
import { TestComponent } from './TestComponent';
---
<style is:global>
@import '@radix-ui/themes/styles.css';
</style>
<html>
<body>
<BlitzKitTheme>
<TestComponent client:idle />
</BlitzKitTheme>
</body>
</html>
packages/website/src/pages/tools/tankopedia/index.astro
+8
View File
@@ -0,0 +1,8 @@
---
import { TankSearch } from '../../../components/TankSearch';
import ToolLayout from '../../../layouts/ToolLayout.astro';
---
<ToolLayout>
<TankSearch />
</ToolLayout>
packages/website/src/stores/tankFilters.ts
+13 -15
View File
@@ -1,6 +1,5 @@
import { TankClass, Tier, TreeType } from '@blitzkit/core';
import { create } from 'zustand';
import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
import type { TankClass, Tier, TreeType } from '@blitzkit/core';
import { map } from 'nanostores';
export interface TankFilters {
tiers: Tier[];
@@ -12,15 +11,14 @@ export interface TankFilters {
searching: boolean;
}
export const { Provider, use, useMutation, useStore } =
createContextualSafeStore(() =>
create<TankFilters>()(() => ({
tiers: [],
nations: [],
classes: [],
types: [],
testing: 'include',
search: undefined,
searching: false,
})),
);
export const initialTankFilters: TankFilters = {
tiers: [],
nations: [],
classes: [],
types: [],
testing: 'include',
search: undefined,
searching: false,
};
export const $tankFilters = map<TankFilters>(initialTankFilters);
packages/website/src/stores/tankopediaPersistent/index.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { TankClass, Tier, TreeType } from '@blitzkit/core';
import lodash from 'lodash-es';
import { create } from 'zustand';
import { persist, subscribeWithSelector } from 'zustand/middleware';
import { ENVIRONMENTS } from '../../app/tools/tankopedia/[id]/components/Lighting';
import { ENVIRONMENTS } from '../../constants/lightingEnvironments';
import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
import { SORT_NAMES, TankopediaDisplay } from './constants';
packages/website/src/stores/tankopediaSort.ts
+7 -11
View File
@@ -1,8 +1,7 @@
import { create } from 'zustand';
import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
import { map } from 'nanostores';
import {
TankopediaSortBy,
TankopediaSortDirection,
type TankopediaSortBy,
type TankopediaSortDirection,
} from './tankopediaPersistent';
export interface TankopediaSort {
@@ -10,10 +9,7 @@ export interface TankopediaSort {
direction: TankopediaSortDirection;
}
export const { Provider, use, useMutation, useStore } =
createContextualSafeStore(() =>
create<TankopediaSort>()(() => ({
by: 'meta.none',
direction: 'descending',
})),
);
export const $tankopediaSort = map<TankopediaSort>({
by: 'meta.none',
direction: 'descending',
});