Deploy to GitHub pages

selassje · Oct 12, 2023 · 0fe489f · 0fe489f
commit 0fe489f
Show file tree

Hide file tree

Showing 7 changed files with 303 additions and 0 deletions.
diff --git a/favicon.ico b/favicon.ico
diff --git a/img/upload-file-svgrepo-com.svg b/img/upload-file-svgrepo-com.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta lang="en" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" name="viewport" />
+    <link rel="stylesheet" href="styles.css" />
+    <script>
+        var Module = {};
+        var emulatorCanvas = null;
+        Object.defineProperty(Module, 'canvas', {
+            get: function () {
+                if (emulatorCanvas) {
+                    return emulatorCanvas;
+                }
+                var canvas = document.createElement('canvas');
+                var main = document.querySelector('#main');
+                main.insertBefore(canvas, main.firstElementChild);
+                emulatorCanvas = canvas;
+                return canvas;
+            }
+        });
+    </script>
+</head>
+
+<body>
+    <div id="sidenav">
+        <div>
+            <img id="upload_nes_file_btn" class="button" src="img/upload-file-svgrepo-com.svg"
+                onclick="upload_nes_file_btn_click()" accesskey="o"
+                title="Upload NES file to the Emulator's file system" />
+            <input type="file" id="upload_nes_file" name="upload_nes_file" accept=".NES" />
+        </div>
+        <div>
+            <img id="upload_save_file_btn" class="button" src="img/upload-file-svgrepo-com.svg"
+                onclick="upload_save_file_btn_click()" accesskey="s"
+                title="Upload Save file to the Emulator's file system" />
+            <input type="file" id="upload_save_file" name="upload_save_file" accept=".nesrs" />
+        </div>
+        <div id="download_save_files">
+            <h3>Download Save</h3>
+            <ul id="download_list">
+            </ul>
+        </div>
+    </div>
+    <div id="main">
+        <script src="nes-rs.js"></script>
+        <script src="script.js"></script>
+        <h3>About</h3>
+        <p>
+            Hi, Welcome to NES-RS, my Nintendo Entertainment System emulator.
+        </p>
+
+        <p id="text">Use buttons on the sidebar to upload a NES file or a previously saved state to the Emulator's file
+            system and then open them from the Emulator's file menu.
+            You can also download any save using links on the sidebar.
+        </p>
+        <h3>Controllers</h3>
+        <p> The default key mapping is as follows: </p>
+        <table>
+            <tr>
+                <th>NES Button</th>
+                <th>Player 1</th>
+                <th>Player 2</th>
+            </tr>
+            <tr>
+                <td>A</td>
+                <td>Q</td>
+                <td>Keypad 4</td>
+            </tr>
+            <tr>
+                <td>B</td>
+                <td>E</td>
+                <td>Keypad 5</td>
+            </tr>
+            <tr>
+                <td>Select</td>
+                <td>C</td>
+                <td>Keypad 6</td>
+            </tr>
+            <tr>
+                <td>Start</td>
+                <td>Space</td>
+                <td>Keypad +</td>
+            </tr>
+            <tr>
+                <td>Up</td>
+                <td>W</td>
+                <td>Up Arrow</td>
+            </tr>
+            <tr>
+                <td>Down </td>
+                <td>S</td>
+                <td>Down Arrow</td>
+            </tr>
+            <tr>
+                <td>Left</td>
+                <td>A</td>
+                <td>Left Arrow</td>
+            </tr>
+            <tr>
+                <td>Right</td>
+                <td>D</td>
+                <td>Right Arrow</td>
+            </tr>
+        </table>
+        <p>You can configure your own mapping from Emulator's Controllers menu</p>
+    </div>
+    <script>
+    </script>
+</body>
+
+</html>
diff --git a/nes-rs.js b/nes-rs.js
diff --git a/nes_rs.wasm b/nes_rs.wasm
diff --git a/script.js b/script.js
@@ -0,0 +1,74 @@
+function upload_nes_file_btn_click() {
+    document.getElementById("upload_nes_file").click()
+}
+function upload_save_file_btn_click() {
+    document.getElementById("upload_save_file").click()
+}
+
+function upload_file(file, dir) {
+    var reader = new FileReader();
+    reader.readAsArrayBuffer(file);
+    reader.onload = function (evt) {
+        var buf = new Uint8Array(evt.target.result);
+        FS.writeFile(dir + "/" + file.name, buf);
+        refreshDownloadList();
+    }
+}
+
+function upload_nes_file() {
+    upload_file(this.files[0], "games");
+}
+
+function upload_save_file() {
+    upload_file(this.files[0], "saves");
+}
+
+function alignElements() {
+    var bodyWidth = document.querySelector('body').clientWidth;
+    var sideWidth = document.querySelector('#sidenav').clientWidth;
+    document.querySelector('#main').style.left = sideWidth.toString() + "px";
+    document.querySelector('#main').style.width = (bodyWidth - sideWidth).toString() + "px";
+}
+
+
+function refreshDownloadList() {
+    var getFiles = (dir) => {
+        var files = [];
+        var dirContents = FS.readdir(dir);
+        var files = dirContents
+            .filter((item) => { return FS.isFile(FS.stat(dir + "/" + item).mode) });
+        return files;
+    }
+    var save_files = getFiles("saves");
+    var list = document.getElementById("download_save_files");
+    list.style.display = "none";
+    if (save_files.length > 0) {
+        var ul = document.getElementById("download_list");
+        ul.innerHTML = "";
+        save_files.forEach(element => {
+            var entry = document.createElement("li");
+            var link = document.createElement("a");
+            ul.appendChild(entry);
+            link.download = element;
+            var fileContent = FS.readFile("saves/" + element);
+            var mime = "mime/type" || "application/octet-stream";
+            link.href = URL.createObjectURL(new Blob([fileContent], { type: mime }));
+            link.innerText = element;
+            entry.appendChild(link);
+        });
+        list.style.display = "block";
+    }
+
+    alignElements();
+}
+
+FS.rmdir("home/web_user");
+FS.rmdir("home");
+FS.rmdir("tmp");
+FS.mkdir("games");
+FS.mkdir("saves");
+
+document.getElementById("upload_nes_file").addEventListener("change", upload_nes_file, false);
+document.getElementById("upload_save_file").addEventListener("change", upload_save_file, false);
+
+alignElements();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,66 @@
+
+body {
+    margin: 0px;
+    background-color: aliceblue;
+}
+
+#sidenav {
+  height: 100%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: rgb(153, 79, 79);
+  overflow-x: hidden;
+  transition: 0.5s; 
+  display: inline-block;
+}
+
+#download_save_files {
+  display: none;
+}
+
+#download_save_files ul, #download_save_files li {
+  margin: 0;
+  padding: 0;
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+#download_save_files h3 {
+  margin-right: 5px;
+  font-family:Georgia, 'Times New Roman', Times, serif
+}
+
+.button{
+  cursor: pointer;
+  width:  90px;
+}
+
+input {
+  display: none;
+}
+
+#main {
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+  height: 100%;
+  left: 90px;
+  position: relative;
+}
+
+canvas {
+  display: block;
+  margin-left:  auto;
+  margin-right: auto;
+  margin-top: 10px;
+  padding: 0px;
+  border: 0px;
+  left: 0px;
+  position:sticky;
+}
+
+tr,  th {
+  text-align: left;
+}