Merge pull request #60 from Bubobubobubobubo/demo_song_or_not

Add option to disable demo song loading (toggled by default)

index.html

@@ -235,6 +235,11 @@
               	    <input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
               	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
               	</div>
+              	<div class="flex items-center mb-4 ml-8">
+              	    <input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
+              	</div>
+
 							</div>
               <!-- Information card -->
               <div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">

src/AppSettings.ts

@@ -53,6 +53,7 @@ export interface Settings {
   selected_universe: string;
   line_numbers: boolean;
   time_position: boolean;
+  load_demo_songs: boolean;
   tips: boolean;
 }
 
@@ -122,6 +123,7 @@ export class AppSettings {
   public line_numbers: boolean = true;
   public time_position: boolean = true;
   public tips: boolean = true;
+  public load_demo_songs: boolean = true;
 
   constructor() {
     const settingsFromStorage = JSON.parse(
@@ -139,6 +141,7 @@ export class AppSettings {
       this.line_numbers = settingsFromStorage.line_numbers;
       this.time_position = settingsFromStorage.time_position;
       this.tips = settingsFromStorage.tips;
+      this.load_demo_songs = settingsFromStorage.load_demo_songs;
     } else {
       this.universes = template_universes;
     }
@@ -162,6 +165,7 @@ export class AppSettings {
       line_numbers: this.line_numbers,
       time_position: this.time_position,
       tips: this.tips,
+      load_demo_songs: this.load_demo_songs,
     };
   }
 
@@ -183,6 +187,7 @@ export class AppSettings {
     this.line_numbers = settings.line_numbers;
     this.time_position = settings.time_position;
     this.tips = settings.tips;
+    this.load_demo_songs = settings.load_demo_songs;
     localStorage.setItem("topos", JSON.stringify(this.data));
   }
 }

src/main.ts

@@ -193,6 +193,11 @@ export class Editor {
     "show-tips"
   ) as HTMLInputElement;
 
+  // Loading demo songs when starting
+  load_demo_songs: HTMLInputElement = document.getElementById(
+    "load-demo-songs"
+  ) as HTMLInputElement;
+
   // Editor mode selection
   normal_mode_button: HTMLButtonElement = document.getElementById(
     "normal-mode"
@@ -225,18 +230,10 @@ export class Editor {
   public hydra: any = this.hydra_backend.synth;
 
   constructor() {
-    // ================================================================================
-    // Loading the universe from local storage
-    // ================================================================================
 
-    this.universes = { ...this.settings.universes, ...template_universes };
+    // ================================================================================
-    this.selected_universe = "Welcome";
+    // Loading the settings
-    this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`;
+    // ================================================================================
-
-    // Picking a random example to populate the landing page
-    let random_example = examples[Math.floor(Math.random() * examples.length)];
-    this.universes[this.selected_universe].global.committed = random_example;
-    this.universes[this.selected_universe].global.candidate = random_example;
 
     this.line_numbers_checkbox.checked = this.settings.line_numbers;
     this.time_position_checkbox.checked = this.settings.time_position;
@@ -244,6 +241,29 @@ export class Editor {
     if (!this.settings.time_position) {
       document.getElementById("timeviewer")!.classList.add("hidden");
     }
+    this.load_demo_songs.checked = this.settings.load_demo_songs;
+
+    // ================================================================================
+    // Loading the universe from local storage
+    // ================================================================================
+
+    this.universes = {
+      ...this.settings.universes,
+      ...template_universes
+    };
+
+    if (this.settings.load_demo_songs) {
+      let random_example = examples[Math.floor(Math.random() * examples.length)];
+      this.selected_universe = "Welcome"
+      this.universes[this.selected_universe].global.committed = random_example;
+      this.universes[this.selected_universe].global.candidate = random_example;
+    } else {
+      this.selected_universe = this.settings.selected_universe;
+      if (this.universes[this.selected_universe] === undefined)
+        this.universes[this.selected_universe] = structuredClone(template_universe)
+    }
+    this.universe_viewer.innerHTML = `Topos: ${this.selected_universe}`;
+
 
     // ================================================================================
     // Audio context and clock
@@ -499,7 +519,7 @@ export class Editor {
       button.addEventListener("click", () => {
         this.setButtonHighlighting("clear", true);
         if (confirm("Do you want to reset the current universe?")) {
-          this.universes[this.selected_universe] = template_universe;
+          this.universes[this.selected_universe] = structuredClone(template_universe);
           this.updateEditorView();
         }
       });
@@ -559,6 +579,7 @@ export class Editor {
       this.line_numbers_checkbox.checked = this.settings.line_numbers;
       this.time_position_checkbox.checked = this.settings.time_position;
       this.tips_checkbox.checked = this.settings.tips;
+      this.load_demo_songs.checked = this.settings.load_demo_songs;
 
       if (this.settings.vimMode) {
         let vim = document.getElementById("vim-mode-radio") as HTMLInputElement;
@@ -654,6 +675,12 @@ export class Editor {
       });
     });
 
+    this.load_demo_songs.addEventListener("change", () => {
+      let checked = this.load_demo_songs.checked ? true : false;
+      this.settings.load_demo_songs = checked;
+    });
+
+
     this.vim_mode_button.addEventListener("click", () => {
       this.settings.vimMode = true;
       this.view.dispatch({