on screen kb

3 files changed, 95 insertions, 20 deletions

diff --git a/index.html b/index.html
index ad76874..ffbe3b3 100644
--- a/index.html
+++ b/index.html
@@ -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&rsquo;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&rsquo;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;
+}