2b:null 2c:["$","title",null,{"children":"Cohan Circle | Parcly Taxel | Observable"}] 31:T537,panel = { const elem = html`

`, entry = elem.state; elem.mix.addEventListener("click", () => { let res = d3.shuffle(d3.range(19)); mutable pieces = res; loader.state.value = encode(res); mutable shuffled = true; }); elem.reset.addEventListener("click", () => { let res = d3.range(19); mutable pieces = res; loader.state.value = encode(res); mutable shuffled = false; }); elem.load.addEventListener("click", () => { let res = decode(loader.state.value); if (res != null) { mutable pieces = res[0]; viewof mode.value = res[1]; viewof mode.dispatchEvent(new CustomEvent("input")); } }); elem.solve.addEventListener("click", () => { mutable shuffled = false; let solution = solve(mutable pieces, mode); mutable solveSeq = md`\`${encode(pieces, mode)}: ${solution.map(m => ["L", "L'", "R'", "R"][m]).join(" ")} (length ${solution.length})\`` // An ungainly hack to animate the solution, but it works solution.forEach((m, i) => { setTimeout(() => { mutable pieces = mutable pieces.map(v => perms[m][v]); }, 500 * (i + 1)); }); }); return elem; }32:[] 2f:{"id":"b82c60e2bf7c4605","slug":"cohan-circle","title":"Cohan Circle","thumbnail":"7125f7bca8ca37c99277413d46ea1975cebc97357ab27d0696c543954fac1e0b","access_level":"public","create_time":"$D2020-04-27T08:42:17.579Z","update_time":"$D2020-07-24T03:10:50.405Z","view_time":null,"first_public_time":"$D2020-04-27T14:59:36.216Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e759e4a12aa933b5","login":"parcly-taxel","name":"Parcly Taxel","avatar_url":"https://avatars-next.observableusercontent.com/32a77e2f60985380567e17301bf0f95f90e39e11ac03aa7733183d4205bfb744","tier":"starter_2024"},"version":1044,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfa8d9572ffc6bf3","login":"parcly-taxel","name":"Parcly Taxel","avatar_url":"https://avatars-next.observableusercontent.com/32a77e2f60985380567e17301bf0f95f90e39e11ac03aa7733183d4205bfb744","tier":null}],"members":[{"type":"individual","id":"bfa8d9572ffc6bf3","login":"parcly-taxel","name":"Parcly Taxel","avatar_url":"https://avatars-next.observableusercontent.com/32a77e2f60985380567e17301bf0f95f90e39e11ac03aa7733183d4205bfb744","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cohan Circle","cells":[{"id":0,"value":"md`# Cohan Circle\n\n[Jaap Scherphuis's puzzles website](https://www.jaapsch.net/puzzles) contains quite a few JavaScript programs simulating puzzles. However, the code behind these programs has become antiquated – GIF files for images, explicit looping, no ES6 or even ES5 features and so on. Thus I made this implementation of [Cohan Circle and Arusloky](https://www.jaapsch.net/puzzles/cohan.htm) from scratch using much more modern tools: SVG and D3.\n\n_Click at the corners of the display below to turn the discs._\n\n${solved && shuffled ? md`# YOU WIN!` : md``}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"viewof mode = radio({options: [{label: \"Cohan Circle\", value: \"cohan\"}, {label: \"Arusloky\", value: \"aru\"}], value: \"cohan\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n const svg = d3.select(DOM.svg(width, 0.6875 * width))\n .attr(\"viewBox\", `-1.1 -1.1 3.2 2.2`);\n svg.selectAll(\"path\")\n .data(pieces)\n .join(\"path\")\n .attr(\"d\", pieceD)\n .style(\"fill\", (_, i) => pieceFill(i));\n \n svg.on(\"click\", function turn() {\n const p = d3.mouse(this),\n i = (p[0] < 0 ? 0 : p[0] > 1 ? 2 : 4) + (p[1] < 0 ? 0 : 1);\n if (i < 4) {\n let res = pieces.map(v => perms[i][v]);\n mutable pieces = res;\n loader.state.value = encode(res);\n if (solved && shuffled) {\n mutable shuffled = false;\n }\n }\n });\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"loader = html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"mutable solveSeq = md``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"md`----\n_If you enjoyed playing this game, you might want to read my other notebook on [how the automated solver works](https://observablehq.com/@parcly-taxel/solving-the-cohan-circle)._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"{\n mode;\n loader.state.value = encode(pieces);\n return md`## Appendix`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"perms = [[5, 1, 0, 4, 9, 14, 6, 7, 3, 13, 10, 2, 8, 12, 17, 15, 16, 11, 18],\n [2, 1, 11, 8, 3, 0, 6, 7, 12, 4, 10, 17, 13, 9, 5, 15, 16, 14, 18],\n [0, 4, 2, 3, 13, 9, 5, 1, 8, 14, 6, 11, 12, 18, 15, 10, 7, 17, 16],\n [0, 7, 2, 3, 1, 6, 10, 16, 8, 5, 15, 11, 12, 4, 9, 14, 18, 17, 13]];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"function pieceD(d) {\n const a = Math.sqrt(3) / 2,\n nodes = [[-0.5, -a], [0.5, -a], [1.5, -a],\n [-1, 0], [0, 0], [1, 0], [2, 0],\n [-0.5, a], [0.5, a], [1.5, a]],\n edges = [[0, 1], [1, 2], [0, 3], [0, 4], [1, 4], [1, 5], [2, 5], [2, 6],\n [3, 4], [4, 5], [5, 6],\n [3, 7], [4, 7], [4, 8], [5, 8], [5, 9], [6, 9], [7, 8], [8, 9]];\n var x0 = nodes[edges[d][0]][0],\n y0 = nodes[edges[d][0]][1],\n x1 = nodes[edges[d][1]][0],\n y1 = nodes[edges[d][1]][1];\n return `M${x0} ${y0}A1 1 0 0 1 ${x1} ${y1} 1 1 0 0 1 ${x0} ${y0}Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"function pieceFill(i) {\n return [0, 2, 5, 11, 14, 17].includes(i) ? \"#230f38\"\n : [1, 4, 7, 13, 16, 18].includes(i) ? \"#576ab7\"\n : (i == 9 && mode == \"cohan\") ? \"#fde85f\"\n : \"#6dc6fb\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"// Piece i lies at position pieces[i]\nmutable pieces = d3.range(19)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"solved = {\n // Swapping whole sets of pieces produces another valid solution,\n // so there are 6 solutions for Cohan Circle and 2 for Arusloky\n const check = [0, 2, 5, 11, 14, 17, 1, 4, 7, 13, 16, 18, 3, 6, 8, 10, 12, 15];\n var arr = [[0, 2, 5, 11, 14, 17].map(i => pieces[i]).sort(d3.ascending),\n [1, 4, 7, 13, 16, 18].map(i => pieces[i]).sort(d3.ascending)];\n if (mode == \"cohan\") {\n arr.push([3, 6, 8, 10, 12, 15].map(i => pieces[i]).sort(d3.ascending));\n }\n arr.sort((a, b) => a[0] - b[0]);\n arr = arr.flat();\n return arr.every((d, i) => d == check[i]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"mutable shuffled = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"function encode(state) {\n // Positions of the six deep purple pieces, then the cobalt blues,\n // then (for Cohan Circle) the yellow piece, all in order.\n // Position 0 is a, 1 is b, 2 is c, etc.\n var s1 = [0, 2, 5, 11, 14, 17].map(i => state[i]).sort(d3.ascending),\n crits = s1.concat([1, 4, 7, 13, 16, 18].map(i => state[i]).sort(d3.ascending));\n if (mode == \"cohan\") {\n crits.push(state[9]);\n }\n return String.fromCharCode(...crits.map(x => 0x61 + x));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"function decode(code) {\n const order = [0, 2, 5, 11, 14, 17, 1, 4, 7, 13, 16, 18, 9];\n if (!/^[a-s]{12,13}$/.test(code)) {\n return null;\n }\n const crits = Array.from(code).map(c => c.charCodeAt(0) - 0x61);\n if (new Set(crits).size != crits.length) {\n return null;\n }\n // Determine what kind of game is asked for\n const type = crits.length == 12 ? \"aru\" : \"cohan\",\n result = d3.range(19).fill(-1),\n remaining = new Set(d3.range(19));\n crits.forEach((v, i) => {result[order[i]] = v; remaining.delete(v)});\n remaining.forEach(v => result[result.indexOf(-1)] = v);\n return [result, type];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"import {solve} from \"@parcly-taxel/solving-the-cohan-circle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"