2b:null 2c:["$","title",null,{"children":"Tile Matching | James McNulty | Observable"}] 31:[] 2f:{"id":"5dfda057b43f9b67","slug":"tile-matching","title":"Tile Matching","thumbnail":"75084860917e81c8141e220cb2b4920bdb4c66244b1fde3b7d8f35dfd5e81ad5","access_level":"public","create_time":"$D2022-05-02T00:32:08.737Z","update_time":"$D2022-05-03T21:33:27.522Z","view_time":null,"first_public_time":"$D2022-05-02T19:46:58.248Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"3713fd2ab4d84992","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":"starter_2024"},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null}],"members":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"762bdf97ae3d88e7","slug":"iconography","title":"Iconography","owner":{"id":"3713fd2ab4d84992","login":"jimmcnulty41","name":"James McNulty"}},"type":"notebook","body":{"title":"Tile Matching","cells":[{"id":0,"value":"# Tile Matching\n\n\nLet's say we have some cards.\nEach card has a little area in the corner that might combine with other cards","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"Let's simplify it to analyze some more basic cases and gain some insight","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"viewof x_offset = Inputs.range([-100, 100], {label: \"x offset\",value: 10, step:10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof y_offset = Inputs.range([-100, 100], {label: \"y offset\",value: 10, step:10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof x_offset2 = Inputs.range([-40, 40], {label: \"y offset\",value:10, step:5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof y_offset2 = Inputs.range([-60, 60], {label: \"y offset\", value:10, step:10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function simpleCard({x,y}){\n return htl.svg.fragment`\n\n\n\n\n`;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"function simpleCard2({x,y}){\n return htl.svg.fragment`\n\n\n\n\n\n`;\n\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"function simpleCard3({x,y}){\n return htl.svg.fragment`\n\n\n\n\n\n\n\n`;\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"function simpleCard4({x,y}){\n return htl.svg.fragment`\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n`;\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":" height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function getColorBlock({x,y, clip}){\n return htl.svg.fragment`\n\n \n\n\n \n \n \n \n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"z=100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"q = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"width=2*height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"# Next Up\n\nI'd love a little grid-locked deal where I can drag around cards & the latest clicked one comes to the front","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"