diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx index ed6d0580f..f4b7a822a 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx @@ -13,8 +13,7 @@ import { import { Duel } from '../../page'; import { Controls } from '../Control'; import { Lighting } from '../Lighting'; -import { QuickEquipments } from '../QuickEquipments'; -import { RotationInputs } from '../RotationInputs'; +import { RotationInputs } from '../QuickInputs'; import { SceneProps } from '../SceneProps'; import { ModelLoader } from './components/ModelLoader'; import { Options } from './components/Options'; @@ -186,7 +185,6 @@ export function TankSandbox({ duel }: TankSandboxProps) { - diff --git a/src/app/tools/tankopedia/[id]/components/QuickEquipments.tsx b/src/app/tools/tankopedia/[id]/components/QuickEquipments.tsx deleted file mode 100644 index 5f69e20ad..000000000 --- a/src/app/tools/tankopedia/[id]/components/QuickEquipments.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Flex } from '@radix-ui/themes'; -import { ModuleButton } from '../../../../../components/ModuleButton'; -import mutateTankopediaPersistent, { - useTankopediaPersistent, -} from '../../../../../stores/tankopedia'; - -export function QuickEquipments() { - const equipment = useTankopediaPersistent((state) => state.model.equipment); - - return ( - - { - mutateTankopediaPersistent((draft) => { - draft.model.equipment.calibratedShells = - !draft.model.equipment.calibratedShells; - }); - }} - /> - { - mutateTankopediaPersistent((draft) => { - draft.model.equipment.enhancedArmor = - !draft.model.equipment.enhancedArmor; - }); - }} - /> - - ); -} diff --git a/src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx b/src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx new file mode 100644 index 000000000..7c6e1596b --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx @@ -0,0 +1,25 @@ +import { Button } from '@radix-ui/themes'; +import { ComponentProps } from 'react'; +import { asset } from '../../../../../../../core/blitzkrieg/asset'; + +interface QuickEquipmentButtonProps extends ComponentProps { + equipment: number; + active: boolean; +} + +export function QuickEquipmentButton({ + equipment, + active, + ...props +}: QuickEquipmentButtonProps) { + return ( + + ); +} diff --git a/src/app/tools/tankopedia/[id]/components/RotationInputs.tsx b/src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx similarity index 73% rename from src/app/tools/tankopedia/[id]/components/RotationInputs.tsx rename to src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx index c3bc501f5..49a061958 100644 --- a/src/app/tools/tankopedia/[id]/components/RotationInputs.tsx +++ b/src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx @@ -1,13 +1,15 @@ import { Flex, TextField } from '@radix-ui/themes'; import { use, useEffect, useRef } from 'react'; -import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits'; -import { modelDefinitions } from '../../../../../core/blitzkrieg/modelDefinitions'; -import { modelTransformEvent } from '../../../../../core/blitzkrieg/modelTransform'; -import { +import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits'; +import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions'; +import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTransform'; +import mutateTankopediaPersistent, { mutateTankopediaTemporary, + useTankopediaPersistent, useTankopediaTemporary, -} from '../../../../../stores/tankopedia'; -import { Duel } from '../page'; +} from '../../../../../../stores/tankopedia'; +import { Duel } from '../../page'; +import { QuickEquipmentButton } from './components/QuickEquipmentButton'; interface RotationInputsProps { duel: Duel; @@ -18,6 +20,8 @@ export function RotationInputs({ duel: { protagonist } }: RotationInputsProps) { const awaitedModelDefinitions = use(modelDefinitions); const turretYawInput = useRef(null); const gunPitchInput = useRef(null); + const equipment = useTankopediaPersistent((state) => state.model.equipment); + const mode = useTankopediaTemporary((state) => state.mode); useEffect(() => { turretYawInput.current!.value = `${-Math.round( @@ -45,6 +49,7 @@ export function RotationInputs({ duel: { protagonist } }: RotationInputsProps) { left: 8, bottom: 8, }} + gap="4" > ° + + {mode === 'armor' && ( + + { + mutateTankopediaPersistent((draft) => { + draft.model.equipment.calibratedShells = + !draft.model.equipment.calibratedShells; + }); + }} + /> + { + mutateTankopediaPersistent((draft) => { + draft.model.equipment.enhancedArmor = + !draft.model.equipment.enhancedArmor; + }); + }} + /> + + )} ); }