30:T2739,function initializeRotaGame({ playWithComputer, size = 640, margin = 20, strokeWidth = 2, slotRadius = 30 } = {}) { const rotaMachine = xs.createMachine( { ...machineSpec, context: { playingWithComputer: playWithComputer, player: undefined, computersPiece: undefined, pieceIndex: undefined, positions: nextPositions(), won: false } }, { actions: { resetPieces: xs.assign(({ context, event }) => { return { player: undefined, pieceIndex: undefined, positions: nextPositions(), won: false }; }), setPlayer: xs.assign(({ context, event }) => { const { playingWithComputer } = context; const { piece } = event; return { player: piece, computersPiece: piece === "a" ? "b" : "a" }; }), setNextPlayer: xs.assign(({ context }) => { const { player } = context; return { player: player === "a" ? "b" : "a" }; }), setPiece: xs.assign(({ context, event }) => { const { index } = event; return { pieceIndex: index }; }), movePiece: xs.assign(({ context, event }) => { const { pieceIndex, positions } = context; const { index } = event; return { positions: nextPositions(positions, pieceIndex, index) }; }), moveComputersPiece: xs.assign(({ context }) => { const { positions, computersPiece } = context; const [src, dest] = findComputersMove(positions, computersPiece); return { positions: nextPositions(positions, src, dest) }; }), setWinner: xs.assign(({ context }) => { return { player: findWinner(context.positions), won: true }; }) }, guards: { checkWin: ({ context }) => findWinner(context.positions), playersPiece: ({ context, event }) => { const { player } = context; const { piece } = event; return piece === player; }, isComputersTurn: ({ context }) => { const { playingWithComputer, player, computersPiece } = context; return playingWithComputer && player === computersPiece; } } } ); const actor = xs.createActor(rotaMachine); const maxRadius = (size - 2 * margin - 2 * slotRadius) / 2; const radius = maxRadius - strokeWidth / 2; const root = d3 .create("svg") .attr("width", size) .attr("height", size) .attr("viewBox", [-size / 2, -size / 2, size, size]) .attr("class", "rota-game-board"); // Symbols const pieceRadius = slotRadius; const pieceSymbols = root .selectAll(".piece-symbol") .data(["a", "b", "target"]) .join("symbol") .attr("class", "piece-symbol") .attr("id", (d) => `piece-${d}`) .attr("viewBox", [ -pieceRadius, -pieceRadius, 2 * pieceRadius, 2 * pieceRadius ]); pieceSymbols.each(function (d) { const el = d3.select(this); let fill = palette[d] ?? "#ff0"; const fillAccent = d3.color(fill).brighter(1.25); const bgRadius = pieceRadius - 2 * strokeWidth; const bg = el.append("circle").attr("r", bgRadius).attr("fill", fill); if (d === "a") { el.append("circle") .attr("r", bgRadius / 3) .attr("fill", fillAccent); } else if (d === "b") { const rectSize = 0.8 * (2 / 3) * bgRadius; el.append("rect") .attr("width", rectSize) .attr("height", rectSize) .attr("x", -rectSize / 2) .attr("y", -rectSize / 2) .attr("fill", fillAccent) .attr("transform", "rotate(45)"); } else if (d === "target") { // bg.attr("r", 0.8 * bgRadius); } }); // Background root .append("rect") .attr("width", size) .attr("height", size) .attr("x", -size / 2) .attr("y", -size / 2) .attr("fill", palette.bg); const svg = root.append("g").attr("class", "canvas"); const board = svg.append("g").attr("class", "board"); const pieces = svg.append("g").attr("class", "pieces"); const legend = svg.append("g").attr("class", "legend"); const numOfOuterSlots = 8; const slotAngles = d3 .range(numOfOuterSlots) .map((d) => (2 * Math.PI * d) / numOfOuterSlots); const lines = 4; const lineAngles = d3.range(lines).map((d) => (Math.PI * d) / lines); // Inner slot board.append("circle").attr("r", slotRadius).attr("fill", palette.fg); // Outline board .append("circle") .attr("r", radius) .attr("fill", "none") .attr("stroke", palette.fg) .attr("stroke-width", 3 * strokeWidth); // Inner lines board .selectAll(".inner-line") .data(lineAngles) .join("line") .attr("class", "inner-line") .attr("x1", -radius) .attr("x2", radius) .attr("stroke", palette.fg) .attr("stroke-width", strokeWidth * 3) .attr("transform", (d) => `rotate(${radians2degree(d)})`); const outerSlots = board .selectAll(".outer-slot") .data(slotAngles) .join("g") .attr("class", "outer-slot"); // Outer slots outerSlots .append("circle") .attr("cx", (d) => radius * Math.cos(d)) .attr("cy", (d) => radius * Math.sin(d)) .attr("r", slotRadius) .attr("fill", palette.fg); // Outline - notch board .append("circle") .attr("r", radius) .attr("fill", "none") .attr("stroke", palette.bg) .attr("stroke-width", strokeWidth); // Outer slots - notch outerSlots .append("circle") .attr("cx", (d) => radius * Math.cos(d)) .attr("cy", (d) => radius * Math.sin(d)) .attr("r", slotRadius - strokeWidth) .attr("fill", palette.bg); board .selectAll(".inner-line-notch") .data(lineAngles) .join("line") .attr("class", "inner-line-notch") .attr("x1", -radius) .attr("x2", radius) .attr("stroke", palette.bg) .attr("stroke-width", strokeWidth) .attr("transform", (d) => `rotate(${radians2degree(d)})`); // Inner slot - notch board .append("circle") .attr("r", slotRadius - strokeWidth) .attr("fill", palette.bg); // Legend const legendPieceRadius = pieceRadius / 2; const legendPieceX = -(maxRadius + 2 * legendPieceRadius); const legendTextX = legendPieceX + legendPieceRadius * 2.25; const legendTextXOnlyText = legendPieceX; const legendPiece = legend .append("use") .attr("class", "piece") .attr("width", 2 * legendPieceRadius) .attr("height", 2 * legendPieceRadius) .attr("x", legendPieceX) .attr("y", maxRadius); // .attr("href", `#piece-target`); const legendText = legend .append("text") .attr("class", "legend-text") .attr("x", legendTextX) .attr("y", maxRadius + legendPieceRadius) .attr("dominant-baseline", "central") .attr("fill", palette.text) .attr("font-size", "18px") .attr("font-weight", "600"); // .text("hello"); function updateBoard(context, showTargets) { const { pieceIndex, positions } = context; const positionsFlat = ( showTargets ? addTargetPositions(positions, pieceIndex) : positions ).flat(); const angles = [ [(Math.PI / 4) * 5, (Math.PI / 4) * 6, (Math.PI / 4) * 7], // row 1 [(Math.PI / 4) * 4, undefined, 0], // row 2 [(Math.PI / 4) * 3, (Math.PI / 4) * 2, Math.PI / 4] // row 3 ].flat(); pieces .selectAll(".piece") .data(angles) .join("use") .attr("class", "piece") .attr("width", 2 * pieceRadius) .attr("height", 2 * pieceRadius) .each(function (angle, i) { const piece = d3.select(this); let x = 0; let y = 0; let type = positionsFlat[i]; if (angle !== undefined) { x = radius * Math.cos(angle); y = radius * Math.sin(angle); } piece .attr("x", x - pieceRadius) .attr("y", y - pieceRadius) .attr("data-position-index", i) .attr("data-piece-type", type) .attr("href", type ? `#piece-${type}` : null); }); } function updateSVGAttributes(context) { const { player, won } = context; root.attr("data-player", player); root.attr("data-won", won); } function updateLegend(state, context) { const { player } = context; if (state === "start") { legendText.text("Pick a piece to start").attr("x", legendTextXOnlyText); } else if (state === "pieces") { legendText.text("Plays").attr("x", legendTextX); } else if (state === "targets") { legendText.text("Pick a position to move").attr("x", legendTextX); } else if (state === "won") { legendText.text("Wins!").attr("x", legendTextX); } if (state !== "start") { legendText.attr("x", legendTextX); } legendPiece.attr("href", `#piece-${player}`); } actor.subscribe((s) => { const { context, value } = s; console.log(`Rota Machine: ${JSON.stringify(value)}`, s.context); updateBoard(context, value === "targets"); updateSVGAttributes(context); updateLegend(value, context); }); actor.start(); root.on( "click", function (e) { for ( var target = e.target; target && target !== this; target = target.parentNode ) { if (target.matches(".pieces .piece")) { const pIndex = target?.dataset.positionIndex; const pType = target?.dataset.pieceType; if (["a", "b"].includes(pType)) { actor.send({ type: "PICK_PIECE", index: pIndex, piece: pType }); } else if (["target"].includes(pType)) { actor.send({ type: "PICK_TARGET", index: pIndex }); } // break; return; } } actor.send({ type: "CANCEL" }); }, false ); return Object.assign(root.node(), { actor }); }31:T5a6,function validNextPositions(positions, index) { const { x, y } = indexToCoords(index, 3); const nextPositionIndices = []; // Center if ((x !== 1 || y !== 1) && positions[1][1] === undefined) { nextPositionIndices.push(coordsToIndex(1, 1, 3)); } if (x === 1 && y === 1) { // Diagonals targets, if current is center // Top Left if (positions[0][0] === undefined) { nextPositionIndices.push(coordsToIndex(0, 0, 3)); } if (positions[0][2] === undefined) { nextPositionIndices.push(coordsToIndex(2, 0, 3)); } if (positions[2][0] === undefined) { nextPositionIndices.push(coordsToIndex(0, 2, 3)); } if (positions[2][2] === undefined) { nextPositionIndices.push(coordsToIndex(2, 2, 3)); } } // Top const xt = x; const yt = y - 1; if (yt >= 0 && positions[yt][xt] === undefined) { nextPositionIndices.push(coordsToIndex(xt, yt, 3)); } // Right const xr = x + 1; const yr = y; if (xr <= 2 && positions[yr][xr] === undefined) { nextPositionIndices.push(coordsToIndex(xr, yr, 3)); } // Bottom const xb = x; const yb = y + 1; if (yb <= 2 && positions[yb][xb] === undefined) { nextPositionIndices.push(coordsToIndex(xb, yb, 3)); } // Left const xl = x - 1; const yl = y; if (xl >= 0 && positions[yl][xl] === undefined) { nextPositionIndices.push(coordsToIndex(xl, yl, 3)); } return _.uniq(nextPositionIndices); }32:T61a,function findComputersMove(positions, computersPiece) { const opponentsPiece = computersPiece === "a" ? "b" : "a"; const possibleMoves = getPossibleMovesFor(computersPiece, positions); // 1. If next move can win, play that move const winnableMoves = possibleMoves.filter((move) => isTheMoveWinnableFor(computersPiece, positions, move) ); // console.log("winnableMoves", winnableMoves); if (winnableMoves.length) { return random.pick(winnableMoves); } // 2. If any of the next moves of opponent wins, block const possibleOpponentMoves = getPossibleMovesFor(opponentsPiece, positions); const opponentWinnableMoves = possibleOpponentMoves.filter((move) => isTheMoveWinnableFor(opponentsPiece, positions, move) ); const blockingMoves = possibleMoves.filter(([_, dest]) => opponentWinnableMoves.find(([_, oppDest]) => dest === oppDest) ); // console.log("blockingMoves", blockingMoves); if (blockingMoves.length) { return random.pick(blockingMoves); } // 3. If move to center, play const centreMoves = possibleMoves.filter(([_, dest]) => dest === 4); if (centreMoves.length) { return random.pick(centreMoves); } // 4. Make a random move, with lower weightage for move from centre const weightedSet = possibleMoves.map((move) => ({ value: move, // Lower weight for moves from the centre weight: move[0] === 4 ? 0.125 / possibleMoves.length : 1 / possibleMoves.length })); console.log(weightedSet); // 5. Play a random move return random.weightedSet(weightedSet); }33:T700,machineSpec = ({ context: { lastPlayedBy: "" }, id: "Roto", initial: "start", states: { start: { entry: { type: "resetPieces", params: {} }, on: { PICK_PIECE: { target: "targets", actions: [ { type: "setPlayer", params: {} }, { type: "setPiece", params: {} } ] } } }, targets: { on: { CANCEL: { target: "pieces" }, PICK_TARGET: { target: "pieces", actions: [ { type: "movePiece", params: {} }, { type: "setNextPlayer", params: {} } ] }, PICK_PIECE: { target: "targets", guard: "playersPiece", actions: { type: "setPiece", params: {} } } } }, pieces: { always: [ { target: "won", guard: "checkWin", actions: { type: "setWinner" }, reenter: false }, { target: "pieces", guard: "isComputersTurn", actions: [ { type: "moveComputersPiece" }, { type: "setNextPlayer" } ], reenter: false } ], on: { PICK_PIECE: { target: "targets", guard: "playersPiece", actions: { type: "setPiece", params: {} } } } }, won: {} }, on: { RESTART: { target: ".start" } } })34:[] 2e:{"title":"Rota","cells":[{"id":0,"value":"# Rota","pinned":false,"hidden":false,"mode":"md"},{"id":705,"value":"Rota is an easy strategy board game, played between _two players._\nIt’s believed to be originated in Rome.\n","pinned":false,"hidden":false,"mode":"md"},{"id":707,"value":"

Game rules

\n\n

Player take turns to move a piece onto the next empty slot (along spokes or\n circle).
**Goal:** The first player to place three pieces in a row across the centre wins.

\n","pinned":false,"hidden":false,"mode":"md"},{"id":962,"value":"viewof playWithComputer = Inputs.radio(\n new Map([\n [\"🤖 Computer\", true],\n [\"🧠 Another player\", false]\n ]),\n { label: \"Play against\", value: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"game = initializeRotaGame({\n palette,\n playWithComputer\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"viewof restartButton = Inputs.button(\"Restart\", {\n reduce: (x) => {\n game.actor.send({ type: \"RESTART\" });\n return x + 1;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":820,"value":"## Notes","pinned":false,"hidden":false,"mode":"md"},{"id":1077,"value":"I came across the game\n[Rota](https://www.getty.edu/education/college/ancient_rome_at_home/pdf/rota_game.pdf),\na couple of weeks ago. Since the rules were simple, I wanted to recreate as an\nObservable notebook.\n\nThere are many rule variations. I went with the variation common in India, where\nthe game is started with a preset piece positions.\n\nThe computer player _is not smart._ It plays based these (rules:\n\n1. If there is a winning move, play that move\n2. If there is a winning move for the opponent and a move can block it, make\n that move\n3. If it is possible to move to the centre, play that move\n4. Otherwise, play a random valid move, with lower randomness weight for the piece in centre\n\nHave fun playing!\n","pinned":false,"hidden":false,"mode":"md"},{"id":856,"value":"### References\n\n- [Snap! Language / Beauty and Joy of Computing / Creating a Computer Player](https://bjc.edc.org/March2019/bjc-r/cur/programming/5-algorithms/tic-tac-toe/2-creating-computer-player.html?topic=nyc_bjc%2F5-algorithms.topic&course=bjc4nyc.html&novideo&noassignment)","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":701,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"nextPositions(\n [\n [\"a\", \"b\", \"a\"],\n [\"b\", \"a\", undefined],\n [undefined, undefined, \"b\"]\n ],\n 4,\n 7\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"function nextPositions(currentPositions, srcIndex, destIndex) {\n const starting = [\n [\"a\", undefined, \"b\"],\n [\"a\", undefined, \"b\"],\n [\"a\", undefined, \"b\"]\n ];\n\n if (currentPositions === undefined) {\n return starting;\n }\n\n const positions = _.cloneDeep(currentPositions);\n\n const src = indexToCoords(srcIndex, 3);\n const dest = indexToCoords(destIndex, 3);\n\n if (\n positions[dest.y][dest.x] === undefined ||\n positions[dest.y][dest.x] === \"target\"\n ) {\n positions[dest.y][dest.x] = positions[src.y][src.x];\n positions[src.y][src.x] = undefined;\n }\n\n return positions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"function addTargetPositions(positions, index, targetValue = \"target\") {\n const { x, y } = indexToCoords(index, 3);\n\n // Not sure if this is necessary\n const nextPositions = _.cloneDeep(positions);\n\n const nextIndices = validNextPositions(positions, index);\n\n nextIndices.forEach((index) => {\n const { x, y } = indexToCoords(index, 3);\n nextPositions[y][x] = targetValue;\n });\n\n return nextPositions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":900,"value":"validNextPositions(\n [\n [\"a\", undefined, \"b\"],\n [\"a\", \"a\", \"b\"],\n [undefined, undefined, \"b\"]\n ],\n 4\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":889,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"findWinner([\n [\"a\", \"a\", \"a\"],\n [undefined, undefined, undefined],\n [\"b\", \"b\", \"b\"]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1040,"value":"findWinner([\n [\"a\", undefined, \"b\"],\n [undefined, \"a\", undefined],\n [\"b\", \"b\", \"a\"]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"function findWinner(positions, size = 3) {\n let lines = Array.from({ length: 4 }).map(() => []);\n for (let j = 0; j < size; j++) {\n for (let i = 0; i < size; i++) {\n if (i === j) {\n // Diagonal\n lines[0].push(positions[j][i]);\n }\n if (i === size - 1 - j) {\n // Diagonal 2\n lines[1].push(positions[j][i]);\n }\n if (j === Math.floor(size / 2)) {\n // Middle Row\n lines[2].push(positions[j][i]);\n }\n if (i === Math.floor(size / 2)) {\n // Middle Column\n lines[3].push(positions[j][i]);\n }\n }\n }\n\n lines = lines.map((l) => l.filter(Boolean));\n\n lines = lines.flatMap((l) => d3.groups(l, (d) => d));\n\n const key = lines.find(([_, arr]) => arr.length === size);\n return key !== undefined ? key[0] : key;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1001,"value":"getCurrentPiecePositions(nextPositions(), 'a')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1002,"value":"getCurrentPiecePositions(nextPositions(), \"b\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":999,"value":"function getCurrentPiecePositions(positions, piece) {\n return positions\n .flat()\n .map((p, index) => (p === piece ? index : undefined))\n .filter((d) => d !== undefined);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1060,"value":"getPossibleMovesFor(\"a\", nextPositions())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1057,"value":"function getPossibleMovesFor(piece, positions) {\n const indices = getCurrentPiecePositions(positions, piece);\n return indices\n .map((index) => {\n const targets = validNextPositions(positions, index);\n return targets.map((t) => [index, t]);\n })\n .flat();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":990,"value":"findComputersMove(nextPositions(), \"a\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":988,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1044,"value":"isTheMoveWinnableFor(\n \"a\",\n [\n [\"a\", undefined, \"b\"],\n [undefined, \"a\", \"a\"],\n [\"b\", \"b\", undefined]\n ],\n [5, 8]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1049,"value":"isTheMoveWinnableFor(\n \"a\",\n [\n [\"a\", undefined, \"b\"],\n [undefined, \"a\", \"a\"],\n [\"b\", \"b\", undefined]\n ],\n [4, 1]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1030,"value":"function isTheMoveWinnableFor(piece, positions, move) {\n const [src, dest] = move;\n const next = nextPositions(positions, src, dest);\n const winner = findWinner(next);\n return piece === winner;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"palette = ({\n fg: \"hsl(0, 0%, 70%)\",\n text: \"hsl(0, 0%, 35%)\",\n bg: \"hsl(0, 0%, 95%)\",\n a: \"hsl(215, 47%, 48%)\",\n b: \"hsl(6, 68%, 51%)\",\n target: \"hsl(153, 40%, 41%)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"coordsToIndex(1, 1, 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":868,"value":"function coordsToIndex(x, y, size) {\n if (size === undefined) {\n throw new Error(\"`size` is not provided\");\n }\n\n return y * size + x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"function indexToCoords(index, size) {\n if (size === undefined) {\n throw new Error(\"`size` is not provided\");\n }\n\n const x = index % size;\n const y = Math.floor(index / size);\n return { x, y };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"indexToCoords(4, 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"function radians2degree(radians) {\n return (radians * 180) / Math.PI;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":337,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"xs = import(\"https://cdn.jsdelivr.net/npm/xstate@5.0.0-beta.28/+esm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1021,"value":"import { CSRandom as random } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"import {footer} from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1121,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1124,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}