fix: no null return before hook

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

@@ -42,8 +42,6 @@ export function TankDisplay() {
     return state.protagonist;
   });
 
-  if (!protagonist) return null;
-
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);
     window.addEventListener('pointerup', handlePointerUp);
@@ -71,6 +69,8 @@ export function TankDisplay() {
   });
 
   useEffect(() => {
+    if (!protagonist) return void 0;
+
     const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
     const turretModelDefinition =
       tankModelDefinition.turrets[protagonist.turret.id];
@@ -84,7 +84,9 @@ export function TankDisplay() {
         turretModelDefinition.yaw,
       );
     });
-  }, [protagonist.gun, protagonist.turret]);
+  }, [protagonist?.gun, protagonist?.turret]);
+
+  if (!protagonist) return null;
 
   return (
     <Theme radius={isFullScreen ? 'none' : undefined}>

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

@@ -34,7 +34,16 @@ export function TankArmor({ ...props }: TankArmorProps) {
     return state.antagonist;
   });
   const showSpacedArmor = useTankopedia((state) => state.model.showSpacedArmor);
+  const model = useTankopedia((state) => state.model);
 
+  useEffect(() => {
+    (async () => {
+      setAwaitedModelDefinitions(await modelDefinitions);
+    })();
+  }, []);
+
+  // it's ok to have hooks after this early termination because this will never be true
+  // it's more for typescript to stop throwing a fit
   if (!protagonist || !antagonist) return null;
 
   const armorGltf = useLoader(
@@ -45,13 +54,6 @@ export function TankArmor({ ...props }: TankArmorProps) {
     GLTFLoader,
     asset(`3d/tanks/models/${protagonist.tank.id}.glb`),
   );
-  const model = useTankopedia((state) => state.model);
-
-  useEffect(() => {
-    (async () => {
-      setAwaitedModelDefinitions(await modelDefinitions);
-    })();
-  }, []);
 
   if (!awaitedModelDefinitions) return null;
 
@@ -247,6 +249,7 @@ export function TankArmor({ ...props }: TankArmorProps) {
                 (isSpaced && !showSpacedArmor)
               )
                 return null;
+
               return (
                 <ArmorMesh
                   isAffectedBySpaced={affectedBySpacedCapable}

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

@@ -33,6 +33,16 @@ export function TankModel() {
     if (!state.areTanksAssigned) return;
     return state.protagonist;
   });
+  const model = useTankopedia((state) => state.model);
+  const hullContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null);
+  const gunContainer = useRef<Group>(null);
+
+  useEffect(() => {
+    (async () => {
+      setAwaitedModelDefinitions(await modelDefinitions);
+    })();
+  }, []);
 
   if (!protagonist) return null;
 
@@ -40,18 +50,8 @@ export function TankModel() {
     GLTFLoader,
     asset(`3d/tanks/models/${protagonist.tank.id}.glb`),
   );
-  const model = useTankopedia((state) => state.model);
-  const hullContainer = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
   const nodes = Object.values(gltf.nodes);
 
-  useEffect(() => {
-    (async () => {
-      setAwaitedModelDefinitions(await modelDefinitions);
-    })();
-  }, []);
-
   if (!awaitedModelDefinitions) return null;
 
   const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
@@ -150,6 +150,7 @@ export function TankModel() {
         }
 
         if (!isVisible) return null;
+
         return (
           <mesh
             children={resolveJsxTree(node)}
@@ -248,6 +249,7 @@ export function TankModel() {
           }
 
           if (!isVisible) return null;
+
           return (
             <mesh
               visible={isVisible}
@@ -353,6 +355,7 @@ export function TankModel() {
             }
 
             if (!isVisible) return null;
+
             return (
               <mesh
                 visible={isVisible}

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

@@ -18,13 +18,6 @@ export function RotationInputs() {
     return state.protagonist;
   });
 
-  if (!protagonist) return null;
-
-  const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
-  const turretModelDefinition =
-    tankModelDefinition.turrets[protagonist.turret.id];
-  const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
-
   useEffect(() => {
     hullYawInput.current!.value = `${-Math.round(
       model.hullYaw * (180 / Math.PI),
@@ -41,6 +34,13 @@ export function RotationInputs() {
     )}`;
   }, [model.gunPitch]);
 
+  if (!protagonist) return null;
+
+  const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
+  const turretModelDefinition =
+    tankModelDefinition.turrets[protagonist.turret.id];
+  const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
+
   return (
     <Flex
       justify="center"