Chess = require('https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.11.0/chess.js')
{
const chess = new Chess()
return chess.moves()
}
$ = require('jquery')
ChessBoard = {
$; // this tells Observable that this require statement depends on jQuery
const href = await require.resolve("https://chessboardjs.com/css/chessboard.css");
if (!document.getElementById('chessboardjs-css'))
document.head.appendChild(html`<link id='chessboardjs-css' href=${href} rel=stylesheet>`);
return await require('https://bundle.run/chessboardjs@0.0.1');
}
div = html`<div id="boardDiv" style="width:100%;height:auto;max-width:500px;">`
b = ChessBoard(div.id, {
pieceTheme:pieceTemplates.wiki,
draggable: true,
position: 'start'})
rulesBoard = html`<div id="myBoard" style="width: 400px"></div>`
{
var board = null
var game = new Chess()
function onDragStart (source, piece, position, orientation) {
// do not pick up pieces if the game is over
if (game.game_over()) return false
// only pick up pieces for the side to move
if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
(game.turn() === 'b' && piece.search(/^w/) !== -1)) {
return false
}
}
function onDrop (source, target) {
// 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'
}
// update the board position after the piece snap
// for castling, en passant, pawn promotion
function onSnapEnd () {
board.position(game.fen())
}
var config = {
draggable: true,
pieceTheme:pieceTemplates.wiki,
position: 'start',
onDragStart: onDragStart,
onDrop: onDrop,
onSnapEnd: onSnapEnd
}
board = ChessBoard(rulesBoard.id, config)
}
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.
