new universe switching window

src/API.ts

@@ -55,6 +55,16 @@ export class UserAPI {
 
   constructor(public app: Editor) {}
 
+	_loadUniverseFromInterface = (universe: string) => {
+		this.app.loadUniverse(universe as string);
+    this.app.openBuffersModal();
+	}
+
+	_deleteUniverseFromInterface = (universe: string) => {
+		delete this.app.universes[universe];
+    this.app.openBuffersModal();
+	}
+
   _playDocExample = (code?: string) => {
     this.play();
     console.log("Executing documentation example: " + this.app.selectedExample);

src/Documentation.ts

@@ -139,6 +139,21 @@ mod(.5) && snd('hat').out();
 `,
   true
 )}
+
+${makeExample(
+  "Resonant madness",
+  `mod(.5)::snd('synth2')
+  .freq([50,50*1.25,50*1.5,50*1.75].div(8) / 2)
+  .cutoff(usine(.5) * 5000).resonance(15).end(0.8).room(0.9).size(0.9).n(7).out();
+mod(.25)::snd('synth2')
+  .freq([50,50*1.25,50*1.5,50*1.75].div(.5))
+  .cutoff(usine(.5) * 5000).resonance(15)
+  .end(0.2).room(0.9).size(0.9).n(14).out()
+mod(1)::snd('kick').out()
+mod(2)::snd('snare').shape(0.5).out()
+mod(.75)::snd('hat').shape(0.4).out()`,
+  false
+)}
 `;
 
   const software_interface: string = `

src/main.ts

@@ -311,6 +311,18 @@ export class Editor {
       // This is the modal to switch between universes
       if (event.ctrlKey && event.key === "b") {
         this.hideDocumentation();
+				let existing_universes = document.getElementById("existing-universes");
+				let known_universes = Object.keys(this.universes);
+				let final_html = "<ul class='lg:h-80 lg:w-80 lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-gray-800'>";
+				known_universes.forEach((name) => {
+					final_html += `
+<li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
+	<a onclick="_loadUniverseFromInterface('${name}')">${name}</a>
+	<button onclick=_deleteUniverseFromInterface('${name}')>🗑</button>
+</li>`;
+				});
+				final_html = final_html + "</ul>";
+				existing_universes!.innerHTML = final_html;
         this.openBuffersModal();
       }
 
@@ -424,7 +436,7 @@ export class Editor {
 
     this.load_universe_button.addEventListener("click", () => {
 				let query = this.buffer_search.value;
-        if (query.length > 2 && query.length < 20) {
+        if (query.length > 2 && query.length < 20 && !query.includes(" ")) {
           this.loadUniverse(query);
           this.settings.selected_universe = query;
           this.buffer_search.value = "";

src/style.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .striped .col-span-3, .striped .col-span-2 {
+    @apply bg-neutral-300
+  }
+}
+