// global constants const gridWidth = 5 const gridHeight = 6 const word = wordlist[Math.floor(Math.random()*wordlist.length)]; // global state variables var gameCompleted = null // HTML items const gameContainer = document.getElementById("game_container") const gridItems = [] // helper functions const gridItemId = (row, column) => "grid_item_" + row + "_" + column const getGridRow = (row) => gridItems[row] const getGridItem = (row, column) => gridItems[row].items[column] const isLetter = string => /^[a-zA-Z]$/.test(string) function setGridLetter(row, column, letter) { console.log([row, column]) console.log(letter) getGridItem(row, column).letter = letter getGridItem(row, column).HTMLItem.getElementsByClassName("grid_item_p")[0].innerHTML = letter !== null ? letter : "" } function checkGridRow() { var [row, _ ] = findCurrentLetterPosition() var rowWord = '' getGridRow(row).items.forEach(item => rowWord += item.letter) console.log(rowWord) if (!wordlist.includes(rowWord)) { body.classList.add("incorrect") setTimeout( () => body.classList.remove("incorrect"), 500) return } var correct_letters = 0 var dedupword = word for (var column = 0; column < gridWidth; column++) { gridItem = getGridItem(row, column) // letters are removed from dedupword as letters are matched if (gridItem.letter === null) return if (gridItem.letter === word[column]) { gridItem.HTMLItem.classList.add('grid_correct') correct_letters += 1 } else if (dedupword.includes(gridItem.letter)) { gridItem.HTMLItem.classList.add('grid_present') } else { gridItem.HTMLItem.classList.add('grid_wrong') } dedupword = dedupword.replace(gridItem.letter, '') console.log(gridItem.letter) console.log(dedupword) if (correct_letters == gridWidth) gameCompleted = true } getGridRow(row).complete = true if (row === gridHeight-1) gameCompleted = true } function init(){ // clear game div gameContainer.innerHTML = "" // build letter grid and populate gridItems const letterGrid = document.createElement("div") letterGrid.setAttribute("id", "letter_grid") for (var row = 0; row < gridHeight; row++) { var gridRow = document.createElement('div') gridRow.classList.add('grid_row') gridItems.push({ items: [], complete: false, }) for (var column = 0; column < gridWidth; column++) { var gridItem = document.createElement('div') gridItem.classList.add('grid_item') gridItem.setAttribute('id', gridItemId(row, column)) var gridItemP = document.createElement('p') gridItemP.classList.add('grid_item_p') gridItem.appendChild(gridItemP) gridRow.appendChild(gridItem) gridItems[row].items.push({ HTMLItem: gridItem, letter: null, correct: null }) } letterGrid.appendChild(gridRow) } gameContainer.appendChild(letterGrid) gameCompleted = false } function findNextLetterPosition() { for (var row = 0; row < gridHeight; row++) { for (var column = 0; column < gridWidth; column++) { if (getGridItem(row, column).letter === null) return [row, column] } } } function findCurrentLetterPosition() { var lastRow = 0 var lastColumn = 0 for (var row = 0; row < gridHeight; row++) { for (var column = 0; column < gridWidth; column++) { if (getGridItem(row, column).letter === null) return [lastRow, lastColumn] lastRow = row lastColumn = column } } return [lastRow, lastColumn] } function setNextLetter(key) { if (gameCompleted) return var [currentRow, currentColumn] = findCurrentLetterPosition() if (key.code === "Backspace") { if (currentColumn === -1 || getGridRow(currentRow).complete) return setGridLetter(currentRow, currentColumn, null) return } if (key.code === "Enter") { checkGridRow() } if (isLetter(key.key)) { if (key.altKey || key.ctrlKey || key.metaKey) return var [nextRow, nextColumn] = findNextLetterPosition() if (currentRow !== nextRow && !getGridRow(currentRow).complete) return setGridLetter(nextRow, nextColumn, key.key) return } } // create event listeners document.addEventListener('keyup', (e) => { console.log(e) setNextLetter(e) }) init()