30:T413,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 // 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 }31:T61a,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 }32:[{"id":"892ad9dd2a13034a8e01ed123af0f02f00b02450f8dfa2e43a9dbfd7a9c4b1b1194c49f62212c702a250b4ca677eb74b994eb71db71a53ec58fc87e5ca0fa7e0","href":"https://static.observableusercontent.com/files/892ad9dd2a13034a8e01ed123af0f02f00b02450f8dfa2e43a9dbfd7a9c4b1b1194c49f62212c702a250b4ca677eb74b994eb71db71a53ec58fc87e5ca0fa7e0","name":"output_csv.csv","type":"text/csv","lastModified":1703461925439.465,"size":341834}] 2e:{"title":"3 Big Words, a Bogglelike word game","cells":[{"id":0,"value":"# 3 Big Words, a Bogglelike word game","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"boardView = display(data, gameState)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"Inputs.button(`Play Puzzle #${level}`, {reduce: () => newPuzzle(level)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1721,"value":"## About 3 Big Words\n\n[TODO: fill this in]","pinned":false,"hidden":false,"mode":"md"},{"id":1372,"value":"## Mutable State and game logic","pinned":false,"hidden":false,"mode":"md"},{"id":964,"value":"gameloop = {\n if(matches) {\n let level = currentWord.game_level\n mutable currentWord = picks[currentWord.n + 1]\n if(level === 3) endGame()\n }\n yield true; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"mutable currentWord = picks[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"currentBoard = boardFromString(currentWord.boardstring)","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"mutable data = currentBoard\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"},{"id":849,"value":"mutable gameState = 'pre-game'","pinned":true,"hidden":false,"mode":"ojs"},{"id":944,"value":"mutable startTime = new Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"mutable stopTime = new Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1157,"value":"viewof level = Inputs.input(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"matches = guess === currentWord.word","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"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"},{"id":1719,"value":"## Functions for changing game state","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"handleClickState = id => {\n const output = handleClick(id, data)\n mutable data = output\n return output\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"undoState = () => {\n const output = undo(data)\n mutable data = output\n return output\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"undo = (data) => {\n // make a deep copy of data\n let copy = JSON.parse(JSON.stringify(data))\n // get max click_order\n let max_click_order = Math.max(...copy.map(x=> x.selected_order)) || 0\n // get currently active tile\n let lastTile = copy.filter(x => x.selected_order === max_click_order)[0]\n lastTile.selected_order = 0\n lastTile.clicked = false\n lastTile.clickable = true\n\n return copy\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"restart = () => {\n mutable data = currentBoard\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 mutable gameState = 'in-game'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"newPuzzle = (n) => {\n if(typeof n === \"number\") {\n mutable currentWord = picks[gameIndexToRow(n)]\n }else{\n mutable currentWord = _.sample(picks.filter(x=>x.game_level === 1), 1)\n }\n mutable gameState = 'in-game'\n mutable startTime = new Date()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":927,"value":"endGame = () => {\n set(viewof level, level + 1)\n mutable stopTime = new Date()\n mutable gameState = 'post-game-win'\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":541,"value":"giveUp = () => {\n // set(viewof level, level + 1)\n mutable stopTime = new Date()\n mutable gameState = 'post-game-lose'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1600,"value":"## Data for puzzles and functions to handle the data","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"picks = FileAttachment(\"output_csv.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1605,"value":"boardFromString = boardstring => boardstring\n .split(\"\")\n .map((l,i) => ({\n x: i % 4,\n y: Math.floor(i/4.0),\n letter: l\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"difficulties = {\n // take the first record from picks for each unique difficulty\n let output = []\n let seenDifficulties = []\n for (const x of picks) {\n if(seenDifficulties.includes(x.difficulty)) continue\n output.push({...x, is_clicked: x.n === 0})\n seenDifficulties.push(x.difficulty) \n }\n return output\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"difficultyToGameIndex = str => difficulties\n .filter(x=>x.difficulty === str)[0].game_index","pinned":true,"hidden":false,"mode":"ojs"},{"id":684,"value":"gameIndexToDifficulty = n => picks\n .filter(x=> x.game_index === n)[0].difficulty","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"gameIndexToRow = n => picks\n .filter(x=> x.game_index === n)[0].n","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"puzzleIndexMax = Math.max(...picks.map(x=> x.game_index)) - 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"## Display Components","pinned":false,"hidden":false,"mode":"md"},{"id":854,"value":"display = (data, gameState) => {\n if(gameState == \"pre-game\") return displayPreGame()\n if(gameState == \"in-game\") return displayInGame(data)\n if(gameState == \"post-game-win\") return displayPostGameWin()\n if(gameState == \"post-game-lose\") return displayPostGameLose()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"scoreboard = () => html`

Puzzle #${currentWord.game_index}

\n \n

guess: ${guess}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":588,"value":"displayPreGame = () => html`

3 Big Words

\n How to play:\n You will be shown a 4x4 grid of letters and black squares.\n Using Boggle rules, use all the letters to make a big word.\n Each letter is used exactly once. Touch each letter in order to find the word.\n If you're right, a second grid will appear with a new word to find.\n Find that word to see the third grid.\n The goal is to find all three words as quickly as you can.\n

You Did It!

\n You completed 3 Big Words Puzzle #${currentWord.game_index - 1} in ${Math.floor((stopTime - startTime) / 1000)} seconds!\n

Play the next level, or select another puzzle:

Too Bad!

\n You gave up on puzzle #${currentWord.game_index}. The word you couldn't find was ${currentWord.word}\n

Play the next level, or select another puzzle:

\n${Inputs.bind(Inputs.range([1,puzzleIndexMax], {step: 1, value: 1}), viewof level)}\n${Inputs.bind(mapValue(radioButtons(difficulties, {\n valueof: d => d.game_index,\n format: d => d.difficulty,\n value: 1,\n}), {to: v => difficulties.findLast((d, i, arr) => d.game_index <= v).game_index}), viewof level)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"tileWidth = Math.min(width, 75)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":1363,"value":"## Imports and helpers","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"function set(input, value) {\n // https://observablehq.com/@observablehq/synchronized-inputs\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1342,"value":"radioButtons = (values, {format: _format, ...options} = {}) => {\n // Thanks to Fabian Iwand on the Observable slack #help channel https://observablehq.com/@mootari\n const format = d => htl.html`${_format ? _format(d) : d}`;\n const form = Inputs.radio(values, {...options, format});\n const scope = DOM.uid().id;\n form.classList.add(scope);\n form.append(htl.html`