The avatar for @bryangingechen
Bryan Gin-ge Chen
here to learn
Published
Ingredients
Edited
May 2, 2020
1 fork
21 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Chess = require('https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
$ = require('jquery')
Insert cell
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(await FileAttachment('chessboardjs-0.0.1.js').url());
}
Insert cell
Insert cell
pieceTemplates = ({wiki:'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',
alpha:'https://chessboardjs.com/img/chesspieces/alpha/{piece}.png'})
Insert cell
Insert cell
div = html`<div id="boardDiv" style="width:100%;height:auto;max-width:500px;">`
Insert cell
Insert cell
// note that we programmatically get the id here; this tells Observable that this code depends on "div"
b = ChessBoard(div.id, {pieceTheme:pieceTemplates.wiki})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more