Disable sliders when sound not enabled

src/js/stendhal/ui/dialog/settings/SoundTab.ts

@@ -24,19 +24,28 @@ import { ConfigManager } from "../../../util/ConfigManager";
 
 export class SoundTab extends AbstractSettingsTab {
 
+	private readonly sliders: SliderComponent[];
+
+
 	constructor(parent: SettingsDialog, element: HTMLElement) {
 		super(element);
 		const config = ConfigManager.get();
 		const sound = SoundManager.get();
+		this.sliders = [];
 
 		const col1 = this.child("#col1")!;
 
+		// state of sound when dialog is created
+		let soundEnabled = config.getBoolean("sound");
+
 		// TODO: add DOM element creation to `SettingsDialog.createCheckBox`
 		const chkSound = new SettingsComponent("chk_sound", "Enable sound");
-		chkSound.setValue(config.getBoolean("sound"));
-		chkSound.onchange = function(evt: Event) {
-			config.set("sound", chkSound.getValue() as boolean);
+		chkSound.setValue(soundEnabled);
+		chkSound.onchange = (evt: Event) => {
+			soundEnabled = chkSound.getValue() as boolean;
+			config.set("sound", soundEnabled);
 			sound.onStateChanged();
+			this.setSlidersEnabled(soundEnabled);
 		};
 		chkSound.addTo(col1);
 
@@ -58,10 +67,17 @@ export class SoundTab extends AbstractSettingsTab {
 				sound.setVolume(layer, slider.getValue() / 100);
 			}
 			slider.addTo(col1);
+			this.sliders.push(slider);
 		}
+		this.setSlidersEnabled(soundEnabled);
 
 		// TODO:
-		// - disable sliders when sound is disabled
 		// - show volume level value
 	}
+
+	private setSlidersEnabled(enabled: boolean) {
+		for (const slider of this.sliders) {
+			slider.setEnabled(enabled);
+		}
+	}
 }