30:T444,md`Here we provide some functional utilities for modifying FEN strings. Import them just as you import \`chessboard\`: ~~~js import { addPiece, removePiece, querySquare, movePiece } from '@harrislapiroff/chessboard' ~~~ Each function, unless otherwise noted, accepts a FEN string and returns a new FEN string. Again, these utilities are only concerned with placing pieces on the board. They do not validate game state or moves. Consequently, as with the board, the space-separated FEN fields after piece position are optional, but will be passed through unchanged. For all functions, \`piece\`s should be specified as the characters from the notation (\`"K"\` for white king, \`"k"\` for black king, \`"N"\` for white knight, \`"n"\` for black knight, etc.) and \`square\`s should be specified as rank/file strings, e.g., \`g5\`. ### addPiece Add a piece to a square on the board. If a square is already occupied, the existing piece will be replaced with the new one. Example usage: ~~~js // Add a white queen to the middle of an empty board addPiece('8/8/8/8/8/8/8/8', 'Q', 'd5') ~~~`31:T49b,arrayToRow = (arr) => { if (arr.length !== FILES.length) { throw `Row array must have exactly ${FILES.length} entries, representing eight squares in a chessboard row` } let counter = 0 let emptySquareCounter = 0 let rowString = '' while (counter < 8) { // If the character is a chess piece, first add any built up empty square // as a number, then add the piece to the string, then reset the empty square counter, // then increment the counter if (Array.from(PIECE_MAP.keys()).includes(arr[counter])) { if (emptySquareCounter !== 0) rowString += emptySquareCounter rowString += arr[counter] emptySquareCounter = 0 counter++ // If the character is null, incement the empty square counter, then increment the counter } else if (arr[counter] === null) { emptySquareCounter++ counter++ // If the character is neither null nor a valid piece, throw an error } else { throw `${arr[counter]} is an invalid value for a chessboard square` } } // Finally, flush the remaining empty squares if non-zero if (emptySquareCounter !== 0) rowString += emptySquareCounter return rowString }32:T1018,chessboard = (fenString = 'start', opts) => { const { size: maxSize, responsive, call, theme, } = Object.assign({ size: 440, responsive: true, call: () => {}, theme: { lightSquareFill: '#FFF', darkSquareFill: '#EEE', borderStroke: '#CCC', labelColor: '#CCC', } }, opts) const size = responsive ? Math.min(maxSize, width) : maxSize const marginSize = 20 const innerSize = size - marginSize * 2 const squareSize = innerSize / 8 const coords = fenToArray(fenString === 'start' ? START_FEN : fenString) const output = html` ` // Call the passed in modifier function with helpful utilities call(output, { fenString, squareSize, squareCoords: (square) => squareToCoords(square).map(n => n * squareSize + marginSize), squareCentroid: (square) => { return squareToCoords(square).map(n => n * squareSize + 0.5 * squareSize + marginSize) }, }) return output }33:[{"id":"88f3a72f7964fb536ffeb7bdc725853cba38542e9e8db7f535e18989a766105464df4255236560845917720d8235f06aa6e99574dec6ea922e89ccba49e85a64","href":"https://static.observableusercontent.com/files/88f3a72f7964fb536ffeb7bdc725853cba38542e9e8db7f535e18989a766105464df4255236560845917720d8235f06aa6e99574dec6ea922e89ccba49e85a64","name":"chesspieces.svg","type":"image/svg+xml","lastModified":1595474448482.787,"size":14808},{"id":"81f07a112e3ed72604f8444c491b5cc7658b114534f3bf63dd5b4c5abdf26aae7ff994471a3a280bf38e1877deb57983f08a711f30f867871860c077461406ad","href":"https://static.observableusercontent.com/files/81f07a112e3ed72604f8444c491b5cc7658b114534f3bf63dd5b4c5abdf26aae7ff994471a3a280bf38e1877deb57983f08a711f30f867871860c077461406ad","name":"chesspieces@3.svg","type":"image/svg+xml","lastModified":1595566241881.693,"size":15321}] 2e:{"title":"Chessboard","cells":[{"id":0,"value":"md`# Chessboard`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`A simple SVG chessboard. First import this notebook:\n\n~~~js\nimport { chessboard } from '@harrislapiroff/chessboard'\n~~~\n\nThen call it to display a board:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"chessboard()","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`*Chess piece SVG files from [Wikimedia](https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces).*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`Chessboard will default to rendering pieces in starting positions. You can specify piece positions by passing a string using [Forsyth-Edwards Notation](https://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation) or simply \\`'start'\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"chessboard('1K1k4/1P6/8/8/8/8/r7/2R5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`Your FEN string may optionally include the additional space-separated fields after the piece placement. E.g., \n~~~js\nchessboard('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0')\n~~~\nbut they will have no effect. \\`chessboard\\` is only concerned with rendering pieces on a board. It does not validate or interpret other game state.\n\n## Additional Options\n\n\\`chessboard\\` takes an \\`options\\` object as its second argument. These options are:\n\n### size\n\nDimensions of the board in pixels (this includes the labels along the edge of the board). Here's a very smol board:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"chessboard('start', { size: 150 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"md`### theme\n\nA theme object defining colors used in the board. It should look like this:\n\n~~~js\n{\n lightSquareFill: '#FFF',\n darkSquareFill: '#EEE',\n borderStroke: '#CCC',\n labelColor: '#CCC',\n}\n~~~\n\nHere's a board with a custom theme:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"chessboard('start', { theme: {\n lightSquareFill: '#FFE',\n darkSquareFill: '#263',\n borderStroke: '#263',\n labelColor: '#263',\n}})","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"md`### call\n\nPerform arbitrary manipulations on the board, by passing a function to be run after the board is generated. The function should have this signature:\n\n~~~js\n(board, state) => undefined\n~~~\n\nwhere \\`board\\` is the DOM object representing the board and \\`state\\` is a handful of useful attributes about the board. An example \\`state\\` object might look like this:\n\n~~~js\n{\n fenString: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1',\n squareSize: 50,\n // Top left corner of a square fetched by square name, e.g., \\`'g5'\\`\n squareCoords: ƒ(squareName) => [x, y],\n // centroid of a square, fetched by name\n squareCentroid: ƒ(squareName) => [x, y],\n}\n~~~\n\nHere's an example of using \\`call\\` to highlight square d1:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"chessboard('start', { call: board => board.querySelector('.square-d1').setAttribute('fill', '#D00') })","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"md`Or a slightly more complex example, integrating [D3](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3), illustrating where a rook is permitted to move:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"chessboard('8/8/2r5/8/8/8/8/8', {\n call: (board, state) => {\n d3.select(board)\n .append('g')\n .selectAll('g')\n .data([\n ['a6', 'b6'],\n ['c8', 'c7'],\n ['c1', 'c5'],\n ['h6', 'd6'],\n ])\n .join('line')\n .attr('x1', d => state.squareCentroid(d[0])[0])\n .attr('y1', d => state.squareCentroid(d[0])[1])\n .attr('x2', d => state.squareCentroid(d[1])[0])\n .attr('y2', d => state.squareCentroid(d[1])[1])\n .attr('stroke', 'hsla(200, 80%, 30%, 50%)')\n .attr('stroke-width', '6')\n .attr('stroke-linecap', 'round')\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`## Forsyth-Edwards Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"chessboard(\n addPiece('8/8/8/8/8/8/8/8', 'Q', 'd5'),\n { size: 200 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"addPiece = positionModifier((positionString, piece, square) => {\n const [targetRow, targetCol] = squareToCoords(square)\n const array = fenToArray(positionString)\n array[targetRow][targetCol] = piece\n return arrayToPosition(array)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`### removePiece\nRemove a piece from a square on the board. If square is already empty, no change will be made. Example usage:\n\n~~~js\n// Steal the white rook from the corner of the board\nremovePiece('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR', 'a1')\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"chessboard(removePiece('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR', 'a1'), { size: 200 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"removePiece = positionModifier((positionString, square) => {\n const [targetRow, targetCol] = squareToCoords(square)\n const array = fenToArray(positionString)\n array[targetRow][targetCol] = null\n return arrayToPosition(array)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"md`### querySquare\n\nA bit of an outlier from the other functions, this one does _not_ return a new FEN position string. Instead it looks for a particular square on the board and returns the character value of the piece at that square. Will return \\`null\\` if square is empty.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"chessboard(START_FEN, { size: 200 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"querySquare('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1', 'd1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":488,"value":"querySquare = (fenString, square) => {\n const [targetRow, targetCol] = squareToCoords(square)\n const array = fenToArray(fenString)\n return array[targetRow][targetCol]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`### movePiece\n\nThis utility takes a piece from one square and places it on another. It is the equivalent of calling \\`querySquare\\`, \\`removePiece\\`, and \\`addPiece\\` in sequence. Example usage:\n\n~~~js\n// The most common first move in the game\nmovePiece('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1', 'e2','e4')\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"chessboard(\n movePiece('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1', 'e2','e4'),\n { size: 200 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"movePiece = positionModifier((positionString, square1, square2) => addPiece(\n removePiece(positionString, square1),\n querySquare(positionString, square1),\n square2\n))","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md`### Low-level utilities\n\nIt should be rare that you need to call these utilities directly unless you are writing your own FEN utility functions.\n\nFirst, a function wrapper that accepts a function designed to modify the position field. It returns a function that accepts a complete FEN string which modifies the position field while passing the rest of the fields through unchanged. This is used by the functions above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"positionModifier = fn => {\n return (fenString, ...args) => {\n const [position, ...fields] = fenString.split(' ')\n const newPosition = fn(position, ...args)\n return [newPosition, ...fields].join(' ') \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`Utilities to convert a rank/file string to 0-indexed coordinates and back:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"squareToCoords = (square) => {\n const [file, rank] = Array.from(square)\n return [RANKS.indexOf(rank), FILES.indexOf(file)]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"coordsToSquare = ([row, col]) => FILES[col] + RANKS[row]","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`Low level utilities to convert FEN strings and fragments to arrays and back:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"// TODO: Add validation\nrowToArray = (rowString) => Array.from(rowString).reduce((acc, char) => {\n // If character is a number, add that many blank squares\n if (RegExp(/[1-8]/).test(char)) return acc.concat(new Array(+char).fill(null))\n // Otherwise, assume character is a piece marker and add it on its own\n return acc.concat([char])\n}, [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"// TODO: Add validation\nfenToArray = (fenString) => fenString.split(' ')[0].split('/').map(rowToArray)","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"arrayToPosition = (arr) => {\n if (arr.length !== RANKS.length) {\n throw `Board array must have exactly ${RANKS.length} entries, representing eight rows in a chessboard`\n }\n\n return arr.map(arrayToRow).join('/')\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`## Chessboard Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`Some helpful chess-related constants:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"FILES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"RANKS = ['8', '7', '6', '5', '4', '3', '2', '1']","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"PIECE_MAP = new Map([\n ['K', 'white-king'],\n ['Q', 'white-queen'],\n ['R', 'white-rook'],\n ['B', 'white-bishop'],\n ['N', 'white-knight'],\n ['P', 'white-pawn'],\n ['k', 'black-king'],\n ['q', 'black-queen'],\n ['r', 'black-rook'],\n ['b', 'black-bishop'],\n ['n', 'black-knight'],\n ['p', 'black-pawn'],\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"START_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1'","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`Render a chessboard:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"Load the chess pieces file and process it into code for inclusion in the chessboard. See [this Observable forum post](https://talk.observablehq.com/t/unable-to-use-uploaded-file-for-svg-external-symbols/3631/4) for details:","pinned":false,"hidden":false,"mode":"md"},{"id":825,"value":"pieceSVG = FileAttachment(\"chesspieces.svg\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"md`D3 is not actually required to render the chessboard, but it is used in some of our examples to demonstrate integration.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}