diff options
Diffstat (limited to 'static/script.js')
| -rw-r--r-- | static/script.js | 122 |
1 files changed, 81 insertions, 41 deletions
diff --git a/static/script.js b/static/script.js index 7ed08db..caea216 100644 --- a/static/script.js +++ b/static/script.js @@ -4,40 +4,39 @@ var entryEl = document.getElementById("entry") var guessesEl = document.getElementById("guesses") var winEl = document.getElementById("win") +function renderScansion(scansion) { + var s = '' + for (var c of scansion) { + if (c == '/') { + s += '/' + } else { + s += '×' + } + } + return s; +} + function renderWord(word, wordIdx, guess, score, offset) { var els = [] - var c = 0; - for (var syllable of word) { - var sylEls = [] - - var shouldStress = syllable[0] == "/"; - if (shouldStress) { - syllable = syllable.slice(1) - } - var stress = shouldStress ? "stress" : "" - for (var _ in syllable) { - var charclass = '' - var able = '' - if (score) { - if (score.greens[c]) { - charclass += 'green' - } else if (score.yellows[c]) { - charclass += 'yellow' - } else if (score.greys[c]) { - charclass += 'grey' - } - able = 'disabled' + for (var c in word) { + c = parseInt(c) + var charclass = '' + if (score) { + if (score.greens[c]) { + charclass += 'green' + } else if (score.yellows[c]) { + charclass += 'yellow' + } else if (score.greys[c]) { + charclass += 'grey' } - var val = guess ? guess[wordIdx][c] : '' - var typ = guess ? 'solbox' : 'entrybox' - sylEls.push(`<div data-word="${wordIdx}" data-character="${c}" data-offset="${c+offset}" class="box ${typ} ${charclass}">${val}</div>`) - c++; } - - els.push(`<div class="syllable ` + stress + `">` + sylEls.join('') + `</div>`) + var val = guess ? guess[wordIdx][c] : '' + var typ = guess ? 'solbox' : 'entrybox' + els.push(`<div data-word="${wordIdx}" data-offset="${c+offset}" class="box ${typ} ${charclass}">${val}</div>`) } - - return `<div class="word">` + els.join('') + `</div>` + var scansion = renderScansion(challenge.scansion[wordIdx]) + var scansionBox = guess ? '' : `<div class="scansion-box"><span class="scansion">${scansion}</span></div>` + return `<div class="word">${scansionBox}${els.join('')}</div>` } function renderLine(line, guess, scores) { @@ -46,7 +45,7 @@ function renderLine(line, guess, scores) { for (var wordIdx in line) { var word = line[wordIdx] els.push(renderWord(word, wordIdx, guess, scores && scores[wordIdx], offset)) - offset += word.join('').replaceAll('/', '').length + offset += word.length } return `<div class="line">` + els.join('') + `</div>` } @@ -60,9 +59,9 @@ function consumeInput() { } els.sort((x, y) => { var xword = x.getAttribute('data-word') - var xchar = x.getAttribute('data-character') + var xchar = x.getAttribute('data-offset') var yword = y.getAttribute('data-word') - var ychar = y.getAttribute('data-character') + var ychar = y.getAttribute('data-offset') if (xword != yword) { return xword - yword; @@ -81,8 +80,21 @@ function scoreLine(guess, answer) { var scores = [] for (var idx in guess) { var guessword = guess[idx] - var answerword = answer[idx].join('').replaceAll('/', '').toUpperCase() - scores.push(scoreWord(guessword, answerword)) + var answerword = answer[idx].toUpperCase() + var score = scoreWord(guessword, answerword) + scores.push(score) + if (!information[idx]) { + information[idx] = {greens:{}, yellows:{}, greys:{}} + } + for (var i in score.greens) { + information[idx].greens[guessword[i]] = 1 + } + for (var i in score.yellows) { + information[idx].yellows[guessword[i]] = 1 + } + for (var i in score.greys) { + information[idx].greys[guessword[i]] = 1 + } } return scores } @@ -114,6 +126,37 @@ function scoreWord(guess, answer) { return {greens: greens, yellows: yellows, greys: greys} } +function renderKeyboardLights() { + for (var kel of document.getElementsByClassName('key')) { + kel.classList.remove('yellowkey') + kel.classList.remove('greenkey') + kel.classList.remove('greykey') + } + var el = document.querySelector(`[data-offset="${focused}"]`); + if (!el) { + return + } + var info = information[el.getAttribute('data-word')] + if (!info) { + return + } + for (var kel of document.getElementsByClassName('key')) { + if (info.greens[kel.getAttribute('data-key')]) { + kel.classList.remove('greykey') + kel.classList.remove('yellowkey') + kel.classList.add('greenkey') + } else if (info.yellows[kel.getAttribute('data-key')]) { + kel.classList.remove('greykey') + kel.classList.remove('greenkey') + kel.classList.add('yellowkey') + } else if (info.greys[kel.getAttribute('data-key')]) { + kel.classList.remove('yellowkey') + kel.classList.remove('greenkey') + kel.classList.add('greykey') + } + } +} + var focused = null; document.getElementById('clear').onclick = function(e) { @@ -135,6 +178,7 @@ document.getElementById('check').addEventListener('click', function(e) { var linehtml = renderLine(challenge.line, guess, scores) guessesEl.innerHTML = linehtml + guessesEl.innerHTML var win = true; + renderKeyboardLights() for (var score of scores) { if (Object.keys(score.yellows).length || Object.keys(score.greys).length) { win = false; @@ -182,12 +226,6 @@ function keyHandler(key) { } document.addEventListener('keydown', function(e) { - // if (!Array.from(e.target.classList).includes('entrybox')) { - // return; - // } - // if (e.ctrlKey || e.altKey || (e.key.length != 1 && e.key != 'Backspace')) { - // return; - // } if (e.ctrlKey || e.altKey || (!"ABCDEFGHIJKLMNOPQRSTUVWXYZ".includes(e.key.toUpperCase()) && e.key != 'Backspace' && e.key != 'Enter' && e.key != 'ArrowLeft' && e.key != 'ArrowRight')) { return; } @@ -211,7 +249,7 @@ document.addEventListener('mousedown', function(e) { }) function getDailyChallenge() { - // https://stackoverflow.com/a/8619946 + // begin snippet from https://stackoverflow.com/a/8619946 var now = new Date(); var start = new Date(now.getFullYear(), 0, 0); var diff = now - start; @@ -230,6 +268,7 @@ document.getElementById('copy').addEventListener('click', function(e) { function focus(el) { focused = parseInt(el.getAttribute('data-offset')) el.classList.add('focus') + renderKeyboardLights() } function unfocus(el) { @@ -238,6 +277,7 @@ function unfocus(el) { var guesses = [] +var information = {} var challenge = getDailyChallenge() entryEl.innerHTML = renderLine(challenge.line) focus(document.querySelector(`[data-offset="0"]`)); |