feat: new package details

examples/web/index.html

@@ -16,7 +16,7 @@
                 </div>
             </div>
             <div class="side-right">
-                <h1>CHIP-Ahoyto <img class="logo-image" src="res/thunder.png" /></h1>
+                <h1>CHIP-Ahoyto <span id="version"></span> <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 <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>

examples/web/index.ts

@@ -246,14 +246,16 @@ const start = async ({
 };
 
 const register = async () => {
-    registerDrop();
-    registerKeys();
-    registerButtons();
-    registerToast();
+    await Promise.all([
+        registerDrop(),
+        registerKeys(),
+        registerButtons(),
+        registerToast()
+    ]);
 };
 
 const init = async () => {
-    initCanvas();
+    await Promise.all([initBase(), initCanvas()]);
 };
 
 const registerDrop = () => {
@@ -437,7 +439,13 @@ const registerToast = () => {
     });
 };
 
-const initCanvas = () => {
+const initBase = async () => {
+    const response = await fetch("package.json");
+    const info = await response.json();
+    setVersion(info.version);
+};
+
+const initCanvas = async () => {
     // initializes the off-screen canvas that is going to be
     // used in the drawing process
     state.canvas = document.createElement("canvas");
@@ -487,6 +495,10 @@ const showToast = async (message: string, error = false, timeout = 3500) => {
     }, timeout);
 };
 
+const setVersion = (value: string) => {
+    document.getElementById("version").textContent = value;
+};
+
 const setEngine = (name: string, upper = true) => {
     name = upper ? name.toUpperCase() : name;
     document.getElementById("engine").textContent = name;