use up down to avoid conflict

src/components/consts.tsx

@@ -1,4 +1,4 @@
-export type FacingDirection = 'front' | 'back' | 'right' | 'left' | 'top' | 'bottom';
+export type FacingDirection = 'front' | 'back' | 'right' | 'left' | 'up' | 'down';
 
 export type RotationDirection = 'clockwise' | 'counter-clockwise';
 
@@ -7,8 +7,8 @@ export const CubeColors: Record<FacingDirection, string> = {
   back: '#ff00ff', // Purple
   right: '#0000ff', // Blue
   left: '#00ff00', // Green
-  top: '#ffff00', // Yellow
-  bottom: '#ffffff', // White
+  up: '#ffff00', // Yellow
+  down: '#ffffff', // White
 };
 
 export const Color2Index: Record<string, number> = {
@@ -34,8 +34,8 @@ export const Rotations: Record<FacingDirection, [number, number, number]> = {
   back: [0, Math.PI, 0],
   right: [0, Math.PI / 2, 0],
   left: [0, -Math.PI / 2, 0],
-  top: [-Math.PI / 2, 0, 0],
-  bottom: [Math.PI / 2, 0, 0],
+  up: [-Math.PI / 2, 0, 0],
+  down: [Math.PI / 2, 0, 0],
 };
 
 export type RotationStep = {
@@ -52,8 +52,8 @@ export const Actions: Array<RotationStep> = [
   { faceDirection: 'right', direction: 'counter-clockwise' },
   { faceDirection: 'left', direction: 'clockwise' },
   { faceDirection: 'left', direction: 'counter-clockwise' },
-  { faceDirection: 'top', direction: 'clockwise' },
-  { faceDirection: 'top', direction: 'counter-clockwise' },
-  { faceDirection: 'bottom', direction: 'clockwise' },
-  { faceDirection: 'bottom', direction: 'counter-clockwise' },
+  { faceDirection: 'up', direction: 'clockwise' },
+  { faceDirection: 'up', direction: 'counter-clockwise' },
+  { faceDirection: 'down', direction: 'clockwise' },
+  { faceDirection: 'down', direction: 'counter-clockwise' },
 ];

src/components/cube-piece.tsx

@@ -38,16 +38,16 @@ export const CubePiece = forwardRef<CubePieceRef, CubePieceProps>(({ roughness,
     back: z < 0,
     left: x < 0,
     right: x > 0,
-    top: y > 0,
-    bottom: y < 0,
+    up: y > 0,
+    down: y < 0,
   };
   const positions: Record<FacingDirection, [number, number, number]> = {
     front: [0, 0, 0.48],
     back: [0, 0, -0.48],
     right: [0.48, 0, 0],
     left: [-0.48, 0, 0],
-    top: [0, 0.48, 0],
-    bottom: [0, -0.48, 0],
+    up: [0, 0.48, 0],
+    down: [0, -0.48, 0],
   };
 
   return (

src/components/rotation-controller.ts

@@ -40,11 +40,11 @@ export class RotationController {
         sign = step.direction === 'clockwise' ? -1 : 1;
         axis = 'x';
         break;
-      case 'top':
+      case 'up':
         sign = step.direction === 'clockwise' ? -1 : 1;
         axis = 'y';
         break;
-      case 'bottom':
+      case 'down':
         sign = step.direction === 'clockwise' ? 1 : -1;
         axis = 'y';
         break;
@@ -70,8 +70,8 @@ export class RotationController {
       case 'left':
         axis = 'x';
         break;
-      case 'top':
-      case 'bottom':
+      case 'up':
+      case 'down':
         axis = 'y';
         break;
     }
@@ -135,15 +135,15 @@ export class RotationController {
         return this.cubes.filter((m) => m.position.x > 0);
       case 'left':
         return this.cubes.filter((m) => m.position.x < 0);
-      case 'top':
+      case 'up':
         return this.cubes.filter((m) => m.position.y > 0);
-      case 'bottom':
+      case 'down':
         return this.cubes.filter((m) => m.position.y < 0);
     }
   }
 
   initializeFaces() {
-    ['front', 'back', 'right', 'left', 'top', 'bottom'].forEach((f) => {
+    ['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);
@@ -155,7 +155,7 @@ export class RotationController {
 
   getStatus() {
     const rotationsPy: Array<string> = [];
-    const status = ['front', 'back', 'right', 'left', 'top', 'bottom'].map((f) => {
+    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);

src/components/rotation-panel.tsx

@@ -25,8 +25,8 @@ export const RotationPanel = ({ facingDirection, direction, onClick }: RotationP
     back: clockwise ? [-0.5, 0, -1.01] : [0.5, 0, -1.01],
     left: clockwise ? [-1.01, 0, 0.5] : [-1.01, 0, -0.5],
     right: clockwise ? [1.01, 0, -0.5] : [1.01, 0, 0.5],
-    top: clockwise ? [0.5, 1.01, 0] : [-0.5, 1.01, 0],
-    bottom: clockwise ? [0.5, -1.01, 0] : [-0.5, -1.01, 0],
+    up: clockwise ? [0.5, 1.01, 0] : [-0.5, 1.01, 0],
+    down: clockwise ? [0.5, -1.01, 0] : [-0.5, -1.01, 0],
   };
 
   const handleClick = () => onClick?.({ faceDirection: facingDirection, direction });

src/components/rotator.tsx

@@ -24,7 +24,7 @@ export const Rotator = forwardRef<RotatorRef, RotatorProps>(({ cubeSpeed }: Rota
 
   return (
     <>
-      {['front', 'back', 'left', 'right', 'top', 'bottom'].map((facingDirection) => (
+      {['front', 'back', 'left', 'right', 'up', 'down'].map((facingDirection) => (
         <Fragment key={facingDirection}>
           <RotationPanel
             direction="clockwise"

src/components/state-modal.tsx

@@ -55,12 +55,12 @@ export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
                   <div className="font-mono">[{state[3].map((index) => Index2Color[index]).join(', ')}]</div>
                 </div>
                 <div className="flex gap-2 items-center">
-                  <div className="text-sm w-24 font-mont">Top</div>
+                  <div className="text-sm w-24 font-mont">Up</div>
                   <div className="font-mono">{JSON.stringify(state[4])}</div>
                   <div className="font-mono">[{state[4].map((index) => Index2Color[index]).join(', ')}]</div>
                 </div>
                 <div className="flex gap-2 items-center">
-                  <div className="text-sm w-24 font-mont">Bottom</div>
+                  <div className="text-sm w-24 font-mont">Down</div>
                   <div className="font-mono">{JSON.stringify(state[5])}</div>
                   <div className="font-mono">[{state[5].map((index) => Index2Color[index]).join(', ')}]</div>
                 </div>