Published
Edited
Feb 4, 2022
1 star
widthClamp = Math.min(width, 1500)
{
let ctx = canvas.getContext("2d");
boardColors.forEach((r, idxr) =>
r.forEach((c, idxc) => {
let eighth = (widthClamp * boardSize) / 8;
ctx.fillStyle = c;
ctx.fillRect(eighth * idxc, eighth * idxr, eighth, eighth);
})
);
ctx.fillText("hi", 0, widthClamp * boardSize);
return ctx;
}
canvas = {
return html`<canvas style="overflow:scroll; width:${widthClamp}px; height:${widthClamp}px;" width=${
widthClamp * boardSize
} height=${widthClamp * boardSize}"></canvas>`;
}
boardColors = boardArr.map((r, idx) =>
idx % 2
? r.map((c, idxc) => (idxc % 2 ? "black" : "white"))
: r.map((c, idxc) => (idxc % 2 ? "white" : "black"))
)
boardArr = [...Array(8)].map((c) => [...Array(8)])
boardRaw = splitData.filter((r) => r.length === 3 || r.length === 6)
whiteIcons = iconsRaw.slice(16, 32)
blackIcons = iconsRaw.slice(0, 16)
iconsRaw = splitData
.filter((r) => r.length === 2)
.map((r) => r[1].split(/[<>]/g))
.map((r) => r[1])
.filter((i) => i)
splitData = chessIconWiki.source
.split("=")
.slice(40, 181)
.map((i) => i.split(";"))
chessIconWiki = fetch(
"https://en.wikipedia.org/w/rest.php/v1/page/Chess_symbols_in_Unicode?format=json&origin=*"
).then((r) => r.json())
// Get chess piece and board details. Size, count, etc.
// Generate images based on chess piece icons and generate chess board
// Generate rule cheat sheet
// Generate a file, probably best if it's pdf
// User can print a chess set with chess board and pieces to cut out without using a lot of ink.
// --> Is there a way to estimate how much ink a file will use?
// Extra: Use your own images for the pieces and your own board background
// Rule cheat sheet
// import pdf generator
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.
