feat: toggle narrative section

examples/web/index.html

@@ -25,14 +25,16 @@
             <h1>CHIP-Ahoyto <span id="version"></span> <img class="logo-image" src="res/thunder.png" alt="thunder" />
             </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>
-            <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
-            <div class="separator"></div>
+            <div id="section-narrative" class="section">
+                <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>
+                <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
+            </div>
+            <div id="separator-narrative"  class="separator"></div>
             <div id="section-keyboard" class="section" style="display: none;">
                 <div id="keyboard" class="keyboard">
                     <div class="keyboard-line">

examples/web/index.ts

@@ -436,13 +436,21 @@ const registerButtons = () => {
     buttonKeyboard.addEventListener("click", () => {
         const sectionKeyboard = document.getElementById("section-keyboard");
         const separatorKeyboard = document.getElementById("separator-keyboard");
+        const sectionNarrative = document.getElementById("section-narrative");
+        const separatorNarrative = document.getElementById(
+            "separator-narrative"
+        );
         if (buttonKeyboard.classList.contains("enabled")) {
             sectionKeyboard.style.display = "none";
             separatorKeyboard.style.display = "none";
+            sectionNarrative.style.display = "block";
+            separatorNarrative.style.display = "block";
             buttonKeyboard.classList.remove("enabled");
         } else {
             sectionKeyboard.style.display = "block";
             separatorKeyboard.style.display = "block";
+            sectionNarrative.style.display = "none";
+            separatorNarrative.style.display = "none";
             buttonKeyboard.classList.add("enabled");
         }
     });