lock rotation

src/components/rotator.tsx

@@ -2,108 +2,123 @@ import { useCubesContext } from "@/contexts/cubes-context";
 import { FacingDirection } from "./consts";
 import { RotationPanel } from "./rotation-panel";
 import { Group } from "three";
-import { useRef } from "react";
+import { Fragment, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 
-type RotatorProps = {
-  facingDirection: FacingDirection;
+type RotateArgs = {
+  rotatingFaceDirection: FacingDirection;
+  rotatingDirection: "clockwise" | "counter-clockwise";
+  rotatingGroup: Group;
 };
 
-export const Rotator = ({ facingDirection }: RotatorProps) => {
+export const Rotator = () => {
   const { scene } = useThree();
   const { getCubes } = useCubesContext();
   const isRotating = useRef(false);
-  const rotatingDirection = useRef<"clockwise" | "counter-clockwise">(
-    "clockwise",
-  );
-  const rotatingGroup = useRef<Group>(new Group());
+  const rotateArgs = useRef<RotateArgs>({
+    rotatingFaceDirection: "front",
+    rotatingDirection: "clockwise",
+    rotatingGroup: new Group(),
+  });
 
   useFrame((state, delta) => {
+    const { rotatingFaceDirection, rotatingDirection, rotatingGroup } =
+      rotateArgs.current;
     if (!isRotating.current) return;
 
     const speed = 2;
     let sign = 0;
-    switch (facingDirection) {
+    switch (rotatingFaceDirection) {
       case "front":
-        sign = rotatingDirection.current === "clockwise" ? -1 : 1;
-        rotatingGroup.current.rotation.z += sign * delta * speed;
-        if (Math.abs(rotatingGroup.current.rotation.z) > Math.PI / 2) {
+        sign = rotatingDirection === "clockwise" ? -1 : 1;
+        rotatingGroup.rotation.z += sign * delta * speed;
+        if (Math.abs(rotatingGroup.rotation.z) > Math.PI / 2) {
+          rotatingGroup.rotation.z = (Math.PI / 2) * sign;
           isRotating.current = false;
-          rotatingGroup.current.rotation.z = (Math.PI / 2) * sign;
         }
         break;
       case "back":
-        sign = rotatingDirection.current === "clockwise" ? 1 : -1;
-        rotatingGroup.current.rotation.z += sign * delta * speed;
-        if (Math.abs(rotatingGroup.current.rotation.z) > Math.PI / 2) {
+        sign = rotatingDirection === "clockwise" ? 1 : -1;
+        rotatingGroup.rotation.z += sign * delta * speed;
+        if (Math.abs(rotatingGroup.rotation.z) > Math.PI / 2) {
+          rotatingGroup.rotation.z = (Math.PI / 2) * sign;
           isRotating.current = false;
-          rotatingGroup.current.rotation.z = (Math.PI / 2) * sign;
         }
         break;
       case "left":
-        sign = rotatingDirection.current === "clockwise" ? 1 : -1;
-        rotatingGroup.current.rotation.x += sign * delta * speed;
-        if (Math.abs(rotatingGroup.current.rotation.x) > Math.PI / 2) {
+        sign = rotatingDirection === "clockwise" ? 1 : -1;
+        rotatingGroup.rotation.x += sign * delta * speed;
+        if (Math.abs(rotatingGroup.rotation.x) > Math.PI / 2) {
+          rotatingGroup.rotation.x = (Math.PI / 2) * sign;
           isRotating.current = false;
-          rotatingGroup.current.rotation.x = (Math.PI / 2) * sign;
         }
         break;
       case "right":
-        sign = rotatingDirection.current === "clockwise" ? -1 : 1;
-        rotatingGroup.current.rotation.x += sign * delta * speed;
-        if (Math.abs(rotatingGroup.current.rotation.x) > Math.PI / 2) {
+        sign = rotatingDirection === "clockwise" ? -1 : 1;
+        rotatingGroup.rotation.x += sign * delta * speed;
+        if (Math.abs(rotatingGroup.rotation.x) > Math.PI / 2) {
+          rotatingGroup.rotation.x = (Math.PI / 2) * sign;
           isRotating.current = false;
-          rotatingGroup.current.rotation.x = (Math.PI / 2) * sign;
         }
         break;
       case "top":
-        sign = rotatingDirection.current === "clockwise" ? -1 : 1;
-        rotatingGroup.current.rotation.y += sign * delta * speed;
-        if (Math.abs(rotatingGroup.current.rotation.y) > Math.PI / 2) {
+        sign = rotatingDirection === "clockwise" ? -1 : 1;
+        rotatingGroup.rotation.y += sign * delta * speed;
+        if (Math.abs(rotatingGroup.rotation.y) > Math.PI / 2) {
+          rotatingGroup.rotation.y = (Math.PI / 2) * sign;
           isRotating.current = false;
-          rotatingGroup.current.rotation.y = (Math.PI / 2) * sign;
         }
         break;
       case "bottom":
-        sign = rotatingDirection.current === "clockwise" ? 1 : -1;
-        rotatingGroup.current.rotation.y += sign * delta * speed;
-        if (Math.abs(rotatingGroup.current.rotation.y) > Math.PI / 2) {
+        sign = rotatingDirection === "clockwise" ? 1 : -1;
+        rotatingGroup.rotation.y += sign * delta * speed;
+        if (Math.abs(rotatingGroup.rotation.y) > Math.PI / 2) {
+          rotatingGroup.rotation.y = (Math.PI / 2) * sign;
           isRotating.current = false;
-          rotatingGroup.current.rotation.y = (Math.PI / 2) * sign;
         }
         break;
     }
 
-    if (!isRotating.current) {
-      const children = [...rotatingGroup.current.children];
-      children.forEach((child) => scene.attach(child));
-      scene.remove(rotatingGroup.current);
-    }
+    if (isRotating.current) return;
+    const children = [...rotatingGroup.children];
+    children.forEach((child) => scene.attach(child));
+    scene.remove(rotatingGroup);
   });
 
-  const handleClick = (direction: "clockwise" | "counter-clockwise") => {
+  const handleClick = (
+    facingDirection: FacingDirection,
+    direction: "clockwise" | "counter-clockwise",
+  ) => {
     if (isRotating.current) return;
     const cubes = getCubes(facingDirection);
 
-    rotatingGroup.current = new Group();
-    scene.add(rotatingGroup.current);
-    cubes.forEach((cube) => rotatingGroup.current.attach(cube));
-    rotatingDirection.current = direction;
+    rotateArgs.current.rotatingFaceDirection = facingDirection;
+    rotateArgs.current.rotatingDirection = direction;
+    rotateArgs.current.rotatingGroup = new Group();
+    scene.add(rotateArgs.current.rotatingGroup);
+    cubes.forEach((cube) => rotateArgs.current.rotatingGroup.attach(cube));
+
     isRotating.current = true;
   };
 
   return (
     <>
-      <RotationPanel
-        direction="clockwise"
-        facingDirection={facingDirection}
-        onClick={(_, direction) => handleClick(direction)}
-      />
-      <RotationPanel
-        direction="counter-clockwise"
-        facingDirection={facingDirection}
-        onClick={(_, direction) => handleClick(direction)}
-      />
+      {["front", "back", "left", "right", "top", "bottom"].map(
+        (facingDirection) => (
+          <Fragment key={facingDirection}>
+            <RotationPanel
+              direction="clockwise"
+              facingDirection={facingDirection as FacingDirection}
+              onClick={handleClick}
+            />
+            <RotationPanel
+              direction="counter-clockwise"
+              facingDirection={facingDirection as FacingDirection}
+              onClick={handleClick}
+            />
+          </Fragment>
+        ),
+      )}
     </>
   );
 };

src/components/rubiks-cube.tsx

@@ -1,5 +1,4 @@
 import { CubePiece } from "./cube-piece";
-import { FacingDirection } from "./consts";
 import { Rotator } from "./rotator";
 import { CubesProvider } from "@/contexts/cubes-context";
 
@@ -26,9 +25,7 @@ export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
           roughness={roughness}
         />
       ))}
-      {["front", "back", "left", "right", "top", "bottom"].map((face) => (
-        <Rotator key={face} facingDirection={face as FacingDirection} />
-      ))}
+      <Rotator />
     </CubesProvider>
   );
 };