input to div

1 files changed, 58 insertions, 21 deletions

diff --git a/static/script.js b/static/script.js
index 73a6f4f..778fdd0 100644
--- a/static/script.js
+++ b/static/script.js
@@ -30,14 +30,14 @@ function renderWord(word, wordIdx, guess, score, offset) {
             }
             var val = guess ? guess[wordIdx][c] : ''
             var typ = guess ? 'solbox' : 'entrybox'
-            sylEls.push(`<input data-word="${wordIdx}" data-character="${c}" data-offset="${c+offset}" class="box ${typ} ${charclass}" type="text" maxlength="1" required title="A-Z only" value="${val}" pattern="[A-Za-z]" ${able}></input>`)
+            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>`)
     }
 
-    return `<div class="word">` + els.join(`<div class="syllable-sep">&middot;</div>`) + `</div>`
+    return `<div class="word">` + els.join('') + `</div>`
 }
 
 function renderLine(line, guess, scores) {
@@ -47,13 +47,17 @@ function renderLine(line, guess, scores) {
         var word = line[wordIdx]
         els.push(renderWord(word, wordIdx, guess, scores && scores[wordIdx], offset))
         offset += word.join('').replaceAll('/', '').length
-        console.log(word, word.join('').replaceAll('/', '').length)
     }
     return `<div class="line">` + els.join('') + `</div>`
 }
 
 function consumeInput() {
     var els = Array.from(document.getElementsByClassName("entrybox"));
+    for (var el of els) {
+        if (el.innerText.trim().length == '') {
+            return null
+        }
+    }
     els.sort((x, y) => {
         var xword = x.getAttribute('data-word')
         var xchar = x.getAttribute('data-character')
@@ -68,7 +72,7 @@ function consumeInput() {
     var words = {}
     for (var el of els) {
         words[el.getAttribute('data-word')] = (words[el.getAttribute('data-word')] || '') +
-                el.value.toUpperCase()
+                el.innerText.trim().toUpperCase()
     }
     return words
 }
@@ -110,16 +114,22 @@ function scoreWord(guess, answer) {
     return {greens: greens, yellows: yellows, greys: greys}
 }
 
+var focused = null;
+
 document.getElementById('clear').onclick = function(e) {
     e.preventDefault();
     for (var el of document.getElementsByClassName('entrybox')) {
-        el.value = ''
+        el.innerText = ''
     }
-    document.querySelector(`[data-offset="0"]`).focus();
+    unfocus(document.querySelector(`[data-offset="${focused}"]`));
+    focus(document.querySelector(`[data-offset="0"]`))
 }
 
-document.getElementById('game').addEventListener('submit', function(e) {
+document.getElementById('check').addEventListener('click', function(e) {
     var guess = consumeInput()
+    if (guess == null) {
+        return;
+    }
     guesses.push(guess)
     var scores = scoreLine(guess, challenge.line)
     var linehtml = renderLine(challenge.line, guess, scores)
@@ -146,25 +156,43 @@ function winGame(challenge) {
     document.getElementById('share').value = `I solved the ${date} Prosodyle at cyfraeviolae.org/prosodyle. My first guess was: "${firstguess}".`
 }
 
-document.getElementById('entry').addEventListener('keypress', function(e) {
-    if (!Array.from(e.target.classList).includes('entrybox')) {
+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')) {
         return;
     }
-    if (e.ctrlKey || e.altKey || (e.key.length != 1 && e.key != 'Backspace')) {
+    e.preventDefault();
+
+    if (e.key == 'Enter') {
+        document.getElementById('check').click()
         return;
     }
-    e.preventDefault();
-    var offset = parseInt(e.target.getAttribute('data-offset'))
-    var el;
+    var el = document.querySelector(`[data-offset="${focused}"]`);
+    var offset = parseInt(el.getAttribute('data-offset'))
+    var nextel;
     if (e.key == 'Backspace') {
-        e.target.value = '';
-        el = document.querySelector(`[data-offset="${offset-1}"]`);
+        el.innerText = '';
+        nextel = document.querySelector(`[data-offset="${offset-1}"]`);
     } else {
-        e.target.value = e.key;
-        el = document.querySelector(`[data-offset="${offset+1}"]`);
+        el.innerText = e.key.toUpperCase();
+        nextel = document.querySelector(`[data-offset="${offset+1}"]`);
+    }
+    if (nextel) {
+        focus(nextel);
+        unfocus(el);
     }
-    if (el) {
-        el.focus();
+})
+
+document.addEventListener('mousedown', function(e) {
+    console.log('click', e.target)
+    if (Array.from(e.target.classList).includes('entrybox')) {
+        unfocus(document.querySelector(`[data-offset="${focused}"]`));
+        focus(e.target);
     }
 })
 
@@ -176,7 +204,7 @@ function getDailyChallenge() {
     var oneDay = 1000 * 60 * 60 * 24;
     var day = Math.floor(diff / oneDay);
     // end snippet
-    return challenges[day-56]
+    return challenges[day-57]
 }
 
 document.getElementById('copy').addEventListener('click', function(e) {
@@ -185,8 +213,17 @@ document.getElementById('copy').addEventListener('click', function(e) {
     document.execCommand('copy');
 })
 
+function focus(el) {
+    focused = parseInt(el.getAttribute('data-offset'))
+    el.classList.add('focus')
+}
+
+function unfocus(el) {
+    el.classList.remove('focus')
+}
+
 
 var guesses = []
 var challenge = getDailyChallenge()
 entryEl.innerHTML = renderLine(challenge.line)
-document.querySelector(`[data-offset="0"]`).focus();
+focus(document.querySelector(`[data-offset="0"]`));