2d:null 2e:["$","title",null,{"children":"Downwords, a Bogglelike word game | Alex Wein | Observable"}] 33:T635,displayInGame = (data) => { const max_selected = Math.max(...data.map(x=>x.selected_order)) const initDiv = x => { let hitbox = html`

` e => handleClickState(x.id) hitbox.onpointerdown = e => handleClickState(x.id) hitbox.onpointerenter = (e) => { if(e.buttons !== 0 && guess !== '') { handleClickState(x.id) } } let color = x.clicked === true ? '#479d2f' : 'black' let backgroundColor = x.letter === '_' ? 'black' : 'white' if(x.selected_order === max_selected && max_selected > 0) backgroundColor = '#bbdcac' let div = html`

${x.letter}

${hitbox}

` div.onpointerdown = e => handleClickState(x.id) return div } const container = html`

` // container.appendChild(scoreboard()) const board = html`

` const divs = data.map(x => initDiv(x)) for (const el of divs) board.appendChild(el) // const undoButton = html`` // const restartButton = html`` // const giveUpButton = html`` // undoButton.onclick = undoState // restartButton.onclick = restart // giveUpButton.onclick = giveUp // container.appendChild(giveUpButton) // container.appendChild(restartButton) // container.appendChild(undoButton) container.appendChild(board) return container }34:T465,handleClick = (id, data) => { // make a deep copy of data let copy = JSON.parse(JSON.stringify(data)) // get record for clicked tile let tile = copy.filter(x => x.id === id)[0] // check if clickable, if not do nothing if(tile.clickable === false) return copy // only allow starting on row 1 if(guess === '' && tile.y != 0) return copy // get max click_order let max_click_order = Math.max(...data.map(x=> x.selected_order)) || 0 // get currently active tile let lastTile = copy.filter(x => max_click_order > 0 && x.selected_order === max_click_order)[0] // // check if record is neighbor let recordIsNeighbor = lastTile === undefined || (Math.abs(lastTile.x - tile.x) <= 1 && Math.abs(lastTile.y - tile.y) <= 1) // // the record is not a neighbor do nothing, but we need to pass if there was no lastTile to check against if(max_click_order > 0 && recordIsNeighbor === false) return copy // If the tile is a clickable neighbor, set row to clicked and click_order to max+1 tile.clickable = false tile.clicked = true tile.selected_order = max_click_order + 1 return copy }35:[] 31:{"id":"bde35354f79610c2","slug":"downwords","title":"Downwords, a Bogglelike word game","thumbnail":"fb2dad0d84dc0bc4a535507faee547f0dd252de0c7a26eabc667a878d91694e0","access_level":"public","create_time":"$D2024-02-18T14:39:52.969Z","update_time":"$D2024-03-10T17:03:31.386Z","view_time":null,"first_public_time":"$D2024-03-10T17:03:01.895Z","fork":false,"stars":1,"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":381,"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":"team","id":"4093387c4c9e9fa0","login":"a-lexwein","name":"Alex Wein","avatar_url":"https://avatars-next.observableusercontent.com/24e7d8a063682ac02c3dfe01ccd791dc00d5d7f9bcb16828adbcbf2faebb73a8","tier":"starter_2024","role":"editor"},{"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Downwords, a Bogglelike word game","cells":[{"id":0,"value":"# Downwords, a Bogglelike word game\n\n### Instructions:\nUse Boggle rules to find a word that starts with a letter in the top row. When you submit a word, every row used in the word is cleared. How many words do you need to clear 50 rows?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":334,"value":"Rows Cleared: ${rowsCleared} ---- Words Used: ${wordsUsed}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"Inputs.form([\n Inputs.button(guessIsValid ? `${guess.toUpperCase()} is a valid word. submit!` : 'Invalid Guess', {reduce: handleSubmitState, disabled : !guessIsValid}),\n Inputs.button('Reset', {reduce: handleReset})\n],\n { template: (x) => html`

${x}

`}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"displayInGame(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"viewof selectFreqs = Inputs.select(names, {label: \"Frequencies\", value: \"TWL 8 - 10\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"viewof n_rows = Inputs.range([1, 20], {label: \"rows\", step: 1, value: 9})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof n_cols = Inputs.range([1, 7], {label: \"cols\", step: 1, value: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"mutable wordsUsed = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"mutable rowsCleared = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"guess","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"### todos\n\n- generate letter x\n- generate row x\n- shift row x\n- bring in wordnik and validator x\n- use 3 big words as model for input x\n- fix the z problem (aka find a different data source) x\n- experiment with dimensions x\n - at least with these distributions, never getting past row 7, so showing 9 feels safe.\n - I like 5 columns more than 4, but that's an existing preference. Maybe diminish returns with more columns.\n - need something that fits well on a phone screen. I think 9x5 works fine.\n- experiment with letter distributions\n - first experiment: use full words\n - pulled in some frequencies from Prolific\n- can I figure out animated transitions?\n ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"handleSubmitState = () => {\n \n const output = handleSubmit(guess, data)\n \n const rowsToDrop = Math.max(...data.filter(x=>x.clicked).map(x=> x.y)) + 1\n mutable wordsUsed++\n mutable rowsCleared = rowsCleared + rowsToDrop\n \n mutable data = output\n // handleReset()\n return output\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"handleSubmit = (word, data) => {\n let copy = JSON.parse(JSON.stringify(data))\n // get highest y among selected\n const rowsToDrop = Math.max(...data.filter(x=>x.clicked).map(x=> x.y)) + 1\n\n for (let i = 0; i < rowsToDrop; ++i) {\n copy = addRow(copy)\n }\n copy = copy.map((x,i) => ({\n ...x,\n id: i+1,\n clicked: false,\n clickable: x.letter === \"_\" ? false : true,\n selected_order: 0, // maybe jsonstringify doesn't want nulls? but needed a 0 here\n }))\n\n \n return copy\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"guessIsValid = guess != '' && wordnik.includes(guess.toLowerCase())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"handleClickState = id => {\n const output = handleClick(id, data)\n mutable data = output\n return output\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"handleReset = () => {\n let copy = JSON.parse(JSON.stringify(data))\n mutable data = copy\n .map((x,i) => ({\n ...x,\n id: i+1,\n clicked: false,\n clickable: x.letter === \"_\" ? false : true,\n selected_order: 0, // maybe jsonstringify doesn't want nulls? but needed a 0 here\n }))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"mutable data = newBoard(n_cols,n_rows)\n .map((x,i) => ({\n ...x,\n id: i+1,\n clicked: false,\n clickable: x.letter === \"_\" ? false : true,\n selected_order: 0, // maybe jsonstringify doesn't want nulls? but needed a 0 here\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"guess = data\n .filter(x=>x.selected_order > 0)\n .sort((x,y) => x.selected_order - y.selected_order)\n .map(x => x.letter)\n .join('')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"newRow = (n) => Array(n).fill()\n .map(randomElement)\n .map((l,i) => ({\n x: i,\n letter: l\n }))\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"bagOfLetters = frequencies\n .filter(x => x.name === selectFreqs)\n .flatMap(x => Array(x.freq).fill(x.letter))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"randomElement = () => _.sample(bagOfLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"newRowWord = (n) => _.sample(wordnik.filter(x=>x.length === n_cols))\n .toUpperCase()\n .split('')\n .map((l,i) => ({\n x: i,\n letter: l\n }))\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"newBoard = (n,m) => {\n let out = []\n for (let i = 0; i < m; ++i) {\n let row = newRow(n).map(l=> ({...l, y:i}))\n out.push(row)\n }\n return out.flat()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"addRow = (board) => {\n // get row length\n let rowLength = Math.max(...board.map(l => l.x)) + 1\n let columnLength = Math.max(...board.map(l => l.y))\n // create new row of same length\n let row = newRow(rowLength).map(l => ({ ...l, y: columnLength}))\n // remove first row\n let out = board.filter(l => l.y > 0)\n // subtract 1 from each row on existing board\n out = out.map(l=> ({ ...l, y: l.y - 1 }))\n // add new row\n return [...out, ...row]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"tileWidth = Math.min(width/n_cols - 8, 75)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"wordnik = {\n const url = 'https://raw.githubusercontent.com/wordnik/wordlist/main/wordlist-20210729.txt';\n const response = await fetch(url)\n const text = await response.text()\n const rows = text.split('\\n')\n return rows.map(row => row.replace(/\"/g, ''))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"import {frequencies, names} from '@a-lexwein/mrboggles-letter-frequencies-for-prolific'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"