summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html3
-rw-r--r--static/script.js6
-rw-r--r--static/styles.css16
3 files changed, 18 insertions, 7 deletions
diff --git a/index.html b/index.html
index 973f4c1..1805be4 100644
--- a/index.html
+++ b/index.html
@@ -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">&mdash;<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">&mdash;<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%;
+}