add context to record all cubes

src/components/cube-piece.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { RoundedBox } from "@react-three/drei";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { FacingDirection, Rotations } from "./consts";
+import { Mesh } from "three";
+import { useCubesContext } from "@/contexts/cubes-context";
 
 // Standard Rubik's cube colors
 const CUBE_COLORS = {
@@ -23,6 +25,10 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
   const [x, y, z] = initialPosition;
   const [position] = useState<[number, number, number]>([x, y, z]);
 
+  const meshRef = useRef<Mesh | null>(null);
+  const { addCube } = useCubesContext();
+  addCube(meshRef);
+
   const visibleFaces: Record<FacingDirection, boolean> = {
     front: z > 0,
     back: z < 0,
@@ -41,7 +47,7 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
   };
 
   return (
-    <mesh position={position}>
+    <mesh position={position} ref={meshRef}>
       <RoundedBox args={[0.95, 0.95, 0.95]} radius={0.05} smoothness={4}>
         <meshStandardMaterial
           color="#2a2a2a"

src/components/rotator.tsx

@@ -1,3 +1,4 @@
+import { useCubesContext } from "@/contexts/cubes-context";
 import { FacingDirection } from "./consts";
 import { RotationPanel } from "./rotation-panel";
 
@@ -6,12 +7,27 @@ type RotatorProps = {
 };
 
 export const Rotator = ({ facingDirection }: RotatorProps) => {
+  const { getCubes } = useCubesContext();
+
+  const handleClick = (direction: "clockwise" | "counter-clockwise") => {
+    const cubes = getCubes(facingDirection);
+    cubes.forEach((cube) => {
+      console.log(cube.position);
+    });
+    console.log(cubes.length, direction);
+  };
+
   return (
     <>
-      <RotationPanel direction="clockwise" facingDirection={facingDirection} />
+      <RotationPanel
+        direction="clockwise"
+        facingDirection={facingDirection}
+        onClick={(_, direction) => handleClick(direction)}
+      />
       <RotationPanel
         direction="counter-clockwise"
         facingDirection={facingDirection}
+        onClick={(_, direction) => handleClick(direction)}
       />
     </>
   );

src/components/rubiks-cube.tsx

@@ -1,13 +1,12 @@
-import { Fragment } from "react";
 import { CubePiece } from "./cube-piece";
-import { RotationPanel } from "./rotation-panel";
 import { FacingDirection } from "./consts";
 import { Rotator } from "./rotator";
+import { CubesProvider } from "@/contexts/cubes-context";
 
 const CUBE_POSITIONS: Array<[number, number, number]> = [];
-for (let x = -0.5; x <= 0.5; x++) {
-  for (let y = -0.5; y <= 0.5; y++) {
-    for (let z = -0.5; z <= 0.5; z++) {
+for (let x = -0.5; x <= 0.5; x += 1) {
+  for (let y = -0.5; y <= 0.5; y += 1) {
+    for (let z = -0.5; z <= 0.5; z += 1) {
       CUBE_POSITIONS.push([x, y, z]);
     }
   }
@@ -19,7 +18,7 @@ type RubiksCubeProps = {
 
 export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
   return (
-    <group>
+    <CubesProvider>
       {CUBE_POSITIONS.map((position) => (
         <CubePiece
           key={position.join(",")}
@@ -30,6 +29,6 @@ export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
       {["front", "back", "left", "right", "top", "bottom"].map((face) => (
         <Rotator key={face} facingDirection={face as FacingDirection} />
       ))}
-    </group>
+    </CubesProvider>
   );
 };

src/contexts/cubes-context.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { FacingDirection } from "@/components/consts";
+import { createContext, RefObject, useContext, useRef } from "react";
+import { Mesh } from "three";
+
+export type CubeMeshRef = RefObject<Mesh | null>;
+
+type CubesContextType = {
+  addCube: (cubeMeshRef: CubeMeshRef) => void;
+  getCubes: (faceDirection: FacingDirection) => Mesh[];
+};
+
+const CubesContext = createContext<CubesContextType>({
+  addCube: () => {},
+  getCubes: () => [],
+});
+
+export const useCubesContext = () => useContext(CubesContext);
+
+export const CubesProvider = ({ children }: { children: React.ReactNode }) => {
+  const cubes = useRef<CubeMeshRef[]>([]);
+
+  const addCube = (cubeMeshRef: 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={{ addCube, getCubes }}>
+      {children}
+    </CubesContext.Provider>
+  );
+};