2d:null 2e:["$","title",null,{"children":"Carcassonne tile tracker | Rafael Rocha | Observable"}] 33:T6d8,viewof tool = { const view = html`${selectedTiles.map((value, i) => { const tile = selectedTiles[i]; const increment = html``; increment.disabled = state[i] === tile.qty increment.onclick = () => { if(viewof state.value[i] < tile.qty) { viewof state.value[i] += 1; viewof state.dispatchEvent(new CustomEvent("input")); } }; const decrement = html``; decrement.onclick = () => { if(viewof state.value[i] > 0) { viewof state.value[i] -= 1; viewof state.dispatchEvent(new CustomEvent("input")); } }; decrement.disabled = state[i] === 0; const opacity = state[i] === 0 ? '0.4' : '1'; const highLight = searchMatches.indexOf(tile.id) >= 0 ? '#333' : '#FFF' const borderColor = state[i] === 0 ? '#CCC' : highLight; const tileEl = html`

${state[i]}

${increment}
${decrement}

`; return tileEl; })}

${remaningTiles} tile${remaningTiles > 1 ? 's' : ''} remaining

`; return view; }34:T12da,allTiles = [ { set: 'BASE', id: 0, qty: 1, tags: ['road', 'road end', 'city'], edges: ['C', 'C', 'R', 'C'] }, { set: 'BASE', id: 1, qty: 2, tags: ['road', 'road end', 'city', 'shield'], edges: ['C', 'C', 'R', 'C'] }, { set: 'BASE', id: 2, qty: 3, tags: ['city', 'doritos'], edges: ['C', 'F', 'F', 'C'] }, { set: 'BASE', id: 3, qty: 2, tags: ['city', 'doritos', 'shield'], edges: ['C', 'F', 'F', 'C'] }, { set: 'BASE', id: 4, qty: 3, tags: ['city', 'doritos', 'road', 'curve'], edges: ['C', 'R', 'R', 'C'] }, { set: 'BASE', id: 5, qty: 2, tags: ['city', 'doritos', 'road', 'curve', 'shield'], edges: ['C', 'R', 'R', 'C'] }, { set: 'BASE', id: 6, qty: 1, tags: ['city','join'], edges: ['F', 'C', 'F', 'C'] }, { set: 'BASE', id: 7, qty: 2, tags: ['city', 'join', 'shield'], edges: ['F', 'C', 'F', 'C'] }, { set: 'BASE', id: 8, qty: 2, tags: ['city','top'], edges: ['C', 'F', 'F', 'C'] }, { set: 'BASE', id: 9, qty: 3, tags: ['city','top'], edges: ['C', 'F', 'C', 'F']}, { set: 'BASE', id: 10, qty: 5, tags: ['city','top'], edges: ['C', 'F', 'F', 'F'] }, { set: 'BASE', id: 11, qty: 3, tags: ['city', 'top', 'road', 'curve','left'], edges: ['C', 'F', 'R', 'R'] }, { set: 'BASE', id: 12, qty: 3, tags: ['city', 'top', 'road', 'curve', 'right'], edges: ['C', 'R', 'R', 'F'] }, { set: 'BASE', id: 13, qty: 3, tags: ['city', 'top', 'road', 'road end'], edges: ['C', 'R', 'R', 'R'] }, { set: 'BASE', id: 14, qty: 4, tags: ['city', 'top', 'road', 'straight'], edges: ['C', 'R', 'F', 'R'] }, { set: 'BASE', id: 15, qty: 8, tags: ['road', 'straight'], edges: ['R', 'F', 'R', 'F'] }, { set: 'BASE', id: 16, qty: 9, tags: ['road', 'curve'], edges: ['F', 'F', 'R', 'R'] }, { set: 'BASE', id: 17, qty: 4, tags: ['road', 'road end'], edges: ['F', 'R', 'R', 'R'] }, { set: 'BASE', id: 18, qty: 1, tags: ['road', 'road end'], edges: ['R', 'R', 'R', 'R'] }, { set: 'BASE', id: 19, qty: 4, tags: ['monastery'], edges: ['F', 'F', 'F', 'F'] }, { set: 'BASE', id: 20, qty: 2, tags: ['monastery', 'road', 'road end'], edges: ['F', 'F', 'R', 'F'] }, { set: 'BASE', id: 21, qty: 1, tags: ['city', 'shield'], edges: ['C', 'C', 'C', 'C'] }, { set: 'BASE', id: 22, qty: 3, tags: ['city'], edges: ['C', 'C', 'F', 'C'] }, { set: 'BASE', id: 23, qty: 1, tags: ['city', 'shield'], edges: ['C', 'C', 'F', 'C'] }, //RIVER { set: 'RIVER', id: 65, qty: 1, tags: ['river'], edges:['F', 'F', 'W', 'F'] }, { set: 'RIVER', id: 66, qty: 2, tags: ['river'], edges:['F', 'W', 'W', 'F'] }, { set: 'RIVER', id: 67, qty: 1, tags: ['river', 'road', 'monastery'], edges:['F', 'W', 'R', 'W'] }, { set: 'RIVER', id: 68, qty: 1, tags: ['river', 'road'], edges:['R', 'R', 'W', 'W'] }, { set: 'RIVER', id: 69, qty: 2, tags: ['river'], edges:['W', 'F', 'W', 'F'] }, { set: 'RIVER', id: 70, qty: 1, tags: ['river'], edges:['W', 'F', 'F', 'F'] }, { set: 'RIVER', id: 71, qty: 1, tags: ['river', 'road', 'city'], edges:['W', 'C', 'W', 'R'] }, { set: 'RIVER', id: 72, qty: 1, tags: ['river', 'city'], edges:['C', 'W', 'C', 'W'] }, { set: 'RIVER', id: 73, qty: 1, tags: ['river', 'road'], edges:['R', 'W', 'W', 'R'] }, { set: 'RIVER', id: 74, qty: 1, tags: ['river', 'city'],edges:['W', 'C', 'C', 'W'] }, //INNS AND CATHEDRALS { set: 'INNS', id: 24, qty: 1, tags: ['road', 'curve', 'inn'], edges:['F', 'F', 'R', 'R'] }, { set: 'INNS', id: 25, qty: 1, tags: ['city', 'road'], edges:['C', 'F', 'R', 'F'] }, { set: 'INNS', id: 26, qty: 1, tags: ['road', 'city', 'road end', 'shield'], edges:['F', 'F', 'R', 'R'] }, { set: 'INNS', id: 27, qty: 1, tags: ['road', 'monastery'], edges:['F', 'R', 'F', 'R'] }, { set: 'INNS', id: 28, qty: 1, tags: ['road', 'curve'], edges:['R', 'R', 'R', 'R'] }, { set: 'INNS', id: 29, qty: 1, tags: ['city', 'road', 'road end'], edges:['C', 'R', 'F', 'C'] }, { set: 'INNS', id: 30, qty: 1, tags: ['city'], edges:['F', 'C', 'F', 'F'] }, { set: 'INNS', id: 31, qty: 1, tags: ['city'], edges:['C', 'C', 'C', 'C'] }, { set: 'INNS', id: 32, qty: 2, tags: ['city', 'cathedral'], edges:['C', 'C', 'C', 'C'] }, { set: 'INNS', id: 33, qty: 1, tags: ['road', 'straight', 'inn'], edges:['F', 'R', 'F', 'R'] }, { set: 'INNS', id: 34, qty: 1, tags: ['road', 'road end', 'inn'], edges:['F', 'R', 'R', 'R'] }, { set: 'INNS', id: 35, qty: 1, tags: ['city', 'road', 'shield', 'inn'], edges:['C', 'R', 'R', 'C'] }, { set: 'INNS', id: 36, qty: 1, tags: ['city', 'road', 'inn'], edges:['C', 'F', 'R', 'R'] }, { set: 'INNS', id: 37, qty: 1, tags: ['city', 'road', 'road end', 'inn'], edges:['C', 'F', 'R', 'C'] }, { set: 'INNS', id: 38, qty: 1, tags: ['city', 'shield'], edges:['C', 'F', 'C', 'C'] }, { set: 'INNS', id: 39, qty: 1, tags: ['city'], edges:['C', 'F', 'C', 'C'] }, { set: 'INNS', id: 40, qty: 1, tags: ['city', 'road', 'straight'], edges:['R', 'C', 'R', 'C'] }, ]35:[{"id":"61290b6e45153cc7b14cfa87a5fef8af32556d642c1442179a1410e4f0a1a28866297a9a132d64cf16e2b5cb692a4db04b4f63fed7241efff98612058800b51d","href":"https://static.observableusercontent.com/files/61290b6e45153cc7b14cfa87a5fef8af32556d642c1442179a1410e4f0a1a28866297a9a132d64cf16e2b5cb692a4db04b4f63fed7241efff98612058800b51d","name":"test.png","type":"image/webp","lastModified":1611278425427.871,"size":616008}] 31:{"id":"6c120cb2a7ae72d5","slug":"carcassonne-tile-tracker","title":"Carcassonne tile tracker","thumbnail":"888223a1822263c1cdb22959107f9f5fcfbcb5db869eab9546eab2ed46bc4fd5","access_level":"public","create_time":"$D2021-01-20T16:25:11.572Z","update_time":"$D2021-01-31T03:44:33.476Z","view_time":null,"first_public_time":"$D2021-01-21T20:13:31.574Z","has_unpublished_edits":null,"fork":{"id":"b11c7a9a42cdfdee","slug":"carcassonne-cheat-sheet-v0-1","title":"Carcassonne cheat sheet","owner":{"id":"4a0a18b2837e32ce","login":"rrocham","name":"Rafael Rocha"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4a0a18b2837e32ce","login":"rrocham","name":"Rafael Rocha","avatar_url":"https://avatars-next.observableusercontent.com/f2b3dd21b982b565b9aff256581df7b7e5db97ab6d2143d02c8a53535cdb23d4","tier":"starter_2024"},"version":968,"publish_version":968,"role":null,"authored":false,"authors":[{"type":"individual","id":"fce7d2527ab60a33","login":"rrocham","name":"Rafael Rocha","avatar_url":"https://avatars-next.observableusercontent.com/f2b3dd21b982b565b9aff256581df7b7e5db97ab6d2143d02c8a53535cdb23d4","tier":null}],"members":[{"type":"individual","id":"fce7d2527ab60a33","login":"rrocham","name":"Rafael Rocha","avatar_url":"https://avatars-next.observableusercontent.com/f2b3dd21b982b565b9aff256581df7b7e5db97ab6d2143d02c8a53535cdb23d4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Carcassonne tile tracker","cells":[{"id":0,"value":"md`# Carcassonne tile tracker`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"md`This notebook allows you to keep track of the remaining tiles in a game of Carcassonne as well as a few functions to calculate the odds of drawing a given tile.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`Currently there are **${remaningTiles}** tiles left in the game. You can click on the [+] [ - ] buttons next to the tile to increase or decrease its count.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`## Tile search\n\nThe textbox below can be used to search for tiles matching an \"edge sequence\". The edge sequence is a combination of characters, each used to identify a different tile feature.\n\n* **C** for City\n* **R** for Road\n* **F** for Field\n* **W** for Water (river expansion)\n* **${wildcard}** for any feature\n\nFor example, searching for \"${selectedTiles[0].edges.join(\"\")}\" will match the first tile displayed below.\n\nNote that the sequence must be created by going around the tile in a clockwise direction.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"viewof edgeSearch = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"{\n const edges = edgeSearch.split('').map(l => l.toUpperCase());\n if(edges.length === 0) {\n setMatches([]);\n return 'No search results';\n };\n const possibleRotations = edgeRotations(edges);\n const matches = selectedTiles.filter(tile => {\n const [t, r, b, l] = tile.edges;\n return possibleRotations.filter(([r1, r2, r3, r4]) => {\n return (\n (r1 === t || r1 === wildcard) &&\n (r2 === r || r2 === wildcard) &&\n (r3 === b || r3 === wildcard) &&\n (r4 === l || r4 === wildcard)\n );\n }).length > 0;\n }).map(t => t.id);\n setMatches(matches);\n const totalMatched = matches.reduce((acc, id) => state[getTileIndexById(id)] + acc, 0);\n if(totalMatched === 0) {\n setMatches([]);\n return 'No search results';\n }\n const formatted = `${(totalMatched / remaningTiles * 100).toFixed(2)}%`;\n \n return md`search: **${totalMatched}** matche(s). You have a **${formatted}** chance of drawing a tile with edges *\"${edges.reduce((acc, v) => `${acc}, ${v}`)}\"*`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"md`### any([tags])\n\nReturns the odds of drawing a tile containing any of the tags passed as the argument.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`For example, any(['road', 'city']) will return the odds of drawing a tile that contain a road or a city as shown bellow.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"any(['road', 'city'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"function any(tags, highlight = false) {\n if(remaningTiles <= 0) {\n return html`

0%

`;\n }\n const matches = selectedTiles.filter(tile => tile.tags.find(tag => tags.indexOf(tag) >= 0)).map(t => t.id);\n highlight && setMatches(matches);\n const totalMatched = matches.reduce((acc, id) => state[getTileIndexById(id)] + acc, 0);\n const formatted = `${(totalMatched / remaningTiles * 100).toFixed(2)}%`;\n return md`any: **${totalMatched}** matche(s). You have a **${formatted}** chance of drawing a tile tagged as either *\"${tags.reduce((acc, v) => `${acc}, ${v}`)}\"*`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`### all([tags])\n\nReturns the odds of drawing a tile containing all of the tags passed as the argument.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"all(['road', 'city'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"function all(tags, highlight = false) {\n if(remaningTiles <= 0) {\n return html`

0%

`;\n }\n const matches = selectedTiles.filter(tile => tags.reduce((acc, tag) => acc && tile.tags.indexOf(tag) >= 0, true)).map(t => t.id);\n highlight&& setMatches(matches);\n const totalMatched = matches.reduce((acc, id) => state[getTileIndexById(id)] + acc, 0);\n const formatted = `${(totalMatched / remaningTiles * 100).toFixed(2)}%`;\n return md`all: **${totalMatched}** matche(s). You have a **${formatted}** chance of drawing a tile tagged as *\"${tags.reduce((acc, v) => `${acc}, ${v}`)}\"*`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"md`## Tags`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`The list below contains all the tags currently available. \n\nYou can edit the *allTiles* cell to change or include your tags.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`${allTags.map(t => md`- ${t}`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"md`## Reset\nThe buttons below allow you to reset the tile count back to its original state or zero out the count.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"viewof commands = {\n const resetButton = html``;\n resetButton.onclick = () => {\n viewof state.value = selectedTiles.map(t => t.qty);\n viewof state.dispatchEvent(new CustomEvent(\"input\"));\n setMatches([]);\n }\n \n const zeroButton = html``;\n zeroButton.onclick = () => {\n viewof state.value = selectedTiles.map(t => 0);\n viewof state.dispatchEvent(new CustomEvent(\"input\"));\n }\n \n return html`${resetButton} ${zeroButton}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"viewof baseSet = checkbox({label: 'Base set', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"viewof riverSet = checkbox({label: 'River', value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"viewof innsSet = checkbox({label: 'Inns and Cathedrals', value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"allTags = allTiles.reduce((acc, tile) => {\n tile.tags.forEach(tag => {\n if(acc.indexOf(tag) < 0) {\n acc.push(tag);\n }\n });\n return acc;\n}, []).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"function edgeRotations([top = wildcard , right = wildcard , bottom = wildcard , left = wildcard ]) {\n return [\n [top, right, bottom, left],\n [left, top, right, bottom],\n [bottom, left, top, right],\n [right, bottom, left, top]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"wildcard = \"?\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"remaningTiles = state.reduce((acc, tile) => tile + acc, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"state","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"selectedTiles = allTiles.filter((tile) => {\n return (baseSet === true && tile.set === \"BASE\" || riverSet === true && tile.set === \"RIVER\" || innsSet === true && tile.set === \"INNS\") });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"checkbox = ({label = '', value = false, disabled = false} = {}) => {\n let wrapper = html``\n let check = html``\n wrapper.append(check)\n wrapper.append(label || '')\n check.disabled = disabled\n check.checked = value\n \n check.addEventListener('change', (e) => {\n wrapper.value = check.checked\n wrapper.dispatchEvent(new CustomEvent('input'))\n })\n \n // we need to have a starting value\n wrapper.value = check.checked\n \n return wrapper\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"import {button} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"viewof state = {\n const element = html`

tile count

`;\n element.value = selectedTiles.map(t => t.qty);\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"function setMatches(matches) {\n viewof searchMatches.value = matches;\n viewof searchMatches.dispatchEvent(new CustomEvent(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"tilesUrl = await FileAttachment(\"test.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"searchMatches","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"viewof searchMatches = {\n const element = html`

search matches

`;\n element.value = [];\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"getTileIndexById = id => selectedTiles.findIndex(t => t.id === id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"