DrawBoard = (level) => {
if (round === 50) return html`<h2>You correctly guessed ${correct} out of ${round} Non-Words.</h2>`
let notIndex = _.random(3)
let wordIndices = [0,1,2,3].filter(x=>x !== notIndex)
wordIndices = _.shuffle(wordIndices)
let board = new Array(4)
board[notIndex] = level.notword
board[wordIndices[0]] = level.word1
board[wordIndices[1]] = level.word2
board[wordIndices[2]] = level.word3
let container = html`<div class="board"></div>`
let scoreBoard = html`<div>${correct}/${round}</div>`
for (let i = 0; i < board.length; i++) {
let word = board[i]
let div = html`<div class="word">${word.toUpperCase()}</div>`
let handleClick = () => {
mutable guesses = [...guesses, i === notIndex]
if (i === notIndex) mutable correct++
mutable round++
}
div.addEventListener('click', handleClick)
container.appendChild(div)
}
container.appendChild(scoreBoard)
if (round > 0) {
let summaryTextRight = `Correct! ${levels[round-1].notword.toUpperCase()} is not a word.`
let summaryTextWrong = `Incorrect! ${levels[round-1].notword.toUpperCase()} is not a word.`
container.appendChild(html`<div>${guesses[round-1] ? summaryTextRight : summaryTextWrong}</div>`)
}
return container
}