feat: cleaner quick equipment buttons

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 '../QuickInputs';
-import { RotationInputs } from '../RotationInputs';
 import { SceneProps } from '../SceneProps';
 import { ModelLoader } from './components/ModelLoader';
 import { Options } from './components/Options';
@@ -186,7 +185,6 @@ export function TankSandbox({ duel }: TankSandboxProps) {
             <Options canvas={canvasWrapper} isFullScreen={isFullScreen} />
 
             <RotationInputs duel={duel} />
-            <QuickEquipments />
           </Flex>
         </Theme>
       </Card>

src/app/tools/tankopedia/[id]/components/QuickEquipments.tsx

@@ -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 (
-    <Flex
-      justify="end"
-      align="center"
-      style={{
-        width: '100%',
-        position: 'absolute',
-        right: 12,
-        top: 62,
-      }}
-    >
-      <ModuleButton
-        selected={equipment.calibratedShells}
-        first
-        type="equipment"
-        rowChild
-        equipment={103}
-        onClick={() => {
-          mutateTankopediaPersistent((draft) => {
-            draft.model.equipment.calibratedShells =
-              !draft.model.equipment.calibratedShells;
-          });
-        }}
-      />
-      <ModuleButton
-        selected={equipment.enhancedArmor}
-        last
-        type="equipment"
-        rowChild
-        equipment={110}
-        onClick={() => {
-          mutateTankopediaPersistent((draft) => {
-            draft.model.equipment.enhancedArmor =
-              !draft.model.equipment.enhancedArmor;
-          });
-        }}
-      />
-    </Flex>
-  );
-}

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<typeof Button> {
+  equipment: number;
+  active: boolean;
+}
+
+export function QuickEquipmentButton({
+  equipment,
+  active,
+  ...props
+}: QuickEquipmentButtonProps) {
+  return (
+    <Button variant="ghost" {...props}>
+      <img
+        style={{ opacity: active ? 1 : 0.5 }}
+        src={asset(`icons/equipment/${equipment}.webp`)}
+        width={24}
+        height={24}
+      />
+    </Button>
+  );
+}

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 { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
-import { modelDefinitions } from '../../../../../core/blitzkrieg/modelDefinitions';
+import { modelDefinitions } from '../../../../../../core/blitzkrieg/modelDefinitions';
-import { modelTransformEvent } from '../../../../../core/blitzkrieg/modelTransform';
+import { modelTransformEvent } from '../../../../../../core/blitzkrieg/modelTransform';
-import {
+import mutateTankopediaPersistent, {
   mutateTankopediaTemporary,
+  useTankopediaPersistent,
   useTankopediaTemporary,
-} from '../../../../../stores/tankopedia';
+} from '../../../../../../stores/tankopedia';
-import { Duel } from '../page';
+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<HTMLInputElement>(null);
   const gunPitchInput = useRef<HTMLInputElement>(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"
     >
       <Flex
         gap="2"
@@ -124,6 +129,31 @@ export function RotationInputs({ duel: { protagonist } }: RotationInputsProps) {
           <TextField.Slot>°</TextField.Slot>
         </TextField.Root>
       </Flex>
+
+      {mode === 'armor' && (
+        <Flex gap="4">
+          <QuickEquipmentButton
+            equipment={103}
+            active={equipment.calibratedShells}
+            onClick={() => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.equipment.calibratedShells =
+                  !draft.model.equipment.calibratedShells;
+              });
+            }}
+          />
+          <QuickEquipmentButton
+            equipment={110}
+            active={equipment.enhancedArmor}
+            onClick={() => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.equipment.enhancedArmor =
+                  !draft.model.equipment.enhancedArmor;
+              });
+            }}
+          />
+        </Flex>
+      )}
     </Flex>
   );
 }