From 000b1a38f3757534fc72763ab02ff13345cb06f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Tue, 21 Jun 2022 22:59:35 +0100
Subject: [PATCH] feat: upload button support
---
examples/web/index.css | 20 ++++++++++++++++++++
examples/web/index.html | 4 ++++
examples/web/index.ts | 27 +++++++++++++++++++++------
examples/web/res/upload.svg | 1 +
4 files changed, 46 insertions(+), 6 deletions(-)
create mode 100644 examples/web/res/upload.svg
diff --git a/examples/web/index.css b/examples/web/index.css
index 3b999ed..6ab6a6a 100644
--- a/examples/web/index.css
+++ b/examples/web/index.css
@@ -317,6 +317,10 @@ p {
background-color: #50cb93;
}
+.tiny-button.file {
+ position: relative;
+}
+
.tiny-button:hover {
background-color: #50cb93;
}
@@ -357,6 +361,22 @@ p {
margin-top: 0px;
}
+.tiny-button.file > input[type="file"] {
+ cursor: pointer;
+ height: 100%;
+ margin-left: calc(-100% + 10px);
+ margin-top: -4px;
+ opacity: 0;
+ -o-opacity: 0;
+ -ms-opacity: 0;
+ -moz-opacity: 0;
+ -khtml-opacity: 0;
+ -webkit-opacity: 0;
+ position: absolute;
+ vertical-align: top;
+ width: 100%;
+}
+
.overlay {
align-items: center;
background-color: rgba(80, 203, 147, 0.95);
diff --git a/examples/web/index.html b/examples/web/index.html
index 77f194f..0fd3155 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -66,6 +66,10 @@
<span id="button-theme" class="tiny-button border padded">
<img src="res/marker.svg"/><span>Theme</span>
</span>
+ <span id="button-upload" class="tiny-button border padded file">
+ <img src="res/upload.svg"/><span>Upload ROM</span>
+ <input type="file" id="button-upload-file" name="button-upload-file" accept=".ch8">
+ </span>
</div>
</div>
</div>
diff --git a/examples/web/index.ts b/examples/web/index.ts
index ec823a5..470ab4a 100644
--- a/examples/web/index.ts
+++ b/examples/web/index.ts
@@ -257,7 +257,7 @@ const start = async ({
// updates the complete set of global information that
// is going to be displayed
- setEngine(engine);
+ setEngine(state.engine);
setRom(romName, romData);
setLogicFrequency(state.logicFrequency);
setFps(state.fps);
@@ -280,8 +280,12 @@ const init = async () => {
const registerDrop = () => {
document.addEventListener("drop", async (event) => {
- if (!event.dataTransfer.files || event.dataTransfer.files.length === 0)
+ if (
+ !event.dataTransfer.files ||
+ event.dataTransfer.files.length === 0
+ ) {
return;
+ }
event.preventDefault();
event.stopPropagation();
@@ -299,10 +303,7 @@ const registerDrop = () => {
const arrayBuffer = await file.arrayBuffer();
const romData = new Uint8Array(arrayBuffer);
- state.chip8.reset_hard_ws();
- state.chip8.load_rom_ws(romData);
-
- setRom(file.name, romData);
+ start({ engine: null, romName: file.name, romData: romData });
showToast(`Loaded ${file.name} ROM successfully!`);
});
@@ -452,6 +453,20 @@ const registerButtons = () => {
const background = BACKGROUNDS[state.background_index];
setBackground(background);
});
+
+ const buttonUploadFile = document.getElementById(
+ "button-upload-file"
+ ) as HTMLInputElement;
+ buttonUploadFile.addEventListener("change", async () => {
+ const file = buttonUploadFile.files[0];
+
+ const arrayBuffer = await file.arrayBuffer();
+ const romData = new Uint8Array(arrayBuffer);
+
+ start({ engine: null, romName: file.name, romData: romData });
+
+ showToast(`Loaded ${file.name} ROM successfully!`);
+ });
};
const registerCanvas = () => {
diff --git a/examples/web/res/upload.svg b/examples/web/res/upload.svg
new file mode 100644
index 0000000..99911c5
--- /dev/null
+++ b/examples/web/res/upload.svg
@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="uploadIconTitle" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#ffffff"> <title id="uploadIconTitle">Upload</title> <path d="M12,4 L12,17"/> <polyline points="7 8 12 3 17 8"/> <path d="M20,21 L4,21"/> </svg>
\ No newline at end of file
--
GitLab