[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_216":217,"_218":219},"routes/_app.x.$handle.$name",{"_93":92,"_32":44,"_102":83,"_27":35,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",25,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","readme.md","latestPath","fileId","6cd089b4-febb-11f0-b4ad-42dde27851f2","name","fileType","content","","When I was first becoming interested in learning javascript, it was to use the data visualization library D3. \nThis was my first project after some Scott Murray tutorials. It's a simple word game.\nIt it's neither a good game or a good page, but we all have to start somewhere.\n\nThe original code is on [github](https://github.com/a-lexwein/ConnectedDots/).\nI had townie move from importing a complete wordlist to making a sql query.\nBut otherwise, it seems to play exactly like how it played when I made in one week in Summer 2017.\n\nI still never really managed to learn D3.","createdAt",["D",1769874585216],"branchVersion","branchId","e057d3cc-feb8-11f0-9efe-42dde27851f2","id","e0576144-feb8-11f0-9efe-42dde27851f2","connectedDots",["D",1769873043970],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","my very first javascript project (a word game)","imageUrl","b85dcfbf-50f1-466c-9e2b-28ac90e0dd23","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","875ed3cd-ae4b-40bb-a45f-6a1970e11689","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_101":97},"org",{"_93":92,"_94":95,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","alexwein","handle","displayName","Alex Wein","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycjh6emNHdk9mMnY5djU3OFZBbEdleGhQZFAifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_32":44,"_37":212,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":213,"_78":214,"_80":215,"_82":25},"tree",[187,188,189,190,191,192],"files",[187,188,189,190,191,192],"counts",{"_176":60,"_177":178,"_179":60,"_180":181,"_182":183},"contents",[124,125,126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":169,"_32":170,"_30":171,"_133":-5,"_40":41,"_39":172,"_135":119,"_37":173,"_13":152,"_33":20,"_34":174,"_24":25,"_139":-5,"_27":175},{"_42":160,"_32":161,"_30":162,"_133":-5,"_40":41,"_39":163,"_135":119,"_37":164,"_13":152,"_33":165,"_34":166,"_24":25,"_139":167,"_27":168},{"_42":154,"_32":155,"_30":156,"_133":-5,"_40":41,"_39":137,"_135":119,"_37":157,"_13":152,"_33":20,"_34":158,"_24":25,"_139":-5,"_27":159},{"_42":150,"_32":28,"_30":31,"_133":-5,"_40":41,"_39":14,"_135":119,"_37":151,"_13":152,"_33":20,"_34":36,"_24":25,"_139":-5,"_27":153},{"_42":141,"_32":142,"_30":143,"_133":-5,"_40":41,"_39":144,"_135":119,"_37":145,"_13":146,"_33":147,"_34":148,"_24":25,"_139":-5,"_27":149},{"_42":130,"_32":131,"_30":132,"_133":-5,"_40":41,"_39":134,"_135":119,"_37":136,"_13":137,"_33":20,"_34":138,"_24":25,"_139":-5,"_27":140},"365b2f2a-feba-11f0-84cc-42dde27851f2","styles.css","26c49d80-feba-11f0-a77a-42dde27851f2","parentId",18,"latest",["D",1769873617771],5,".button {\n background-color: deeppink;\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n cursor: pointer;\n}\n\nbody {\n font: 17px sans-serif;\n white-space: pre-line;\n}\n\n.axis path,\n.axis line {\n fill: none;\n stroke: #000;\n shape-rendering: crispEdges;\n}\n\n.dotClick {\n stroke: #000;\n stroke-width: .6em;\n}\n\n.text {\n text-anchor: middle;\n margin: 0 auto;\n width: 30em;\n}\n\n#guess {\n font-size: 24pt;\n float: right;\n position: relative;\n visibility: hidden;\n}\n#guess2 {\n font-size: 24pt;\n float: right;\n position: relative;\n}\n\n\n#main {\n float: left;\n width: 60%;\n}","label",[131],"1ca9a1b0-feba-11f0-b059-42dde27851f2","script.js","1763e968-feba-11f0-873d-42dde27851f2",11,["D",1769873574659],2,"script","// var data = [];\n// //var maxCol = 2;\n// for (var i = 0; i < 4; i++) {\n// for (var j = 0; j < 4; j++) {\n// data.push({'x':i,'y':j})\n// }\n// }\n//\n// var data = [\n// {x: 0, y: 0, text: 's'},\n// {x: 0, y: 1, text: 't'},\n// {x: 0, y: 2, text: 'p'},\n//\n// {x: 1, y: 0, text: 'e'},\n// {x: 1, y: 1, text: 'a'},\n// {x: 1, y: 2, text: 'o'},\n//\n// {x: 2, y: 0, text: 'x'},\n// {x: 2, y: 1, text: 'g'},\n// {x: 2, y: 2, text: 't'}\n// ]\n\n//https://stackoverflow.com/questions/19269545/how-to-get-n-no-elements-randomly-from-an-array\n\nvar makeWords = function(numWords) {\n function getRandomInt(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive\n }\n\n function getRandom(arr, n) {\n var result = new Array(n),\n len = arr.length,\n taken = new Array(len);\n if (n > len)\n throw new RangeError(\"getRandom: more elements taken than available\");\n while (n--) {\n var x = Math.floor(Math.random() * len);\n result[n] = arr[x in taken ? taken[x] : x];\n taken[x] = --len;\n }\n return result;\n }\n\n var wordLengths = [5,7]\n var splits = 3\n var words = getRandom(ospd.filter(function(x){\n return x.length >= wordLengths[0] && x.length <= wordLengths[1];\n }),numWords)\n\n var words1 = words.map(function(x) {\n var len = x.length;\n var end1 = getRandomInt(1,len-2);\n var end2 = getRandomInt(end1+1, len-1);\n return [x.slice(0,end1), x.slice(end1,end2), x.slice(end2,len)]\n })\n\n words1 = _.unzip(words1)\n // var wordLength = 6\n // var words = getRandom(ospd.filter(x => x.length === wordLength),numWords)\n //\n // words1 = words.map(function(x) {\n // return [x.slice(0,2), x.slice(2,4), x.slice(4,6)]\n // })\n //\n // words1 = _.unzip(words1)\n\n data = []\n for (var i = 0; i < words1.length; i++) {\n var arr = _.shuffle(words1[i]);\n for (var j = 0; j < arr.length; j++) {\n var node = {x: i, y: j, text: arr[j]};\n data.push(node)\n }\n }\n data.words = words\n return data\n}\n\nvar numWords = 4\nvar data = makeWords(numWords)\nvar colors = _.shuffle(['deeppink', 'darkorange', 'gold', 'blueviolet', 'chartreuse', 'dodgerblue'])\nvar colorIndex = 0;\n\nvar setBoard = function(data) {\n\n var maxCol = Math.max(...data.map(point => point.x))\n var maxGuess = Math.max(...data.map(point => point.y))\n\n\n var guess2 = '';\n\n var activeCol = -1;\n var guessCount = 0;\n var lastClick = {x: 0, y:0};\n var clicks = [lastClick];\n\n var a = window\n var w = a.innerWidth;\n var h = a.innerHeight * 2/3;\n\n\n\n var xValue = function(d) { return d.x;}, // data -> value\n xScale = d3.scale.linear().range([0, w]), // value -> display\n xMap = function(d) { return xScale(xValue(d));}, // data -> display\n yValue = function(d) { return d.y;}, // data -> value\n yScale = d3.scale.linear().range([h, 0]),\n yMap = function(d) { return yScale(yValue(d));}; // data -> display\n\n\n // don't want dots overlapping axis, so add in buffer to data domain\n xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);\n yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);\n\n var svg = d3.select(\"#main\").append(\"svg\").attr({\n width: w,\n height: h\n });\n\n var lines = svg.append('g');\n var dots = svg.append('g');\n var text = svg.append('g');\n var dotClick = svg.append('g');\n\n\n dots.selectAll(\".dot\")\n .data(data)\n .enter().append(\"circle\")\n .attr(\"class\", \"dot\")\n .attr(\"r\", 25)\n .attr(\"cx\", xMap)\n .attr(\"cy\", yMap)\n .attr(\"col\", xValue)\n // .attr('fill-opacity', 0)\n .attr('text', x => x.text)\n .attr('used', false)\n\n dotClick.selectAll(\".dotClick\")\n .data(data)\n .enter().append(\"circle\")\n .attr(\"class\", \"dotClick\")\n .attr(\"r\", 27)\n .attr(\"cx\", xMap)\n .attr(\"cy\", yMap)\n .attr(\"col\", xValue)\n .attr('fill-opacity', 0)\n // .attr('stroke-opacity', 0)\n .attr('text', x => x.text)\n .attr('used', false)\n\n text.selectAll(\".text\")\n .data(data)\n .enter().append(\"text\")\n .attr(\"class\", \"text\")\n .attr(\"x\", xMap)\n .attr(\"y\", yMap)\n .style('fill', 'white')\n .text(x => x.text)\n\n function connectDots(a,b) {\n lines.append('line')\n .attr({\n x1: a.x,\n y1: a.y,\n x2: b.x,\n y2: b.y,\n stroke: colors[colorIndex%colors.length]\n })\n }\n\n function removeLastLine() {\n $(\"line\").last().remove()\n activeCol --;\n }\n\n svg.selectAll(\".dotClick\").on(\"click\", function() {\n var click = {\n x:d3.select(this).attr('cx'),\n y:d3.select(this).attr('cy'),\n col:Number(d3.select(this).attr('col')),\n text: d3.select(this).attr('text'),\n used: d3.select(this).attr('used')\n }\n clicks.unshift(click);\n\n if (click.col === activeCol + 1 & click.used === \"false\") {\n d3.select(this).style('stroke',colors[colorIndex%colors.length])\n var guess = $('#guess').text()\n $('#guess').text(guess + click.text)\n guess2 = guess2 + click.text;\n d3.select(this).attr('used', \"true\");\n\n if (click.col === 0) {\n lastClick = click\n activeCol ++\n } else {\n\n connectDots(lastClick, click);\n activeCol ++;\n lastClick = click;\n\n\n\n if (activeCol === maxCol) {\n activeCol = -1;\n var guess = $('#guess').text()\n $('#guess').text(guess + '\\n')\n $('#guess2').append('

'+guess2+'

')\n guess2 = ''\n guessCount++\n colorIndex ++;\n }\n }\n\n }\n if (guessCount > maxGuess) {\n var result = checkList() ? 'CORRECT!' : 'WRONG!'\n svg.append(\"text\")\n .attr(\"x\", 150)\n .attr(\"y\", 150)\n .attr(\"text-anchor\", \"middle\")\n .style(\"font-size\", \"40px\")\n .style(\"text-decoration\", \"underline\")\n .text(result);\n }\n });\n}\nsetBoard(data);\n\nvar check = function(word) {\n return ospd.indexOf(word) !== -1;\n}\n\nvar checkList = function() {\n var arr = $('li').map(function() {\n return $(this).text();\n }).get();\n return arr.every(check);\n}\n\nvar reset = function() {\n d3.select('svg').remove()\n $('li').remove()\n setBoard(data)\n}\n\nvar newBoard = function() {\n data = makeWords(numWords);\n reset();\n}",[142],"77047692-febc-11f0-bbd5-42dde27851f2",["D",1769874585216],3,[28],"e20db460-feb9-11f0-98e0-42dde27851f2","prompt.md","e422a1b2-feb8-11f0-a54a-42dde27851f2",["D",1769873476321],"https://github.com/a-lexwein/ConnectedDots\n\nthis contains an early coding project I made that I would like to host on val town with the exact same front-end.\n\n- start by copying all the files into this val besides the ospd.txt and ospd.js\n- script.js has the following lines 48-50. comment it out and replace it with an api call to the `judgments` table\n```\n var words = getRandom(ospd.filter(function(x){\n return x.length >= wordLengths[0] && x.length <= wordLengths[1];\n }),numWords)\n```\n\nmain.ts should be an http endpoint that let's one play the game",[155],"7c584fee-feba-11f0-bcc1-42dde27851f2","main.ts","e05a0da4-feb8-11f0-9efe-42dde27851f2",21,["D",1769873735195],"http","import { sqlite } from \"https://esm.town/v/std/sqlite\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n // API endpoint to get random words\n if (url.pathname === \"/api/words\") {\n const minLength = parseInt(url.searchParams.get(\"minLength\") || \"5\");\n const maxLength = parseInt(url.searchParams.get(\"maxLength\") || \"7\");\n const count = parseInt(url.searchParams.get(\"count\") || \"4\");\n \n try {\n const result = await sqlite.execute({\n sql: `SELECT word FROM judgments \n WHERE length(word) >= ? AND length(word) <= ? \n ORDER BY RANDOM() \n LIMIT ?`,\n args: [minLength, maxLength, count]\n });\n \n const words = result.rows.map((row: any) => row[0]);\n \n return new Response(JSON.stringify(words), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n \n // API endpoint to check if a word is valid\n if (url.pathname === \"/api/check\") {\n const word = url.searchParams.get(\"word\")?.toLowerCase();\n if (!word) {\n return new Response(JSON.stringify({ error: \"No word provided\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n \n try {\n const result = await sqlite.execute({\n sql: \"SELECT word FROM judgments WHERE word = ?\",\n args: [word]\n });\n \n const isValid = result.rows.length > 0;\n return new Response(JSON.stringify({ word, valid: isValid }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n \n // Serve the game HTML\n const html = `\n\n\n\n\n

\n \n \n

\n\n \n \n \n \n\n`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n","alexsfirstwordgamewasbad",[161],"25b73844-feba-11f0-9018-42dde27851f2","index.html","0c54af26-feba-11f0-b059-42dde27851f2",12,["D",1769873589848],"\n\n\n\n\n\n\n\n

\n \n \n

\n\n \n \n \n \n \n\n",[170],"pulls","branches",1,"forks","envVars",{"_184":60,"_186":60},"connections",{"_184":60,"_185":60},"count","unfilledCount","emptyCount",{"_42":169,"_32":170,"_30":171,"_133":-5,"_40":41,"_39":172,"_135":119,"_37":209,"_13":152,"_33":20,"_34":174,"_24":25,"_139":-5,"_194":210,"_27":211},{"_42":160,"_32":161,"_30":162,"_133":-5,"_40":41,"_39":163,"_135":119,"_37":206,"_13":152,"_33":165,"_34":166,"_24":25,"_139":167,"_194":207,"_27":208},{"_42":154,"_32":155,"_30":156,"_133":-5,"_40":41,"_39":137,"_135":119,"_37":203,"_13":152,"_33":20,"_34":158,"_24":25,"_139":-5,"_194":204,"_27":205},{"_42":150,"_32":28,"_30":31,"_133":-5,"_40":41,"_39":14,"_135":119,"_37":200,"_13":152,"_33":20,"_34":36,"_24":25,"_139":-5,"_194":201,"_27":202},{"_42":141,"_32":142,"_30":143,"_133":-5,"_40":41,"_39":144,"_135":119,"_37":197,"_13":146,"_33":147,"_34":148,"_24":25,"_139":-5,"_194":198,"_27":199},{"_42":130,"_32":131,"_30":132,"_133":-5,"_40":41,"_39":134,"_135":119,"_37":193,"_13":137,"_33":20,"_34":138,"_24":25,"_139":-5,"_194":195,"_27":196},["D",1769873617771],"children",[],[131],["D",1769873574659],[],[142],["D",1769874585216],[],[28],["D",1769873476321],[],[155],["D",1769873735195],[],[161],["D",1769873589848],[],[170],["D",1769873043970],{"_93":92,"_101":97},{"_93":92,"_94":95,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"ctx",{"_76":-5,"_121":249,"_250":251,"_252":253,"_254":25,"_255":25,"_256":25,"_257":119,"_258":-5,"_259":-7,"_260":-7,"_261":60,"_262":25,"_263":25,"_264":-5,"_265":25,"_266":25,"_267":25,"_268":-5},"ENV",{"_220":221,"_222":223,"_224":83,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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 · v25