Help tab implemented

CHANGES.md

@@ -14,6 +14,7 @@ Introduced breaking meta element name changes.
 - `dosee:utils` → `dosee:utilities`
 
 * Fixed glyph display issues on macOS
+* Help tab is implemented and functional
 
 ### v1.20
 

index.css

@@ -1,10 +1,18 @@
-.radio-inline {
-  white-space: nowrap;
-}
-
 #doseeContainer > div {
   min-width: 640px;
   min-height: 480px;
   background-color: #000;
   border: 10px solid #000;
 }
+
+#helpTab > .hide {
+  display: none;
+}
+
+.radio-inline {
+  white-space: nowrap;
+}
+
+span.asterisk {
+  color: red;
+}

index.html

@@ -249,7 +249,21 @@
       </div>
     </form>
     <form id="helpTab">
-      <p>Placeholder</p>
+      <div id="helpProgram_4" class="hide">
+        <h4>Sierra - AGI Demo Pack 1</h4>
+        <p>Released: 1987</p>
+        <p>
+          Recommended hardware:
+          <a href="?dosspeed=386&dosmachine=tandy&dosaudio=none"
+            >CPU medium, Tandy graphics, no audio</a
+          ><span class="asterisk">*</span><br />
+          <small
+            ><span class="asterisk">*</span> audio will use an emulated internal
+            speaker</small
+          >
+        </p>
+      </div>
+      <div id="helpTabNA"><p>No help available</p></div>
     </form>
     <footer>
       © 2019 - Ben Garrett |

index.js

@@ -41,8 +41,8 @@ function resetTabs(defaultTab) {
 (() => {
     monitorTabs()
     resetTabs(`hardwareTab`)
+    // set the <H2> element to show the running program and archive filename
     {
-        // set the <H2> element to show the running program and archive filename
         const h2 = document.getElementById(`doseeH2`)
         const archive = `${DOSee.getMetaContent(`dosee:zip:path`)}`
         const exe = `${DOSee.getMetaContent(`dosee:run:filename`)}`
@@ -51,5 +51,20 @@ function resetTabs(defaultTab) {
             h2.innerText = `${exe} ${String.fromCharCode(8592)} ${archive}`
         } else h2.innerText = `${archive}`
     }
+    // Update help tab example
+    {
+        const path = DOSee.getMetaContent(`dosee:zip:path`)
+        const na = document.getElementById(`helpTabNA`)
+        switch (path) {
+            case `dos_programs/program_4/agi_demo_pack_1.zip`:
+                document
+                    .getElementById(`helpProgram_4`)
+                    .classList.remove(`hide`)
+                na.classList.add(`hide`)
+                break
+            default:
+                na.classList.remove(`hide`)
+        }
+    }
     console.log(`Loaded index.js`)
 })()