diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx index 5dc4b99a2..1bf967b9d 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx @@ -1,18 +1,14 @@ -import { Flex, Heading, Switch, Text } from '@radix-ui/themes'; +import { Flex, Heading, Text } from '@radix-ui/themes'; import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants'; import { useWideFormat } from '../../../../../../hooks/useWideFormat'; import strings from '../../../../../../lang/en-US.json'; import { theme } from '../../../../../../stitches.config'; import { useDuel } from '../../../../../../stores/duel'; -import mutateTankopediaPersistent, { - useTankopediaPersistent, -} from '../../../../../../stores/tankopedia'; import { TankSandbox } from './TankSandbox'; import { Options } from './components/Options'; export function HeroSection() { const tank = useDuel((state) => state.protagonist!.tank); - const mode = useTankopediaPersistent((state) => state.mode); const wideFormat = useWideFormat(880); return ( @@ -77,31 +73,10 @@ export function HeroSection() { - { - mutateTankopediaPersistent((draft) => { - draft.mode = draft.mode === 'armor' ? 'model' : 'armor'; - }); - }} - > - - Armor - + - - ); } diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx index a820fbde2..f2b685b4a 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx @@ -4,7 +4,7 @@ import { EyeOpenIcon, GearIcon, } from '@radix-ui/react-icons'; -import { DropdownMenu, Flex, IconButton } from '@radix-ui/themes'; +import { DropdownMenu, Flex, IconButton, Switch } from '@radix-ui/themes'; import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose'; import { useFullScreen } from '../../../../../../../hooks/useFullScreen'; import { useApp } from '../../../../../../../stores/app'; @@ -15,6 +15,7 @@ import mutateTankopediaPersistent, { import { ENVIRONMENTS } from '../../Lighting'; export function Options() { + const mode = useTankopediaPersistent((state) => state.mode); const isFullScreen = useFullScreen(); const showGrid = useTankopediaPersistent( (state) => state.model.visual.showGrid, @@ -42,12 +43,32 @@ export function Options() { return ( + { + mutateTankopediaPersistent((draft) => { + draft.mode = draft.mode === 'armor' ? 'model' : 'armor'; + }); + }} + mr="2" + > + + Armor + + @@ -78,57 +99,61 @@ export function Options() { - Armor + {mode === 'armor' && ( + <> + Armor - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showSpacedArmor = checked; - }); - mutateTankopediaTemporary((draft) => { - draft.shot = undefined; - }); - }} - > - Spaced armor - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.showSpacedArmor = checked; + }); + mutateTankopediaTemporary((draft) => { + draft.shot = undefined; + }); + }} + > + Spaced armor + - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.greenPenetration = checked; - }); - }} - > - Green penetration - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.greenPenetration = checked; + }); + }} + > + Green penetration + - {developerMode && ( - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.wireframe = checked; - }); - }} - > - Wireframe - + {developerMode && ( + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.wireframe = checked; + }); + }} + > + Wireframe + + )} + + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.opaque = checked; + }); + }} + > + Opaque + + )} - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.opaque = checked; - }); - }} - > - Opaque - - Environment