Skip to content

Add more options to the WebAudio configuration interface #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rdw-software merged 3 commits into from
Nov 19, 2021
Merged

Add more options to the WebAudio configuration interface #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bba1685
UI: Add more options to the WebAudio configuration interface
rdw-software Nov 19, 2021
fa46d7a
Linter: Add global C_WebAudio to the eslint configuration
rdw-software Nov 19, 2021
369b22a
Core: Add WebAudio options to the default settings
rdw-software Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Config/eslint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"C_Testing": "writable",
"C_Validation": "writable",
"C_WebGL": "writable",
"C_WebAudio": "writable",
"C_WebView": "writable",
"BinaryReader": "writable",
"Bitmap": "writable",
Expand Down
13 changes: 13 additions & 0 deletions Core/Schemas/SettingsCacheSchema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,17 @@ const SettingsCacheSchema = JOI.object({
blue: JOI.number().integer().min(0).max(255),
alpha: JOI.number().integer().min(0).max(255),
}).required(),

// WebAudio API
enableSound: JOI.boolean().required(),
useHighQualityStereo: JOI.boolean().required(),
fadeSoundInBackground: JOI.boolean().required(),
enableMusic: JOI.boolean().required(),
enableSFX: JOI.boolean().required(),
enableAmbientSounds: JOI.boolean().required(),
backgroundAudioVolume: JOI.number().min(0).max(1).required(),
globalVolume: JOI.number().min(0).max(1).required(),
sfxVolume: JOI.number().min(0).max(1).required(),
musicVolume: JOI.number().min(0).max(1).required(),
ambienceVolume: JOI.number().min(0).max(1).required(),
});
13 changes: 12 additions & 1 deletion Core/Settings/default-settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
{
"version": 1,
"version": 2,
"defaultAddonLoadedState": true,
"enableLogging": true,
"enableProfiling": true,
"enableSound": true,
"useHighQualityStereo": true,
"fadeSoundInBackground": true,
"enableMusic": true,
"enableSFX": true,
"enableAmbientSounds": true,
"backgroundAudioVolume": 0.25,
"globalVolume": 1,
"musicVolume": 1,
"sfxVolume": 1,
"ambienceVolume": 1,
"defaultMacroIconPath": "Interface/Icons/QuestionMarkBlack3D.png",
"macroCachePath": "Interface/macro-cache.json",
"activeLocale": "enUS",
Expand Down
212 changes: 143 additions & 69 deletions Interface/Frames/SystemOptionsFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ const SystemOptions = {
this.frame.hide();
},
createWidgets() {
// Create WebAudio settings panel
let soundOptionsPanel = new Frame(
this.createWebAudioOptions();
},
createWebAudioOptions() {
const soundOptionsPanel = new Frame(
"SystemOptionsFrame_SoundOptionsPanel",
this.frame._obj.content.rightPane,
"OptionsFrameCategoryPanel"
Expand All @@ -31,118 +33,190 @@ const SystemOptions = {
);
soundOptionsPanel.headerText.setText("WebAudio Configuration");

// Create general settings group
let generalSettingsGroup = new OptionsGroup(
this.soundOptionsPanel = soundOptionsPanel;

this.createGeneralSettingsGroup();
this.createChannelSettingsGroup();
this.createVolumeSettingsGroup();

this.frame.addCategoryPanel("Sound", soundOptionsPanel);
},
createGeneralSettingsGroup() {
const generalSettingsGroup = new OptionsGroup(
"SystemOptionsFrame_SoundOptions_GeneralSettingsGroup",
soundOptionsPanel,
this.soundOptionsPanel,
"OptionsGroup"
);
generalSettingsGroup.setCaption(L["General"]);
generalSettingsGroup.setCaptionStyle("CaptionFontSmall");
// Create global sound toggle checkbox
let checkbox = new CheckButton(
this.generalSettingsGroup = generalSettingsGroup;

this.createGlobalSoundToggle();
this.createHighQualityStereoToggle();
this.createBackgroundVolumeToggle();
this.createBackgroundVolumeSlider();
},
createGlobalSoundToggle() {
const enableSoundCheckbox = new CheckButton(
"SystemOptionsFrame_SoundOptions_GeneralSettingsGroup_GlobalSoundToggle",
generalSettingsGroup.fieldSet
this.generalSettingsGroup.fieldSet
);
checkbox.setScript("OnClick", () => {
DEBUG("Functionality NYI");
enableSoundCheckbox.setScript("OnClick", () => {
if (!enableSoundCheckbox.isChecked()) C_WebAudio.disableSound();
else C_WebAudio.enableSound();
});
checkbox.setText(L["Enable Sound"]);

// Create audio channel settings group
let channelSettingsGroup = new OptionsGroup(
enableSoundCheckbox.setText(L["Enable Sound"]);
enableSoundCheckbox.setChecked(C_Settings.getValue("enableSound"));
},
createHighQualityStereoToggle() {
const useHighQualityStereoCheckbox = new CheckButton(
"SystemOptionsFrame_SoundOptions_GeneralSettingsGroup_HighQualityStereoToggle",
this.generalSettingsGroup.fieldSet
);
useHighQualityStereoCheckbox.setScript("OnClick", () => {
if (!useHighQualityStereoCheckbox.isChecked()) C_WebAudio.disableHighQualityStereo();
else C_WebAudio.enableHighQualityStereo();
});
useHighQualityStereoCheckbox.setText(L["Use High-Quality Stereo"]);
useHighQualityStereoCheckbox.setChecked(C_Settings.getValue("useHighQualityStereo"));
},
createBackgroundVolumeToggle() {
const soundInBackgroundCheckbox = new CheckButton(
"SystemOptionsFrame_SoundOptions_GeneralSettingsGroup_BackgroundFadeToggle",
this.generalSettingsGroup.fieldSet
);
soundInBackgroundCheckbox.setScript("OnClick", () => {
if (!soundInBackgroundCheckbox.isChecked()) C_WebAudio.disableBackgroundFade();
else C_WebAudio.enableBackgroundFade();
});
soundInBackgroundCheckbox.setText(L["Lower Volume in Background"]);
soundInBackgroundCheckbox.setChecked(C_Settings.getValue("fadeSoundInBackground"));
},
createBackgroundVolumeSlider() {
const backgroundVolumeSlider = new Slider(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup_BackgroundVolumeSlider",
this.generalSettingsGroup.fieldSet
);
backgroundVolumeSlider.setLabelText(L["Background Volume"]);
backgroundVolumeSlider.setScript("OnInput", () => {
C_WebAudio.setBackgroundVolume(backgroundVolumeSlider.getValue() / 100);
});
backgroundVolumeSlider.setValue(C_Settings.getValue("backgroundAudioVolume") * 100);
},
createChannelSettingsGroup() {
const channelSettingsGroup = new OptionsGroup(
"SystemOptionsFrame_SoundOptions_ChannelSettingsGroup",
soundOptionsPanel,
this.soundOptionsPanel,
"OptionsGroup"
);
channelSettingsGroup.setCaption(L["Audio Channels"]);
channelSettingsGroup.setCaptionStyle("CaptionFontSmall");
// Create checkboxes

let backgroundMusicToggle = new CheckButton(
"SystemOptionsFrame_SoundOptions_ChannelSettingsGroup_BackgroundbackgroundMusicToggle",
channelSettingsGroup.fieldSet
this.channelSettingsGroup = channelSettingsGroup;

this.createMusicToggle();
this.createEffectSoundToggle();
this.createAmbientSoundToggle();
},
createMusicToggle() {
const musicToggle = new CheckButton(
"SystemOptionsFrame_SoundOptions_ChannelSettingsGroup_MusicToggle",
this.channelSettingsGroup.fieldSet
);
backgroundMusicToggle.setScript("OnClick", () => {
DEBUG("Functionality NYI");
musicToggle.setScript("OnClick", () => {
if (!musicToggle.isChecked()) C_WebAudio.disableMusicTrack();
else C_WebAudio.enableMusicTrack();
});
backgroundMusicToggle.setText(L["Music"]);

let soundEffectToggle = new CheckButton(
musicToggle.setText(L["Music"]);
musicToggle.setChecked(C_Settings.getValue("enableMusic"));
},
createEffectSoundToggle() {
const soundEffectToggle = new CheckButton(
"SystemOptionsFrame_SoundOptions_ChannelSettingsGroup_SoundEffectsToggle",
channelSettingsGroup.fieldSet
this.channelSettingsGroup.fieldSet
);
soundEffectToggle.setScript("OnClick", () => {
DEBUG("Functionality NYI");
if (!soundEffectToggle.isChecked()) C_WebAudio.disableEffectsTrack();
else C_WebAudio.enableEffectsTrack();
});
soundEffectToggle.setText(L["Sound Effects"]);

let ambientSoundToggle = new CheckButton(
soundEffectToggle.setChecked(C_Settings.getValue("enableSFX"));
},
createAmbientSoundToggle() {
const ambientSoundToggle = new CheckButton(
"SystemOptionsFrame_SoundOptions_ChannelSettingsGroup_AmbientSoundsToggle",
channelSettingsGroup.fieldSet
this.channelSettingsGroup.fieldSet
);
ambientSoundToggle.setScript("OnClick", () => {
DEBUG("Functionality NYI");
if (!ambientSoundToggle.isChecked()) C_WebAudio.disableAmbienceTrack();
else C_WebAudio.enableAmbienceTrack();
});
ambientSoundToggle.setText(L["Ambient Sounds"]);

let soundInBackgroundToggle = new CheckButton(
"SystemOptionsFrame_SoundOptions_ChannelSettingsGroup_SoundInBackgroundToggle",
channelSettingsGroup.fieldSet
);
soundInBackgroundToggle.setScript("OnClick", () => {
DEBUG("Functionality NYI");
});
soundInBackgroundToggle.setText(L["Sound in Background"]);

// Create volume settings group
let volumeSettingsGroup = new OptionsGroup(
ambientSoundToggle.setChecked(C_Settings.getValue("enableAmbientSounds"));
},
createVolumeSettingsGroup() {
const volumeSettingsGroup = new OptionsGroup(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup",
soundOptionsPanel,
this.soundOptionsPanel,
"OptionsGroup"
);
volumeSettingsGroup.setCaption(L["Volume Settings"]);
volumeSettingsGroup.setCaptionStyle("CaptionFontSmall");
// Create sliders
let masterVolumeSlider = new Slider(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup_MasterVolumeSlider",
volumeSettingsGroup.fieldSet
);
masterVolumeSlider.setLabelText(L["Master Volume"]);
masterVolumeSlider.setScript("OnInput", () => {
DEBUG("Functionality NYI");
});
this.volumeSettingsGroup = volumeSettingsGroup;

let effectsVolumeSlider = new Slider(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup_EffectsVolumeSlider",
volumeSettingsGroup.fieldSet
this.createVolumeSettingsSliders();
},
createVolumeSettingsSliders() {
this.createGlobalVolumeSlider();
this.createMusicVolumeSlider();
this.createEffectsVolumeSlider();
this.createAmbienceVolumeSlider();
},
createGlobalVolumeSlider() {
const globalVolumeSlider = new Slider(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup_GlobalVolumeSlider",
this.volumeSettingsGroup.fieldSet
);
effectsVolumeSlider.setLabelText(L["Sound Effects"]);
effectsVolumeSlider.setScript("OnInput", () => {
DEBUG("Functionality NYI");
globalVolumeSlider.setLabelText(L["Global Volume"]);
globalVolumeSlider.setScript("OnInput", () => {
C_WebAudio.setGlobalVolume(globalVolumeSlider.getValue() / 100);
});

let musicVolumeSlider = new Slider(
globalVolumeSlider.setValue(C_Settings.getValue("globalVolume") * 100);
},
createMusicVolumeSlider() {
const musicVolumeSlider = new Slider(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup_MusicVolumeSlider",
volumeSettingsGroup.fieldSet
this.volumeSettingsGroup.fieldSet
);

musicVolumeSlider.setLabelText(L["Music"]);
musicVolumeSlider.setScript("OnInput", () => {
DEBUG("Functionality NYI");
C_WebAudio.setMusicVolume(musicVolumeSlider.getValue() / 100);
});
musicVolumeSlider.setValue(C_Settings.getValue("musicVolume") * 100);
},
createEffectsVolumeSlider() {
const effectsVolumeSlider = new Slider(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup_EffectsVolumeSlider",
this.volumeSettingsGroup.fieldSet
);

let ambienceVolumeSlider = new Slider(
effectsVolumeSlider.setLabelText(L["Sound Effects"]);
effectsVolumeSlider.setScript("OnInput", () => {
C_WebAudio.setEffectsVolume(effectsVolumeSlider.getValue() / 100);
});
effectsVolumeSlider.setValue(C_Settings.getValue("sfxVolume") * 100);
},
createAmbienceVolumeSlider() {
const ambienceVolumeSlider = new Slider(
"SystemOptionsFrame_SoundOptions_VolumeSettingsGroup_AmbienceVolumeSlider",
volumeSettingsGroup.fieldSet
this.volumeSettingsGroup.fieldSet
);
ambienceVolumeSlider.setLabelText(L["Ambience"]);
ambienceVolumeSlider.setScript("OnInput", () => {
DEBUG("Functionality NYI");
C_WebAudio.setAmbienceVolume(ambienceVolumeSlider.getValue() / 100);
});

this.frame.addCategoryPanel("Sound", soundOptionsPanel);

this.soundOptionsPanel = soundOptionsPanel;
ambienceVolumeSlider.setValue(C_Settings.getValue("ambienceVolume") * 100);
},
};

Expand Down