summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html7
-rw-r--r--static/script.js47
-rw-r--r--static/styles.css17
3 files changed, 52 insertions, 19 deletions
diff --git a/index.html b/index.html
index 969634a..53af710 100644
--- a/index.html
+++ b/index.html
@@ -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&rsquo;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;
+}