Unlisted
Edited
Nov 9, 2022
highlight = html`<div id="highlightBoard" style="width:100%;height:auto;max-width:500px;"></div>`
highlightb = {
const boardId = highlight.id;
var board,
game = new Chess();
var removeGreySquares = function () {
d3.selectAll(`#${boardId} .square-55d63`).style("background", "");
};
var greySquare = function (square) {
var squareEl = d3.selectAll(`#${boardId} .square-` + square);
var background = "#a9a9a9";
if (squareEl.classed("black-3c85d")) {
background = "#696969";
}
squareEl.style("background", background);
};
// support mobile by preventing scroll on touch
d3.select(`#${boardId}`)
.node()
.addEventListener("touchstart", (evt) => evt.preventDefault());
var onDragStart = function (source, piece) {
// do not pick up pieces if the game is over
// or if it's not that side's turn
if (
game.game_over() === true ||
(game.turn() === "w" && piece.search(/^b/) !== -1) ||
(game.turn() === "b" && piece.search(/^w/) !== -1)
) {
return false;
}
};
var onDrop = function (source, target) {
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";
};
var onMouseoverSquare = function (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);
}
};
var onMouseoutSquare = function (square, piece) {
removeGreySquares();
};
var onSnapEnd = function () {
board.position(game.fen());
};
var cfg = {
pieceTheme:
"https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png",
draggable: true,
position: "start",
onDragStart: onDragStart,
onDrop: onDrop,
onMouseoutSquare: onMouseoutSquare,
onMouseoverSquare: onMouseoverSquare,
onSnapEnd: onSnapEnd
};
board = ChessBoard(boardId, cfg);
return board;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
