feat: upload button support

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);

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>

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 = () => {

examples/web/res/upload.svg

+<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