Software developer and power user
Published
Edited
Jan 20, 2021
1 fork
2 stars
// see: https://github.com/ornicar/chessground/blob/master/src/api.ts
board = {
const container = document.getElementById("board");
return Chessground(container, config);
}
// see: https://github.com/ornicar/chessground/blob/master/src/config.ts
config = ({
coordinates: false, // files (columns, lettered a-h) / ranks (rows, numbered 1-8, from White's point of view)
fen: positionInForsythEdwardsNotation
})
// see: https://lichess.org/zbNlJc0R#32
positionInForsythEdwardsNotation = "1r3rk1/2pbqpp1/p2b2np/1p1Pp2n/P3P3/2N1BPP1/1PBQN2P/2R2RK1 w - - 2 17"
Chessground = (await require('https://bundle.run/chessground@7.9.3')).Chessground
html`<style>
#board {
width: ${sideLength}px;
height: ${sideLength}px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
${officialStylesheets}
<style>`
sideLength = Math.min(640, width)
officialStylesheets = fetchStylesheets()
// see: https://github.com/ornicar/chessground/tree/master/assets
fetchStylesheets = () => {
const names = ["base", "brown", "cburnett"]
const requests = names.map(fetchStylesheet);
return Promise.all(requests)
.then(values => values.join("\n"))
.catch(() => FileAttachment("chessground.css").text());
}
fetchStylesheet = (name) => {
const url = `https://raw.githubusercontent.com/ornicar/chessground/master/assets/chessground.${name}.css`;
return fetch(url).then(response => response.text());
}
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.
