I’ve been trying to adapt a chess engine tutorial for my needs, and I’ve been trying to figure out how the board renders. When I drag a piece, while it is dropped it doesn’t stay and instead stays with my mouse pointer. The move highlight works but I cant drag another piece or see my random bot play the next move. I’ve checked the FEN and the moves are registered there though.
HTML Header:
<head>
<title>ChessBot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2"
crossorigin="anonymous"></script>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="assets/main.css">
<link rel="stylesheet" href="assets/font/font.css">
<link rel="stylesheet" href="assets/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
crossorigin="anonymous"></script>
<!-- Chessboard JS -->
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css"
integrity="sha384-q94+BZtLrkL1/ohfjR8c6L+A6qzNH9R2hBLwyoAfu3i/WCvQjzL2RQJ3uNHDISdU" crossorigin="anonymous">
<script defer src="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.js"
integrity="sha384-8Vi8VHwn3vjQ9eUHUxex3JSN/NFqUg3QbPyX8kWyb93+8AC/pPWTzj+nHtbC5bxD"
crossorigin="anonymous"></script>
<!-- Chess JS (slightly modified) -->
<script defer src="js/chess.js"></script>
<!-- Bootstrap JS -->
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous">
</script>
<!-- Custom JS -->
<script defer src="js/script2.js"></script>
</head>
Javascript Board Manipulation
function removeGreySquares() {
$('#myBoard .square-55d63').css('background', '');
}
function greySquare(square) {
var $square = $('#myBoard .square-' + square);
var background = whiteSquareGrey;
if ($square.hasClass('black-3c85d')) {
background = blackSquareGrey;
}
$square.css('background', background);
}
function onDragStart(source, piece) {
// do not pick up pieces if the game is over
if (game.game_over()) return false;
// or if it's not that side's turn
if (
(game.turn() === 'w' && piece.search(/^b/) !== -1) ||
(game.turn() === 'b' && piece.search(/^w/) !== -1)
) {
return false;
}
}
function onDrop(source, target) {
undo_stack = [];
removeGreySquares();
// see if the move is legal
var move = game.move({
from: source,
to: target,
promotion: 'q', // NOTE: always promote to a queen for example simplicity
});
// Illegal move
if (move === null) return 'snapback';
globalSum = evaluateBoard(game, move, globalSum, 'b');
updateAdvantage();
// Highlight latest move
$board.find('.' + squareClass).removeClass('highlight-white');
$board.find('.square-' + move.from).addClass('highlight-white');
squareToHighlight = move.to;
colorToHighlight = 'white';
$board
.find('.square-' + squareToHighlight)
.addClass('highlight-' + colorToHighlight);
alert(game.fen())
if (!checkStatus('black'));
{
// Make the best move for black
window.setTimeout(function () {
makeRandomMove('b');
window.setTimeout(function () {
showHint();
}, 250);
}, 250);
}
}
function onMouseoverSquare(square, piece) {
// get list of possible moves for this square
var moves = game.moves({
square: square,
verbose: true,
});
// exit if there are no moves available for this square
if (moves.length === 0) return;
// highlight the square they moused over
greySquare(square);
// highlight the possible squares for this piece
for (var i = 0; i < moves.length; i++) {
greySquare(moves[i].to);
}
}
function onMouseoutSquare(square, piece) {
removeGreySquares();
}
function onSnapEnd() {
board.position(game.fen());
}
Config:
var config = {
draggable: true,
position: 'start',
onDragStart: onDragStart,
onDrop: onDrop,
onMouseoutSquare: onMouseoutSquare,
onMouseoverSquare: onMouseoverSquare,
onSnapEnd: onSnapEnd,
};
board = Chessboard('myBoard', config);
Any help would be greatly appreciated.