From 7bd84fdaec767e754826e3a162908ed4d255c02c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Fri, 3 May 2024 19:18:34 -0500 Subject: [PATCH] feat: shells --- .../components/Model/components/Options.tsx | 348 ++++++++++-------- 1 file changed, 197 insertions(+), 151 deletions(-) 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 f2b685b4a..9c6e3a79c 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx @@ -5,9 +5,11 @@ import { GearIcon, } from '@radix-ui/react-icons'; import { DropdownMenu, Flex, IconButton, Switch } from '@radix-ui/themes'; +import { asset } from '../../../../../../../core/blitzkit/asset'; import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose'; import { useFullScreen } from '../../../../../../../hooks/useFullScreen'; import { useApp } from '../../../../../../../stores/app'; +import { mutateDuel, useDuel } from '../../../../../../../stores/duel'; import mutateTankopediaPersistent, { mutateTankopediaTemporary, useTankopediaPersistent, @@ -39,183 +41,227 @@ export function Options() { (state) => state.model.visual.environment, ); const developerMode = useApp((state) => state.developerMode); + const gun = useDuel((state) => state.antagonist!.gun); + const shell = useDuel((state) => state.antagonist!.shell); return ( - + <> + {mode === 'armor' && ( + + {gun.shells.map((thisShell, shellIndex) => ( + { + mutateDuel((draft) => { + draft.antagonist!.shell = thisShell; + }); + }} + > + + + ))} + + )} + { - mutateTankopediaPersistent((draft) => { - draft.mode = draft.mode === 'armor' ? 'model' : 'armor'; - }); + style={{ + position: 'absolute', + bottom: 16, + left: '50%', + transform: 'translateX(-50%)', }} - mr="2" > - - Armor - + { + mutateTankopediaPersistent((draft) => { + draft.mode = draft.mode === 'armor' ? 'model' : 'armor'; + }); + }} + mr="2" + > + + Armor + - - - - - - + + + + + + - - poseEvent.emit(Pose.HullDown)}> - Hull down - + + poseEvent.emit(Pose.HullDown)}> + Hull down + - poseEvent.emit(Pose.FaceHug)}> - Face hug - + poseEvent.emit(Pose.FaceHug)}> + Face hug + - poseEvent.emit(Pose.Default)}> - Default - - - + poseEvent.emit(Pose.Default)}> + Default + + + - - - - - - + + + + + + - - {mode === 'armor' && ( - <> - Armor + + {mode === 'armor' && ( + <> + Armor - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showSpacedArmor = checked; - }); - mutateTankopediaTemporary((draft) => { - draft.shot = undefined; - }); - }} - > - Spaced armor - - - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.greenPenetration = checked; - }); - }} - > - Green penetration - - - {developerMode && ( { mutateTankopediaPersistent((draft) => { - draft.model.visual.wireframe = checked; + draft.model.visual.showSpacedArmor = checked; + }); + mutateTankopediaTemporary((draft) => { + draft.shot = undefined; }); }} > - Wireframe + Spaced armor - )} - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.opaque = checked; - }); - }} - > - Opaque - - - )} + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.greenPenetration = checked; + }); + }} + > + Green penetration + - Environment - - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showGrid = checked; - }); - }} - > - Show grid - - - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showEnvironment = checked; - }); - }} - > - {/* TODO: consider removing this? */} - View environment - - - - Lighting - - - - {ENVIRONMENTS.map((environment) => ( - { + {developerMode && ( + { mutateTankopediaPersistent((draft) => { - draft.model.visual.environment = environment; + draft.model.visual.wireframe = checked; }); }} > - {environment[0].toUpperCase() + environment.slice(1)} - - ))} - - - - - + Wireframe + + )} - {fullScreenAvailable && ( - { - if (isFullScreen) { - document.exitFullscreen(); - } else document.body.requestFullscreen(); - }} - > - {isFullScreen ? : } - - )} - + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.opaque = checked; + }); + }} + > + Opaque + + + )} + + Environment + + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.showGrid = checked; + }); + }} + > + Show grid + + + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.showEnvironment = checked; + }); + }} + > + {/* TODO: consider removing this? */} + View environment + + + + Lighting + + + + {ENVIRONMENTS.map((environment) => ( + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.environment = environment; + }); + }} + > + {environment[0].toUpperCase() + environment.slice(1)} + + ))} + + + + + + + {fullScreenAvailable && ( + { + if (isFullScreen) { + document.exitFullscreen(); + } else document.body.requestFullscreen(); + }} + > + {isFullScreen ? : } + + )} + + ); }