diff options
| -rw-r--r-- | index.html | 45 | ||||
| -rw-r--r-- | static/script.js | 44 | ||||
| -rw-r--r-- | static/styles.css | 26 |
3 files changed, 95 insertions, 20 deletions
@@ -23,13 +23,22 @@ line, Roseacrucis will reveal which letters are in the right place 🟩, in the right word but in a different place 🟨, or not in the word at all ⬜. </p> + <p> + For the ransom price of one new line with the same metrical and syllabic structure as today’s secret + line, Roseacrucis will reveal which letters are in the right place 🟩, in the right word but in a different + place 🟨, or not in the word at all ⬜. + </p> + <p> + For the ransom price of one new line with the same metrical and syllabic structure as today’s secret + line, Roseacrucis will reveal which letters are in the right place 🟩, in the right word but in a different + place 🟨, or not in the word at all ⬜. + </p> <noscript>Sorry, JavaScript is required to play Prosodyle.</noscript> <form id="game" action="javascript:void(0);" method="none"> <p> Write a line of poetry. Syllables in dark boxes should be stressed. </p> <div id="entry"></div> - <input id="kb" type="text" style="isplay:none;"></input> <div id="btns"> <button id="check" type="submit">Check</button> <button id="clear">Clear</button> @@ -59,6 +68,40 @@ <p id="guesses"></p> </form> </div> + <div class="keyboard"> + <div class="kbrow"> + <div class="key">Q</div> + <div class="key">W</div> + <div class="key">E</div> + <div class="key">R</div> + <div class="key">T</div> + <div class="key">Y</div> + <div class="key">U</div> + <div class="key">I</div> + <div class="key">O</div> + <div class="key">P</div> + </div> + <div class="kbrow"> + <div class="key">A</div> + <div class="key">S</div> + <div class="key">D</div> + <div class="key">F</div> + <div class="key">G</div> + <div class="key">H</div> + <div class="key">J</div> + <div class="key">K</div> + <div class="key">L</div> + </div> + <div class="kbrow"> + <div class="key">Z</div> + <div class="key">X</div> + <div class="key">C</div> + <div class="key">V</div> + <div class="key">B</div> + <div class="key">N</div> + <div class="key">M</div> + </div> + </div> <script src="/prosodyle/static/poems.js"></script> <script src="/prosodyle/static/script.js"></script> </body> diff --git a/static/script.js b/static/script.js index 2516256..6a52d3e 100644 --- a/static/script.js +++ b/static/script.js @@ -156,39 +156,42 @@ function winGame(challenge) { document.getElementById('share').value = `I solved the ${date} Prosodyle at cyfraeviolae.org/prosodyle. My first guess was: "${firstguess}".` } -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.target.id == 'share') { - return; - } - e.preventDefault(); - - if (e.key == 'Enter') { +function keyHandler(key) { + if (key == 'Enter') { document.getElementById('check').click() return; } var el = document.querySelector(`[data-offset="${focused}"]`); var offset = parseInt(el.getAttribute('data-offset')) var nextel; - if (e.key == 'Backspace') { + if (key == 'Backspace') { el.innerText = ''; nextel = document.querySelector(`[data-offset="${offset-1}"]`); } else { - el.innerText = e.key.toUpperCase(); + el.innerText = key.toUpperCase(); nextel = document.querySelector(`[data-offset="${offset+1}"]`); } if (nextel) { focus(nextel); unfocus(el); } +} + +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.target.id == 'share') { + return; + } + e.preventDefault(); + keyHandler(e.key) }) document.addEventListener('mousedown', function(e) { @@ -196,6 +199,10 @@ document.addEventListener('mousedown', function(e) { e.preventDefault(); unfocus(document.querySelector(`[data-offset="${focused}"]`)); focus(e.target); + } else if (Array.from(e.target.classList).includes('key')) { + e.preventDefault(); + var k = e.target.innerText + keyHandler(k) } }) @@ -219,7 +226,6 @@ document.getElementById('copy').addEventListener('click', function(e) { function focus(el) { focused = parseInt(el.getAttribute('data-offset')) el.classList.add('focus') - document.getElementById('kb').focus() } function unfocus(el) { diff --git a/static/styles.css b/static/styles.css index 5bd99f1..bf62330 100644 --- a/static/styles.css +++ b/static/styles.css @@ -148,3 +148,29 @@ hr { #share { width: 90%; } + +.keyboard { + border-top: 2px black solid; + padding-top:10px; + padding-bottom:7px; + background-color: #fdf3f3; + position: sticky; + bottom: 0; + text-align: center; + max-width: 40em; + left: 26px; +} +.kbrow { + margin-bottom: 5px; +} +.key { + font-family: Cantarell; + display: inline-block; + height: 35px; + width: 30px; + border-radius: 4px; + border: 1px black solid; + line-height: 33px; + cursor: pointer; + user-select: none; +} |