From 12afa4ffbf14baec7427fdaa48966de643480880 Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Thu, 25 Dec 2025 14:29:40 +0100
Subject: [PATCH 01/11] refactor: replace WASM-based Stockfish entry point with
 socket-based backend server

---
 .../lessons-selection/LessonsSelection.jsx    |   1 -
 .../lesson-overlay/hooks/useChessSocket.ts    |   4 -
 stockfishServer/src/archive/index_new.js      |  64 -----------
 stockfishServer/src/index.js                  | 101 ++++--------------
 4 files changed, 19 insertions(+), 151 deletions(-)
 delete mode 100644 stockfishServer/src/archive/index_new.js

diff --git a/react-ystemandchess/src/features/lessons/lessons-selection/LessonsSelection.jsx b/react-ystemandchess/src/features/lessons/lessons-selection/LessonsSelection.jsx
index fa888646..040ba4a5 100644
--- a/react-ystemandchess/src/features/lessons/lessons-selection/LessonsSelection.jsx
+++ b/react-ystemandchess/src/features/lessons/lessons-selection/LessonsSelection.jsx
@@ -99,7 +99,6 @@ export default function LessonSelection({ onGo, styleType = "page" }) { // what
       if (!cookies.login) {
         // Non-logged users: expose all lessons
         unlocked = currentScenario.subSections.length;
-        console.log("No login cookie detected. Granting full access. unlocked:", unlocked);
       } else {
         // Logged users: ask backend for how many lessons they have completed
         try {
diff --git a/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useChessSocket.ts b/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useChessSocket.ts
index b8b1ef23..51226f25 100644
--- a/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useChessSocket.ts
+++ b/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/hooks/useChessSocket.ts
@@ -129,12 +129,10 @@ export const useChessSocket = ({
 
     // on connect
     socket.on("connect", () => {
-      console.log("Connected to chess server - socket id:", socket.id);
       setConnected(true);
     });
 
     socket.on("disconnect", (reason: any) => {
-      console.log("Disconnected from chess server", reason);
       setConnected(false);
     });
 
@@ -350,7 +348,6 @@ export const useChessSocket = ({
     currentFenRef.current = normalizedFen;
     
     const data = { state: normalizedFen };
-    console.log("Setting game state (normalized):", normalizedFen);
     socketRef.current?.emit("setstate", JSON.stringify(data));
   }, []);
 
@@ -363,7 +360,6 @@ export const useChessSocket = ({
       currentFenRef.current = normalizedFen;
       
       const data = { state: normalizedFen, color, hints: hints || "" };
-      console.log("Setting game state with color (normalized):", data);
       socketRef.current?.emit("setstateColor", JSON.stringify(data));
     },
     []
diff --git a/stockfishServer/src/archive/index_new.js b/stockfishServer/src/archive/index_new.js
deleted file mode 100644
index a873d461..00000000
--- a/stockfishServer/src/archive/index_new.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Stockfish Server - Socket.IO Version (New)
- * 
- * Refactored version of the Stockfish chess engine server using Socket.IO
- * instead of REST API. Provides real-time chess position evaluation.
- * 
- * This is the newer implementation that uses WebSockets for better
- * real-time communication compared to the REST API version (index.js).
- * 
- * Features:
- * - Socket.IO for real-time bidirectional communication
- * - Stockfish chess engine integration
- * - Session-based engine management
- * - Health check endpoint
- * - CORS enabled for cross-origin requests
- */
-
-require('dotenv').config()
-
-const express = require('express');
-const socketIo = require('socket.io');
-const { Chess } = require('chess.js');
-const cors = require('cors');
-const http = require('http');
-const initializeSocket = require('./socket');
-
-// Initialize Express application
-const app = express();
-const server = http.createServer(app);
-
-// Configure Socket.IO with CORS settings
-const io = socketIo(server, {
-    cors: {
-        origin: "*",
-        methods: ["GET", "POST"]
-    }
-});
-
-// Apply middleware
-app.use(cors());
-app.use(express.json());
-
-/**
- * Health check endpoint
- * Used to verify server is running and responsive
- */
-app.get("/health", (req, res) => {
-    return res.json({ status: "OK" });
-});
-
-/**
- * Handle new Socket.IO client connections
- * Initializes Stockfish session for each connected client
- */
-io.on("connection", (socket) => {
-    console.log(`New client (${socket.id}) connected!`);
-    initializeSocket(io, socket);
-});
-
-// Start the server on specified port
-const PORT = process.env.PORT || 5001;
-server.listen(PORT, () => {
-    console.log(`Stockfish server running on port ${PORT}`);
-});
\ No newline at end of file
diff --git a/stockfishServer/src/index.js b/stockfishServer/src/index.js
index 5642db24..de771481 100644
--- a/stockfishServer/src/index.js
+++ b/stockfishServer/src/index.js
@@ -1,98 +1,35 @@
-// Load environment variables from .env file
 require("dotenv").config();
 
 const express = require("express");
-const rateLimit = require("express-rate-limit");
-const { Chess } = require("chess.js");
-const Stockfish = require("stockfish");
-const querystring = require("querystring");
-const url = require("url");
-const { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } = require("constants");
+const http = require("http");
+const { Server } = require("socket.io");
+const cors = require("cors");
+const initializeSocket = require("./manager/socket");
 
 const app = express();
+const server = http.createServer(app);
 
-// Set rate limit - 30 requests/minute per IP
-const limiter = rateLimit({
-  windowMs: 60 * 1000,
-  max: 30,
-  message: { error: "Too many requests! Please try again." },
+const io = new Server(server, {
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"],
+  },
 });
-app.use(limiter);
 
-// CORS headers
-app.use((req, res, next) => {
-  // WARNING: allow only selected access for production
-  res.setHeader("Access-Control-Allow-Origin", "*");  
+app.use(cors());
+app.use(express.json());
 
-  res.setHeader("Content-Type", "application/json");
-  next();
+app.get("/health", (req, res) => {
+  res.json({ status: "ok" });
 });
 
-/**
- * Main API route - evaluates chess positions using Stockfish engine
- * Accepts FEN string, optional move, difficulty level, and info flag
- */
-app.get("/", (req, res) => {
-  // Parse query parameters from the URL
-  const params = querystring.parse(url.parse(req.url, true).search?.substring(1));
-  const { fen, move = "", level = 10, info = false } = params;
-
-  // Validate input
-  if (!fen || isNaN(level)) {
-    return res.status(400).json({ error: "Missing or invalid parameters!" });
-  }
-
-  // Set maximum depth level and create engine instance
-  const maxLevel = 30;
-  var lines = [];
-  var depth = Math.min(parseInt(level), maxLevel);
-  const engine = Stockfish();
-
-  // Create a new chess game from the provided FEN position
-  const game = new Chess(fen);
-
-  // Handle messages from the Stockfish engine
-  engine.onmessage = (line) => {
-    // If info mode is requested, collect all engine output lines
-    if (info) {
-
-      lines.push(line);
-      if (line.startsWith("bestmove")) {
-        res.json({ output: lines });
-      }
-    }
-    // Otherwise, return only the best move with details
-    else if (line.startsWith("bestmove")) {
-      const moveResult = game.move(line.split(" ")[1], { sloppy: true });
-
-      if (moveResult) {
-        const color = moveResult.color;
-        const piece = moveResult.piece.toUpperCase();
-        const move = color + piece;
-        const target = moveResult.to;
-        res.end(`${game.fen()} move:${move} target:${target}`);
-      }
-      else {
-        res.end("Invalid move or game state");
-      }
-    }
-  }
-
-  // Send position + evaluation command to the engine
-  engine.postMessage(`position fen ${fen} moves ${move}`);
-  engine.postMessage(`go depth ${depth}`);
-
-  // Set timeout for safety
-  setTimeout(() => {
-    if (!res.writableEnded) {
-      res.status(504).json({ error: "Engine timeout!" });
-    }
-  }, 5000);
+io.on("connection", (socket) => {
+  console.log(`Client connected ${socket.id}`);
+  initializeSocket(io, socket);
 });
 
+const PORT = process.env.PORT || 8080;
 
-// Start the server
-const PORT = process.env.PORT || 3002;
-app.listen(PORT, () => {
+server.listen(PORT, () => {
   console.log(`Stockfish server running on port ${PORT}`);
 });

From f86fa62f42d926218df969bc61a5ded718f8d0a9 Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Thu, 25 Dec 2025 14:34:51 +0100
Subject: [PATCH 02/11] fix: resolve Stockfish binary path

---
 stockfishServer/src/index.js                     | 4 ++--
 stockfishServer/src/managers/StockfishManager.js | 8 ++++----
 stockfishServer/src/managers/socket.js           | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/stockfishServer/src/index.js b/stockfishServer/src/index.js
index de771481..44e60989 100644
--- a/stockfishServer/src/index.js
+++ b/stockfishServer/src/index.js
@@ -4,7 +4,7 @@ const express = require("express");
 const http = require("http");
 const { Server } = require("socket.io");
 const cors = require("cors");
-const initializeSocket = require("./manager/socket");
+const initializeSocket = require("./managers/socket");
 
 const app = express();
 const server = http.createServer(app);
@@ -25,7 +25,7 @@ app.get("/health", (req, res) => {
 
 io.on("connection", (socket) => {
   console.log(`Client connected ${socket.id}`);
-  initializeSocket(io, socket);
+  initializeSocket(socket);
 });
 
 const PORT = process.env.PORT || 8080;
diff --git a/stockfishServer/src/managers/StockfishManager.js b/stockfishServer/src/managers/StockfishManager.js
index 538166e7..cda2b54d 100644
--- a/stockfishServer/src/managers/StockfishManager.js
+++ b/stockfishServer/src/managers/StockfishManager.js
@@ -1,20 +1,20 @@
 const { spawn } = require('child_process');
 const crypto = require("crypto");
 const { Chess } = require("chess.js");
+const path = require("path");
 
 // Determine the correct Stockfish binary path based on platform
 let enginePath;
 
 switch (process.platform) {
     case 'win32':
-      enginePath = "./bin/stockfish_11_win.exe";
+      enginePath = path.join(__dirname, "..", "bin", "stockfish_11_win.exe");
       break;
     case 'darwin':
-      enginePath = "./bin/stockfish_11_mac";
+      enginePath = path.join(__dirname, "..", "bin", "stockfish_11_mac");
       break;
     case 'linux':
-      enginePath = "./bin/stockfish_11_linux";
-      break;
+      enginePath = path.join(__dirname, "..", "bin", "stockfish_11_linux");
     default:
       throw new Error(`Unsupported platform: ${process.platform}`);
 }
diff --git a/stockfishServer/src/managers/socket.js b/stockfishServer/src/managers/socket.js
index ebb76e18..4570b0ab 100644
--- a/stockfishServer/src/managers/socket.js
+++ b/stockfishServer/src/managers/socket.js
@@ -6,7 +6,7 @@ const stockfishManager = new StockfishManager();
  * @param {Server} io - Socket.IO server instance
  * @param {Socket} socket - Connected socket instance
  */
-const initializeSocket = (io, socket) => {
+const initializeSocket = (socket) => {
   // Start a new Stockfish session for the client
   socket.on("start-session", ({ sessionType, fen }) => {
     try {

From 9038d918f12f1dcef77ecc9b9e2e23cfd46a57a3 Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Thu, 25 Dec 2025 17:41:06 +0100
Subject: [PATCH 03/11] chore: remove unused files

---
 .../piece-lessons/play-lesson/PlayLesson.tsx  | 16 -----
 .../play-lesson/lesson-content copy.scss      | 67 -------------------
 .../play-lesson/lesson-content.scss           | 67 -------------------
 .../features/puzzles/puzzles-page/Puzzles.tsx |  1 -
 4 files changed, 151 deletions(-)
 delete mode 100644 react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/PlayLesson.tsx
 delete mode 100644 react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content copy.scss
 delete mode 100644 react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content.scss

diff --git a/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/PlayLesson.tsx b/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/PlayLesson.tsx
deleted file mode 100644
index 0da879c7..00000000
--- a/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/PlayLesson.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import "./lesson-content.scss";
-
-const PlayLesson = ({ chessLessonSrc }) => {
-    return (
-        <div className="cont">
-            <div className="row">
-                <div className="lichess">
-                    <iframe src={chessLessonSrc} id="chessBd" title="Chess Lesson Board"></iframe>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default PlayLesson;
diff --git a/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content copy.scss b/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content copy.scss
deleted file mode 100644
index e49dd1b5..00000000
--- a/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content copy.scss	
+++ /dev/null
@@ -1,67 +0,0 @@
-.cont {
-  width: 100%;
-  .lichess {
-    position: relative;
-    width: 160%;
-    padding-bottom: 160%;
-
-    iframe {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: -80px;
-      right: 0;
-      width: 100%;
-      height:100%;
-    }
-  }
-  .jitsi {
-    width: 30%;
-    height: 300px;
-    padding: 2px;
-  }
-
-  // @media only screen and (max-width: 1550px) {
-  //   .lichess {
-  //     width:70%;
-  //     padding-bottom: 70%;
-  //   }
-  // }
-
-  // @media only screen and (max-width:1000px) {
-  //   .lichess {
-  //     width: 50%;
-  //     padding-bottom: 50%;
-
-  //     iframe {
-  //       overflow: hidden;
-  //     }
-  //   }
-
-  //   .jitsi {
-  //     width: 30%;
-  //     height: 300px;
-  //     padding: 2px;
-  //   }
-  // }
-
-  // @media only screen and (max-width:800px) {
-  //   .lichess {
-  //     width: 81%;
-  //     padding-bottom: 83%;
-  //   }
-
-  //   .jitsi {
-  //     width: 0%;
-  //     height: 0;
-  //     padding: 0;
-  //   }
-  // }
-
-  // @media only screen and (max-width: 650px) {
-  //   .lichess {
-  //     width: 100%;
-  //     padding-bottom: 100%;
-  //   }
-  // }
-}
\ No newline at end of file
diff --git a/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content.scss b/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content.scss
deleted file mode 100644
index e49dd1b5..00000000
--- a/react-ystemandchess/src/features/lessons/piece-lessons/play-lesson/lesson-content.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-.cont {
-  width: 100%;
-  .lichess {
-    position: relative;
-    width: 160%;
-    padding-bottom: 160%;
-
-    iframe {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: -80px;
-      right: 0;
-      width: 100%;
-      height:100%;
-    }
-  }
-  .jitsi {
-    width: 30%;
-    height: 300px;
-    padding: 2px;
-  }
-
-  // @media only screen and (max-width: 1550px) {
-  //   .lichess {
-  //     width:70%;
-  //     padding-bottom: 70%;
-  //   }
-  // }
-
-  // @media only screen and (max-width:1000px) {
-  //   .lichess {
-  //     width: 50%;
-  //     padding-bottom: 50%;
-
-  //     iframe {
-  //       overflow: hidden;
-  //     }
-  //   }
-
-  //   .jitsi {
-  //     width: 30%;
-  //     height: 300px;
-  //     padding: 2px;
-  //   }
-  // }
-
-  // @media only screen and (max-width:800px) {
-  //   .lichess {
-  //     width: 81%;
-  //     padding-bottom: 83%;
-  //   }
-
-  //   .jitsi {
-  //     width: 0%;
-  //     height: 0;
-  //     padding: 0;
-  //   }
-  // }
-
-  // @media only screen and (max-width: 650px) {
-  //   .lichess {
-  //     width: 100%;
-  //     padding-bottom: 100%;
-  //   }
-  // }
-}
\ No newline at end of file
diff --git a/react-ystemandchess/src/features/puzzles/puzzles-page/Puzzles.tsx b/react-ystemandchess/src/features/puzzles/puzzles-page/Puzzles.tsx
index 100fbf4f..e3ff8e1c 100644
--- a/react-ystemandchess/src/features/puzzles/puzzles-page/Puzzles.tsx
+++ b/react-ystemandchess/src/features/puzzles/puzzles-page/Puzzles.tsx
@@ -306,7 +306,6 @@ const Puzzles: React.FC<PuzzlesProps> = ({
   };
 
   const handleInvalidMove = () => {
-    console.log("Invalid move attempted");
   };
 
   // ============================================================================

From 1c611fa028402d9334cbbdc1a38121ee984129ae Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Thu, 25 Dec 2025 18:33:30 +0100
Subject: [PATCH 04/11] feat: add "Play vs Computer" feature for logged-in
 students

---
 .../src/components/ChessBoard/ChessBoard.tsx  |  11 +-
 .../src/core/types/chessboardjsx.d.ts         |   2 +-
 .../features/engine/PlayComputer.module.scss  | 180 ++++++
 .../src/features/engine/PlayComputer.test.tsx | 611 ++++++++++++++++++
 .../src/features/engine/PlayComputer.tsx      | 404 ++++++++++++
 .../student-profile/NewStudentProfile.tsx     |  31 +-
 react-ystemandchess/src/setupTests.ts         |  10 +-
 7 files changed, 1231 insertions(+), 18 deletions(-)
 create mode 100644 react-ystemandchess/src/features/engine/PlayComputer.module.scss
 create mode 100644 react-ystemandchess/src/features/engine/PlayComputer.test.tsx
 create mode 100644 react-ystemandchess/src/features/engine/PlayComputer.tsx

diff --git a/react-ystemandchess/src/components/ChessBoard/ChessBoard.tsx b/react-ystemandchess/src/components/ChessBoard/ChessBoard.tsx
index 09c16f0f..dfcc695a 100644
--- a/react-ystemandchess/src/components/ChessBoard/ChessBoard.tsx
+++ b/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();
diff --git a/react-ystemandchess/src/core/types/chessboardjsx.d.ts b/react-ystemandchess/src/core/types/chessboardjsx.d.ts
index 19e7fd8f..4160f245 100644
--- a/react-ystemandchess/src/core/types/chessboardjsx.d.ts
+++ b/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;
diff --git a/react-ystemandchess/src/features/engine/PlayComputer.module.scss b/react-ystemandchess/src/features/engine/PlayComputer.module.scss
new file mode 100644
index 00000000..8209e09f
--- /dev/null
+++ b/react-ystemandchess/src/features/engine/PlayComputer.module.scss
@@ -0,0 +1,180 @@
+.playComputerContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  min-height: 100vh;
+  background: #f5f5f5;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 2rem;
+  
+  h1 {
+    font-size: 2.5rem;
+    color: #333;
+    margin-bottom: 1rem;
+  }
+}
+
+.statusBar {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 1rem;
+  
+  .thinking {
+    color: #ff9800;
+    font-weight: 600;
+    font-size: 1.1rem;
+  }
+  
+  .gameStatus {
+    color: #4caf50;
+    font-weight: 600;
+    font-size: 1.1rem;
+  }
+}
+
+.settingsPanel {
+  background: white;
+  padding: 3rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 500px;
+  width: 100%;
+  
+  h2 {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: #333;
+  }
+}
+
+.setting {
+  margin-bottom: 2rem;
+  
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    color: #555;
+  }
+}
+
+.colorButtons,
+.difficultyButtons {
+  display: flex;
+  gap: 1rem;
+  
+  button {
+    flex: 1;
+    padding: 1rem;
+    border: 2px solid #ddd;
+    background: white;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.2s;
+    
+    &:hover {
+      border-color: #7fcc26;
+      transform: translateY(-2px);
+    }
+    
+    &.active {
+      background: #7fcc26;
+      color: white;
+      border-color: #7fcc26;
+    }
+  }
+}
+
+.difficultyButtons {
+  flex-wrap: wrap;
+  
+  button {
+    min-width: 100px;
+  }
+}
+
+.startButton {
+  width: 100%;
+  padding: 1.2rem;
+  background: #7fcc26;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 1.2rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+  
+  &:hover:not(:disabled) {
+    background: #6fb31e;
+  }
+  
+  &:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+.controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  
+  button {
+    padding: 0.8rem 1.5rem;
+    background: white;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 500;
+    transition: all 0.2s;
+    
+    &:hover:not(:disabled) {
+      border-color: #7fcc26;
+      background: #f0f9e8;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.chessboardContainer {
+  margin-bottom: 2rem;
+}
+
+.moveHistory {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 600px;
+  width: 100%;
+  
+  h3 {
+    margin-bottom: 1rem;
+    color: #333;
+  }
+  
+  .moves {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    
+    .move {
+      padding: 0.4rem 0.8rem;
+      background: #f5f5f5;
+      border-radius: 4px;
+      font-size: 0.9rem;
+    }
+  }
+}
diff --git a/react-ystemandchess/src/features/engine/PlayComputer.test.tsx b/react-ystemandchess/src/features/engine/PlayComputer.test.tsx
new file mode 100644
index 00000000..07648480
--- /dev/null
+++ b/react-ystemandchess/src/features/engine/PlayComputer.test.tsx
@@ -0,0 +1,611 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PlayComputer from './PlayComputer';
+import { io } from 'socket.io-client';
+
+// Mock socket.io-client
+jest.mock('socket.io-client');
+
+// Mock ChessBoard component
+jest.mock('../../components/ChessBoard/ChessBoard', () => {
+  const React = require('react');
+  return {
+    __esModule: true,
+    default: React.forwardRef((props: any, ref: any) => {
+      React.useImperativeHandle(ref, () => ({
+        setPosition: jest.fn(),
+        highlightMove: jest.fn(),
+        reset: jest.fn(),
+        flip: jest.fn(),
+      }));
+      return (
+        <div data-testid="chessboard" data-orientation={props.orientation}>
+          <button
+            data-testid="make-move-button"
+            onClick={() => props.onMove && props.onMove({ from: 'e2', to: 'e4' })}
+          >
+            Make Move
+          </button>
+        </div>
+      );
+    }),
+  };
+});
+
+// Mock environment
+jest.mock('../../environments/environment', () => ({
+  environment: {
+    urls: {
+      stockfishServerURL: 'http://localhost:8080',
+    },
+  },
+}));
+
+describe('PlayComputer', () => {
+  let mockSocket: any;
+  let mockOn: jest.Mock;
+  let mockEmit: jest.Mock;
+  let mockDisconnect: jest.Mock;
+
+  beforeEach(() => {
+    // Clear all mocks
+    jest.clearAllMocks();
+
+    // Create mock socket methods
+    mockOn = jest.fn();
+    mockEmit = jest.fn();
+    mockDisconnect = jest.fn();
+
+    // Create mock socket object
+    mockSocket = {
+      on: mockOn,
+      emit: mockEmit,
+      disconnect: mockDisconnect,
+    };
+
+    // Mock io to return our mock socket
+    (io as jest.Mock).mockReturnValue(mockSocket);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Initialization', () => {
+    it('should render the component', () => {
+      render(<PlayComputer />);
+      expect(screen.getByText('Play vs Computer')).toBeInTheDocument();
+    });
+
+    it('should show settings panel on initial render', () => {
+      render(<PlayComputer />);
+      expect(screen.getByText('Game Settings')).toBeInTheDocument();
+      expect(screen.getByText('Play as:')).toBeInTheDocument();
+      expect(screen.getByText('Difficulty:')).toBeInTheDocument();
+    });
+
+    it('should connect to Stockfish server on mount', () => {
+      render(<PlayComputer />);
+      expect(io).toHaveBeenCalledWith('http://localhost:8080', {
+        transports: ['websocket'],
+        reconnection: true,
+      });
+    });
+
+    it('should register socket event listeners', () => {
+      render(<PlayComputer />);
+
+      const registeredEvents = mockOn.mock.calls.map(call => call[0]);
+      expect(registeredEvents).toContain('connect');
+      expect(registeredEvents).toContain('disconnect');
+      expect(registeredEvents).toContain('session-started');
+      expect(registeredEvents).toContain('session-error');
+      expect(registeredEvents).toContain('evaluation-complete');
+      expect(registeredEvents).toContain('evaluation-error');
+    });
+  });
+
+  describe('Socket Connection', () => {
+    it('should update connected state when socket connects', () => {
+      render(<PlayComputer />);
+
+      // Find and call the 'connect' event handler
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      // Start button should be enabled
+      const startButton = screen.getByText('Start Game');
+      expect(startButton).not.toBeDisabled();
+    });
+
+    it('should show connecting message when not connected', () => {
+      render(<PlayComputer />);
+
+      // Before connect event, button should show "Connecting..."
+      expect(screen.getByText('Connecting...')).toBeInTheDocument();
+    });
+
+    it('should handle disconnect event', () => {
+      render(<PlayComputer />);
+
+      // Connect first
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      // Then disconnect
+      const disconnectHandler = mockOn.mock.calls.find(call => call[0] === 'disconnect')?.[1];
+      act(() => {
+        disconnectHandler();
+      });
+
+      // Should show connecting again
+      expect(screen.getByText('Connecting...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Game Settings', () => {
+    it('should allow selecting white as player color', () => {
+      render(<PlayComputer />);
+
+      const whiteButton = screen.getByText('♔ White');
+      fireEvent.click(whiteButton);
+
+      expect(whiteButton.className).toContain('active');
+    });
+
+    it('should allow selecting black as player color', () => {
+      render(<PlayComputer />);
+
+      const blackButton = screen.getByText('♚ Black');
+      fireEvent.click(blackButton);
+
+      expect(blackButton.className).toContain('active');
+    });
+
+    it('should allow selecting difficulty levels', () => {
+      render(<PlayComputer />);
+
+      const easyButton = screen.getByText('Easy');
+      const mediumButton = screen.getByText('Medium');
+      const hardButton = screen.getByText('Hard');
+      const expertButton = screen.getByText('Expert');
+      const masterButton = screen.getByText('Master');
+
+      fireEvent.click(mediumButton);
+      expect(mediumButton.className).toContain('active');
+
+      fireEvent.click(hardButton);
+      expect(hardButton.className).toContain('active');
+    });
+
+    it('should start session when start button is clicked', () => {
+      render(<PlayComputer />);
+
+      // Connect socket first
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      const startButton = screen.getByText('Start Game');
+      fireEvent.click(startButton);
+
+      expect(mockEmit).toHaveBeenCalledWith('start-session', expect.objectContaining({
+        sessionType: 'player-vs-computer',
+        fen: expect.any(String),
+      }));
+    });
+
+    it('should hide settings panel after starting game', async () => {
+      render(<PlayComputer />);
+
+      // Connect
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      // Start session
+      const startButton = screen.getByText('Start Game');
+      fireEvent.click(startButton);
+
+      // Trigger session-started event
+      const sessionStartedHandler = mockOn.mock.calls.find(call => call[0] === 'session-started')?.[1];
+      act(() => {
+        sessionStartedHandler({ success: true, id: 'test-id' });
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('Game Settings')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Session Management', () => {
+    it('should handle session-started event', () => {
+      render(<PlayComputer />);
+
+      const sessionStartedHandler = mockOn.mock.calls.find(call => call[0] === 'session-started')?.[1];
+
+      act(() => {
+        sessionStartedHandler({ success: true, id: 'test-session-id' });
+      });
+
+      // Session started, no error should be shown
+      expect(screen.queryByText(/Failed to start session/)).not.toBeInTheDocument();
+    });
+
+    it('should handle session-error event', () => {
+      // Mock window.alert
+      const alertMock = jest.spyOn(window, 'alert').mockImplementation();
+
+      render(<PlayComputer />);
+
+      const sessionErrorHandler = mockOn.mock.calls.find(call => call[0] === 'session-error')?.[1];
+
+      act(() => {
+        sessionErrorHandler({ error: 'Session creation failed' });
+      });
+
+      expect(alertMock).toHaveBeenCalledWith('Failed to start session: Session creation failed');
+
+      alertMock.mockRestore();
+    });
+  });
+
+  describe('Game Play', () => {
+    const setupGame = () => {
+      const { container } = render(<PlayComputer />);
+
+      // Connect
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      // Start session as white
+      const startButton = screen.getByText('Start Game');
+      fireEvent.click(startButton);
+
+      // Trigger session-started
+      const sessionStartedHandler = mockOn.mock.calls.find(call => call[0] === 'session-started')?.[1];
+      act(() => {
+        sessionStartedHandler({ success: true, id: 'test-id' });
+      });
+
+      return container;
+    };
+
+    it('should render chessboard after game starts', async () => {
+      setupGame();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('chessboard')).toBeInTheDocument();
+      });
+    });
+
+    it('should render control buttons after game starts', async () => {
+      setupGame();
+
+      await waitFor(() => {
+        expect(screen.getByText('↶ Undo')).toBeInTheDocument();
+        expect(screen.getByText('⟲ Reset')).toBeInTheDocument();
+        expect(screen.getByText('New Game')).toBeInTheDocument();
+        expect(screen.getByText('⇅ Flip Board')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle player move and request computer move', async () => {
+      setupGame();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('make-move-button')).toBeInTheDocument();
+      });
+
+      const moveButton = screen.getByTestId('make-move-button');
+
+      act(() => {
+        fireEvent.click(moveButton);
+      });
+
+      // Should emit update-fen
+      expect(mockEmit).toHaveBeenCalledWith('update-fen', expect.objectContaining({
+        fen: expect.any(String),
+      }));
+
+      // Should request evaluation
+      expect(mockEmit).toHaveBeenCalledWith('evaluate-fen', expect.objectContaining({
+        fen: expect.any(String),
+        move: '',
+        level: expect.any(Number),
+      }));
+    });
+
+    it('should show thinking indicator when computer is thinking', async () => {
+      setupGame();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('make-move-button')).toBeInTheDocument();
+      });
+
+      // Make a move to trigger computer thinking
+      const moveButton = screen.getByTestId('make-move-button');
+      act(() => {
+        fireEvent.click(moveButton);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('Computer is thinking...')).toBeInTheDocument();
+      });
+    });
+
+    it('should handle computer move from evaluation-complete event', async () => {
+      setupGame();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('make-move-button')).toBeInTheDocument();
+      });
+
+      // Trigger computer move
+      const evaluationCompleteHandler = mockOn.mock.calls.find(
+        call => call[0] === 'evaluation-complete'
+      )?.[1];
+
+      act(() => {
+        evaluationCompleteHandler({
+          mode: 'move',
+          move: 'e7e5',
+          moveDetails: { from: 'e7', to: 'e5' },
+          newFEN: 'rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq e6 0 2',
+        });
+      });
+
+      // Should hide thinking indicator
+      await waitFor(() => {
+        expect(screen.queryByText('Computer is thinking...')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should handle evaluation error', () => {
+      const alertMock = jest.spyOn(window, 'alert').mockImplementation();
+
+      setupGame();
+
+      const evaluationErrorHandler = mockOn.mock.calls.find(
+        call => call[0] === 'evaluation-error'
+      )?.[1];
+
+      act(() => {
+        evaluationErrorHandler({ error: 'Engine timeout' });
+      });
+
+      expect(alertMock).toHaveBeenCalledWith('Engine error: Engine timeout');
+
+      alertMock.mockRestore();
+    });
+  });
+
+  describe('Game Controls', () => {
+    const setupGameWithMoves = async () => {
+      const container = render(<PlayComputer />);
+
+      // Connect
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      // Start session
+      const startButton = screen.getByText('Start Game');
+      fireEvent.click(startButton);
+
+      const sessionStartedHandler = mockOn.mock.calls.find(call => call[0] === 'session-started')?.[1];
+      act(() => {
+        sessionStartedHandler({ success: true, id: 'test-id' });
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('make-move-button')).toBeInTheDocument();
+      });
+
+      // Make a player move
+      const moveButton = screen.getByTestId('make-move-button');
+      act(() => {
+        fireEvent.click(moveButton);
+      });
+
+      // Simulate computer response
+      const evaluationCompleteHandler = mockOn.mock.calls.find(
+        call => call[0] === 'evaluation-complete'
+      )?.[1];
+      act(() => {
+        evaluationCompleteHandler({
+          mode: 'move',
+          move: 'e7e5',
+          moveDetails: { from: 'e7', to: 'e5' },
+          newFEN: 'rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq e6 0 2',
+        });
+      });
+
+      return container;
+    };
+
+    it('should reset game when reset button is clicked', async () => {
+      await setupGameWithMoves();
+
+      const resetButton = screen.getByText('⟲ Reset');
+
+      act(() => {
+        fireEvent.click(resetButton);
+      });
+
+      expect(mockEmit).toHaveBeenCalledWith('update-fen', expect.objectContaining({
+        fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',
+      }));
+    });
+
+    it('should undo both player and computer moves', async () => {
+      await setupGameWithMoves();
+
+      const undoButton = screen.getByText('↶ Undo');
+      expect(undoButton).not.toBeDisabled();
+
+      act(() => {
+        fireEvent.click(undoButton);
+      });
+
+      // Should emit update-fen with position after undoing 2 moves
+      expect(mockEmit).toHaveBeenCalledWith('update-fen', expect.any(Object));
+    });
+
+    it('should disable undo button when no moves have been made', async () => {
+      const container = render(<PlayComputer />);
+
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      const startButton = screen.getByText('Start Game');
+      fireEvent.click(startButton);
+
+      const sessionStartedHandler = mockOn.mock.calls.find(call => call[0] === 'session-started')?.[1];
+      act(() => {
+        sessionStartedHandler({ success: true, id: 'test-id' });
+      });
+
+      await waitFor(() => {
+        const undoButton = screen.getByText('↶ Undo');
+        expect(undoButton).toBeDisabled();
+      });
+    });
+
+    it('should start new game when New Game button is clicked', async () => {
+      await setupGameWithMoves();
+
+      const newGameButton = screen.getByText('New Game');
+
+      act(() => {
+        fireEvent.click(newGameButton);
+      });
+
+      // Should show settings panel again
+      await waitFor(() => {
+        expect(screen.getByText('Game Settings')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Game Status Detection', () => {
+    it('should detect checkmate', async () => {
+      // Mock isCheckmate to return true
+      const chess = require('chess.js').Chess;
+      jest.spyOn(chess.prototype, 'isCheckmate').mockReturnValue(true);
+
+      render(<PlayComputer />);
+
+      const connectHandler = mockOn.mock.calls.find(c => c[0] === 'connect')?.[1];
+      act(() => connectHandler());
+
+      fireEvent.click(screen.getByText('Start Game'));
+
+      const sessionStartedHandler = mockOn.mock.calls.find(c => c[0] === 'session-started')?.[1];
+      act(() => sessionStartedHandler({ success: true, id: 'test-id' }));
+
+      const evaluationCompleteHandler = mockOn.mock.calls.find(
+        c => c[0] === 'evaluation-complete'
+      )?.[1];
+
+      act(() => evaluationCompleteHandler({
+        mode: 'move',
+        move: 'e2e4',
+        moveDetails: { from: 'e2', to: 'e4' },
+        newFEN: 'any-fen',
+      }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/Checkmate/)).toBeInTheDocument();
+      });
+
+      chess.prototype.isCheckmate.mockRestore();
+    });
+  });
+
+  describe('Component Cleanup', () => {
+    it('should disconnect socket on unmount', () => {
+      const { unmount } = render(<PlayComputer />);
+
+      unmount();
+
+      expect(mockDisconnect).toHaveBeenCalled();
+    });
+  });
+
+  describe('Black Player Auto-Start', () => {
+    it('should request computer move immediately when player is black', () => {
+      render(<PlayComputer />);
+
+      // Connect
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      // Select black before starting game
+      const blackButton = screen.getByText('♚ Black');
+      fireEvent.click(blackButton);
+
+      // Start game
+      const startButton = screen.getByText('Start Game');
+      fireEvent.click(startButton);
+
+      // Find the session-started handler
+      const sessionStartedHandler = mockOn.mock.calls.find(call => call[0] === 'session-started')?.[1];
+      
+      // Clear emit calls before triggering session-started
+      mockEmit.mockClear();
+
+      // Trigger session-started event
+      act(() => {
+        sessionStartedHandler({ success: true, id: 'test-id' });
+      });
+
+      // Now evaluate-fen should have been called
+      expect(mockEmit).toHaveBeenCalledWith(
+        'evaluate-fen',
+        expect.objectContaining({
+          fen: expect.any(String),
+          move: '',
+          level: expect.any(Number),
+        })
+      );
+    });
+  });
+
+  describe('Move History', () => {
+    it('should display move history section', async () => {
+      const container = render(<PlayComputer />);
+
+      const connectHandler = mockOn.mock.calls.find(call => call[0] === 'connect')?.[1];
+      act(() => {
+        connectHandler();
+      });
+
+      const startButton = screen.getByText('Start Game');
+      fireEvent.click(startButton);
+
+      const sessionStartedHandler = mockOn.mock.calls.find(call => call[0] === 'session-started')?.[1];
+      act(() => {
+        sessionStartedHandler({ success: true, id: 'test-id' });
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('Move History')).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/react-ystemandchess/src/features/engine/PlayComputer.tsx b/react-ystemandchess/src/features/engine/PlayComputer.tsx
new file mode 100644
index 00000000..7e23f3bc
--- /dev/null
+++ b/react-ystemandchess/src/features/engine/PlayComputer.tsx
@@ -0,0 +1,404 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { Chess } from 'chess.js';
+import { io, Socket } from 'socket.io-client';
+import { Move } from '../../core/types/chess';
+import ChessBoard, { ChessBoardRef } from '../../components/ChessBoard/ChessBoard';
+import { environment } from "../../environments/environment";
+import styles from './PlayComputer.module.scss';
+
+type Difficulty = 1 | 5 | 10 | 15 | 20;
+
+const PlayComputer: React.FC = () => {
+  const chessBoardRef = useRef<ChessBoardRef>(null);
+  const socketRef = useRef<Socket | null>(null);
+  const gameRef = useRef<Chess>(new Chess());
+  const playerColorRef = useRef<'white' | 'black'>('white');
+  const sessionStartedRef = useRef<boolean>(false);
+  const difficultyRef = useRef<Difficulty>(10);
+  
+  const [fen, setFen] = useState<string>("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1");
+  const [playerColor, setPlayerColor] = useState<'white' | 'black'>('white');
+  const [difficulty, setDifficulty] = useState<Difficulty>(10);
+  const [isThinking, setIsThinking] = useState(false);
+  const [connected, setConnected] = useState(false);
+  const [sessionStarted, setSessionStarted] = useState(false);
+  const [moveHistory, setMoveHistory] = useState<string[]>([]);
+  const [gameStatus, setGameStatus] = useState<string>("");
+  const [highlightSquares, setHighlightSquares] = useState<string[]>([]);
+  const [showSettings, setShowSettings] = useState(true);
+
+  // Update refs whenever state changes
+  useEffect(() => {
+    playerColorRef.current = playerColor;
+  }, [playerColor]);
+
+  useEffect(() => {
+    sessionStartedRef.current = sessionStarted;
+  }, [sessionStarted]);
+
+  useEffect(() => {
+    difficultyRef.current = difficulty;
+  }, [difficulty]);
+
+  // Request computer move from Stockfish
+  const requestComputerMove = useCallback((currentFen: string) => {
+    if (!socketRef.current || !sessionStartedRef.current) return;
+
+    setIsThinking(true);
+    
+    socketRef.current.emit('evaluate-fen', {
+      fen: currentFen,
+      move: '',
+      level: difficultyRef.current,
+    });
+  }, []);
+
+  // Initialize socket connection
+  useEffect(() => {
+    const socket = io(environment.urls.stockfishServerURL || 'http://localhost:8080', {
+      transports: ['websocket'],
+      reconnection: true,
+    });
+
+    socketRef.current = socket;
+
+    socket.on('connect', () => {
+      setConnected(true);
+    });
+
+    socket.on('disconnect', () => {
+      setConnected(false);
+      setSessionStarted(false);
+      sessionStartedRef.current = false;
+    });
+
+    socket.on('session-started', ({ success }) => {
+      setSessionStarted(true);
+      sessionStartedRef.current = true;
+
+      if (success && playerColorRef.current === 'black') {
+        requestComputerMove(gameRef.current.fen());
+      }
+    });
+
+    socket.on('session-error', ({ error }) => {
+      console.error('Session error:', error);
+      alert('Failed to start session: ' + error);
+    });
+
+    socket.on('evaluation-complete', ({ mode, move, moveDetails, newFEN }) => {
+      if (mode === 'move' && move) {
+        console.log('Computer move:', move);
+        
+        // Apply the move to our local game
+        try {
+          const moveResult = gameRef.current.move(move);
+          
+          if (moveResult) {
+            const updatedFen = gameRef.current.fen();
+            setFen(updatedFen);
+            setHighlightSquares([moveResult.from, moveResult.to]);
+            setMoveHistory(prev => [...prev, `${moveResult.from}-${moveResult.to}`]);
+            
+            // Update chessboard
+            if (chessBoardRef.current) {
+              chessBoardRef.current.setPosition(updatedFen);
+              chessBoardRef.current.highlightMove(moveResult.from, moveResult.to);
+            }
+            
+            checkGameStatus();
+          }
+        } catch (err) {
+          console.error('Failed to apply computer move:', err);
+        }
+        
+        setIsThinking(false);
+      }
+    });
+
+    socket.on('evaluation-error', ({ error }) => {
+      console.error('Evaluation error:', error);
+      setIsThinking(false);
+      alert('Engine error: ' + error);
+    });
+
+    return () => {
+      socket.disconnect();
+    };
+  }, [requestComputerMove]);
+
+  // Start a new session when settings are confirmed
+  const startSession = useCallback(() => {
+    if (!connected || !socketRef.current) {
+      alert('Not connected to server');
+      return;
+    }
+
+    const initialFen = gameRef.current.fen();
+    
+    socketRef.current.emit('start-session', {
+      sessionType: 'player-vs-computer',
+      fen: initialFen,
+    });
+
+    setShowSettings(false);
+  }, [connected]);
+
+  // Handle player move
+  const handleMove = useCallback((move: Move) => {
+    try {
+      const moveResult = gameRef.current.move({
+        from: move.from,
+        to: move.to,
+        promotion: move.promotion,
+      });
+
+      if (!moveResult) {
+        console.error('Invalid move');
+        return;
+      }
+
+      const newFen = gameRef.current.fen();
+      setFen(newFen);
+      setHighlightSquares([move.from, move.to]);
+      setMoveHistory(prev => [...prev, `${move.from}-${move.to}`]);
+
+      // Check if game ended
+      if (checkGameStatus()) {
+        return;
+      }
+
+      // Update server FEN and request computer move
+      if (socketRef.current) {
+        socketRef.current.emit('update-fen', { fen: newFen });
+        requestComputerMove(newFen);
+      }
+
+    } catch (error) {
+      console.error('Error handling move:', error);
+    }
+  }, [requestComputerMove]);
+
+  // Check game status (checkmate, stalemate, draw)
+  const checkGameStatus = useCallback((): boolean => {
+    const game = gameRef.current;
+
+    if (game.isCheckmate()) {
+      const winner = game.turn() === 'w' ? 'Black' : 'White';
+      setGameStatus(`Checkmate! ${winner} wins!`);
+      return true;
+    }
+
+    if (game.isDraw()) {
+      setGameStatus('Draw!');
+      return true;
+    }
+
+    if (game.isStalemate()) {
+      setGameStatus('Stalemate! Draw!');
+      return true;
+    }
+
+    if (game.isThreefoldRepetition()) {
+      setGameStatus('Draw by threefold repetition!');
+      return true;
+    }
+
+    if (game.isInsufficientMaterial()) {
+      setGameStatus('Draw by insufficient material!');
+      return true;
+    }
+
+    if (game.isCheck()) {
+      setGameStatus('Check!');
+      setTimeout(() => setGameStatus(''), 2000);
+    } else {
+      setGameStatus('');
+    }
+
+    return false;
+  }, []);
+
+  // Reset game
+  const resetGame = useCallback(() => {
+    gameRef.current.reset();
+    const startFen = gameRef.current.fen();
+    
+    setFen(startFen);
+    setMoveHistory([]);
+    setHighlightSquares([]);
+    setGameStatus('');
+    setIsThinking(false);
+
+    if (chessBoardRef.current) {
+      chessBoardRef.current.reset();
+    }
+
+    // Update server
+    if (socketRef.current && sessionStartedRef.current) {
+      socketRef.current.emit('update-fen', { fen: startFen });
+      
+      // If player is black, request computer move
+      if (playerColorRef.current === 'black') {
+        setTimeout(() => requestComputerMove(startFen), 500);
+      }
+    }
+  }, [requestComputerMove]);
+
+  // Handle new game with settings
+  const newGame = useCallback(() => {
+    resetGame();
+    setShowSettings(true);
+    setSessionStarted(false);
+    sessionStartedRef.current = false;
+  }, [resetGame]);
+
+  // Undo move
+  const undoMove = useCallback(() => {
+    if (moveHistory.length < 2) return; // Need at least 2 moves (player + computer)
+
+    // Undo computer move
+    gameRef.current.undo();
+    // Undo player move
+    gameRef.current.undo();
+
+    const newFen = gameRef.current.fen();
+    setFen(newFen);
+    setMoveHistory(prev => prev.slice(0, -2));
+    setHighlightSquares([]);
+    setGameStatus('');
+
+    if (chessBoardRef.current) {
+      chessBoardRef.current.setPosition(newFen);
+    }
+
+    // Update server
+    if (socketRef.current) {
+      socketRef.current.emit('update-fen', { fen: newFen });
+    }
+  }, [moveHistory.length]);
+
+  return (
+    <div className={styles.playComputerContainer}>
+      <div className={styles.header}>
+        <h1>Play vs Computer</h1>
+        {!showSettings && (
+          <div className={styles.statusBar}>
+            {isThinking && <span className={styles.thinking}>Computer is thinking...</span>}
+            {gameStatus && <span className={styles.gameStatus}>{gameStatus}</span>}
+          </div>
+        )}
+      </div>
+
+      {showSettings ? (
+        <div className={styles.settingsPanel}>
+          <h2>Game Settings</h2>
+          
+          <div className={styles.setting}>
+            <label>Play as:</label>
+            <div className={styles.colorButtons}>
+              <button
+                className={playerColor === 'white' ? styles.active : ''}
+                onClick={() => setPlayerColor('white')}
+              >
+                ♔ White
+              </button>
+              <button
+                className={playerColor === 'black' ? styles.active : ''}
+                onClick={() => setPlayerColor('black')}
+              >
+                ♚ Black
+              </button>
+            </div>
+          </div>
+
+          <div className={styles.setting}>
+            <label>Difficulty:</label>
+            <div className={styles.difficultyButtons}>
+              <button
+                className={difficulty === 1 ? styles.active : ''}
+                onClick={() => setDifficulty(1)}
+              >
+                Easy
+              </button>
+              <button
+                className={difficulty === 5 ? styles.active : ''}
+                onClick={() => setDifficulty(5)}
+              >
+                Medium
+              </button>
+              <button
+                className={difficulty === 10 ? styles.active : ''}
+                onClick={() => setDifficulty(10)}
+              >
+                Hard
+              </button>
+              <button
+                className={difficulty === 15 ? styles.active : ''}
+                onClick={() => setDifficulty(15)}
+              >
+                Expert
+              </button>
+              <button
+                className={difficulty === 20 ? styles.active : ''}
+                onClick={() => setDifficulty(20)}
+              >
+                Master
+              </button>
+            </div>
+          </div>
+
+          <button
+            className={styles.startButton}
+            onClick={startSession}
+            disabled={!connected}
+          >
+            {connected ? 'Start Game' : 'Connecting...'}
+          </button>
+        </div>
+      ) : (
+        <>
+          <div className={styles.controls}>
+            <button onClick={undoMove} disabled={moveHistory.length < 2 || isThinking}>
+              ↶ Undo
+            </button>
+            <button onClick={resetGame} disabled={isThinking}>
+              ⟲ Reset
+            </button>
+            <button onClick={newGame}>
+              New Game
+            </button>
+            <button onClick={() => chessBoardRef.current?.flip()}>
+              ⇅ Flip Board
+            </button>
+          </div>
+
+          <div className={styles.chessboardContainer}>
+            <ChessBoard
+              mode="engine"
+              ref={chessBoardRef}
+              fen={fen}
+              orientation={playerColor}
+              highlightSquares={highlightSquares}
+              onMove={handleMove}
+              disabled={isThinking || gameStatus.includes('wins') || gameStatus === 'Draw!'}
+            />
+          </div>
+
+          <div className={styles.moveHistory}>
+            <h3>Move History</h3>
+            <div className={styles.moves}>
+              {moveHistory.map((move, idx) => (
+                <span key={idx} className={styles.move}>
+                  {Math.floor(idx / 2) + 1}. {move}
+                </span>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default PlayComputer;
diff --git a/react-ystemandchess/src/features/student/student-profile/NewStudentProfile.tsx b/react-ystemandchess/src/features/student/student-profile/NewStudentProfile.tsx
index 527e7f41..f14a9754 100644
--- a/react-ystemandchess/src/features/student/student-profile/NewStudentProfile.tsx
+++ b/react-ystemandchess/src/features/student/student-profile/NewStudentProfile.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo, lazy, Suspense } from "react";
+import { useState, useEffect, useRef, useMemo, lazy, Suspense } from "react";
 import "./NewStudentProfile.scss";
 import Images from "../../../assets/images/imageImporter";
 import { SetPermissionLevel } from '../../../globals';
@@ -8,6 +8,7 @@ import { useNavigate } from "react-router";
 import { useLocation } from "react-router";
 import StatsChart from "./StatsChart";
 import Puzzles from "../../puzzles/puzzles-page/Puzzles";
+import PlayComputer from "../../engine/PlayComputer";
 import StreakModal from "./Modals/StreakModal";
 import ActivitiesModal from "./Modals/ActivitiesModal";
 import BadgesModal from "./Modals/BadgesModal";
@@ -197,7 +198,7 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
       const data = await response.json();
 
       const newDataAxis = {} as { [key: string]: number[] };
-      for(let i = 0; i < displayEvents.length; i++) {
+      for (let i = 0; i < displayEvents.length; i++) {
         // get time spent for each event for plotting
         let event = displayEvents[i];
         let value = data[event];
@@ -342,7 +343,7 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
           </div>
         );
       case "playComputer":
-        return <div id="inventory-content-computer" className="inventory-content active-content"><h2>Play with Computer</h2><p>This is the content for the Play with Computer tab.</p></div>;
+        return <div id="inventory-content-computer" className="inventory-content active-content"> <PlayComputer/> </div>;
       case "recordings":
         return <div id="inventory-content-recordings" className="inventory-content active-content"><h2>Recordings</h2><p>This is the content for the Recordings tab.</p></div>;
       default:
@@ -430,24 +431,24 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
             <ul>
               {tabKeys.map((tab) => {
                 // Map tab names to icon names (prodev -> learning, mathLessons -> learning)
-                const iconName = tab === "prodev" 
-                  ? "learningIcon" 
-                  : tab === "mathLessons"
+                const iconName = tab === "prodev"
                   ? "learningIcon"
-                  : `${tab}Icon`;
-                
+                  : tab === "mathLessons"
+                    ? "learningIcon"
+                    : `${tab}Icon`;
+
                 // Create display name for the tab
                 const displayName =
                   tab === "chessLessons"
                     ? "Chess Lessons"
                     : tab === "mathLessons"
-                    ? "Math Lessons"
-                    : tab === "playComputer"
-                    ? "Play with Computer"
-                    : tab === "prodev"
-                    ? "Learning"
-                    : tab.charAt(0).toUpperCase() + tab.slice(1);
-                
+                      ? "Math Lessons"
+                      : tab === "playComputer"
+                        ? "Play with Computer"
+                        : tab === "prodev"
+                          ? "Learning"
+                          : tab.charAt(0).toUpperCase() + tab.slice(1);
+
                 return (
                   <div
                     key={tab}
diff --git a/react-ystemandchess/src/setupTests.ts b/react-ystemandchess/src/setupTests.ts
index 82302218..d9f059b1 100644
--- a/react-ystemandchess/src/setupTests.ts
+++ b/react-ystemandchess/src/setupTests.ts
@@ -3,4 +3,12 @@ import "@testing-library/jest-dom";
 const { TextEncoder, TextDecoder } = require('util');
 
 global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder;
\ No newline at end of file
+global.TextDecoder = TextDecoder;
+
+global.alert = jest.fn();
+
+global.console = {
+  ...console,
+  error: jest.fn(),
+  warn: jest.fn(),
+};

From 438e3c753f365e2d314ae2efe9493072b1db53b6 Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Thu, 25 Dec 2025 18:40:08 +0100
Subject: [PATCH 05/11] style: improve UI for "Play vs Computer" feature

---
 .../features/engine/PlayComputer.module.scss  | 193 ++++++++++++++----
 1 file changed, 148 insertions(+), 45 deletions(-)

diff --git a/react-ystemandchess/src/features/engine/PlayComputer.module.scss b/react-ystemandchess/src/features/engine/PlayComputer.module.scss
index 8209e09f..6556e9e5 100644
--- a/react-ystemandchess/src/features/engine/PlayComputer.module.scss
+++ b/react-ystemandchess/src/features/engine/PlayComputer.module.scss
@@ -4,17 +4,19 @@
   align-items: center;
   padding: 2rem;
   min-height: 100vh;
-  background: #f5f5f5;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
 }
 
 .header {
   text-align: center;
   margin-bottom: 2rem;
-  
+
   h1 {
     font-size: 2.5rem;
-    color: #333;
+    color: #ffffff;
     margin-bottom: 1rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    font-weight: 700;
   }
 }
 
@@ -23,43 +25,54 @@
   justify-content: center;
   gap: 2rem;
   margin-top: 1rem;
-  
+
   .thinking {
-    color: #ff9800;
+    color: #ffd54f;
     font-weight: 600;
     font-size: 1.1rem;
+    background: rgba(255, 152, 0, 0.15);
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    border: 2px solid #ffd54f;
   }
-  
+
   .gameStatus {
-    color: #4caf50;
+    color: #81c784;
     font-weight: 600;
     font-size: 1.1rem;
+    background: rgba(76, 175, 80, 0.15);
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    border: 2px solid #81c784;
   }
 }
 
 .settingsPanel {
   background: white;
   padding: 3rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   max-width: 500px;
   width: 100%;
-  
+
   h2 {
     text-align: center;
     margin-bottom: 2rem;
-    color: #333;
+    color: #1e3c72;
+    font-size: 1.8rem;
+    font-weight: 700;
   }
 }
 
 .setting {
   margin-bottom: 2rem;
-  
+
   label {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.8rem;
     font-weight: 600;
-    color: #555;
+    color: #333;
+    font-size: 1.1rem;
   }
 }
 
@@ -67,33 +80,39 @@
 .difficultyButtons {
   display: flex;
   gap: 1rem;
-  
+
   button {
     flex: 1;
     padding: 1rem;
-    border: 2px solid #ddd;
+    border: 2px solid #e0e0e0;
     background: white;
-    border-radius: 8px;
+    border-radius: 10px;
     cursor: pointer;
     font-size: 1rem;
-    transition: all 0.2s;
-    
+    font-weight: 600;
+    color: #555;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
     &:hover {
       border-color: #7fcc26;
       transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(127, 204, 38, 0.2);
+      color: #333;
     }
-    
+
     &.active {
-      background: #7fcc26;
+      background: linear-gradient(135deg, #7fcc26 0%, #6fb31e 100%);
       color: white;
       border-color: #7fcc26;
+      box-shadow: 0 4px 12px rgba(127, 204, 38, 0.3);
     }
   }
 }
 
 .difficultyButtons {
   flex-wrap: wrap;
-  
+
   button {
     min-width: 100px;
   }
@@ -102,22 +121,27 @@
 .startButton {
   width: 100%;
   padding: 1.2rem;
-  background: #7fcc26;
+  background: linear-gradient(135deg, #7fcc26 0%, #6fb31e 100%);
   color: white;
   border: none;
-  border-radius: 8px;
+  border-radius: 10px;
   font-size: 1.2rem;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
-  transition: background 0.2s;
-  
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(127, 204, 38, 0.3);
+  margin-top: 1rem;
+
   &:hover:not(:disabled) {
-    background: #6fb31e;
+    background: linear-gradient(135deg, #6fb31e 0%, #5fa015 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(127, 204, 38, 0.4);
   }
-  
+
   &:disabled {
     background: #ccc;
     cursor: not-allowed;
+    box-shadow: none;
   }
 }
 
@@ -125,56 +149,135 @@
   display: flex;
   gap: 1rem;
   margin-bottom: 2rem;
-  
+  flex-wrap: wrap;
+  justify-content: center;
+
   button {
     padding: 0.8rem 1.5rem;
     background: white;
-    border: 2px solid #ddd;
-    border-radius: 8px;
+    border: 2px solid #e0e0e0;
+    border-radius: 10px;
     cursor: pointer;
     font-size: 1rem;
-    font-weight: 500;
-    transition: all 0.2s;
-    
+    font-weight: 600;
+    color: #555;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
     &:hover:not(:disabled) {
       border-color: #7fcc26;
       background: #f0f9e8;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(127, 204, 38, 0.2);
+      color: #333;
     }
-    
+
     &:disabled {
       opacity: 0.5;
       cursor: not-allowed;
+      transform: none;
     }
   }
 }
 
 .chessboardContainer {
   margin-bottom: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .moveHistory {
   background: white;
   padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   max-width: 600px;
   width: 100%;
-  
+
   h3 {
     margin-bottom: 1rem;
-    color: #333;
+    color: #1e3c72;
+    font-size: 1.3rem;
+    font-weight: 700;
+    border-bottom: 2px solid #e0e0e0;
+    padding-bottom: 0.5rem;
   }
-  
+
   .moves {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
-    
-    .move {
-      padding: 0.4rem 0.8rem;
-      background: #f5f5f5;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0.5rem 0;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #7fcc26;
       border-radius: 4px;
+
+      &:hover {
+        background: #6fb31e;
+      }
+    }
+
+    .move {
+      padding: 0.5rem 1rem;
+      background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+      border-radius: 6px;
       font-size: 0.9rem;
+      font-weight: 500;
+      color: #333;
+      border: 1px solid #ddd;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+        border-color: #7fcc26;
+        transform: translateY(-1px);
+      }
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .playComputerContainer {
+    padding: 1rem;
+  }
+
+  .header h1 {
+    font-size: 2rem;
+  }
+
+  .settingsPanel {
+    padding: 2rem;
+  }
+
+  .colorButtons,
+  .difficultyButtons {
+    flex-direction: column;
+
+    button {
+      width: 100%;
+    }
+  }
+
+  .controls {
+    width: 100%;
+
+    button {
+      flex: 1;
+      min-width: 120px;
     }
   }
 }

From c0bc2315f36efd5de7987d0df6383a8e48eba90c Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Tue, 30 Dec 2025 15:52:49 +0100
Subject: [PATCH 06/11] fix: clean up environment URLs

---
 react-ystemandchess/src/environments/environment.js      | 7 +++----
 react-ystemandchess/src/environments/environment.prod.js | 5 ++---
 react-ystemandchess/src/features/engine/PlayComputer.tsx | 2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/react-ystemandchess/src/environments/environment.js b/react-ystemandchess/src/environments/environment.js
index 2a84a330..5ecd0c4f 100644
--- a/react-ystemandchess/src/environments/environment.js
+++ b/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',
 };
\ No newline at end of file
diff --git a/react-ystemandchess/src/environments/environment.prod.js b/react-ystemandchess/src/environments/environment.prod.js
index f86e300f..ed2ba30a 100644
--- a/react-ystemandchess/src/environments/environment.prod.js
+++ b/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/',
 	},
 };
\ No newline at end of file
diff --git a/react-ystemandchess/src/features/engine/PlayComputer.tsx b/react-ystemandchess/src/features/engine/PlayComputer.tsx
index 7e23f3bc..3dc66576 100644
--- a/react-ystemandchess/src/features/engine/PlayComputer.tsx
+++ b/react-ystemandchess/src/features/engine/PlayComputer.tsx
@@ -55,7 +55,7 @@ const PlayComputer: React.FC = () => {
 
   // Initialize socket connection
   useEffect(() => {
-    const socket = io(environment.urls.stockfishServerURL || 'http://localhost:8080', {
+    const socket = io(environment.urls.stockfishServerURL, {
       transports: ['websocket'],
       reconnection: true,
     });

From 951527c96de4837000403bb00dfc7a33b13a992b Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Tue, 30 Dec 2025 16:23:16 +0100
Subject: [PATCH 07/11] fix: allow new game without socket reconnection

---
 .../src/features/engine/PlayComputer.tsx               |  3 +++
 stockfishServer/src/managers/socket.js                 | 10 ++++++++++
 2 files changed, 13 insertions(+)

diff --git a/react-ystemandchess/src/features/engine/PlayComputer.tsx b/react-ystemandchess/src/features/engine/PlayComputer.tsx
index 3dc66576..9946950d 100644
--- a/react-ystemandchess/src/features/engine/PlayComputer.tsx
+++ b/react-ystemandchess/src/features/engine/PlayComputer.tsx
@@ -247,6 +247,9 @@ const PlayComputer: React.FC = () => {
 
   // Handle new game with settings
   const newGame = useCallback(() => {
+    if (socketRef.current && sessionStartedRef.current) {
+      socketRef.current.emit('end-session');
+    }
     resetGame();
     setShowSettings(true);
     setSessionStarted(false);
diff --git a/stockfishServer/src/managers/socket.js b/stockfishServer/src/managers/socket.js
index 4570b0ab..d7c325ce 100644
--- a/stockfishServer/src/managers/socket.js
+++ b/stockfishServer/src/managers/socket.js
@@ -35,6 +35,16 @@ const initializeSocket = (socket) => {
     }
   });
 
+  // End the current session without disconnecting the socket
+  socket.on("end-session", () => {
+    try {
+      stockfishManager.deleteSession(socket.id);
+      socket.emit("session-ended", { success: true });
+    } catch (err) {
+      console.error("Error ending session:", err);
+    }
+  });
+
   // Clean up session when client disconnects
   socket.on("disconnect", () => {
     stockfishManager.deleteSession(socket.id);

From ee9f1c1b9b7223f1389571367674accc1e8f7e9a Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Wed, 31 Dec 2025 04:10:05 +0100
Subject: [PATCH 08/11] style: fix layout for settings and move history

---
 .../features/engine/PlayComputer.module.scss  | 453 +++++++++++++++---
 .../src/features/engine/PlayComputer.tsx      | 112 +++--
 2 files changed, 453 insertions(+), 112 deletions(-)

diff --git a/react-ystemandchess/src/features/engine/PlayComputer.module.scss b/react-ystemandchess/src/features/engine/PlayComputer.module.scss
index 6556e9e5..8dc2537a 100644
--- a/react-ystemandchess/src/features/engine/PlayComputer.module.scss
+++ b/react-ystemandchess/src/features/engine/PlayComputer.module.scss
@@ -4,7 +4,7 @@
   align-items: center;
   padding: 2rem;
   min-height: 100vh;
-  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  background: #3a7cca;
 }
 
 .header {
@@ -20,140 +20,227 @@
   }
 }
 
-.statusBar {
-  display: flex;
-  justify-content: center;
-  gap: 2rem;
-  margin-top: 1rem;
-
-  .thinking {
-    color: #ffd54f;
-    font-weight: 600;
-    font-size: 1.1rem;
-    background: rgba(255, 152, 0, 0.15);
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    border: 2px solid #ffd54f;
-  }
-
-  .gameStatus {
-    color: #81c784;
-    font-weight: 600;
-    font-size: 1.1rem;
-    background: rgba(76, 175, 80, 0.15);
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    border: 2px solid #81c784;
-  }
-}
-
 .settingsPanel {
-  background: white;
-  padding: 3rem;
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  padding: 3.5rem 3rem;
+  border-radius: 20px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
+  max-width: 550px;
   width: 100%;
+  border: 3px solid rgba(58, 124, 202, 0.2);
+  box-sizing: border-box;
 
   h2 {
     text-align: center;
-    margin-bottom: 2rem;
-    color: #1e3c72;
-    font-size: 1.8rem;
+    margin-bottom: 2.5rem;
+    color: #3a7cca;
+    font-size: 2rem;
     font-weight: 700;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
+    position: relative;
+    padding-bottom: 1rem;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 4px;
+      background: linear-gradient(90deg, #7fcc26, #3a7cca);
+      border-radius: 2px;
+    }
   }
 }
 
 .setting {
-  margin-bottom: 2rem;
+  margin-bottom: 2.5rem;
 
   label {
     display: block;
-    margin-bottom: 0.8rem;
-    font-weight: 600;
-    color: #333;
-    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    color: #2c3e50;
+    font-size: 1.15rem;
+    letter-spacing: 0.3px;
+  }
+}
+
+.colorButtons {
+  display: grid;
+  width: 400px;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.2rem;
+
+  button {
+    padding: 1.4rem;
+    border: 3px solid #e5e7eb;
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: 700;
+    transition: all 0.3s ease;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+
+    &:first-child {
+      background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
+      color: #1f2937;
+      border-color: #d1d5db;
+
+      &:hover {
+        background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
+        transform: translateY(-3px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+      }
+
+      &.active {
+        background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%);
+        color: #111827;
+        border-color: #7fcc26;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.1);
+        transform: scale(1.02);
+      }
+    }
+
+    &:last-child {
+      background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+      color: #ffffff;
+      border-color: #374151;
+
+      &:hover {
+        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
+        transform: translateY(-3px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+      }
+
+      &.active {
+        background: linear-gradient(135deg, #111827 0%, #000000 100%);
+        color: #ffffff;
+        border-color: #7fcc26;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.3);
+        transform: scale(1.02);
+      }
+    }
   }
 }
 
-.colorButtons,
 .difficultyButtons {
-  display: flex;
-  gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1.5rem;
+  justify-items: center;
 
   button {
-    flex: 1;
-    padding: 1rem;
-    border: 2px solid #e0e0e0;
+    grid-column: span 2;
+    width: 100%;
+    padding: 1.1rem 1rem;
+    border: 3px solid #e5e7eb;
     background: white;
     border-radius: 10px;
     cursor: pointer;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #555;
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: #6b7280;
     transition: all 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    position: relative;
 
     &:hover {
       border-color: #7fcc26;
       transform: translateY(-2px);
-      box-shadow: 0 4px 8px rgba(127, 204, 38, 0.2);
-      color: #333;
+      box-shadow: 0 4px 12px rgba(127, 204, 38, 0.25);
+      color: #374151;
     }
 
     &.active {
-      background: linear-gradient(135deg, #7fcc26 0%, #6fb31e 100%);
+      background: linear-gradient(135deg, #3a7cca 0%, #2563eb 100%);
       color: white;
-      border-color: #7fcc26;
-      box-shadow: 0 4px 12px rgba(127, 204, 38, 0.3);
+      border-color: #2563eb;
+      box-shadow: 0 4px 16px rgba(58, 124, 202, 0.4);
+      transform: scale(1.05);
     }
-  }
-}
 
-.difficultyButtons {
-  flex-wrap: wrap;
+    &:nth-child(4) {
+      grid-column: 2 / 4; 
+      margin-left: 0;
+    }
 
-  button {
-    min-width: 100px;
+    &:nth-child(5) {
+      grid-column: 4 / 6;
+      margin-right: 0;
+    }
   }
 }
 
 .startButton {
   width: 100%;
-  padding: 1.2rem;
+  padding: 1.4rem;
   background: linear-gradient(135deg, #7fcc26 0%, #6fb31e 100%);
   color: white;
   border: none;
-  border-radius: 10px;
-  font-size: 1.2rem;
+  border-radius: 12px;
+  font-size: 1.3rem;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(127, 204, 38, 0.3);
-  margin-top: 1rem;
+  box-shadow: 0 6px 20px rgba(127, 204, 38, 0.35);
+  margin-top: 1.5rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+  }
 
   &:hover:not(:disabled) {
     background: linear-gradient(135deg, #6fb31e 0%, #5fa015 100%);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(127, 204, 38, 0.4);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 24px rgba(127, 204, 38, 0.45);
+
+    &::before {
+      width: 300px;
+      height: 300px;
+    }
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(-1px);
   }
 
   &:disabled {
-    background: #ccc;
+    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
     cursor: not-allowed;
     box-shadow: none;
+    transform: none;
   }
 }
 
 .controls {
-  display: flex;
   gap: 1rem;
-  margin-bottom: 2rem;
-  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
   justify-content: center;
 
   button {
-    padding: 0.8rem 1.5rem;
+    flex: 1;
+    width: 120px;
+    padding: 0.8rem 1.2rem;
     background: white;
     border: 2px solid #e0e0e0;
     border-radius: 10px;
@@ -163,6 +250,7 @@
     color: #555;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
 
     &:hover:not(:disabled) {
       border-color: #7fcc26;
@@ -180,6 +268,52 @@
   }
 }
 
+.statusBarFixed {
+  width: 100%;
+  max-width: 600px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  
+  .statusMessage {
+    padding: 0.75rem 1.5rem;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 1.1rem;
+    transition: all 0.3s ease;
+
+    &.check {
+      color: #ff6b6b;
+      background: rgba(255, 107, 107, 0.15);
+      border: 2px solid #ff6b6b;
+      animation: shake 0.5s ease;
+    }
+
+    &.empty {
+      opacity: 0;
+    }
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
 .chessboardContainer {
   margin-bottom: 2rem;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
@@ -197,7 +331,7 @@
 
   h3 {
     margin-bottom: 1rem;
-    color: #1e3c72;
+    color: #3a7cca;
     font-size: 1.3rem;
     font-weight: 700;
     border-bottom: 2px solid #e0e0e0;
@@ -249,7 +383,167 @@
   }
 }
 
-// Responsive adjustments
+.movePair {
+  display: grid;
+  grid-template-columns: 40px 1fr 1fr;
+  gap: 0.5rem;
+  padding: 0.6rem 0.8rem;
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  align-items: center;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: linear-gradient(135deg, #e8f5e9 0%, #d1f0d3 100%);
+    border-color: #7fcc26;
+    transform: translateX(2px);
+    box-shadow: 0 2px 8px rgba(127, 204, 38, 0.15);
+  }
+}
+
+.moveNumber {
+  font-weight: 700;
+  color: #3a7cca;
+  font-size: 0.95rem;
+  text-align: right;
+}
+
+.whiteMove,
+.blackMove {
+  padding: 0.4rem 0.8rem;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  font-family: 'Courier New', monospace;
+  transition: all 0.2s ease;
+}
+
+.whiteMove {
+  background: white;
+  color: #1f2937;
+  border: 1px solid #d1d5db;
+
+  &:hover {
+    background: #f9fafb;
+    border-color: #9ca3af;
+  }
+}
+
+.blackMove {
+  background: #1f2937;
+  color: white;
+  border: 1px solid #374151;
+
+  &:hover {
+    background: #374151;
+    border-color: #4b5563;
+  }
+}
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  padding: 50px 40px;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  text-align: center;
+  max-width: 450px;
+  width: 90%;
+  border: 3px solid #7fcc26;
+  animation: slideUp 0.3s ease-out;
+
+  h2 {
+    font-size: 32px;
+    margin-bottom: 35px;
+    color: #2c3e50;
+    font-weight: 700;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.modalButtons {
+  display: flex;
+  gap: 15px;
+
+  button {
+    flex: 1;
+    padding: 14px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    &:active {
+      transform: translateY(-1px);
+    }
+  }
+
+  .primaryButton {
+    background: linear-gradient(135deg, #7fcc26 0%, #6fb31e 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(127, 204, 38, 0.3);
+
+    &:hover {
+      background: linear-gradient(135deg, #6fb31e 0%, #5fa015 100%);
+      box-shadow: 0 6px 20px rgba(127, 204, 38, 0.4);
+    }
+  }
+
+  .secondaryButton {
+    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
+    color: #475569;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+      background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
+      color: #1e293b;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 @media (max-width: 768px) {
   .playComputerContainer {
     padding: 1rem;
@@ -273,11 +567,14 @@
   }
 
   .controls {
-    width: 100%;
+    flex-wrap: wrap;
 
     button {
-      flex: 1;
       min-width: 120px;
     }
   }
+
+  .modalButtons {
+    flex-direction: column;
+  }
 }
diff --git a/react-ystemandchess/src/features/engine/PlayComputer.tsx b/react-ystemandchess/src/features/engine/PlayComputer.tsx
index 9946950d..cc2278e5 100644
--- a/react-ystemandchess/src/features/engine/PlayComputer.tsx
+++ b/react-ystemandchess/src/features/engine/PlayComputer.tsx
@@ -15,6 +15,7 @@ const PlayComputer: React.FC = () => {
   const playerColorRef = useRef<'white' | 'black'>('white');
   const sessionStartedRef = useRef<boolean>(false);
   const difficultyRef = useRef<Difficulty>(10);
+  const movesContainerRef = useRef<HTMLDivElement>(null);
   
   const [fen, setFen] = useState<string>("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1");
   const [playerColor, setPlayerColor] = useState<'white' | 'black'>('white');
@@ -26,6 +27,8 @@ const PlayComputer: React.FC = () => {
   const [gameStatus, setGameStatus] = useState<string>("");
   const [highlightSquares, setHighlightSquares] = useState<string[]>([]);
   const [showSettings, setShowSettings] = useState(true);
+  const [showGameEndModal, setShowGameEndModal] = useState(false);
+  const [gameEndMessage, setGameEndMessage] = useState('');
 
   // Update refs whenever state changes
   useEffect(() => {
@@ -40,7 +43,12 @@ const PlayComputer: React.FC = () => {
     difficultyRef.current = difficulty;
   }, [difficulty]);
 
-  // Request computer move from Stockfish
+  useEffect(() => {
+    if (movesContainerRef.current) {
+      movesContainerRef.current.scrollTop = movesContainerRef.current.scrollHeight;
+    }
+  }, [moveHistory]);
+
   const requestComputerMove = useCallback((currentFen: string) => {
     if (!socketRef.current || !sessionStartedRef.current) return;
 
@@ -98,7 +106,7 @@ const PlayComputer: React.FC = () => {
             const updatedFen = gameRef.current.fen();
             setFen(updatedFen);
             setHighlightSquares([moveResult.from, moveResult.to]);
-            setMoveHistory(prev => [...prev, `${moveResult.from}-${moveResult.to}`]);
+            setMoveHistory(prev => [...prev, `${moveResult.from} -> ${moveResult.to}`]);
             
             // Update chessboard
             if (chessBoardRef.current) {
@@ -161,7 +169,7 @@ const PlayComputer: React.FC = () => {
       const newFen = gameRef.current.fen();
       setFen(newFen);
       setHighlightSquares([move.from, move.to]);
-      setMoveHistory(prev => [...prev, `${move.from}-${move.to}`]);
+      setMoveHistory(prev => [...prev, `${move.from} -> ${move.to}`]);
 
       // Check if game ended
       if (checkGameStatus()) {
@@ -179,39 +187,44 @@ const PlayComputer: React.FC = () => {
     }
   }, [requestComputerMove]);
 
-  // Check game status (checkmate, stalemate, draw)
   const checkGameStatus = useCallback((): boolean => {
     const game = gameRef.current;
 
     if (game.isCheckmate()) {
       const winner = game.turn() === 'w' ? 'Black' : 'White';
-      setGameStatus(`Checkmate! ${winner} wins!`);
+      setGameEndMessage(`Checkmate! ${winner} wins!`);
+      setShowGameEndModal(true);
       return true;
     }
 
     if (game.isDraw()) {
-      setGameStatus('Draw!');
+      setGameEndMessage('Game over: Draw!');
+      setShowGameEndModal(true);
       return true;
     }
 
     if (game.isStalemate()) {
-      setGameStatus('Stalemate! Draw!');
-      return true;
-    }
+    setGameEndMessage('Stalemate! Draw!');
+    setShowGameEndModal(true);
+    return true;
+  }
 
     if (game.isThreefoldRepetition()) {
-      setGameStatus('Draw by threefold repetition!');
+      setGameEndMessage('Draw by threefold repetition!');
+      setShowGameEndModal(true);
       return true;
     }
 
     if (game.isInsufficientMaterial()) {
-      setGameStatus('Draw by insufficient material!');
+      setGameEndMessage('Draw by insufficient material!');
+      setShowGameEndModal(true);
       return true;
     }
 
     if (game.isCheck()) {
-      setGameStatus('Check!');
-      setTimeout(() => setGameStatus(''), 2000);
+      const sideInCheck = game.turn() === 'w' ? 'White' : 'Black';
+      setGameStatus(`${sideInCheck} is in Check!`);
+      setTimeout(() => setGameStatus(''), 5000);
     } else {
       setGameStatus('');
     }
@@ -219,7 +232,6 @@ const PlayComputer: React.FC = () => {
     return false;
   }, []);
 
-  // Reset game
   const resetGame = useCallback(() => {
     gameRef.current.reset();
     const startFen = gameRef.current.fen();
@@ -245,7 +257,6 @@ const PlayComputer: React.FC = () => {
     }
   }, [requestComputerMove]);
 
-  // Handle new game with settings
   const newGame = useCallback(() => {
     if (socketRef.current && sessionStartedRef.current) {
       socketRef.current.emit('end-session');
@@ -285,12 +296,6 @@ const PlayComputer: React.FC = () => {
     <div className={styles.playComputerContainer}>
       <div className={styles.header}>
         <h1>Play vs Computer</h1>
-        {!showSettings && (
-          <div className={styles.statusBar}>
-            {isThinking && <span className={styles.thinking}>Computer is thinking...</span>}
-            {gameStatus && <span className={styles.gameStatus}>{gameStatus}</span>}
-          </div>
-        )}
       </div>
 
       {showSettings ? (
@@ -298,25 +303,25 @@ const PlayComputer: React.FC = () => {
           <h2>Game Settings</h2>
           
           <div className={styles.setting}>
-            <label>Play as:</label>
+            <label>Play as</label>
             <div className={styles.colorButtons}>
               <button
                 className={playerColor === 'white' ? styles.active : ''}
                 onClick={() => setPlayerColor('white')}
               >
-                ♔ White
+                White
               </button>
               <button
                 className={playerColor === 'black' ? styles.active : ''}
                 onClick={() => setPlayerColor('black')}
               >
-                ♚ Black
+                Black
               </button>
             </div>
           </div>
 
           <div className={styles.setting}>
-            <label>Difficulty:</label>
+            <label>Difficulty</label>
             <div className={styles.difficultyButtons}>
               <button
                 className={difficulty === 1 ? styles.active : ''}
@@ -363,19 +368,27 @@ const PlayComputer: React.FC = () => {
         <>
           <div className={styles.controls}>
             <button onClick={undoMove} disabled={moveHistory.length < 2 || isThinking}>
-              ↶ Undo
+              Undo
             </button>
             <button onClick={resetGame} disabled={isThinking}>
-              ⟲ Reset
+              Reset
             </button>
             <button onClick={newGame}>
               New Game
             </button>
             <button onClick={() => chessBoardRef.current?.flip()}>
-              ⇅ Flip Board
+              Flip Board
             </button>
           </div>
 
+          <div className={styles.statusBarFixed}>
+            {gameStatus && (
+              <div className={`${styles.statusMessage} ${styles.check}`}>
+                {gameStatus}
+              </div>
+            )}
+          </div>
+
           <div className={styles.chessboardContainer}>
             <ChessBoard
               mode="engine"
@@ -390,16 +403,47 @@ const PlayComputer: React.FC = () => {
 
           <div className={styles.moveHistory}>
             <h3>Move History</h3>
-            <div className={styles.moves}>
-              {moveHistory.map((move, idx) => (
-                <span key={idx} className={styles.move}>
-                  {Math.floor(idx / 2) + 1}. {move}
-                </span>
-              ))}
+            <div className={styles.moves} ref={movesContainerRef}>
+              {moveHistory.reduce((acc: JSX.Element[], move, idx) => {
+                const moveNumber = Math.floor(idx / 2) + 1;
+                const isWhiteMove = idx % 2 === 0;
+                
+                if (isWhiteMove) {
+                  acc.push(
+                    <div key={idx} className={styles.movePair}>
+                      <span className={styles.moveNumber}>{moveNumber}.</span>
+                      <span className={styles.whiteMove}>{move}</span>
+                      {moveHistory[idx + 1] && (
+                        <span className={styles.blackMove}>{moveHistory[idx + 1]}</span>
+                      )}
+                    </div>
+                  );
+                }
+                return acc;
+              }, [])}
             </div>
           </div>
         </>
       )}
+
+      {showGameEndModal && (
+        <div className={styles.modalOverlay} onClick={() => setShowGameEndModal(false)}>
+          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+            <h2>{gameEndMessage}</h2>
+            <div className={styles.modalButtons}>
+              <button onClick={() => {setShowGameEndModal(false); newGame()}} className={styles.primaryButton}>
+                New Game
+              </button>
+              <button 
+                onClick={() => setShowGameEndModal(false)}
+                className={styles.secondaryButton}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

From 859e3e4e91f1daa1b17c6d301d14b1e70f87f723 Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Wed, 31 Dec 2025 15:51:18 +0100
Subject: [PATCH 09/11] feat: allow guests to play vs computer

---
 react-ystemandchess/src/AppRoutes.tsx         |   2 +
 .../src/components/navbar/NavBar.tsx          |   6 +
 .../src/features/home/Home.tsx                |   6 +-
 .../src/features/home/Home/Home.tsx           | 275 ------------------
 4 files changed, 10 insertions(+), 279 deletions(-)
 delete mode 100644 react-ystemandchess/src/features/home/Home/Home.tsx

diff --git a/react-ystemandchess/src/AppRoutes.tsx b/react-ystemandchess/src/AppRoutes.tsx
index b566c568..ca5e8233 100644
--- a/react-ystemandchess/src/AppRoutes.tsx
+++ b/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 />} />
diff --git a/react-ystemandchess/src/components/navbar/NavBar.tsx b/react-ystemandchess/src/components/navbar/NavBar.tsx
index 5fcefce8..2b456fbc 100644
--- a/react-ystemandchess/src/components/navbar/NavBar.tsx
+++ b/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"
diff --git a/react-ystemandchess/src/features/home/Home.tsx b/react-ystemandchess/src/features/home/Home.tsx
index d59d6b97..85e063b3 100644
--- a/react-ystemandchess/src/features/home/Home.tsx
+++ b/react-ystemandchess/src/features/home/Home.tsx
@@ -13,10 +13,8 @@
  * - Responsive design for all device types
  */
 
-import React from "react";
 import "./Home.css";
 import Images from "../../assets/images/imageImporter";
-import { ButtonsCard } from "../../components/ui/tailwindcss-buttons";
 import { useNavigate } from "react-router";
 
 /**
@@ -221,8 +219,8 @@ const Home = () => {
           <div className="lesson-link-text">Start now and sign up later!</div>
           <button
             className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
-            onClick={() => navigate("./lessons")}
-            aria-label="Get started with lessons"
+            onClick={() => navigate("./play")}
+            aria-label="Get started"
           >
             {/* <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" /> */}
             <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-5 py-1 text-lg font-medium text-white backdrop-blur-3xl">
diff --git a/react-ystemandchess/src/features/home/Home/Home.tsx b/react-ystemandchess/src/features/home/Home/Home.tsx
deleted file mode 100644
index eb0e1a3e..00000000
--- a/react-ystemandchess/src/features/home/Home/Home.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-/**
- * Home Page Component
- * 
- * This is the main landing page component for the Y STEM and Chess application.
- * It serves as the entry point for visitors and provides an overview of the
- * organization's mission, featured content, and calls-to-action.
- * 
- * Features:
- * - Hero section with organization branding
- * - Featured books and publications
- * - Donation and purchase functionality
- * - Navigation to other sections of the site
- * - Responsive design for all device types
- */
-
-import React from "react";
-import "./Home.css";
-import Images from "../../../assets/images/imageImporter";
-import { ButtonsCard } from "../../../components/ui/tailwindcss-buttons";
-import { useNavigate } from "react-router";
-
-/**
- * Static data for featured books displayed on the home page
- * 
- * This array contains information about the organization's published books,
- * including cover images, titles, subtitles, and descriptions. The data
- * is used to render book cards with purchase functionality.
- * 
- * Each book object contains:
- * - image: Reference to the book cover image
- * - title: Main book title
- * - subtitle: Descriptive subtitle
- * - description: Detailed book description for marketing
- */
-const books = [
-  {
-    image: Images.Book1,
-    title: "How to Start a Tech-Based Nonprofit",
-    subtitle:
-      "Bridging the Opportunity Gap: Building a STEM Nonprofit to Change the Trajectory of Underserved Children's Lives",
-    description:
-      "How to start tech-based Nonprofit details the steps of Devin Nakano as he builds Y STEM and Chess (YSC) Inc. The first in its series covers the first 4 years of YSC. Each chapter brings unique perspective of an entrepreneur building a nonprofit that uses technology to fulfill the Company Mission.",
-  },
-  {
-    image: Images.Book2,
-    title: "The Zero Dollar Workforce",
-    subtitle: "Hire a Team, Run Your Company, and Don't Spend Any Money",
-    description:
-      "It's easier to hire and manage 40 people than just 2... Someone can also hire and run this same team of 40 people completely for FREE... The above sounds like total nonsense. Like someone is crazy. Like it's some kind of miracle. But a lot of creations in our world don't make any sense until they're fully produced and studied...",
-  },
-];
-
-/**
- * Main Home page component
- * 
- * This component renders the landing page with featured content, donation
- * options, and book purchases. It serves as the main entry point for
- * visitors to learn about the organization and take action.
- * 
- * @returns JSX element representing the complete home page
- */
-const Home = () => {
-  // Hook for programmatic navigation between pages
-  const navigate = useNavigate();
-
-  /**
-   * Handles donation button click events
-   * 
-   * This function redirects users to the external donation platform
-   * (DonorBox) where they can make contributions to support the
-   * organization's mission and programs.
-   * 
-   * Uses window.location.href for external navigation to ensure
-   * proper handling of the third-party donation platform.
-   */
-  const handleDonateButton = () => {
-    window.location.href =
-      "https://donorbox.org/y-stem-and-chess-inc-learning-platform";
-  };
-
-  /**
-   * Handles book purchase button click events
-   * 
-   * This function opens the appropriate Amazon product page in a new tab
-   * based on the book title provided. It supports multiple books and
-   * can be easily extended for additional publications.
-   * 
-   * @param title - The title of the book to purchase (optional)
-   * 
-   * Supported books:
-   * - "How to Start a Tech-Based Nonprofit"
-   * - "The Zero Dollar Workforce"
-   */
-  const handleBuyNow = (title = "") => {
-    // Handle purchase for "How to Start a Tech-Based Nonprofit"
-    if (title === "How to Start a Tech-Based Nonprofit") {
-      window.open(
-        "https://www.amazon.com/How-Start-Tech-based-Nonprofit-Opportunity/dp/B0C4MML5WG",
-        "_blank"  // Open in new tab to preserve user's current session
-      );
-    }
-
-    // Handle purchase for "The Zero Dollar Workforce"
-    if (title === "The Zero Dollar Workforce") {
-      window.open(
-        "https://www.amazon.com/Zero-Dollar-Workforce-Company-Spend/dp/B09NGVLQSS",
-        "_blank"  // Open in new tab to preserve user's current session
-      );
-    }
-  };
-  return (
-    <div role="main" className="home-container">
-      <div className="home-content1" role="region">
-        <div className="info">
-          <h1 id="h1-home">
-            Helping your child develop <br />
-            critical thinking skills!
-          </h1>
-
-          <p>
-            We are a nonprofit organization empowering <br></br>children to find
-            their own success in STEM through <br></br>Chess, Math and Computer
-            Science.
-          </p>
-
-          {/* <button className="donate-button" onClick={handleDonateButton}> */}
-          {/* <strong>Donate</strong> */}
-          {/* </button> */}
-
-          <button
-            className="donateButton"
-            aria-label="Donate to Y STEM and Chess"
-          >
-            Donate
-          </button>
-        </div>
-        <div className="pic">
-          <img
-            src={Images.TreesGroup}
-            id="tree-group-img"
-            alt="Group of Y STEM mascots playing chess"
-          ></img>
-        </div>
-      </div>
-
-      <img
-        src={Images.LogoLineBr}
-        className="logo-break"
-        alt=""
-        role="presentation"
-      ></img>
-
-      <h1 id="floating-h1">Everyone is included. Everyone is welcome.</h1>
-
-      <div className="home-content2" role="region">
-        <div className="card1">
-          <img src={Images.Heart} alt="Heart icon"></img>
-          <h1 id="h1-home">Free</h1>
-          <p>
-            For students who qualify for <br></br> free and reduced lunch.
-            <br></br>
-            Our lessons are free.
-          </p>
-          <button
-            className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
-            aria-label="Join now for free button"
-          >
-            {/* <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" /> */}
-            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-5 py-1 text-lg font-medium text-white backdrop-blur-3xl">
-              Join Now !
-            </span>
-          </button>
-        </div>
-        <div className="card2">
-          <img src={Images.Gem} alt="Gem icon"></img>
-          <h1 id="h1-home">Premium</h1>
-          <p>
-            For students who don't qualify <br></br> for free and reduced lunch.{" "}
-            <br></br>
-            $25 / Week <br></br> First lesson is FREE. <br></br> Cancel anytime.
-          </p>
-          <button
-            className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
-            aria-label="Join now premium button"
-          >
-            {/* <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" /> */}
-            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-5 py-1 text-lg font-medium text-white backdrop-blur-3xl">
-              Join Now !
-            </span>
-          </button>
-        </div>
-      </div>
-
-      <div className="home-content3" role="region">
-        <img
-          src={Images.LargeInfo}
-          alt="Y STEM mission statement emphasising Play, Learn and Donate"
-          aria-label="Y STEM mission statement emphasising Play, Learn and Donate"
-        ></img>
-      </div>
-
-      <div className="home-video-container">
-        <iframe
-          title="Y STEM and Chess Introduction Video"
-          className="home-video"
-          width="560"
-          height="315"
-          src="https://www.youtube.com/embed/SBr0bGgddIc"
-          style={{ border: "0" }}
-          allowFullScreen
-        ></iframe>
-      </div>
-
-      <div className="home-content4" role="region">
-        <div className="home-content4-box">
-          <img
-            src={Images.ChessGroup}
-            alt="Chess peices lined up next to eachother"
-            aria-label="Chess peices lined up next to eachother"
-          ></img>
-          <div className="lesson-link-text">Start now and sign up later!</div>
-          <button
-            className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
-            onClick={() => navigate("./lessons")}
-            aria-label="Get started with lessons"
-          >
-            {/* <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" /> */}
-            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-5 py-1 text-lg font-medium text-white backdrop-blur-3xl">
-              Get Started!
-            </span>
-          </button>
-        </div>
-      </div>
-
-      <img
-        src={Images.LogoLineBr}
-        className="logo-break"
-        alt="Y STEM styled line break"
-        role="presentation"
-      ></img>
-
-      <div className="home-content5" role="region">
-        <h1 id="h1-home">Books by Devin Nakano</h1>
-        {books.map((book, index) => (
-          <div key={index} className="book">
-            <div className="book-left">
-              <img
-                src={book.image}
-                alt={`${book.title} cover image`}
-                className="book-image"
-              />
-              <button
-                className="buy-now"
-                aria-label={`Buy now ${book.title}`}
-                onClick={() => handleBuyNow(book.title)}
-              >
-                <img src={Images.BuyNow} alt="Buy now" />
-              </button>
-            </div>
-            <div className="book-details">
-              <h2>{book.title}</h2>
-              <h3>{book.subtitle}</h3>
-              <p>{book.description}</p>
-            </div>
-          </div>
-        ))}
-        <footer role="contentinfo">
-          <p>All proceeds will be donated to the organization</p>
-        </footer>
-      </div>
-    </div>
-  );
-};
-
-export default Home;

From f53dc0a39a0dbec7ec1e210d4f33c205406d157b Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Wed, 31 Dec 2025 16:50:25 +0100
Subject: [PATCH 10/11] =?UTF-8?q?test:=C2=A0fix=20socket=20handler=20initi?=
 =?UTF-8?q?alization=20and=20improve=20test=20suite=20stability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/engine/PlayComputer.test.tsx | 40 +++++--------------
 .../src/features/home/Home.test.tsx           |  8 ++--
 stockfishServer/src/tests/index.test.js       | 34 +++++++++-------
 3 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/react-ystemandchess/src/features/engine/PlayComputer.test.tsx b/react-ystemandchess/src/features/engine/PlayComputer.test.tsx
index 07648480..500b81da 100644
--- a/react-ystemandchess/src/features/engine/PlayComputer.test.tsx
+++ b/react-ystemandchess/src/features/engine/PlayComputer.test.tsx
@@ -80,8 +80,8 @@ describe('PlayComputer', () => {
     it('should show settings panel on initial render', () => {
       render(<PlayComputer />);
       expect(screen.getByText('Game Settings')).toBeInTheDocument();
-      expect(screen.getByText('Play as:')).toBeInTheDocument();
-      expect(screen.getByText('Difficulty:')).toBeInTheDocument();
+      expect(screen.getByText('Play as')).toBeInTheDocument();
+      expect(screen.getByText('Difficulty')).toBeInTheDocument();
     });
 
     it('should connect to Stockfish server on mount', () => {
@@ -151,7 +151,7 @@ describe('PlayComputer', () => {
     it('should allow selecting white as player color', () => {
       render(<PlayComputer />);
 
-      const whiteButton = screen.getByText('♔ White');
+      const whiteButton = screen.getByText('White');
       fireEvent.click(whiteButton);
 
       expect(whiteButton.className).toContain('active');
@@ -160,7 +160,7 @@ describe('PlayComputer', () => {
     it('should allow selecting black as player color', () => {
       render(<PlayComputer />);
 
-      const blackButton = screen.getByText('♚ Black');
+      const blackButton = screen.getByText('Black');
       fireEvent.click(blackButton);
 
       expect(blackButton.className).toContain('active');
@@ -292,10 +292,10 @@ describe('PlayComputer', () => {
       setupGame();
 
       await waitFor(() => {
-        expect(screen.getByText('↶ Undo')).toBeInTheDocument();
-        expect(screen.getByText('⟲ Reset')).toBeInTheDocument();
+        expect(screen.getByText('Undo')).toBeInTheDocument();
+        expect(screen.getByText('Reset')).toBeInTheDocument();
         expect(screen.getByText('New Game')).toBeInTheDocument();
-        expect(screen.getByText('⇅ Flip Board')).toBeInTheDocument();
+        expect(screen.getByText('Flip Board')).toBeInTheDocument();
       });
     });
 
@@ -325,24 +325,6 @@ describe('PlayComputer', () => {
       }));
     });
 
-    it('should show thinking indicator when computer is thinking', async () => {
-      setupGame();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('make-move-button')).toBeInTheDocument();
-      });
-
-      // Make a move to trigger computer thinking
-      const moveButton = screen.getByTestId('make-move-button');
-      act(() => {
-        fireEvent.click(moveButton);
-      });
-
-      await waitFor(() => {
-        expect(screen.getByText('Computer is thinking...')).toBeInTheDocument();
-      });
-    });
-
     it('should handle computer move from evaluation-complete event', async () => {
       setupGame();
 
@@ -437,7 +419,7 @@ describe('PlayComputer', () => {
     it('should reset game when reset button is clicked', async () => {
       await setupGameWithMoves();
 
-      const resetButton = screen.getByText('⟲ Reset');
+      const resetButton = screen.getByText('Reset');
 
       act(() => {
         fireEvent.click(resetButton);
@@ -451,7 +433,7 @@ describe('PlayComputer', () => {
     it('should undo both player and computer moves', async () => {
       await setupGameWithMoves();
 
-      const undoButton = screen.getByText('↶ Undo');
+      const undoButton = screen.getByText('Undo');
       expect(undoButton).not.toBeDisabled();
 
       act(() => {
@@ -479,7 +461,7 @@ describe('PlayComputer', () => {
       });
 
       await waitFor(() => {
-        const undoButton = screen.getByText('↶ Undo');
+        const undoButton = screen.getByText('Undo');
         expect(undoButton).toBeDisabled();
       });
     });
@@ -556,7 +538,7 @@ describe('PlayComputer', () => {
       });
 
       // Select black before starting game
-      const blackButton = screen.getByText('♚ Black');
+      const blackButton = screen.getByText('Black');
       fireEvent.click(blackButton);
 
       // Start game
diff --git a/react-ystemandchess/src/features/home/Home.test.tsx b/react-ystemandchess/src/features/home/Home.test.tsx
index 6d1ec150..82b694bd 100644
--- a/react-ystemandchess/src/features/home/Home.test.tsx
+++ b/react-ystemandchess/src/features/home/Home.test.tsx
@@ -33,16 +33,16 @@ it("renders join & subscribe", () => {
 });
 
 // checks correct navigation
-it("navigates to the lessons page when Get Started is clicked", () => {
+it("navigates to the play page when Get Started is clicked", () => {
     render(
         <MemoryRouter>
             <Home/>
         </MemoryRouter>
     );
-    // click on lesson start buttin
+    // click on get started button
     fireEvent.click(screen.getByText("Get Started!"));
-    // check if the page goes to /lessons
-    expect(mockedNavigate).toHaveBeenCalledWith("./lessons");
+    // check if the page goes to /play
+    expect(mockedNavigate).toHaveBeenCalledWith("./play");
 });
 
 // check if books are being rendered
diff --git a/stockfishServer/src/tests/index.test.js b/stockfishServer/src/tests/index.test.js
index 9f6d3b29..70075f5d 100644
--- a/stockfishServer/src/tests/index.test.js
+++ b/stockfishServer/src/tests/index.test.js
@@ -1,6 +1,7 @@
 const ioClient = require("socket.io-client");
 const http = require("http");
 const express = require("express");
+const { Server } = require("socket.io");
 const socketHandler = require("../managers/socket");
 
 describe("Server and socket", () => {
@@ -12,18 +13,19 @@ describe("Server and socket", () => {
     const app = express();
     server = http.createServer(app);
 
-    ioServer = require("socket.io")(server, {
+    ioServer = new Server(server, {
       cors: { origin: "*", methods: ["GET", "POST"] },
     });
 
     ioServer.on("connection", (socket) => {
-      socketHandler(ioServer, socket);
+      socketHandler(socket);
     });
 
-    stockfishManager.registerSession = jest.fn();
-    stockfishManager.updateFen = jest.fn();
-    stockfishManager.evaluateFen = jest.fn();
-    stockfishManager.deleteSession = jest.fn();
+    // Mock the stockfishManager methods
+    jest.spyOn(stockfishManager, 'registerSession').mockReturnValue(undefined);
+    jest.spyOn(stockfishManager, 'updateFen').mockReturnValue(undefined);
+    jest.spyOn(stockfishManager, 'evaluateFen').mockReturnValue(undefined);
+    jest.spyOn(stockfishManager, 'deleteSession').mockReturnValue(undefined);
 
     server.listen(() => {
       const port = server.address().port;
@@ -37,6 +39,8 @@ describe("Server and socket", () => {
   });
 
   afterEach((done) => {
+    jest.restoreAllMocks();
+    
     if (clientSocket.connected) {
       clientSocket.disconnect();
     }
@@ -49,11 +53,11 @@ describe("Server and socket", () => {
 
     clientSocket.on("session-started", (data) => {
       expect(data.success).toBe(true);
-      serverSocketId = data;
+      serverSocketId = data.id;
       expect(stockfishManager.registerSession).toHaveBeenCalled();
       done();
     });
-  });
+  }, 10000);
 
   test("start-session emits session-error on failure", (done) => {
     stockfishManager.registerSession.mockImplementation(() => {
@@ -66,7 +70,7 @@ describe("Server and socket", () => {
       expect(data.error).toBe("Session failed");
       done();
     });
-  });
+  }, 10000);
 
   test("update-fen calls updateFen", (done) => {
     const fen = "rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1";
@@ -84,9 +88,9 @@ describe("Server and socket", () => {
           fen
         );
         done();
-      }, 50);
+      }, 100);
     });
-  });
+  }, 10000);
 
   test("evaluate-fen calls evaluateFen", (done) => {
     const fen = "rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1";
@@ -108,9 +112,9 @@ describe("Server and socket", () => {
           level
         );
         done();
-      }, 50);
+      }, 100);
     });
-  });
+  }, 10000);
 
   test("disconnect triggers deleteSession", (done) => {
     clientSocket.emit("start-session", { sessionType: "lesson", fen: "" });
@@ -125,7 +129,7 @@ describe("Server and socket", () => {
           serverSocketId
         );
         done();
-      }, 50);
+      }, 100);
     });
-  });
+  }, 10000);
 });

From 649c84893a3a534770cd5a03f5b64e769a0661ab Mon Sep 17 00:00:00 2001
From: F-Hejazi <60328249+F-Hejazi@users.noreply.github.com>
Date: Wed, 31 Dec 2025 16:56:23 +0100
Subject: [PATCH 11/11] fix: add missing break statement in platform switch for
 Linux

---
 stockfishServer/src/managers/StockfishManager.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stockfishServer/src/managers/StockfishManager.js b/stockfishServer/src/managers/StockfishManager.js
index cda2b54d..acfa7165 100644
--- a/stockfishServer/src/managers/StockfishManager.js
+++ b/stockfishServer/src/managers/StockfishManager.js
@@ -15,6 +15,7 @@ switch (process.platform) {
       break;
     case 'linux':
       enginePath = path.join(__dirname, "..", "bin", "stockfish_11_linux");
+      break;
     default:
       throw new Error(`Unsupported platform: ${process.platform}`);
 }