feat: keyboard button

examples/web/index.html

@@ -22,7 +22,8 @@
             </div>
         </div>
         <div class="side-right">
-            <h1>CHIP-Ahoyto <span id="version"></span> <img class="logo-image" src="res/thunder.png" alt="thunder" /></h1>
+            <h1>CHIP-Ahoyto <span id="version"></span> <img class="logo-image" src="res/thunder.png" alt="thunder" />
+            </h1>
             <div class="separator"></div>
             <p>This is a <a href="https://en.wikipedia.org/wiki/CHIP-8" target="_blank">CHIP-8</a> emulator built using
                 the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> and is running
@@ -32,7 +33,7 @@
                     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="section-keyboard" class="section" style="display: none;">
                 <div id="keyboard" class="keyboard">
                     <div class="keyboard-line">
                         <span class="key">1</span>
@@ -60,7 +61,7 @@
                     </div>
                 </div>
             </div>
-            <div class="separator"></div>
+            <div id="separator-keyboard" class="separator" style="display: none;"></div>
             <div id="section-diag" class="section">
                 <dl class="diag">
                     <dt>Engine</dt>
@@ -93,6 +94,9 @@
                     <span id="button-fullscreen" class="tiny-button border padded">
                         <img src="res/maximise.svg" alt="maximise" /><span>Fullscreen</span>
                     </span>
+                    <span id="button-keyboard" class="tiny-button border padded">
+                        <img src="res/dialpad.svg" alt="info" /><span>Keyboard</span>
+                    </span>
                     <span id="button-information" class="tiny-button border padded enabled">
                         <img src="res/info.svg" alt="info" /><span>Information</span>
                     </span>

examples/web/index.ts

@@ -432,6 +432,21 @@ const registerButtons = () => {
         maximize();
     });
 
+    const buttonKeyboard = document.getElementById("button-keyboard");
+    buttonKeyboard.addEventListener("click", () => {
+        const sectionKeyboard = document.getElementById("section-keyboard");
+        const separatorKeyboard = document.getElementById("separator-keyboard");
+        if (buttonKeyboard.classList.contains("enabled")) {
+            sectionKeyboard.style.display = "none";
+            separatorKeyboard.style.display = "none";
+            buttonKeyboard.classList.remove("enabled");
+        } else {
+            sectionKeyboard.style.display = "block";
+            separatorKeyboard.style.display = "block";
+            buttonKeyboard.classList.add("enabled");
+        }
+    });
+
     const buttonInformation = document.getElementById("button-information");
     buttonInformation.addEventListener("click", () => {
         const sectionDiag = document.getElementById("section-diag");

examples/web/res/dialpad.svg

+<svg width="48px" height="48px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="dialpadIconTitle" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#ffffff"> <title id="dialpadIconTitle">Dialpad</title> <circle cx="7" cy="5" r="1"/> <circle cx="12" cy="5" r="1"/> <circle cx="17" cy="5" r="1"/> <circle cx="7" cy="10" r="1"/> <circle cx="12" cy="10" r="1"/> <circle cx="17" cy="10" r="1"/> <circle cx="7" cy="15" r="1"/> <circle cx="12" cy="15" r="1"/> <circle cx="12" cy="20" r="1"/> <circle cx="17" cy="15" r="1"/> </svg>
\ No newline at end of file