show color name

src/components/consts.tsx

@@ -11,13 +11,22 @@ export const CubeColors: Record<FacingDirection, string> = {
   bottom: '#ffffff', // White
 };
 
-export const CubeColorIndices: Record<FacingDirection, number> = {
-  front: 0,
-  back: 1,
-  right: 2,
-  left: 3,
-  top: 4,
-  bottom: 5,
+export const Color2Index: Record<string, number> = {
+  '#ff0000': 0,
+  '#ff00ff': 1,
+  '#0000ff': 2,
+  '#00ff00': 3,
+  '#ffff00': 4,
+  '#ffffff': 5,
+};
+
+export const Index2Color: Record<number, string> = {
+  0: 'R',
+  1: 'P',
+  2: 'B',
+  3: 'G',
+  4: 'Y',
+  5: 'W',
 };
 
 export const Rotations: Record<FacingDirection, [number, number, number]> = {

src/components/cube-piece.tsx

@@ -4,7 +4,7 @@ import { RoundedBox } from '@react-three/drei';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { Mesh } from 'three';
 
-import { CubeColorIndices, CubeColors, FacingDirection, Rotations } from './consts';
+import { Color2Index, CubeColors, FacingDirection, Rotations } from './consts';
 import { rotationController } from './rotation-controller';
 
 export type CubePieceRef = {
@@ -67,7 +67,7 @@ export const CubePiece = forwardRef<CubePieceRef, CubePieceProps>(({ roughness,
             userData={{
               isFace: true,
               faceColor: color,
-              faceColorIndex: CubeColorIndices[face as FacingDirection],
+              faceColorIndex: Color2Index[color],
             }}
           >
             <planeGeometry args={[0.8, 0.8]} />

src/components/state-modal.tsx

@@ -5,6 +5,8 @@ import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@herou
 import { useDisclosure } from '@heroui/use-disclosure';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 
+import { Index2Color } from './consts';
+
 export type StateModalRef = {
   open: (status: Array<Array<number>>) => void;
 };
@@ -25,7 +27,7 @@ export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
   };
 
   return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
       <ModalContent>
         {(onClose) => (
           <>
@@ -35,26 +37,32 @@ export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
                 <div className="flex gap-2 items-center">
                   <div className="text-sm w-24 font-mont">Front</div>
                   <div className="font-mono">{JSON.stringify(state[0])}</div>
+                  <div className="font-mono">[{state[0].map((index) => Index2Color[index]).join(', ')}]</div>
                 </div>
                 <div className="flex gap-2 items-center">
                   <div className="text-sm w-24 font-mont">Back</div>
                   <div className="font-mono">{JSON.stringify(state[1])}</div>
+                  <div className="font-mono">[{state[1].map((index) => Index2Color[index]).join(', ')}]</div>
                 </div>
                 <div className="flex gap-2 items-center">
                   <div className="text-sm w-24 font-mont">Right</div>
                   <div className="font-mono">{JSON.stringify(state[2])}</div>
+                  <div className="font-mono">[{state[2].map((index) => Index2Color[index]).join(', ')}]</div>
                 </div>
                 <div className="flex gap-2 items-center">
                   <div className="text-sm w-24 font-mont">Left</div>
                   <div className="font-mono">{JSON.stringify(state[3])}</div>
+                  <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">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">Down</div>
                   <div className="font-mono">{JSON.stringify(state[5])}</div>
+                  <div className="font-mono">[{state[5].map((index) => Index2Color[index]).join(', ')}]</div>
                 </div>
               </div>
             </ModalBody>