feat: support for on screen keyboard

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-*
+* Support for on screen keyboard
 
 ### Changed
 

examples/web/index.css

@@ -220,7 +220,6 @@ p {
     -khtml-opacity: 0.0;
     -webkit-opacity: 0.0;
     padding: 12px 18px 12px 18px;
-    pointer-events: all;
     position: relative;
     top: -46px;
     transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -243,6 +242,7 @@ p {
     -moz-opacity: 1.0;
     -khtml-opacity: 1.0;
     -webkit-opacity: 1.0;
+    pointer-events: all;
     top: 24px;
 }
 
@@ -480,7 +480,6 @@ p {
     -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
     min-width: 480px;
     padding: 24px 24px 24px 24px;
-    pointer-events: initial;
     text-align: left;
     transform: scale(0.96);
     -o-transform: scale(0.96);
@@ -498,6 +497,7 @@ p {
 
 .modal-container.visible > .modal {
     max-width: 100%;
+    pointer-events: all;
     transform: scale(1);
     -o-transform: scale(1);
     -ms-transform: scale(1);
@@ -543,3 +543,52 @@ p {
 .modal-container > .modal .modal-buttons > .tiny-button:last-child {
     margin-right: 0px;
 }
+
+.keyboard {
+    font-size: 0px;
+    text-align: center;
+}
+
+.keyboard > .keyboard-line {
+    margin-bottom: 12px;
+}
+
+.keyboard > .keyboard-line:last-child {
+    margin-bottom: 0px;
+}
+
+.keyboard .key {
+    border: 2px solid #ffffff;
+    border-radius: 5px 5px 5px 5px;
+    -o-border-radius: 5px 5px 5px 5px;
+    -ms-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    -khtml-border-radius: 5px 5px 5px 5px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 38px;
+    height: 48px;
+    line-height: 46px;
+    margin-right: 14px;
+    text-align: center;
+    user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    width: 48px;
+}
+
+.keyboard .key:last-child {
+    margin-right: 0px;
+}
+
+.keyboard .key:hover {
+    background-color: #50cb93;
+}
+
+.keyboard .key:active {
+    background-color: #2a9d8f;
+}

examples/web/index.html

@@ -25,6 +25,35 @@
                 <p>You can check the source code of it at <a href="https://gitlab.stage.hive.pt/joamag/chip-ahoyto" target="_blank">GitLab</a>.</p>
                 <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
                 <div class="separator"></div>
+                <div if="section-keyboard" class="section">
+                    <div id="keyboard" class="keyboard">
+                        <div class="keyboard-line">
+                            <span class="key">1</span>
+                            <span class="key">2</span>
+                            <span class="key">3</span>
+                            <span class="key">4</span>
+                        </div>
+                        <div class="keyboard-line">
+                            <span class="key">Q</span>
+                            <span class="key">W</span>
+                            <span class="key">E</span>
+                            <span class="key">R</span>
+                        </div>
+                        <div class="keyboard-line">
+                            <span class="key">A</span>
+                            <span class="key">S</span>
+                            <span class="key">D</span>
+                            <span class="key">F</span>
+                        </div>
+                        <div class="keyboard-line">
+                            <span class="key">Z</span>
+                            <span class="key">X</span>
+                            <span class="key">C</span>
+                            <span class="key">V</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="separator"></div>
                 <div id="section-diag" class="section">
                     <dl class="diag">
                         <dt>Engine</dt>

examples/web/index.ts

@@ -268,6 +268,7 @@ const register = async () => {
         registerDrop(),
         registerKeys(),
         registerButtons(),
+        registerKeyboard(),
         registerCanvas(),
         registerToast(),
         registerModal()
@@ -469,6 +470,23 @@ const registerButtons = () => {
     });
 };
 
+const registerKeyboard = () => {
+    const keyboard = document.getElementById("keyboard");
+    const keys = keyboard.getElementsByClassName("key");
+
+    Array.prototype.forEach.call(keys, (k: Element) => {
+        k.addEventListener("mousedown", function () {
+            const keyCode = KEYS[this.textContent.toLowerCase()];
+            state.chip8.key_press_ws(keyCode);
+        });
+
+        k.addEventListener("mouseup", function () {
+            const keyCode = KEYS[this.textContent.toLowerCase()];
+            state.chip8.key_lift_ws(keyCode);
+        });
+    });
+};
+
 const registerCanvas = () => {
     const canvasClose = document.getElementById("canvas-close");
     canvasClose.addEventListener("click", () => {