31:[{"id":"98d59b88c5747a6ed1e2a770f49089804539b3b8d716b80a6e7b83f30477fa79ccdec984188498598e43dc68447cc97ca32ed2e081b0d62f552ca33b9050a18d","href":"https://static.observableusercontent.com/files/98d59b88c5747a6ed1e2a770f49089804539b3b8d716b80a6e7b83f30477fa79ccdec984188498598e43dc68447cc97ca32ed2e081b0d62f552ca33b9050a18d","name":"2334648F-AFCC-4F6D-B72B-6CCFDBCD3917.png","type":"image/png","lastModified":1643934014354.92,"size":21279}] 2f:{"title":"Printable Chess Set","cells":[{"id":0,"value":"# Printable Chess Set","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"FileAttachment(\"2334648F-AFCC-4F6D-B72B-6CCFDBCD3917.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"How fast can you build an app, from idea generation to workable prototype?\n- From start to now, this was built in 3.5 hours.\n- I had never used the Canvas API in depth so building that mental model was the biggest challenge.\n \nI have to make dinner so I'll leave it up to you for now! 😇","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"### Resources Used\n[Canvas Handbook](https://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html) \n[Canvas API on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) \n[Wikipedia: Chess symbols in Unicode](https://en.m.wikipedia.org/wiki/Chess_symbols_in_Unicode)\n\n#### Find me\n[My Public Notebooks](https://observablehq.com/@iz) \n[Tweet to me @Izzyz](https://twitter.com/intent/tweet?screen_name=Izzyz) \n[Leenk at me on LinkedIn](https://www.linkedin.com/in/israelgonzalezb)","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"html`

${canvas}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"### Board\n`${widthClamp*boardSize} px X ${widthClamp*boardSize} px` \n### Cells\n`${(widthClamp*boardSize)/8} px X ${(widthClamp*boardSize)/8} px`","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"viewof boardSize = Inputs.range([1, 10], {\n step: 1,\n value: 1,\n label: \"Board Dimensions\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"html`

1 ? \"start\" : \"center\"\n};\">${whiteIcons\n .map(\n (i) =>\n `${i}`\n )\n .join(\"\")}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"html`

1 ? \"start\" : \"center\"\n};\">${blackIcons\n .map(\n (i) =>\n `${i}`\n )\n .join(\"\")}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"### How it works\n- Pulls in data from Wikipedia page on chess unicode icons\n- Parses that data to pull out icons and board structure\n- Creates a canvas element for the board which can be downloaded as png\n- Chess pieces are currently still plain html+css, so the next iteration is to get those on q canvas element as well","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"### Ideas to make it your own\nIf you've never tried Observable before, all you need to do to start is edit any one of these cells! You can then fork this notebook to work on your own copy. If you come up with something cool you can suggest your changes for me to add to this notebook.\n\nHere's some stuff to try:\n- Can you make the app generate custom pieces?\n - An input for image uploads\n - A library of preset piece styles\n- What about custom board and piece colors? \n - Observable has an awesome selection of built-in inputs: [Color input guide](https://observablehq.com/@observablehq/input-color?collection=@observablehq/inputs)\n- Could you generate a pdf of the set for easier printing?\n - Allow the user to select an output format: pdf, png, etc.\n- Could you make custom boards shareable?\n - You can grab data from a notebook's URL using [querystrings and hash params](https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters)","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"***\n## Notebook Guts 🦾","pinned":false,"hidden":false,"mode":"md"},{"id":477,"value":"widthClamp = Math.min(width, 1500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"{\n let ctx = canvas.getContext(\"2d\");\n boardColors.forEach((r, idxr) =>\n r.forEach((c, idxc) => {\n let eighth = (widthClamp * boardSize) / 8;\n ctx.fillStyle = c;\n ctx.fillRect(eighth * idxc, eighth * idxr, eighth, eighth);\n })\n );\n ctx.fillText(\"hi\", 0, widthClamp * boardSize);\n return ctx;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"canvas = {\n return html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"boardColors = boardArr.map((r, idx) =>\n idx % 2\n ? r.map((c, idxc) => (idxc % 2 ? \"black\" : \"white\"))\n : r.map((c, idxc) => (idxc % 2 ? \"white\" : \"black\"))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"boardArr = [...Array(8)].map((c) => [...Array(8)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"boardRaw = splitData.filter((r) => r.length === 3 || r.length === 6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"whiteIcons = iconsRaw.slice(16, 32)","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"blackIcons = iconsRaw.slice(0, 16)","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"iconsRaw = splitData\n .filter((r) => r.length === 2)\n .map((r) => r[1].split(/[<>]/g))\n .map((r) => r[1])\n .filter((i) => i)","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"splitData = chessIconWiki.source\n .split(\"=\")\n .slice(40, 181)\n .map((i) => i.split(\";\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"chessIconWiki = fetch(\n \"https://en.wikipedia.org/w/rest.php/v1/page/Chess_symbols_in_Unicode?format=json&origin=*\"\n).then((r) => r.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"***\n#### TODO","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"// Get chess piece and board details. Size, count, etc.\n// Generate images based on chess piece icons and generate chess board\n// Generate rule cheat sheet\n// Generate a file, probably best if it's pdf\n// User can print a chess set with chess board and pieces to cut out without using a lot of ink. \n// --> Is there a way to estimate how much ink a file will use?\n// Extra: Use your own images for the pieces and your own board background","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"// Rule cheat sheet","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"// import pdf generator","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}