refactor code

src/components/cube-piece.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { RoundedBox } from "@react-three/drei";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { FacingDirection, Rotations } from "./consts";
 import { Mesh } from "three";
-import { useCubesContext } from "@/contexts/cubes-context";
+import { rotationController } from "./rotation-controller";
 
 // Standard Rubik's cube colors
 const CUBE_COLORS = {
@@ -26,8 +26,11 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
   const [position] = useState<[number, number, number]>([x, y, z]);
 
   const meshRef = useRef<Mesh | null>(null);
-  const { addCube } = useCubesContext();
-  addCube(meshRef);
+  useEffect(() => {
+    if (meshRef.current) {
+      rotationController.addCube(meshRef.current);
+    }
+  }, [meshRef]);
 
   const visibleFaces: Record<FacingDirection, boolean> = {
     front: z > 0,

src/components/rotation-controller.ts

@@ -0,0 +1,125 @@
+import { FacingDirection, RotationStep } from "./consts";
+import { Group, Mesh } from "three";
+
+export class RotationController {
+  private static instance: RotationController;
+
+  private cubeGroup?: Group;
+  private cubes: Array<Mesh>;
+  private cubeSpeed: number;
+  private rotationSteps: Array<RotationStep>;
+  private rotatingStep: RotationStep | null;
+  private rotatingGroup: Group;
+
+  constructor() {
+    this.cubes = [];
+    this.cubeSpeed = 2;
+    this.rotationSteps = [];
+    this.rotatingStep = null;
+    this.rotatingGroup = new Group();
+  }
+
+  private rotate(step: RotationStep, group: Group, delta: number) {
+    let sign = 0;
+    let axis: "x" | "y" | "z" = "x";
+    switch (step.faceDirection) {
+      case "front":
+        sign = step.direction === "clockwise" ? -1 : 1;
+        axis = "z";
+        break;
+      case "back":
+        sign = step.direction === "clockwise" ? 1 : -1;
+        axis = "z";
+        break;
+      case "left":
+        sign = step.direction === "clockwise" ? 1 : -1;
+        axis = "x";
+        break;
+      case "right":
+        sign = step.direction === "clockwise" ? -1 : 1;
+        axis = "x";
+        break;
+      case "top":
+        sign = step.direction === "clockwise" ? -1 : 1;
+        axis = "y";
+        break;
+      case "bottom":
+        sign = step.direction === "clockwise" ? 1 : -1;
+        axis = "y";
+        break;
+    }
+
+    group.rotation[axis] += sign * delta * this.cubeSpeed;
+    if (Math.abs(group.rotation[axis]) > Math.PI / 2) {
+      group.rotation[axis] = (Math.PI / 2) * sign;
+      return true;
+    }
+    return false;
+  }
+
+  static getInstance() {
+    if (!RotationController.instance) {
+      RotationController.instance = new RotationController();
+    }
+    return RotationController.instance;
+  }
+
+  setCubeGroup(cubeGroup: Group) {
+    this.cubeGroup = cubeGroup;
+  }
+
+  addCube(cube: Mesh) {
+    if (!this.cubes.includes(cube)) {
+      this.cubes.push(cube);
+    }
+  }
+
+  getCubes(faceDirection: FacingDirection) {
+    switch (faceDirection) {
+      case "front":
+        return this.cubes.filter((m) => m.position.z > 0);
+      case "back":
+        return this.cubes.filter((m) => m.position.z < 0);
+      case "left":
+        return this.cubes.filter((m) => m.position.x < 0);
+      case "right":
+        return this.cubes.filter((m) => m.position.x > 0);
+      case "top":
+        return this.cubes.filter((m) => m.position.y > 0);
+      case "bottom":
+        return this.cubes.filter((m) => m.position.y < 0);
+    }
+  }
+
+  setCubeSpeed(cubeSpeed: number) {
+    this.cubeSpeed = cubeSpeed;
+  }
+
+  addRotationStep(...step: Array<RotationStep>) {
+    this.rotationSteps.push(...step);
+  }
+
+  frameCallback(state: unknown, delta: number) {
+    if (!this.cubeGroup) return;
+    if (this.rotationSteps.length === 0 && !this.rotatingStep) return;
+    if (!this.rotatingStep) {
+      const step = this.rotationSteps.shift();
+      if (!step) return;
+      this.rotatingStep = step;
+      const cubes = this.getCubes(step.faceDirection);
+      this.rotatingGroup = new Group();
+      this.cubeGroup?.add(this.rotatingGroup);
+      cubes.forEach((cube) => this.rotatingGroup.attach(cube));
+    }
+
+    const done = this.rotate(this.rotatingStep, this.rotatingGroup, delta);
+    if (done) {
+      this.rotatingStep = null;
+      const children = [...this.rotatingGroup.children];
+      children.forEach((child) => this.cubeGroup?.attach(child));
+      this.cubeGroup?.remove(this.rotatingGroup);
+    }
+  }
+}
+
+export const rotationController = RotationController.getInstance();

src/components/rotator.tsx

@@ -1,14 +1,7 @@
-import { useCubesContext } from "@/contexts/cubes-context";
 import { FacingDirection, RotationStep } from "./consts";
 import { RotationPanel } from "./rotation-panel";
-import { Group } from "three";
-import {
-  forwardRef,
-  Fragment,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
+import { rotationController } from "./rotation-controller";
+import { forwardRef, Fragment, useImperativeHandle } from "react";
 import { useFrame } from "@react-three/fiber";
 
 export type RotatorRef = {
@@ -21,81 +14,14 @@ type RotatorProps = {
 
 export const Rotator = forwardRef<RotatorRef, RotatorProps>(
   ({ cubeSpeed }: RotatorProps, ref) => {
-    const cubeSpeedRef = useRef(cubeSpeed);
-    cubeSpeedRef.current = cubeSpeed;
-    const { getCubes, cubeGroupRef } = useCubesContext();
-    const rotationSteps = useRef<Array<RotationStep>>([]);
+    rotationController.setCubeSpeed(cubeSpeed);
 
     useImperativeHandle(ref, () => ({
       rotate: (steps: Array<RotationStep>) =>
-        rotationSteps.current.push(...steps),
+        rotationController.addRotationStep(...steps),
     }));
 
-    const frameCallback = useMemo(() => {
-      let rotationStep: RotationStep | null = null;
-      let rotatingGroup = new Group();
-
-      const rotate = (step: RotationStep, group: Group, delta: number) => {
-        let sign = 0;
-        let axis: "x" | "y" | "z" = "x";
-        switch (step.faceDirection) {
-          case "front":
-            sign = step.direction === "clockwise" ? -1 : 1;
-            axis = "z";
-            break;
-          case "back":
-            sign = step.direction === "clockwise" ? 1 : -1;
-            axis = "z";
-            break;
-          case "left":
-            sign = step.direction === "clockwise" ? 1 : -1;
-            axis = "x";
-            break;
-          case "right":
-            sign = step.direction === "clockwise" ? -1 : 1;
-            axis = "x";
-            break;
-          case "top":
-            sign = step.direction === "clockwise" ? -1 : 1;
-            axis = "y";
-            break;
-          case "bottom":
-            sign = step.direction === "clockwise" ? 1 : -1;
-            axis = "y";
-            break;
-        }
-
-        group.rotation[axis] += sign * delta * cubeSpeedRef.current;
-        if (Math.abs(group.rotation[axis]) > Math.PI / 2) {
-          group.rotation[axis] = (Math.PI / 2) * sign;
-          return true;
-        }
-        return false;
-      };
-
-      return (state: unknown, delta: number) => {
-        if (!cubeGroupRef.current) return;
-        if (rotationSteps.current.length === 0 && !rotationStep) return;
-        if (!rotationStep) {
-          const step = rotationSteps.current.shift();
-          if (!step) return;
-          rotationStep = step;
-          const cubes = getCubes(step.faceDirection);
-          rotatingGroup = new Group();
-          cubeGroupRef.current?.add(rotatingGroup);
-          cubes.forEach((cube) => rotatingGroup.attach(cube));
-        }
-
-        const done = rotate(rotationStep, rotatingGroup, delta);
-        if (done) {
-          rotationStep = null;
-          const children = [...rotatingGroup.children];
-          children.forEach((child) => cubeGroupRef.current?.attach(child));
-          cubeGroupRef.current?.remove(rotatingGroup);
-        }
-      };
-    }, [cubeGroupRef, getCubes]);
-    useFrame(frameCallback);
+    useFrame(rotationController.frameCallback.bind(rotationController));
 
     return (
       <>
@@ -105,12 +31,12 @@ export const Rotator = forwardRef<RotatorRef, RotatorProps>(
               <RotationPanel
                 direction="clockwise"
                 facingDirection={facingDirection as FacingDirection}
-                onClick={(s) => rotationSteps.current.push(s)}
+                onClick={(s) => rotationController.addRotationStep(s)}
               />
               <RotationPanel
                 direction="counter-clockwise"
                 facingDirection={facingDirection as FacingDirection}
-                onClick={(s) => rotationSteps.current.push(s)}
+                onClick={(s) => rotationController.addRotationStep(s)}
               />
             </Fragment>
           ),

src/components/rubiks-cube.tsx

@@ -1,9 +1,9 @@
-import { useRef, forwardRef, useImperativeHandle } from "react";
+import { useRef, forwardRef, useImperativeHandle, useEffect } from "react";
 import { CubePiece } from "./cube-piece";
 import { Rotator, RotatorRef } from "./rotator";
-import { CubesProvider } from "@/contexts/cubes-context";
 import { Group } from "three";
 import { RotationStep } from "./consts";
+import { rotationController } from "./rotation-controller";
 
 const CUBE_POSITIONS: Array<[number, number, number]> = [];
 for (let x = -0.5; x <= 0.5; x += 1) {
@@ -32,8 +32,13 @@ export const RubiksCube = forwardRef<RubiksCubeRef, RubiksCubeProps>(
       rotate: (steps: Array<RotationStep>) => rotatorRef.current?.rotate(steps),
     }));
 
+    useEffect(() => {
+      if (cubeGroupRef.current)
+        rotationController.setCubeGroup(cubeGroupRef.current);
+    }, [cubeGroupRef]);
+
     return (
-      <CubesProvider cubeGroupRef={cubeGroupRef}>
+      <>
         <group ref={cubeGroupRef}>
           {CUBE_POSITIONS.map((position) => (
             <CubePiece
@@ -44,7 +49,7 @@ export const RubiksCube = forwardRef<RubiksCubeRef, RubiksCubeProps>(
           ))}
         </group>
         <Rotator ref={rotatorRef} cubeSpeed={cubeSpeed} />
-      </CubesProvider>
+      </>
     );
   },
 );

src/contexts/cubes-context.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import { FacingDirection } from "@/components/consts";
-import { createContext, RefObject, useContext, useRef } from "react";
-import { Group, Mesh } from "three";
-
-export type CubeMeshRef = RefObject<Mesh | null>;
-
-type CubesContextType = {
-  cubeGroupRef: RefObject<Group | null>;
-  addCube: (cubeMeshRef: CubeMeshRef) => void;
-  getCubes: (faceDirection: FacingDirection) => Mesh[];
-};
-
-const CubesContext = createContext<CubesContextType>({
-  cubeGroupRef: { current: null },
-  addCube: () => {},
-  getCubes: () => [],
-});
-
-export const useCubesContext = () => useContext(CubesContext);
-
-export const CubesProvider = ({
-  cubeGroupRef,
-  children,
-}: {
-  cubeGroupRef: RefObject<Group | null>;
-  children: React.ReactNode;
-}) => {
-  const cubes = useRef<CubeMeshRef[]>([]);
-
-  const addCube = (cubeMeshRef: CubeMeshRef) => {
-    if (!cubes.current.includes(cubeMeshRef)) {
-      cubes.current.push(cubeMeshRef);
-    }
-  };
-
-  const getCubes = (faceDirection: FacingDirection) => {
-    const meshes = cubes.current
-      .map((c) => c.current)
-      .filter((m) => m !== null);
-    switch (faceDirection) {
-      case "front":
-        return meshes.filter((m) => m.position.z > 0);
-      case "back":
-        return meshes.filter((m) => m.position.z < 0);
-      case "left":
-        return meshes.filter((m) => m.position.x < 0);
-      case "right":
-        return meshes.filter((m) => m.position.x > 0);
-      case "top":
-        return meshes.filter((m) => m.position.y > 0);
-      case "bottom":
-        return meshes.filter((m) => m.position.y < 0);
-    }
-  };
-
-  return (
-    <CubesContext.Provider value={{ cubeGroupRef, addCube, getCubes }}>
-      {children}
-    </CubesContext.Provider>
-  );
-};