diff options
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | static/script.js | 47 | ||||
| -rw-r--r-- | static/styles.css | 17 |
3 files changed, 52 insertions, 19 deletions
@@ -78,10 +78,10 @@ </div> </div> </div> - <button id="check" type="submit">Check</button> - <button id="clear">Clear</button> + <button id="check" type="submit">Check guess</button> + <button id="clear">Clear all</button> + <button id="fill-green">Clear word and fill greens</button> </div> - <hr> <div id="win" style="display: none;"> <p> Victory is yours! Today’s secret line was in @@ -102,7 +102,6 @@ <textarea rows="4" id="share"></textarea> </div> <button id="copy">Copy</button> - <hr> </div> <p id="guesses"></p> </form> diff --git a/static/script.js b/static/script.js index 4648567..c968ca3 100644 --- a/static/script.js +++ b/static/script.js @@ -32,16 +32,19 @@ function renderWord(word, wordIdx, guess, score, offset) { } 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>`) + els.push(`<div data-word="${wordIdx}" data-word-offset="${c}" data-offset="${c+offset}" class="box ${typ} ${charclass}">${val}</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) { +function renderLine(line, guess, guessIdx, scores) { var els = [] var offset = 0; + if (guessIdx || guessIdx === 0) { + els.push(`<div class="word"><div class="box idxbox" data-guess="${guessIdx}">📋 ${guessIdx+1}</div></div>`) + } for (var wordIdx in line) { var word = line[wordIdx] els.push(renderWord(word, wordIdx, guess, scores && scores[wordIdx], offset)) @@ -84,10 +87,11 @@ function scoreLine(guess, answer) { var score = scoreWord(guessword, answerword) scores.push(score) if (!information[idx]) { - information[idx] = {greens:{}, yellows:{}, greys:{}} + information[idx] = {greens:{}, yellows:{}, greys:{}, greensrev:{}} } for (var i in score.greens) { information[idx].greens[guessword[i]] = 1 + information[idx].greensrev[i] = guessword[i] } for (var i in score.yellows) { information[idx].yellows[guessword[i]] = 1 @@ -168,14 +172,35 @@ document.getElementById('clear').onclick = function(e) { focus(document.querySelector(`[data-offset="0"]`)) } +document.getElementById('fill-green').addEventListener('click', function(e) { + e.preventDefault(); + var el = document.querySelector(`[data-offset="${focused}"]`) + if (!el) { + return + } + var w = el.getAttribute('data-word') + for (var el of document.getElementsByClassName('entrybox')) { + if (el.getAttribute('data-word') != w) { + continue + } + var c = information[el.getAttribute('data-word')].greensrev[el.getAttribute('data-word-offset')] + if (c) { + el.innerText = c + } else { + el.innerText = '' + } + } +}) + document.getElementById('check').addEventListener('click', function(e) { var guess = consumeInput() if (guess == null) { return; } + var guessIdx = guesses.length; guesses.push(guess) var scores = scoreLine(guess, challenge.line) - var linehtml = renderLine(challenge.line, guess, scores) + var linehtml = renderLine(challenge.line, guess, guessIdx, scores) guessesEl.innerHTML = linehtml + guessesEl.innerHTML var win = true; renderKeyboardLights() @@ -185,7 +210,7 @@ document.getElementById('check').addEventListener('click', function(e) { } } if (win) { - entryEl.innerHTML = linehtml + entryEl.style = 'display: none;' winGame(challenge) } }) @@ -206,6 +231,9 @@ function keyHandler(key) { return; } var el = document.querySelector(`[data-offset="${focused}"]`); + if (!el) { + return; + } if (!el.classList.contains('entrybox')) { return; } @@ -248,6 +276,15 @@ document.addEventListener('mousedown', function(e) { e.preventDefault(); var k = e.target.getAttribute('data-key') keyHandler(k) + } else if (Array.from(e.target.classList).includes('idxbox')) { + e.preventDefault(); + var guessIdx = e.target.getAttribute('data-guess') + var guess = guesses[guessIdx] + + var els = Array.from(document.getElementsByClassName("entrybox")); + for (var el of els) { + el.innerText = guess[el.getAttribute('data-word')][el.getAttribute('data-word-offset')] + } } }) diff --git a/static/styles.css b/static/styles.css index 2c0f0ef..b4064bf 100644 --- a/static/styles.css +++ b/static/styles.css @@ -55,11 +55,6 @@ border-color: rgb(120,124,126); } -hr { - border: .1px DarkSlateGrey dashed; - margin-top: 20px; -} - .poetry { font-size: 95%; font-family: Charter; @@ -118,11 +113,6 @@ hr { color: white; border-color: rgb(120,124,126); } -} - -/* .key:hover { */ -/* background-color: #f7edd6; */ -/* } */ .scansion { font-size: 90%; @@ -131,3 +121,10 @@ hr { .scansion-box { margin-bottom: .3em; } + +.idxbox { + background-color: transparent; + width: 60px; + cursor: pointer; + user-select: none; +} |