From bedbd1510055c611545492618bd718756cd11f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Wed, 22 Jun 2022 09:42:32 +0100
Subject: [PATCH] feat: keyboard button
---
examples/web/index.html | 10 +++++++---
examples/web/index.ts | 15 +++++++++++++++
examples/web/res/dialpad.svg | 1 +
3 files changed, 23 insertions(+), 3 deletions(-)
create mode 100644 examples/web/res/dialpad.svg
diff --git a/examples/web/index.html b/examples/web/index.html
index e012426..7fef7b2 100644
--- a/examples/web/index.html
+++ b/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>
diff --git a/examples/web/index.ts b/examples/web/index.ts
index 9b472c3..8855b6c 100644
--- a/examples/web/index.ts
+++ b/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");
diff --git a/examples/web/res/dialpad.svg b/examples/web/res/dialpad.svg
new file mode 100644
index 0000000..bc3a286
--- /dev/null
+++ b/examples/web/res/dialpad.svg
@@ -0,0 +1 @@
+<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
--
GitLab