Refactor show documentation function

src/API.ts

@@ -2599,8 +2599,9 @@ export class UserAPI {
      */
     if (n === undefined) return this.app.clock.bpm;
 
-    if (n < 1 || n > 500) console.log(`Setting bpm to ${n}`);
+    if (n < 1 || n > 500) {
-    this.app.clock.bpm = n;
+      this.app.clock.bpm = n;
+    }
     return n;
   };
   // tempo = this.bpm;
@@ -2648,7 +2649,6 @@ export class UserAPI {
 
   public theme = (color_scheme: string): void => {
     this.app.readTheme(color_scheme);
-    console.log("Changing color scheme for: ", color_scheme)
   }
 
   public themeName = (): string => {

src/Documentation.ts

@@ -1,4 +1,4 @@
-import { type Editor } from "./main";
+import { Editor } from "./main";
 // Basics
 import { introduction } from "./documentation/basics/welcome";
 import { atelier } from "./documentation/basics/atelier";
@@ -48,6 +48,12 @@ import { createDocumentationStyle } from "./DomElements";
 import { filters } from "./documentation/learning/audio_engine/filters";
 showdown.setFlavor("github");
 
+type StyleBinding = {
+  type: string;
+  regex: RegExp;
+  replace: (match: string, p1: string) => string;
+};
+
 export 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-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
 };
@@ -170,34 +176,68 @@ export const documentation_factory = (application: Editor) => {
   };
 };
 
-export const showDocumentation = (app: Editor) => {
+
-  /**
+
-   * Shows or hides the documentation based on the current state of the app.
+export const showDocumentation = (app: Editor): void => {
-   * @param app - The Editor instance.
+  const toggleElementVisibility = (elementId: string, shouldHide: boolean): void => {
-   */
+    const element = document.getElementById(elementId);
-  if (document.getElementById("app")?.classList.contains("hidden")) {
+    if (element) {
-    document.getElementById("app")?.classList.remove("hidden");
+      element.classList.toggle("hidden", shouldHide);
-    document.getElementById("documentation")?.classList.add("hidden");
+    }
+  };
+
+  const applyStyleBindings = (style: Record<string, string>, updateContent: (bindings: StyleBinding[]) => void): void => {
+    const bindings: StyleBinding[] = Object.keys(style).map((key) => ({
+      type: "output",
+      regex: new RegExp(`<${key}([^>]*)>`, "g"),
+      replace: (_, p1) => `<${key} class="${style[key]}" ${p1}>`
+    }));
+    updateContent(bindings);
+  };
+
+  const appHidden = document.getElementById("app")?.classList.contains("hidden");
+  if (appHidden) {
+    toggleElementVisibility("app", false);
+    toggleElementVisibility("documentation", true);
     app.exampleIsPlaying = false;
   } else {
-    document.getElementById("app")?.classList.add("hidden");
+    toggleElementVisibility("app", true);
-    document.getElementById("documentation")?.classList.remove("hidden");
+    toggleElementVisibility("documentation", false);
-    // Load and convert Markdown content from the documentation file
+    const style = createDocumentationStyle(app);
-    let style = createDocumentationStyle(app);
+    applyStyleBindings(style, (bindings: StyleBinding[]) => updateDocumentationContent(app, bindings));
-
-    function update_and_assign(callback: Function) {
-      let bindings = Object.keys(style).map((key) => ({
-        type: "output",
-        regex: new RegExp(`<${key}([^>]*)>`, "g"),
-        //@ts-ignore
-        replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
-      }));
-      callback(bindings)
-    }
-    update_and_assign((e: Object) => updateDocumentationContent(app, e));
   }
+
+  // Reset the URL to the base URL
+  window.history.pushState({}, '', '/');
 };
 
+// export const showDocumentation = (app: Editor) => {
+//   /**
+//    * Shows or hides the documentation based on the current state of the app.
+//    * @param app - The Editor instance.
+//    */
+//   if (document.getElementById("app")?.classList.contains("hidden")) {
+//     document.getElementById("app")?.classList.remove("hidden");
+//     document.getElementById("documentation")?.classList.add("hidden");
+//     app.exampleIsPlaying = false;
+//   } else {
+//     document.getElementById("app")?.classList.add("hidden");
+//     document.getElementById("documentation")?.classList.remove("hidden");
+//     // Load and convert Markdown content from the documentation file
+//     let style = createDocumentationStyle(app);
+//     function update_and_assign(callback: Function) {
+//       let bindings = Object.keys(style).map((key) => ({
+//         type: "output",
+//         regex: new RegExp(`<${key}([^>]*)>`, "g"),
+//         //@ts-ignore
+//         replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
+//       }));
+//       callback(bindings)
+//     }
+//     update_and_assign((e: Object) => updateDocumentationContent(app, e));
+//   }
+// };
+
 export const hideDocumentation = () => {
   /**
    * Hides the documentation section and shows the main application.

src/main.ts

@@ -35,9 +35,6 @@ import colors from "./colors.json";
 // @ts-ignore
 const images = import.meta.glob("./assets/*")
 
-
-
-
 export class Editor {
   // Universes and settings
   settings: AppSettings = new AppSettings();
@@ -214,7 +211,7 @@ export class Editor {
 
     // Set the color scheme for the application
     this.readTheme(this.settings.theme);
-    
+
     this.documentationStyle = createDocumentationStyle(this);
     this.bindings = Object.keys(this.documentationStyle).map((key) => ({
       type: "output",
@@ -578,6 +575,7 @@ export class Editor {
     this.hydra = this.hydra_backend.synth;
     this.hydra.setResolution(1280, 768);
     (globalThis as any).hydra = this.hydra;
+    // Hydra is overriding the bpm function
   }
 
   private setCanvas(canvas: HTMLCanvasElement): void {