feat: consumables

src/components/ModuleButtons/CamouflageButton.tsx

@@ -1,17 +0,0 @@
-import { asset } from '../../core/blitzkrieg/asset';
-import { GenericTankComponentButton } from './GenericTankComponentButton';
-import { TankComponentButtonProps } from './TankComponentButton';
-
-export function CamouflageButton(props: TankComponentButtonProps) {
-  return (
-    <GenericTankComponentButton
-      icon={asset('icons/camo.webp')}
-      iconStyles={{
-        top: '50%',
-        left: '50%',
-        transform: 'translate(calc(-50% + 4px), calc(-50% + 4px))',
-      }}
-      {...props}
-    />
-  );
-}

src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -28,6 +28,7 @@ export function GenericTankComponentButton({
           draggable={false}
           src={icon}
           style={{
+            objectFit: 'contain',
             width: 32,
             height: 32,
             position: 'absolute',

src/components/ModuleButtons/TankComponentButton.tsx

@@ -10,6 +10,7 @@ export interface TankComponentButtonProps
   children?: ReactNode;
   discriminator?: ReactNode;
   disabled?: boolean;
+  banner?: string;
 }
 
 export function TankComponentButton({
@@ -19,6 +20,7 @@ export function TankComponentButton({
   rowChild,
   discriminator,
   children,
+  banner,
   ...props
 }: TankComponentButtonProps) {
   return (
@@ -36,9 +38,24 @@ export function TankComponentButton({
         borderBottomLeftRadius: first ? undefined : 0,
         borderBottomRightRadius: last ? undefined : 0,
         margin: rowChild ? -0.5 : 'unset',
+        overflow: 'hidden',
       }}
       {...props}
     >
+      {banner !== undefined && (
+        <div
+          style={{
+            position: 'absolute',
+            width: '200%',
+            height: 12,
+            backgroundColor: banner,
+            top: '50%',
+            left: '-50%',
+            transform: 'translateY(-50%) rotate(-22.5deg)',
+          }}
+        />
+      )}
+
       {discriminator !== undefined && (
         <Text
           size="1"