new universe switching window

index.html

@@ -127,7 +127,9 @@
     <div id="app">
       <!-- This modal is used for switching between buffers -->
       <div id="modal-buffers" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
-        <div id="start-button" class="px-16 py-14 rounded-md text-center">
+        <div id="start-button" class="px-16 pt-4 pb-4 rounded-md text-center bg-white">
+					<p class="text-semibold text-2xl pb-4">Known universes</p>
+					<p id="existing-universes" class="text-xl"></p>
           <div id="disclaimer" class="pb-4">
           <form>   
             <label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only text-white">Search</label>
@@ -137,7 +139,7 @@
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
             </svg>
         </div>
-              <input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 outline-0 rounded-lg bg-neutral-900 bg-neutral-900 text-white" placeholder="Buffer..." required>
+              <input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-800 outline-0 rounded-lg bg-gray-800 text-white" placeholder="Buffer..." required>
               <button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
             </div>
           </form>

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
+  }
+}
+