app.js

const tileDisplay = document.querySelector('.tileContainer')
const keyboard = document.querySelector('.keyContainer')
const messageDisplay = document.querySelector('.messageContainer')

const wordle = 'SUPER'
// let wordle

// const getWordle = () => {
//     fetch('http://localhost:8000/word')
//     .then(response => response.json())
//     .then(json => {
//         console.log(json)
//         wordle = json.toUpperCase()
//     })
//     .catch(err => console.log(err))
// }
// getWordle()

const keys = [
    'Q','W','E','R','T','Y','U','I','O','P',
    'A','S','D','F','G','H','J','K','L','ENTER',
    'Z','X','C','V','B','N','M','<<',
]

const guessRows = [
    ['','','','','',],
    ['','','','','',],
    ['','','','','',],
    ['','','','','',],
    ['','','','','',],
    ['','','','','',],
]

let currentRow = 0
let currentTile = 0
let isGameOver = false

guessRows.forEach((guessRow,guessRowIndex) => {
    const rowElement = document.createElement('div')
    rowElement.setAttribute('id','guessRow-'+guessRowIndex)
    guessRow.forEach((guess,guessIndex) => {
        const tileElement = document.createElement('div')
        tileElement.setAttribute('id','guessRow-'+guessRowIndex+'-tile-'+guessIndex)
        tileElement.classList.add('tile')
        rowElement.append(tileElement)

    })
    tileDisplay.append(rowElement)

})

keys.forEach(key => {
    const buttonElement =  document.createElement('button')
    buttonElement.textContent = key
    buttonElement.setAttribute('id', key)
    buttonElement.addEventListener('click',() => handleClick(key))
    keyboard.append(buttonElement)
})

const handleClick = (key) => {
    console.log('clicked',key)
    if (key == 'ENTER') {
        checkRow()
        console.log(guessRows)
        return
    }
    if (key == '<<') {
        // console.log('delete letter')
        deleteLetter()
        console.log(guessRows) 
        return
    }
    addLetter(key)
}

const addLetter = (letter) => {
    const tile = document.getElementById('guessRow-'+currentRow+'-tile-'+currentTile)
    tile.textContent = letter
    guessRows[currentRow][currentTile] = letter
    tile.setAttribute('data',letter)
    currentTile++
    // currentTile = (currentTile + 1)
    // if (currentTile==5) currentRow++
    // currentTile = currentTile % 5
    console.log(guessRows)
}

const deleteLetter = () => {
    if (currentTile == 0) return
    currentTile--;
    const tile = document.getElementById('guessRow-'+currentRow+'-tile-'+currentTile)
    tile.textContent = ''
    guessRows[currentRow][currentTile] = ''
    tile.setAttribute('data','')
}

const checkRow = () => {
    const guess = guessRows[currentRow].join('')

    if (currentTile > 4) {    
        console.log('guess is '+guess, 'wordle is '+wordle)
        flipTile()
        if (guess === wordle) {
            showMessage('Magnificent!')
            isGameOver = true
            return
        }
        else {
            if (currentRow >= 5) {
                isGameOver = true
                showMessage('Game Over!')
                return
            }
            if (currentRow<5) {
                showMessage('Try again!')
                currentRow++
                currentTile = 0
                return
            }
        }
    }
}

const showMessage = (message) => {
    const messageElement = document.createElement('p')
    messageElement.textContent = message
    messageDisplay.append(messageElement)
    setTimeout(() => messageDisplay.removeChild(messageElement), 2000)
}

const addColorToKey = (keyLetter, color) => {
    const key = document.getElementById(keyLetter)
    key.classList.add(color)
}

const flipTile = () => {
    const rowTiles = document.querySelector('#guessRow-'+currentRow).childNodes
    let checkWordle = wordle
    const guess = []
    
    rowTiles.forEach(tile => {
        guess.push({letter :tile.getAttribute('data'),color: 'grayOverlay'})
    })

    guess.forEach((guess,index) => {
        if (guess.letter == wordle[index]){
            guess.color = 'greenOverlay'
            checkWordle = checkWordle.replace(guess.letter,'')
        }
    })

    guess.forEach((guess,index) => {
        if (checkWordle.includes(guess.letter)){
            guess.color = 'yellowOverlay'
            checkWordle = checkWordle.replace(guess.letter,'')
        }
    })
    
    rowTiles.forEach((tile,index) => {
        const dataLetter = tile.getAttribute('data')

        setTimeout(() => {
            tile.classList.add('flip')
            tile.classList.add(guess[index].color)
            addColorToKey(guess[index].letter, guess[index].color)
        } , 500*index)
        
    })
}