words/game.js

// 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)) 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()