From 1a48123a682ccf6e46680c8ba790e7b1d0e7b2b8 Mon Sep 17 00:00:00 2001 From: Jan Stachurski Date: Tue, 11 Jun 2024 10:42:33 +0200 Subject: [PATCH] functional chess visualization from mocked file --- src/visualization/chess.js | 124 ++++++++++++++++++++++++--- src/visualization/moves.txt | 164 ++++++++++++++++++++++++++++++++++++ 2 files changed, 277 insertions(+), 11 deletions(-) create mode 100644 src/visualization/moves.txt diff --git a/src/visualization/chess.js b/src/visualization/chess.js index d079019..6b386e4 100644 --- a/src/visualization/chess.js +++ b/src/visualization/chess.js @@ -1,17 +1,48 @@ import React, { useEffect, useRef, useState } from 'react'; import Chessboard from 'chessboardjs'; import './chessboard-1.0.0.min.css'; +import FileMoves from './moves.txt'; -const moves = [ - 'e2-e4', 'e7-e5', 'g1-f3', 'b8-c6', 'f1-b5', 'a7-a6', 'b5-a4', 'g8-f6', - 'e1-g1', 'f8-e7', 'f1-e1', 'b7-b5', 'a4-b3', 'd7-d6', 'd2-d3', 'e8-g8', - 'h2-h3', 'b8-d7', 'd2-d4', 'd7-bd7' -]; +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'); @@ -27,25 +58,96 @@ const ChessComponent = () => { if (currentMove < moves.length) { board.move(moves[currentMove]); setCurrentMove(currentMove + 1); + scrollToCurrentMove(currentMove + 1); } }; const handlePrevMove = () => { if (currentMove > 0) { - board.position('start'); + 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++) { - board.move(moves[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 ( -
-
+
- - +
+
+ + +
+
+
+
    + {moves.map((move, index) => ( +
  • handleMoveClick(index)} + style={{ + padding: '5px 10px', + cursor: 'pointer', + color: 'green', + backgroundColor: index === currentMove ? '#d3d3d3' : 'transparent' + }} + > + {`${index + 1}. ${move}`} +
    • + ))} +
); diff --git a/src/visualization/moves.txt b/src/visualization/moves.txt new file mode 100644 index 0000000..8e189dd --- /dev/null +++ b/src/visualization/moves.txt @@ -0,0 +1,164 @@ +0 +-1 -1 +g2 g4 +1 +g2 g4 +g8 f6 +0 +g8 f6 +d2 d4 +1 +d2 d4 +f6 g4 +0 +f6 g4 +f1 g2 +1 +f1 g2 +e7 e5 +0 +e7 e5 +g2 f1 +1 +g2 f1 +e5 d4 +0 +e5 d4 +g1 f3 +1 +g1 f3 +f8 b4 +0 +f8 b4 +b1 d2 +1 +b1 d2 +b4 d2 +0 +b4 d2 +d1 d2 +1 +d1 d2 +b8 c6 +0 +b8 c6 +f3 g5 +1 +f3 g5 +d7 d5 +0 +d7 d5 +d2 d3 +1 +d2 d3 +e8 g8 +0 +e8 g8 +d3 a6 +1 +d3 a6 +b7 a6 +0 +b7 a6 +e2 e4 +1 +e2 e4 +d5 e4 +0 +d5 e4 +f1 e2 +1 +f1 e2 +g4 e5 +0 +g4 e5 +e1 d1 +1 +e1 d1 +c8 f5 +0 +c8 f5 +e2 a6 +1 +e2 a6 +f5 g4 +0 +f5 g4 +g5 f3 +1 +g5 f3 +g4 f3 +0 +g4 f3 +d1 d2 +1 +d1 d2 +f3 h1 +0 +f3 h1 +c2 c3 +1 +c2 c3 +d8 g5 +0 +d8 g5 +d2 c2 +1 +d2 c2 +d4 d3 +0 +d4 d3 +a6 d3 +1 +a6 d3 +e4 d3 +0 +e4 d3 +c2 b1 +1 +c2 b1 +g5 f5 +0 +g5 f5 +a2 a4 +1 +a2 a4 +f5 f2 +0 +f5 f2 +b1 a2 +1 +b1 a2 +f2 h2 +0 +f2 h2 +a2 b1 +1 +a2 b1 +h2 c2 +0 +h2 c2 +b1 a2 +1 +b1 a2 +c2 a4 +0 +c2 a4 +a2 b1 +1 +a2 b1 +a4 c2 +0 +a4 c2 +b1 a2 +1 +b1 a2 +h1 d5 +0 +h1 d5 +a2 a3 +1 +a2 a3 +c2 b3 +-1 +1 \ No newline at end of file