feat: migrated duel store

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

@@ -7,13 +7,13 @@ import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import strings from '../../../../../../lang/en-US.json';
 import { theme } from '../../../../../../stitches.config';
-import { useDuel } from '../../../../../../stores/duel';
+import * as Duel from '../../../../../../stores/duel';
 import { TankSandbox } from './TankSandbox';
 import { Options } from './components/Options';
 
 export function HeroSection() {
-  const protagonist = useDuel((state) => state.protagonist!.tank);
-  const antagonist = useDuel((state) => state.antagonist!.tank);
+  const protagonist = Duel.use((state) => state.protagonist!.tank);
+  const antagonist = Duel.use((state) => state.antagonist!.tank);
   const wideFormat = useWideFormat(880);
   const compareTanks =
     protagonist.id === antagonist.id

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

@@ -7,7 +7,7 @@ import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitio
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
-import { mutateDuel, useDuel } from '../../../../../../stores/duel';
+import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
@@ -20,7 +20,8 @@ export function TankSandbox() {
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const awaitedModelDefinitions = use(modelDefinitions);
-  const protagonist = useDuel((state) => state.protagonist!);
+  const protagonist = Duel.use((state) => state.protagonist!);
+  const mutateDuel = Duel.useMutation();
   const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];

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

@@ -7,7 +7,7 @@ import { asset } from '../../../../../../core/blitzkit/asset';
 import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
-import { useDuel } from '../../../../../../stores/duel';
+import * as Duel from '../../../../../../stores/duel';
 
 export function TreeArrow({
   style,
@@ -53,7 +53,7 @@ export function TreeArrow({
 export function TechTreeSection() {
   const wideFormat = useWideFormat(720);
   const awaitedTankDefinitions = use(tankDefinitions);
-  const tank = useDuel((state) => state.protagonist!.tank);
+  const tank = Duel.use((state) => state.protagonist!.tank);
 
   if (tank.treeType !== 'researchable') return null;
 

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

@@ -32,7 +32,7 @@ import {
 import { useEquipment } from '../../../../../../../hooks/useEquipment';
 import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
 import * as App from '../../../../../../../stores/app';
-import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
 import * as TankopediaPersistent from '../../../../../../../stores/tankopediaPersistent';
 import { TankSearch } from '../../../../components/TankSearch';
@@ -66,13 +66,14 @@ export function Options() {
     (state) => state.model.visual.environment,
   );
   const developerMode = App.use((state) => state.developerMode);
-  const antagonistGun = useDuel((state) => state.antagonist!.gun);
-  const antagonistShell = useDuel((state) => state.antagonist!.shell);
+  const antagonistGun = Duel.use((state) => state.antagonist!.gun);
+  const antagonistShell = Duel.use((state) => state.antagonist!.shell);
   const [antagonistSelectorOpen, setAntagonistSelectorOpen] = useState(false);
-  const antagonistTank = useDuel((state) => state.antagonist!.tank);
-  const antagonistTurret = useDuel((state) => state.antagonist!.turret);
+  const antagonistTank = Duel.use((state) => state.antagonist!.tank);
+  const antagonistTurret = Duel.use((state) => state.antagonist!.turret);
   const hasCalibratedShells = useEquipment(103, true);
   const [tab, setTab] = useState('search');
+  const mutateDuel = Duel.useMutation();
   const hasEnhancedArmor = useEquipment(110);
 
   return (

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

@@ -21,12 +21,14 @@ import {
 import { normalizeAngleRad } from '../../../../../../../core/math/normalizeAngleRad';
 import { useAwait } from '../../../../../../../hooks/useAwait';
 import { useModel } from '../../../../../../../hooks/useModel';
-import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
+import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
 
 export const TankModel = memo(() => {
+  const mutateDuel = Duel.useMutation();
+  const duelStore = Duel.useStore();
   const awaitedModelDefinitions = useAwait(modelDefinitions);
-  const protagonist = useDuel((draft) => draft.protagonist!);
+  const protagonist = Duel.use((draft) => draft.protagonist!);
   const canvas = useThree((state) => state.gl.domElement);
   const hullContainer = useRef<Group>(null);
   const turretContainer = useRef<Group>(null);
@@ -216,7 +218,7 @@ export const TankModel = memo(() => {
             }
           }
           async function handlePointerMove(event: PointerEvent) {
-            const duel = useDuel.getState();
+            const duel = duelStore.getState();
             const hasImprovedVerticalStabilizer = await hasEquipment(
               122,
               duel.protagonist!.tank.equipment,
@@ -296,7 +298,7 @@ export const TankModel = memo(() => {
               window.addEventListener('pointerup', handlePointerUp);
             }
             async function handlePointerMove(event: PointerEvent) {
-              const duel = useDuel.getState();
+              const duel = duelStore.getState();
               const hasImprovedVerticalStabilizer = await hasEquipment(
                 122,
                 duel.protagonist!.tank.equipment,