diff options
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | static/script.js | 6 | ||||
| -rw-r--r-- | static/styles.css | 16 |
3 files changed, 18 insertions, 7 deletions
@@ -29,6 +29,7 @@ Write a line of poetry. Syllables in dark boxes should be stressed. </p> <div id="entry"></div> + <input id="kb" type="text" style="display:none;"></input> <div id="btns"> <button id="check" type="submit">Check</button> <button id="clear">Clear</button> @@ -50,7 +51,7 @@ adding punctuation as desired. </p> <div> - <textarea cols="80" rows="6" id="share"></textarea> + <textarea rows="4" id="share"></textarea> </div> <button id="copy">Copy</button> <hr> diff --git a/static/script.js b/static/script.js index 778fdd0..37c5725 100644 --- a/static/script.js +++ b/static/script.js @@ -150,7 +150,7 @@ function winGame(challenge) { winEl.style = 'display: block;' document.getElementById('btns').style = 'display: none;' document.getElementById('meter').innerText = challenge.meter - document.getElementById('ctx').innerHTML = challenge.ctx.replaceAll(/^(.*)/gm, '\t$1') + `\n\t<span class="byline">—<a href="${challenge.link}">${challenge.title}</a>, ${challenge.collection}, ${challenge.author}</span>` + document.getElementById('ctx').innerHTML = challenge.ctx.replaceAll(/^(.*)/gm, ' $1') + `\n\t<span class="byline">—<a href="${challenge.link}">${challenge.title}</a>, ${challenge.collection}, ${challenge.author}</span>` var date = new Date().toISOString().slice(0, 10) var firstguess = Object.values(guesses[0]).join(' ') document.getElementById('share').value = `I solved the ${date} Prosodyle at cyfraeviolae.org/prosodyle. My first guess was: "${firstguess}".` @@ -166,6 +166,9 @@ document.addEventListener('keydown', function(e) { 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') { @@ -216,6 +219,7 @@ 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 06cb18a..5bd99f1 100644 --- a/static/styles.css +++ b/static/styles.css @@ -38,7 +38,8 @@ a:hover { form { border: 1px DarkSlateGrey solid; padding: 10px; - padding-left: 25px; + padding-left: 20px; + padding-right: 20px; } .sep { @@ -52,18 +53,18 @@ button { .box { display: inline-block; - width: 40px; - height: 40px; + width: 25px; + height: 25px; text-align: center; font-weight: bold; - font-size: 22px; + font-size: 14px; border: 2px lightgrey solid; margin-right: 0px; margin-left: 0px; color: black; background-color: white; vertical-align: top; - line-height: 39px; + line-height: 25px; font-family: Cantarell; } .focus { @@ -135,6 +136,7 @@ hr { } .poetry { + font-size: 85%; font-family: EBGaramond; } @@ -142,3 +144,7 @@ hr { font-style: italic; font-size: 75%; } + +#share { + width: 90%; +} |