Simple visualisation of the chess play

package.json

@@ -1,14 +1,17 @@
 {
   "dependencies": {
+    "@chrisoakman/chessboardjs": "^1.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.7.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.5",
-    "date-fns": "^3.6.0",
     "buffer": "^6.0.3",
+    "chessboardjs": "^0.0.1",
+    "date-fns": "^3.6.0",
+    "jquery": "^3.7.1",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/index.js

@@ -28,6 +28,10 @@ import UserSettings from './User/Settings/UserSettings';
 import AnimatedBackground from "./AnimatedBackground";
 import AddBotForm from "./forms/AddBotForm";
 import BotList from "./lists/BotList";
+import Chess from "./visualization/chess.js";
+import $ from 'jquery'; // Import jQuery
+window.$ = $; // Make jQuery available globally
+
 
 const games = [{name:'Szachy', id:1}, {name:'Warcaby', id:2}, {name:'Scrabble', id:3}, {name:'Chińczyk', id:4}, {name:'Go', id:5}]
 
@@ -120,6 +124,10 @@ const router = createBrowserRouter([
         path: "/bots",
         element: <BotList/>
     },
+    {
+        path: "/chess",
+        element: <Chess/>
+    },
 ]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));

src/visualization/chess.js

@@ -0,0 +1,142 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Chessboard from 'chessboardjs';
+import './chessboard-1.0.0.min.css';
+import FileMoves from './moves.txt';
+import './chess.scss'
+
+const parseMoves = (gameLog) => {
+    const lines = gameLog.trim().split('\n');
+    const moves = [];
+
+    for (let i = 0; i < lines.length; i++) {
+        const currentLine = lines[i].trim();
+
+        if (currentLine === '1' || currentLine === '0') {
+            const fromMove = lines[i + 1].trim().split(' ').join('-');
+            const toMove = lines[i + 2].trim().split(' ').join('-');
+            if (!moves.includes(fromMove)) {
+                moves.push(fromMove);
+            }
+            if (!moves.includes(toMove)) {
+                moves.push(toMove);
+            }
+            i += 2;
+        } else if (currentLine === '-1') {
+            break;
+        }
+    }
+    return moves.slice(1);  // Return list without the first element
+}
+
+const ChessComponent = () => {
+  const [moves, setMoves] = useState([]);
+  const boardRef = useRef(null);
+  const [currentMove, setCurrentMove] = useState(0);
+  const [board, setBoard] = useState(null);
+  const listRef = useRef(null);
+
+  useEffect(() => {
+    // Fetch and parse the moves from the file
+    fetch(FileMoves)  // Adjust the path to where the moves file is located
+      .then((response) => response.text())
+      .then((text) => {
+        const parsedMoves = parseMoves(text);
+        setMoves(parsedMoves);
+      });
+  }, []);
+
+  useEffect(() => {
+    const board = Chessboard(boardRef.current, 'start');
+    setBoard(board);
+
+    // Clean up the board on unmount
+    return () => {
+      board.destroy();
+    };
+  }, []);
+
+  const handleNextMove = () => {
+    if (currentMove < moves.length) {
+      board.move(moves[currentMove]);
+      setCurrentMove(currentMove + 1);
+      scrollToCurrentMove(currentMove + 1);
+    }
+  };
+
+  const handlePrevMove = () => {
+    if (currentMove > 0) {
+      const tempDiv = document.createElement('div');
+      tempDiv.style.position = 'absolute';
+      tempDiv.style.left = '-9999px';
+      document.body.appendChild(tempDiv);
+
+      const newBoard = Chessboard(tempDiv, 'start');
+      for (let i = 0; i < currentMove - 1; i++) {
+        newBoard.move(moves[i]);
+      }
+      board.position(newBoard.fen());
+      newBoard.destroy();
+      document.body.removeChild(tempDiv);
+
+      setCurrentMove(currentMove - 1);
+      scrollToCurrentMove(currentMove - 1);
+    }
+  };
+
+  const handleMoveClick = (moveIndex) => {
+    const tempDiv = document.createElement('div');
+    tempDiv.style.position = 'absolute';
+    tempDiv.style.left = '-9999px';
+    document.body.appendChild(tempDiv);
+
+    const newBoard = Chessboard(tempDiv, 'start');
+    for (let i = 0; i < moveIndex; i++) {
+      newBoard.move(moves[i]);
+    }
+    board.position(newBoard.fen());
+    newBoard.destroy();
+    document.body.removeChild(tempDiv);
+
+    setCurrentMove(moveIndex);
+    scrollToCurrentMove(moveIndex);
+  };
+
+  const scrollToCurrentMove = (moveIndex) => {
+    if (listRef.current) {
+      const currentMoveElement = listRef.current.children[moveIndex];
+      if (currentMoveElement) {
+        currentMoveElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className="chess-container">
+      <div className="chessboard-container">
+        <div ref={boardRef} className="chessboard" />
+        <div className="buttons">
+          <button onClick={handlePrevMove}>&lt; Back</button>
+          <button onClick={handleNextMove} style={{ marginLeft: '10px' }}>Next &gt;</button>
+        </div>
+      </div>
+      <div className="moves-list-container">
+        <ul ref={listRef} className="moves-list">
+          {moves.map((move, index) => (
+            <li
+              key={index}
+              onClick={() => handleMoveClick(index)}
+              className={`move-item ${index === currentMove ? 'current-move' : ''}`}
+            >
+              {`${index + 1}. ${move}`}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default ChessComponent;

src/visualization/chess.scss

@@ -0,0 +1,115 @@
+  .chess-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.4); // Semi-transparent background to highlight content
+    border-radius: 10px;
+    padding: 20px;
+    height: 100vh;
+  }
+
+  .chessboard-container {
+    position: relative;
+    width: 650px;
+    height: 700px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(22, 17, 17, 0.8);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    // opacity: 0.6;
+
+  }
+
+  .chessboard {
+    width: 500px;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-self: center;
+    box-shadow: 0 5px 15px rgba(200, 200, 200, 0.5)
+  }
+
+  .buttons {
+    margin-top: 10px;
+    text-align: center;
+    width: 70%;
+    height: 40px;
+    font-size: 15px;
+  }
+
+  .buttons button {
+    background-color: #14980D;
+    /* Main Primary color */
+    border: none;
+    color: white;
+    padding: 10px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 12px;
+    transition: background-color 0.3s ease;
+    letter-spacing: 1px;
+    /* Slight spacing for a tech look */
+  }
+
+  .buttons button:hover {
+    background-color: #185515;
+    /* Primary color 4 for hover */
+  }
+
+  .moves-list-container {
+    position: relative;
+    margin-left: 20px;
+    width: 300px;
+    height: 700px;
+    overflow-y: auto;
+    background-color: #111;
+    padding: 10px;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    /* Custom scrollbar styles */
+    scrollbar-width: thin;
+    /* For Firefox */
+    scrollbar-color: #14980D #333;
+    /* For Firefox */
+  }
+
+  .moves-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    background-color: #222;
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  .move-item {
+    padding: 5px 10px;
+    cursor: pointer;
+    color: #14980D;
+    /* Primary color 2 */
+    background-color: transparent;
+    border-radius: 4px;
+    transition: background-color 0.3s, color 0.3s;
+    background-color: #222;
+    margin: 5px;
+    font-size: 25px;
+    letter-spacing: 1px;
+  }
+
+  .move-item:hover {
+    background-color: #f0f0f0;
+  }
+
+  .move-item.current-move {
+    background-color: #d3d3d3;
+    color: #185515;
+    /* Main Primary color */
+  }