From 65bdf80017962f1d0269c4ed8435e2e9ea625504 Mon Sep 17 00:00:00 2001
From: cyfraeviolae <cyfraeviolae>
Date: Sat, 26 Feb 2022 00:40:53 -0500
Subject: input to div
---
static/script.js | 79 ++++++++++++++++++++++++++++++++++++++++---------------
static/styles.css | 65 +++++++++++++++++++++++----------------------
2 files changed, 92 insertions(+), 52 deletions(-)
(limited to 'static')
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">·</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 {
--
cgit v1.2.3