feat: dynamic model defs

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

@@ -28,6 +28,7 @@ import {
 } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useAdExempt } from '../../../../../../hooks/useAdExempt';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
 import { Info } from './components/Info';
@@ -37,7 +38,6 @@ export function Characteristics() {
   const mutateDuel = Duel.useMutation();
   const exempt = useAdExempt();
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
-  const awaitedModelDefinitions = use(modelDefinitions);
   const awaitedProvisionDefinitions = use(provisionDefinitions);
   const crewSkills = TankopediaEphemeral.use((state) => state.skills);
   const penetrationDistanceInput = useRef<HTMLInputElement>(null);
@@ -68,7 +68,8 @@ export function Characteristics() {
   const stockTrack = tank.tracks[0];
   const stockTurret = tank.turrets[0];
   const stockGun = stockTurret.guns[0];
-  const tankModelDefinition = awaitedModelDefinitions[tank.id];
+  const awaitedModelDefinitions = use(modelDefinitions);
+  const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition = tankModelDefinition.turrets[turret.id];
   const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const stats = tankCharacteristics(
@@ -94,8 +95,8 @@ export function Characteristics() {
       applySpallLiner: false,
     },
     {
+      tankModelDefinition,
       equipmentDefinitions: awaitedEquipmentDefinitions,
-      modelDefinitions: awaitedModelDefinitions,
       provisionDefinitions: awaitedProvisionDefinitions,
     },
   );

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

@@ -1,16 +1,15 @@
 import { Canvas } from '@react-three/fiber';
-import { Suspense, use, useEffect, useRef } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
 import { ArmorPlateDisplay } from '../../../../../../components/Armor/components/ArmorPlateDisplay';
 import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
 import { StaticArmor } from '../../../../../../components/StaticArmor';
 import { ThicknessRange } from '../../../../../../components/StaticArmor/components/StaticArmorScene';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
-import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
-import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
 import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent';
@@ -29,11 +28,9 @@ export function TankSandbox({ thicknessRange }: TankSandboxProps) {
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment(122);
-  const awaitedModelDefinitions = use(modelDefinitions);
-  const awaitedTankDefinitions = use(tankDefinitions);
   const protagonist = Duel.use((state) => state.protagonist);
   const mutateDuel = Duel.useMutation();
-  const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
+  const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];

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

@@ -5,11 +5,10 @@ import { ModelTankWrapper } from '../../../../../../../components/Armor/componen
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
 import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../../../../core/blitzkit/jsxTree';
-import { modelDefinitions } from '../../../../../../../core/blitzkit/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../../core/blitzkit/modelTransform';
 import { normalizeAngleRad } from '../../../../../../../core/math/normalizeAngleRad';
-import { useAwait } from '../../../../../../../hooks/useAwait';
 import { useModel } from '../../../../../../../hooks/useModel';
+import { useTankModelDefinition } from '../../../../../../../hooks/useTankModelDefinition';
 import { useTankTransform } from '../../../../../../../hooks/useTankTransform';
 import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
@@ -19,7 +18,6 @@ import { TankopediaDisplay } from '../../../../../../../stores/tankopediaPersist
 export const TankModel = memo(() => {
   const mutateDuel = Duel.useMutation();
   const duelStore = Duel.useStore();
-  const awaitedModelDefinitions = useAwait(modelDefinitions);
   const protagonist = Duel.use((draft) => draft.protagonist);
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
   const canvas = useThree((state) => state.gl.domElement);
@@ -27,18 +25,15 @@ export const TankModel = memo(() => {
   const turretContainer = useRef<Group>(null);
   const gunContainer = useRef<Group>(null);
   const mutateTankopediaTemporary = TankopediaEphemeral.useMutation();
-
-  useTankTransform(protagonist, turretContainer, gunContainer);
-
-  if (!awaitedModelDefinitions) return;
-
-  const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
+  const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
   const { gltf } = useModel(protagonist.tank.id);
   const nodes = Object.values(gltf.nodes);
 
+  useTankTransform(protagonist, turretContainer, gunContainer);
+
   return (
     <ModelTankWrapper ref={hullContainer}>
       {nodes.map((node) => {

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

@@ -1,24 +1,23 @@
 import { HeightIcon, WidthIcon } from '@radix-ui/react-icons';
 import { Flex, TextField } from '@radix-ui/themes';
-import { use, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { degToRad, radToDeg } from 'three/src/math/MathUtils';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
-import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
 import {
   modelTransformEvent,
   ModelTransformEventData,
 } from '../../../../../../core/blitzkit/modelTransform';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { useTankModelDefinition } from '../../../../../../hooks/useTankModelDefinition';
 import * as Duel from '../../../../../../stores/duel';
 import * as styles from './index.css';
 
 export function QuickInputs() {
   const mutateDuel = Duel.useMutation();
   const protagonist = Duel.use((state) => state.protagonist);
-  const awaitedModelDefinitions = use(modelDefinitions);
   const yawInput = useRef<HTMLInputElement>(null);
   const pitchInput = useRef<HTMLInputElement>(null);
-  const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
+  const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { modelDefinitions } from '../../../../core/blitzkit/modelDefinitions';
 import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
 import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
@@ -17,6 +18,8 @@ export default async function Layout({
 }) {
   const id = Number(params.id);
   const awaitedTankDefinitions = await tankDefinitions;
+  const awaitedModelDefinitions = await modelDefinitions;
+  const tankModelDefinition = awaitedModelDefinitions[id];
   const awaitedProvisionDefinitions = await provisionDefinitions;
   const tank = awaitedTankDefinitions[id];
   const title = `${tank.name} - Tier ${TIER_ROMAN_NUMERALS[tank.tier]} ${
@@ -25,7 +28,7 @@ export default async function Layout({
   const description = `Statistics, armor, and equipment for ${tank.name}`;
 
   return (
-    <TankopediaEphemeral.Provider>
+    <TankopediaEphemeral.Provider data={tankModelDefinition}>
       <TankFilters.Provider>
         <Duel.Provider
           data={{

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

@@ -14,6 +14,7 @@ import { ShotDisplaySection } from './components/ShotDisplaySection';
 import { VideoSection } from './components/VideoSection';
 
 export default function Page({ params }: { params: { id: string } }) {
+  const id = Number(params.id);
   const exempt = useAdExempt();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const mutateDuel = Duel.useMutation();
@@ -73,7 +74,7 @@ export default function Page({ params }: { params: { id: string } }) {
 
   return (
     <PageWrapper p="0" noMaxWidth color="purple" size={1600}>
-      <HeroSection id={Number(params.id)} />
+      <HeroSection id={id} />
       <ShotDisplaySection />
       {!exempt && <AdMidSectionResponsive />}
       <CharacteristicsSection />