feat: upgrade rest of them

packages/website/src/components/Armor/components/ArmorPlateDisplay.tsx

@@ -20,7 +20,6 @@ import { ArmorType } from "./SpacedArmorScene";
 export function ArmorPlateDisplay() {
   const highlightArmor = Tankopedia.use((state) => state.highlightArmor);
   const developerMode = App.useDeferred((state) => state.developerMode, false);
-  const duelStore = Duel.useStore();
   const input = useRef<HTMLInputElement>(null);
 
   if (highlightArmor === undefined) return null;
@@ -93,7 +92,7 @@ export function ArmorPlateDisplay() {
 
                       Tankopedia.mutate((draft) => {
                         draft.highlightArmor = undefined;
-                        const { protagonist } = duelStore.getState();
+                        const { protagonist } = Duel.state;
                         const tank = draft.model;
                         const turret = tank.turrets[protagonist.turret.id];
                         const gun = turret.guns[protagonist.gun.id];
@@ -142,7 +141,7 @@ export function ArmorPlateDisplay() {
 
                       draft.highlightArmor = undefined;
                       const initialState = Tankopedia.initial;
-                      const { protagonist } = duelStore.getState();
+                      const { protagonist } = Duel.state;
                       const tank = draft.model;
                       const initialTank = initialState.model;
                       const turret = tank.turrets[protagonist.turret.id];

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx

@@ -41,8 +41,6 @@ export function PrimaryArmorSceneComponent({
   node,
   thickness,
 }: PrimaryArmorSceneComponentProps) {
-  const tankopediaPersistentStore = TankopediaPersistent.useStore();
-  const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
     vertexShader,
@@ -80,9 +78,9 @@ export function PrimaryArmorSceneComponent({
 
   useEffect(() => {
     function handleShellChange() {
-      const duel = duelStore.getState();
       const tankopediaEphemeral = Tankopedia.state;
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+      const shell =
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
 
       material.uniforms.caliber.value = shell.caliber;
       material.uniforms.ricochet.value = degToRad(
@@ -96,8 +94,14 @@ export function PrimaryArmorSceneComponent({
       material.uniforms.damage.value = shell.armor_damage;
       material.uniforms.explosionRadius.value = shell.explosion_radius;
 
-      handleProtagonistEquipmentChange(duel.protagonist.equipmentMatrix, true);
-      handleAntagonistEquipmentChange(duel.antagonist.equipmentMatrix, true);
+      handleProtagonistEquipmentChange(
+        Duel.state.protagonist.equipmentMatrix,
+        true
+      );
+      handleAntagonistEquipmentChange(
+        Duel.state.antagonist.equipmentMatrix,
+        true
+      );
 
       invalidate();
     }
@@ -118,10 +122,9 @@ export function PrimaryArmorSceneComponent({
       equipment: EquipmentMatrix,
       noInvalidate = false
     ) {
-      const duel = duelStore.getState();
       const hasEnhancedArmor = hasEquipment(
         110,
-        duel.protagonist.tank.equipment_preset,
+        Duel.state.protagonist.tank.equipment_preset,
         equipment
       );
       material.uniforms.thickness.value = hasEnhancedArmor
@@ -134,13 +137,13 @@ export function PrimaryArmorSceneComponent({
       equipment: EquipmentMatrix,
       noInvalidate = false
     ) {
-      const duel = duelStore.getState();
       const tankopediaEphemeral = Tankopedia.state;
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+      const shell =
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       const penetration = shell.penetration.near;
       const hasCalibratedShells = hasEquipment(
         103,
-        duel.antagonist.tank.equipment_preset,
+        Duel.state.antagonist.tank.equipment_preset,
         equipment
       );
 
@@ -151,40 +154,33 @@ export function PrimaryArmorSceneComponent({
       if (!noInvalidate) invalidate();
     }
 
-    const initialState = tankopediaPersistentStore.getState();
-
     handleShellChange();
-    handleGreenPenetrationChange(initialState.greenPenetration);
-    handleAdvancedHighlightingChange(initialState.advancedHighlighting);
-    handleOpaqueChange(initialState.opaque);
-    handleWireframeChange(initialState.wireframe);
-    handleProtagonistEquipmentChange(
-      duelStore.getState().protagonist.equipmentMatrix
-    );
-    handleAntagonistEquipmentChange(
-      duelStore.getState().antagonist.equipmentMatrix
+    handleGreenPenetrationChange(TankopediaPersistent.state.greenPenetration);
+    handleAdvancedHighlightingChange(
+      TankopediaPersistent.state.advancedHighlighting
     );
+    handleOpaqueChange(TankopediaPersistent.state.opaque);
+    handleWireframeChange(TankopediaPersistent.state.wireframe);
+    handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
+    handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
 
     const unsubscribes = [
-      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      Duel.on((state) => state.antagonist.shell, handleShellChange),
       Tankopedia.on((state) => state.customShell, handleShellChange),
-      tankopediaPersistentStore.subscribe(
+      TankopediaPersistent.on(
         (state) => state.greenPenetration,
         handleGreenPenetrationChange
       ),
-      tankopediaPersistentStore.subscribe(
+      TankopediaPersistent.on(
         (state) => state.advancedHighlighting,
         handleAdvancedHighlightingChange
       ),
-      tankopediaPersistentStore.subscribe(
-        (state) => state.opaque,
-        handleOpaqueChange
-      ),
-      duelStore.subscribe(
+      TankopediaPersistent.on((state) => state.opaque, handleOpaqueChange),
+      Duel.on(
         (state) => state.protagonist.equipmentMatrix,
         (equipment) => handleProtagonistEquipmentChange(equipment)
       ),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.antagonist.equipmentMatrix,
         (equipment) => handleAntagonistEquipmentChange(equipment)
       ),

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/index.tsx

@@ -29,7 +29,6 @@ export function SpacedArmorSubExternal({
   variant,
   clip,
 }: SpacedArmorSubExternalProps) {
-  const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
     vertexShader,
@@ -48,16 +47,15 @@ export function SpacedArmorSubExternal({
 
   useEffect(() => {
     function handleShellChange() {
-      const duel = duelStore.getState();
       const tankopediaEphemeral = Tankopedia.state;
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+      const shell =
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       material.uniforms.penetration.value = shell.penetration.near;
     }
     function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
-      const duel = duelStore.getState();
       const hasEnhancedArmor = hasEquipment(
         110,
-        duel.protagonist.tank.equipment_preset,
+        Duel.state.protagonist.tank.equipment_preset,
         equipment
       );
       material.uniforms.thickness.value = hasEnhancedArmor
@@ -65,13 +63,13 @@ export function SpacedArmorSubExternal({
         : thickness;
     }
     function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
-      const duel = duelStore.getState();
       const tankopediaEphemeral = Tankopedia.state;
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+      const shell =
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       const penetration = shell.penetration.near;
       const hasCalibratedShells = hasEquipment(
         103,
-        duel.antagonist.tank.equipment_preset,
+        Duel.state.antagonist.tank.equipment_preset,
         equipment
       );
 
@@ -81,21 +79,17 @@ export function SpacedArmorSubExternal({
     }
 
     handleShellChange();
-    handleProtagonistEquipmentChange(
-      duelStore.getState().protagonist.equipmentMatrix
-    );
-    handleAntagonistEquipmentChange(
-      duelStore.getState().antagonist.equipmentMatrix
-    );
+    handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
+    handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
 
     const unsubscribes = [
-      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      Duel.on((state) => state.antagonist.shell, handleShellChange),
       Tankopedia.on((state) => state.customShell, handleShellChange),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.protagonist.equipmentMatrix,
         handleProtagonistEquipmentChange
       ),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.antagonist.equipmentMatrix,
         handleAntagonistEquipmentChange
       ),

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/index.tsx

@@ -30,7 +30,6 @@ export function SpacedArmorSubSpaced({
   node,
   thickness,
 }: SpacedArmorSubSpacedProps) {
-  const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
     vertexShader,
@@ -50,9 +49,9 @@ export function SpacedArmorSubSpaced({
 
   useEffect(() => {
     function handleShellChange() {
-      const duel = duelStore.getState();
       const tankopediaEphemeral = Tankopedia.state;
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+      const shell =
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
 
       material.uniforms.penetration.value = shell.penetration.near;
       material.uniforms.caliber.value = shell.caliber;
@@ -64,10 +63,9 @@ export function SpacedArmorSubSpaced({
       );
     }
     function handleProtagonistEquipmentChange(equipment: EquipmentMatrix) {
-      const duel = duelStore.getState();
       const hasEnhancedArmor = hasEquipment(
         110,
-        duel.protagonist.tank.equipment_preset,
+        Duel.state.protagonist.tank.equipment_preset,
         equipment
       );
       material.uniforms.thickness.value = hasEnhancedArmor
@@ -75,13 +73,13 @@ export function SpacedArmorSubSpaced({
         : thickness;
     }
     function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
-      const duel = duelStore.getState();
       const tankopediaEphemeral = Tankopedia.state;
-      const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
+      const shell =
+        tankopediaEphemeral.customShell ?? Duel.state.antagonist.shell;
       const penetration = shell.penetration.near;
       const hasCalibratedShells = hasEquipment(
         103,
-        duel.antagonist.tank.equipment_preset,
+        Duel.state.antagonist.tank.equipment_preset,
         equipment
       );
 
@@ -91,21 +89,17 @@ export function SpacedArmorSubSpaced({
     }
 
     handleShellChange();
-    handleProtagonistEquipmentChange(
-      duelStore.getState().protagonist.equipmentMatrix
-    );
-    handleAntagonistEquipmentChange(
-      duelStore.getState().antagonist.equipmentMatrix
-    );
+    handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
+    handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
 
     const unsubscribes = [
-      duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
+      Duel.on((state) => state.antagonist.shell, handleShellChange),
       Tankopedia.on((state) => state.customShell, handleShellChange),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.protagonist.equipmentMatrix,
         handleProtagonistEquipmentChange
       ),
-      duelStore.subscribe(
+      Duel.on(
         (state) => state.antagonist.equipmentMatrix,
         handleAntagonistEquipmentChange
       ),

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -76,7 +76,6 @@ export function SpacedArmorSceneComponent({
   clip,
   ...props
 }: SpacedArmorSceneComponentProps) {
-  const duelStore = Duel.useStore();
   const camera = useThree((state) => state.camera);
 
   const shoot = useCallback(
@@ -86,9 +85,8 @@ export function SpacedArmorSceneComponent({
       allowRicochet: boolean,
       remainingPenetrationInput?: number
     ) => {
-      const { antagonist, protagonist } = duelStore.getState();
       const { customShell } = Tankopedia.state;
-      const shell = customShell ?? antagonist.shell;
+      const shell = customShell ?? Duel.state.antagonist.shell;
       const cameraNormal = camera.position.clone().sub(point).normalize();
       const shot: Shot = {
         splashRadius:
@@ -104,13 +102,13 @@ export function SpacedArmorSceneComponent({
 
       const hasCalibratedShells = hasEquipment(
         103,
-        antagonist.tank.equipment_preset,
-        antagonist.equipmentMatrix
+        Duel.state.antagonist.tank.equipment_preset,
+        Duel.state.antagonist.equipmentMatrix
       );
       const hasEnhancedArmor = hasEquipment(
         110,
-        protagonist.tank.equipment_preset,
-        protagonist.equipmentMatrix
+        Duel.state.protagonist.tank.equipment_preset,
+        Duel.state.protagonist.equipmentMatrix
       );
       const penetration =
         shell.penetration.near *

packages/website/src/components/Armor/components/StaticArmor.tsx

@@ -46,7 +46,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);
   const canvas = useThree((state) => state.gl.domElement);
-  const duelStore = Duel.useStore();
+
   const maskOrigin =
     gunModelDefinition.mask === undefined
       ? undefined
@@ -165,16 +165,15 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             window.addEventListener("pointerup", handlePointerUp);
           }
           function handlePointerMove(event: PointerEvent) {
-            const duel = duelStore.getState();
             const hasImprovedVerticalStabilizer = hasEquipment(
               122,
-              duel.protagonist.tank.equipment_preset,
-              duel.protagonist.equipmentMatrix
+              Duel.state.protagonist.tank.equipment_preset,
+              Duel.state.protagonist.equipmentMatrix
             );
             const hasDownImprovedVerticalStabilizer = hasEquipment(
               124,
-              duel.protagonist.tank.equipment_preset,
-              duel.protagonist.equipmentMatrix
+              Duel.state.protagonist.tank.equipment_preset,
+              Duel.state.protagonist.equipmentMatrix
             );
             const boundingRect = canvas.getBoundingClientRect();
 
@@ -258,16 +257,15 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               window.addEventListener("pointerup", handlePointerUp);
             }
             function handlePointerMove(event: PointerEvent) {
-              const duel = duelStore.getState();
               const hasImprovedVerticalStabilizer = hasEquipment(
                 122,
-                duel.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix
+                Duel.state.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.equipmentMatrix
               );
               const hasDownImprovedVerticalStabilizer = hasEquipment(
                 124,
-                duel.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix
+                Duel.state.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.equipmentMatrix
               );
               const boundingRect = canvas.getBoundingClientRect();
               delta.set(event.clientX, event.clientY).sub(position);
@@ -339,16 +337,15 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               window.addEventListener("pointerup", handlePointerUp);
             }
             function handlePointerMove(event: PointerEvent) {
-              const duel = duelStore.getState();
               const hasImprovedVerticalStabilizer = hasEquipment(
                 122,
-                duel.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix
+                Duel.state.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.equipmentMatrix
               );
               const hasDownImprovedVerticalStabilizer = hasEquipment(
                 124,
-                duel.protagonist.tank.equipment_preset,
-                duel.protagonist.equipmentMatrix
+                Duel.state.protagonist.tank.equipment_preset,
+                Duel.state.protagonist.equipmentMatrix
               );
               const boundingRect = canvas.getBoundingClientRect();
               delta.set(event.clientX, event.clientY).sub(position);