\n \n \n

\n\n \n \n \n \n \n\n","label",[18],"pulls","branches",1,"forks","envVars",{"_184":26,"_186":26},"connections",{"_184":26,"_185":26},"count","unfilledCount","emptyCount",{"_35":167,"_13":18,"_64":65,"_45":-5,"_37":38,"_168":89,"_169":162,"_39":236,"_41":171,"_67":21,"_172":173,"_69":24,"_174":-5,"_200":237,"_17":238},{"_35":226,"_13":227,"_64":228,"_45":-5,"_37":38,"_168":229,"_169":162,"_39":230,"_41":171,"_67":231,"_172":232,"_69":24,"_174":233,"_200":234,"_17":235},{"_35":219,"_13":220,"_64":221,"_45":-5,"_37":38,"_168":198,"_169":162,"_39":222,"_41":171,"_67":21,"_172":223,"_69":24,"_174":-5,"_200":224,"_17":225},{"_35":212,"_13":213,"_64":214,"_45":-5,"_37":38,"_168":130,"_169":162,"_39":215,"_41":171,"_67":21,"_172":216,"_69":24,"_174":-5,"_200":217,"_17":218},{"_35":203,"_13":204,"_64":205,"_45":-5,"_37":38,"_168":206,"_169":162,"_39":207,"_41":208,"_67":68,"_172":209,"_69":24,"_174":-5,"_200":210,"_17":211},{"_35":193,"_13":194,"_64":195,"_45":-5,"_37":38,"_168":196,"_169":162,"_39":197,"_41":198,"_67":21,"_172":199,"_69":24,"_174":-5,"_200":201,"_17":202},"365b2f2a-feba-11f0-84cc-42dde27851f2","styles.css","26c49d80-feba-11f0-a77a-42dde27851f2",18,["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}","children",[],[194],"1ca9a1b0-feba-11f0-b059-42dde27851f2","script.js","1763e968-feba-11f0-873d-42dde27851f2",11,["D",1769873574659],2,"// 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}",[],[204],"77047692-febc-11f0-bbd5-42dde27851f2","readme.md","6cd089b4-febb-11f0-b4ad-42dde27851f2",["D",1769874585216],"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.",[],[213],"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",[],[220],"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",[],[227],["D",1769873589848],[],[18],["D",1769873043970],{"_11":12,"_144":72},{"_11":12,"_139":140,"_71":72,"_30":70,"_141":142,"_143":24},{"_41":130,"_13":16,"_35":38,"_131":96,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":14,"_138":12},"ctx",{"_54":-5,"_164":276,"_277":278,"_279":280,"_281":24,"_282":24,"_283":24,"_284":162,"_285":-5,"_286":-7,"_287":-7,"_288":26,"_289":24,"_290":24,"_291":-5,"_292":24,"_293":24,"_294":24,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":16,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"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"]

History · index.html