fix: utf-8 HTML encoding issue

8166dae5 · João Magalhães · 4387ff1b · 8166dae5 · 8166dae5 · 8166dae5
Verified Commit 8166dae5 authored 2 years ago by João Magalhães
--- a/examples/web/index.css
+++ b/examples/web/index.css
 @import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

+* {
+    box-sizing: border-box;
+}
+
 a {
    text-decoration: none;
    border-bottom: 2px dotted #ffffff;
@@ -45,7 +49,6 @@ p {

 .main > .side-left {
    flex: 0 1;
-    box-sizing: border-box;
    min-width: 580px;
    padding: 0px 12px 0px 12px;
 }
@@ -83,17 +86,30 @@ p {
    clear: both;
 }

+.footer {
+    position: absolute;
+    width: 100%;
+    bottom: 22px;
+    left: 0px;
+    padding: 0px 22px 0px 22px;
+    text-align: center;;
+}
+
 .toast {
    position: absolute;
    left: 50%;
    padding: 16px;
    top: 32px;
-    background: #e63946;
+    background-color: #2a9d8f;
    font-size: 22px;
    border-radius: 4px 4px 4px 4px;
    transform: translate(-50%, 0%);
 }

+.toast.error {
+    background-color: #e63946;
+}
+
 .overlay {
    position: absolute;
    left: 0px;

--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -2,6 +2,7 @@
 <html>
    <head>
        <title>CHIP-Ahoyto</title>
+        <meta charset="utf-8">
        <link rel="icon" href="res/icon.png" />
        <link rel="stylesheet" href="index.css" />
    </head>
@@ -13,7 +14,7 @@
            <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>This is a <a href="https://en.wikipedia.org/wiki/CHIP-8" target="_blank">CHIP-8</a> emulator built using the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> 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>
                <div class="section">
@@ -49,5 +50,8 @@
            </div>
        </div>
        <script type="module" src="index.js"></script>
+        <div class="footer">
+            Built with ❤️ by <a href="https://joao.me" target="_blank">João Magalhães</a>
+        </div>
    </body>
 </html>
--- a/examples/web/index.js
+++ b/examples/web/index.js
@@ -32,7 +32,9 @@ const KEYS = {
    "v": 0x0f
 }

-const ROM = "res/roms/pong.ch8";
+const ROM_PATH = "res/roms/pong.ch8";
+
+const ROM_NAME = "pong.ch8";

 const state = {
    chip8: null,
@@ -57,11 +59,14 @@ const state = {

    // loads the ROM data and converts it into the
    // target u8 array buffer
-    const response = await fetch(ROM);
+    const response = await fetch(ROM_PATH);
    const blob = await response.blob();
    const arrayBuffer = await blob.arrayBuffer();
    const data = new Uint8Array(arrayBuffer);

+    // updates the ROM information on display
+    setRom(ROM_NAME, data.length);
+
    // creates the CHIP-8 instance and resets it
    state.chip8 = new Chip8Neo();
    state.chip8.reset_hard_ws();