Skip to content

Commit

Permalink
functional chess visualization from mocked file
Browse files Browse the repository at this point in the history
  • Loading branch information
opprotossball committed Jun 11, 2024
1 parent 0e0bb7d commit 1a48123
Show file tree
Hide file tree
Showing 2 changed files with 277 additions and 11 deletions.
124 changes: 113 additions & 11 deletions src/visualization/chess.js
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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 (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div ref={boardRef} style={{ width: '600px', marginBottom: '20px' }} />
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
<div>
<button onClick={handlePrevMove}>&lt; Back</button>
<button onClick={handleNextMove} style={{ marginLeft: '10px' }}>Next &gt;</button>
<div ref={boardRef} style={{ width: '600px', height: '600px', marginBottom: '20px' }} />
<div style={{ textAlign: 'center' }}>
<button onClick={handlePrevMove}>&lt; Back</button>
<button onClick={handleNextMove} style={{ marginLeft: '10px' }}>Next &gt;</button>
</div>
</div>
<div
style={{
marginLeft: '20px',
width: '300px', // Increased width for the moves list
height: '600px',
overflowY: 'auto',
backgroundColor: '#f0f0f0',
padding: '10px',
borderRadius: '8px'
}}
>
<ul ref={listRef} style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{moves.map((move, index) => (
<li
key={index}
onClick={() => handleMoveClick(index)}
style={{
padding: '5px 10px',
cursor: 'pointer',
color: 'green',
backgroundColor: index === currentMove ? '#d3d3d3' : 'transparent'
}}
>
{`${index + 1}. ${move}`}
</li>
))}
</ul>
</div>
</div>
);
Expand Down
164 changes: 164 additions & 0 deletions src/visualization/moves.txt
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit 1a48123

Please sign in to comment.