[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","zarutian","name","tinycanvas","branchName","main","version","path","","project",{"_33":62,"_13":14,"_45":63,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":-5,"_70":-5,"_71":72,"_73":37,"_74":44,"_75":44,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":95,"_96":97,"_98":99,"_100":53},"tree",[57],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":56},"id","2171cc42-82d2-4fd7-a177-bd98b6a7e09e","main.ts","fileId","645b7fc0-93ca-11f0-b1df-0224a6c84d84","parentId","branchId","645988aa-93ca-11f0-b1df-0224a6c84d84","branchVersion",88,"latest",true,"createdAt",["D",1782758130702],81,"fileType","http","content","// Learn more: https://docs.val.town/vals/http/\n\n// import ValTown from \"npm:@valtown/sdk\";\n// const vt = new ValTown();\n// const val_id = \"645939cc-93ca-11f0-b1df-0224a6c84d84\";\nimport { blob as blobstore } from \"https://esm.town/v/std/blob\";\n\n\n/*\n\n 256x256 pixels \n 1 bit dim/bright\n 5 bits Red\n 5 bits Green\n 5 bits Blue\n \n CDawgVA canvas was ? 1024x1024 ? pixels (he said 1 millijon pixels)\n 34 colours. There were 19 factions.\n So to support timelapse a possible format to use (append only):\n 32 bit timestamp\n 6 bit faction nr\n 10 bit x coordnates\n 10 bit y coordnates\n 6 bit colour index\n\n*/\nconst drawdata_interp = (buffer, putPixel) => {\n const drawdata = new DataView(buffer);\n switch (drawdata.getUint8(0)) {\n case 1:\n // datum: 8 bits x, 8 bits y, 16 bits colour. Array of datums this way.\n for (let idx = 1; idx < drawdata.byteLength; idx += 4) {\n const x = drawdata.getUint8(idx + 0);\n const y = drawdata.getUint8(idx + 1);\n const c = drawdata.getUint16(idx + 2, false);\n const r = (((c >> 10) & 0x1F) << 3);\n const g = (((c >> 5) & 0x1F) << 3);\n const b = (( c & 0x1F) << 3);\n putPixel(x, y, r, g, b);\n }\n break;\n case 2:\n // preamble: 16 bits colour, coords: 8 bits x, 8 bits y. First preamble. Then array of coords.\n {\n const c = drawdata.getUint16(1, false);\n const r = (((c >> 10) & 0x1F) << 3);\n const g = (((c >> 5) & 0x1F) << 3);\n const b = (( c & 0x1F) << 3);\n for (let idx = 1; idx < drawdata.byteLength; idx += 2) {\n const x = drawdata.getUint8(idx + 0);\n const y = drawdata.getUint8(idx + 1);\n putPixel(x, y, r, g, b);\n }\n }\n break;\n }\n};\nconst raw2arr = (rArrayBuffer) => {\n const rv = new DataView(rArrayBuffer);\n const result = []; // :FlexList\n for (let y = 0; y < 256; y++) {\n const line = []; // :FlexList\n for (let x = 0; x < 256; x++) {\n const c = rv.getUint16((((y * 256) + x) * 2), false);\n const r = (((c >> 10) & 0x1F) << 3).toString(16).padStart(2, \"0\");\n const g = (((c >> 5) & 0x1F) << 3).toString(16).padStart(2, \"0\");\n const b = (( c & 0x1F) << 3).toString(16).padStart(2, \"0\");\n const p = [r, g, b];\n line.push(p);\n }\n result.push(line);\n }\n return result;\n};\nconst arr2raw = (rArr) => {\n const result = new ArrayBuffer((256 * 256 * 2));\n const dv = new DataView(result);\n for (let y = 0; y < 256; y++) {\n for (let x = 0; x < 256; x++) {\n let c = 0;\n c = c | (((r >> 3) & 0x1F) << 10);\n c = c | (((g >> 3) & 0x1F) << 5);\n c = c | ((b >> 3) & 0x1F);\n dv.setUint16((((y * 256) + x) * 2), c, false);\n }\n }\n return new Blob(result);\n};\nconst handler = async function(req :Request) {\n const req_url = new URL(req.url);\n if (req_url.pathname == \"/announcePeer\") {\n const now = Date.now();\n var others = await blobstore.getJSON(\"tiny-canvas/peers\");\n others = others.filter((o) => (o.e > now));\n if (req_url.searchParams.has(\"id\")) {\n const id = req_url.searchParams.get(\"id\");\n others.push({i: id, e: (now + 300000)});\n }\n await blobstore.setJSON(\"tiny-canvas/peers\", others);\n return new Response(JSON.stringify(others.map((o) => o.i)),\n { status: 200, statusText: \"Alright\", headers: {\"Content-Type\": \"application/json\"}})\n }\n if (req_url.pathname == \"/board\") {\n if ((await blobstore.list(\"tiny-canvas/board\")).length > 0) {\n const pixels = await blobstore.get(\"tiny-canvas/board\");\n return new Response(await pixels.blob(),\n { status: 200, statusText: \"Okay\", headers: {\"Content-Type\": \"application/octet-stream\"}});\n }\n }\n if (req_url.pathname == \"/putPixels\") {\n if (req_url.search == \"\") {\n return new Response(\"No pixels draw data given\", { status: 400, statusText: \"Yer fault\", headers: { \"Content-Type\": \"text/plain\"}})\n } else {\n const pixels = raw2arr(await (await blobstore.get(\"tiny-canvas/board\")).blob());\n const putPixel = (x, y, r, g, b) => {\n (pixels[y])[x] = [r, g, b];\n };\n if (req.method == \"GET\") {\n drawdata_interp(ArrayBuffer.fromBase64(req_url.search.slice(1), {alphabet: \"base64url\"}), putPixel);\n }\n if (req.method == \"POST\") {\n drawdata_interp((await req.arrayBuffer()), putPixel)\n }\n await blobstore.set(\"tiny-canvas/board\", arr2raw(pixels));\n return new Response(\"Done\", { status: 200, statusText: \"Yer fault\", headers: { \"Content-Type\": \"text/plain\"}})\n }\n }\n if (req_url.pathname == \"/\") {\n return new Response(`\n \n \n Tiny Canvas\n \n \n \n

Code