From 6288e3f69a3f5b93bc50c3198b6a92800c47e7ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Tue, 17 Sep 2024 21:43:28 -0500 Subject: [PATCH] Revert "feat: progress on tankopedia search" This reverts commit eebc33581c0c665f2b2a92bdf56db1cff1be74fe. --- bun.lockb | Bin 427737 -> 427737 bytes packages/core/src/blitzkit/index.ts | 10 +- packages/core/src/blitzkit/tankNames.ts | 3 +- .../tools/performance/components/Controls.tsx | 2 +- .../tankopedia/[id]}/components/Lighting.tsx | 3 + .../[id]/components/Model/TankSandbox.tsx | 2 +- .../Model/components/Options/index.tsx | 2 +- .../tankopedia}/components/FilterControl.tsx | 277 ++++++++---------- .../tankopedia}/components/NoResults.tsx | 5 +- .../tankopedia}/components/SearchBar.tsx | 36 +-- .../components/SkeletonTankCard.tsx | 2 +- .../tankopedia}/components/TankCard.css.ts | 0 .../tools/tankopedia}/components/TankCard.tsx | 21 +- .../components/TankCardWrapper.tsx | 2 +- packages/website-legacy/tsconfig.json | 8 +- packages/website/package.json | 1 - .../src/components/TankSearch/index.tsx | 26 +- .../src/pages/tools/tankopedia/index.astro | 2 + packages/website/src/stores/tankFilters.ts | 6 +- .../src/stores/tankopediaPersistent/index.ts | 80 ++--- 20 files changed, 230 insertions(+), 258 deletions(-) rename packages/{website/src/components/Sandbox => website-legacy/src/app/tools/tankopedia/[id]}/components/Lighting.tsx (82%) rename packages/{website/src/components/TankSearch => website-legacy/src/app/tools/tankopedia}/components/FilterControl.tsx (56%) rename packages/{website/src/components/TankSearch => website-legacy/src/app/tools/tankopedia}/components/NoResults.tsx (74%) rename packages/{website/src/components/TankSearch => website-legacy/src/app/tools/tankopedia}/components/SearchBar.tsx (60%) rename packages/{website/src/components/TankSearch => website-legacy/src/app/tools/tankopedia}/components/SkeletonTankCard.tsx (89%) rename packages/{website/src/components/TankSearch => website-legacy/src/app/tools/tankopedia}/components/TankCard.css.ts (100%) rename packages/{website/src/components/TankSearch => website-legacy/src/app/tools/tankopedia}/components/TankCard.tsx (92%) rename packages/{website/src/components/TankSearch => website-legacy/src/app/tools/tankopedia}/components/TankCardWrapper.tsx (79%) diff --git a/bun.lockb b/bun.lockb index 736d6cda31a743127b0b5a781486b77dbc883f9b..55a6527fb88d866db049bf9a0be2676c884445c2 100644 GIT binary patch delta 42 wcmccFD|NG1s-cCkg{g&k3rmL=qsjD6FP0Q$Q$3UR4_+)l%)0%97u!o~08$hW @@ -36,7 +37,7 @@ export function FilterControl({ compact }: FilterControlProps) { {times(5, (index) => { const tier = (index + 1) as Tier; - const selected = tankFilters.tiers?.includes(tier); + const selected = filters.tiers?.includes(tier); return ( @@ -46,19 +47,15 @@ export function FilterControl({ compact }: FilterControlProps) { radius="none" color={selected ? undefined : 'gray'} highContrast - onClick={() => { - if (tankFilters.tiers?.includes(tier)) { - $tankFilters.setKey( - 'tiers', - tankFilters.tiers.filter((t) => t !== tier), - ); - } else { - $tankFilters.setKey('tiers', [ - ...(tankFilters.tiers ?? []), - tier, - ]); - } - }} + onClick={() => + mutateTankFilters((draft) => { + if (draft.tiers?.includes(tier)) { + draft.tiers = draft.tiers?.filter((t) => t !== tier); + } else { + draft.tiers = [...(draft.tiers ?? []), tier]; + } + }) + } > {TIER_ROMAN_NUMERALS[tier]} @@ -69,7 +66,7 @@ export function FilterControl({ compact }: FilterControlProps) { {times(5, (index) => { const tier = (index + 6) as Tier; - const selected = tankFilters.tiers?.includes(tier); + const selected = filters.tiers?.includes(tier); return ( @@ -79,19 +76,15 @@ export function FilterControl({ compact }: FilterControlProps) { radius="none" color={selected ? undefined : 'gray'} highContrast - onClick={() => { - if (tankFilters.tiers?.includes(tier)) { - $tankFilters.setKey( - 'tiers', - tankFilters.tiers.filter((t) => t !== tier), - ); - } else { - $tankFilters.setKey('tiers', [ - ...(tankFilters.tiers ?? []), - tier, - ]); - } - }} + onClick={() => + mutateTankFilters((draft) => { + if (draft.tiers?.includes(tier)) { + draft.tiers = draft.tiers?.filter((t) => t !== tier); + } else { + draft.tiers = [...(draft.tiers ?? []), tier]; + } + }) + } > {TIER_ROMAN_NUMERALS[tier]} @@ -110,7 +103,7 @@ export function FilterControl({ compact }: FilterControlProps) { {awaitedGameDefinitions.nations .slice(0, Math.ceil(awaitedGameDefinitions.nations.length / 2)) .map((nation) => { - const selected = tankFilters.nations?.includes(nation); + const selected = filters.nations?.includes(nation); return ( { - if (tankFilters.nations?.includes(nation)) { - $tankFilters.setKey( - 'nations', - tankFilters.nations.filter((n) => n !== nation), - ); - } else { - $tankFilters.setKey('nations', [ - ...(tankFilters.nations ?? []), - nation, - ]); - } - }} + onClick={() => + mutateTankFilters((draft) => { + if (draft.nations?.includes(nation)) { + draft.nations = draft.nations?.filter( + (n) => n !== nation, + ); + } else { + draft.nations = [...(draft.nations ?? []), nation]; + } + }) + } > { - const selected = tankFilters.nations?.includes(nation); + const selected = filters.nations?.includes(nation); return ( { - if (tankFilters.nations?.includes(nation)) { - $tankFilters.setKey( - 'nations', - tankFilters.nations.filter((n) => n !== nation), - ); - } else { - $tankFilters.setKey('nations', [ - ...(tankFilters.nations ?? []), - nation, - ]); - } - }} + onClick={() => + mutateTankFilters((draft) => { + if (draft.nations?.includes(nation)) { + draft.nations = draft.nations?.filter( + (n) => n !== nation, + ); + } else { + draft.nations = [...(draft.nations ?? []), nation]; + } + }) + } > {TANK_CLASSES.map((tankClass) => { const Icon = classIcons[tankClass]; - const selected = tankFilters.classes?.includes(tankClass); + const selected = filters.classes?.includes(tankClass); return ( { - if (tankFilters.classes?.includes(tankClass)) { - $tankFilters.setKey( - 'classes', - tankFilters.classes.filter((c) => c !== tankClass), - ); - } else { - $tankFilters.setKey('classes', [ - ...(tankFilters.classes ?? []), - tankClass, - ]); - } - }} + onClick={() => + mutateTankFilters((draft) => { + if (draft.classes?.includes(tankClass)) { + draft.classes = draft.classes?.filter( + (c) => c !== tankClass, + ); + } else { + draft.classes = [...(draft.classes ?? []), tankClass]; + } + }) + } > @@ -243,55 +230,43 @@ export function FilterControl({ compact }: FilterControlProps) { > { - if (tankFilters.types?.includes('researchable')) { - $tankFilters.setKey( - 'types', - tankFilters.types.filter((t) => t !== 'researchable'), - ); - } else { - $tankFilters.setKey('types', [ - ...(tankFilters.types ?? []), - 'researchable', - ]); - } - }} + 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('premium')) { - $tankFilters.setKey( - 'types', - tankFilters.types.filter((t) => t !== 'premium'), - ); - } else { - $tankFilters.setKey('types', [ - ...(tankFilters.types ?? []), - 'premium', - ]); - } - }} + onClick={() => + mutateTankFilters((draft) => { + if (draft.types?.includes('premium')) { + draft.types = draft.types?.filter((t) => t !== 'premium'); + } else { + draft.types = [...(draft.types ?? []), 'premium']; + } + }) + } > @@ -300,30 +275,22 @@ export function FilterControl({ compact }: FilterControlProps) { { - if (tankFilters.types?.includes('collector')) { - $tankFilters.setKey( - 'types', - tankFilters.types.filter((t) => t !== 'collector'), - ); - } else { - $tankFilters.setKey('types', [ - ...(tankFilters.types ?? []), - 'collector', - ]); - } - }} + onClick={() => + mutateTankFilters((draft) => { + if (draft.types?.includes('collector')) { + draft.types = draft.types?.filter((t) => t !== 'collector'); + } else { + draft.types = [...(draft.types ?? []), 'collector']; + } + }) + } > @@ -339,13 +306,15 @@ export function FilterControl({ compact }: FilterControlProps) { > { - $tankFilters.setKey('testing', 'include'); - }} + onClick={() => + mutateTankFilters((draft) => { + draft.testing = 'include'; + }) + } > { - $tankFilters.setKey('testing', 'exclude'); - }} + onClick={() => + mutateTankFilters((draft) => { + draft.testing = 'exclude'; + }) + } > { - $tankFilters.setKey('testing', 'only'); - }} + onClick={() => + mutateTankFilters((draft) => { + draft.testing = 'only'; + }) + } > { - $tankFilters.set(initialTankFilters); + tankFiltersStore.setState(tankFiltersStore.getInitialState(), true); }} > diff --git a/packages/website/src/components/TankSearch/components/NoResults.tsx b/packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx similarity index 74% rename from packages/website/src/components/TankSearch/components/NoResults.tsx rename to packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx index 42ec49306..2082e60ac 100644 --- a/packages/website/src/components/TankSearch/components/NoResults.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/components/NoResults.tsx @@ -1,11 +1,12 @@ import { Flex, Link, Text } from '@radix-ui/themes'; -import { $tankFilters, initialTankFilters } from '../../../stores/tankFilters'; +import * as TankFilters from '../../../../stores/tankFilters'; interface NoResultsProps { type?: 'filters' | 'search'; } export function NoResults({ type = 'filters' }: NoResultsProps) { + const tankFiltersStore = TankFilters.useStore(); return ( @@ -16,7 +17,7 @@ export function NoResults({ type = 'filters' }: NoResultsProps) { underline="always" color="red" onClick={() => - $tankFilters.set(initialTankFilters) + tankFiltersStore.setState(tankFiltersStore.getInitialState(), true) } > {type === 'filters' ? 'Try clearing filters' : 'Try searching again'} diff --git a/packages/website/src/components/TankSearch/components/SearchBar.tsx b/packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx similarity index 60% rename from packages/website/src/components/TankSearch/components/SearchBar.tsx rename to packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx index b260e5f77..0472d7a5e 100644 --- a/packages/website/src/components/TankSearch/components/SearchBar.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/components/SearchBar.tsx @@ -1,13 +1,12 @@ -import type { TankDefinition } from '@blitzkit/core'; -import { useStore } from '@nanostores/react'; +import { TankDefinition } from '@blitzkit/core'; 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 { 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'; +import { KeyboardEventHandler, useCallback, useRef } from 'react'; +import * as TankFilters from '../../../../stores/tankFilters'; +import { QuickLink } from './QuickLink'; +import { Sort } from './Sort'; interface SearchBarProps { topResult?: TankDefinition; @@ -15,34 +14,35 @@ interface SearchBarProps { } export function SearchBar({ topResult, onSelect }: SearchBarProps) { - const tankFilters = useStore($tankFilters); + const tankFiltersStore = TankFilters.useStore(); + const lastSearch = tankFiltersStore.getState().search; const router = useRouter(); const input = useRef(null); + const searching = TankFilters.use((state) => state.searching); const performSearch = useCallback( debounce(() => { - $tankFilters.setKey('searching', false); + tankFiltersStore.setState({ searching: false }); if (!input.current) return; const sanitized = input.current.value.trim(); - $tankFilters.setKey( - 'search', - sanitized.length === 0 ? undefined : sanitized, - ); + tankFiltersStore.setState({ + search: sanitized.length === 0 ? undefined : sanitized, + }); }, 500), [], ); const handleChange = useCallback(() => { - if (!tankFilters.searching) { - $tankFilters.setKey('searching', true); + if (!tankFiltersStore.getState().searching) { + tankFiltersStore.setState({ searching: true }); } performSearch(); - }, [tankFilters]); + }, []); const handleKeyDown = useCallback( (event) => { - if (event.key !== 'Enter' || !topResult || tankFilters.searching) return; + if (event.key !== 'Enter' || !topResult || searching) return; event.preventDefault(); @@ -59,7 +59,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) { - {tankFilters.searching ? : } + {searching ? : } diff --git a/packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx b/packages/website-legacy/src/app/tools/tankopedia/components/SkeletonTankCard.tsx similarity index 89% rename from packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx rename to packages/website-legacy/src/app/tools/tankopedia/components/SkeletonTankCard.tsx index a60ff849c..a955951fc 100644 --- a/packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/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/src/components/TankSearch/components/TankCard.css.ts b/packages/website-legacy/src/app/tools/tankopedia/components/TankCard.css.ts similarity index 100% rename from packages/website/src/components/TankSearch/components/TankCard.css.ts rename to packages/website-legacy/src/app/tools/tankopedia/components/TankCard.css.ts diff --git a/packages/website/src/components/TankSearch/components/TankCard.tsx b/packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx similarity index 92% rename from packages/website/src/components/TankSearch/components/TankCard.tsx rename to packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx index 5b5bcb370..ab5a2d635 100644 --- a/packages/website/src/components/TankSearch/components/TankCard.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/components/TankCard.tsx @@ -4,18 +4,17 @@ 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 { resolveReload } from '../../../core/blitzkit/resolveReload'; -import { $tankopediaSort } from '../../../stores/tankopediaSort'; -import { classIcons } from '../../ClassIcon'; +import { classIcons } from '../../../../components/ClassIcon'; +import { resolveReload } from '../../../../core/blitzkit/resolveReload'; +import * as TankopediaSort from '../../../../stores/tankopediaSort'; import * as styles from './TankCard.css'; interface TankCardProps { @@ -26,9 +25,9 @@ interface TankCardProps { export function TankCard({ tank, onSelect }: TankCardProps) { const awaitedModelDefinitions = use(modelDefinitions); const Icon = classIcons[tank.class]; - const tankopediaSortBy = useStore($tankopediaSort).by; + const sortBy = TankopediaSort.use((state) => state.by); const discriminator = useMemo(() => { - if (tankopediaSortBy.startsWith('meta')) return undefined; + if (sortBy.startsWith('meta')) return undefined; const turret = tank.turrets.at(-1)!; const gun = turret.guns.at(-1)!; @@ -40,7 +39,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) { const turretModelDefinition = tankModelDefinition.turrets[turret.id]; const gunModelDefinition = turretModelDefinition.guns[gun.id]; - switch (tankopediaSortBy) { + switch (sortBy) { case 'fire.aimTime': return gun.aimTime.toFixed(2); case 'fire.caliber': @@ -132,7 +131,7 @@ export function TankCard({ tank, onSelect }: TankCardProps) { ), ).toFixed(0); } - }, [tankopediaSortBy]); + }, [sortBy]); return ( onSelect(tank) : undefined} diff --git a/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx b/packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx similarity index 79% rename from packages/website/src/components/TankSearch/components/TankCardWrapper.tsx rename to packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx index ea6cf9dbc..183dfa993 100644 --- a/packages/website/src/components/TankSearch/components/TankCardWrapper.tsx +++ b/packages/website-legacy/src/app/tools/tankopedia/components/TankCardWrapper.tsx @@ -1,4 +1,4 @@ -import { Grid, type GridProps } from '@radix-ui/themes'; +import { Grid, GridProps } from '@radix-ui/themes'; export function TankCardWrapper(props: GridProps) { return ( diff --git a/packages/website-legacy/tsconfig.json b/packages/website-legacy/tsconfig.json index c8ec99ea8..6e8705550 100644 --- a/packages/website-legacy/tsconfig.json +++ b/packages/website-legacy/tsconfig.json @@ -1,7 +1,11 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "plugins": [{ "name": "next" }] + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["src/**/*", ".next/types/**/*.ts", "../website/src/components/Sandbox/components/Lighting.tsx"] + "include": ["src/**/*", ".next/types/**/*.ts"] } diff --git a/packages/website/package.json b/packages/website/package.json index 442964e68..140b37fcb 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -12,7 +12,6 @@ "@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/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx index 8e23674b9..c55bf6be3 100644 --- a/packages/website/src/components/TankSearch/index.tsx +++ b/packages/website/src/components/TankSearch/index.tsx @@ -3,19 +3,15 @@ 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, Text } from '@radix-ui/themes'; -import fuzzysort from 'fuzzysort'; +import { type FlexProps, Callout, Flex, Link } from '@radix-ui/themes'; import { times } from 'lodash-es'; -import React, { memo, useEffect, useMemo, useState } from 'react'; +import { memo, use, useEffect, useMemo, useState } from 'react'; import { Fragment } from 'react/jsx-runtime'; import { filterTank } from '../../core/blitzkit/filterTank'; import { resolveReload } from '../../core/blitzkit/resolveReload'; @@ -28,12 +24,6 @@ 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 & { @@ -48,11 +38,11 @@ const DEFAULT_LOADED_CARDS = 75; export const TankSearch = memo( ({ compact, onSelect, onSelectAll, ...props }) => { const exempt = useAdExempt(); - 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 awaitedGameDefinitions = use(gameDefinitions); + const awaitedModelDefinitions = use(modelDefinitions); + const awaitedTankDefinitions = use(tankDefinitions); + const awaitedTanksDefinitionsArray = use(tankDefinitionsArray); + const awaitedTankNames = use(tankNames); const tankFilters = useStore($tankFilters); const tankopediaSort = useStore($tankopediaSort); const tanksFiltered = useMemo(() => { @@ -376,7 +366,7 @@ export const TankSearch = memo( ? sorted : sorted.reverse(); } else { - const searchedRaw = fuzzysort.go(tankFilters.search, awaitedTankNames, { + const searchedRaw = 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 fbdccaa27..7cb8efebf 100644 --- a/packages/website/src/pages/tools/tankopedia/index.astro +++ b/packages/website/src/pages/tools/tankopedia/index.astro @@ -4,5 +4,7 @@ import ToolLayout from '../../../layouts/ToolLayout.astro'; --- + + diff --git a/packages/website/src/stores/tankFilters.ts b/packages/website/src/stores/tankFilters.ts index 8b7b088c5..92f428686 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 initialTankFilters : TankFilters = { +export const $tankFilters = map({ tiers: [], nations: [], classes: [], @@ -19,6 +19,4 @@ export const initialTankFilters : TankFilters = { 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 db98b6d04..6cd1f9b9b 100644 --- a/packages/website/src/stores/tankopediaPersistent/index.ts +++ b/packages/website/src/stores/tankopediaPersistent/index.ts @@ -1,5 +1,9 @@ -import type { TankClass, Tier, TreeType } from '@blitzkit/core'; -import type { ENVIRONMENTS } from '../../components/Sandbox/components/Lighting'; +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 { SORT_NAMES, TankopediaDisplay } from './constants'; export type TankopediaSortBy = keyof typeof SORT_NAMES; @@ -34,39 +38,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) }, + ), + ), + );