format codes

.prettierrc

@@ -1 +0,0 @@
-{}

.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  trailingComma: 'all',
+  singleQuote: true,
+  semi: true,
+  importOrder: ['^@/(.*)$', '^[./]'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
+};

bun.lock

@@ -14,6 +14,7 @@
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -28,8 +29,26 @@
   "packages": {
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
+    "@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],
+
+    "@babel/generator": ["@babel/generator@7.28.3", "", { "dependencies": { "@babel/parser": "^7.28.3", "@babel/types": "^7.28.2", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw=="],
+
+    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.27.1", "", {}, "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="],
+
+    "@babel/parser": ["@babel/parser@7.28.4", "", { "dependencies": { "@babel/types": "^7.28.4" }, "bin": "./bin/babel-parser.js" }, "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg=="],
+
     "@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
 
+    "@babel/template": ["@babel/template@7.27.2", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", "@babel/types": "^7.27.1" } }, "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw=="],
+
+    "@babel/traverse": ["@babel/traverse@7.28.4", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.4", "@babel/template": "^7.27.2", "@babel/types": "^7.28.4", "debug": "^4.3.1" } }, "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ=="],
+
+    "@babel/types": ["@babel/types@7.28.4", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q=="],
+
     "@dimforge/rapier3d-compat": ["@dimforge/rapier3d-compat@0.12.0", "", {}, "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow=="],
 
     "@emnapi/core": ["@emnapi/core@1.5.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" } }, "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg=="],
@@ -242,6 +261,8 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.13", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.13", "@tailwindcss/oxide": "4.1.13", "postcss": "^8.4.41", "tailwindcss": "4.1.13" } }, "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ=="],
 
+    "@trivago/prettier-plugin-sort-imports": ["@trivago/prettier-plugin-sort-imports@5.2.2", "", { "dependencies": { "@babel/generator": "^7.26.5", "@babel/parser": "^7.26.7", "@babel/traverse": "^7.26.7", "@babel/types": "^7.26.7", "javascript-natural-sort": "^0.7.1", "lodash": "^4.17.21" }, "peerDependencies": { "@vue/compiler-sfc": "3.x", "prettier": "2.x - 3.x", "prettier-plugin-svelte": "3.x", "svelte": "4.x || 5.x" }, "optionalPeers": ["@vue/compiler-sfc", "prettier-plugin-svelte", "svelte"] }, "sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA=="],
+
     "@tweenjs/tween.js": ["@tweenjs/tween.js@23.1.3", "", {}, "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="],
 
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ=="],
@@ -666,12 +687,16 @@
 
     "its-fine": ["its-fine@2.0.0", "", { "dependencies": { "@types/react-reconciler": "^0.28.9" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng=="],
 
+    "javascript-natural-sort": ["javascript-natural-sort@0.7.1", "", {}, "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="],
+
     "jiti": ["jiti@2.5.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w=="],
 
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
 
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
     "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
 
     "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
@@ -718,6 +743,8 @@
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
+    "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
+
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],

eslint.config.mjs

@@ -1,6 +1,6 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { FlatCompat } from '@eslint/eslintrc';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -10,15 +10,9 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
   {
-    ignores: [
-      "node_modules/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
-    ],
+    ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
   },
 ];
 

next.config.ts

@@ -1,4 +1,4 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   /* config options here */

package.json

@@ -20,6 +20,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

postcss.config.mjs

@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
+  plugins: ['@tailwindcss/postcss'],
 };
 
 export default config;

src/app/globals.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 ::-webkit-scrollbar {
   display: none;

src/app/layout.tsx

@@ -1,10 +1,10 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import type { Metadata } from 'next';
+
+import './globals.css';
 
 export const metadata: Metadata = {
   title: "Rubik's Cube Solver - with Reinforcement Learning",
-  description:
-    "A web application for solving Rubik's Cube using Reinforcement Learning techniques.",
+  description: "A web application for solving Rubik's Cube using Reinforcement Learning techniques.",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { Canvas } from "@/components/canvas";
+import { Canvas } from '@/components/canvas';
 
 export default function Home() {
   return (
@@ -6,9 +6,7 @@ export default function Home() {
       <div className="absolute inset-0 z-10 pointer-events-none">
         <div className="w-full h-full p-6">
           <div className="text-6xl font-bold">Rubik&apos;s Cube Solver</div>
-          <div className="text-2xl text-gray-800">
-            with Reinforcement Learning
-          </div>
+          <div className="text-2xl text-gray-800">with Reinforcement Learning</div>
           <div className="text-gray-700">
             <a href="https://cross-entropy.ai">https://cross-entropy.ai</a>
           </div>

src/components/canvas.tsx

@@ -1,34 +1,31 @@
-"use client";
+'use client';
 
-import { useControls, Leva, button } from "leva";
-import { Canvas as ThreeCanvas } from "@react-three/fiber";
+import { PresetsType } from '@react-three/drei/helpers/environment-assets';
+import { Canvas as ThreeCanvas } from '@react-three/fiber';
+import { Leva, button, useControls } from 'leva';
+import { useRef, useState, useTransition } from 'react';
 
-import { Env } from "../components/env";
-import { RubiksCube, RubiksCubeRef } from "./rubiks-cube";
-import { useRef, useState, useTransition } from "react";
-import { PresetsType } from "@react-three/drei/helpers/environment-assets";
-import { Actions } from "./consts";
+import { Env } from '../components/env';
+import { Actions } from './consts';
+import { RubiksCube, RubiksCubeRef } from './rubiks-cube';
 
 export const Canvas = () => {
   const rubiksCubeRef = useRef<RubiksCubeRef>(null);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, startTransition] = useTransition();
-  const [background, setBackground] = useState<PresetsType>("sunset");
+  const [background, setBackground] = useState<PresetsType>('sunset');
 
   const { cubeRoughness, cubeSpeed } = useControls({
     cubeRoughness: { value: 0.5, min: 0.2, max: 0.8 },
     cubeSpeed: { value: 2, min: 1, max: 10 },
     background: {
       value: background,
-      options: ["sunset", "dawn", "forest"],
+      options: ['sunset', 'dawn', 'forest'],
       onChange: (value) => startTransition(() => setBackground(value)),
     },
     Scramble: button(() => {
-      const scrambleSteps = Array.from(
-        { length: 20 },
-        () => Actions[Math.floor(Math.random() * Actions.length)],
-      );
+      const scrambleSteps = Array.from({ length: 20 }, () => Actions[Math.floor(Math.random() * Actions.length)]);
       rubiksCubeRef.current?.rotate(scrambleSteps);
     }),
   });
@@ -37,11 +34,7 @@ export const Canvas = () => {
     <>
       <Leva />
       <ThreeCanvas shadows camera={{ position: [0, 0, 4.5], fov: 50 }}>
-        <RubiksCube
-          ref={rubiksCubeRef}
-          cubeRoughness={cubeRoughness}
-          cubeSpeed={cubeSpeed}
-        />
+        <RubiksCube ref={rubiksCubeRef} cubeRoughness={cubeRoughness} cubeSpeed={cubeSpeed} />
         <Env background={background} />
       </ThreeCanvas>
     </>

src/components/consts.tsx

@@ -1,12 +1,6 @@
-export type FacingDirection =
-  | "front"
-  | "back"
-  | "left"
-  | "right"
-  | "top"
-  | "bottom";
+export type FacingDirection = 'front' | 'back' | 'left' | 'right' | 'top' | 'bottom';
 
-export type RotationDirection = "clockwise" | "counter-clockwise";
+export type RotationDirection = 'clockwise' | 'counter-clockwise';
 
 export const Rotations: Record<FacingDirection, [number, number, number]> = {
   front: [0, 0, 0],
@@ -23,16 +17,16 @@ export type RotationStep = {
 };
 
 export const Actions: Array<RotationStep> = [
-  { faceDirection: "front", direction: "clockwise" },
-  { faceDirection: "front", direction: "counter-clockwise" },
-  { faceDirection: "right", direction: "clockwise" },
-  { faceDirection: "right", direction: "counter-clockwise" },
-  { faceDirection: "left", direction: "clockwise" },
-  { faceDirection: "left", direction: "counter-clockwise" },
-  { faceDirection: "back", direction: "clockwise" },
-  { faceDirection: "back", direction: "counter-clockwise" },
-  { faceDirection: "top", direction: "clockwise" },
-  { faceDirection: "top", direction: "counter-clockwise" },
-  { faceDirection: "bottom", direction: "clockwise" },
-  { faceDirection: "bottom", direction: "counter-clockwise" },
+  { faceDirection: 'front', direction: 'clockwise' },
+  { faceDirection: 'front', direction: 'counter-clockwise' },
+  { faceDirection: 'right', direction: 'clockwise' },
+  { faceDirection: 'right', direction: 'counter-clockwise' },
+  { faceDirection: 'left', direction: 'clockwise' },
+  { faceDirection: 'left', direction: 'counter-clockwise' },
+  { faceDirection: 'back', direction: 'clockwise' },
+  { faceDirection: 'back', direction: 'counter-clockwise' },
+  { faceDirection: 'top', direction: 'clockwise' },
+  { faceDirection: 'top', direction: 'counter-clockwise' },
+  { faceDirection: 'bottom', direction: 'clockwise' },
+  { faceDirection: 'bottom', direction: 'counter-clockwise' },
 ];

src/components/cube-piece.tsx

@@ -1,19 +1,20 @@
-"use client";
+'use client';
 
-import { RoundedBox } from "@react-three/drei";
-import { useEffect, useRef, useState } from "react";
-import { FacingDirection, Rotations } from "./consts";
-import { Mesh } from "three";
-import { rotationController } from "./rotation-controller";
+import { RoundedBox } from '@react-three/drei';
+import { useEffect, useRef, useState } from 'react';
+import { Mesh } from 'three';
+
+import { FacingDirection, Rotations } from './consts';
+import { rotationController } from './rotation-controller';
 
 // Standard Rubik's cube colors
 const CUBE_COLORS = {
-  front: "#ff0000", // Red
-  back: "#ff00ff", // Purple
-  left: "#00ff00", // Green
-  right: "#0000ff", // Blue
-  top: "#ffff00", // Yellow
-  bottom: "#ffffff", // White
+  front: '#ff0000', // Red
+  back: '#ff00ff', // Purple
+  left: '#00ff00', // Green
+  right: '#0000ff', // Blue
+  top: '#ffff00', // Yellow
+  bottom: '#ffffff', // White
 };
 
 type CubePieceProps = {
@@ -52,28 +53,16 @@ export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
   return (
     <mesh position={position} ref={meshRef}>
       <RoundedBox args={[0.95, 0.95, 0.95]} radius={0.05} smoothness={4}>
-        <meshStandardMaterial
-          color="#2a2a2a"
-          metalness={1}
-          roughness={roughness}
-        />
+        <meshStandardMaterial color="#2a2a2a" metalness={1} roughness={roughness} />
       </RoundedBox>
 
       {Object.entries(visibleFaces).map(([face, isVisible]) => {
         if (!isVisible) return null;
         const color = CUBE_COLORS[face as keyof typeof CUBE_COLORS];
         return (
-          <mesh
-            key={face}
-            position={positions[face as FacingDirection]}
-            rotation={Rotations[face as FacingDirection]}
-          >
+          <mesh key={face} position={positions[face as FacingDirection]} rotation={Rotations[face as FacingDirection]}>
             <planeGeometry args={[0.8, 0.8]} />
-            <meshStandardMaterial
-              color={color}
-              metalness={1}
-              roughness={roughness}
-            />
+            <meshStandardMaterial color={color} metalness={1} roughness={roughness} />
           </mesh>
         );
       })}

src/components/env.tsx

@@ -1,8 +1,9 @@
-"ue client";
+'ue client';
+
+import { CameraControls, Environment } from '@react-three/drei';
+import { CameraControlsImpl } from '@react-three/drei';
+import { PresetsType } from '@react-three/drei/helpers/environment-assets';
 
-import { Environment, CameraControls } from "@react-three/drei";
-import { PresetsType } from "@react-three/drei/helpers/environment-assets";
-import { CameraControlsImpl } from "@react-three/drei";
 const { ACTION } = CameraControlsImpl;
 
 type EnvProps = {

src/components/rotation-controller.ts

@@ -1,5 +1,6 @@
-import { FacingDirection, RotationStep } from "./consts";
-import { Group, Mesh } from "three";
+import { Group, Mesh } from 'three';
+
+import { FacingDirection, RotationStep } from './consts';
 
 export class RotationController {
   private static instance: RotationController;
@@ -21,31 +22,31 @@ export class RotationController {
 
   private rotate(step: RotationStep, group: Group, delta: number) {
     let sign = 0;
-    let axis: "x" | "y" | "z" = "x";
+    let axis: 'x' | 'y' | 'z' = 'x';
     switch (step.faceDirection) {
-      case "front":
-        sign = step.direction === "clockwise" ? -1 : 1;
-        axis = "z";
+      case 'front':
+        sign = step.direction === 'clockwise' ? -1 : 1;
+        axis = 'z';
         break;
-      case "back":
-        sign = step.direction === "clockwise" ? 1 : -1;
-        axis = "z";
+      case 'back':
+        sign = step.direction === 'clockwise' ? 1 : -1;
+        axis = 'z';
         break;
-      case "left":
-        sign = step.direction === "clockwise" ? 1 : -1;
-        axis = "x";
+      case 'left':
+        sign = step.direction === 'clockwise' ? 1 : -1;
+        axis = 'x';
         break;
-      case "right":
-        sign = step.direction === "clockwise" ? -1 : 1;
-        axis = "x";
+      case 'right':
+        sign = step.direction === 'clockwise' ? -1 : 1;
+        axis = 'x';
         break;
-      case "top":
-        sign = step.direction === "clockwise" ? -1 : 1;
-        axis = "y";
+      case 'top':
+        sign = step.direction === 'clockwise' ? -1 : 1;
+        axis = 'y';
         break;
-      case "bottom":
-        sign = step.direction === "clockwise" ? 1 : -1;
-        axis = "y";
+      case 'bottom':
+        sign = step.direction === 'clockwise' ? 1 : -1;
+        axis = 'y';
         break;
     }
 
@@ -76,17 +77,17 @@ export class RotationController {
 
   getCubes(faceDirection: FacingDirection) {
     switch (faceDirection) {
-      case "front":
+      case 'front':
         return this.cubes.filter((m) => m.position.z > 0);
-      case "back":
+      case 'back':
         return this.cubes.filter((m) => m.position.z < 0);
-      case "left":
+      case 'left':
         return this.cubes.filter((m) => m.position.x < 0);
-      case "right":
+      case 'right':
         return this.cubes.filter((m) => m.position.x > 0);
-      case "top":
+      case 'top':
         return this.cubes.filter((m) => m.position.y > 0);
-      case "bottom":
+      case 'bottom':
         return this.cubes.filter((m) => m.position.y < 0);
     }
   }
@@ -123,3 +124,4 @@ export class RotationController {
 }
 
 export const rotationController = RotationController.getInstance();
+export const frameCallback = rotationController.frameCallback.bind(rotationController);

src/components/rotation-panel.tsx

@@ -1,14 +1,10 @@
-"use client";
+'use client';
 
-import { useLoader } from "@react-three/fiber";
-import { TextureLoader } from "three";
-import {
-  Rotations,
-  FacingDirection,
-  RotationStep,
-  RotationDirection,
-} from "./consts";
-import { useState } from "react";
+import { useLoader } from '@react-three/fiber';
+import { useState } from 'react';
+import { TextureLoader } from 'three';
+
+import { FacingDirection, RotationDirection, RotationStep, Rotations } from './consts';
 
 type RotationPanelProps = {
   facingDirection: FacingDirection;
@@ -16,12 +12,8 @@ type RotationPanelProps = {
   onClick?: (step: RotationStep) => void;
 };
 
-export const RotationPanel = ({
-  facingDirection,
-  direction,
-  onClick,
-}: RotationPanelProps) => {
-  const clockwise = direction === "clockwise";
+export const RotationPanel = ({ facingDirection, direction, onClick }: RotationPanelProps) => {
+  const clockwise = direction === 'clockwise';
   const texture = useLoader(TextureLoader, `/textures/${direction}.png`);
   const [opacity, setOpacity] = useState(0);
 
@@ -34,8 +26,7 @@ export const RotationPanel = ({
     bottom: clockwise ? [0.5, -1.01, 0] : [-0.5, -1.01, 0],
   };
 
-  const handleClick = () =>
-    onClick?.({ faceDirection: facingDirection, direction });
+  const handleClick = () => onClick?.({ faceDirection: facingDirection, direction });
 
   return (
     <mesh
@@ -43,22 +34,16 @@ export const RotationPanel = ({
       rotation={Rotations[facingDirection]}
       onPointerEnter={() => {
         setOpacity(1);
-        document.body.style.cursor = "pointer";
+        document.body.style.cursor = 'pointer';
       }}
       onPointerLeave={() => {
         setOpacity(0);
-        document.body.style.cursor = "default";
+        document.body.style.cursor = 'default';
       }}
       onClick={handleClick}
     >
       <planeGeometry args={[0.8, 1.6]} />
-      <meshStandardMaterial
-        color={"#aaaaaa"}
-        roughness={0.5}
-        opacity={opacity}
-        map={texture}
-        transparent
-      />
+      <meshStandardMaterial color={'#aaaaaa'} roughness={0.5} opacity={opacity} map={texture} transparent />
     </mesh>
   );
 };

src/components/rotator.tsx

@@ -1,8 +1,9 @@
-import { FacingDirection, RotationStep } from "./consts";
-import { RotationPanel } from "./rotation-panel";
-import { rotationController } from "./rotation-controller";
-import { forwardRef, Fragment, useImperativeHandle } from "react";
-import { useFrame } from "@react-three/fiber";
+import { useFrame } from '@react-three/fiber';
+import { Fragment, forwardRef, useImperativeHandle } from 'react';
+
+import { FacingDirection, RotationStep } from './consts';
+import { frameCallback, rotationController } from './rotation-controller';
+import { RotationPanel } from './rotation-panel';
 
 export type RotatorRef = {
   rotate: (steps: Array<RotationStep>) => void;
@@ -12,38 +13,33 @@ type RotatorProps = {
   cubeSpeed: number;
 };
 
-export const Rotator = forwardRef<RotatorRef, RotatorProps>(
-  ({ cubeSpeed }: RotatorProps, ref) => {
-    rotationController.setCubeSpeed(cubeSpeed);
-
-    useImperativeHandle(ref, () => ({
-      rotate: (steps: Array<RotationStep>) =>
-        rotationController.addRotationStep(...steps),
-    }));
-
-    useFrame(rotationController.frameCallback.bind(rotationController));
-
-    return (
-      <>
-        {["front", "back", "left", "right", "top", "bottom"].map(
-          (facingDirection) => (
-            <Fragment key={facingDirection}>
-              <RotationPanel
-                direction="clockwise"
-                facingDirection={facingDirection as FacingDirection}
-                onClick={(s) => rotationController.addRotationStep(s)}
-              />
-              <RotationPanel
-                direction="counter-clockwise"
-                facingDirection={facingDirection as FacingDirection}
-                onClick={(s) => rotationController.addRotationStep(s)}
-              />
-            </Fragment>
-          ),
-        )}
-      </>
-    );
-  },
-);
-
-Rotator.displayName = "Rotator";
+export const Rotator = forwardRef<RotatorRef, RotatorProps>(({ cubeSpeed }: RotatorProps, ref) => {
+  rotationController.setCubeSpeed(cubeSpeed);
+
+  useImperativeHandle(ref, () => ({
+    rotate: (steps: Array<RotationStep>) => rotationController.addRotationStep(...steps),
+  }));
+
+  useFrame(frameCallback);
+
+  return (
+    <>
+      {['front', 'back', 'left', 'right', 'top', 'bottom'].map((facingDirection) => (
+        <Fragment key={facingDirection}>
+          <RotationPanel
+            direction="clockwise"
+            facingDirection={facingDirection as FacingDirection}
+            onClick={(s) => rotationController.addRotationStep(s)}
+          />
+          <RotationPanel
+            direction="counter-clockwise"
+            facingDirection={facingDirection as FacingDirection}
+            onClick={(s) => rotationController.addRotationStep(s)}
+          />
+        </Fragment>
+      ))}
+    </>
+  );
+});
+
+Rotator.displayName = 'Rotator';

src/components/rubiks-cube.tsx

@@ -1,9 +1,10 @@
-import { useRef, forwardRef, useImperativeHandle, useEffect } from "react";
-import { CubePiece } from "./cube-piece";
-import { Rotator, RotatorRef } from "./rotator";
-import { Group } from "three";
-import { RotationStep } from "./consts";
-import { rotationController } from "./rotation-controller";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { Group } from 'three';
+
+import { RotationStep } from './consts';
+import { CubePiece } from './cube-piece';
+import { rotationController } from './rotation-controller';
+import { Rotator, RotatorRef } from './rotator';
 
 const CUBE_POSITIONS: Array<[number, number, number]> = [];
 for (let x = -0.5; x <= 0.5; x += 1) {
@@ -23,35 +24,28 @@ type RubiksCubeProps = {
   cubeSpeed: number;
 };
 
-export const RubiksCube = forwardRef<RubiksCubeRef, RubiksCubeProps>(
-  ({ cubeRoughness, cubeSpeed }, ref) => {
-    const cubeGroupRef = useRef<Group | null>(null);
-    const rotatorRef = useRef<RotatorRef | null>(null);
-
-    useImperativeHandle(ref, () => ({
-      rotate: (steps: Array<RotationStep>) => rotatorRef.current?.rotate(steps),
-    }));
-
-    useEffect(() => {
-      if (cubeGroupRef.current)
-        rotationController.setCubeGroup(cubeGroupRef.current);
-    }, [cubeGroupRef]);
-
-    return (
-      <>
-        <group ref={cubeGroupRef}>
-          {CUBE_POSITIONS.map((position) => (
-            <CubePiece
-              key={position.join(",")}
-              initialPosition={position}
-              roughness={cubeRoughness}
-            />
-          ))}
-        </group>
-        <Rotator ref={rotatorRef} cubeSpeed={cubeSpeed} />
-      </>
-    );
-  },
-);
-
-RubiksCube.displayName = "RubiksCube";
+export const RubiksCube = forwardRef<RubiksCubeRef, RubiksCubeProps>(({ cubeRoughness, cubeSpeed }, ref) => {
+  const cubeGroupRef = useRef<Group | null>(null);
+  const rotatorRef = useRef<RotatorRef | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    rotate: (steps: Array<RotationStep>) => rotatorRef.current?.rotate(steps),
+  }));
+
+  useEffect(() => {
+    if (cubeGroupRef.current) rotationController.setCubeGroup(cubeGroupRef.current);
+  }, [cubeGroupRef]);
+
+  return (
+    <>
+      <group ref={cubeGroupRef}>
+        {CUBE_POSITIONS.map((position) => (
+          <CubePiece key={position.join(',')} initialPosition={position} roughness={cubeRoughness} />
+        ))}
+      </group>
+      <Rotator ref={rotatorRef} cubeSpeed={cubeSpeed} />
+    </>
+  );
+});
+
+RubiksCube.displayName = 'RubiksCube';