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

feat: progress on tankopedia search

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-09-17 20:23:22 -05:00
1 parent c873c32d09
commit eebc33581c
20 files changed
+236 -208
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

bun.lockb
BIN
View File
Binary file not shown.
packages/core/src/blitzkit/index.ts
+5 -5
View File
@@ -1,5 +1,5 @@
export * from './assertSecret'; export * from './assertSecret';
// export * from './asset'; export * from './asset';
// export * from './availableProvisions'; // export * from './availableProvisions';
// export * from './averageDefinitions'; // export * from './averageDefinitions';
// export * from './camouflageDefinitions'; // export * from './camouflageDefinitions';
@@ -25,13 +25,13 @@ export * from './gameDefinitions';
// export * from './linkBlitzAndDiscord'; // export * from './linkBlitzAndDiscord';
// export * from './mapDefinitions'; // export * from './mapDefinitions';
export * from './modelDefinitions'; export * from './modelDefinitions';
// export * from './normalizeBoundingBox'; export * from './normalizeBoundingBox';
// export * from './parseBkni'; // export * from './parseBkni';
// export * from './patientFetch'; // export * from './patientFetch';
// export * from './patientFetchJSON'; // export * from './patientFetchJSON';
// export * from './progressiveStat'; // export * from './progressiveStat';
// export * from './provisionDefinitions'; // export * from './provisionDefinitions';
// export * from './resolveDpm'; export * from './resolveDpm';
// export * from './resolvePenetrationCoefficient'; // export * from './resolvePenetrationCoefficient';
// export * from './reviews'; // export * from './reviews';
// export * from './skillDefinitions'; // export * from './skillDefinitions';
@@ -39,9 +39,9 @@ export * from './modelDefinitions';
export * from './superCompress'; export * from './superCompress';
export * from './superDecompress'; export * from './superDecompress';
export * from './tankDefinitions'; export * from './tankDefinitions';
// export * from './tankIcon'; export * from './tankIcon';
export * from './tankNames'; export * from './tankNames';
// export * from './unionBoundingBox'; export * from './unionBoundingBox';
// export * from './uniqueGuns'; // export * from './uniqueGuns';
// export * from './unwrapBlitzkitResponse'; // export * from './unwrapBlitzkitResponse';
// export * from './votes'; // export * from './votes';
packages/core/src/blitzkit/tankNames.ts
+2 -1
View File
@@ -1,5 +1,6 @@
import { deburr } from 'lodash-es'; import { deburr } from 'lodash-es';
import { camouflageDefinitions, tankDefinitionsArray } from '.'; import { camouflageDefinitions } from './camouflageDefinitions';
import { tankDefinitionsArray } from './tankDefinitions';
export const tankNames = Promise.all([ export const tankNames = Promise.all([
tankDefinitionsArray, 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'; import { PlayerCountControl } from './PlayerCountControl';
export function Controls() { export function Controls() {
packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemer
import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent'; import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent';
import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants'; import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
import { Controls } from '../Control'; import { Controls } from '../Control';
import { Lighting } from '../Lighting'; import { Lighting } from '../../../../../../../../website/src/components/Sandbox/components/Lighting';
import { SceneProps } from '../SceneProps'; import { SceneProps } from '../SceneProps';
import { AutoClear } from './AutoClear'; import { AutoClear } from './AutoClear';
import { ModelLoader } from './components/ModelLoader'; import { ModelLoader } from './components/ModelLoader';
packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/Options/index.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaE
import * as TankopediaPersistent from '../../../../../../../../stores/tankopediaPersistent'; import * as TankopediaPersistent from '../../../../../../../../stores/tankopediaPersistent';
import { TankopediaDisplay } from '../../../../../../../../stores/tankopediaPersistent/constants'; import { TankopediaDisplay } from '../../../../../../../../stores/tankopediaPersistent/constants';
import { TankSearch } from '../../../../../components/TankSearch'; import { TankSearch } from '../../../../../components/TankSearch';
import { ENVIRONMENTS } from '../../../Lighting'; import { ENVIRONMENTS } from '../../../../../../../../../../website/src/components/Sandbox/components/Lighting';
import { QuickInputs } from '../../../QuickInputs'; import { QuickInputs } from '../../../QuickInputs';
import { Thicknesses } from '../../../Thicknesses'; import { Thicknesses } from '../../../Thicknesses';
import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher'; import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher';
packages/website-legacy/tsconfig.json
+2 -6
View File
@@ -1,11 +1,7 @@
{ {
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"plugins": [ "plugins": [{ "name": "next" }]
{
"name": "next"
}
]
}, },
"include": ["src/**/*", ".next/types/**/*.ts"] "include": ["src/**/*", ".next/types/**/*.ts", "../website/src/components/Sandbox/components/Lighting.tsx"]
} }
packages/website/package.json
+1
View File
@@ -12,6 +12,7 @@
"@astrojs/check": "^0.9.3", "@astrojs/check": "^0.9.3",
"@astrojs/react": "^3.6.2", "@astrojs/react": "^3.6.2",
"@blitzkit/core": "workspace:*", "@blitzkit/core": "workspace:*",
"fuzzysort": "^2.0.4",
"@nanostores/persistent": "^0.10.2", "@nanostores/persistent": "^0.10.2",
"@nanostores/react": "^0.7.3", "@nanostores/react": "^0.7.3",
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-icons": "^1.3.0",
packages/website-legacy/src/app/tools/tankopedia/[id]/components/Lighting.tsx → packages/website/src/components/Sandbox/components/Lighting.tsx
-3
View File
@@ -1,7 +1,4 @@
import { Environment } from '@react-three/drei'; import { Environment } from '@react-three/drei';
import { useModel } from '../../../../../hooks/useModel';
import * as Duel from '../../../../../stores/duel';
import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
export const ENVIRONMENTS = [ export const ENVIRONMENTS = [
'lobby', 'lobby',
packages/website-legacy/src/app/tools/tankopedia/components/FilterControl.tsx → packages/website/src/components/TankSearch/components/FilterControl.tsx
+132 -105
View File
@@ -2,20 +2,21 @@ import {
asset, asset,
gameDefinitions, gameDefinitions,
TANK_CLASSES, TANK_CLASSES,
Tier,
TIER_ROMAN_NUMERALS, TIER_ROMAN_NUMERALS,
type Tier,
} from '@blitzkit/core'; } from '@blitzkit/core';
import strings from '@blitzkit/core/lang/en-US.json'; import strings from '@blitzkit/core/lang/en-US.json';
import { useStore } from '@nanostores/react';
import { ReloadIcon } from '@radix-ui/react-icons'; import { ReloadIcon } from '@radix-ui/react-icons';
import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes'; import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
import { times } from 'lodash-es'; import { times } from 'lodash-es';
import { use } from 'react'; import { use } from 'react';
import { classIcons } from '../../../../components/ClassIcon'; import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
import { ExperimentIcon } from '../../../../components/ExperimentIcon'; import { classIcons } from '../../ClassIcon';
import { ResearchedIcon } from '../../../../components/ResearchedIcon'; import { ExperimentIcon } from '../../ExperimentIcon';
import { ScienceIcon } from '../../../../components/ScienceIcon'; import { ResearchedIcon } from '../../ResearchedIcon';
import { ScienceOffIcon } from '../../../../components/ScienceOffIcon'; import { ScienceIcon } from '../../ScienceIcon';
import * as TankFilters from '../../../../stores/tankFilters'; import { ScienceOffIcon } from '../../ScienceOffIcon';
interface FilterControlProps { interface FilterControlProps {
compact?: boolean; compact?: boolean;
@@ -23,9 +24,7 @@ interface FilterControlProps {
export function FilterControl({ compact }: FilterControlProps) { export function FilterControl({ compact }: FilterControlProps) {
const awaitedGameDefinitions = use(gameDefinitions); const awaitedGameDefinitions = use(gameDefinitions);
const filters = TankFilters.use(); const tankFilters = useStore($tankFilters);
const mutateTankFilters = TankFilters.useMutation();
const tankFiltersStore = TankFilters.useStore();
return ( return (
<Flex height="fit-content" gap="2" align="start" justify="center"> <Flex height="fit-content" gap="2" align="start" justify="center">
@@ -37,7 +36,7 @@ export function FilterControl({ compact }: FilterControlProps) {
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}> <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{times(5, (index) => { {times(5, (index) => {
const tier = (index + 1) as Tier; const tier = (index + 1) as Tier;
const selected = filters.tiers?.includes(tier); const selected = tankFilters.tiers?.includes(tier);
return ( return (
<Tooltip key={tier} content={`Tier ${tier}`}> <Tooltip key={tier} content={`Tier ${tier}`}>
@@ -47,15 +46,19 @@ export function FilterControl({ compact }: FilterControlProps) {
radius="none" radius="none"
color={selected ? undefined : 'gray'} color={selected ? undefined : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.tiers?.includes(tier)) {
if (draft.tiers?.includes(tier)) { $tankFilters.setKey(
draft.tiers = draft.tiers?.filter((t) => t !== tier); 'tiers',
tankFilters.tiers.filter((t) => t !== tier),
);
} else { } else {
draft.tiers = [...(draft.tiers ?? []), tier]; $tankFilters.setKey('tiers', [
} ...(tankFilters.tiers ?? []),
}) tier,
]);
} }
}}
> >
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text> <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton> </IconButton>
@@ -66,7 +69,7 @@ export function FilterControl({ compact }: FilterControlProps) {
<Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}> <Flex direction={compact ? 'column' : { sm: 'row', initial: 'column' }}>
{times(5, (index) => { {times(5, (index) => {
const tier = (index + 6) as Tier; const tier = (index + 6) as Tier;
const selected = filters.tiers?.includes(tier); const selected = tankFilters.tiers?.includes(tier);
return ( return (
<Tooltip key={tier} content={`Tier ${tier}`}> <Tooltip key={tier} content={`Tier ${tier}`}>
@@ -76,15 +79,19 @@ export function FilterControl({ compact }: FilterControlProps) {
radius="none" radius="none"
color={selected ? undefined : 'gray'} color={selected ? undefined : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.tiers?.includes(tier)) {
if (draft.tiers?.includes(tier)) { $tankFilters.setKey(
draft.tiers = draft.tiers?.filter((t) => t !== tier); 'tiers',
tankFilters.tiers.filter((t) => t !== tier),
);
} else { } else {
draft.tiers = [...(draft.tiers ?? []), tier]; $tankFilters.setKey('tiers', [
} ...(tankFilters.tiers ?? []),
}) tier,
]);
} }
}}
> >
<Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text> <Text size="2">{TIER_ROMAN_NUMERALS[tier]}</Text>
</IconButton> </IconButton>
@@ -103,7 +110,7 @@ export function FilterControl({ compact }: FilterControlProps) {
{awaitedGameDefinitions.nations {awaitedGameDefinitions.nations
.slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2)) .slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2))
.map((nation) => { .map((nation) => {
const selected = filters.nations?.includes(nation); const selected = tankFilters.nations?.includes(nation);
return ( return (
<Tooltip <Tooltip
@@ -119,17 +126,19 @@ export function FilterControl({ compact }: FilterControlProps) {
color={selected ? undefined : 'gray'} color={selected ? undefined : 'gray'}
highContrast highContrast
radius="none" radius="none"
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.nations?.includes(nation)) {
if (draft.nations?.includes(nation)) { $tankFilters.setKey(
draft.nations = draft.nations?.filter( 'nations',
(n) => n !== nation, tankFilters.nations.filter((n) => n !== nation),
); );
} else { } else {
draft.nations = [...(draft.nations ?? []), nation]; $tankFilters.setKey('nations', [
} ...(tankFilters.nations ?? []),
}) nation,
]);
} }
}}
> >
<img <img
style={{ width: '1em', height: '1em' }} style={{ width: '1em', height: '1em' }}
@@ -144,7 +153,7 @@ export function FilterControl({ compact }: FilterControlProps) {
{awaitedGameDefinitions.nations {awaitedGameDefinitions.nations
.slice(Math.ceil(awaitedGameDefinitions.nations.length / 2)) .slice(Math.ceil(awaitedGameDefinitions.nations.length / 2))
.map((nation) => { .map((nation) => {
const selected = filters.nations?.includes(nation); const selected = tankFilters.nations?.includes(nation);
return ( return (
<Tooltip <Tooltip
@@ -162,17 +171,19 @@ export function FilterControl({ compact }: FilterControlProps) {
color={selected ? undefined : 'gray'} color={selected ? undefined : 'gray'}
highContrast highContrast
radius="none" radius="none"
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.nations?.includes(nation)) {
if (draft.nations?.includes(nation)) { $tankFilters.setKey(
draft.nations = draft.nations?.filter( 'nations',
(n) => n !== nation, tankFilters.nations.filter((n) => n !== nation),
); );
} else { } else {
draft.nations = [...(draft.nations ?? []), nation]; $tankFilters.setKey('nations', [
} ...(tankFilters.nations ?? []),
}) nation,
]);
} }
}}
> >
<img <img
style={{ width: '1em', height: '1em' }} style={{ width: '1em', height: '1em' }}
@@ -192,7 +203,7 @@ export function FilterControl({ compact }: FilterControlProps) {
> >
{TANK_CLASSES.map((tankClass) => { {TANK_CLASSES.map((tankClass) => {
const Icon = classIcons[tankClass]; const Icon = classIcons[tankClass];
const selected = filters.classes?.includes(tankClass); const selected = tankFilters.classes?.includes(tankClass);
return ( return (
<Tooltip <Tooltip
@@ -204,17 +215,19 @@ export function FilterControl({ compact }: FilterControlProps) {
radius="none" radius="none"
color={selected ? undefined : 'gray'} color={selected ? undefined : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.classes?.includes(tankClass)) {
if (draft.classes?.includes(tankClass)) { $tankFilters.setKey(
draft.classes = draft.classes?.filter( 'classes',
(c) => c !== tankClass, tankFilters.classes.filter((c) => c !== tankClass),
); );
} else { } else {
draft.classes = [...(draft.classes ?? []), tankClass]; $tankFilters.setKey('classes', [
} ...(tankFilters.classes ?? []),
}) tankClass,
]);
} }
}}
> >
<Icon style={{ width: '1em', height: '1em' }} /> <Icon style={{ width: '1em', height: '1em' }} />
</IconButton> </IconButton>
@@ -230,43 +243,55 @@ export function FilterControl({ compact }: FilterControlProps) {
> >
<Tooltip content="Researchable"> <Tooltip content="Researchable">
<IconButton <IconButton
variant={filters.types?.includes('researchable') ? 'solid' : 'soft'} variant={
tankFilters.types?.includes('researchable') ? 'solid' : 'soft'
}
radius="none" radius="none"
color={filters.types?.includes('researchable') ? undefined : 'gray'} color={
tankFilters.types?.includes('researchable') ? undefined : 'gray'
}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.types?.includes('researchable')) {
if (draft.types?.includes('researchable')) { $tankFilters.setKey(
draft.types = draft.types?.filter( 'types',
(t) => t !== 'researchable', tankFilters.types.filter((t) => t !== 'researchable'),
); );
} else { } else {
draft.types = [...(draft.types ?? []), 'researchable']; $tankFilters.setKey('types', [
} ...(tankFilters.types ?? []),
}) 'researchable',
]);
} }
}}
> >
<ResearchedIcon style={{ width: '1em', height: '1em' }} /> <ResearchedIcon style={{ width: '1em', height: '1em' }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Tooltip content="Premium"> <Tooltip content="Premium">
<IconButton <IconButton
variant={filters.types?.includes('premium') ? 'solid' : 'soft'} variant={tankFilters.types?.includes('premium') ? 'solid' : 'soft'}
radius="none" radius="none"
color={filters.types?.includes('premium') ? 'amber' : 'gray'} color={tankFilters.types?.includes('premium') ? 'amber' : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.types?.includes('premium')) {
if (draft.types?.includes('premium')) { $tankFilters.setKey(
draft.types = draft.types?.filter((t) => t !== 'premium'); 'types',
tankFilters.types.filter((t) => t !== 'premium'),
);
} else { } else {
draft.types = [...(draft.types ?? []), 'premium']; $tankFilters.setKey('types', [
} ...(tankFilters.types ?? []),
}) 'premium',
]);
} }
}}
> >
<Text <Text
color={filters.types?.includes('premium') ? undefined : 'amber'} color={
tankFilters.types?.includes('premium') ? undefined : 'amber'
}
style={{ display: 'flex', justifyContent: 'center' }} style={{ display: 'flex', justifyContent: 'center' }}
> >
<ResearchedIcon style={{ width: '1em', height: '1em' }} /> <ResearchedIcon style={{ width: '1em', height: '1em' }} />
@@ -275,22 +300,30 @@ export function FilterControl({ compact }: FilterControlProps) {
</Tooltip> </Tooltip>
<Tooltip content="Collector"> <Tooltip content="Collector">
<IconButton <IconButton
variant={filters.types?.includes('collector') ? 'solid' : 'soft'} variant={
tankFilters.types?.includes('collector') ? 'solid' : 'soft'
}
radius="none" radius="none"
color={filters.types?.includes('collector') ? 'blue' : 'gray'} color={tankFilters.types?.includes('collector') ? 'blue' : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { if (tankFilters.types?.includes('collector')) {
if (draft.types?.includes('collector')) { $tankFilters.setKey(
draft.types = draft.types?.filter((t) => t !== 'collector'); 'types',
tankFilters.types.filter((t) => t !== 'collector'),
);
} else { } else {
draft.types = [...(draft.types ?? []), 'collector']; $tankFilters.setKey('types', [
} ...(tankFilters.types ?? []),
}) 'collector',
]);
} }
}}
> >
<Text <Text
color={filters.types?.includes('collector') ? undefined : 'blue'} color={
tankFilters.types?.includes('collector') ? undefined : 'blue'
}
style={{ display: 'flex', justifyContent: 'center' }} style={{ display: 'flex', justifyContent: 'center' }}
> >
<ResearchedIcon style={{ width: '1em', height: '1em' }} /> <ResearchedIcon style={{ width: '1em', height: '1em' }} />
@@ -306,15 +339,13 @@ export function FilterControl({ compact }: FilterControlProps) {
> >
<Tooltip content="Include test tank"> <Tooltip content="Include test tank">
<IconButton <IconButton
variant={filters.testing === 'include' ? 'solid' : 'soft'} variant={tankFilters.testing === 'include' ? 'solid' : 'soft'}
radius="none" radius="none"
color={filters.testing === 'include' ? undefined : 'gray'} color={tankFilters.testing === 'include' ? undefined : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { $tankFilters.setKey('testing', 'include');
draft.testing = 'include'; }}
})
}
> >
<ExperimentIcon <ExperimentIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }} style={{ width: '1em', height: '1em', color: 'currentColor' }}
@@ -323,15 +354,13 @@ export function FilterControl({ compact }: FilterControlProps) {
</Tooltip> </Tooltip>
<Tooltip content="Exclude test tank"> <Tooltip content="Exclude test tank">
<IconButton <IconButton
variant={filters.testing === 'exclude' ? 'solid' : 'soft'} variant={tankFilters.testing === 'exclude' ? 'solid' : 'soft'}
radius="none" radius="none"
color={filters.testing === 'exclude' ? undefined : 'gray'} color={tankFilters.testing === 'exclude' ? undefined : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { $tankFilters.setKey('testing', 'exclude');
draft.testing = 'exclude'; }}
})
}
> >
<ScienceOffIcon <ScienceOffIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }} style={{ width: '1em', height: '1em', color: 'currentColor' }}
@@ -340,15 +369,13 @@ export function FilterControl({ compact }: FilterControlProps) {
</Tooltip> </Tooltip>
<Tooltip content="Only test tank"> <Tooltip content="Only test tank">
<IconButton <IconButton
variant={filters.testing === 'only' ? 'solid' : 'soft'} variant={tankFilters.testing === 'only' ? 'solid' : 'soft'}
radius="none" radius="none"
color={filters.testing === 'only' ? undefined : 'gray'} color={tankFilters.testing === 'only' ? undefined : 'gray'}
highContrast highContrast
onClick={() => onClick={() => {
mutateTankFilters((draft) => { $tankFilters.setKey('testing', 'only');
draft.testing = 'only'; }}
})
}
> >
<ScienceIcon <ScienceIcon
style={{ width: '1em', height: '1em', color: 'currentColor' }} style={{ width: '1em', height: '1em', color: 'currentColor' }}
@@ -361,7 +388,7 @@ export function FilterControl({ compact }: FilterControlProps) {
<IconButton <IconButton
color="red" color="red"
onClick={() => { onClick={() => {
tankFiltersStore.setState(tankFiltersStore.getInitialState(), true); $tankFilters.set(initialTankFilters);
}} }}
> >
<ReloadIcon /> <ReloadIcon />
packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx → packages/website/src/components/TankSearch/components/NoResults.tsx
+2 -3
View File
@@ -1,12 +1,11 @@
import { Flex, Link, Text } from '@radix-ui/themes'; import { Flex, Link, Text } from '@radix-ui/themes';
import * as TankFilters from '../../../../stores/tankFilters'; import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters';
interface NoResultsProps { interface NoResultsProps {
type?: 'filters' | 'search'; type?: 'filters' | 'search';
} }
export function NoResults({ type = 'filters' }: NoResultsProps) { export function NoResults({ type = 'filters' }: NoResultsProps) {
const tankFiltersStore = TankFilters.useStore();
return ( return (
<Flex flexGrow="1" align="center" justify="center"> <Flex flexGrow="1" align="center" justify="center">
@@ -17,7 +16,7 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
underline="always" underline="always"
color="red" color="red"
onClick={() => onClick={() =>
tankFiltersStore.setState(tankFiltersStore.getInitialState(), true) $tankFilters.set(initialTankFilters)
} }
> >
{type === 'filters' ? 'Try clearing filters' : 'Try searching again'} {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}
packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx → packages/website/src/components/TankSearch/components/SearchBar.tsx
+18 -18
View File
@@ -1,12 +1,13 @@
import { TankDefinition } from '@blitzkit/core'; import type { TankDefinition } from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
import { Flex, Spinner, TextField } from '@radix-ui/themes'; import { Flex, Spinner, TextField } from '@radix-ui/themes';
import { debounce } from 'lodash-es'; import { debounce } from 'lodash-es';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { KeyboardEventHandler, useCallback, useRef } from 'react'; import { useCallback, useRef, type KeyboardEventHandler } from 'react';
import * as TankFilters from '../../../../stores/tankFilters'; import { QuickLink } from '../../../../../website-legacy/src/app/tools/tankopedia/components/QuickLink';
import { QuickLink } from './QuickLink'; import { Sort } from '../../../../../website-legacy/src/app/tools/tankopedia/components/Sort';
import { Sort } from './Sort'; import { $tankFilters } from '../../../stores/tankFilters';
interface SearchBarProps { interface SearchBarProps {
topResult?: TankDefinition; topResult?: TankDefinition;
@@ -14,35 +15,34 @@ interface SearchBarProps {
} }
export function SearchBar({ topResult, onSelect }: SearchBarProps) { export function SearchBar({ topResult, onSelect }: SearchBarProps) {
const tankFiltersStore = TankFilters.useStore(); const tankFilters = useStore($tankFilters);
const lastSearch = tankFiltersStore.getState().search;
const router = useRouter(); const router = useRouter();
const input = useRef<HTMLInputElement>(null); const input = useRef<HTMLInputElement>(null);
const searching = TankFilters.use((state) => state.searching);
const performSearch = useCallback( const performSearch = useCallback(
debounce(() => { debounce(() => {
tankFiltersStore.setState({ searching: false }); $tankFilters.setKey('searching', false);
if (!input.current) return; if (!input.current) return;
const sanitized = input.current.value.trim(); const sanitized = input.current.value.trim();
tankFiltersStore.setState({ $tankFilters.setKey(
search: sanitized.length === 0 ? undefined : sanitized, 'search',
}); sanitized.length === 0 ? undefined : sanitized,
);
}, 500), }, 500),
[], [],
); );
const handleChange = useCallback(() => { const handleChange = useCallback(() => {
if (!tankFiltersStore.getState().searching) { if (!tankFilters.searching) {
tankFiltersStore.setState({ searching: true }); $tankFilters.setKey('searching', true);
} }
performSearch(); performSearch();
}, []); }, [tankFilters]);
const handleKeyDown = useCallback<KeyboardEventHandler>( const handleKeyDown = useCallback<KeyboardEventHandler>(
(event) => { (event) => {
if (event.key !== 'Enter' || !topResult || searching) return; if (event.key !== 'Enter' || !topResult || tankFilters.searching) return;
event.preventDefault(); event.preventDefault();
@@ -59,7 +59,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
<Flex justify="center" mt="4"> <Flex justify="center" mt="4">
<Flex gap="2" flexGrow="1"> <Flex gap="2" flexGrow="1">
<TextField.Root <TextField.Root
defaultValue={lastSearch} defaultValue={tankFilters.search}
style={{ flex: 1 }} style={{ flex: 1 }}
ref={input} ref={input}
placeholder="Search tanks..." placeholder="Search tanks..."
@@ -67,7 +67,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
> >
<TextField.Slot> <TextField.Slot>
{searching ? <Spinner /> : <MagnifyingGlassIcon />} {tankFilters.searching ? <Spinner /> : <MagnifyingGlassIcon />}
</TextField.Slot> </TextField.Slot>
<QuickLink topResult={topResult} /> <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 { Flex, Skeleton } from '@radix-ui/themes';
import { memo, useRef } from 'react'; import { memo, useRef } from 'react';
import { useIntersection } from '../../../../hooks/useIntersection'; import { useIntersection } from '../../../hooks/useIntersection';
interface SkeletonTankCardProps { interface SkeletonTankCardProps {
onIntersection?: () => void; onIntersection?: () => void;
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
+9 -8
View File
@@ -4,17 +4,18 @@ import {
normalizeBoundingBox, normalizeBoundingBox,
resolveDpm, resolveDpm,
resolveNearPenetration, resolveNearPenetration,
TankDefinition,
tankIcon, tankIcon,
unionBoundingBox, unionBoundingBox,
type TankDefinition,
} from '@blitzkit/core'; } from '@blitzkit/core';
import { useStore } from '@nanostores/react';
import { Flex, Text } from '@radix-ui/themes'; import { Flex, Text } from '@radix-ui/themes';
import { assignInlineVars } from '@vanilla-extract/dynamic'; import { assignInlineVars } from '@vanilla-extract/dynamic';
import Link from 'next/link'; import Link from 'next/link';
import { use, useMemo } from 'react'; import { use, useMemo } from 'react';
import { classIcons } from '../../../../components/ClassIcon'; import { resolveReload } from '../../../core/blitzkit/resolveReload';
import { resolveReload } from '../../../../core/blitzkit/resolveReload'; import { $tankopediaSort } from '../../../stores/tankopediaSort';
import * as TankopediaSort from '../../../../stores/tankopediaSort'; import { classIcons } from '../../ClassIcon';
import * as styles from './TankCard.css'; import * as styles from './TankCard.css';
interface TankCardProps { interface TankCardProps {
@@ -25,9 +26,9 @@ interface TankCardProps {
export function TankCard({ tank, onSelect }: TankCardProps) { export function TankCard({ tank, onSelect }: TankCardProps) {
const awaitedModelDefinitions = use(modelDefinitions); const awaitedModelDefinitions = use(modelDefinitions);
const Icon = classIcons[tank.class]; const Icon = classIcons[tank.class];
const sortBy = TankopediaSort.use((state) => state.by); const tankopediaSortBy = useStore($tankopediaSort).by;
const discriminator = useMemo(() => { const discriminator = useMemo(() => {
if (sortBy.startsWith('meta')) return undefined; if (tankopediaSortBy.startsWith('meta')) return undefined;
const turret = tank.turrets.at(-1)!; const turret = tank.turrets.at(-1)!;
const gun = turret.guns.at(-1)!; const gun = turret.guns.at(-1)!;
@@ -39,7 +40,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
const turretModelDefinition = tankModelDefinition.turrets[turret.id]; const turretModelDefinition = tankModelDefinition.turrets[turret.id];
const gunModelDefinition = turretModelDefinition.guns[gun.id]; const gunModelDefinition = turretModelDefinition.guns[gun.id];
switch (sortBy) { switch (tankopediaSortBy) {
case 'fire.aimTime': case 'fire.aimTime':
return gun.aimTime.toFixed(2); return gun.aimTime.toFixed(2);
case 'fire.caliber': case 'fire.caliber':
@@ -131,7 +132,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
), ),
).toFixed(0); ).toFixed(0);
} }
}, [sortBy]); }, [tankopediaSortBy]);
return ( return (
<Text <Text
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) { export function TankCardWrapper(props: GridProps) {
return ( return (
packages/website/src/components/TankSearch/index.tsx
+18 -8
View File
@@ -3,15 +3,19 @@ import {
TANK_CLASSES, TANK_CLASSES,
gameDefinitions, gameDefinitions,
modelDefinitions, modelDefinitions,
normalizeBoundingBox,
resolveDpm,
resolveNearPenetration, resolveNearPenetration,
tankDefinitions, tankDefinitions,
tankDefinitionsArray, tankDefinitionsArray,
tankNames, tankNames,
unionBoundingBox,
} from '@blitzkit/core'; } from '@blitzkit/core';
import { useStore } from '@nanostores/react'; import { useStore } from '@nanostores/react';
import { type FlexProps, Callout, Flex, Link } from '@radix-ui/themes'; import { type FlexProps, Callout, Flex, Link, Text } from '@radix-ui/themes';
import fuzzysort from 'fuzzysort';
import { times } from 'lodash-es'; import { times } from 'lodash-es';
import { memo, use, useEffect, useMemo, useState } from 'react'; import React, { memo, useEffect, useMemo, useState } from 'react';
import { Fragment } from 'react/jsx-runtime'; import { Fragment } from 'react/jsx-runtime';
import { filterTank } from '../../core/blitzkit/filterTank'; import { filterTank } from '../../core/blitzkit/filterTank';
import { resolveReload } from '../../core/blitzkit/resolveReload'; import { resolveReload } from '../../core/blitzkit/resolveReload';
@@ -24,6 +28,12 @@ import {
import { $tankopediaSort } from '../../stores/tankopediaSort'; import { $tankopediaSort } from '../../stores/tankopediaSort';
import { AdMidSectionResponsive } from '../AdMidSectionResponsive'; import { AdMidSectionResponsive } from '../AdMidSectionResponsive';
import { ExperimentIcon } from '../ExperimentIcon'; 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'; import { treeTypeOrder } from './constants';
type TankSearchProps = Omit<FlexProps, 'onSelect'> & { type TankSearchProps = Omit<FlexProps, 'onSelect'> & {
@@ -38,11 +48,11 @@ const DEFAULT_LOADED_CARDS = 75;
export const TankSearch = memo<TankSearchProps>( export const TankSearch = memo<TankSearchProps>(
({ compact, onSelect, onSelectAll, ...props }) => { ({ compact, onSelect, onSelectAll, ...props }) => {
const exempt = useAdExempt(); const exempt = useAdExempt();
const awaitedGameDefinitions = use(gameDefinitions); const awaitedGameDefinitions = React.use(gameDefinitions);
const awaitedModelDefinitions = use(modelDefinitions); const awaitedModelDefinitions = React.use(modelDefinitions);
const awaitedTankDefinitions = use(tankDefinitions); const awaitedTankDefinitions = React.use(tankDefinitions);
const awaitedTanksDefinitionsArray = use(tankDefinitionsArray); const awaitedTanksDefinitionsArray = React.use(tankDefinitionsArray);
const awaitedTankNames = use(tankNames); const awaitedTankNames = React.use(tankNames);
const tankFilters = useStore($tankFilters); const tankFilters = useStore($tankFilters);
const tankopediaSort = useStore($tankopediaSort); const tankopediaSort = useStore($tankopediaSort);
const tanksFiltered = useMemo(() => { const tanksFiltered = useMemo(() => {
@@ -366,7 +376,7 @@ export const TankSearch = memo<TankSearchProps>(
? sorted ? sorted
: sorted.reverse(); : sorted.reverse();
} else { } else {
const searchedRaw = go(tankFilters.search, awaitedTankNames, { const searchedRaw = fuzzysort.go(tankFilters.search, awaitedTankNames, {
keys: ['searchableName', 'searchableNameDeburr', 'camouflages'], keys: ['searchableName', 'searchableNameDeburr', 'camouflages'],
}); });
const searchedTanks = searchedRaw.map( const searchedTanks = searchedRaw.map(
packages/website/src/pages/tools/tankopedia/index.astro
-2
View File
@@ -4,7 +4,5 @@ import ToolLayout from '../../../layouts/ToolLayout.astro';
--- ---
<ToolLayout> <ToolLayout>
<slot />
<TankSearch /> <TankSearch />
</ToolLayout> </ToolLayout>
packages/website/src/stores/tankFilters.ts
+4 -2
View File
@@ -11,7 +11,7 @@ export interface TankFilters {
searching: boolean; searching: boolean;
} }
export const $tankFilters = map<TankFilters>({ export const initialTankFilters : TankFilters = {
tiers: [], tiers: [],
nations: [], nations: [],
classes: [], classes: [],
@@ -19,4 +19,6 @@ export const $tankFilters = map<TankFilters>({
testing: 'include', testing: 'include',
search: undefined, search: undefined,
searching: false, searching: false,
}); }
export const $tankFilters = map<TankFilters>(initialTankFilters);
packages/website/src/stores/tankopediaPersistent/index.ts
+38 -42
View File
@@ -1,9 +1,5 @@
import { TankClass, Tier, TreeType } from '@blitzkit/core'; import type { TankClass, Tier, TreeType } from '@blitzkit/core';
import lodash from 'lodash-es'; import type { ENVIRONMENTS } from '../../components/Sandbox/components/Lighting';
import { create } from 'zustand';
import { persist, subscribeWithSelector } from 'zustand/middleware';
import { ENVIRONMENTS } from '../../app/tools/tankopedia/[id]/components/Lighting';
import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
import { SORT_NAMES, TankopediaDisplay } from './constants'; import { SORT_NAMES, TankopediaDisplay } from './constants';
export type TankopediaSortBy = keyof typeof SORT_NAMES; export type TankopediaSortBy = keyof typeof SORT_NAMES;
@@ -38,39 +34,39 @@ export interface TankopediaPersistent {
display: TankopediaDisplay; display: TankopediaDisplay;
} }
export const { Provider, use, useMutation, useStore } = // export const { Provider, use, useMutation, useStore } =
createContextualSafeStore(() => // createContextualSafeStore(() =>
create<TankopediaPersistent>()( // create<TankopediaPersistent>()(
persist( // persist(
subscribeWithSelector<TankopediaPersistent>(() => ({ // subscribeWithSelector<TankopediaPersistent>(() => ({
model: { // model: {
visual: { // visual: {
showSpacedArmor: true, // showSpacedArmor: true,
showExternalModules: true, // showExternalModules: true,
showPrimaryArmor: true, // showPrimaryArmor: true,
wireframe: false, // wireframe: false,
opaque: false, // opaque: false,
environment: ENVIRONMENTS[0], // environment: ENVIRONMENTS[0],
showGrid: true, // showGrid: true,
greenPenetration: false, // greenPenetration: false,
showEnvironment: false, // showEnvironment: false,
}, // },
}, // },
sort: { // sort: {
by: 'meta.none', // by: 'meta.none',
direction: 'descending', // direction: 'descending',
}, // },
filters: { // filters: {
tiers: [], // tiers: [],
types: [], // types: [],
treeTypes: [], // treeTypes: [],
nations: [], // nations: [],
test: 'include', // test: 'include',
page: 0, // page: 0,
}, // },
display: TankopediaDisplay.Model, // display: TankopediaDisplay.Model,
})), // })),
{ name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) }, // { name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) },
), // ),
), // ),
); // );