2b:null 2c:["$","title",null,{"children":"Solo board game (beta) | Sander Evers | Observable"}] 31:T785,tile = (ijk, preview) => { const [i,j,k] = ijk; const opacity = preview?'0.6':'1'; const d = 0.2; const td = 0.15; const d1 = 0.5-d; const d2 = 0.5+d; const bgcoords = [[0,0,1],[1,0,1],[1,0,0],[1,1,0],[0,1,0],[0,1,1]]; const bgattrs = {fill: '#F3EBE2', opacity}; if (!preview) Object.assign(bgattrs,{'pointer-events':'fill'}); const xattrs = {fill:patternURLs[i-1], opacity}; const yattrs = {fill:patternURLs[j-1], opacity}; const zattrs = {fill:patternURLs[k-1], opacity}; const xcoords = [[d1,0,1],[d2,0,1],[d2,1,0],[d1,1,0]]; const ycoords = [[0,d1,1],[0,d2,1],[1,d2,0],[1,d1,0]]; const zcoords = [[0,1,d1],[0,1,d2],[1,0,d2],[1,0,d1]]; const txcoords = [0.5,1-td,td]; const tycoords = [td,0.5,1-td]; const tzcoords = [1-td,td,0.5]; const txtAttrs = { 'text-anchor':'middle', 'style':'font-family:Alegreya;font-weight:800; font-size:28px; stroke-width:1px; dominant-baseline:middle; fill:#555555; stroke:#F3EBE2', opacity } const txtAttrsB = { 'text-anchor':'middle', 'style':'font-family:Alegreya;font-weight:800; font-size:28px; stroke-width:4px; dominant-baseline:middle; fill:#F3EBE2; stroke:#F3EBE2', opacity } return svgt` ${String(i)} ${String(i)} ${String(j)} ${String(j)} ${String(k)} ${String(k)}` }32:[] 2f:{"id":"18c0ac298006fb68","slug":"solo-board-game-beta","title":"Solo board game (beta)","thumbnail":"26e1ab6f14d627be949bb196a045d906d54dc473363a87eca91c57073a7b798f","access_level":"public","create_time":"$D2021-02-07T18:49:21.974Z","update_time":"$D2024-09-11T09:48:47.034Z","view_time":null,"first_public_time":"$D2021-02-07T21:29:19.400Z","fork":{"id":"b86a14ae2007a97a","slug":"solo-board-game","title":"Solo board game","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"stars":1,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":748,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}],"members":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null,"role":"editor"}],"comments":[{"id":"bc63f8d332d6e29c","reply_to_id":null,"content":"My own experience is that these \"how much point can this line possibly score\" numbers are only clutter. I don't look at them.\n\nMaybe I should only show the possible points when a new line is established, and show some kin of alert when a line will be broken (the amount of possible points lost?).","create_time":"$D2021-02-07T21:33:38.433Z","update_time":"$D2021-02-07T21:36:26.060Z","resolved":false,"user":{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}},{"id":"338372e6a851efa1","reply_to_id":"bc63f8d332d6e29c","content":"Also, while I like the preview feature, showing the current tile-to-be-placed in two places simultaneously feels wrong. Maybe I shouldn't show it at all in the corner. But then what to do when the pointer is over an ineligible position? (which is always the case when you just placed the last tile)","create_time":"$D2021-02-07T21:43:19.239Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Solo board game (beta)","cells":[{"id":0,"value":"md`# Solo board game (beta)\n\n_This is a fork of [this notebook](/@sanderevers/solo-board-game) with experimental gameplay enhancements._\n\nThe best games are often remarkably simple. In this notebook you can play the quick and addictive board game [\"Take it Easy!\"](https://www.burleygames.com/product-page/copy-of-take-it-easy-the-european-edition). Credits to Tom Shanley for the [SVG patterns](/@tomshanley/cheysson-color-palettes). \n\n### How to play\n\nThere are 27 possible tiles. You randomly get dealt 19 of them, one by one, and your job is to fill the playing field in the best way. Each completed line _with the same pattern on every tile_ scores you the sum of the numbers on that line.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"{ \n const edges = scale(0.5,g(...allHexes(1).map(edge)));\n const project = m.ortho([],-1,1,-1,1,-1,1);\n const view = m.lookAt([],[1,1,1],[0,0,0],[0,1,-1]);\n const txtAttrs = {\n 'text-anchor':'middle',\n 'style':'font-family:Alegreya;font-weight:800; font-size:28px; stroke-width:1px; dominant-baseline:middle; fill:#555555; stroke:#F3EBE2'\n }\n const finalscore = svgt`${String(score)}`;\n const nexttile = done ? finalscore : tile(nxt);\n const box = svgtBox(transform(project,view,g(defs,nexttile,edges)),120,120);\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"// The field now consists of an independent control and view layer.\n// Updates work around the Observable reactivity mechanism,\n// otherwise updates to the control elements keep causing mouseover events.\nh = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"start ? md`Start by clicking one of the empty hexagons.`\n: md`Your ${done ? \"final\" : \"current\"} score is ${score}. ${score==0?\"Create a line filled with the same pattern.\":\"\"}${again}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":520,"value":"again = {\n if (!done)\n return html``;\n const elt = html`Play again?`;\n elt.addEventListener(\"click\",reset);\n return elt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"viewLayer = { \n const edges = scale(0.5,g(...allHexes(5).map(edge)));\n const tiles = g(...Object.keys(placed).map(i => translate(pos(i),tile(placed[i]))));\n const scoreTiles = g(...range(3).flatMap(d=>range(5).map(i=>scoreTile(d,i))));\n const previewTile = preview ? translate(pos(preview),tile(nxt,true)) : g();\n\n const project = m.ortho([],-5,5,-3.7,4.4,-1,1);\n const view = m.lookAt([],[1,1,1],[0,0,0],[0,1,-1]);\n const box = svgtBox(transform(project,view,g(defs,tiles,previewTile, scoreTiles, edges)),600,492);\n h.children[1].replaceChildren(box);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"controlLayer = {\n const hexes = g(...allHexes(2).map(backhex));\n const project = m.ortho([],-5,5,-3.7,4.4,-1,1);\n const view = m.lookAt([],[1,1,1],[0,0,0],[0,1,-1]);\n const box = svgtBox(transform(project,view,hexes),600,492);\n for (const ch of box.children) {\n const id = ch.getAttribute('id');\n if (id) {\n ch.addEventListener('click',evt => {place(id,nxt); mutable preview = null});\n ch.addEventListener('mouseover',evt => {mutable preview = id});\n ch.addEventListener('mouseout',evt => mutable preview = null);\n }\n }\n\n h.children[0].replaceChildren(box);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"md`## Game state`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"mutable remaining = allTiles;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"mutable nxt = pick()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"mutable placed = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"start = Object.keys(placed).length==0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":429,"value":"done = Object.keys(placed).length==19","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"function place(id,tile) {\n mutable placed = {...mutable placed, [id]:tile}\n mutable nxt = done ? undefined : pick();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"function pick() {\n const rem = mutable remaining;\n const r = Math.floor(Math.random()*rem.length);\n mutable remaining = [...rem.slice(0,r),...rem.slice(r+1)];\n return rem[r];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"function reset() {\n mutable remaining = allTiles;\n mutable nxt = pick();\n mutable placed = {};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"mutable preview = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"md`## Scoring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"score = sum([0,1,2].map(dimScore))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"dimScore = d => sum(hexlines(2,d).map(lineScore(d)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"lineScore = d => line => {\n const points = line.map(pos => placed[mkid(pos)]?.[d]??0);\n return new Set(points).size==1 ? sum(points) : 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"md`## SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"edge = (xyz) => {\n const [x,y,z] = xyz;\n const line = (x1,y1,z1,x2,y2,z2) => svgt``;\n if (!mod2(x) && !mod2(y) && !mod2(z))\n return () => [];\n if (!mod2(x))\n return line(x-1,y,z,x+1,y,z);\n if (!mod2(y))\n return line(x,y-1,z,x,y+1,z);\n if (!mod2(z))\n return line(x,y,z-1,x,y,z+1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"backhex = (xyz) => {\n const coords = [[0,0,1],[1,0,1],[1,0,0],[1,1,0],[0,1,0],[0,1,1]];\n const myid = mkid(xyz);\n const attrs = {\n id:myid,\n fill:'white',\n style:'cursor:pointer'\n }\n return translate(xyz,svgt``)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"triangle = {\n const points = [[0,1,-1],[-1,0,1],[1,-1,0]];\n const attrs = {fill:'black'};\n return scale(0.1,svgt``);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":657,"value":"scoreTile = (d,i) => {\n const temp = preview && pos(preview)[d]==i-2;\n const txtAttrs = {\n 'text-anchor':'middle',\n 'style':`font-family:Alegreya;font-weight:800; font-size:${temp?28:20}px; stroke-width:1px; dominant-baseline:middle; fill:#555555; stroke:#F3EBE2`\n }\n\n const line = hexlines(2,d)[i];\n const points = new Set(line.map(pos => placed[mkid(pos)]?.[d]?? (mkid(pos)==preview?nxt[d]:0)).filter(p => p));\n const txt = points.size==0 ? '' : points.size==1 ? String([...points][0]*line.length) : '0';\n const arrowxyz = [[0,-1,1],[1,0,-1],[-1,1,0]][d].map(x=>x*0.36);\n const arrow = txt ? translate(arrowxyz,triangle) : g();\n\n const xyz = mod2(d)? hexlines(3,d)[i+1][0]: hexlines(3,d)[i+1].pop();\n return translate(xyz,svgt`${arrow}${txt}`);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"md`## Model`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"allTiles = [1,5,9].flatMap(i=>[2,6,7].flatMap(j=>[3,4,8].map(k=>[i,j,k])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"hexlines = (r,dim) =>\n range(-r,r+1).map(d =>\n range(Math.max(-r,-r-d),Math.min(r,r-d)+1).map(f => {\n const a = [f,-f-d];\n a.splice(dim,0,d);\n return a;\n }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"allHexes = r => [].concat(...hexlines(r,0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"\nmkid = (xyz) => ['hex',...xyz].join('.')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"pos = (id) => id.split('.').slice(1).map(Number);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"mod2 = n => Math.abs(n%2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"range = (x,y) => {\n const start= (y===undefined)?0:x;\n const end= Math.max((y===undefined)?x:y,start);\n return [...new Array(end-start).keys()].map(i=>i+start)\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"sum = (arr) => arr.reduce((x,y)=>x+y,0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"md`## Font & patterns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"import {grouped1251203, grouped12512014, grouped12511007, sequential13188028, diverging12541021} from \"@tomshanley/cheysson-color-palettes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"defs = svgt`${grouped1251203.patterns}${ grouped12511007.patterns}${grouped12512014.patterns}${sequential13188028.patterns}${diverging12541021.patterns}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"patternURLs = [ grouped1251203.rangeURLs[0], grouped12512014.rangeURLs[2], grouped12512014.rangeURLs[0], grouped1251203.rangeURLs[7], grouped12511007.rangeURLs[5], diverging12541021.rangeURLs[1], sequential13188028.rangeURLs[1], diverging12541021.rangeURLs[0], grouped1251203.rangeURLs[1] ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"md`## Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import {svgt,g,transform,translate,scale,identity,svgtBox,svgtext,m} from '@sanderevers/svg-transformations'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"v = require('https://bundle.run/@thi.ng/vectors@4.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"