diff --git a/bun.lockb b/bun.lockb index 55a6527fb..736d6cda3 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/core/src/blitzkit/index.ts b/packages/core/src/blitzkit/index.ts index 6523d0f8f..e2e4d995e 100644 --- a/packages/core/src/blitzkit/index.ts +++ b/packages/core/src/blitzkit/index.ts @@ -1,5 +1,5 @@ export * from './assertSecret'; -// export * from './asset'; +export * from './asset'; // export * from './availableProvisions'; // export * from './averageDefinitions'; // export * from './camouflageDefinitions'; @@ -25,13 +25,13 @@ export * from './gameDefinitions'; // export * from './linkBlitzAndDiscord'; // export * from './mapDefinitions'; export * from './modelDefinitions'; -// export * from './normalizeBoundingBox'; +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 './modelDefinitions'; export * from './superCompress'; export * from './superDecompress'; export * from './tankDefinitions'; -// export * from './tankIcon'; +export * from './tankIcon'; export * from './tankNames'; -// export * from './unionBoundingBox'; +export * from './unionBoundingBox'; // export * from './uniqueGuns'; // export * from './unwrapBlitzkitResponse'; // export * from './votes'; diff --git a/packages/core/src/blitzkit/tankNames.ts b/packages/core/src/blitzkit/tankNames.ts index 9cfb469c8..d74374bba 100644 --- a/packages/core/src/blitzkit/tankNames.ts +++ b/packages/core/src/blitzkit/tankNames.ts @@ -1,5 +1,6 @@ import { deburr } from 'lodash-es'; -import { camouflageDefinitions, tankDefinitionsArray } from '.'; +import { camouflageDefinitions } from './camouflageDefinitions'; +import { tankDefinitionsArray } from './tankDefinitions'; export const tankNames = Promise.all([ tankDefinitionsArray, diff --git a/packages/website-legacy/src/app/tools/performance/components/Controls.tsx b/packages/website-legacy/src/app/tools/performance/components/Controls.tsx index 86a34b01d..d77e1d587 100644 --- a/packages/website-legacy/src/app/tools/performance/components/Controls.tsx +++ b/packages/website-legacy/src/app/tools/performance/components/Controls.tsx @@ -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() { diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx index b0f887d30..fbc350a7c 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx @@ -24,7 +24,7 @@ import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemer import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent'; import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants'; import { Controls } from '../Control'; -import { Lighting } from '../Lighting'; +import { Lighting } from '../../../../../../../../website/src/components/Sandbox/components/Lighting'; import { SceneProps } from '../SceneProps'; import { AutoClear } from './AutoClear'; import { ModelLoader } from './components/ModelLoader'; diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/Options/index.tsx b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/Options/index.tsx index 936776f61..5c7a92679 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/Options/index.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/Options/index.tsx @@ -31,7 +31,7 @@ import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaE import * as TankopediaPersistent from '../../../../../../../../stores/tankopediaPersistent'; import { TankopediaDisplay } from '../../../../../../../../stores/tankopediaPersistent/constants'; import { TankSearch } from '../../../../../components/TankSearch'; -import { ENVIRONMENTS } from '../../../Lighting'; +import { ENVIRONMENTS } from '../../../../../../../../../../website/src/components/Sandbox/components/Lighting'; import { QuickInputs } from '../../../QuickInputs'; import { Thicknesses } from '../../../Thicknesses'; import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher'; diff --git a/packages/website-legacy/tsconfig.json b/packages/website-legacy/tsconfig.json index 6e8705550..c8ec99ea8 100644 --- a/packages/website-legacy/tsconfig.json +++ b/packages/website-legacy/tsconfig.json @@ -1,11 +1,7 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "plugins": [ - { - "name": "next" - } - ] + "plugins": [{ "name": "next" }] }, - "include": ["src/**/*", ".next/types/**/*.ts"] + "include": ["src/**/*", ".next/types/**/*.ts", "../website/src/components/Sandbox/components/Lighting.tsx"] } diff --git a/packages/website/package.json b/packages/website/package.json index 140b37fcb..442964e68 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -12,6 +12,7 @@ "@astrojs/check": "^0.9.3", "@astrojs/react": "^3.6.2", "@blitzkit/core": "workspace:*", + "fuzzysort": "^2.0.4", "@nanostores/persistent": "^0.10.2", "@nanostores/react": "^0.7.3", "@radix-ui/react-icons": "^1.3.0", diff --git a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Lighting.tsx b/packages/website/src/components/Sandbox/components/Lighting.tsx similarity index 82% rename from packages/website-legacy/src/app/tools/tankopedia/[id]/components/Lighting.tsx rename to packages/website/src/components/Sandbox/components/Lighting.tsx index dc2b21685..8e785cc13 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/[id]/components/Lighting.tsx +++ b/packages/website/src/components/Sandbox/components/Lighting.tsx @@ -1,7 +1,4 @@ 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 = [ 'lobby', diff --git a/packages/website-legacy/src/app/tools/tankopedia/components/FilterControl.tsx b/packages/website/src/components/TankSearch/components/FilterControl.tsx similarity index 56% rename from packages/website-legacy/src/app/tools/tankopedia/components/FilterControl.tsx rename to packages/website/src/components/TankSearch/components/FilterControl.tsx index 7aeee58fa..b846dd20c 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/components/FilterControl.tsx +++ b/packages/website/src/components/TankSearch/components/FilterControl.tsx @@ -2,20 +2,21 @@ import { asset, gameDefinitions, TANK_CLASSES, - Tier, 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 { 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'; +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; @@ -23,9 +24,7 @@ interface FilterControlProps { export function FilterControl({ compact }: FilterControlProps) { const awaitedGameDefinitions = use(gameDefinitions); - const filters = TankFilters.use(); - const mutateTankFilters = TankFilters.useMutation(); - const tankFiltersStore = TankFilters.useStore(); + const tankFilters = useStore($tankFilters); return ( @@ -37,7 +36,7 @@ export function FilterControl({ compact }: FilterControlProps) { {times(5, (index) => { const tier = (index + 1) as Tier; - const selected = filters.tiers?.includes(tier); + const selected = tankFilters.tiers?.includes(tier); return ( @@ -47,15 +46,19 @@ export function FilterControl({ compact }: FilterControlProps) { 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]; - } - }) - } + onClick={() => { + if (tankFilters.tiers?.includes(tier)) { + $tankFilters.setKey( + 'tiers', + tankFilters.tiers.filter((t) => t !== tier), + ); + } else { + $tankFilters.setKey('tiers', [ + ...(tankFilters.tiers ?? []), + tier, + ]); + } + }} > {TIER_ROMAN_NUMERALS[tier]} @@ -66,7 +69,7 @@ export function FilterControl({ compact }: FilterControlProps) { {times(5, (index) => { const tier = (index + 6) as Tier; - const selected = filters.tiers?.includes(tier); + const selected = tankFilters.tiers?.includes(tier); return ( @@ -76,15 +79,19 @@ export function FilterControl({ compact }: FilterControlProps) { 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]; - } - }) - } + onClick={() => { + if (tankFilters.tiers?.includes(tier)) { + $tankFilters.setKey( + 'tiers', + tankFilters.tiers.filter((t) => t !== tier), + ); + } else { + $tankFilters.setKey('tiers', [ + ...(tankFilters.tiers ?? []), + tier, + ]); + } + }} > {TIER_ROMAN_NUMERALS[tier]} @@ -103,7 +110,7 @@ export function FilterControl({ compact }: FilterControlProps) { {awaitedGameDefinitions.nations .slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2)) .map((nation) => { - const selected = filters.nations?.includes(nation); + const selected = tankFilters.nations?.includes(nation); return ( - mutateTankFilters((draft) => { - if (draft.nations?.includes(nation)) { - draft.nations = draft.nations?.filter( - (n) => n !== nation, - ); - } else { - draft.nations = [...(draft.nations ?? []), nation]; - } - }) - } + onClick={() => { + if (tankFilters.nations?.includes(nation)) { + $tankFilters.setKey( + 'nations', + tankFilters.nations.filter((n) => n !== nation), + ); + } else { + $tankFilters.setKey('nations', [ + ...(tankFilters.nations ?? []), + nation, + ]); + } + }} > { - const selected = filters.nations?.includes(nation); + const selected = tankFilters.nations?.includes(nation); return ( - mutateTankFilters((draft) => { - if (draft.nations?.includes(nation)) { - draft.nations = draft.nations?.filter( - (n) => n !== nation, - ); - } else { - draft.nations = [...(draft.nations ?? []), nation]; - } - }) - } + onClick={() => { + if (tankFilters.nations?.includes(nation)) { + $tankFilters.setKey( + 'nations', + tankFilters.nations.filter((n) => n !== nation), + ); + } else { + $tankFilters.setKey('nations', [ + ...(tankFilters.nations ?? []), + nation, + ]); + } + }} > {TANK_CLASSES.map((tankClass) => { const Icon = classIcons[tankClass]; - const selected = filters.classes?.includes(tankClass); + const selected = tankFilters.classes?.includes(tankClass); return ( - mutateTankFilters((draft) => { - if (draft.classes?.includes(tankClass)) { - draft.classes = draft.classes?.filter( - (c) => c !== tankClass, - ); - } else { - draft.classes = [...(draft.classes ?? []), tankClass]; - } - }) - } + onClick={() => { + if (tankFilters.classes?.includes(tankClass)) { + $tankFilters.setKey( + 'classes', + tankFilters.classes.filter((c) => c !== tankClass), + ); + } else { + $tankFilters.setKey('classes', [ + ...(tankFilters.classes ?? []), + tankClass, + ]); + } + }} > @@ -230,43 +243,55 @@ export function FilterControl({ compact }: FilterControlProps) { > - mutateTankFilters((draft) => { - if (draft.types?.includes('researchable')) { - draft.types = draft.types?.filter( - (t) => t !== 'researchable', - ); - } else { - draft.types = [...(draft.types ?? []), 'researchable']; - } - }) + variant={ + tankFilters.types?.includes('researchable') ? 'solid' : 'soft' } + radius="none" + color={ + tankFilters.types?.includes('researchable') ? undefined : 'gray' + } + highContrast + onClick={() => { + if (tankFilters.types?.includes('researchable')) { + $tankFilters.setKey( + 'types', + tankFilters.types.filter((t) => t !== 'researchable'), + ); + } else { + $tankFilters.setKey('types', [ + ...(tankFilters.types ?? []), + 'researchable', + ]); + } + }} > - mutateTankFilters((draft) => { - if (draft.types?.includes('premium')) { - draft.types = draft.types?.filter((t) => t !== 'premium'); - } else { - draft.types = [...(draft.types ?? []), 'premium']; - } - }) - } + onClick={() => { + if (tankFilters.types?.includes('premium')) { + $tankFilters.setKey( + 'types', + tankFilters.types.filter((t) => t !== 'premium'), + ); + } else { + $tankFilters.setKey('types', [ + ...(tankFilters.types ?? []), + 'premium', + ]); + } + }} > @@ -275,22 +300,30 @@ export function FilterControl({ compact }: FilterControlProps) { - mutateTankFilters((draft) => { - if (draft.types?.includes('collector')) { - draft.types = draft.types?.filter((t) => t !== 'collector'); - } else { - draft.types = [...(draft.types ?? []), 'collector']; - } - }) + variant={ + tankFilters.types?.includes('collector') ? 'solid' : 'soft' } + radius="none" + color={tankFilters.types?.includes('collector') ? 'blue' : 'gray'} + highContrast + onClick={() => { + if (tankFilters.types?.includes('collector')) { + $tankFilters.setKey( + 'types', + tankFilters.types.filter((t) => t !== 'collector'), + ); + } else { + $tankFilters.setKey('types', [ + ...(tankFilters.types ?? []), + 'collector', + ]); + } + }} > @@ -306,15 +339,13 @@ export function FilterControl({ compact }: FilterControlProps) { > - mutateTankFilters((draft) => { - draft.testing = 'include'; - }) - } + onClick={() => { + $tankFilters.setKey('testing', 'include'); + }} > - mutateTankFilters((draft) => { - draft.testing = 'exclude'; - }) - } + onClick={() => { + $tankFilters.setKey('testing', 'exclude'); + }} > - mutateTankFilters((draft) => { - draft.testing = 'only'; - }) - } + onClick={() => { + $tankFilters.setKey('testing', 'only'); + }} > { - tankFiltersStore.setState(tankFiltersStore.getInitialState(), true); + $tankFilters.set(initialTankFilters); }} > diff --git a/packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx b/packages/website/src/components/TankSearch/components/NoResults.tsx similarity index 74% rename from packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx rename to packages/website/src/components/TankSearch/components/NoResults.tsx index 2082e60ac..42ec49306 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx +++ b/packages/website/src/components/TankSearch/components/NoResults.tsx @@ -1,12 +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 ( @@ -17,7 +16,7 @@ export function NoResults({ type = 'filters' }: NoResultsProps) { underline="always" color="red" onClick={() => - tankFiltersStore.setState(tankFiltersStore.getInitialState(), true) + $tankFilters.set(initialTankFilters) } > {type === 'filters' ? 'Try clearing filters' : 'Try searching again'} diff --git a/packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx b/packages/website/src/components/TankSearch/components/SearchBar.tsx similarity index 60% rename from packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx rename to packages/website/src/components/TankSearch/components/SearchBar.tsx index 0472d7a5e..b260e5f77 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx +++ b/packages/website/src/components/TankSearch/components/SearchBar.tsx @@ -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 { 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 { QuickLink } from './QuickLink'; -import { Sort } from './Sort'; +import { useCallback, useRef, type KeyboardEventHandler } from 'react'; +import { QuickLink } from '../../../../../website-legacy/src/app/tools/tankopedia/components/QuickLink'; +import { Sort } from '../../../../../website-legacy/src/app/tools/tankopedia/components/Sort'; +import { $tankFilters } from '../../../stores/tankFilters'; interface SearchBarProps { topResult?: TankDefinition; @@ -14,35 +15,34 @@ 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(null); - const searching = TankFilters.use((state) => state.searching); const performSearch = useCallback( debounce(() => { - tankFiltersStore.setState({ searching: false }); + $tankFilters.setKey('searching', false); if (!input.current) return; const sanitized = input.current.value.trim(); - tankFiltersStore.setState({ - search: sanitized.length === 0 ? undefined : sanitized, - }); + $tankFilters.setKey( + 'search', + sanitized.length === 0 ? undefined : sanitized, + ); }, 500), [], ); const handleChange = useCallback(() => { - if (!tankFiltersStore.getState().searching) { - tankFiltersStore.setState({ searching: true }); + if (!tankFilters.searching) { + $tankFilters.setKey('searching', true); } performSearch(); - }, []); + }, [tankFilters]); const handleKeyDown = useCallback( (event) => { - if (event.key !== 'Enter' || !topResult || searching) return; + if (event.key !== 'Enter' || !topResult || tankFilters.searching) return; event.preventDefault(); @@ -59,7 +59,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) { - {searching ? : } + {tankFilters.searching ? : } diff --git a/packages/website-legacy/src/app/tools/tankopedia/components/SkeletonTankCard.tsx b/packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx similarity index 89% rename from packages/website-legacy/src/app/tools/tankopedia/components/SkeletonTankCard.tsx rename to packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx index a955951fc..a60ff849c 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/components/SkeletonTankCard.tsx +++ b/packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx @@ -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; diff --git a/packages/website-legacy/src/app/tools/tankopedia/components/TankCard.css.ts b/packages/website/src/components/TankSearch/components/TankCard.css.ts similarity index 100% rename from packages/website-legacy/src/app/tools/tankopedia/components/TankCard.css.ts rename to packages/website/src/components/TankSearch/components/TankCard.css.ts diff --git a/packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx b/packages/website/src/components/TankSearch/components/TankCard.tsx similarity index 92% rename from packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx rename to packages/website/src/components/TankSearch/components/TankCard.tsx index ab5a2d635..5b5bcb370 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx +++ b/packages/website/src/components/TankSearch/components/TankCard.tsx @@ -4,17 +4,18 @@ 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 { resolveReload } from '../../../core/blitzkit/resolveReload'; +import { $tankopediaSort } from '../../../stores/tankopediaSort'; +import { classIcons } from '../../ClassIcon'; import * as styles from './TankCard.css'; interface TankCardProps { @@ -25,9 +26,9 @@ interface TankCardProps { export function TankCard({ tank, onSelect }: TankCardProps) { const awaitedModelDefinitions = use(modelDefinitions); const Icon = classIcons[tank.class]; - const sortBy = TankopediaSort.use((state) => state.by); + const tankopediaSortBy = useStore($tankopediaSort).by; const discriminator = useMemo(() => { - if (sortBy.startsWith('meta')) return undefined; + if (tankopediaSortBy.startsWith('meta')) return undefined; const turret = tank.turrets.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 gunModelDefinition = turretModelDefinition.guns[gun.id]; - switch (sortBy) { + switch (tankopediaSortBy) { case 'fire.aimTime': return gun.aimTime.toFixed(2); case 'fire.caliber': @@ -131,7 +132,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) { ), ).toFixed(0); } - }, [sortBy]); + }, [tankopediaSortBy]); return ( onSelect(tank) : undefined} diff --git a/packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx b/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx similarity index 79% rename from packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx rename to packages/website/src/components/TankSearch/components/TankCardWrapper.tsx index 183dfa993..ea6cf9dbc 100644 --- a/packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx +++ b/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx @@ -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 ( diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index c55bf6be3..8e23674b9 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -3,15 +3,19 @@ import { TANK_CLASSES, gameDefinitions, modelDefinitions, + normalizeBoundingBox, + resolveDpm, resolveNearPenetration, tankDefinitions, tankDefinitionsArray, tankNames, + unionBoundingBox, } from '@blitzkit/core'; 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 { memo, use, useEffect, useMemo, useState } from 'react'; +import React, { memo, useEffect, useMemo, useState } from 'react'; import { Fragment } from 'react/jsx-runtime'; import { filterTank } from '../../core/blitzkit/filterTank'; import { resolveReload } from '../../core/blitzkit/resolveReload'; @@ -24,6 +28,12 @@ import { 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 & { @@ -38,11 +48,11 @@ const DEFAULT_LOADED_CARDS = 75; export const TankSearch = memo( ({ 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 awaitedGameDefinitions = React.use(gameDefinitions); + const awaitedModelDefinitions = React.use(modelDefinitions); + const awaitedTankDefinitions = React.use(tankDefinitions); + const awaitedTanksDefinitionsArray = React.use(tankDefinitionsArray); + const awaitedTankNames = React.use(tankNames); const tankFilters = useStore($tankFilters); const tankopediaSort = useStore($tankopediaSort); const tanksFiltered = useMemo(() => { @@ -366,7 +376,7 @@ export const TankSearch = memo( ? sorted : sorted.reverse(); } else { - const searchedRaw = go(tankFilters.search, awaitedTankNames, { + const searchedRaw = fuzzysort.go(tankFilters.search, awaitedTankNames, { keys: ['searchableName', 'searchableNameDeburr', 'camouflages'], }); const searchedTanks = searchedRaw.map( diff --git a/packages/website/src/pages/tools/tankopedia/index.astro b/packages/website/src/pages/tools/tankopedia/index.astro index 7cb8efebf..fbdccaa27 100644 --- a/packages/website/src/pages/tools/tankopedia/index.astro +++ b/packages/website/src/pages/tools/tankopedia/index.astro @@ -4,7 +4,5 @@ import ToolLayout from '../../../layouts/ToolLayout.astro'; --- - - diff --git a/packages/website/src/stores/tankFilters.ts b/packages/website/src/stores/tankFilters.ts index 92f428686..8b7b088c5 100644 --- a/packages/website/src/stores/tankFilters.ts +++ b/packages/website/src/stores/tankFilters.ts @@ -11,7 +11,7 @@ export interface TankFilters { searching: boolean; } -export const $tankFilters = map({ +export const initialTankFilters : TankFilters = { tiers: [], nations: [], classes: [], @@ -19,4 +19,6 @@ export const $tankFilters = map({ testing: 'include', search: undefined, searching: false, -}); +} + +export const $tankFilters = map(initialTankFilters); diff --git a/packages/website/src/stores/tankopediaPersistent/index.ts b/packages/website/src/stores/tankopediaPersistent/index.ts index 6cd1f9b9b..db98b6d04 100644 --- a/packages/website/src/stores/tankopediaPersistent/index.ts +++ b/packages/website/src/stores/tankopediaPersistent/index.ts @@ -1,9 +1,5 @@ -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 { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore'; +import type { TankClass, Tier, TreeType } from '@blitzkit/core'; +import type { ENVIRONMENTS } from '../../components/Sandbox/components/Lighting'; import { SORT_NAMES, TankopediaDisplay } from './constants'; export type TankopediaSortBy = keyof typeof SORT_NAMES; @@ -38,39 +34,39 @@ export interface TankopediaPersistent { display: TankopediaDisplay; } -export const { Provider, use, useMutation, useStore } = - createContextualSafeStore(() => - create()( - persist( - subscribeWithSelector(() => ({ - model: { - visual: { - showSpacedArmor: true, - showExternalModules: true, - showPrimaryArmor: true, - wireframe: false, - opaque: false, - environment: ENVIRONMENTS[0], - showGrid: true, - greenPenetration: false, - showEnvironment: false, - }, - }, - sort: { - by: 'meta.none', - direction: 'descending', - }, - filters: { - tiers: [], - types: [], - treeTypes: [], - nations: [], - test: 'include', - page: 0, - }, - display: TankopediaDisplay.Model, - })), - { name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) }, - ), - ), - ); +// export const { Provider, use, useMutation, useStore } = +// createContextualSafeStore(() => +// create()( +// persist( +// subscribeWithSelector(() => ({ +// model: { +// visual: { +// showSpacedArmor: true, +// showExternalModules: true, +// showPrimaryArmor: true, +// wireframe: false, +// opaque: false, +// environment: ENVIRONMENTS[0], +// showGrid: true, +// greenPenetration: false, +// showEnvironment: false, +// }, +// }, +// sort: { +// by: 'meta.none', +// direction: 'descending', +// }, +// filters: { +// tiers: [], +// types: [], +// treeTypes: [], +// nations: [], +// test: 'include', +// page: 0, +// }, +// display: TankopediaDisplay.Model, +// })), +// { name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) }, +// ), +// ), +// );