feat: enable play vs Stockfish for guests and logged-in users

react-ystemandchess/src/AppRoutes.tsx

@@ -33,6 +33,7 @@ import Financial from "./features/about-us/financial/Financial";
 import AboutUs from "./features/about-us/aboutus/AboutUs";
 
 // Educational content pages
+import PlayComputer from "./features/engine/PlayComputer";
 import Lessons from "./features/lessons/lessons-main/Lessons";
 import Puzzles from './features/puzzles/puzzles-page/Puzzles';
 import LessonSelection from "./features/lessons/lessons-selection/LessonsSelection";
@@ -99,6 +100,7 @@ const AppRoutes = () => {
       <Route path="/sponsors&partners" element={<SponsorsPartners />} />
 
       {/* Educational content and learning pages */}
+      <Route path="/play" element={<PlayComputer/>}/>
       <Route path="/puzzles" element={<Puzzles />} />
       <Route path="/lessons-selection" element={<LessonSelection />} />
       <Route path="/lessons" element={<LessonOverlay />} />

react-ystemandchess/src/components/ChessBoard/ChessBoard.tsx

@@ -29,6 +29,7 @@ export interface ChessBoardRef {
   flip: () => void;
   undo: () => void;
   loadPosition: (fen: string) => void;
+  setPosition: (fen: string) => void;
   highlightMove: (from: string, to: string) => void;
   clearHighlights: () => void;
 }
@@ -144,6 +145,15 @@ const ChessBoard = forwardRef<ChessBoardRef, ChessBoardProps>(
         }
       },
 
+      setPosition: (newFen: string) => {
+        try {
+          gameRef.current.load(newFen);
+          setBoardPosition(newFen);
+        } catch (err) {
+          console.error("Failed to set position:", newFen, err);
+        }
+      },
+
       highlightMove: (from: string, to: string) => {
         const highlights = [from, to];
         setInternalHighlights(highlights);
@@ -207,7 +217,6 @@ const ChessBoard = forwardRef<ChessBoardRef, ChessBoardProps>(
 
         if (!moveResult) {
           // Invalid move - shake animation and snapback
-          console.log("Invalid move:", move);
           setIsShaking(true);
           setTimeout(() => setIsShaking(false), 400);
           if (onInvalidMove) onInvalidMove();

react-ystemandchess/src/components/navbar/NavBar.tsx

@@ -401,6 +401,12 @@ const NavBar = () => {
       >
         Learn
       </Link>
+      <Link
+        to="/play"
+        className="text-gray-700 hover:text-black text-lg px-3 py-1"
+      >
+        Play
+      </Link>
       <Link
         to="/lessons-selection"
         className="text-gray-700 hover:text-black text-lg px-3 py-1"

react-ystemandchess/src/core/types/chessboardjsx.d.ts

@@ -1,6 +1,6 @@
 declare module "chessboardjsx" {
   import { Component } from "react";
-  export type ChessMode = "lesson" | "puzzle" | "multiplayer";
+  export type ChessMode = "lesson" | "puzzle" | "multiplayer" | "engine";
 
   interface ChessboardProps {
     mode?: ChessMode;

react-ystemandchess/src/environments/environment.js

@@ -5,9 +5,8 @@ export const environment = {
 	},
 	urls: {
 		middlewareURL: 'http://localhost:8000',
-		chessClientURL: 'http://localhost',
-		stockFishURL: 'http://localhost:8080/stockfishserver/',
-		chessServer: 'http://localhost:3001/',
+		stockfishServerURL: 'http://localhost:8080',
+		chessServerURL: 'http://localhost:3001',
 	},
-	productionType: 'development', // development/production
+	productionType: 'development',
 };

react-ystemandchess/src/environments/environment.prod.js

@@ -5,8 +5,7 @@ export const environment = {
 	},
 	urls: {
 		middlewareURL: 'http://localhost/middleware/',
-		chessClientURL: 'http://localhost/chessclient/',
-		stockFishURL: 'http://localhost/stockfishserver/',
-		chessServer: 'http://localhost/chessserver/',
+		stockfishServerURL: 'http://localhost/stockfishserver/',
+		chessServerURL: 'http://localhost/chessserver/',
 	},
 };