31:T1143,{ console.log("render"); let activeGames = numGames; let container = html`

`; games.forEach((g) => { container.appendChild(g.e); initGame(g); }); let move = null, moves = [], priorityPieces = pieceMovePriority.map((p) => pieceToNotation(p)); // animation loop while (true && activeGames > 0) { games.forEach((g) => { if (g.c.game_over()) { if (config.includes("Restart Completed Games")) { initGame(g); activeGames++; } return; } // allow different boards to animate at different speeds // wait until the board animation is done before calculating the next move if (Date.now() <= g.animationFinishedAt) return; // available moves moves = g.c.moves({ verbose: true }); // filter moves if any pieces are a priority if (pieceMovePriority.length > 0) { let ps = moves.filter((m) => priorityPieces.includes(m.piece)); if (ps.length > 0) moves = ps; } if ( inputs.strategy == "Prioritize Captures" || inputs.strategy == "Avoid Captures" ) { let ps = moves.filter( (m) => m.flags.includes("c") == (inputs.strategy == "Prioritize Captures") ); if (ps.length > 0) moves = ps; } // use the opening first or randomly pick a move if (g.opening && g.move <= g.opening.length) { move = g.opening[g.move - 1]; } else { if (g.c.turn() == "w" || !useGetRandomValues) { move = moves[Math.floor(Math.random() * moves.length)]; } else { move = moves[ Math.floor( (window.crypto.getRandomValues(new Uint32Array(1)) / 2 ** 32) * moves.length ) ]; } // if a pawn is on the promotion square; promote to one of the choices (or default to queen) if (move.flags.includes("p")) { move.promotion = randpiece( promotionChoices.length > 0 ? promotionChoices : ["Queen"] ); } } // update the internal board state g.c.move(move); // use .move() so the last move is highlightable if the game is over g.b.move(move.from, move.to); // manually set the board state to resolve any promotions (just using .set() doesn't highlight the lastMove) g.b.set({ fen: g.c.fen() }); // finialize the pgn, display, and unqueue this game when its over if (g.c.game_over()) { mutable completedGames++; // only highlight last move when game is over; otherwise the flickering is jarring g.b.set({ highlight: { lastMove: true } }); let result = ""; let reason = ""; if (g.c.in_draw()) { reason = "Draw: "; if (g.c.insufficient_material()) { reason += "Insufficient Material"; } else if (g.c.in_threefold_repetition()) { reason += "Threefold Repetition"; } else { reason += "50-moves"; } } if (g.c.in_stalemate()) { reason = "Draw: Stalemate"; } let ro = { white: 0, black: 0, reason: "" }; if (g.c.in_checkmate()) { reason = "Checkmate"; if (g.c.turn() == "w") { result = "0-1"; ro.black = 1; } else { result = "1-0"; ro.white = 1; } } else { result = "½-½"; ro.white = 0.5; ro.black = 0.5; } g.c.header("Result", result); g.c.header("Result Reason", reason); ro.reason = reason; results.push(ro); g.e.getElementsByClassName( "message" )[0].innerHTML = `${reason}
${result}`; activeGames--; } // increment move number g.move++; if (!config.includes("Synchronize Animations")) { let d = delay + Math.floor( Math.random() * (delay + delay - (delay - delay)) + (delay - delay) ); g.animationFinishedAt = Date.now() + d; g.b.set({ animation: { duration: d } }); } }); // observable animation pattern yield container; // slow down the loop await Promises.tick(delay); } console.log("finished"); }32:T707,viewof stackedBar = { console.log("graph"); const height = 60; // rerender when a game is completed completedGames; let data = []; // set default data before games are complete to display a placeholder graph if (results.length == 0) { data.push({ color: "white", score: 0, reason: "" }); data.push({ color: "black", score: 0, reason: "" }); } // transform the data for vega results.forEach((r) => { if (r.white == 0.5) { data.push({ color: "white", score: 0.5, reason: r.reason }); data.push({ color: "black", score: 0.5, reason: r.reason }); } else if (r.white == 1) { data.push({ color: "white", score: 1, reason: r.reason }); } else { data.push({ color: "black", score: 1, reason: r.reason }); } }); return vl .data(data) .height(height) .width(width - 300) // subtract legend width .layer([ vl .markBar() .encode( vl.y().fieldO("color").axis({ grid: false, offset: 2 }).title(""), vl.x().sum("score").axis(null).title("score"), vl.color().fieldO("reason").title(""), vl.tooltip([ vl.tooltip().fieldO("reason").title("Reason"), vl.tooltip().field("score").sum("score").title("Score"), vl.tooltip().field("score").count("score").title("Games") ]) ), vl.markText({ dx: 5, align: "left" }).encode( vl.y().fieldO("color"), vl.x().sum("score"), vl .text() .sum("score") .condition({ test: "datum['sum_score'] === 0", value: "" }) // hide if no data ) ]) .config({ view: { stroke: null }, legend: { disable: results.length == 0 } }) // remove border and disable legend if no real data .render(); }33:T98f,viewof opening = { const chess = new chessjs(); let t = Inputs.text({ width: width, value: "", label: md`[Opening](https://en.wikipedia.org/wiki/Chess_opening) [PGN](https://en.wikipedia.org/wiki/Portable_Game_Notation) / [FEN](https://en.wikipedia.org/wiki/Forsyth–Edwards_Notation)`, datalist: [ "Evans Gambit: 1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. b4", "Pirc Defense: 1. e4 d6 2. d4 Nf6 3. Nc3 g6", "Queen's Gambit: 1. d4 d5 2. c4", "Ruy Lopez: 1. e4 e5 2. Nf3 Nc6 3. Bb5", "Scholar's Mate: 1. e4 e5 2. Qh5 Nc6 3. Bc4 Nf6 4. Qxf7", "King and Pawn Endgame: k7/8/8/4P3/3p4/8/8/7K w - - 0 1", "Knitemare: nnnnknnn/nnnnnnnn/8/8/8/8/NNNNNNNN/NNNNKNNN w - - 0 1", "Pawns!: ppppkppp/pppppppp/pppppppp/pppppppp/8/8/PPPPPPPP/RNBQKBNR w KQ - 0 1" ] }); t.querySelector("div").append( html`` ); let input = t.querySelector("input"); const button = html``; input.after(button); t.onsubmit = (e) => { console.log("onsubmit"); input.value = ""; t.value = input.value; e.preventDefault(); t.dispatchEvent(new Event("input")); }; input.oninput = (e) => { // remove the opening label when it's selected if (input.value.split(":").length > 1) { input.value = input.value.split(": ")[1]; } // TODO ignore insignificant chars from reloading games (spaces, etc) if (input.value.length == 0) { t.querySelector("output.error").innerHTML = ""; t.value = input.value; } else if (input.value.includes("/")) { // FEN if (chess.load(input.value)) { t.querySelector("output.error").innerHTML = ""; t.value = input.value; } else { t.querySelector("output.error").innerHTML = "Invalid FEN"; // don't reload/restart the games if the pgn is invalid to prevent flickering while typing e.stopPropagation(); return false; } } else { // PGN if (chess.load_pgn(input.value)) { t.querySelector("output.error").innerHTML = ""; t.value = input.value; } else { t.querySelector("output.error").innerHTML = "Invalid PGN"; // don't reload/restart the games if the pgn is invalid to prevent flickering while typing e.stopPropagation(); return false; } } }; return t; }34:T56a,games = { console.log("game generation"); // reset results mutable completedGames = 0; results.length = 0; // restart the game when these config change config; promotionChoices; pieceMovePriority; let gameOpening = null; if (openingPgn) { const chess = new chessjs(); if (chess.load_pgn(openingPgn)) { gameOpening = chess.history(); } } let gs = []; for (let g = 1; g <= numGames; g++) { let game = {}; game.e = html`

`; game.c = new chessjs(); game.opening = gameOpening; game.e.onclick = function (e) { // toggle pgn display mutable displayPgn = mutable displayPgn ? false : true; game.c.header("FEN", game.c.fen()); document.getElementsByClassName("pgn")[0].innerHTML = game.c.pgn({ max_width: 1, newline_char: "\n" }); }; game.b = chessground.Chessground(game.e, { viewOnly: true, // highlighting is jarring at high speed, so disable it highlight: { lastMove: false, check: false }, animation: { enabled: delay > 50, duration: delay }, coordinates: false }); // after chessground initialization since it replaces everything in the div game.e.prepend(html`

`); initGame(game); gs.push(game); } return gs; }35:[] 2f:{"title":"Random Chess Simul","cells":[{"id":568,"value":"{\n let w =\n \"[Math.random()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)\";\n\n let b = useGetRandomValues\n ? \"[Crypto.getRandomValues()](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues)\"\n : w;\n\n return md`# Random [Chess Simul](https://en.wikipedia.org/wiki/Simultaneous_exhibition)\n\nCandidate moves generated by [chess.js](https://github.com/jhlywa/chess.js), selected using ${b} for Black and ${w} for White, then displayed with [chessground](https://github.com/ornicar/chessground).\n
Click a board to display its [PGN](https://en.wikipedia.org/wiki/Portable_Game_Notation).`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1540,"value":"{\n // rerender when a game is completed\n completedGames;\n\n return md`### Score: ${results.reduce(\n (m, o) => (m += o.white),\n 0\n )} - ${results.reduce((m, o) => (m += o.black), 0)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"md`### Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"viewof config = Inputs.checkbox(\n [\n \"Synchronize Animations\",\n \"use Crypto.getRandomValues()\",\n \"Restart Completed Games\"\n ],\n {\n label: \"Config\",\n value: [\"use Crypto.getRandomValues()\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"viewof inputs = Inputs.form({\n strategy: Inputs.select([\"\", \"Prioritize Captures\", \"Avoid Captures\"], {\n label: \"Strategy\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"viewof pieceMovePriority = Inputs.checkbox(\n [\"Pawn\", \"Bishop\", \"Knight\", \"Rook\", \"Queen\", \"King\"],\n { label: \"Piece Move Priority\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"viewof promotionChoices = Inputs.checkbox(\n [\"Bishop\", \"Knight\", \"Rook\", \"Queen\"],\n { label: \"Promotion Choices\", value: [\"Queen\"] }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof numGames = Inputs.range([1, 20], {\n step: 1,\n value: Math.floor(width / (size + 5)) * 2, // default to two rows of games\n label: \"Number of Games\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"// TODO don't restart games when this changes\nviewof size = Inputs.range([50, 500], {\n step: 1,\n value: Math.min(width / 200) < 2 ? Math.floor((width - 10) / 2) : 200, // default to a minimum of two boards per row\n label: \"Board Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"// TODO don't restart games when delay changes\nviewof delay = Inputs.range([10, 500], {\n step: 10,\n value: 100,\n label: \"Animation Delay\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"md`### data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"results = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"// helper to trigger the rerender of other cells when a game is completed\nmutable completedGames = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"mutable displayPgn = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"useGetRandomValues = window.crypto &&\n window.crypto.getRandomValues &&\n config.includes(\"use Crypto.getRandomValues()\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"openingPgn = !opening.includes(\"/\") ? opening.trim() : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"openingFen = opening.includes(\"/\") ? opening.trim() : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"md`### helper functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"pieceToNotation = (p) => {\n switch (p) {\n case \"Queen\":\n return \"q\";\n case \"Rook\":\n return \"r\";\n case \"Bishop\":\n return \"b\";\n case \"Knight\":\n return \"n\";\n case \"Pawn\":\n return \"p\";\n case \"King\":\n return \"k\";\n default:\n return p;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"randpiece = (pieces) => {\n console.log(\"randpiece\");\n\n pieces = pieces.map((p) => pieceToNotation(p));\n return pieces[Math.floor(Math.random() * pieces.length)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"initGame = (g) => {\n console.log(\"init game\");\n\n g.move = 1;\n\n g.e.getElementsByClassName(\"message\")[0].innerHTML = \"\";\n g.b.set({ highlight: { lastMove: false } });\n\n g.c.reset();\n if (openingFen) g.c.load(openingFen);\n\n g.b.set({ fen: g.c.fen() });\n\n // https://en.wikipedia.org/wiki/Portable_Game_Notation\n g.c.header(\"Event\", `Random Chess Simul: ${g.e.getAttribute(\"title\")}`);\n g.c.header(\"White\", \"Math.random()\");\n g.c.header(\n \"Black\",\n useGetRandomValues ? \"Crypto.getRandomValues()\" : \"Math.random()\"\n );\n let d = new Date();\n g.c.header(\"Date\", d.toISOString().substr(0, 10).replaceAll(\"-\", \".\"));\n g.c.header(\"Time\", d.toISOString().substr(11, 8));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"md`### dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1718,"value":"chessjs = require(\"chess.js@0.12\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"chessground = import(\n \"https://unpkg.com/chessground@8.1.4/chessground.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"html`\n

chessground css

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"html`\n

chessground css

custom css