diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx index 394f9b1f3..e92eabb3d 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx @@ -1,6 +1,7 @@ import { ThreeEvent, useThree } from '@react-three/fiber'; import { memo, useRef } from 'react'; import { Group, Mesh, MeshStandardMaterial, Vector2 } from 'three'; +import { ModelTankWrapper } from '../../../../../../../components/Armor/components/ModelTankWrapper'; import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits'; import { hasEquipment } from '../../../../../../../core/blitzkit/hasEquipment'; import { jsxTree } from '../../../../../../../core/blitzkit/jsxTree'; @@ -36,7 +37,7 @@ export const TankModel = memo(() => { const nodes = Object.values(gltf.nodes); return ( - + {nodes.map((node) => { const isHull = node.name === 'hull'; const isWheel = node.name.startsWith('chassis_wheel_'); @@ -260,6 +261,6 @@ export const TankModel = memo(() => { })} - + ); }); diff --git a/src/components/Armor/components/CoreArmorScene.tsx b/src/components/Armor/components/CoreArmorScene.tsx index 630b2a4d7..d87f98cb9 100644 --- a/src/components/Armor/components/CoreArmorScene.tsx +++ b/src/components/Armor/components/CoreArmorScene.tsx @@ -9,6 +9,7 @@ import { useTankTransform } from '../../../hooks/useTankTransform'; import * as Duel from '../../../stores/duel'; import * as TankopediaPersistent from '../../../stores/tankopediaPersistent'; import { CoreArmorSceneComponent } from './CoreArmorSceneComponent'; +import { ModelTankWrapper } from './ModelTankWrapper'; export const CoreArmorScene = memo(() => { const wrapper = useRef(null); @@ -47,9 +48,8 @@ export const CoreArmorScene = memo(() => { const gunOrigin = correctZYTuple(turretModelDefinition.gunOrigin); return ( - @@ -75,58 +75,55 @@ export const CoreArmorScene = memo(() => { - + {armorNodes.map((node) => { + const isCurrentTurret = node.name.startsWith( + `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`, + ); + const isVisible = isCurrentTurret; + const armorId = nameToArmorId(node.name); + const { spaced, thickness } = resolveArmor( + turretModelDefinition.armor, + armorId, + ); + + if (!isVisible || spaced || thickness === undefined) return null; + + return ( + + + + ); + })} + + {armorNodes.map((node) => { - const isCurrentTurret = node.name.startsWith( - `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`, + const isCurrentGun = node.name.startsWith( + `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`, ); - const isVisible = isCurrentTurret; + const isVisible = isCurrentGun; const armorId = nameToArmorId(node.name); const { spaced, thickness } = resolveArmor( - turretModelDefinition.armor, + gunModelDefinition.armor, armorId, ); if (!isVisible || spaced || thickness === undefined) return null; return ( - - + + ); })} - - - {armorNodes.map((node) => { - const isCurrentGun = node.name.startsWith( - `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`, - ); - const isVisible = isCurrentGun; - const armorId = nameToArmorId(node.name); - const { spaced, thickness } = resolveArmor( - gunModelDefinition.armor, - armorId, - ); - - if (!isVisible || spaced || thickness === undefined) return null; - - return ( - - - - ); - })} - - - + ); }); diff --git a/src/components/Armor/components/ModelTankWrapper.tsx b/src/components/Armor/components/ModelTankWrapper.tsx new file mode 100644 index 000000000..def5d5c66 --- /dev/null +++ b/src/components/Armor/components/ModelTankWrapper.tsx @@ -0,0 +1,7 @@ +import { GroupProps } from '@react-three/fiber'; +import { forwardRef } from 'react'; +import { Group } from 'three'; + +export const ModelTankWrapper = forwardRef((props, ref) => { + return ; +}); diff --git a/src/components/Armor/components/SpacedArmorScene.tsx b/src/components/Armor/components/SpacedArmorScene.tsx index ebe650121..5f786534d 100644 --- a/src/components/Armor/components/SpacedArmorScene.tsx +++ b/src/components/Armor/components/SpacedArmorScene.tsx @@ -1,4 +1,4 @@ -import { memo, useEffect, useRef } from 'react'; +import { memo, useRef } from 'react'; import { Group, Plane, Scene, Vector3 } from 'three'; import { correctZYTuple } from '../../../core/blitz/correctZYTuple'; import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId'; @@ -8,7 +8,7 @@ import { useModel } from '../../../hooks/useModel'; import { useModelDefinitions } from '../../../hooks/useModelDefinitions'; import { useTankTransform } from '../../../hooks/useTankTransform'; import * as Duel from '../../../stores/duel'; -import * as TankopediaPersistent from '../../../stores/tankopediaPersistent'; +import { ModelTankWrapper } from './ModelTankWrapper'; import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent'; export enum ArmorType { @@ -26,8 +26,6 @@ export const SpacedArmorScene = memo(({ scene }) => { const modelDefinitions = useModelDefinitions(); const turretContainer = useRef(null); const gunContainer = useRef(null); - const tankopediaPersistentStore = TankopediaPersistent.useStore(); - const initialTankopediaState = tankopediaPersistentStore.getState(); const protagonist = Duel.use((draft) => draft.protagonist); const tank = Duel.use((state) => state.protagonist.tank); const track = Duel.use((state) => state.protagonist.track); @@ -51,23 +49,8 @@ export const SpacedArmorScene = memo(({ scene }) => { useTankTransform(protagonist, turretContainer, gunContainer); - useEffect(() => { - const unsubscribe = tankopediaPersistentStore.subscribe( - (state) => state.mode, - (mode) => { - if (wrapper.current) wrapper.current.visible = mode === 'armor'; - }, - ); - - return unsubscribe; - }); - return ( - + {armorNodes.map((node) => { const isHull = node.name.startsWith('hull_'); @@ -91,6 +74,7 @@ export const SpacedArmorScene = memo(({ scene }) => { ); })} + {modelNodes.map((node) => { const isWheel = node.name.startsWith('chassis_wheel_'); const isTrack = node.name.startsWith('chassis_track_'); @@ -111,25 +95,53 @@ export const SpacedArmorScene = memo(({ scene }) => { })} - + {armorNodes.map((node) => { + const isCurrentTurret = node.name.startsWith( + `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`, + ); + const isVisible = isCurrentTurret; + const armorId = nameToArmorId(node.name); + const { spaced, thickness } = resolveArmor( + turretModelDefinition.armor, + armorId, + ); + + if (!isVisible || thickness === undefined) return null; + + return ( + + + + ); + })} + + {armorNodes.map((node) => { - const isCurrentTurret = node.name.startsWith( - `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`, + const isCurrentGun = node.name.startsWith( + `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`, ); - const isVisible = isCurrentTurret; + const isVisible = isCurrentGun; const armorId = nameToArmorId(node.name); const { spaced, thickness } = resolveArmor( - turretModelDefinition.armor, + gunModelDefinition.armor, armorId, ); if (!isVisible || thickness === undefined) return null; return ( - + (({ scene }) => { ); })} - - - - {armorNodes.map((node) => { - const isCurrentGun = node.name.startsWith( - `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`, - ); - const isVisible = isCurrentGun; - const armorId = nameToArmorId(node.name); - const { spaced, thickness } = resolveArmor( - gunModelDefinition.armor, - armorId, - ); - - if (!isVisible || thickness === undefined) return null; - - return ( - - - - ); - })} - {modelNodes.map((node) => { const gunString = `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`; @@ -196,6 +177,6 @@ export const SpacedArmorScene = memo(({ scene }) => { })} - + ); });