diff options
| -rw-r--r-- | static/script.js | 79 | ||||
| -rw-r--r-- | static/styles.css | 65 |
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">·</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 { |