feat: more visual support

examples/web/index.css

@@ -29,22 +29,37 @@ body {
 
 p {
     font-size: 18px;
-    line-height: 22px;
+    line-height: 24px;
+    margin: 12px 0px 12px 0px;
 }
 
 .main {
     display: flex;
 }
 
+@media only screen and (max-width: 1120px) {
+    .main {
+        flex-direction: column;
+    }    
+}
+
 .main > .side-right {
     flex: 1 0;
     text-align: center;
-    margin-top: 30px;
 }
 
 .main > .side-right .canvas {
+    margin-top: 72px;
     border: 2px solid #50cb93;
-    padding: 6px 6px 6px 6px;
+    padding: 8px 8px 8px 8px;
+    background-color: #1b1a17;
+    max-width: 100%;
+}
+
+@media only screen and (max-width: 1120px) {
+    .main > .side-right .canvas {
+        margin-top: 12px;
+    }    
 }
 
 .main > .side-right .canvas.fullscreen {
@@ -65,9 +80,17 @@ p {
 .main > .side-left {
     flex: 0 1;
     min-width: 580px;
+    max-width: 100%;
     padding: 0px 24px 0px 24px;
 }
 
+@media only screen and (max-width: 1120px) {
+    .main > .side-left {
+        min-width: unset;
+        padding: 0px 0px 0px 0px;
+    }    
+}
+
 .main > .side-left .logo-image {
     vertical-align: middle;
     width: 32px;
@@ -76,7 +99,7 @@ p {
 .main > .side-left .separator {
     height: 2px;
     background: #ffffff;
-    margin: 28px 0px 28px 0px;
+    margin: 22px 0px 22px 0px;
 }
 
 .main > .side-left .diag {
@@ -90,11 +113,19 @@ p {
     margin-top: 12px;
 }
 
+.main > .side-left .diag > dt:first-of-type {
+    margin-top: 0px;
+}
+
 .main > .side-left .diag > dd {
     margin-top: 12px;
     float: right;
 }
 
+.main > .side-left .diag > dd:first-of-type {
+    margin-top: 0px;
+}
+
 .main > .side-left .diag::after {
     content: '';
     display: block;
@@ -115,18 +146,27 @@ p {
 .toast {
     position: absolute;
     left: 50%;
-    padding: 16px;
-    top: 32px;
+    padding: 12px 18px 12px 18px;
     background-color: #2a9d8f;
-    font-size: 22px;
+    font-size: 20px;
+    line-height: 22px;
     border-radius: 4px 4px 4px 4px;
     transform: translate(-50%, 0%);
+    cursor: pointer;
+    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);
+    opacity: 0.0;
+    top: -40px;
 }
 
 .toast.error {
     background-color: #e63946;
 }
 
+.toast.visible {
+    top: 24px;
+    opacity: 1.0;
+}
+
 .overlay {
     position: fixed;
     left: 0px;
@@ -169,8 +209,8 @@ p {
 }
 
 .tiny-button.padded {
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
 }
 
 .tiny-button:hover {

examples/web/index.html

@@ -43,6 +43,11 @@
                         <dd>60 fps</dd>
                     </dl>
                 </div>
+                <div class="separator"></div>
+                <div class="section">
+                    <span class="tiny-button tiny-button-left padded">Benchmark</span>
+                    <span class="tiny-button tiny-button-left padded">Information</span>
+                </div>
             </div>
         </div>
         <div id="toast" class="toast">

examples/web/index.js

@@ -6,7 +6,7 @@ import {
 const PIXEL_SET_COLOR = 0x50cb93ff;
 const PIXEL_UNSET_COLOR = 0x1b1a17ff;
 
-let LOGIC_HZ = 480;
+const LOGIC_HZ = 480;
 const TIMER_HZ = 60;
 const VISUAL_HZ = 60;
 
@@ -44,7 +44,8 @@ const state = {
     canvasCtx: null,
     canvasScaledCtx: null,
     image: null,
-    videoBuff: null
+    videoBuff: null,
+    toastTimeout: null
 };
 
 (async () => {
@@ -94,7 +95,7 @@ const state = {
         // @todo need to define target time for draw
         await new Promise((resolve, reject) => {
             setTimeout(resolve, 1000 / VISUAL_HZ);
-        })
+        });
     }
 })();
 
@@ -102,7 +103,8 @@ const register = () => {
     registerDrop();
     registerKeys();
     registerButtons();
-}
+    registerToast();
+};
 
 const registerDrop = () => {
     document.addEventListener("drop", async (event) => {
@@ -117,7 +119,7 @@ const registerDrop = () => {
         const file = event.dataTransfer.files[0];
 
         if (!file.name.endsWith(".ch8")) {
-            alert("This is probably not a CHIP-8 ROM file");
+            showToast("This is probably not a CHIP-8 ROM file!", true);
             return;
         }
 
@@ -128,6 +130,8 @@ const registerDrop = () => {
         state.chip8.load_rom_ws(data);
         
         setRom(file.name, file.size);
+
+        showToast(`Loaded ${file.name} ROM successfully!`);
     });
     document.addEventListener("dragover", async (event) => {
         if (!event.dataTransfer.items || event.dataTransfer.items[0].type) return;
@@ -175,7 +179,7 @@ const registerKeys = () => {
             return;
         }
     });
-}
+};
 
 const registerButtons = () => {
     const logicFrequencyPlus = document.getElementById("logic-frequency-plus");
@@ -187,6 +191,26 @@ const registerButtons = () => {
     logicFrequencyMinus.addEventListener("click", (event) => {
         setLogicFrequency(state.logicFrequency - 60);
     });
+};
+
+const registerToast = () => {
+    const toast = document.getElementById("toast");
+    toast.addEventListener("click", (event) => {
+        toast.classList.remove("visible");
+    });
+};
+
+const showToast = async (message, error = false, timeout = 3500) => {
+    const toast = document.getElementById("toast");
+    toast.classList.remove("error");
+    if (error) toast.classList.add("error");
+    toast.classList.add("visible");
+    toast.textContent = message;
+    if (state.toastTimeout) clearTimeout(state.toastTimeout);
+    state.toastTimeout = setTimeout(() => {
+        toast.classList.remove("visible");
+        state.toastTimeout = null;
+    }, timeout);
 }
 
 const setRom = (name, size) => {
@@ -194,17 +218,18 @@ const setRom = (name, size) => {
     state.romSize = size;
     document.getElementById("rom-name").textContent = name;
     document.getElementById("rom-size").textContent = String(size);
-}
+};
 
 const setLogicFrequency = (value) => {
+    if (value < 0) showToast("Invalid frequency value!", true);
     value = Math.max(value, 0);
     state.logicFrequency = value;
     document.getElementById("logic-frequency").textContent = value;
-}
+};
 
 const init = () => {
     initCanvas();
-}
+};
 
 const initCanvas = () => {
     // initializes the off-screen canvas that is going to be