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

feat: support for on screen keyboard

parent 000b1a38
No related branches found
No related tags found
No related merge requests found
Pipeline #726 passed
...@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ...@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added ### Added
* * Support for on screen keyboard
### Changed ### Changed
......
...@@ -220,7 +220,6 @@ p { ...@@ -220,7 +220,6 @@ p {
-khtml-opacity: 0.0; -khtml-opacity: 0.0;
-webkit-opacity: 0.0; -webkit-opacity: 0.0;
padding: 12px 18px 12px 18px; padding: 12px 18px 12px 18px;
pointer-events: all;
position: relative; position: relative;
top: -46px; 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); 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 { ...@@ -243,6 +242,7 @@ p {
-moz-opacity: 1.0; -moz-opacity: 1.0;
-khtml-opacity: 1.0; -khtml-opacity: 1.0;
-webkit-opacity: 1.0; -webkit-opacity: 1.0;
pointer-events: all;
top: 24px; top: 24px;
} }
...@@ -480,7 +480,6 @@ p { ...@@ -480,7 +480,6 @@ p {
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24); -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
min-width: 480px; min-width: 480px;
padding: 24px 24px 24px 24px; padding: 24px 24px 24px 24px;
pointer-events: initial;
text-align: left; text-align: left;
transform: scale(0.96); transform: scale(0.96);
-o-transform: scale(0.96); -o-transform: scale(0.96);
...@@ -498,6 +497,7 @@ p { ...@@ -498,6 +497,7 @@ p {
.modal-container.visible > .modal { .modal-container.visible > .modal {
max-width: 100%; max-width: 100%;
pointer-events: all;
transform: scale(1); transform: scale(1);
-o-transform: scale(1); -o-transform: scale(1);
-ms-transform: scale(1); -ms-transform: scale(1);
...@@ -543,3 +543,52 @@ p { ...@@ -543,3 +543,52 @@ p {
.modal-container > .modal .modal-buttons > .tiny-button:last-child { .modal-container > .modal .modal-buttons > .tiny-button:last-child {
margin-right: 0px; 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;
}
...@@ -25,6 +25,35 @@ ...@@ -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>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> <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="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"> <div id="section-diag" class="section">
<dl class="diag"> <dl class="diag">
<dt>Engine</dt> <dt>Engine</dt>
......
...@@ -268,6 +268,7 @@ const register = async () => { ...@@ -268,6 +268,7 @@ const register = async () => {
registerDrop(), registerDrop(),
registerKeys(), registerKeys(),
registerButtons(), registerButtons(),
registerKeyboard(),
registerCanvas(), registerCanvas(),
registerToast(), registerToast(),
registerModal() registerModal()
...@@ -469,6 +470,23 @@ const registerButtons = () => { ...@@ -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 registerCanvas = () => {
const canvasClose = document.getElementById("canvas-close"); const canvasClose = document.getElementById("canvas-close");
canvasClose.addEventListener("click", () => { canvasClose.addEventListener("click", () => {
......
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