add hover

src/components/rotation-panel.tsx

@@ -3,18 +3,25 @@
 import { useLoader } from "@react-three/fiber";
 import { TextureLoader } from "three";
 import { Rotations, FacingDirection } from "./consts";
+import { useState } from "react";
 
 type RotationPanelProps = {
   direction: "clockwise" | "counter-clockwise";
   facingDirection: FacingDirection;
+  onClick?: (
+    facingDirection: FacingDirection,
+    direction: "clockwise" | "counter-clockwise",
+  ) => void;
 };
 
 export const RotationPanel = ({
   direction,
   facingDirection,
+  onClick,
 }: RotationPanelProps) => {
   const clockwise = direction === "clockwise";
   const texture = useLoader(TextureLoader, `/textures/${direction}.png`);
+  const [opacity, setOpacity] = useState(0);
 
   const position: Record<FacingDirection, [number, number, number]> = {
     front: clockwise ? [0.5, 0, 1.01] : [-0.5, 0, 1.01],
@@ -25,16 +32,29 @@ export const RotationPanel = ({
     bottom: clockwise ? [0.5, -1.01, 0] : [-0.5, -1.01, 0],
   };
 
+  const handleClick = () => {
+    onClick?.(facingDirection, direction);
+  };
+
   return (
     <mesh
       position={position[facingDirection]}
       rotation={Rotations[facingDirection]}
+      onPointerEnter={() => {
+        setOpacity(1);
+        document.body.style.cursor = "pointer";
+      }}
+      onPointerLeave={() => {
+        setOpacity(0);
+        document.body.style.cursor = "default";
+      }}
+      onClick={handleClick}
     >
       <planeGeometry args={[0.8, 1.6]} />
       <meshStandardMaterial
         color={"#aaaaaa"}
         roughness={0.5}
-        opacity={0.7}
+        opacity={opacity}
         map={texture}
         transparent
       />