From 80071d4c4496a00e2a1cb15b951a642a912b236a Mon Sep 17 00:00:00 2001
From: cyfraeviolae <cyfraeviolae>
Date: Wed, 2 Mar 2022 16:57:55 -0500
Subject: fill greens, copy line, bugfixes

---
 index.html        |  7 +++----
 static/script.js  | 47 ++++++++++++++++++++++++++++++++++++++++++-----
 static/styles.css | 17 +++++++----------
 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;
+}
-- 
cgit v1.2.3