Add song detune modulator. Fix behavior of "N" key to be undo-able properly, and add new patterns to the song if needed. Max volume is now in line with beepbox's. Add jummbox_offline.html.

Author: jummbus

compile_beepbox_editor.sh

@@ -14,5 +14,5 @@ uglifyjs \
 # Combine the html and js into a single file for the offline version
 sed \
 	-e '/INSERT_BEEPBOX_SOURCE_HERE/{r website/beepbox_editor.min.js' -e 'd' -e '}' \
-	website/beepbox_offline_template.html \
-	> website/beepbox_offline.html
+	website/jummbox_offline_template.html \
+	> website/jummbox_offline.html

editor/Piano.ts

@@ -455,6 +455,9 @@ namespace beepbox {
 							case ModSetting.mstTempo:
 								secondRow = "Tempo";
 								break;
+							case ModSetting.mstSongDetune:
+								secondRow = "Detune";
+								break;
 						}
 					}
 

editor/SongEditor.ts

@@ -367,7 +367,7 @@ namespace beepbox {
 		private readonly _playButton: HTMLButtonElement = button({ style: "width: 80px;", type: "button" });
 		private readonly _prevBarButton: HTMLButtonElement = button({ className: "prevBarButton", style: "width: 40px;", type: "button", title: "Previous Bar (left bracket)" });
 		private readonly _nextBarButton: HTMLButtonElement = button({ className: "nextBarButton", style: "width: 40px;", type: "button", title: "Next Bar (right bracket)" });
-		private readonly _volumeSlider: Slider = new Slider(input({ title: "main volume", style: "width: 5em; flex-grow: 1; margin: 0;", type: "range", min: "0", max: "100", value: "50", step: "1" }), this._doc, null, false);
+		private readonly _volumeSlider: Slider = new Slider(input({ title: "main volume", style: "width: 5em; flex-grow: 1; margin: 0;", type: "range", min: "0", max: "75", value: "50", step: "1" }), this._doc, null, false);
 		private readonly _fileMenu: HTMLSelectElement = select({ style: "width: 100%;" },
 			option({ selected: true, disabled: true, hidden: false }, "File"), // todo: "hidden" should be true but looks wrong on mac chrome, adds checkmark next to first visible option. :(
 			option({ value: "new" }, "+ New Blank Song"),
@@ -1601,6 +1601,7 @@ namespace beepbox {
 							settingList.push("tempo");
 							settingList.push("reverb");
 							settingList.push("next bar");
+							settingList.push("song detune");
 						}
 						// Populate mod setting options for instrument scope.
 						else {
@@ -1736,6 +1737,12 @@ namespace beepbox {
 								else
 									needReset = true;
 								break;
+							case ModSetting.mstSongDetune:
+								if (modStatus == ModStatus.msForSong)
+									setIndex = 5;
+								else
+									needReset = true;
+								break;
 							case ModSetting.mstNone:
 							default:
 								break;
@@ -1984,32 +1991,54 @@ namespace beepbox {
 					// Find lowest-index unused pattern for current channel
 					// Shift+n - lowest-index completely empty pattern
 
+					const group: ChangeGroup = new ChangeGroup();
+
 					if (event.shiftKey || event.ctrlKey) {
 						let nextEmpty: number = 0;
-						while (this._doc.song.channels[this._doc.channel].patterns[nextEmpty].notes.length > 0
-							&& nextEmpty <= this._doc.song.patternsPerChannel)
+						while (nextEmpty < this._doc.song.patternsPerChannel && this._doc.song.channels[this._doc.channel].patterns[nextEmpty].notes.length > 0)
 							nextEmpty++;
 
-						if (nextEmpty <= this._doc.song.patternsPerChannel) {
-							this._doc.song.channels[this._doc.channel].bars[this._doc.bar] = nextEmpty + 1;
+						nextEmpty++; // The next empty pattern is actually the one after the found one
 
-							this._doc.notifier.changed();
-						}
+						// Can't set anything if we're at the absolute limit.
+						if (nextEmpty <= Config.barCountMax) {
 
+							if (nextEmpty > this._doc.song.patternsPerChannel) {
+
+								// Add extra empty pattern, if all the rest have something in them.
+								group.append(new ChangePatternsPerChannel(this._doc, nextEmpty));
+							}
+							
+							// Change pattern number to lowest-index unused
+							group.append(new ChangePatternNumbers(this._doc, nextEmpty, this._doc.bar, this._doc.channel, 1, 1));
+							
+
+						}
 					}
 					else {
 						let nextUnused: number = 1;
 						while (this._doc.song.channels[this._doc.channel].bars.indexOf(nextUnused) != -1
 							&& nextUnused <= this._doc.song.patternsPerChannel)
 							nextUnused++;
+						
+						// Can't set anything if we're at the absolute limit.
+						if (nextUnused <= Config.barCountMax) {
+
+							if (nextUnused > this._doc.song.patternsPerChannel) {
+
+								// Add extra empty pattern, if all the rest are used.
+								group.append(new ChangePatternsPerChannel(this._doc, nextUnused));
+							}
 
-						if (nextUnused <= this._doc.song.patternsPerChannel) {
-							this._doc.song.channels[this._doc.channel].bars[this._doc.bar] = nextUnused;
+							// Change pattern number to lowest-index unused
+							group.append(new ChangePatternNumbers(this._doc, nextUnused, this._doc.bar, this._doc.channel, 1, 1));
+							
 
-							this._doc.notifier.changed();
 						}
 					}
 
+					this._doc.record(group);
+
 					event.preventDefault();
 					break;
 				case 77: // m
@@ -2141,6 +2170,7 @@ namespace beepbox {
 			const instrumentCopy: any = instrument.toJsonObject();
 			instrumentCopy["isDrum"] = this._doc.song.getChannelIsNoise(this._doc.channel);
 			window.localStorage.setItem("instrumentCopy", JSON.stringify(instrumentCopy));
+			this._refocusStage();
 		}
 
 		private _pasteInstrument(): void {
@@ -2150,6 +2180,7 @@ namespace beepbox {
 			if (instrumentCopy != null && instrumentCopy["isDrum"] == this._doc.song.getChannelIsNoise(this._doc.channel)) {
 				this._doc.record(new ChangePasteInstrument(this._doc, instrument, instrumentCopy));
 			}
+			this._refocusStage();
 		}
 
 		private _randomPreset(): void {

editor/changes.ts

@@ -1471,6 +1471,9 @@ namespace beepbox {
 				//case "vibrato speed":
 				//	setting = ModSetting.mstVibratoSpeed;
 				//	break;
+				case "song detune":
+					setting = ModSetting.mstSongDetune;
+					break;
 				case "none":
 				default:
 					break;

player/main.ts

@@ -177,7 +177,7 @@ namespace beepbox {
 	const volumeIcon: SVGSVGElement = svg({style: "flex: 0 0 12px; margin: 0 1px; width: 12px; height: 12px;", viewBox: "0 0 12 12"},
 		path({fill: ColorConfig.uiWidgetBackground, d: "M 1 9 L 1 3 L 4 3 L 7 0 L 7 12 L 4 9 L 1 9 M 9 3 Q 12 6 9 9 L 8 8 Q 10.5 6 8 4 L 9 3 z"}),
 	);
-	const volumeSlider: HTMLInputElement = input({title: "volume", type: "range", value: 75, min: 0, max: 100, step: 1, style: "width: 12vw; max-width: 100px; margin: 0 1px;"});
+	const volumeSlider: HTMLInputElement = input({title: "volume", type: "range", value: 75, min: 0, max: 75, step: 1, style: "width: 12vw; max-width: 100px; margin: 0 1px;"});
 
 	const zoomIcon: SVGSVGElement = svg({width: 12, height: 12, viewBox: "0 0 12 12"},
 		circle({cx: "5", cy: "5", r: "4.5", "stroke-width": "1", stroke: "currentColor", fill: "none"}),

synth/SynthConfig.ts

@@ -289,6 +289,8 @@ namespace beepbox {
 		public static readonly panMax: number = Config.panCenter * 2;
 		public static readonly detuneMin: number = -50;
 		public static readonly detuneMax: number = 50;
+		public static readonly songDetuneMin: number = -250;
+		public static readonly songDetuneMax: number = 250;
 		public static readonly chords: DictionaryArray<Chord> = toNameMap([
 			{ name: "harmony", harmonizes: true, customInterval: false, arpeggiates: false, isCustomInterval: false, strumParts: 0 },
 			{ name: "strum", harmonizes: true, customInterval: false, arpeggiates: false, isCustomInterval: false, strumParts: 1 },

synth/synth.ts

@@ -1234,7 +1234,8 @@ namespace beepbox {
 		mstDetune = 15,
 		mstVibratoDepth = 16,
 		//mstVibratoSpeed = 17,
-		mstMaxValue = 17,
+		mstSongDetune = 17,
+		mstMaxValue = 18,
 	}
 
 	export class Channel {
@@ -1289,6 +1290,7 @@ namespace beepbox {
 			[ModSetting.mstPulseWidth, Config.pulseWidthRange],
 			[ModSetting.mstDetune, Config.detuneMax - Config.detuneMin],
 			[ModSetting.mstVibratoDepth, 50],
+			[ModSetting.mstSongDetune, Config.songDetuneMax - Config.songDetuneMin],
 			//[ModSetting.mstVibratoSpeed, 100],
 		]
 		);
@@ -1312,6 +1314,9 @@ namespace beepbox {
 				case ModSetting.mstDetune:
 					value += Config.detuneMin;
 					break;
+				case ModSetting.mstSongDetune:
+					value += Config.songDetuneMin;
+					break;
 				case ModSetting.mstFilterCut:
 				case ModSetting.mstFilterPeak:
 				case ModSetting.mstSongVolume:
@@ -1356,6 +1361,9 @@ namespace beepbox {
 				case ModSetting.mstDetune:
 					value -= Config.detuneMin;
 					break;
+				case ModSetting.mstSongDetune:
+					value -= Config.songDetuneMin;
+					break;
 				case ModSetting.mstFilterCut:
 				case ModSetting.mstFilterPeak:
 				case ModSetting.mstSongVolume:
@@ -3395,6 +3403,7 @@ namespace beepbox {
 				case ModSetting.mstSongVolume:
 				case ModSetting.mstReverb:
 				case ModSetting.mstTempo:
+				case ModSetting.mstSongDetune:
 					val = (this.song as Song).modValueToReal(volumeStart, setting);
 					nextVal = (this.song as Song).modValueToReal(volumeEnd, setting);
 					if (this.modValues[setting] == null || this.modValues[setting] != val || this.nextModValues[setting] != nextVal) {
@@ -3438,7 +3447,7 @@ namespace beepbox {
 			return val;
 		}
 
-		public getModValue(setting: ModSetting, forSong: boolean, channel?: number, instrument?: number, nextVal?: boolean): number {
+		public getModValue(setting: ModSetting, forSong: boolean, channel?: number | null, instrument?: number | null, nextVal?: boolean): number {
 			if (forSong) {
 				if (this.modValues[setting] != null && this.nextModValues[setting] != null) {
 					return nextVal ? this.nextModValues[setting]! : this.modValues[setting]!;
@@ -4872,16 +4881,21 @@ namespace beepbox {
 					arpeggioInterval = tone.pitches[getArpeggioPitchIndex(tone.pitchCount, song.rhythm, arpeggio)] - tone.pitches[0];
 				}
 
+				let detuneStart: number = instrument.detune / 25;
+				let detuneEnd: number = instrument.detune / 25;
+				if (synth.isModActive(ModSetting.mstDetune, false, channel, instrumentIdx)) {
+					detuneStart = synth.getModValue(ModSetting.mstDetune, false, channel, instrumentIdx, false) / 25;
+					detuneEnd = synth.getModValue(ModSetting.mstDetune, false, channel, instrumentIdx, true) / 25;
+				}
+
+				if (synth.isModActive(ModSetting.mstSongDetune, true)) {
+					detuneStart += synth.getModValue(ModSetting.mstSongDetune, true, null, null, false) / 25;
+					detuneEnd += synth.getModValue(ModSetting.mstSongDetune, true, null, null, true) / 25;
+				}
+
 				const carrierCount: number = Config.algorithms[instrument.algorithm].carrierCount;
 				for (let i: number = 0; i < Config.operatorCount; i++) {
 
-					let detuneStart: number = instrument.detune / 25;
-					let detuneEnd: number = instrument.detune / 25;
-					if (synth.isModActive(ModSetting.mstDetune, false, channel, instrumentIdx)) {
-						detuneStart = synth.getModValue(ModSetting.mstDetune, false, channel, instrumentIdx, false) / 25;
-						detuneEnd = synth.getModValue(ModSetting.mstDetune, false, channel, instrumentIdx, true) / 25;
-					}
-
 					const associatedCarrierIndex: number = Config.algorithms[instrument.algorithm].associatedCarrier[i] - 1;
 					const pitch: number = tone.pitches[!chord.harmonizes ? 0 : ((i < tone.pitchCount) ? i : ((associatedCarrierIndex < tone.pitchCount) ? associatedCarrierIndex : 0))];
 					const freqMult = Config.operatorFrequencies[instrument.operators[i].frequency].mult;
@@ -4991,6 +5005,11 @@ namespace beepbox {
 					detuneEnd = synth.getModValue(ModSetting.mstDetune, false, channel, instrumentIdx, true) / 25;
 				}
 
+				if (synth.isModActive(ModSetting.mstSongDetune, true)) {
+					detuneStart += synth.getModValue(ModSetting.mstSongDetune, true, null, null, false) / 25;
+					detuneEnd += synth.getModValue(ModSetting.mstSongDetune, true, null, null, true) / 25;
+				}
+
 				let pitch: number = tone.pitches[0];
 
 				if (tone.pitchCount > 1) {