30:T808,highlightb = { const boardId = highlight.id; var board, game = new Chess(); var removeGreySquares = function() { $(`#${boardId} .square-55d63`).css('background', ''); }; var greySquare = function(square) { var squareEl = $(`#${boardId} .square-` + square); var background = '#a9a9a9'; if (squareEl.hasClass('black-3c85d') === true) { background = '#696969'; } squareEl.css('background', background); }; 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: pieceTemplates.wiki, draggable: true, position: 'start', onDragStart: onDragStart, onDrop: onDrop, onMouseoutSquare: onMouseoutSquare, onMouseoverSquare: onMouseoverSquare, onSnapEnd: onSnapEnd }; board = ChessBoard(boardId, cfg); return board; }31:[{"id":"b523b772a7e7104f6a277b6cd6660376c3aa546e60f11645b854cf65bd7921414d42a35aa3e49eb5a8d475c0aa23424e7805518d9a53abb4113a4f0a4c23151c","href":"https://static.observableusercontent.com/files/b523b772a7e7104f6a277b6cd6660376c3aa546e60f11645b854cf65bd7921414d42a35aa3e49eb5a8d475c0aa23424e7805518d9a53abb4113a4f0a4c23151c","name":"chessboardjs-0.0.1.js","type":"application/javascript","lastModified":1588413019425.519,"size":15736}] 2e:{"title":"Hello, chess!","cells":[{"id":0,"value":"md`# Hello, chess!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"thumb = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`This notebook demonstrates [chess.js](https://github.com/jhlywa/chess.js)/[chessboard.js](http://chessboardjs.com/) on Observable. (Thanks to [Christian Wilcox](https://observablehq.com/@cw) for making the boards responsive!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"chessjs = md`## chess.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`[chess.js](https://github.com/jhlywa/chess.js) is a BSD-2-Clause licensed JS chess library, capable of generating and validating moves and game states (e.g. check(mate) / stalemate) -- as its README says, \"basically, everything but the AI\".\n\nUsing it on Observable is as easy as \\`require\\`-ing from its CDN URL:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Chess = require('https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`Here we use chess.js to generate a random game of chess:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof randomgame = {\n var chess = new Chess();\n\n while (!chess.game_over()) {\n var moves = chess.moves();\n var move = moves[Math.floor(Math.random() * moves.length)];\n chess.move(move);\n }\n const div = html`${chess.pgn({ max_width: 5, newline_char: '
' })}`;\n div.style.height = '500px';\n div.style.overflow = 'auto';\n div.value = chess;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`This is nice, but can we illustrate this on a graphical chessboard? This leads us to...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"chessboardjs = md`## chessboard.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`[chessboard.js](http://chessboardjs.com/) is an MIT licensed JS chessboard \"component\" which depends on JQuery. It is designed to be \"just a board\", so its API focuses on turning chess moves into graphics, rather than game logic.\n\nTo use it on Observable, we first \\`require\\` jQuery, then \\`require\\` chessboard.js from bundle.run and include the CSS.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$$ = require('jquery')","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"ChessBoard = {\n $; // this tells Observable that this require statement depends on jQuery\n const href = await require.resolve(\n \"https://chessboardjs.com/css/chessboard.css\"\n );\n if (!document.getElementById('chessboardjs-css'))\n document.head.appendChild(\n html``\n );\n return await require(await FileAttachment('chessboardjs-0.0.1.js').url());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`The graphics for the chess pieces are loaded by default from a relative URL (which won't work with Observable), so here we give the absolute URLs to two chess \"styles\" on the chessboardjs.com website. We'll use these later in the \\`config\\` object under \\`pieceTheme\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"pieceTemplates = ({wiki:'https://chessboardjs.com/img/chesspieces/wikipedia/{piece}.png',\n alpha:'https://chessboardjs.com/img/chesspieces/alpha/{piece}.png'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`To get us started, here's an empty chessboard in Observable. First we generate a named \\`div\\` element in its own cell:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"div = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`And then we create a ChessBoard object which modifies it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"// note that we programmatically get the id here; this tells Observable that this code depends on \"div\"\nb = ChessBoard(div.id, {pieceTheme:pieceTemplates.wiki})","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`Because chessboard.js uses JQuery to manipulate the DOM, it's not clear how to do this in one self-contained cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`Here's some basic Observable integration, which plays the moves from our random game onto the above board with the click of a button:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"// https://observablehq.com/@mbostock/wait-until-button\nviewof button = {\n const form = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`## Thumbnail functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"thumbChess = {\n const b = ChessBoard(thumb.id, {pieceTheme:pieceTemplates.alpha, position:'start'});\n const game = new Chess();\n game.load_pgn(carlsenCaruana);\n const history = game.history();\n const aux = new Chess();\n b.position('start');\n yield md`start`;\n for (let j=0; j