feat: upgrade ComparePersistent

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;
           });
         }}
       >
-        <SegmentedControl.Item value={'none' satisfies DeltaMode}>
+        <SegmentedControl.Item value={"none" satisfies DeltaMode}>
           {strings.website.tools.compare.actions.deltas.none}
         </SegmentedControl.Item>
-        <SegmentedControl.Item value={'percentage' satisfies DeltaMode}>
+        <SegmentedControl.Item value={"percentage" satisfies DeltaMode}>
           {strings.website.tools.compare.actions.deltas.percentage}
         </SegmentedControl.Item>
-        <SegmentedControl.Item value={'absolute' satisfies DeltaMode}>
+        <SegmentedControl.Item value={"absolute" satisfies DeltaMode}>
           {strings.website.tools.compare.actions.deltas.absolute}
         </SegmentedControl.Item>
       </SegmentedControl.Root>

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) {
     <LocaleProvider locale={locale}>
       <App.Provider>
         <TankopediaPersistent.Provider>
-          <ComparePersistent.Provider>
-            <CompareEphemeral.Provider
-              data={createDefaultSkills(skillDefinitions)}
-            >
-              <Content />
-            </CompareEphemeral.Provider>
-          </ComparePersistent.Provider>
+          <CompareEphemeral.Provider
+            data={createDefaultSkills(skillDefinitions)}
+          >
+            <Content />
+          </CompareEphemeral.Provider>
         </TankopediaPersistent.Provider>
       </App.Provider>
     </LocaleProvider>
@@ -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]);
 

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<ComparePersistent>()(
-    persist(
-      subscribeWithSelector<ComparePersistent>(() => ({
-        deltaMode: 'none',
-      })),
-      {
-        name: 'compare',
-        merge: (a, b) => lodash.merge(b, a),
-      },
-    ),
-  ),
+export const ComparePersistent = new Varuna<ComparePersistent>(
+  { deltaMode: "none" },
+  "compare-2"
 );