feat: more web related code

examples/web/.gitignore

+README.md
+package.json
+LICENSE

examples/web/index.css

+@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
+
+a {
+    text-decoration: none;
+    border-bottom: 2px dotted #ffffff;
+    color: #ffffff;
+}
+
+a:hover {
+    border-bottom-style: solid;
+}
+
+html {
+    margin: 0px 0px 0px 0px;
+    padding: 0px 0px 0px 0px;
+}
+
+body {
+    font-family: "VT323", "Robot", "Open Sans", Arial, Helvetica, sans-serif;
+    margin: 0px 0px 0px 0px;
+    background-color: #1b1a17;
+    color: #ffffff;
+    padding: 12px 12px 12px 12px;
+}
+
+p {
+    font-size: 18px;
+    line-height: 22px;
+}
+
+.main {
+    display: flex;
+}
+
+.main > .side-right {
+    flex: 1 0;
+    text-align: center;
+    margin-top: 30px;
+}
+
+.main > .side-right .canvas {
+    border: 2px solid #50cb93;
+    padding: 6px 6px 6px 6px;
+}
+
+.main > .side-left {
+    flex: 0 1;
+    box-sizing: border-box;
+    min-width: 580px;
+    padding: 0px 12px 0px 12px;
+}
+
+.main > .side-left .logo-image {
+    vertical-align: middle;
+    width: 32px;
+}
+
+.main > .side-left .separator {
+    height: 2px;
+    background: white;
+    margin: 28px 0px 28px 0px;
+}
+
+.main > .side-left .diag {
+    font-size: 24px;
+    vertical-align: top;
+}
+
+.main > .side-left .diag > dt {
+    float: left;
+    clear: both;
+    margin-top: 12px;
+}
+
+.main > .side-left .diag > dd {
+    margin-top: 12px;
+    float: right;
+}
+
+.main > .side-left .diag::after {
+    content: '';
+    display: block;
+    clear: both;
+}
+
+.overlay {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    background-color: rgba(80, 203, 147, 0.95);
+    z-index: 10;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
+    opacity: 0.0;
+    pointer-events: none;
+    transition: opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.overlay.visible {
+    opacity: 1.0;
+}
+
+.overlay .overlay-image {
+    margin-top: 16px;
+}
+
+.overlay .overlay-image > img {
+    width: 64px;
+}

examples/web/index.html

@@ -12,8 +12,18 @@
             </div>
             <div class="side-left">
                 <h1>CHIP-Ahoyto <img class="logo-image" src="res/thunder.png" /></h1>
+                <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 the rust programming language and is running inside this browser with the help of <a href="https://webassembly.org/" target="_blank">WebAssembly</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>
+                <div class="separator"></div>
+                <dl class="diag">
+                    <dt>Engine</dt>
+                    <dd>NEO</dd>
+                    <dt>CPU Frequency</dt>
+                    <dd><span id="logic-frequency">460</span> Hz</dd>
+                    <dt>Framerate</dt>
+                    <dd>60 fps</dd>
+                </dl>
             </div>
         </div>
         <div id="overlay" class="overlay">

examples/web/index.js

@@ -36,6 +36,7 @@ const ROM = "res/roms/pong.ch8";
 
 const state = {
     chip8: null,
+    logic_frequency: LOGIC_HZ,
     canvas: null,
     canvasScaled: null,
     canvasCtx: null,
@@ -69,7 +70,7 @@ const state = {
     // runs the sequence as an infinite loop, running
     // the associated CPU cycles accordingly
     while (true) {        
-        const ratioLogic = LOGIC_HZ / VISUAL_HZ;
+        const ratioLogic = state.logic_frequency / VISUAL_HZ;
         for(let i = 0; i < ratioLogic; i++) {
             state.chip8.clock_ws();
         }
@@ -99,14 +100,14 @@ const register = () => {
 
 const registerDrop = () => {
     document.addEventListener("drop", async (event) => {
+        if (!event.dataTransfer.files || event.dataTransfer.files.length === 0) return;
+
         event.preventDefault();
         event.stopPropagation();
 
         const overlay = document.getElementById("overlay");
         overlay.classList.remove("visible");
 
-        if (!event.dataTransfer.files) return;
-
         const file = event.dataTransfer.files[0];
 
         const arrayBuffer = await file.arrayBuffer();
@@ -116,16 +117,20 @@ const registerDrop = () => {
         state.chip8.load_rom_ws(data);
     });
     document.addEventListener("dragover", async (event) => {
+        if (!event.dataTransfer.items || event.dataTransfer.items[0].type) return;
+
         event.preventDefault();
 
         const overlay = document.getElementById("overlay");
         overlay.classList.add("visible");
     });
     document.addEventListener("dragenter", async (event) => {
+        if (!event.dataTransfer.items || event.dataTransfer.items[0].type) return;
         const overlay = document.getElementById("overlay");
         overlay.classList.add("visible");
     });
     document.addEventListener("dragleave", async (event) => {
+        if (!event.dataTransfer.items || event.dataTransfer.items[0].type) return;
         const overlay = document.getElementById("overlay");
         overlay.classList.remove("visible");
     });
@@ -141,11 +146,11 @@ const registerKeys = () => {
 
         switch(event.key) {
             case "+":
-                LOGIC_HZ += 60;
+                setLogicFrequency(state.logic_frequency + 60);
                 break;
 
             case "-":
-                LOGIC_HZ += 60;
+                setLogicFrequency(state.logic_frequency - 60);
                 break;
         }
     });
@@ -159,13 +164,19 @@ const registerKeys = () => {
     });
 }
 
+const setLogicFrequency = (value) => {
+    value = Math.max(value, 0);
+    state.logic_frequency = value;
+    document.getElementById("logic-frequency").textContent = value;
+}
+
 const init = () => {
     initCanvas();
 }
 
 const initCanvas = () => {
     // initializes the off-screen canvas that is going to be
-    // used in the drawing proces
+    // used in the drawing process
     state.canvas = document.createElement("canvas");
     state.canvas.width = DISPLAY_WIDTH;
     state.canvas.height = DISPLAY_HEIGHT;