fix map planner

lib/components/ModeImage.tsx

@@ -1,12 +1,28 @@
 import Image from "next/image";
+import { CSSProperties } from "react";
 
 interface ModeImageProps {
   mode: "SZ" | "TC" | "RM" | "CB";
   size: 32 | 64 | 128;
+  onClick?: () => void;
+  style?: CSSProperties;
 }
 
-const ModeImage: React.FC<ModeImageProps> = ({ mode, size }) => {
-  return <Image src={`/modes/${mode}.png`} width={size} height={size} />;
+const ModeImage: React.FC<ModeImageProps> = ({
+  mode,
+  size,
+  onClick,
+  style,
+}) => {
+  return (
+    <Image
+      src={`/modes/${mode}.png`}
+      width={size}
+      height={size}
+      onClick={onClick}
+      style={style}
+    />
+  );
 };
 
 export default ModeImage;

scenes/MapPlanner/components/DraggableImageAdder.tsx

@@ -58,7 +58,7 @@ const DraggableImageAdder: React.FC<DraggableImageAdderProps> = ({
                 }
                 m="3px"
               >
-                <WeaponImage englishName={wpn} size="SMALL" />
+                <WeaponImage name={wpn} size={32} />
               </Box>
             ))}
             {["Blaster", "Brella", "Charger", "Slosher"].map(

scenes/MapPlanner/components/StageSelector.tsx

@@ -82,20 +82,13 @@ const StageSelector: React.FC<StageSelectorProps> = ({
       ) : (
         <>
           <HStack justifyContent="center" my={4}>
+            {/* FIXME: actual radio button component for Top500 page too */}
             {(["SZ", "TC", "RM", "CB"] as const).map((mode) => (
               <ModeImage
                 key={mode}
                 onClick={() => changeMode(mode)}
                 mode={mode}
-                w={8}
-                h={8}
-                cursor="pointer"
-                style={{
-                  filter:
-                    currentBackground.mode === mode
-                      ? undefined
-                      : "grayscale(100%)",
-                }}
+                size={32}
               />
             ))}
           </HStack>