input to div

2 files changed, 92 insertions, 52 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"]`));
diff --git a/static/styles.css b/static/styles.css
index d46a8d2..06cb18a 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -35,10 +35,6 @@ a:hover {
 	font-weight: bold;
 }
 
-div {
-    margin-bottom: 10px;
-}
-
 form {
 	border: 1px DarkSlateGrey solid;
     padding: 10px;
@@ -50,80 +46,87 @@ form {
     margin-right: 6px;
 }
 
-.ingredient {
-    display: inline-block;
-    margin-right: 5px;
-    margin-bottom: 5px;
-}
-
 button {
     margin-right: 10px;
 }
 
 .box {
-    width: 35px;
-    height: 35px;
+	display: inline-block;
+    width: 40px;
+    height: 40px;
     text-align: center;
     font-weight: bold;
     font-size: 22px;
     border: 2px lightgrey solid;
     margin-right: 0px;
     margin-left: 0px;
-    text-transform: uppercase;
 	color: black;
-	box-sizing: border-box;
-	caret-color: transparent;
-	outline:0px none transparent;
-	/* appearance: none; */
-	/* -moz-appearance: none; */
+	background-color: white;
+	vertical-align: top;
+	line-height: 39px;
+	font-family: Cantarell;
 }
-.box:focus {
+.focus {
 	background-color: #fff079;
 }
-.box::selection {
-	color: none;
-	background: none;
-}
 .syllable .box:not(:first-child) {
 	margin-left: -1px;
+	border-left-style: dotted;
 }
 .syllable .box:not(:last-child) {
 	margin-right: -1px;
+	border-right-style: dotted;
+}
+.word .syllable:not(:first-child) {
+	margin-left: -1px;
+}
+.word .syllable:not(:last-child) {
+	margin-right: -1px;
+}
+.syllable.stress + .syllable .entrybox:first-child {
+	border-left-color: darkslategrey;
+}
+.stress {
+	z-index: 9999;
 }
 
 .syllable {
-    display: inline;
+    display: inline-block;
 }
 .syllable-sep {
-    display: inline;
+    display: inline-block;
     font-size: 30px;
     margin: 1px;
 }
 .word {
     display: inline-block;
     margin-right: 40px;
-	margin-bottom: 7px;
+	margin-bottom: 5px;
+}
+.line {
+	margin-bottom: 15px;
 }
 
-.stress>.box {
+.stress>.entrybox {
     border-color: darkslategrey;
-	/* background-color: lightcyan; */
 }
 
 .green {
 	background-color: rgb(106, 170, 100);
 	color: white;
-	border: 0;
+	border-color: rgb(106, 170, 100);
 }
 .yellow {
 	background-color: rgb(201, 180, 88);
 	color: white;
-	border: 0;
+	/* border: 0; */
+	border-color: rgb(201,180,88);
 }
 .grey {
 	background-color: rgb(120, 124, 126);
 	color: white;
-	border: 0;
+	/* border: 0; */
+	border-color: rgb(120,124,126);
 }
 
 hr {