Music & Sound volume sliders in the settings menu (#611)

* Added music & sound volume sliders in the settings menu

* Changed the order of the sound options in the settings menu

* Fixed the formatting, removed extra semicolon

* Removed a bad character

* Update base-en.yaml

* Updated base-en.yaml

* Removed trailing spaces

* Type safety fixes

* Replaced logical XOR (^) with !==

src/js/game/systems/logic_gate.js

@@ -117,7 +117,7 @@ export class LogicGateSystem extends GameSystemWithFilter {
      */
     compute_XOR(parameters) {
         assert(parameters.length === 2, "bad parameter count for XOR");
-        return isTruthyItem(parameters[0]) ^ isTruthyItem(parameters[1])
+        return isTruthyItem(parameters[0]) !== isTruthyItem(parameters[1])
             ? BOOL_TRUE_SINGLETON
             : BOOL_FALSE_SINGLETON;
     }

src/js/platform/browser/sound.js

@@ -146,9 +146,10 @@ class MusicInstance extends MusicInstanceInterface {
         return this.playing;
     }
 
-    play() {
+    play(volume) {
         if (this.howl) {
             this.playing = true;
+            this.howl.volume(volume);
             if (this.instance) {
                 this.howl.play(this.instance);
             } else {
@@ -157,6 +158,12 @@ class MusicInstance extends MusicInstanceInterface {
         }
     }
 
+    setVolume(volume) {
+        if (this.howl) {
+            this.howl.volume(volume);
+        }
+    }
+
     deinitialize() {
         if (this.howl) {
             this.howl.unload();

src/js/platform/sound.js

@@ -61,7 +61,11 @@ export class MusicInstanceInterface {
         abstract;
     }
 
-    play() {
+    play(volume) {
+        abstract;
+    }
+
+    setVolume(volume) {
         abstract;
     }
 
@@ -101,6 +105,9 @@ export class SoundInterface {
 
         this.musicMuted = false;
         this.soundsMuted = false;
+
+        this.musicVolume = 1.0;
+        this.soundVolume = 1.0;
     }
 
     /**
@@ -122,6 +129,8 @@ export class SoundInterface {
 
         this.musicMuted = this.app.settings.getAllSettings().musicMuted;
         this.soundsMuted = this.app.settings.getAllSettings().soundsMuted;
+        this.musicVolume = this.app.settings.getAllSettings().musicVolume;
+        this.soundVolume = this.app.settings.getAllSettings().soundVolume;
 
         if (G_IS_DEV && globalConfig.debug.disableMusic) {
             this.musicMuted = true;
@@ -189,7 +198,7 @@ export class SoundInterface {
             }
         } else {
             if (this.currentMusic) {
-                this.currentMusic.play();
+                this.currentMusic.play(this.musicVolume);
             }
         }
     }
@@ -202,6 +211,41 @@ export class SoundInterface {
         this.soundsMuted = muted;
     }
 
+    /**
+     * Returns the music volume
+     * @returns {number}
+     */
+    getMusicVolume() {
+        return this.musicVolume;
+    }
+
+    /**
+     * Returns the sound volume
+     * @returns {number}
+     */
+    getSoundVolume() {
+        return this.soundVolume;
+    }
+
+    /**
+     * Sets the music volume
+     * @param {number} volume
+     */
+    setMusicVolume(volume) {
+        this.musicVolume = clamp(volume, 0, 1);
+        if (this.currentMusic) {
+            this.currentMusic.setVolume(this.musicVolume);
+        }
+    }
+
+    /**
+     * Sets the sound volume
+     * @param {number} volume
+     */
+    setSoundVolume(volume) {
+        this.soundVolume = clamp(volume, 0, 1);
+    }
+
     /**
      * Focus change handler, called by the pap
      * @param {boolean} pageIsVisible
@@ -211,7 +255,7 @@ export class SoundInterface {
         if (this.currentMusic) {
             if (pageIsVisible) {
                 if (!this.currentMusic.isPlaying() && !this.musicMuted) {
-                    this.currentMusic.play();
+                    this.currentMusic.play(this.musicVolume);
                 }
             } else {
                 this.currentMusic.stop();
@@ -230,7 +274,7 @@ export class SoundInterface {
             logger.warn("Sound", key, "not found, probably not loaded yet");
             return;
         }
-        this.sounds[key].play(1.0);
+        this.sounds[key].play(this.soundVolume);
     }
 
     /**
@@ -253,9 +297,9 @@ export class SoundInterface {
             return;
         }
 
-        let volume = 1.0;
+        let volume = this.soundVolume;
         if (!root.camera.isWorldPointOnScreen(worldPosition)) {
-            volume = 0.2;
+            volume = this.soundVolume / 5; // In the old implementation this value was fixed to 0.2 => 20% of 1.0
         }
         volume *= clamp(root.camera.zoomLevel / 3);
         this.sounds[key].play(clamp(volume));
@@ -277,7 +321,7 @@ export class SoundInterface {
             this.currentMusic = music;
             if (music && this.pageIsVisible && !this.musicMuted) {
                 logger.log("Starting", this.currentMusic.key);
-                music.play();
+                music.play(this.musicVolume);
             }
         }
     }

src/js/profile/setting_types.js

@@ -220,3 +220,78 @@ export class BoolSetting extends BaseSetting {
         return typeof value === "boolean";
     }
 }
+
+export class RangeSetting extends BaseSetting {
+    constructor(
+        id,
+        category,
+        changeCb = null,
+        enabled = true,
+        defaultValue = 100,
+        minValue = 0,
+        maxValue = 100,
+        stepSize = 1
+    ) {
+        super(id, category, changeCb, enabled);
+
+        this.defaultValue = defaultValue;
+        this.minValue = minValue;
+        this.maxValue = maxValue;
+        this.stepSize = stepSize;
+    }
+
+    getHtml() {
+        return `
+        <div class="setting cardbox ${this.enabled ? "enabled" : "disabled"}">
+            ${this.enabled ? "" : `<span class="standaloneOnlyHint">${T.demo.settingNotAvailable}</span>`}
+
+            <div class="row">
+                <label>${T.settings.labels[this.id].title}</label>
+                <div class="value range" data-setting="${this.id}">
+                    <label class="range-label">${this.defaultValue}</label>
+                    <input class="range-input" type="range" value="${this.defaultValue}" min="${
+            this.minValue
+        }" max="${this.maxValue}" step="${this.stepSize}">
+                </div>
+            </div>
+            <div class="desc">
+                ${T.settings.labels[this.id].description}
+            </div>
+        </div>`;
+    }
+
+    bind(app, element, dialogs) {
+        this.app = app;
+        this.element = element;
+        this.dialogs = dialogs;
+
+        this.element.querySelector(".range-input").addEventListener("input", () => {
+            this.modify();
+        });
+    }
+
+    syncValueToElement() {
+        const value = this.app.settings.getSetting(this.id);
+        /** @type {HTMLInputElement} */
+        const rangeInput = this.element.querySelector(".range-input"),
+            rangeLabel = this.element.querySelector(".range-label");
+        rangeInput.value = value;
+        rangeLabel.innerHTML = value;
+    }
+
+    modify() {
+        /** @type {HTMLInputElement} */
+        const rangeInput = this.element.querySelector(".range-input");
+        const newValue = Number(rangeInput.value);
+        this.app.settings.updateSetting(this.id, newValue);
+        this.syncValueToElement();
+
+        if (this.changeCb) {
+            this.changeCb(this.app, newValue);
+        }
+    }
+
+    validate(value) {
+        return typeof value === "number";
+    }
+}