feat: shells

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,8 +41,51 @@ 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' && (
+        <Flex
+          style={{
+            position: 'absolute',
+            right: 16,
+            top: '50%',
+            transform: 'translateY(-50%)',
+          }}
+          direction="column"
+        >
+          {gun.shells.map((thisShell, shellIndex) => (
+            <IconButton
+              color={thisShell.id === shell.id ? undefined : 'gray'}
+              variant="soft"
+              key={thisShell.id}
+              style={{
+                borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
+                borderTopRightRadius: shellIndex === 0 ? undefined : 0,
+                borderBottomRightRadius:
+                  shellIndex === gun.shells.length - 1 ? undefined : 0,
+                borderBottomLeftRadius:
+                  shellIndex === gun.shells.length - 1 ? undefined : 0,
+                marginLeft: shellIndex === 0 ? 0 : -1,
+              }}
+              onClick={() => {
+                mutateDuel((draft) => {
+                  draft.antagonist!.shell = thisShell;
+                });
+              }}
+            >
+              <img
+                width={16}
+                height={16}
+                src={asset(`icons/shells/${thisShell.icon}.webp`)}
+              />
+            </IconButton>
+          ))}
+        </Flex>
+      )}
+
       <Flex
         gap="4"
         align="center"
@@ -217,5 +262,6 @@ export function Options() {
           </IconButton>
         )}
       </Flex>
+    </>
   );
 }