Skip to content

Commit 8618cad

Browse files
committed
Improved wording. Display shortcut on hovering the copy/paste buttons. Mention long-press in mobile instructions. Mention octave scrollbar in recording setup prompt. Rename auto-follow preference. Spell out the double harmonic scale.
1 parent acf095f commit 8618cad

File tree

9 files changed

+35
-26
lines changed

9 files changed

+35
-26
lines changed

editor/ChannelSettingsPrompt.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export class ChannelSettingsPrompt implements Prompt {
4444
"per pattern:",
4545
this._patternInstrumentsBox,
4646
),
47-
label({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
47+
div({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
4848
this._okayButton,
4949
),
5050
this._cancelButton,

editor/RecordingSetupPrompt.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,11 @@ export class RecordingSetupPrompt implements Prompt {
7474
"Enable MIDI performance:",
7575
this._enableMidi,
7676
),
77-
p("Tip: Recorded notes often overlap such that one note ends after the next note already started. In BeepBox, these notes get split into two notes which may sound different when re-played than they did when you were recording. To fix the sound, you can either manually clean up the notes in the pattern editor, or you could try enabling the \"transition type\" effect on the instrument and setting it to \"continue\"."),
77+
p("The range of pitches available to play via your computer keyboard is affected by the octave scrollbar of the currently selected channel."),
78+
p("Recorded notes often overlap such that one note ends after the next note already started. In BeepBox, these notes get split into multiple notes which may sound different when re-played than they did when you were recording. To fix the sound, you can either manually clean up the notes in the pattern editor, or you could try enabling the \"transition type\" effect on the instrument and setting it to \"continue\"."),
7879
div({style: `width: 100%; height: 80px; background: linear-gradient(rgba(0,0,0,0), ${ColorConfig.editorBackground}); position: sticky; bottom: 0; pointer-events: none;`}),
7980
),
80-
label({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
81+
div({style: "display: flex; flex-direction: row-reverse; justify-content: space-between;"},
8182
this._okayButton,
8283
),
8384
this._cancelButton,

editor/SongEditor.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export class SongEditor {
177177
private readonly _optionsMenu: HTMLSelectElement = select({style: "width: 100%;"},
178178
option({selected: true, disabled: true, hidden: false}, "Preferences"), // todo: "hidden" should be true but looks wrong on mac chrome, adds checkmark next to first visible option even though it's not selected. :(
179179
option({value: "autoPlay"}, "Auto Play on Load"),
180-
option({value: "autoFollow"}, "Keep Current Pattern Selected"),
180+
option({value: "autoFollow"}, "Show And Play The Same Bar"),
181181
option({value: "enableNotePreview"}, "Hear Preview of Added Notes"),
182182
option({value: "showLetters"}, "Show Piano Keys"),
183183
option({value: "showFifth"}, 'Highlight "Fifth" of Song Key'),
@@ -215,8 +215,8 @@ export class SongEditor {
215215
private readonly _instrumentRemoveButton: HTMLButtonElement = button({type: "button", class: "remove-instrument"});
216216
private readonly _instrumentsButtonBar: HTMLDivElement = div({class: "instrument-bar"}, this._instrumentRemoveButton, this._instrumentAddButton);
217217
private readonly _instrumentsButtonRow: HTMLDivElement = div({class: "selectRow", style: "display: none;"}, span({class: "tip", onclick: ()=>this._openPrompt("instrumentIndex")}, "Instrument:"), this._instrumentsButtonBar);
218-
private readonly _instrumentCopyButton: HTMLButtonElement = button({type: "button", class: "copy-instrument"}, "Copy");
219-
private readonly _instrumentPasteButton: HTMLButtonElement = button({type: "button", class: "paste-instrument"}, "Paste");
218+
private readonly _instrumentCopyButton: HTMLButtonElement = button({type: "button", class: "copy-instrument", title: "Copy Instrument (⇧C)"}, "Copy");
219+
private readonly _instrumentPasteButton: HTMLButtonElement = button({type: "button", class: "paste-instrument", title: "Paste Instrument (⇧V)"}, "Paste");
220220
private readonly _instrumentCopyPasteRow: HTMLDivElement = div({class: "instrumentCopyPasteRow", style: "display: none;"}, this._instrumentCopyButton, this._instrumentPasteButton);
221221
private readonly _instrumentVolumeSlider: Slider = new Slider(input({style: "margin: 0;", type: "range", min: -(Config.volumeRange - 1), max: "0", value: "0", step: "1"}), this._doc, (oldValue: number, newValue: number) => new ChangeVolume(this._doc, oldValue, -newValue));
222222
private readonly _instrumentVolumeSliderRow: HTMLDivElement = div({class: "selectRow"}, span({class: "tip", onclick: ()=>this._openPrompt("instrumentVolume")}, "Volume:"), this._instrumentVolumeSlider.input);
@@ -734,7 +734,7 @@ export class SongEditor {
734734

735735
const optionCommands: ReadonlyArray<string> = [
736736
(prefs.autoPlay ? "✓ " : " ") + "Auto Play on Load",
737-
(prefs.autoFollow ? "✓ " : " ") + "Keep Current Pattern Selected",
737+
(prefs.autoFollow ? "✓ " : " ") + "Show And Play The Same Bar",
738738
(prefs.enableNotePreview ? "✓ " : " ") + "Hear Preview of Added Notes",
739739
(prefs.showLetters ? "✓ " : " ") + "Show Piano Keys",
740740
(prefs.showFifth ? "✓ " : " ") + 'Highlight "Fifth" of Song Key',

editor/SustainPrompt.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {Prompt} from "./Prompt";
88
import {ChangeGroup} from "./Change";
99
import {ChangeStringSustainType} from "./changes";
1010

11-
const {button, div, label, h2, p, select, option} = HTML;
11+
const {button, div, h2, p, select, option} = HTML;
1212

1313
export class SustainPrompt implements Prompt {
1414
private readonly _typeSelect: HTMLSelectElement = select({style: "width: 100%;"},
@@ -28,7 +28,7 @@ export class SustainPrompt implements Prompt {
2828
p("BeepBox comes with two slightly different sustain designs. You can select one here and press \"Okay\" to confirm it."),
2929
div({class: "selectContainer", style: "width: 100%;"}, this._typeSelect),
3030
),
31-
label({style: {display: Config.enableAcousticSustain ? "flex" : "none", "flex-direction": "row-reverse", "justify-content": "space-between"}},
31+
div({style: {display: Config.enableAcousticSustain ? "flex" : "none", "flex-direction": "row-reverse", "justify-content": "space-between"}},
3232
this._okayButton,
3333
),
3434
this._cancelButton,

editor/TipPrompt.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export class TipPrompt implements Prompt {
5151
case "instrumentIndex": {
5252
message = div(
5353
h2("Instrument Number"),
54-
p("In the \"Channel Settings\" option from BeepBox's \"File\" menu, there are a few ways to enable multiple instruments per channel."),
54+
p("In the \"Channel Settings\" option from BeepBox's \"Edit\" menu, there are a few ways to enable multiple instruments per channel."),
5555
p("First, you could enable multiple simultaneous instruments per channel. All of the channel's instruments will play all of the notes in the channel at the same time, and you can click an instrument number to view and edit its settings."),
5656
p("Second, you could enable different instruments per pattern. Only one of the instruments will play at any given time, but you can click the instrument number to change which instrument is used for the currently selected pattern(s)."),
5757
p("Finally, you can enable them both, in which case you can click an instrument number once to view it, and again to toggle whether the instrument is used for the currently selected pattern(s)."),

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "BeepBox",
3-
"version": "4.1.0",
3+
"version": "4.1.1",
44
"description": "BeepBox is an online tool for sketching and sharing instrumental music.",
55
"author": "John Nesky",
66
"license": "MIT",

synth/SynthConfig.ts

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -216,18 +216,18 @@ export interface AutomationTarget extends BeepBoxOption {
216216

217217
export class Config {
218218
public static readonly scales: DictionaryArray<Scale> = toNameMap([
219-
{name: "easy :)", realName: "pentatonic major", flags: [true, false, true, false, true, false, false, true, false, true, false, false]},
220-
{name: "easy :(", realName: "pentatonic minor", flags: [true, false, false, true, false, true, false, true, false, false, true, false]},
221-
{name: "island :)", realName: "ryukyu", flags: [true, false, false, false, true, true, false, true, false, false, false, true]},
222-
{name: "island :(", realName: "pelog selisir", flags: [true, true, false, true, false, false, false, true, true, false, false, false]},
223-
{name: "blues :)", realName: "blues major", flags: [true, false, true, true, true, false, false, true, false, true, false, false]},
224-
{name: "blues :(", realName: "blues", flags: [true, false, false, true, false, true, true, true, false, false, true, false]},
225-
{name: "normal :)", realName: "ionian", flags: [true, false, true, false, true, true, false, true, false, true, false, true]},
226-
{name: "normal :(", realName: "aeolian", flags: [true, false, true, true, false, true, false, true, true, false, true, false]},
227-
{name: "dbl harmonic :)", realName: "double harmonic major", flags: [true, true, false, false, true, true, false, true, true, false, false, true]},
228-
{name: "dbl harmonic :(", realName: "double harmonic minor", flags: [true, false, true, true, false, false, true, true, true, false, false, true]},
229-
{name: "strange", realName: "whole tone", flags: [true, false, true, false, true, false, true, false, true, false, true, false]},
230-
{name: "expert", realName: "chromatic", flags: [true, true, true, true, true, true, true, true, true, true, true, true]},
219+
{name: "easy :)", realName: "pentatonic major", flags: [true, false, true, false, true, false, false, true, false, true, false, false]},
220+
{name: "easy :(", realName: "pentatonic minor", flags: [true, false, false, true, false, true, false, true, false, false, true, false]},
221+
{name: "island :)", realName: "ryukyu", flags: [true, false, false, false, true, true, false, true, false, false, false, true]},
222+
{name: "island :(", realName: "pelog selisir", flags: [true, true, false, true, false, false, false, true, true, false, false, false]},
223+
{name: "blues :)", realName: "blues major", flags: [true, false, true, true, true, false, false, true, false, true, false, false]},
224+
{name: "blues :(", realName: "blues", flags: [true, false, false, true, false, true, true, true, false, false, true, false]},
225+
{name: "normal :)", realName: "ionian", flags: [true, false, true, false, true, true, false, true, false, true, false, true]},
226+
{name: "normal :(", realName: "aeolian", flags: [true, false, true, true, false, true, false, true, true, false, true, false]},
227+
{name: "double harmonic :)", realName: "double harmonic major", flags: [true, true, false, false, true, true, false, true, true, false, false, true]},
228+
{name: "double harmonic :(", realName: "double harmonic minor", flags: [true, false, true, true, false, false, true, true, true, false, false, true]},
229+
{name: "strange", realName: "whole tone", flags: [true, false, true, false, true, false, true, false, true, false, true, false]},
230+
{name: "expert", realName: "chromatic", flags: [true, true, true, true, true, true, true, true, true, true, true, true]},
231231
]);
232232
public static readonly keys: DictionaryArray<Key> = toNameMap([
233233
{name: "C", isWhiteKey: true, basePitch: 12}, // C0 has index 12 on the MIDI scale. C7 is 96, and C9 is 120. C10 is barely in the audible range.

synth/synth.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3248,8 +3248,10 @@ export class Song {
32483248
this.scale = 11; // default to expert.
32493249
if (jsonObject["scale"] != undefined) {
32503250
const oldScaleNames: Dictionary<string> = {
3251-
"romani :)": "dbl harmonic :)",
3252-
"romani :(": "dbl harmonic :(",
3251+
"romani :)": "double harmonic :)",
3252+
"romani :(": "double harmonic :(",
3253+
"dbl harmonic :)": "double harmonic :)",
3254+
"dbl harmonic :(": "double harmonic :(",
32533255
"enigma": "strange",
32543256
};
32553257
const scaleName: string = (oldScaleNames[jsonObject["scale"]] != undefined) ? oldScaleNames[jsonObject["scale"]] : jsonObject["scale"];

website/index.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,14 +192,19 @@ <h2>
192192
<li><b>Ctrl + Arrows</b>: rearrange channels</li>
193193
<li><b>[ ]</b>: move playhead backward or forward</li>
194194
<li><b>F/H</b>: move to First or Highlighted pattern </li>
195-
<li><b>Shift & Drag</b>: select part of a pattern (long press on touch screen)</li>
195+
<li><b>Shift & Drag</b>: select part of a pattern</li>
196196
<li>Check BeepBox's edit menu for more!</li>
197197
</ul>
198198
</div>
199199
<p>
200200
In the note pattern editor, you can click and drag horizontally on a note to adjust its duration.
201201
You can also click above or below an existing note to add more notes to be played simultaneously, which is called a chord.
202202
</p>
203+
<div id="mobile-instructions" style="display: none;">
204+
<p>
205+
You can also long-press in the pattern editor to select a time range within a pattern, which you can then drag to move multiple notes at once.<br/>
206+
</p>
207+
</div>
203208
<p>
204209
ADVANCED: Drag vertically from an existing note to bend its pitch, or drag vertically from above or below the note to adjust its volume. Drag on the numbered pattern boxes to select multiple patterns to copy and paste parts of your song.
205210
</p>
@@ -248,6 +253,7 @@ <h2>
248253
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|android|ipad|playbook|silk/i.test(navigator.userAgent) ) {
249254
document.getElementById("introduction").innerHTML = "BeepBox is an online tool for sketching and sharing instrumental music. Make sure that your volume is turned up, then press the play button!";
250255
document.getElementById("keyboard-instructions").style.display = "none";
256+
document.getElementById("mobile-instructions").style.display = "";
251257
document.getElementById("bar-editing").innerHTML = "Tap the boxes to move to a different part of the song, or tap on the currently selected box to swap which pattern is played during that part of the song.";
252258
document.getElementById("offline-instructions").innerHTML = 'You can use BeepBox when your device is offline if you put a shortcut to BeepBox on your home screen. <ul><li>Chrome: find the "Add to Home Screen" option in the ⋮ menu.</li><li>Firefox: find the "Add Page Shortcut" option in the ⋮ menu.</li><li>Safari: find the "Add to Home Screen" option in the bookmark menu.</li></ul>';
253259
}

0 commit comments

Comments
 (0)