Skip to content
Snippets Groups Projects
Verified Commit bedbd151 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: keyboard button

parent 8fda09ff
No related branches found
No related tags found
No related merge requests found
Pipeline #732 passed
...@@ -22,7 +22,8 @@ ...@@ -22,7 +22,8 @@
</div> </div>
</div> </div>
<div class="side-right"> <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> <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 <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 the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> and is running
...@@ -32,7 +33,7 @@ ...@@ -32,7 +33,7 @@
target="_blank">GitLab</a>.</p> target="_blank">GitLab</a>.</p>
<p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p> <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
<div class="separator"></div> <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 id="keyboard" class="keyboard">
<div class="keyboard-line"> <div class="keyboard-line">
<span class="key">1</span> <span class="key">1</span>
...@@ -60,7 +61,7 @@ ...@@ -60,7 +61,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="separator"></div> <div id="separator-keyboard" class="separator" style="display: none;"></div>
<div id="section-diag" class="section"> <div id="section-diag" class="section">
<dl class="diag"> <dl class="diag">
<dt>Engine</dt> <dt>Engine</dt>
...@@ -93,6 +94,9 @@ ...@@ -93,6 +94,9 @@
<span id="button-fullscreen" class="tiny-button border padded"> <span id="button-fullscreen" class="tiny-button border padded">
<img src="res/maximise.svg" alt="maximise" /><span>Fullscreen</span> <img src="res/maximise.svg" alt="maximise" /><span>Fullscreen</span>
</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"> <span id="button-information" class="tiny-button border padded enabled">
<img src="res/info.svg" alt="info" /><span>Information</span> <img src="res/info.svg" alt="info" /><span>Information</span>
</span> </span>
......
...@@ -432,6 +432,21 @@ const registerButtons = () => { ...@@ -432,6 +432,21 @@ const registerButtons = () => {
maximize(); 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"); const buttonInformation = document.getElementById("button-information");
buttonInformation.addEventListener("click", () => { buttonInformation.addEventListener("click", () => {
const sectionDiag = document.getElementById("section-diag"); const sectionDiag = document.getElementById("section-diag");
......
<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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment