diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx index 2a06dac30..a9c11a909 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx @@ -2,7 +2,6 @@ import { PerspectiveCamera } from '@react-three/drei'; import { Canvas } from '@react-three/fiber'; import { Suspense, use, useEffect, useRef } from 'react'; import { Armor } from '../../../../../../components/Armor'; -import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay'; import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits'; import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions'; import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform'; @@ -143,7 +142,6 @@ export function TankSandbox() { - ); diff --git a/src/components/Armor/components/CoreArmorScene.tsx b/src/components/Armor/components/CoreArmorScene.tsx index eca5109af..769d94799 100644 --- a/src/components/Armor/components/CoreArmorScene.tsx +++ b/src/components/Armor/components/CoreArmorScene.tsx @@ -13,6 +13,7 @@ import { useModelDefinitions } from '../../../hooks/useModelDefinitions'; import { useDuel } from '../../../stores/duel'; import { useTankopediaPersistent } from '../../../stores/tankopedia'; import { CoreArmorSceneComponent } from './CoreArmorSceneComponent'; +import { ShotDisplay } from './ShotDisplay'; export const CoreArmorScene = memo(() => { const wrapper = useRef(null); @@ -135,86 +136,94 @@ export const CoreArmorScene = memo(() => { ).applyAxisAngle(I_HAT, Math.PI / 2); return ( - - - {armorNodes.map((node) => { - const isHull = node.name.startsWith('hull_'); - const isVisible = isHull; - const armorId = nameToArmorId(node.name); - const { spaced, thickness } = resolveArmor( - tankModelDefinition.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 isVisible = isCurrentTurret; + const isHull = node.name.startsWith('hull_'); + const isVisible = isHull; const armorId = nameToArmorId(node.name); const { spaced, thickness } = resolveArmor( - turretModelDefinition.armor, + tankModelDefinition.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 isCurrentTurret = node.name.startsWith( + `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`, ); - const isVisible = isCurrentGun; + const isVisible = isCurrentTurret; const armorId = nameToArmorId(node.name); const { spaced, thickness } = resolveArmor( - gunModelDefinition.armor, + turretModelDefinition.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/ShotDisplay.tsx b/src/components/Armor/components/ShotDisplay.tsx index e7b13b752..bec36bf3b 100644 --- a/src/components/Armor/components/ShotDisplay.tsx +++ b/src/components/Armor/components/ShotDisplay.tsx @@ -164,6 +164,10 @@ export function ShotDisplay() { ) : LENGTH_INFINITY; const inLast = shot.in.layers.findLast((layer) => layer.type !== null)!; + const outTitleColor = shot.out + ? shotStatusColors[shot.out.status] + : undefined; + const inTitleColor = shotStatusColors[shot.in.status]; return ( @@ -177,7 +181,7 @@ export function ShotDisplay() { - + {shot.in.status !== 'blocked' && shot.in.status !== 'ricochet' && ( <> @@ -224,10 +228,24 @@ export function ShotDisplay() { {shot.out && shot.out.layers.length > 0 && ( <> - + + + + ricochet (-25% penetration) + + + - + {shot.out.status !== 'blocked' && shot.out.status !== 'ricochet' && ( <> @@ -309,18 +327,22 @@ export function ShotDisplay() { new Quaternion().setFromUnitVectors(J_HAT, shot.in.surfaceNormal), )} > - + - + - + - + @@ -334,18 +356,26 @@ export function ShotDisplay() { ), )} > - + - + - + - + )}