2e:null 2f:["$","title",null,{"children":"Find A Big Word, Boggle-like (old version) | Alex Wein | Observable"}] 34:[] 32:{"id":"31e6b376cdb3af68","slug":"find-a-big-word-boggle-like","title":"Find A Big Word, Boggle-like (old version)","thumbnail":"79095d98855ddebfde92c74c30adbffbbe8e3914f0420ed81a332a9c7f59414a","access_level":"public","create_time":"$D2022-03-26T04:30:27.616Z","update_time":"$D2025-01-11T17:08:20.700Z","view_time":null,"first_public_time":"$D2022-03-27T01:52:42.393Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"4093387c4c9e9fa0","login":"a-lexwein","name":"Alex Wein","avatar_url":"https://avatars-next.observableusercontent.com/24e7d8a063682ac02c3dfe01ccd791dc00d5d7f9bcb16828adbcbf2faebb73a8","tier":"starter_2024"},"version":522,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"df192455c1e22a3a","login":"a-lexwein","name":"Alex Wein","avatar_url":"https://avatars-next.observableusercontent.com/24e7d8a063682ac02c3dfe01ccd791dc00d5d7f9bcb16828adbcbf2faebb73a8","tier":null}],"members":[{"type":"individual","id":"df192455c1e22a3a","login":"a-lexwein","name":"Alex Wein","avatar_url":"https://avatars-next.observableusercontent.com/24e7d8a063682ac02c3dfe01ccd791dc00d5d7f9bcb16828adbcbf2faebb73a8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"c17169855af69ab1","slug":"find-a-big-word","title":"Find a Big Word","owner":{"id":"4093387c4c9e9fa0","login":"a-lexwein","name":"Alex Wein"}},"type":"notebook","body":{"title":"Find A Big Word, Boggle-like (old version)","cells":[{"id":0,"value":"# Find A Big Word, Boggle-like (old version)\n\n* There is one big word embedded in the grid below.\n* Boggle rules apply: the first letter in the word neighbors (horizontal, vertical, diagonal) the second letter, the second letter neighbors the third, and so on.\n* Each white square is used exactly once.\n* Theoretically, a valid word might exist that wasn't the word used to generate the board. Because I'm lazy, only the word used to generate the board will count as correct.\n* There is no winning or losing. The objective is to find big words.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":" draw = {\n const sideLength = Math.min(width, 300)\n return html `

${drawBoard(currentBoard, sideLength)}

` \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"guess = {\n const input = html``\n const button = html``\n const submit = function(event) {\n // keycode === 13 for \"Enter\" key\n if (event.keyCode === 13) {\n event.preventDefault();\n \n handleEnter(input.value)\n input.value = \"\"\n }\n}\n const buttonSubmit = function(event) { \n handleEnter(input.value)\n input.value = \"\"\n} \n \n input.addEventListener(\"keyup\", submit)\n button.addEventListener(\"click\", buttonSubmit)\n\n return html`\n ${input}\n ${button}\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"viewof wordLengthBounds = rangeSlider({\n min: 5,\n max: 16,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [10, 16],\n // Custom slider CSS, replaces all styles.\n // Overrides the range color. Support for range colors is up to the theme.\n title: 'Min and Max of Possible Word Length',\n description: 'Shorter words tend to be easier to find',\n precision: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"htl.html `\n\n \n \n \n\n${history.map((x,i) => drawRecord(75, x))}\n

guess	answer	letters

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"## View:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":405,"value":"drawRecord = (sideLength, x) => {\n return htl.html.fragment `\n ${x.guess}\n ${x.currentWord}\n ${x.currentWord.length}\n\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"viewof correctColor = Inputs.color({value: \"#16a716\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"viewof incorrectColor = Inputs.color({value: \"#BB0000\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"focus = {\n //feels like there's a better way to do this\n guess;\n document.getElementById('guess').focus()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"The `drawBoard` function was heavily inspired by one of the Plot plots in the [Visualizing The New York Times’s Mini Crossword](https://observablehq.com/@observablehq/nyt-minis). This the first \"data viz\" I've made with Plot (although it's mostly copy-pasted code). Cool stuff.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":520,"value":"drawBoard([\n { x: 0, y: 0, letter: \"d\" },\n { x: 0, y: 1, letter: \"e\" },\n { x: 0, y: 2, letter: \"d\" },\n { x: 0, y: 3, letter: \"_\" },\n { x: 1, y: 0, letter: \"e\" },\n { x: 1, y: 1, letter: \"_\" },\n { x: 1, y: 2, letter: \"t\" },\n { x: 1, y: 3, letter: \"_\" },\n { x: 2, y: 0, letter: \"f\" },\n { x: 2, y: 1, letter: \"_\" },\n { x: 2, y: 2, letter: \"l\" },\n { x: 2, y: 3, letter: \"a\" },\n { x: 3, y: 0, letter: \"_\" },\n { x: 3, y: 1, letter: \"a\" },\n { x: 3, y: 2, letter: \"_\" },\n { x: 3, y: 3, letter: \"c\" }\n], 400)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"drawBoard = (board, width) => {\n return Plot.plot({\n width: width,\n height: width,\n marks: [\n Plot.cell(board, {\n // cells\n x: \"x\",\n y: \"y\",\n stroke: \"black\",\n strokeWidth: 3,\n }),\n Plot.cell(board, {\n // blanks\n x: \"x\",\n y: \"y\",\n filter: (d) => d.letter === \"_\",\n stroke: \"black\",\n fill: \"black\"\n }),\n Plot.text(board, {\n x: \"x\",\n y: \"y\",\n text: \"letter\",\n fill: \"black\",\n fontSize: width / 10\n })\n ],\n x: { type: \"band\", axis: false, padding: 0 },\n y: { type: \"band\", axis: false, padding: 0 },\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"## Game Logic:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"emptyBoard = () => {\n const board = []\n const rows = [...Array(4).keys()]\n const cols = [...Array(4).keys()]\n for (const i of rows) {\n for (const j of cols) {\n board.push({x: i, y: j})\n }\n }\n return board\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"boardIndex = (x,y) => 4 * x + y","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"getNeighbors = (x, y, board) => {\n let boardMax = Math.sqrt(board.length) - 1\n const neighbors = [\n [x - 1, y - 1], [x - 1, y], [x - 1, y + 1],\n [x , y - 1], , [x, y + 1],\n [x + 1, y - 1], [x + 1, y], [x + 1, y + 1]\n ]\n return neighbors.filter(([x,y]) => !(x < 0 || x > boardMax || y < 0 || y > boardMax))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"getOpenNeighbors = (x, y, board) => {\n const neighbors = getNeighbors(x,y, board)\n return neighbors.map(([x, y]) => board[boardIndex(x,y)])\n .filter(square => !(\"letter\" in square))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"recursiveStep = {\nconst step = (string, board, lastX, lastY) => {\n\n let neighbors = getOpenNeighbors(lastX, lastY, board)\n if (neighbors.length === 0) return board\n // pick a random neighor\n let i = Math.floor(Math.random() * neighbors.length)\n const next = neighbors[i]\n next.letter = string[0]\n\n if (string.length > 1) {\n return step(string.slice(1), board, next.x, next.y)\n }\n return board\n \n}\n return step\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"fillBoard = (string) => {\n let board = emptyBoard()\n // place blanks:\n const nBlanks = board.length - string.length\n \n const findRandomOpen = board => {\n let i = Math.floor(Math.random() * board.length)\n if (!(\"letter\" in board[i])) {\n return board[i]\n } else {\n return findRandomOpen(board)\n }\n }\n for (let i = 0; i < nBlanks; i++) {\n let square = findRandomOpen(board)\n square.letter = \"_\"\n }\n \n // random start\n let square = findRandomOpen(board)\n square.letter = string[0]\n return recursiveStep(string.slice(1), board, square.x, square.y)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"retryFill = (word) => {\n const isFull = board => board.filter(square => \"letter\" in square).length === 16\n let x = fillBoard(word)\n while (!isFull(x)) {\n x = fillBoard(word)\n }\n return x\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"pickWord = (min, max) => {\n const validWords = words.filter(x => x.length <= max && x.length >= min)\n const i = Math.floor(Math.random() * validWords.length)\n const word = validWords[i].toUpperCase()\n return word\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"handleEnter = (guess) => {\n const isGoodGuess = guess.toUpperCase() === currentWord\n const points = isGoodGuess ? 1 : 0\n\n let scoreAfter = score + points\n mutable score = scoreAfter\n \n const ts = new Date()\n log({guess: guess.toUpperCase(), currentWord, isGoodGuess, currentBoard, points, score})\n \n mutable currentWord = pickWord(wordLengthBounds[0], wordLengthBounds[1])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"## Game State:\n\n`guess` also contains mutable state\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"mutable currentWord = pickWord(wordLengthBounds[0], wordLengthBounds[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"currentBoard = retryFill(currentWord)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"mutable score = {\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"log = (data) => {\n mutable history = [data, ...history]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"mutable history = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md `## word list\nThis notebook uses the ENABLE word list as a file attachment.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"import {words} from '@a-lexwein/find-a-big-word'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"import {rangeSlider} from '@mootari/range-slider@1312'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"using the following three vals, I want a webpage that displays the svg results of drawBoard(retryFill(getRandomWord), 800)\n\nimport { retryFill } from \"https://esm.town/v/alexwein/gridRetryFill\";\nimport { getRandomWord } from \"https://esm.town/v/alexwein/getRandomWord\";\nimport { drawBoard } from \"https://esm.town/v/alexwein/drawBoard\";","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"