feat: upgrade tankopedia stores

src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills/index.tsx

@@ -12,15 +12,13 @@ import { use } from 'react';
 import { CrewSkillManager } from '../../../../../../../../components/CrewSkillManager';
 import { createDefaultSkills } from '../../../../../../../../core/blitzkit/createDefaultSkills';
 import { skillDefinitions } from '../../../../../../../../core/blitzkit/skillDefinitions';
-import {
-  mutateTankopediaTemporary,
-  useTankopediaTemporary,
-} from '../../../../../../../../stores/tankopedia';
+import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaEphemeral';
 import { ConfigurationChildWrapper } from '../ConfigurationChildWrapper';
 
 export function Skills() {
   const awaitedSkillDefinitions = use(skillDefinitions);
-  const skillLevels = useTankopediaTemporary((state) => state.skills);
+  const skillLevels = TankopediaEphemeral.use((state) => state.skills);
+  const mutateTankopediaTemporary = TankopediaEphemeral.useMutation();
 
   if (Object.keys(skillLevels).length === 0) {
     mutateTankopediaTemporary((draft) => {

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -29,7 +29,7 @@ import {
 import { useAdExempt } from '../../../../../../hooks/useAdExempt';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
-import { useTankopediaTemporary } from '../../../../../../stores/tankopedia';
+import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
 import { Info } from './components/Info';
 import { InfoWithDelta } from './components/InfoWithDelta';
 
@@ -38,7 +38,7 @@ export function Characteristics() {
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const awaitedModelDefinitions = use(modelDefinitions);
   const awaitedProvisionDefinitions = use(provisionDefinitions);
-  const crewSkills = useTankopediaTemporary((state) => state.skills);
+  const crewSkills = TankopediaEphemeral.use((state) => state.skills);
   const penetrationDistanceInput = useRef<HTMLInputElement>(null);
   const hasImprovedVentilation = useEquipment(102);
   const crewMastery = useDuel((state) => state.protagonist!.crewMastery);

src/app/tools/tankopedia/[id]/components/Control.tsx

@@ -9,7 +9,7 @@ import { modelDefinitions } from '../../../../../core/blitzkit/modelDefinitions'
 import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
 import { useAwait } from '../../../../../hooks/useAwait';
 import { useDuel } from '../../../../../stores/duel';
-import { useTankopediaTemporary } from '../../../../../stores/tankopedia';
+import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
 
 const poseDistances: Record<Pose, number> = {
   [Pose.HullDown]: 15,
@@ -18,6 +18,7 @@ const poseDistances: Record<Pose, number> = {
 };
 
 export function Controls() {
+  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const camera = useThree((state) => state.camera);
   const canvas = useThree((state) => state.gl.domElement);
   const orbitControls = useRef<OrbitControlsClass>(null);
@@ -62,7 +63,7 @@ export function Controls() {
   }, [camera]);
 
   useEffect(() => {
-    const unsubscribeTankopedia = useTankopediaTemporary.subscribe(
+    const unsubscribeTankopediaEphemeral = tankopediaEphemeralStore.subscribe(
       (state) => state.controlsEnabled,
       (enabled) => {
         if (orbitControls.current) orbitControls.current.enabled = enabled;
@@ -158,7 +159,7 @@ export function Controls() {
     poseEvent.on(handlePoseEvent);
 
     return () => {
-      unsubscribeTankopedia();
+      unsubscribeTankopediaEphemeral();
       poseEvent.off(handlePoseEvent);
     };
   }, [camera, protagonist.tank.id, antagonist.tank.id]);
@@ -182,7 +183,7 @@ export function Controls() {
       maxDistance={20}
       minDistance={5}
       ref={orbitControls}
-      enabled={useTankopediaTemporary.getState().controlsEnabled}
+      enabled={tankopediaEphemeralStore.getState().controlsEnabled}
       rotateSpeed={0.25}
       enableDamping={false}
       autoRotate={autoRotate}

src/app/tools/tankopedia/[id]/components/Lighting.tsx

@@ -1,7 +1,7 @@
 import { Environment } from '@react-three/drei';
 import { useModel } from '../../../../../hooks/useModel';
 import { useDuel } from '../../../../../stores/duel';
-import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
+import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
 
 export const ENVIRONMENTS = [
   'lobby',
@@ -14,10 +14,10 @@ export const ENVIRONMENTS = [
 export function Lighting() {
   const protagonist = useDuel((state) => state.protagonist!);
   const { hasPbr } = useModel(protagonist.tank.id);
-  const showEnvironment = useTankopediaPersistent(
+  const showEnvironment = TankopediaPersistent.use(
     (state) => state.model.visual.showEnvironment,
   );
-  const environment = useTankopediaPersistent(
+  const environment = TankopediaPersistent.use(
     (state) => state.model.visual.environment,
   );
 

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -8,7 +8,7 @@ import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransf
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
-import { mutateTankopediaTemporary } from '../../../../../../stores/tankopedia';
+import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
 import { SceneProps } from '../SceneProps';
@@ -16,6 +16,7 @@ import { ModelLoader } from './components/ModelLoader';
 import { TankModel } from './components/TankModel';
 
 export function TankSandbox() {
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const awaitedModelDefinitions = use(modelDefinitions);
@@ -126,7 +127,7 @@ export function TankSandbox() {
       ref={canvas}
       onPointerDown={handlePointerDown}
       onPointerMissed={() => {
-        mutateTankopediaTemporary((draft) => {
+        mutateTankopediaEphemeral((draft) => {
           draft.shot = undefined;
         });
       }}

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -33,36 +33,36 @@ import { useEquipment } from '../../../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
 import { useApp } from '../../../../../../../stores/app';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
-import mutateTankopediaPersistent, {
-  mutateTankopediaTemporary,
-  useTankopediaPersistent,
-} from '../../../../../../../stores/tankopedia';
+import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
+import * as TankopediaPersistent from '../../../../../../../stores/tankopediaPersistent';
 import { TankSearch } from '../../../../components/TankSearch';
 import { ENVIRONMENTS } from '../../Lighting';
 import { RotationInputs } from '../../QuickInputs';
 
 export function Options() {
-  const mode = useTankopediaPersistent((state) => state.mode);
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
+  const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
+  const mode = TankopediaPersistent.use((state) => state.mode);
   const isFullScreen = useFullScreen();
-  const showGrid = useTankopediaPersistent(
+  const showGrid = TankopediaPersistent.use(
     (state) => state.model.visual.showGrid,
   );
-  const showEnvironment = useTankopediaPersistent(
+  const showEnvironment = TankopediaPersistent.use(
     (state) => state.model.visual.showEnvironment,
   );
-  const greenPenetration = useTankopediaPersistent(
+  const greenPenetration = TankopediaPersistent.use(
     (state) => state.model.visual.greenPenetration,
   );
-  const wireframe = useTankopediaPersistent(
+  const wireframe = TankopediaPersistent.use(
     (state) => state.model.visual.wireframe,
   );
-  const showSpacedArmor = useTankopediaPersistent(
+  const showSpacedArmor = TankopediaPersistent.use(
     (state) => state.model.visual.showSpacedArmor,
   );
-  const opaque = useTankopediaPersistent((state) => state.model.visual.opaque);
+  const opaque = TankopediaPersistent.use((state) => state.model.visual.opaque);
   const fullScreenAvailable =
     typeof document !== 'undefined' && document.fullscreenEnabled;
-  const environment = useTankopediaPersistent(
+  const environment = TankopediaPersistent.use(
     (state) => state.model.visual.environment,
   );
   const developerMode = useApp((state) => state.developerMode);
@@ -152,7 +152,7 @@ export function Options() {
                   mutateDuel((draft) => {
                     draft.antagonist!.shell = thisShell;
                   });
-                  mutateTankopediaTemporary((draft) => {
+                  mutateTankopediaEphemeral((draft) => {
                     draft.shot = undefined;
                   });
                 }}
@@ -186,7 +186,7 @@ export function Options() {
                     ? 0
                     : 1;
                 });
-                mutateTankopediaTemporary((draft) => {
+                mutateTankopediaEphemeral((draft) => {
                   draft.shot = undefined;
                 });
               }}
@@ -218,7 +218,7 @@ export function Options() {
                     ? 0
                     : -1;
                 });
-                mutateTankopediaTemporary((draft) => {
+                mutateTankopediaEphemeral((draft) => {
                   draft.shot = undefined;
                 });
               }}
@@ -337,7 +337,7 @@ export function Options() {
                                       draft.antagonist!.shell =
                                         draft.antagonist!.gun.shells[0];
                                     });
-                                    mutateTankopediaTemporary((draft) => {
+                                    mutateTankopediaEphemeral((draft) => {
                                       draft.shot = undefined;
                                     });
                                   }}
@@ -466,7 +466,7 @@ export function Options() {
                       mutateTankopediaPersistent((draft) => {
                         draft.model.visual.showSpacedArmor = checked;
                       });
-                      mutateTankopediaTemporary((draft) => {
+                      mutateTankopediaEphemeral((draft) => {
                         draft.shot = undefined;
                       });
                     }}

src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx

@@ -22,7 +22,7 @@ import { normalizeAngleRad } from '../../../../../../../core/math/normalizeAngle
 import { useAwait } from '../../../../../../../hooks/useAwait';
 import { useModel } from '../../../../../../../hooks/useModel';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
-import { mutateTankopediaTemporary } from '../../../../../../../stores/tankopedia';
+import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
 
 export const TankModel = memo(() => {
   const awaitedModelDefinitions = useAwait(modelDefinitions);
@@ -31,6 +31,7 @@ export const TankModel = memo(() => {
   const hullContainer = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
+  const mutateTankopediaTemporary = TankopediaEphemeral.useMutation();
 
   useEffect(() => {
     const hullOrigin = new Vector3(

src/app/tools/tankopedia/[id]/components/SceneProps.tsx

@@ -2,10 +2,10 @@ import { useFrame, useLoader } from '@react-three/fiber';
 import { clamp } from 'lodash';
 import { useRef } from 'react';
 import { MeshStandardMaterial, TextureLoader } from 'three';
-import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
+import * as TankopediaPersistent from '../../../../../stores/tankopediaPersistent';
 
 export function SceneProps() {
-  const show = useTankopediaPersistent(
+  const show = TankopediaPersistent.use(
     (state) =>
       state.model.visual.showGrid && !state.model.visual.showEnvironment,
   );

src/app/tools/tankopedia/[id]/page.tsx

@@ -6,7 +6,7 @@ import PageWrapper from '../../../../components/PageWrapper';
 import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember';
 import { useAdExempt } from '../../../../hooks/useAdExempt';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
-import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
+import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
 import { HistorySection } from './components/HistorySection';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
@@ -18,6 +18,7 @@ export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
   const assigned = useDuel((state) => state.assigned);
   const exempt = useAdExempt();
+  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   useEffect(() => {
     assignDuelMember('both', initialId);
@@ -26,7 +27,7 @@ export default function Page({ params }: { params: { id: string } }) {
       if (document.activeElement instanceof HTMLInputElement) return;
 
       function wipeShot() {
-        mutateTankopediaTemporary((draft) => {
+        mutateTankopediaEphemeral((draft) => {
           draft.shot = undefined;
         });
       }
@@ -64,7 +65,7 @@ export default function Page({ params }: { params: { id: string } }) {
     const unsubscribe = useDuel.subscribe(
       (state) => state.protagonist?.tank.id,
       () => {
-        mutateTankopediaTemporary((draft) => {
+        mutateTankopediaEphemeral((draft) => {
           draft.shot = undefined;
         });
       },

src/app/tools/tankopedia/components/PageTurner.tsx

@@ -2,9 +2,7 @@ import { CaretLeftIcon, CaretRightIcon } from '@radix-ui/react-icons';
 import { Flex, IconButton, TextField } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
-import mutateTankopediaPersistent, {
-  useTankopediaPersistent,
-} from '../../../../stores/tankopedia';
+import * as TankopediaPersistent from '../../../../stores/tankopediaPersistent';
 
 interface PageTurnerProps {
   searchedList: TankDefinition[];
@@ -12,7 +10,8 @@ interface PageTurnerProps {
 }
 
 export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
-  const page = useTankopediaPersistent((state) => state.filters.page);
+  const page = TankopediaPersistent.use((state) => state.filters.page);
+  const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
   const pageInput = useRef<HTMLInputElement>(null);
 
   useEffect(() => {

src/app/tools/tankopedia/components/Sort.tsx

@@ -1,6 +1,6 @@
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu } from '@radix-ui/themes';
-import { TankopediaSortDirection } from '../../../../stores/tankopedia';
+import { TankopediaSortDirection } from '../../../../stores/tankopediaPersistent';
 import * as TankopediaSort from '../../../../stores/tankopediaSort';
 
 export function Sort() {

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -21,7 +21,10 @@ import {
 import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
 import { useAdExempt } from '../../../../../hooks/useAdExempt';
 import * as TankFilters from '../../../../../stores/tankFilters';
-import { SORT_NAMES, SORT_UNITS } from '../../../../../stores/tankopedia';
+import {
+  SORT_NAMES,
+  SORT_UNITS,
+} from '../../../../../stores/tankopediaPersistent/constants';
 import * as TankopediaSort from '../../../../../stores/tankopediaSort';
 import { FilterControl } from '../FilterControl';
 import { NoResults } from '../NoResults';