From 3968d902aab0cba29e9ef13723f685c0ff67df6b Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Mon, 21 Aug 2023 15:49:16 +0200
Subject: [PATCH] refactoring interface logic

---
 index.html           |  1 +
 src/Documentation.ts |  5 ++-
 src/main.ts          | 72 +++++++++++++++-----------------------------
 3 files changed, 29 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index d31d3bd..aaaadac 100644
--- a/index.html
+++ b/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>
diff --git a/src/Documentation.ts b/src/Documentation.ts
index 6c17b2e..55733fd 100644
--- a/src/Documentation.ts
+++ b/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,
diff --git a/src/main.ts b/src/main.ts
index 4ce92dc..3d35648 100644
--- a/src/main.ts
+++ b/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() {