Added a permanent copy of the 3.0.13 version for people to use alongside the existing 2.3 version. Made the links between versions preserve the song data where possible.

Author: johnnesky

.gitignore

@@ -1,7 +1,13 @@
 .dropbox
 .DS_Store
-/website/**/beepbox*.js
-/website/**/beepbox*.js.map
+/website/beepbox*.js
+/website/beepbox*.js.map
+/website/player/beepbox*.js
+/website/player/beepbox*.js.map
+/website/player/beepbox*.js
+/website/player/beepbox*.js.map
+/website/competition/**/beepbox*.js
+/website/competition/**/beepbox*.js.map
 /website/beepbox_offline.html
 /build
 /node_modules

editor/TipPrompt.ts

@@ -274,14 +274,15 @@ export class TipPrompt implements Prompt {
 				message = div(
 					h2("String sustain"),
 					p("This setting controls how quickly the picked string vibration decays."),
+					p("Unlike most of BeepBox's instrument synthesizer features, a picked string cannot change frequency suddenly while maintaining its decay. If a tone's pitch changes suddenly (e.g. if the chord type is set to \"arpeggio\" or the transition type is set to \"continues\") then the string will be re-picked and start decaying from the beginning again, even if the envelopes don't otherwise restart."),
 				);
 			} break;
 			case "envelopes": {
 				message = div(
 					h2("Envelopes"),
-					p("Envelopes are a way to dynamically adjust various other settings over time. Press the + button to add an envelope, then select which setting to control and the curve of the envelope. Try different combinations to see how they sound!"),
+					p("Envelopes are a way to dynamically adjust various other settings over time, usually based on how long the note lasts. Press the + button to add an envelope, then use the menus below to select which setting to control and the curve of the envelope. Try different combinations to see how they sound!"),
 					p("Most envelope curves restart from the beginning every time a new note plays. The \"note size\" option is based on the note width as drawn in the pattern editor."),
-					p("Envelope curves move in a range from 0 to 1. If multiple envelopes are targetting the same setting, they are multiplied before applying to the setting."),
+					p("Envelope curves move in the range from 0 to 1 (or vice versa), where 0 means as quiet as possible and 1 is the same as the corresponding position selected in the instrument settings above. If multiple envelopes are targetting the same setting, they are multiplied before applying to the setting."),
 				);
 			} break;
 			default: throw new Error("Unhandled TipPrompt type: " + type);

player/main.ts

@@ -207,6 +207,16 @@ document.body.appendChild(
 	),
 );
 
+function loadSong(songString: string, reuseParams: boolean): void {
+	synth.setSong(songString);
+	synth.snapToStart();
+	const updatedSongString: string = synth.song!.toBase64String();
+	editLink.href = "../#" + updatedSongString;
+	const hashQueryParams = new URLSearchParams(reuseParams ? location.hash.slice(1) : "");
+	hashQueryParams.set("song", updatedSongString);
+	location.hash = hashQueryParams.toString();
+}
+
 function hashUpdatedExternally(): void {
 	let myHash: string = location.hash;
 	if (prevHash == myHash || myHash == "") return;
@@ -219,7 +229,7 @@ function hashUpdatedExternally(): void {
 
 	//titleText.textContent = "";
 
-	fullscreenLink.setAttribute("href", location.href);
+	fullscreenLink.href = location.href;
 
 	for (const parameter of myHash.split("&")) {
 		let equalsIndex: number = parameter.indexOf("=");
@@ -228,9 +238,7 @@ function hashUpdatedExternally(): void {
 			let value: string = parameter.substring(equalsIndex + 1);
 			switch (paramName) {
 				case "song":
-					synth.setSong(value);
-					synth.snapToStart();
-					editLink.setAttribute("href", "../#" + value);
+					loadSong(value, true);
 					break;
 				//case "title":
 				//	titleText.textContent = decodeURIComponent(value);
@@ -241,9 +249,7 @@ function hashUpdatedExternally(): void {
 					break;
 			}
 		} else {
-			synth.setSong(myHash);
-			synth.snapToStart();
-			editLink.setAttribute("href", "../#" + myHash);
+			loadSong(myHash, false);
 		}
 	}
 

website/2_3/index.html

@@ -29,6 +29,22 @@
 		#beepboxEditorContainer {
 			min-height: 645px;
 		}
+		.donation form {
+			display: inline;
+		}
+		.donation input[type="submit"] {
+			-webkit-appearance: none;
+			appearance: none;
+			background: none;
+			border: none;
+			font-family: inherit;
+			font-size: inherit;
+			color: var(--link-accent, #98f);
+			text-decoration: underline;
+			cursor: pointer;
+			padding: 0;
+			margin: 0;
+		}
 
 		/* wide screen */
 		@media (min-width: 701px) {
@@ -76,8 +92,18 @@ <h1>
 		When you are satisfied with your song, just copy and paste the URL to save and share your song! 
 	</p>
 	<p>
-		The latest version of BeepBox is <a href="/" target="_blank">here</a>.
+		The latest version of BeepBox is <a id="linkToLatestVersion" href="../" target="_blank">here</a>.
 	</p>
+	<div class="donation">
+		BeepBox is a passion project, and will always be free to use. If you find it valuable and have the means, any gratuity via
+		<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
+			<input type="hidden" name="cmd" value="_donations" />
+			<input type="hidden" name="business" value="QZJTX9GRYEV9N" />
+			<input type="hidden" name="currency_code" value="USD" />
+			<input type="submit" name="submit" value="Paypal"/>
+		</form>
+		would be appreciated!
+	</div>
 
 	<div class="column-container">
 		<div class="instructions-column">
@@ -186,5 +212,15 @@ <h1>
 			document.getElementById("beepboxEditorContainer").innerHTML = "Sorry, BeepBox doesn't support your browser. Try a recent version of Chrome, Firefox, or Opera.";
 		}
 
+		// Just before the user is about to use the link to the latest version, update it to
+		// contain the song data so that the current song will open in that version.
+		var linkToLatestVersion = document.getElementById("linkToLatestVersion");
+		function updateLinkToLatestVersion() {
+			linkToLatestVersion.href = location.origin + location.pathname.slice(0, location.pathname.lastIndexOf('/') + 1) + ".." + location.hash;
+		}
+		linkToLatestVersion.addEventListener("focus", updateLinkToLatestVersion);
+		linkToLatestVersion.addEventListener("mouseenter", updateLinkToLatestVersion);
+		linkToLatestVersion.addEventListener("touchstart", updateLinkToLatestVersion);
+		
 	</script>
-</body></html>
+</body></html>