2 files changed, 51 insertions, 19 deletions

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;
+}