Major update to WavePlayerJS.html

Add built-in preset loader
Improve appearance

Author: AnonymousUser98

WavePlayerJS.html

@@ -17,7 +17,7 @@
     font-size: 1rem;
     margin: 5px 0;
     width: 100%;
-	box-sizing: border-box;
+		box-sizing: border-box;
   }
 
   textarea { height: 80px; }
@@ -29,6 +29,7 @@
 		padding-top: 10px;
 		padding-bottom: 10px;
 		width: 120px;
+		background: #fcfcfc;
   }
 
   .buttons{
@@ -86,9 +87,35 @@ <h1>WavePlayerJS</h1>
 			<button id="playBtn">Play Wave</button>
 			<button id="stopBtn">Stop Wave</button>
 		</div>
-		<button id="loadPresetBtn" style="margin-left: auto;" onclick="alert('This feature hasn\'t been added yet.');">Load Preset</button>
+		<button id="loadPresetBtn" style="margin-left: auto;">Load Preset</button>
 	</div>
 	</div>
+	
+	<div id="presetMenu" style="
+  display: none;
+  border: 1px solid #aaa;
+  padding: 5px;
+  background: #eee;
+  width: 150px;
+  position: fixed;
+	right: 164px;
+	top: 190px;
+	">
+		<div class="menu-item" data-value="Math.sin(t*vf)*va">Sine Wave</div>
+		<div class="menu-item" data-value="Math.sign(Math.sin(t*vf))*va">Square Wave</div>
+		<div class="menu-item" data-value="(2/Math.PI)*Math.asin(Math.sin(2*t*vf))*va">Triangle Wave</div>
+		<div class="menu-item" data-value="((Math.sin(t*vf)*((2)/(Math.PI))*Math.asin(Math.sin(2*t*vf))+Math.sign(Math.sin(t*vf)))*((1.84)/(Math.PI)))*va">Hybrid Wave</div>
+		<div class="menu-item" data-value="(2/Math.PI)*Math.asin(Math.sin(2*t*vf))*va + (2/Math.PI)*Math.tan(Math.sin(t*vf))*va*vp">Mountain Wave</div>
+		<div class="menu-item" data-value="Math.sin(Math.atanh(Math.sin(t*vf)))*va">Insect Wave</div>
+		<div class="menu-item" data-value="((Math.sin(Math.cos(t*vf)*(5+vp-1)))*((Math.sin(t*vf)**7)))*va">Pulse Wave</div>
+		<div class="menu-item" data-value="((Math.sin(Math.atanh(Math.sin(t*vf)))*va*Math.asinh(Math.tan(Math.cos(t*vf+Math.cos(t*vf))))*va)/(Math.sin(Math.cos(t*vf))*va))">Needle Wave</div>
+		<div class="menu-item" data-value="(((2)/(Math.PI))*Math.asin(Math.sin(t*vf)))*(((2)/(Math.PI))*Math.acos(Math.cos(t*vf)))*va">Fin Wave</div>
+		<div class="menu-item" data-value="Math.asin(Math.sin(2*t*vf)*Math.sin(t*vf))+Math.asin(Math.sin(2*t*vf))*Math.asin(Math.sin(t*vf*5))*va">Trisine Wave</div>
+		<div class="menu-item" data-value="((Math.sin(t*vf*2)**5)+Math.sin(t*vf)-Math.asin(Math.sin(t*vf*2))*Math.asin(Math.cos(t*vf*2))-Math.sin(Math.tan(t*vf*9)))*((va)/(3))">Lightning Wave</div>
+		<div class="menu-item" data-value="(((2)/(Math.PI))*Math.asin(Math.sin(t*vf))+(Math.sin(t*vf))^19)*((va)/(2))">Drip Wave</div>
+		<div class="menu-item" data-value="(((2)/(Math.PI))*Math.asin(Math.sin(2*t*vf))*Math.sin(t*vf)*1.4)*va">Bird Wave</div>
+		<div class="menu-item" data-value="Math.sin(Math.tan(t*vf)*Math.sign(Math.cos(t*99999*vf)))*va">Noisy Infinity Wave</div>
+	</div>
 
 	<br/>
 	<p>Use ** instead of ^ for exponents</p>
@@ -147,6 +174,7 @@ <h1>WavePlayerJS</h1>
 	let themeBtn = document.getElementById("theme-button");
 	let pagebody = document.body;
 	let elements = document.querySelectorAll("button, input, textarea");
+	let premenu = document.getElementById("presetMenu");
 
 	if (dark==0) {
 		// Switch to dark mode
@@ -157,6 +185,7 @@ <h1>WavePlayerJS</h1>
         el.style.background = "#323232";
         el.style.color = "#f0f0f0";
     }
+		premenu.style.background = "#454545";
 		dark = 1;
 	} else if (dark==1) {
 		// Switch to light mode
@@ -167,9 +196,30 @@ <h1>WavePlayerJS</h1>
         el.style.background = "";
         el.style.color = "";
 		}
+		premenu.style.background = "#eee";
 		dark = 0;
 	}
 }
+
+
+// Code for preset menu - created by ChatGPT
+const menuButton = document.getElementById("loadPresetBtn");
+const popupMenu  = document.getElementById("presetMenu");
+const box        = document.getElementById("formula");
+
+// Show or hide the menu
+menuButton.addEventListener("click", () => {
+	popupMenu.style.display =
+		popupMenu.style.display === "none" ? "block" : "none";
+});
+
+// When you click an option, write its value to the textbox
+popupMenu.addEventListener("click", event => {
+	const item = event.target.closest(".menu-item");
+	if (!item) return;  // clicked outside an item
+	box.value = item.dataset.value;
+	popupMenu.style.display = "none";  // hide the menu again
+});
 </script>
 </body>
 </html>