add debug points

src/components/rotation-controller.ts

@@ -1,6 +1,6 @@
-import { Group, Mesh, Vector3 } from 'three';
+import { Group, Mesh, MeshStandardMaterial, Vector3 } from 'three';
 
-import { FacingDirection, RotationStep } from './consts';
+import { Actions, Color2Index, FacingDirection, RotationStep } from './consts';
 
 export class RotationController {
   private static instance: RotationController;
@@ -102,7 +102,7 @@ export class RotationController {
     if (!RotationController.instance) {
       RotationController.instance = new RotationController();
       if (typeof window !== 'undefined') {
-        // @ts-ignore
+        // @ts-expect-error window is defined
         window.rotationController = RotationController.instance;
       }
     }
@@ -157,9 +157,39 @@ export class RotationController {
     });
   }
 
-  getStatus() {
-    const rotationsPy: Array<string> = [];
+  setState(stateArray: Array<Array<number>>) {
+    const colors = ['', '', '', '', '', ''];
+    Object.entries(Color2Index).forEach(([c, i]) => {
+      colors[i] = c;
+    });
+    ['front', 'back', 'right', 'left', 'up', 'down'].forEach((f, idx1) => {
+      const faceDirection = f as FacingDirection;
+      const cubes = this.getCubes(faceDirection);
+      const indices = cubes.map((cube) => this.getCubeFaceData(cube, faceDirection)).sort((a, b) => a.rank - b.rank);
+      indices.forEach((i, idx2) => {
+        const colorIdx = stateArray[idx1][idx2];
+        i.face.userData.faceColor = colors[colorIdx];
+        i.face.userData.faceColorIndex = colorIdx;
+        const material = i.face.material as MeshStandardMaterial;
+        material.color.set(colors[colorIdx]);
+      });
+    });
+    this.initializeFaces();
+  }
+
+  getState() {
     const status = ['front', 'back', 'right', 'left', 'up', 'down'].map((f) => {
+      const faceDirection = f as FacingDirection;
+      const cubes = this.getCubes(faceDirection);
+      const indices = cubes.map((cube) => this.getCubeFaceData(cube, faceDirection)).sort((a, b) => a.rank - b.rank);
+      return indices.map((i) => i.face.userData.faceColorIndex);
+    });
+    return status;
+  }
+
+  _printStateTransitions() {
+    const rotationsPy: Array<string> = [];
+    ['front', 'back', 'right', 'left', 'up', 'down'].forEach((f) => {
       const faceDirection = f as FacingDirection;
       const cubes = this.getCubes(faceDirection);
       const indices = cubes.map((cube) => this.getCubeFaceData(cube, faceDirection)).sort((a, b) => a.rank - b.rank);
@@ -172,17 +202,18 @@ export class RotationController {
           );
         }
       }
-      return indices.map((i) => i.face.userData.faceColorIndex);
     });
-    console.log('Python Gym Step Code:');
     console.log(rotationsPy.join('\n'));
-    return status;
   }
 
   setCubeSpeed(cubeSpeed: number) {
     this.cubeSpeed = cubeSpeed;
   }
 
+  addRotationStepCode(...codes: Array<number>) {
+    this.addRotationStep(...codes.map((code) => Actions[code]));
+  }
+
   addRotationStep(...step: Array<RotationStep>) {
     this.rotationSteps.push(...step);
   }

src/components/rubiks-cube.tsx

@@ -37,6 +37,14 @@ export const RubiksCube = forwardRef<RubiksCubeRef, RubiksCubeProps>(({ cubeRoug
         cubePieceRefs.current.forEach((cubePieceRef) => {
           cubePieceRef.resetPosition();
         });
+        rotationController.setState([
+          [0, 0, 0, 0],
+          [1, 1, 1, 1],
+          [2, 2, 2, 2],
+          [3, 3, 3, 3],
+          [4, 4, 4, 4],
+          [5, 5, 5, 5],
+        ]);
         rotationController.initializeFaces();
       });
     },

src/components/state-modal.tsx

@@ -8,7 +8,7 @@ import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Index2Color } from './consts';
 
 export type StateModalRef = {
-  open: (status: Array<Array<number>>) => void;
+  open: (state: Array<Array<number>>) => void;
 };
 
 export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {

src/components/ui-controls.tsx

@@ -36,8 +36,8 @@ export const UIControls = () => {
   };
 
   const showState = () => {
-    const status = rotationController.getStatus();
-    stateModalRef.current?.open(status);
+    const state = rotationController.getState();
+    stateModalRef.current?.open(state);
   };
 
   const solve = () => {