show indicators

src/app/layout.tsx

@@ -7,6 +7,9 @@ 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.",
+  icons: {
+    icon: '/logo.png',
+  },
 };
 
 export default function RootLayout({

src/components/rotation-panel.tsx

@@ -4,6 +4,8 @@ import { useLoader } from '@react-three/fiber';
 import { useState } from 'react';
 import { TextureLoader } from 'three';
 
+import { useControlContext } from '@/contexts/control-context';
+
 import { FacingDirection, RotationDirection, RotationStep, Rotations } from './consts';
 
 type RotationPanelProps = {
@@ -13,6 +15,7 @@ type RotationPanelProps = {
 };
 
 export const RotationPanel = ({ facingDirection, direction, onClick }: RotationPanelProps) => {
+  const { showRotationIndicators } = useControlContext();
   const clockwise = direction === 'clockwise';
   const texture = useLoader(TextureLoader, `/textures/${direction}.png`);
   const [opacity, setOpacity] = useState(0);
@@ -43,7 +46,13 @@ export const RotationPanel = ({ facingDirection, direction, onClick }: RotationP
       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={showRotationIndicators ? 1 : opacity}
+        map={texture}
+        transparent
+      />
     </mesh>
   );
 };

src/components/ui-controls.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, ButtonGroup, Card, CardBody, Slider } from '@heroui/react';
+import { Button, ButtonGroup, Card, CardBody, Checkbox, Slider } from '@heroui/react';
 import { useState } from 'react';
 
 import { useControlContext } from '@/contexts/control-context';
@@ -9,8 +9,16 @@ import { Actions } from './consts';
 
 export const UIControls = () => {
   const [isControlsOpen, setIsControlsOpen] = useState(true);
-  const { rubiksCubeRef, setBackground, cubeRoughness, setCubeRoughness, cubeSpeed, setCubeSpeed } =
-    useControlContext();
+  const {
+    rubiksCubeRef,
+    showRotationIndicators,
+    setShowRotationIndicators,
+    setBackground,
+    cubeRoughness,
+    setCubeRoughness,
+    cubeSpeed,
+    setCubeSpeed,
+  } = useControlContext();
 
   const scramble = () => {
     const scrambleSteps = Array.from({ length: 20 }, () => Actions[Math.floor(Math.random() * Actions.length)]);
@@ -48,6 +56,10 @@ export const UIControls = () => {
             style={{ willChange: 'max-height, opacity' }}
           >
             <div className="flex flex-col gap-2 mt-6">
+              <div className="flex items-center justify-between">
+                <div className="text-sm">Rotation Indicators</div>
+                <Checkbox isSelected={showRotationIndicators} onValueChange={setShowRotationIndicators} />
+              </div>
               <div className="flex items-center justify-between">
                 <div className="text-sm">Background</div>
                 <ButtonGroup size="sm">
@@ -84,7 +96,7 @@ export const UIControls = () => {
                 </Button>
               </div>
               <div className="text-sm italic font-bold underline text-primary cursor-pointer" onClick={train}>
-                Train my own model!
+                Train your own model!
               </div>
             </div>
           </div>

src/contexts/control-context.tsx

@@ -6,6 +6,8 @@ import { RefObject, createContext, useContext, useState } from 'react';
 import { RubiksCubeRef } from '@/components/rubiks-cube';
 
 type ControlContextType = {
+  showRotationIndicators: boolean;
+  setShowRotationIndicators: (showRotationIndicators: boolean) => void;
   cubeRoughness: number;
   setCubeRoughness: (cubeRoughness: number) => void;
   cubeSpeed: number;
@@ -17,6 +19,8 @@ type ControlContextType = {
 };
 
 export const ControlContext = createContext<ControlContextType>({
+  showRotationIndicators: false,
+  setShowRotationIndicators: () => {},
   cubeRoughness: 0.5,
   setCubeRoughness: () => {},
   cubeSpeed: 2,
@@ -32,6 +36,7 @@ export const useControlContext = () => {
 };
 
 export const ControlProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showRotationIndicators, setShowRotationIndicators] = useState(false);
   const [cubeRoughness, setCubeRoughness] = useState(0.5);
   const [cubeSpeed, setCubeSpeed] = useState(2);
   const [background, setBackground] = useState<PresetsType>('sunset');
@@ -40,6 +45,8 @@ export const ControlProvider = ({ children }: { children: React.ReactNode }) =>
   return (
     <ControlContext.Provider
       value={{
+        showRotationIndicators,
+        setShowRotationIndicators,
         cubeRoughness,
         setCubeRoughness,
         cubeSpeed,