2b:null 2c:["$","title",null,{"children":"Pull-Push Puzzle (WIP) | x | Observable"}] 31:T404,viewof forceRules = listInput2({ values: [ { sourceKind: 0, targetKind: 1, radiusKind: 0, directionKind: 0 }, { sourceKind: 1, targetKind: 0, radiusKind: 1, directionKind: 3 }, { sourceKind: 1, targetKind: 0, radiusKind: 2, directionKind: 3 } ], defaultValue: { sourceKind: 0, targetKind: 1, radiusKind: 1, directionKind: 0 }, renderInput: (value) => forceEditor(value, colorMap), renderEntry: (input, remove) => html`

${input}

`, renderContainer: (add) => html`

`, render: (container, add) => html`

Edit force rules: ${container}

` })32:T5ef,display1 = { const space = spacetime[step % spacetime.length]; const forces = calcForces(space); const viewBox = [-15, -15, 30, 30]; const svg = d3 .create("svg") .style("border", "1px solid") .style("height", "600px") .attr("viewBox", viewBox); const defs = svg.append("svg:defs"); for (const color of colorMap) { addArrowMarker(defs, "arrow_" + color.substr(1), color); } const g = svg.append("g"); g.append("g") .selectAll("circle") .data(hexagonDots(viewBox[2])) .join("circle") .attr("cx", (qr) => hec.axialToFlatCart(qr)[0]) .attr("cy", (qr) => hec.axialToFlatCart(qr)[1]) .attr("r", 0.05); g.append("g") .selectAll("circle") .data(space) .join("circle") .attr("cx", ({ pos }) => hec.axialToFlatCart(pos)[0]) .attr("cy", ({ pos }) => hec.axialToFlatCart(pos)[1]) .attr("fill", ({ kind }) => colorMap[kind]) .attr("r", 0.5); g.append("g") .selectAll("path") .data(forces.filter(({ vec }) => vec3.len(vec) > 0)) .join("path") .attr("stroke", (f) => colorMap[f.target.kind]) .attr("stroke-width", 0.1) .attr("d", (force) => d3.line()([ hec.axialToFlatCart(force.target.pos), hec.axialToFlatCart(vec3.add([], force.target.pos, force.vec)) ]) ) .attr( "marker-end", (f) => `url(#arrow_${colorMap[f.target.kind].substr(1)})` ); svg.call( d3.zoom().on("zoom", ({ transform }) => g.attr("transform", transform)) ); return svg.node(); }33:T43b,

Todo

spawner impl -- a static position in space, that spawns buttons of a given kind (a condition to spawn?)
consumer impl -- a static position in space, that consumes all buttons of a given kind at that position
compose a cyclic task
write introduction and game goal text
correctly display multiple buttons on a single position
spawner in editor
consumer in editor
flip impl -- a button has a flippable multiplier +1/-1 applied on a force vector both from source and target
flip rule editor
merge impl -- a rule to transform button kinds like (buttonKind1, buttonKind2) => buttonKind3 if they are at the same position (and of the same flip?)
merge rule editor
?? annihilation impl -- a rule to annihilate two buttons if they are at the same position
?? appearance impl -- a rule to create a new button (if two buttons get on the same position? a button splits into two as some anti-annihilation?)
~~test~~

34:Tfc0,function forceEditor(initialValue, colorMap) { const force = { ...initialValue }; const viewBox = [-2.7, -2.7, 7.4, 5.4]; const svg = d3 .create("svg") .style("border", "1px solid") .style("height", "200px") .style("display", "block") .attr("viewBox", viewBox); const dispatchInput = () => svg.node().dispatchEvent(new CustomEvent("input")); const sourceKindAdd = (x) => { force.sourceKind += x; force.sourceKind %= colorMap.length; if (force.sourceKind < 0) force.sourceKind += colorMap.length; dispatchInput(); render(); }; const targetKindAdd = (x) => { force.targetKind += x; force.targetKind %= colorMap.length; if (force.targetKind < 0) force.targetKind += colorMap.length; dispatchInput(); render(); }; const radiusKindSet = (x) => { force.radiusKind = x; dispatchInput(); render(); }; const directionKindAdd = (x) => { force.directionKind += x; force.directionKind %= 6; if (force.directionKind < 0) force.directionKind += 6; dispatchInput(); render(); }; addArrowMarker(svg, "arrow", "blue"); const g = svg.append("g"); const dots = [...hexagonDots(3)]; function render() { g.selectAll("*").remove(); const forceDirectionGroup = g .append("g") .attr("transform", "translate(3.35)"); forceDirectionGroup .append("circle") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 0.01) .attr("r", 0.3) .on("mousedown", (ev) => { if (ev.button === 0 || ev.button === 2) { const dx = -(ev.button - 1); directionKindAdd(dx); } }) .on("contextmenu", (ev) => ev.preventDefault()); forceDirectionGroup .append("path") .attr("stroke", "blue") .attr("stroke-width", 0.1) .attr( "d", d3.line()([ [0, 0], hec.axialToFlatCart( hec.cubeRotate60CvTimes(hec.cubeFlatNorth, force.directionKind) ) ]) ) .attr("marker-end", "url(#arrow)") .attr("pointer-events", "none"); g.append("g") .selectAll("circle") .data(dots) .join("circle") .attr("cx", (pos) => hec.axialToFlatCart(pos)[0]) .attr("cy", (pos) => hec.axialToFlatCart(pos)[1]) .attr( "fill", (pos) => (vec3.len(pos) === 0 && colorMap[force.sourceKind]) || (getRadiusKind(pos) === force.radiusKind && colorMap[force.targetKind]) || "white" ) .attr("stroke", "black") .attr("stroke-width", 0.01) .on("mousedown", (ev, pos) => { if (ev.button === 0 || ev.button === 2) { const dx = -(ev.button - 1); if (vec3.len(pos) === 0) { sourceKindAdd(dx); } else { const rk = getRadiusKind(pos); if (rk === force.radiusKind) { targetKindAdd(dx); } else { if (rk !== undefined) { radiusKindSet(rk); } } } } ev.preventDefault(); dispatchInput(); }) .on("contextmenu", (ev) => ev.preventDefault()) .attr("r", 0.3); g.append("g") .selectAll("path") .data(dots) .join("path") .attr("stroke", "blue") .attr("stroke-width", 0.1) .attr("d", (pos) => { if (getRadiusKind(pos) === force.radiusKind) { const dir = getRadiusDirection[getRadiusKind(pos)](pos); return d3.line()([ hec.axialToFlatCart(pos), hec.axialToFlatCart( vec3.add( [], pos, hec.cubeRotate60CvTimes(dir, force.directionKind) ) ) ]); } }) .attr("marker-end", "url(#arrow)") .attr("pointer-events", "none"); } render(); Object.defineProperty(svg.node(), "value", { get: () => force }); return svg.node(); }35:T6fe,function spaceEditor(initialSpace, colorMap) { const viewBox = [-10, -10, 20, 20]; const svg = d3 .create("svg") .style("border", "1px solid") .style("height", "600px") .attr("viewBox", viewBox); const g = svg.append("g"); const dots = [...hexagonDots(10)].map((dot) => ({ kind: undefined, pos: dot })); for (const button of initialSpace) { const dot = dots.find( ({ pos }) => pos[0] === button.pos[0] && pos[1] === button.pos[1] ); if (dot) { dot.kind = button.kind; } } g.append("g") .selectAll("circle") .data(dots) .join("circle") .attr("cx", ({ pos }) => hec.axialToFlatCart(pos)[0]) .attr("cy", ({ pos }) => hec.axialToFlatCart(pos)[1]) .attr("fill", ({ kind }) => (kind === undefined ? "white" : colorMap[kind])) .attr("stroke", "black") .attr("stroke-width", 0.01) .on("mousedown", (ev, dot) => { if (ev.button === 0) { dot.kind = dot.kind === undefined ? 0 : (dot.kind + 1) % colorMap.length; } if (ev.button === 2) { dot.kind = dot.kind === undefined ? 0 : (dot.kind + colorMap.length - 1) % colorMap.length; } if (ev.button === 1) { dot.kind = undefined; } ev.target.setAttribute( "fill", dot.kind === undefined ? "white" : colorMap[dot.kind] ); ev.preventDefault(); // svg.node().value = dots.filter(({ kind }) => kind !== undefined); svg.node().dispatchEvent(new CustomEvent("input")); }) .on("contextmenu", (ev) => ev.preventDefault()) .attr("r", 0.3); Object.defineProperty(svg.node(), "value", { get() { return dots.filter(({ kind }) => kind !== undefined); } }); return svg.node(); }36:T405,/* hexagonal vector */ hec = { const SQRT3 = Math.sqrt(3); const axialToFlatCart = ([q, r]) => [(SQRT3 / 2) * q, (1 / 2) * q + r]; const axialToCube = ([q, r]) => [q, r, -q - r]; const cubeLen = ([q, r, s]) => (Math.abs(q) + Math.abs(r) + Math.abs(s)) / 2; const cubeFlatNorth = [0, 1, -1]; const cubeRotate60Cv = ([q, r, s]) => [-r, -s, -q]; const cubeRotate60CvTimes = (v, times) => { times %= 6; if (times < 0) times += 6; for (let i = 0; i < times; i++) v = cubeRotate60Cv(v); return v; }; const cubeRound = (v) => { const { round, abs } = Math; const [q, r, s] = v.map(round); const q_diff = abs(q - v.q); const r_diff = abs(r - v.r); const s_diff = abs(s - v.s); if (q_diff > r_diff && q_diff > s_diff) return [-r - s, r, s]; if (r_diff > s_diff) return [q, -q - s, s]; return [q, r, -q - r]; }; return { SQRT3, axialToFlatCart, axialToCube, cubeLen, cubeFlatNorth, cubeRotate60Cv, cubeRotate60CvTimes, cubeRound }; }37:T476,function listInput2({ values, defaultValue, renderInput = (value) => Inputs.text({ value }), renderEntry = (input, remove) => html`

${input}

`, renderContainer = (add) => html`

`, render = (container, add) => html`${container}` }) { const dispatchInput = () => el.dispatchEvent(new CustomEvent("input")); const asChanger = (f) => (...args) => (f && f(...args), dispatchInput()); const linkEntry = (value) => { const input = renderInput(value); input.addEventListener("input", dispatchInput); const entry = renderEntry( input, asChanger(() => entry.remove()) ); return Object.assign(entry, { input }); }; const addEntry = asChanger(() => container.appendChild(linkEntry(defaultValue)) ); const container = renderContainer(addEntry); container.append(...(values ?? []).map(linkEntry)); const el = render(container, addEntry); Object.defineProperty(el, "value", { get: () => [...container.children].filter((c) => c.input).map((c) => c.input.value) }); return el; }38:[] 2f:{"id":"a7a46ec07d56e3c0","slug":"pull-push-puzzle-wip","title":"Pull-Push Puzzle (WIP)","thumbnail":"845b2f2d35a51e0f7d2a2a259ec1189eeefb56834affb1abdb155d7e827e19bc","access_level":"public","create_time":"$D2022-05-23T09:16:41.921Z","update_time":"$D2022-06-20T21:14:33.766Z","view_time":null,"first_public_time":"$D2022-05-23T11:30:36.917Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0769ff99b3875329","login":"ndry","name":"x","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":"starter_2024"},"version":1470,"publish_version":1470,"role":null,"authored":false,"authors":[{"type":"individual","id":"45218b3eb975ae76","login":"gb1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null}],"members":[{"type":"individual","id":"45218b3eb975ae76","login":"gb1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Pull-Push Puzzle (WIP)","cells":[{"id":0,"value":"# Pull-Push Puzzle (WIP)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1460,"value":"md`## 🔴 Further work is done on github\n\nsource: https://github.com/ndry/pull-push-puzzle\n\ndemo: https://ndry.github.io/pull-push-puzzle/dist/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1277,"value":"Edit initial space:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":399,"value":"viewof initialSpace = spaceEditor(\n [\n {\n kind: 0,\n pos: hec.axialToCube([1, 3])\n },\n {\n kind: 0,\n pos: hec.axialToCube([-5, 3])\n },\n {\n kind: 1,\n pos: hec.axialToCube([-1, 3])\n },\n {\n kind: 0,\n pos: hec.axialToCube([3, 1])\n },\n {\n kind: 0,\n pos: hec.axialToCube([3, -5])\n },\n {\n kind: 1,\n pos: hec.axialToCube([3, -1])\n }\n ],\n colorMap\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"step = {\n yield 0; // temp\n return; // temp\n\n reset;\n initialSpace;\n let i = 0;\n while (true) {\n await Promises.tick(1000);\n yield i++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"simulate = (space) => {\n const newSpace = _.cloneDeep(space);\n const forces = calcForces(newSpace);\n for (const force of forces) {\n vec3.add(force.target.pos, force.target.pos, force.vec);\n }\n return newSpace;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1285,"value":"calcForces(initialSpace)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":237,"value":"calcForces = (space) =>\n space.map((target) => ({\n target,\n vec: space\n .flatMap((source) => {\n const r = vec3.sub([], target.pos, source.pos);\n const radiusKind = getRadiusKind(r);\n return forceRules\n .filter(\n (f) =>\n f.sourceKind === source.kind &&\n f.targetKind === target.kind &&\n f.radiusKind === radiusKind\n )\n .map((f) =>\n hec.cubeRotate60CvTimes(\n getRadiusDirection[radiusKind](r),\n f.directionKind\n )\n );\n })\n .reduce((sum, v) => vec3.add(sum, sum, v), [0, 0, 0])\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"spacetime = {\n const spacetime = Array.from({ length: 100 });\n spacetime[0] = initialSpace;\n for (var i = 1; i < spacetime.length; i++) {\n spacetime[i] = simulate(spacetime[i - 1]);\n }\n return spacetime;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"viewof colorMap = listInput2({\n values: [\"#ff0000\", \"#00ff00\", \"#0000ff\", \"#ffff00\", \"#00ffff\", \"#ff00ff\"],\n defaultValue: \"#808080\",\n renderInput: (value) => Inputs.color({ value }),\n renderEntry: (input, remove) =>\n html`

${input}

\n \n

`,\n renderContainer: (add) =>\n html`

`,\n render: (container, add) => container\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1321,"value":"$33","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1206,"value":"md`## Editors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"function getRadiusKind(hexCubeVector) {\n const v = hexCubeVector;\n const l = hec.cubeLen(v);\n if (l === 1) {\n return 0;\n }\n if (l === 2) {\n const hasZero = !(v[0] * v[1] * v[2]);\n return hasZero ? 1 : 2;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1250,"value":"getRadiusDirection = [\n (r) => r,\n (r) => vec3.scale([], r, 1 / 2),\n (r) => vec3.scale([], vec3.add([], r, hec.cubeRotate60Cv(r)), 1 / 3)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"function addArrowMarker(defs, id, fill) {\n return defs\n .append(\"svg:marker\")\n .attr(\"id\", id)\n .attr(\"viewBox\", \"0 -5 10 10\")\n .attr(\"refX\", 10)\n .attr(\"orient\", \"auto\")\n .append(\"svg:path\")\n .attr(\"fill\", fill)\n .attr(\"d\", \"M0,-5L10,0L0,5\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1372,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":365,"value":"function* hexagonDots(radius, center) {\n center = center || [0, 0, 0];\n yield center;\n for (let i = 1; i < radius; i++) {\n for (let j = 0; j < i; j++) {\n const ps = [\n [i, -j],\n [i - j, -i],\n [i - j - 1, j + 1]\n ].map(hec.axialToCube);\n for (const p of ps) {\n yield p;\n yield vec3.negate([], p);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"function ColorMap(args) {\n const { value, label } = args;\n const els = value.map((v) => html``);\n const el = html`${label ? label + \": \" : \"\"}${els}`;\n Object.defineProperty(el, \"value\", {\n get: () => els.map((el) => el.value)\n });\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"glMatrix = require(\"gl-matrix/gl-matrix\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"vec2 = glMatrix.vec2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"vec3 = glMatrix.vec3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1053,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1027,"value":"import { html } from \"@observablehq/htl\" // imported because of Function attributes https://observablehq.com/@observablehq/htl#cell-511","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"