diff --git a/packages/website/src/components/Compare/Controls.tsx b/packages/website/src/components/Compare/Controls.tsx index 47e83be04..8982b08e7 100644 --- a/packages/website/src/components/Compare/Controls.tsx +++ b/packages/website/src/components/Compare/Controls.tsx @@ -1,14 +1,14 @@ -import { PlusIcon, TrashIcon } from '@radix-ui/react-icons'; -import { Button, Dialog, Flex, SegmentedControl } from '@radix-ui/themes'; -import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions'; -import { tankToCompareMember } from '../../core/blitzkit/tankToCompareMember'; -import { useLocale } from '../../hooks/useLocale'; -import { CompareEphemeral } from '../../stores/compareEphemeral'; +import { PlusIcon, TrashIcon } from "@radix-ui/react-icons"; +import { Button, Dialog, Flex, SegmentedControl } from "@radix-ui/themes"; +import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions"; +import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember"; +import { useLocale } from "../../hooks/useLocale"; +import { CompareEphemeral } from "../../stores/compareEphemeral"; import { ComparePersistent, type DeltaMode, -} from '../../stores/comparePersistent'; -import { TankSearch } from '../TankSearch'; +} from "../../stores/comparePersistent"; +import { TankSearch } from "../TankSearch"; interface ControlsProps { addTankDialogOpen: boolean; @@ -23,7 +23,6 @@ export function Controls({ }: ControlsProps) { const deltaMode = ComparePersistent.use((state) => state.deltaMode); const mutateCompareEphemeral = CompareEphemeral.useMutation(); - const mutateComparePersistent = ComparePersistent.useMutation(); const { strings } = useLocale(); return ( @@ -58,7 +57,7 @@ export function Controls({ onSelect={(tank) => { mutateCompareEphemeral((draft) => { draft.members.push( - tankToCompareMember(tank, provisionDefinitions), + tankToCompareMember(tank, provisionDefinitions) ); draft.sorting = undefined; }); @@ -69,7 +68,7 @@ export function Controls({ draft.members.push( ...tanks.map((tank) => { return tankToCompareMember(tank, provisionDefinitions); - }), + }) ); draft.sorting = undefined; }); @@ -98,18 +97,18 @@ export function Controls({ variant="classic" value={deltaMode} onValueChange={(value) => { - mutateComparePersistent((draft) => { + ComparePersistent.mutate((draft) => { draft.deltaMode = value as DeltaMode; }); }} > - + {strings.website.tools.compare.actions.deltas.none} - + {strings.website.tools.compare.actions.deltas.percentage} - + {strings.website.tools.compare.actions.deltas.absolute} diff --git a/packages/website/src/pages/[...locale]/compare/_index.tsx b/packages/website/src/pages/[...locale]/compare/_index.tsx index d4564a70e..67e4a7688 100644 --- a/packages/website/src/pages/[...locale]/compare/_index.tsx +++ b/packages/website/src/pages/[...locale]/compare/_index.tsx @@ -1,26 +1,25 @@ -import { createDefaultSkills } from '@blitzkit/core'; -import { Flex, Heading, Text } from '@radix-ui/themes'; -import { useEffect, useMemo, useState } from 'react'; -import { CompareTable } from '../../../components/Compare/CompareTable'; -import { Controls } from '../../../components/Compare/Controls'; -import { DamageWarning } from '../../../components/DamageWarning'; -import { PageWrapper } from '../../../components/PageWrapper'; -import { awaitableEquipmentDefinitions } from '../../../core/awaitables/equipmentDefinitions'; -import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions'; -import { awaitableProvisionDefinitions } from '../../../core/awaitables/provisionDefinitions'; -import { awaitableSkillDefinitions } from '../../../core/awaitables/skillDefinitions'; -import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions'; -import { tankCharacteristics } from '../../../core/blitzkit/tankCharacteristics'; -import { tankToCompareMember } from '../../../core/blitzkit/tankToCompareMember'; +import { createDefaultSkills } from "@blitzkit/core"; +import { Flex, Heading, Text } from "@radix-ui/themes"; +import { useEffect, useMemo, useState } from "react"; +import { CompareTable } from "../../../components/Compare/CompareTable"; +import { Controls } from "../../../components/Compare/Controls"; +import { DamageWarning } from "../../../components/DamageWarning"; +import { PageWrapper } from "../../../components/PageWrapper"; +import { awaitableEquipmentDefinitions } from "../../../core/awaitables/equipmentDefinitions"; +import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions"; +import { awaitableProvisionDefinitions } from "../../../core/awaitables/provisionDefinitions"; +import { awaitableSkillDefinitions } from "../../../core/awaitables/skillDefinitions"; +import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions"; +import { tankCharacteristics } from "../../../core/blitzkit/tankCharacteristics"; +import { tankToCompareMember } from "../../../core/blitzkit/tankToCompareMember"; import { type LocaleAcceptorProps, LocaleProvider, useLocale, -} from '../../../hooks/useLocale'; -import { App } from '../../../stores/app'; -import { CompareEphemeral } from '../../../stores/compareEphemeral'; -import { ComparePersistent } from '../../../stores/comparePersistent'; -import { TankopediaPersistent } from '../../../stores/tankopediaPersistent'; +} from "../../../hooks/useLocale"; +import { App } from "../../../stores/app"; +import { CompareEphemeral } from "../../../stores/compareEphemeral"; +import { TankopediaPersistent } from "../../../stores/tankopediaPersistent"; const [ modelDefinitions, @@ -41,13 +40,11 @@ export function Page({ locale }: LocaleAcceptorProps) { - - - - - + + + @@ -72,18 +69,15 @@ function Content() { stockTurret: thisMember.tank.turrets[0], applyReactiveArmor: members.some( (member) => - member.key !== thisMember.key && - member.consumables.includes(33), + member.key !== thisMember.key && member.consumables.includes(33) ), applyDynamicArmor: members.some( (member) => - member.key !== thisMember.key && - member.consumables.includes(73), + member.key !== thisMember.key && member.consumables.includes(73) ), applySpallLiner: members.some( (member) => - member.key !== thisMember.key && - member.provisions.includes(101), + member.key !== thisMember.key && member.provisions.includes(101) ), assaultDistance: thisMember.assaultDistance, }, @@ -91,20 +85,20 @@ function Content() { equipmentDefinitions: equipmentDefinitions, provisionDefinitions: provisionDefinitions, tankModelDefinition: modelDefinitions.models[thisMember.tank.id], - }, - ), + } + ) ), - [members, crewSkills], + [members, crewSkills] ); const mutateCompareEphemeral = CompareEphemeral.useMutation(); useEffect(() => { const search = new URLSearchParams(window.location.search); - const tanksQuery = search.get('tanks'); + const tanksQuery = search.get("tanks"); if (tanksQuery === null) return; - const tanks = tanksQuery.split(',').map(Number); + const tanks = tanksQuery.split(",").map(Number); mutateCompareEphemeral((draft) => { draft.members = []; @@ -122,12 +116,12 @@ function Content() { useEffect(() => { const search = new URLSearchParams(window.location.search); - search.set('tanks', members.map((member) => member.tank.id).join(',')); + search.set("tanks", members.map((member) => member.tank.id).join(",")); window.history.replaceState( {}, - '', - `${window.location.pathname}?${search.toString()}`, + "", + `${window.location.pathname}?${search.toString()}` ); }, [members]); diff --git a/packages/website/src/stores/comparePersistent.ts b/packages/website/src/stores/comparePersistent.ts index 1c9c528bf..3f6b0db96 100644 --- a/packages/website/src/stores/comparePersistent.ts +++ b/packages/website/src/stores/comparePersistent.ts @@ -1,23 +1,12 @@ -import * as lodash from 'lodash-es'; -import { create } from 'zustand'; -import { persist, subscribeWithSelector } from 'zustand/middleware'; -import { createContextualStore } from '../core/zustand/createContextualStore'; +import { Varuna } from "varuna"; + +export type DeltaMode = "none" | "percentage" | "absolute"; -export type DeltaMode = 'none' | 'percentage' | 'absolute'; export interface ComparePersistent { deltaMode: DeltaMode; } -export const ComparePersistent = createContextualStore(() => - create()( - persist( - subscribeWithSelector(() => ({ - deltaMode: 'none', - })), - { - name: 'compare', - merge: (a, b) => lodash.merge(b, a), - }, - ), - ), +export const ComparePersistent = new Varuna( + { deltaMode: "none" }, + "compare-2" );