Drag and Drop

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_177":178,"_179":180},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_105":84,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":118,"_119":120,"_121":25,"_122":123,"_124":49,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","e82be770-277f-11f0-b46e-569c3dd06744","name","fileType","http","content","import { ResultSet, sqlite } from \"https://esm.town/v/std/sqlite?v=6\";\nimport { Hono } from \"npm:hono@3\";\n\nawait sqlite.batch([\n // `DROP TABLE IF EXISTS draggable_circles`,\n `CREATE TABLE IF NOT EXISTS draggable_circles (\n idx INTEGER NOT NULL UNIQUE, \n x REAL NOT NULL, \n y REAL NOT NULL\n )`,\n]);\n\n// const circles = [\n// { \"x\": 372.1564948287251, \"y\": 467.31488912659233, \"index\": 0 },\n// { \"x\": 383.03204910618865, \"y\": 409.3382384327329, \"index\": 1 },\n// { \"x\": 276.12943550800577, \"y\": 206.43967315595253, \"index\": 2 },\n// { \"x\": 332.11355889496815, \"y\": 99.81295018896702, \"index\": 3 },\n// { \"x\": 281.6660037446992, \"y\": 268.44660700812955, \"index\": 4 },\n// { \"x\": 478.1371051427014, \"y\": 155.1225458786182, \"index\": 5 },\n// { \"x\": 562.1071796055135, \"y\": 249.0351695539056, \"index\": 6 },\n// { \"x\": 361.2641058287132, \"y\": 256.52910153255004, \"index\": 7 },\n// { \"x\": 421.6175146074128, \"y\": 424.18276199871326, \"index\": 8 },\n// { \"x\": 321.24193621279403, \"y\": 407.59672549522344, \"index\": 9 },\n// { \"x\": 191.660159711138, \"y\": 432.14191514382543, \"index\": 10 },\n// { \"x\": 119.15993815756639, \"y\": 96.84634939589058, \"index\": 11 },\n// { \"x\": 121.65490887696441, \"y\": 564.6775769550197, \"index\": 12 },\n// { \"x\": 110.8157416379427, \"y\": 244.36858357746033, \"index\": 13 },\n// { \"x\": 263.1779853877889, \"y\": 202.64154214241603, \"index\": 14 },\n// { \"x\": 135.13227065644418, \"y\": 336.9982482747027, \"index\": 15 },\n// { \"x\": 129.77166867674111, \"y\": 286.4481811355409, \"index\": 16 },\n// { \"x\": 465.98646535831665, \"y\": 503.4452648259519, \"index\": 17 },\n// { \"x\": 201.30560985313258, \"y\": 300.19885737204976, \"index\": 18 },\n// { \"x\": 285.49861283238147, \"y\": 90.07963880167979, \"index\": 19 },\n// ];\n// circles.forEach(async (c) => {\n// await sqlite.execute({ sql: `INSERT INTO draggable_circles VALUES (?, ?, ?)`, args: [c.index, c.x, c.y] });\n// });\n\nfunction parseResultSet(row: ResultSet): T[] {\n return row.rows.map((r) => Object.fromEntries(r.map((c, i) => [row.columns[i], c]))) as T[];\n}\n\ntype Circle = {\n x: number;\n y: number;\n idx: number;\n};\n\nconst getCircles = async () => {\n return parseResultSet(await sqlite.execute(\"select * from draggable_circles\"));\n};\n\nfunction diffCircles(array1: Circle[], array2: Circle[]): Circle[] {\n const changes: Circle[] = [];\n\n const map1 = new Map(array1.map(row => [row.idx, row]));\n const map2 = new Map(array2.map(row => [row.idx, row]));\n\n for (const [idx, row1] of map1) {\n const row2 = map2.get(idx);\n if (row2 && (row1.x !== row2.x || row1.y !== row2.y)) {\n changes.push(row2);\n }\n }\n\n return changes;\n}\n\nconst clientCode = () => {\n const height = 600;\n const width = 600;\n const radius = 32;\n const svg = d3.select(\"svg\");\n\n const drag = (() => {\n function dragstarted() {\n d3.select(this).attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n d3.select(this).raise().attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y);\n }\n\n function dragended() {\n const x = d3.select(this).attr(\"cx\");\n const y = d3.select(this).attr(\"cy\");\n\n fetch(`/update?x=${x}&y=${y}&i=${d3.select(this).attr(\"idx\")}`, { method: \"post\" });\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n })();\n window.circleObjects = svg.selectAll(\"circle\")\n .data(circles)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"idx\", d => d.idx)\n .attr(\"r\", radius)\n .attr(\"fill\", d => d3.schemeCategory10[d.idx % 10])\n .call(drag)\n .on(\"click\", clicked);\n function clicked(event, d) {\n if (event.defaultPrevented) return; // dragged\n\n d3.select(this).transition()\n .attr(\"fill\", \"black\")\n .attr(\"r\", radius * 2)\n .transition()\n .attr(\"r\", radius)\n .attr(\"fill\", d3.schemeCategory10[d.idx % 10]);\n }\n const eventSource = new EventSource(`/update-stream`);\n eventSource.onmessage = (event) => {\n JSON.parse(event.data).forEach((c: Circle) => {\n window.circleObjects.filter(d => d.idx === c.idx).transition().duration(100).attr(\"cx\", c.x).attr(\"cy\", c.y);\n });\n };\n};\n\nconst app = new Hono();\napp.get(\"/\", async (c) => {\n const circles = await getCircles();\n return new Response(\n `\n\n\n \n \n Drag and Drop\n \n\n\n \n \n \n\n`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n});\napp.post(\"/update\", async (c) => {\n await sqlite.execute({\n sql: \"UPDATE draggable_circles SET x = ?, y = ? WHERE idx = ?\",\n args: [c.req.query(\"x\"), c.req.query(\"y\"), c.req.query(\"i\")],\n });\n return new Response(JSON.stringify(true));\n});\napp.get(\"/update-stream\", async (c) => {\n let cancelled = false;\n let circles = await getCircles();\n const body = new ReadableStream({\n async start(controller) {\n const write = (str) => {\n controller.enqueue(new TextEncoder().encode(\n \"data: \" + JSON.stringify(str) + \"\\n\\n\",\n ));\n };\n while (!cancelled) {\n let newCircles = await getCircles();\n let changed = diffCircles(circles, newCircles);\n if (changed.length > 0) {\n circles = newCircles;\n write(changed);\n }\n await new Promise(resolve => setTimeout(resolve, 100));\n }\n controller.close();\n },\n cancel() {\n cancelled = true;\n },\n });\n return new Response(body, { headers: { \"Content-Type\": \"text/event-stream\" } });\n});\nexport default app.fetch;","import { ResultSet, sqlite } from \"https://esm.town/v/std/sqlite?v=6\";\nimport { Hono } from \"npm:hono@3\";\n\nawait sqlite.batch([\n // `DROP TABLE IF EXISTS draggable_circles`,\n `CREATE TABLE IF NOT EXISTS draggable_circles (\n idx INTEGER NOT NULL UNIQUE, \n x REAL NOT NULL, \n y REAL NOT NULL\n )`,\n]);\n\n// const circles = [\n// { \"x\": 372.1564948287251, \"y\": 467.31488912659233, \"index\": 0 },\n// { \"x\": 383.03204910618865, \"y\": 409.3382384327329, \"index\": 1 },\n// { \"x\": 276.12943550800577, \"y\": 206.43967315595253, \"index\": 2 },\n// { \"x\": 332.11355889496815, \"y\": 99.81295018896702, \"index\": 3 },\n// { \"x\": 281.6660037446992, \"y\": 268.44660700812955, \"index\": 4 },\n// { \"x\": 478.1371051427014, \"y\": 155.1225458786182, \"index\": 5 },\n// { \"x\": 562.1071796055135, \"y\": 249.0351695539056, \"index\": 6 },\n// { \"x\": 361.2641058287132, \"y\": 256.52910153255004, \"index\": 7 },\n// { \"x\": 421.6175146074128, \"y\": 424.18276199871326, \"index\": 8 },\n// { \"x\": 321.24193621279403, \"y\": 407.59672549522344, \"index\": 9 },\n// { \"x\": 191.660159711138, \"y\": 432.14191514382543, \"index\": 10 },\n// { \"x\": 119.15993815756639, \"y\": 96.84634939589058, \"index\": 11 },\n// { \"x\": 121.65490887696441, \"y\": 564.6775769550197, \"index\": 12 },\n// { \"x\": 110.8157416379427, \"y\": 244.36858357746033, \"index\": 13 },\n// { \"x\": 263.1779853877889, \"y\": 202.64154214241603, \"index\": 14 },\n// { \"x\": 135.13227065644418, \"y\": 336.9982482747027, \"index\": 15 },\n// { \"x\": 129.77166867674111, \"y\": 286.4481811355409, \"index\": 16 },\n// { \"x\": 465.98646535831665, \"y\": 503.4452648259519, \"index\": 17 },\n// { \"x\": 201.30560985313258, \"y\": 300.19885737204976, \"index\": 18 },\n// { \"x\": 285.49861283238147, \"y\": 90.07963880167979, \"index\": 19 },\n// ];\n// circles.forEach(async (c) => {\n// await sqlite.execute({ sql: `INSERT INTO draggable_circles VALUES (?, ?, ?)`, args: [c.index, c.x, c.y] });\n// });\n\nfunction parseResultSet(row: ResultSet): T[] {\n return row.rows.map((r) => Object.fromEntries(r.map((c, i) => [row.columns[i], c]))) as T[];\n}\n\ntype Circle = {\n x: number;\n y: number;\n idx: number;\n};\n\nconst getCircles = async () => {\n return parseResultSet(await sqlite.execute(\"select * from draggable_circles\"));\n};\n\nfunction diffCircles(array1: Circle[], array2: Circle[]): Circle[] {\n const changes: Circle[] = [];\n\n const map1 = new Map(array1.map(row => [row.idx, row]));\n const map2 = new Map(array2.map(row => [row.idx, row]));\n\n for (const [idx, row1] of map1) {\n const row2 = map2.get(idx);\n if (row2 && (row1.x !== row2.x || row1.y !== row2.y)) {\n changes.push(row2);\n }\n }\n\n return changes;\n}\n\nconst clientCode = () => {\n const height = 600;\n const width = 600;\n const radius = 32;\n const svg = d3.select(\"svg\");\n\n const drag = (() => {\n function dragstarted() {\n d3.select(this).attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n d3.select(this).raise().attr(\"cx\", d.x = event.x).attr(\"cy\", d.y = event.y);\n }\n\n function dragended() {\n const x = d3.select(this).attr(\"cx\");\n const y = d3.select(this).attr(\"cy\");\n\n fetch(`/update?x=${x}&y=${y}&i=${d3.select(this).attr(\"idx\")}`, { method: \"post\" });\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n })();\n window.circleObjects = svg.selectAll(\"circle\")\n .data(circles)\n .join(\"circle\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"idx\", d => d.idx)\n .attr(\"r\", radius)\n .attr(\"fill\", d => d3.schemeCategory10[d.idx % 10])\n .call(drag)\n .on(\"click\", clicked);\n function clicked(event, d) {\n if (event.defaultPrevented) return; // dragged\n\n d3.select(this).transition()\n .attr(\"fill\", \"black\")\n .attr(\"r\", radius * 2)\n .transition()\n .attr(\"r\", radius)\n .attr(\"fill\", d3.schemeCategory10[d.idx % 10]);\n }\n const eventSource = new EventSource(`/update-stream`);\n eventSource.onmessage = (event) => {\n JSON.parse(event.data).forEach((c: Circle) => {\n window.circleObjects.filter(d => d.idx === c.idx).transition().duration(100).attr(\"cx\", c.x).attr(\"cy\", c.y);\n });\n };\n};\n\nconst app = new Hono();\napp.get(\"/\", async (c) => {\n const circles = await getCircles();\n return new Response(\n `\n\n\n \n \n Drag and Drop\n \n \n\n\n \n \n \n\n`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n});\napp.post(\"/update\", async (c) => {\n await sqlite.execute({\n sql: \"UPDATE draggable_circles SET x = ?, y = ? WHERE idx = ?\",\n args: [c.req.query(\"x\"), c.req.query(\"y\"), c.req.query(\"i\")],\n });\n return new Response(JSON.stringify(true));\n});\napp.get(\"/update-stream\", async (c) => {\n let cancelled = false;\n let circles = await getCircles();\n const body = new ReadableStream({\n async start(controller) {\n const write = (str) => {\n controller.enqueue(new TextEncoder().encode(\n \"data: \" + JSON.stringify(str) + \"\\n\\n\",\n ));\n };\n while (!cancelled) {\n let newCircles = await getCircles();\n let changed = diffCircles(circles, newCircles);\n if (changed.length > 0) {\n circles = newCircles;\n write(changed);\n }\n await new Promise(resolve => setTimeout(resolve, 100));\n }\n controller.close();\n },\n cancel() {\n cancelled = true;\n },\n });\n return new Response(body, { headers: { \"Content-Type\": \"text/event-stream\" } });\n});\nexport default app.fetch;","createdAt",["D",1717848200422],"branchVersion","branchId","e828d1d4-277f-11f0-b46e-569c3dd06744","id","e828847c-277f-11f0-b46e-569c3dd06744","circles",["D",1746209075776],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","8a86e3e7-cae8-48ea-a1d8-c8cf7b30d88c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","4b933fb9-e150-4558-9d0a-845e595c8c78","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":14,"_32":84,"_43":42,"_85":44,"_86":87,"_88":61,"_89":51,"_90":91,"_92":93,"_94":45,"_95":96},"isOwned","main","projectId","forkedBranchId","1adaf6ac-252d-11f0-8a67-569c3dd06744","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","1adaa364-252d-11f0-8a67-569c3dd06744","forkedProjectOrgId","c1e7642a-74cc-4d69-8652-20abbdeaa94e","projectName","userHandle","pomdtr","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2RCoAITJZH1QencEgtVjh4Qirj4.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":173,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":174,"_79":175,"_81":176,"_83":25},"tree",[164,165],"files",[164,165],"counts",{"_154":61,"_155":145,"_156":61,"_157":158,"_159":160},"contents",[139,140],"upstreamProject",{"_43":91,"_32":136,"_53":-5,"_54":-5,"_50":51,"_77":137},"upstreamBranch",{"_43":87,"_38":129,"_130":131,"_32":84,"_85":91,"_13":132,"_86":-5,"_88":-5,"_133":134,"_47":-5,"_83":25,"_50":51,"_95":135,"_62":93,"_94":136},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1745953610275],"updatedAt",["D",1718223674287],105,"lockfileKey","1755560055244-esm.town_v_maxm_multiplayerCircles@105-main","maxm","multiplayerCircles",{"_97":135,"_104":138},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJnTEtkSHlOMWxWZm1GRHdKYUVTNklYM3FpdiJ9",{"_43":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":145,"_143":49,"_38":151,"_13":61,"_33":20,"_35":152,"_24":25,"_146":-5,"_27":153},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":49,"_38":144,"_13":145,"_33":34,"_35":37,"_24":25,"_146":-5,"_27":147},"e831d73e-277f-11f0-b46e-569c3dd06744","parentId","latest",["D",1717848200422],1,"label",[28],"e82c0476-277f-11f0-b46e-569c3dd06744","README.md","e82c04ee-277f-11f0-b46e-569c3dd06744",["D",1717798622418],"# Multiplayer Circles\n\nMove circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .\n\n![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)\n",[149],"pulls","branches","forks","envVars",{"_161":61,"_163":61},"connections",{"_161":61,"_162":61},"count","unfilledCount","emptyCount",{"_43":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":145,"_143":49,"_38":170,"_13":61,"_33":20,"_35":152,"_24":25,"_146":-5,"_167":171,"_27":172},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":49,"_38":166,"_13":145,"_33":34,"_35":37,"_24":25,"_146":-5,"_167":168,"_27":169},["D",1717848200422],"children",[],[28],["D",1717798622418],[],[149],["D",1746209075776],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":14,"_32":84,"_43":42,"_85":44,"_86":87,"_88":61,"_89":51,"_90":91,"_92":93,"_94":45,"_95":96},"ctx",{"_77":-5,"_126":210,"_211":212,"_213":214,"_215":25,"_216":25,"_217":25,"_218":49,"_219":-5,"_220":-7,"_221":-7,"_222":61,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_181":182,"_183":184,"_185":84,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v2