31:T4b7,function drawChessboard( squareColors = {white: "#030", black: "black"}, paddingX = 0, paddingY = 0) { const squareColorWhite = squareColors.white; const squareColorBlack = squareColors.black; const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + paddingX; const h = squareTotal * 8 + squarePadding + paddingY; const svg = DOM.svg(w, h); // specify defs getDefsForSVG(svg); d3.select(svg).append("rect") .style("fill",squareColorBlack) .attr("width", w) .attr("height", h); const numSquares = d3.range(64); // draw squares d3.select(svg) .append("g") .attr("transform", "translate(" + squarePadding + ", " + squarePadding + ")") .selectAll("rect.square") .data(numSquares) .join("rect") .attr("class", "square") .style("fill", d => (d % 16 < 8) ? ((d % 2) ? squareColorBlack : squareColorWhite) : (!(d % 2) ? squareColorBlack : squareColorWhite)) .style("stroke", "none") .attr("x", d => (d % 8) * squareTotal) .attr("y", d => Math.floor(d / 8) * squareTotal) .attr("width", squareWidth) .attr("height", squareWidth); return svg; }32:T61c,function getDefsForSVG(svg){ const defs = d3.select(svg) .append("defs"); const filter = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("id","glow"); // glow filter as proposed by Nadieh Bremer filter.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","4.5") .attr("result","coloredBlur"); const feMerge = filter.append("feMerge"); feMerge.append("feMergeNode") .attr("in","coloredBlur"); feMerge.append("feMergeNode") .attr("in","SourceGraphic"); // simple alternative glow filter const filter2 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("id","glow2"); filter2.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","4.5"); const filter3 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("id","glow3"); filter3.append("feGaussianBlur") .attr("class", "blur3") .attr("stdDeviation","4.5"); /* filter2.append("feColorMatrix") .attr("type", "matrix") .attr("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.5 0"); */ defs .append('marker') .attr('id', 'arrowhead') .attr('viewBox', '-0 -5 10 10') // .attr('viewBox', '-0 0 10 15') .attr('refX', 13) .attr('refY', 0) .attr('orient', 'auto') .attr('markerWidth', 13) .attr('markerHeight',13) .attr('xoverflow','visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); return svg; }33:T6ab,pieceMoves = { const myMap = new Map(); // initialize const pieces = ["wRa1", "wNb1", "wBc1", "wQd1", "wKe1", "wBf1", "wNg1", "wRh1", "wPa2", "wPb2", "wPc2", "wPd2", "wPe2", "wPf2", "wPg2", "wPh2", "bRa8", "bNb8", "bBc8", "bQd8", "bKe8", "bBf8", "bNg8", "bRh8", "bPa7", "bPb7", "bPc7", "bPd7", "bPe7", "bPf7", "bPg7", "bPh7" ]; let obj, ar; for (let p of pieces) { ar = []; obj = {"square": p.slice(-2), moves: 0.5, isCaptured: false, hasCaptured: false, hasCapturedPiece: "", hasEval: 0, hasTimeSpent: 0}; ar.push(obj); myMap.set(p, ar); } // populate with game moves let value = {}; let newValue = {}; for (let move of currentGame) { for (let [key, ar] of myMap) { value = ar[ar.length - 1]; newValue = {}; if (value.isCaptured) continue; // piece does not exist any more if (move.color !== key.charAt(0)) { // wrong color if (move.to === value.square) { value.isCaptured = true; } else { value.moves = value.moves + .5; } ar[ar.length - 1] = value; myMap.set(key, ar); } else { //same color if (move.from === value.square) { Object.assign(newValue, obj); newValue.square = move.to; if (move.captured) { newValue.hasCaptured = true; newValue.hasCapturedPiece = move.captured.toUpperCase(); } ar.push(newValue); } else { value.moves = value.moves + .5; ar[ar.length - 1] = value; } myMap.set(key, ar); } } // end for .. myMap } // end for .. game1 return myMap; }34:T5cc,function version1() { const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; str = "M " + squareToPosition(d.from).x + " " + squareToPosition(d.from).y; str += " L " + squareToPosition(d.to).x + " " + squareToPosition(d.to).y; return str; }) .style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from") .style("fill", (d, i) => (i % 2) ? "steelblue" : "orange") .attr("cx", (d, i) => squareToPosition(d.from).x) .attr("cy", (d, i) => squareToPosition(d.from).y) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to") .style("fill", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", "none") .style("stroke-width", 6) .attr("cx", (d, i) => squareToPosition(d.to).x) .attr("cy", (d, i) => squareToPosition(d.to).y) .attr("r", squareWidth / 60 * 8); return svg; }35:Tabf,function version2() { const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", "white") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from") .style("fill", (d, i) => (i % 2) ? "steelblue" : "orange") .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to") .style("fill", (d, i) => d.captured ? ((i % 2) ? "orange" : "steelblue") : (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "steelblue" : "orange") : "none") .style("stroke-width", 6) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); d3.select(svg).selectAll(".piece-move") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }36:Ta96,function version3() { const svg = drawChessboard(); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", "white") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from") .style("fill", (d, i) => (i % 2) ? "steelblue" : "orange") .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to") .style("fill", (d, i) => d.captured ? ((i % 2) ? "orange" : "steelblue") : (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "steelblue" : "orange") : "none") .style("stroke-width", 6) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); d3.select(svg).selectAll(".piece-move") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }37:Tad3,function version4() { const svg = drawChessboard(); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", "white") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from") .style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to") .style("fill", (d, i) => d.captured ? (d.color === "w" ? colorOfPieces.get(d.captured + "b") : colorOfPieces.get(d.captured + "b") ) : colorOfPieces.get(d.piece + d.color)) .style("stroke", (d, i) => d.captured ? colorOfPieces.get(d.piece + d.color) : "none") .style("stroke-width", squareWidth / 60 * 6) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); d3.select(svg).selectAll(".piece-move") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }38:Tc34,function version5() { const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", "white") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") // .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("id", (d,i) => "move-" + i) .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") //.style("fill", "none"); const pathText = sel1.join("text"); pathText.append("textPath") .attr("href", (d,i) => "#move-" + i) .attr("text-anchor","middle") .attr("startOffset","50%") .text(d => d.san) .style("font-size", (16 * squareWidth / 60) + "px"); pathText.attr("transform", rotate); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from") .style("fill", (d, i) => (i % 2) ? "steelblue" : "orange") .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to") .style("fill", (d, i) => d.captured ? ((i % 2) ? "orange" : "steelblue") : (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "steelblue" : "orange") : "none") .style("stroke-width", 6) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); /* d3.select(svg).selectAll(".piece-move") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); */ return svg; }39:T796,function version6() { // const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const svg = drawChessboard(); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", 5) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("id", (d,i) => "move-" + i) .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) // .style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) //.style("stroke-width", 5) .style("stroke-linejoin", "round") .attr('marker-end','url(' + window.location + '#arrowhead)'); // .style("fill", "none"); d3.select(svg).selectAll(".piece-move") .filter((d,i) => !(d.from[0] === d.to[0] || d.from[1] === d.to[1])) .style("filter","url(" + window.location + "#glow)"); return svg; }3a:Tae6,function version7() { // const svg = drawChessboard(); const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "white") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from") .style("fill", (d, i) => (i % 2) ? "black" : "white") .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to") .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "black" : "white") : "none") .style("stroke-width", 6) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); d3.select(svg).selectAll(".piece-move") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }3b:Te51,function version8() { // const svg = drawChessboard(); const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") .style("opacity", (d,i) => (i > 40 && i < 45) ? 0.9 : 0.2) .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "white") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("opacity", (d,i) => (i > 40 && i < 45) ? 0.9 : 0.2) .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from") .style("fill", (d, i) => (i % 2) ? "black" : "white") .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to") .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "black" : "white") : "none") .style("stroke-width", 6) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); const imageWidth = squareWidth * .7; const sel3 = d3.select(svg) .selectAll("image") .data(dataArray); sel3 .join("image") //.filter(d => d.piece === "b") .attr("class", "piece-square from") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d.color + d.piece.toUpperCase() + ".png"; return piece; }) .style("opacity", (d,i) => (i > 40 && i < 45) ? 0.9 : 0.2) .attr("x", d => squareToPosition(d.from).x - imageWidth / 2) .attr("y", d => squareToPosition(d.from).y - imageWidth / 2) .attr("height", imageWidth) .attr("width", imageWidth); d3.select(svg).selectAll(".piece-move") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }3c:Tbbe,function version9() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding; const svg = DOM.svg(w, w); // specify defs getDefsForSVG(svg); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move glow") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move glow") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "white") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); d3.select(svg).selectAll(".glow") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }3d:Tc3f,function version10() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding; const svg = DOM.svg(w, w); // specify defs getDefsForSVG(svg); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move glow") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-dasharray", d => d.piece === "b" ? 10 : 2) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move glow") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "white") .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("stroke-dasharray", d => d.piece === "b" ? 10 : 2) .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); d3.select(svg).selectAll(".glow") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }3e:T10a1,function version11() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + 40; const svg = DOM.svg(w, w); d3.select(svg) .append("rect") .attr("width", w) .attr("height",w); // specify defs getDefsForSVG(svg); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move glow") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", squareWidth / 60 * 7) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move glow") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "black" : "white") .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); const pieceKeys =[ ...colorOfPieces.keys() ]; const imageWidth = squareWidth * .5; const sel3 = d3.select(svg) .append("g") .attr("transform", "translate(20, " + (w - 40) +")") .selectAll("image") .data(pieceKeys); sel3 .join("rect") .style("fill", (d, i) => colorOfPieces.get(d)) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", 5) .attr("width", imageWidth) .attr("height", imageWidth); sel3 .join("image") //.filter(d => d.piece === "b") .attr("class", "piece-square from glow") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d[1] + d[0].toUpperCase() + ".png"; return piece; }) //.style("opacity", (d,i) => (i > 40 && i < 45) ? 0.9 : 0.2) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", 5) .attr("width", imageWidth) .attr("height", imageWidth); d3.select(svg).selectAll(".glow") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }3f:T10a2,function version12() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + 40; const svg = DOM.svg(w, w); d3.select(svg) .append("rect") .attr("width", w) .attr("height",w); // specify defs getDefsForSVG(svg); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) //.style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 10) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move glow") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "#666") //.style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); const pieceKeys =[ ...colorOfPieces2.keys() ]; const imageWidth = squareWidth * .5; const sel3 = d3.select(svg) .append("g") .attr("transform", "translate(20, " + (w-40) +")") .selectAll("image") .data(pieceKeys); sel3 .join("rect") .style("fill", (d, i) => colorOfPieces2.get(d)) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", 5) .attr("width", imageWidth) .attr("height", imageWidth); sel3 .join("image") //.filter(d => d.piece === "b") .attr("class", "piece-square from glow") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d[1] + d[0].toUpperCase() + ".png"; return piece; }) //.style("opacity", (d,i) => (i > 40 && i < 45) ? 0.9 : 0.2) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", 5) .attr("height", imageWidth) .attr("width", imageWidth); d3.select(svg).selectAll(".glow") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }40:T120c,function version13() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + 40; /* const svg = DOM.svg(w, w); d3.select(svg) .append("rect") .attr("width", w) .attr("height",w); */ const svg = drawChessboard({white: "#030", black: "black"} ,0, 80); // specify defs getDefsForSVG(svg); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) //.style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 10) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "#666") .style("stroke", "black") //.style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") .style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); const pieceKeys =[ ...colorOfPieces3.keys() ]; const imageWidth = squareWidth * .5; const sel3 = d3.select(svg) .append("g") .attr("transform", "translate(" + (20 + squareWidth * 2)+ ", " + (w-40) +")") .selectAll("image") .data(pieceKeys); sel3 .join("rect") .style("fill", (d, i) => colorOfPieces3.get(d)) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", imageWidth / 2) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("width", imageWidth) .attr("height", imageWidth); sel3 .join("image") //.filter(d => d.piece === "b") .attr("class", "piece-square from glow") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d[1] + d[0].toUpperCase() + ".png"; return piece; }) //.style("opacity", (d,i) => (i > 40 && i < 45) ? 0.9 : 0.2) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("width", imageWidth) .attr("height", imageWidth); d3.select(svg).selectAll(".glow") // .style("filter","url(#glow)"); .style("filter","url(" + window.location + "#glow)"); return svg; }41:T1537,function version14() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + 40; const svg = drawChessboard({white: "#030", black: "black"} ,0, 80); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces.get(d.piece + d.color)) //.style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 10) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "#666") .style("stroke", "black") //.style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") // .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") //.style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") //.style("stroke-width", d => d.captured ? 6 : 2) .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", d => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); // show chess pieces on board const pieceWidth = squareWidth * .7; const sel4 = d3.select(svg) .selectAll("image.board") .data(dataArray); sel4 .join("image") //.filter(d => d.piece === "b") .attr("class", "piece-square board from") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d.color + d.piece.toUpperCase() + ".png"; return piece; }) // .style("opacity", (d,i) => (i > 40 && i < 45) ? 0.9 : 0.2) .attr("x", d => squareToPosition(d.from).x - pieceWidth / 2) .attr("y", d => squareToPosition(d.from).y - pieceWidth / 2) .attr("height", pieceWidth) .attr("width", pieceWidth); // show all pieces at the bottom const pieceKeys =[ ...colorOfPieces3.keys() ]; const imageWidth = squareWidth * .5; const sel3 = d3.select(svg) .append("g") .attr("transform", "translate(" + (20 + squareWidth * 2)+ ", " + (w-40) +")") .selectAll("image.legend") .data(pieceKeys); sel3 .join("rect") .style("fill", (d, i) => colorOfPieces3.get(d)) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", imageWidth / 2) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("width", imageWidth) .attr("height", imageWidth); sel3 .join("image") .attr("class", "piece-square legend glow") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d[1] + d[0].toUpperCase() + ".png"; return piece; }) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("height", imageWidth) .attr("width", imageWidth); // add glow effect d3.select(svg).selectAll(".glow") .style("filter","url(" + window.location + "#glow)"); return svg; }42:T153b,function version15() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + 40; const svg = drawChessboard({white: "#030", black: "black"} ,0, 80); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) //.style("fill", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 10) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "#666") .style("stroke", "black") //.style("stroke", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") // .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") //.style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") //.style("stroke-width", d => d.captured ? 6 : 2) .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); // show chess pieces on board const pieceWidth = squareWidth * .7; const sel3 = d3.select(svg) .selectAll("image.board") .data(positionAt(40)); for (let i = 0; i < 10; i++) { sel3 .join("circle") .attr("class", "piece-background board at glow") .style("fill", d => colorOfPieces3.get(d.piece)) .style("opacity", 0.2) //.style("stroke-width", 3) //.style("stroke", "black") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", pieceWidth/2); }; sel3 .join("image") .attr("class", "piece board at") .attr("xlink:href", d => d.pieceLink) .attr("x", d => d.x - pieceWidth / 2) .attr("y", d => d.y - pieceWidth / 2) .attr("height", pieceWidth) .attr("width", pieceWidth); // show all pieces at the bottom const pieceKeys =[ ...colorOfPieces3.keys() ]; const imageWidth = squareWidth * .5; const sel4 = d3.select(svg) .append("g") .attr("transform", "translate(" + (20 + squareWidth * 2)+ ", " + (w-40) +")") .selectAll("image.legend") .data(pieceKeys); sel4 .join("rect") .style("fill", (d, i) => colorOfPieces3.get(d)) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", imageWidth / 2) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("width", imageWidth) .attr("height", imageWidth); sel4 .join("image") .attr("class", "piece-square legend glow") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d[1] + d[0].toUpperCase() + ".png"; return piece; }) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("height", imageWidth) .attr("width", imageWidth); // add glow effect d3.select(svg).selectAll(".glow") .style("filter","url(" + window.location + "#glow)"); return svg; }43:T1537,function version16() { const squareTotal = squareWidth + squarePadding; const w = squareTotal * 8 + squarePadding + 40; const svg = drawChessboard({white: "#030", black: "black"} ,0, 80); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) //.style("fill", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 10) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) .style("stroke", (d, i) => (i % 2) ? "black" : "#666") .style("stroke", "black") //.style("stroke", (d, i) => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", squareWidth / 60 * 5) .style("stroke-linejoin", "round") .style("fill", "none"); // pieces from, to const sel2 = d3.select(svg) .selectAll("circle") .data(dataArray); sel2 .join("circle") .attr("class", "piece-square from glow") .style("fill", (d, i) => (i % 2) ? "black" : "white") //.style("stroke", (d, i) => (i % 2) ? "white" : "black") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.from).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.from).y + dy; }) .attr("r", squareWidth / 60 * 8); sel2 .join("circle") .attr("class", "piece-square to glow") // .style("fill", (d, i) => d.captured ? ((i % 2) ? "white" : "black") : (i % 2) ? "black" : "white") //.style("stroke", (d, i) => d.captured ? ((i % 2) ? "orange" : "darkred") :(i % 2) ? "white" : "black") //.style("stroke-width", d => d.captured ? 6 : 2) .style("fill", (d, i) => (i % 2) ? "black" : "white") .style("stroke", d => colorOfPieces3.get(d.piece + d.color)) .style("stroke-width", d => d.captured ? 6 : 2) .attr("cx", (d, i) => { const dx = (i % 2) ? -2 : 2; return squareToPosition(d.to).x + dx; }) .attr("cy", (d, i) => { const dy = (i % 2) ? -2 : 2; return squareToPosition(d.to).y + dy; }) .attr("r", squareWidth / 60 * 8); // show chess pieces on board const pieceWidth = squareWidth * .7; const sel3 = d3.select(svg) .selectAll("image.board") .data(positionAt(40)); for (let i = 0; i < 10; i++) { sel3 .join("circle") .attr("class", "piece-background board at glow") .style("fill", d => colorOfPieces3.get(d.piece)) .style("opacity", 0.2) //.style("stroke-width", 3) //.style("stroke", "black") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", pieceWidth/2); }; sel3 .join("image") .attr("class", "piece board at") .attr("xlink:href", d => d.pieceLink) .attr("x", d => d.x - pieceWidth / 2) .attr("y", d => d.y - pieceWidth / 2) .attr("height", pieceWidth) .attr("width", pieceWidth); // show all pieces at the bottom const pieceKeys =[ ...colorOfPieces3.keys() ]; const imageWidth = squareWidth * .5; const sel4 = d3.select(svg) .append("g") .attr("transform", "translate(" + (20 + squareWidth * 2)+ ", " + (w-40) +")") .selectAll("image.legend") .data(pieceKeys); sel4 .join("rect") .style("fill", (d, i) => colorOfPieces3.get(d)) .attr("x", (d, i) => i * (imageWidth + 5)) .attr("y", imageWidth / 2) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("width", imageWidth) .attr("height", imageWidth); sel4 .join("image") .attr("class", "piece-square legend") .attr("xlink:href", (d, i) => { const prefix = "https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/"; const piece = prefix + d[1] + d[0].toUpperCase() + ".png"; return piece; }) .attr("x", (d, i) => i < 6 ? i * (imageWidth + 5) : (i - 6) * (imageWidth + 5)) .attr("y", (d, i) => i < 6 ? 5 : imageWidth + 10) .attr("height", imageWidth) .attr("width", imageWidth); // add glow effect d3.select(svg).selectAll(".glow") .style("filter","url(" + window.location + "#glow2)"); return svg; }44:T79b,function version17() { // const svg = drawChessboard({"white": "white", "black": "lightgrey"}); const svg = drawChessboard(); const dataArray = currentGame; // paths const sel1 = d3.select(svg) .selectAll("path.piece-move") .data(dataArray); sel1.join("path") .attr("class", "piece-move") .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) //.style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("stroke-width", 5) .style("stroke-linejoin", "round") .style("fill", "none"); sel1.join("path") .attr("class", "piece-move") .attr("id", (d,i) => "move-" + i) .attr("d", (d, i) => { let str = {}; const dx = (i % 2) ? -2 : 2; const dy = (i % 2) ? -2 : 2; str = "M " + (squareToPosition(d.from).x + dx) + " " + (squareToPosition(d.from).y + dy); str += " L " + (squareToPosition(d.to).x + dx) + " " + (squareToPosition(d.to).y + dy); return str; }) // .style("stroke", (d, i) => (i % 2) ? "steelblue" : "orange") .style("stroke", (d, i) => colorOfPieces.get(d.piece + d.color)) .style("fill", (d, i) => colorOfPieces.get(d.piece + d.color)) //.style("stroke-width", 5) .style("stroke-linejoin", "round") .attr('marker-end','url(' + window.location + '#arrowhead)'); // .style("fill", "none"); d3.select(svg).selectAll(".piece-move") // .filter((d,i) => !(d.from[0] === d.to[0] || d.from[1] === d.to[1])) .style("filter","url(" + window.location + "#glow2)"); return svg; }45:[] 2f:{"title":"Visualizing chess games","cells":[{"id":0,"value":"md`# Visualizing chess games\n\n

\n\nChess is estimated to be played worldwide by about [600 milion people](https://en.chessbase.com/post/che-redux-how-many-people-play-che-). Computers have been surpassing humans in their ability to play chess starting with [Deep Blue](https://en.wikipedia.org/wiki/Deep_Blue_(chess_computer), the best chess computers are now [AlphaZero](https://en.wikipedia.org/wiki/AlphaZero) (owned by Google) or [Lc0](https://github.com/LeelaChessZero/lc0) as (one of) the best open source chess programs. Computers also provide a popular way for humans to play chess online against other humans on sites with [lichess](https://lichess.org), [chess.com](chess.com) or [ICC](https://www.chessclub.com/). \n\nBut now it's time to return the power to the human - we will look at a new way to visualize a chess game!` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"## Goals\n- explore different ways to depict a whole chess game (all moves) in one static image\n- the image may serve to a chess player as a fond memory of a specific game\n- the image may favor the artistic nature over the ability to fully reconstruct the game\n- the image may even be abstract such that it does not reveal to depict a chess game","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"md `## Choose a chess game to be visualized`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"viewof gameInputSelection = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"viewof myGame = {\n if (gameInputSelection[\"game input\"] === \"lichess\") {\n return form(html``)\n } else if (gameInputSelection[\"game input\"] === \"pgn\") { \n return textarea({\n title: \"Chess game to be visualized\", \n placeholder: \"Insert game in PGN format here...\", \n width: \"100%\",\n rows: 10,\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"myGame","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`## Visualizing chess games (Work in progress)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof squareWidth = slider({\n min: 1, \n max: maxWidth, \n step: 1, \n value: defaultWidth, \n title: \"Square width\", \n description: \"adjust the slider to change the width of a chessboard square\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`### Version 1: Show moves and source and destination squares`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"version1();","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`### Version 2: Show capture with special circles, make lines for each color slightly shifted, glow effect`","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"version2();","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`### Version 3: Glow effect + outline for path + dark board`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"version3();","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`### Version 4: Different colors for different pieces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"version4();","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"md`### Version 5: Show moves on paths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"version5()","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`### Version 6: Show arrowheads on paths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"version6();","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`### Version 7: like version 3 just with black and white colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"version7();","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`### Version 8: drawing chess pieces, a few and their paths with higher opacity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"version8();","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`### Version 9: like version 7, strokes fixed, no chessboard, captures with red stroke`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"version9()","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`### Version 10: using stroke-dasharray with different dashes for bishops`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"version10();","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`### Version 11: black background, different color pieces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"version11();","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`### Version 12: paths just have stroke (outline) with piece color (symetric colors)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"version12();","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`### Version 13: all paths with black fill`","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"version13();","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md`### Version 14: with pieces on board, circle stroke same color as path stroke`","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"version14();","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"md`### Version 15: color assignment fixed (matches legend), pieces from a certain position shown`","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"version15();","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"md`### Version 16: alternative glow filter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"version16();","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"md`### Version 17: alternative glow filter for version 6`","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"version17();","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`#### Libraries and imports` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"// myChess = require(\"chess.js\")\nmyChess = _myChess.Chess","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"_myChess = import(\"https://unpkg.com/chess.js@0.13.0/chess.js?module\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"import {text, textarea, radio, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`#### Code` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"maxWidth = { return width < (50 + squarePadding) * 9 ? width / 9 : 100;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"defaultWidth = { return maxWidth < 50 ? maxWidth : 50;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"squarePadding = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"function squareToPosition(square) { \n const letters = [\"a\",\"b\",\"c\",\"d\",\"e\",\"f\",\"g\",\"h\"];\n const x = (letters.indexOf(square.charAt(0))) * (squareWidth + squarePadding) + squarePadding + squareWidth / 2;\n const y = (7 - (Number(square.charAt(1)) - 1)) * (squareWidth + squarePadding) + squarePadding + squareWidth / 2;\n return {x: x, y: y};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"piecePositions = {\n const myMap = new Map();\n let str = \"\";\n let pos = {};\n for (let [key, ar] of pieceMoves) {\n str = \"\";\n ar.forEach( function(ele, index) {\n pos = squareToPosition(ele.square);\n if (index === 0) {\n str += \"M \" + pos.x + \" \" + pos.y;\n } else {\n str += \" L \" + pos.x + \" \" + pos.y;\n }\n myMap.set(key, str);\n });\n };\n return myMap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"currentGame = {\n const chess = new myChess();\n chess.load_pgn(anyPgn);\n \n /*\n // make some moves\n chess.move('e4');\n chess.move('c5');\n chess.move('Nf3');\n chess.move('Nc6');\n chess.move('d4');\n chess.move('cxd4');\n */\n \n return chess.history({ verbose: true });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"anyPgn = { \n let lichessAPI;\n let ret;\n let params = new URLSearchParams(window.location.search);\n const game = params.get(\"g\"); \n \n if (!game) {\n if (typeof myGame.message !== \"undefined\") {\n lichessAPI = \"https://lichess.org/game/export/\" + myGame.message.substr(20, 8);\n ret = d3.text(lichessAPI);\n } else {\n ret = myGame;\n }\n } else {\n lichessAPI = \"https://lichess.org/game/export/\" + game.slice(-8);\n ret = d3.text(lichessAPI);\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"colorOfPieces = { \n const myMap = new Map();\n myMap.set(\"pw\", \"#9ecae1\");\n myMap.set(\"rw\", \"#636363\");\n myMap.set(\"nw\", \"#3182bd\");\n myMap.set(\"bw\", \"#a1d99b\");\n myMap.set(\"qw\", \"#31a354\");\n myMap.set(\"kw\", \"#bdbdbd\");\n \n myMap.set(\"kb\", \"#fdae6b\");\n myMap.set(\"qb\", \"#e6550d\");\n myMap.set(\"bb\", \"#bcbddc\");\n myMap.set(\"nb\", \"#756bb1\");\n myMap.set(\"rb\", \"#fc9272\");\n myMap.set(\"pb\", \"#de2d26\");\n return myMap;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"colorOfPieces2 = { \n const myMap = new Map();\n myMap.set(\"pw\", \"#9ecae1\");\n myMap.set(\"rw\", \"#31a354\");\n myMap.set(\"nw\", \"#756bb1\");\n myMap.set(\"bw\", \"#e6550d\");\n myMap.set(\"qw\", \"#de2d26\");\n myMap.set(\"kw\", \"#fdae6b\");\n \n myMap.set(\"kb\", \"#fdae6b\");\n myMap.set(\"qb\", \"#de2d26\");\n myMap.set(\"bb\", \"#e6550d\");\n myMap.set(\"nb\", \"#756bb1\");\n myMap.set(\"rb\", \"#31a354\");\n myMap.set(\"pb\", \"#9ecae1\");\n return myMap;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"colorOfPieces3 = { \n const p = \"#e41a1c\";\n const r = \"#377eb8\";\n const n = \"#4daf4a\";\n const b = \"#984ea3\";\n const q = \"#ff7f00\";\n const k = \"#ffff33\";\n \n const myMap = new Map();\n /*\n myMap.set(\"pw\", \"#9ecae1\");\n myMap.set(\"rw\", \"#31a354\");\n myMap.set(\"nw\", \"#756bb1\");\n myMap.set(\"bw\", \"#e6550d\");\n myMap.set(\"qw\", \"#de2d26\");\n myMap.set(\"kw\", \"#fdae6b\");\n \n myMap.set(\"pb\", \"#9ecae1\"); \n myMap.set(\"rb\", \"#31a354\");\n myMap.set(\"nb\", \"#756bb1\");\n myMap.set(\"bb\", \"#e6550d\");\n myMap.set(\"qb\", \"#de2d26\");\n myMap.set(\"kb\", \"#fdae6b\");\n */\n myMap.set(\"pw\", p);\n myMap.set(\"rw\", r);\n myMap.set(\"nw\", n);\n myMap.set(\"bw\", b);\n myMap.set(\"qw\", q);\n myMap.set(\"kw\", k);\n \n myMap.set(\"pb\", p); \n myMap.set(\"rb\", r);\n myMap.set(\"nb\", n);\n myMap.set(\"bb\", b);\n myMap.set(\"qb\", q);\n myMap.set(\"kb\", k);\n \n return myMap;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"function positionAt(moveNr) {\n const chess = new myChess(); \n currentGame.forEach((e, i) => { if (i < moveNr) { chess.move(e.san); } });\n \n const rows = [1,2,3,4,5,6,7,8];\n const cols = [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\", \"g\", \"h\"];\n \n let piece, square;\n const prefix = \"https://cdn.jsdelivr.net/gh/oakmac/chessboardjs/website/img/chesspieces/wikipedia/\";\n const pieces = [];\n \n for(let r = 0; r < rows.length; r++){\n for(let c = 0; c < cols.length; c++){\n square = cols[c] + rows[r];\n piece = chess.get(square);\n if (piece) { \n let p = {pieceLink: prefix + [piece.color] + piece.type.toUpperCase() + \".png\"\n , piece: piece.type + piece.color\n , x: squareToPosition(square).x\n , y: squareToPosition(square).y};\n pieces.push(p);\n }\n }\n }\n \n return pieces;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"function rotate(d) {\n const xFrom = squareToPosition(d.from).x;\n const xTo = squareToPosition(d.to).x;\n if (xTo < xFrom) { \n const rx = xTo + ((xFrom - xTo) / 2);\n const yFrom = squareToPosition(d.from).y;\n const yTo = squareToPosition(d.to).y;\n const ry = (yTo > yFrom) \n ? yFrom + ((yTo - yFrom) / 2)\n : yTo + ((yFrom - yTo) / 2);\n return 'rotate(180 ' + rx + ' ' + ry + ')';\n }\n else {\n return 'rotate(0)';\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`#### Tests` ","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W45","stdlib":"1","titling":"auto"}