refactoring interface logic

index.html

@@ -84,6 +84,7 @@
                 <p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Code</p>
                 <p rel="noopener noreferrer" id="docs_time" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time</p>
                 <p rel="noopener noreferrer" id="docs_sound" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sound</p>
+                <p rel="noopener noreferrer" id="docs_samples" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Samples</p>
                 <p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
                 <p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
                 <p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Shortcuts</p>

src/Documentation.ts

@@ -2,7 +2,9 @@ const key_shortcut = (shortcut: string): string => {
   return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
 };
 
-const injectAvailableSamples = (): string => {};
+const injectAvailableSamples = (): string => {
+  return "";
+};
 
 const introduction: string = `
 # Welcome
@@ -523,6 +525,7 @@ export const documentation = {
   code: code,
   time: time,
   sound: sound,
+  samples: samples,
   midi: midi,
   functions: functions,
   reference: reference,

src/main.ts

@@ -501,55 +501,31 @@ export class Editor {
     });
     tryEvaluate(this, this.universes[this.selected_universe.toString()].init);
 
-    // Setting up the documentation page
-    document
-      .getElementById("docs_introduction")!
-      .addEventListener("click", () => {
-        this.currentDocumentationPane = "introduction";
-        this.updateDocumentationContent();
-      });
-    document.getElementById("docs_interface")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "interface";
-      this.updateDocumentationContent();
-    });
-    document.getElementById("docs_code")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "code";
-      this.updateDocumentationContent();
-    });
-    document.getElementById("docs_time")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "time";
-      this.updateDocumentationContent();
-    });
-    document.getElementById("docs_sound")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "sound";
-      this.updateDocumentationContent();
-    });
-    document.getElementById("docs_midi")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "midi";
-      this.updateDocumentationContent();
-    });
+    [
+      "introduction",
+      "interface",
+      "code",
+      "time",
+      "sound",
+      "samples",
+      "midi",
+      "functions",
+      "reference",
+      "shortcuts",
+      "about",
+    ].forEach((e) => {
+      let name = `docs_` + e;
+      document.getElementById(name)!
+        .addEventListener("click", () => {
+          this.currentDocumentationPane = e;
+          this.updateDocumentationContent();
+        });
+   });
 
-    document.getElementById("docs_functions")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "functions";
-      this.updateDocumentationContent();
-    });
-    document.getElementById("docs_reference")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "reference";
-      this.updateDocumentationContent();
-    });
-    document.getElementById("docs_shortcuts")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "shortcuts";
-      this.updateDocumentationContent();
-    });
-    document.getElementById("docs_about")!.addEventListener("click", () => {
-      this.currentDocumentationPane = "about";
-      this.updateDocumentationContent();
-    });
-
-    // Passing the API to the User
-    Object.entries(this.api).forEach(([name, value]) => {
-      (globalThis as Record<string, any>)[name] = value;
-    });
+   // Passing the API to the User
+   Object.entries(this.api).forEach(([name, value]) => {
+     (globalThis as Record<string, any>)[name] = value;
+   });
   }
 
   get note_buffer() {