Method to add listener to update config on change event

arianne · Jun 16, 2024 · 356f36a · 356f36a
1 parent 60cb090
commit 356f36a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 21 deletions.
diff --git a/src/js/stendhal/ui/dialog/settings/SoundTab.ts b/src/js/stendhal/ui/dialog/settings/SoundTab.ts
@@ -38,12 +38,10 @@ export class SoundTab extends AbstractSettingsTab {
 
 		// TODO: add DOM element creation to `SettingsDialog.createCheckBox`
 		const chkSound = new SettingsComponent("chk_sound", "Enable sound");
-		chkSound.setValue(soundEnabled);
+		chkSound.setConfigId("sound");
 		chkSound.addListener((evt: Event) => {
-			soundEnabled = chkSound.getValue() as boolean;
-			config.set("sound", soundEnabled);
 			sound.onStateChanged();
-			this.setSlidersEnabled(soundEnabled);
+			this.setSlidersEnabled(config.getBoolean("sound"));
 		});
 		chkSound.addTo(col1);
 

diff --git a/src/js/stendhal/ui/dialog/settings/VisualsTab.ts b/src/js/stendhal/ui/dialog/settings/VisualsTab.ts
@@ -51,26 +51,20 @@ export class VisualsTab extends AbstractSettingsTab {
 		parent.createCheckBox("chk_clickindicator", "click-indicator",
 				"Displaying clicks", "Not displaying clicks");
 
-		let indicateActivity = config.getBoolean("activity-indicator");
-		let animate = config.getBoolean("activity-indicator.animate");
 		const chkAnimate = new SettingsComponent("chk_animate", "Animate");
-		chkAnimate.setValue(animate);
-		chkAnimate.setEnabled(indicateActivity);
+		chkAnimate.setConfigId("activity-indicator.animate");
+		chkAnimate.setEnabled(config.getBoolean("activity-indicator"));
 		chkAnimate.addListener((evt: Event) => {
-			animate = chkAnimate.getValue() as boolean;
-			config.set("activity-indicator.animate", animate);
 			StandardMessages.changeNeedsRefresh();
 			parent.refresh();
 		});
 
 		const chkActivityInd = new SettingsComponent("chk_activityindicator", "Object activity indicator");
+		chkActivityInd.setConfigId("activity-indicator");
 		chkActivityInd.setTooltip("Display an indictor over certain interactive objects and corpses"
 				+ " that aren't empty");
-		chkActivityInd.setValue(indicateActivity);
 		chkActivityInd.addListener((evt: Event) => {
-			indicateActivity = chkActivityInd.getValue() as boolean;
-			config.set("activity-indicator", indicateActivity);
-			chkAnimate.setEnabled(indicateActivity);
+			chkAnimate.setEnabled(chkActivityInd.getValue() as boolean);
 			StandardMessages.changeNeedsRefresh();
 			parent.refresh();
 		});
@@ -80,10 +74,8 @@ export class VisualsTab extends AbstractSettingsTab {
 
 		const chkParallax = new SettingsComponent("chk_parallax", "Parallax scrolling backgrounds");
 		chkParallax.setTooltip("Parallax scrolling enabled", "Parallax scrolling disabled");
-		chkParallax.setValue(config.getBoolean("effect.parallax"));
+		chkParallax.setConfigId("effect.parallax");
 		chkParallax.addListener((evt: Event) => {
-			const enabled = chkParallax.getValue() as boolean;
-			config.set("effect.parallax", enabled);
 			StandardMessages.changeNeedsRefresh();
 			parent.refresh();
 		});

diff --git a/src/js/stendhal/ui/toolkit/SettingsComponent.ts b/src/js/stendhal/ui/toolkit/SettingsComponent.ts
@@ -16,6 +16,8 @@ import { WidgetComponent } from "./WidgetComponent";
 import { OptionsEnum } from "../../data/enum/OptionsEnum";
 import { WidgetType } from "../../data/enum/WidgetType";
 
+import { ConfigManager } from "../../util/ConfigManager";
+
 
 /**
  * Unthemed component representing a configuration setting.
@@ -154,7 +156,7 @@ export class SettingsComponent extends WidgetComponent {
 	 * @param {string|number|boolean} value
 	 *   New value to be used.
 	 */
-	setValue(value: string|number|boolean) {
+	override setValue(value: string|number|boolean) {
 		switch(this.type) {
 			case WidgetType.SELECT:
 				const options = Array.from((this.componentElement as HTMLSelectElement).options)
@@ -183,7 +185,7 @@ export class SettingsComponent extends WidgetComponent {
 	 * @returns {string|number|boolean}
 	 *   Component value.
 	 */
-	getValue(): string|number|boolean {
+	override getValue(): string|number|boolean {
 		switch(this.type) {
 			case WidgetType.SELECT:
 				// selected number index
@@ -199,6 +201,20 @@ export class SettingsComponent extends WidgetComponent {
 		}
 	}
 
+	override setConfigId(cid: string) {
+		switch (this.type) {
+			case WidgetType.SELECT:
+				this.setValue(ConfigManager.get().getInt(cid));
+				break;
+			case WidgetType.CHECK:
+				this.setValue(ConfigManager.get().getBoolean(cid));
+				break;
+			default:
+				this.setValue(ConfigManager.get().get(cid) as string);
+		}
+		this.setConfigListener(cid);
+	}
+
 	/**
 	 * Adds a selectable option.
 	 *

diff --git a/src/js/stendhal/ui/toolkit/SliderComponent.ts b/src/js/stendhal/ui/toolkit/SliderComponent.ts
@@ -14,6 +14,8 @@ import { WidgetComponent } from "./WidgetComponent";
 
 import { WidgetType } from "../../data/enum/WidgetType";
 
+import { ConfigManager } from "../../util/ConfigManager";
+
 
 /**
  * Unthemed component representing a slider widget and its label.
@@ -66,7 +68,7 @@ export class SliderComponent extends WidgetComponent {
 	 * @param {number} value
 	 *   Current value.
 	 */
-	public setValue(value: number) {
+	override setValue(value: number) {
 		(this.componentElement as HTMLInputElement).value = ""+value;
 	}
 
@@ -76,7 +78,12 @@ export class SliderComponent extends WidgetComponent {
 	 * @returns {number}
 	 *   Current value.
 	 */
-	public getValue(): number {
+	override getValue(): number {
 		return parseInt((this.componentElement as HTMLInputElement).value, 10);
 	}
+
+	override setConfigId(cid: string) {
+		this.setValue(ConfigManager.get().getInt(cid));
+		this.setConfigListener(cid);
+	}
 }
diff --git a/src/js/stendhal/ui/toolkit/WidgetComponent.ts b/src/js/stendhal/ui/toolkit/WidgetComponent.ts
@@ -14,6 +14,8 @@ import { ComponentBase } from "./ComponentBase";
 
 import { WidgetType } from "../../data/enum/WidgetType";
 
+import { ConfigManager } from "../../util/ConfigManager";
+
 
 /**
  * Represents a component for configuring values.
@@ -125,4 +127,44 @@ export abstract class WidgetComponent extends ComponentBase {
 			parentElement.appendChild(this.componentElement);
 		}
 	}
+
+	/**
+	 * Sets value of component element.
+	 *
+	 * @param {string|number|boolean} value
+	 *   New value to be used.
+	 */
+	abstract setValue(value: string|number|boolean): void;
+
+	/**
+	 * Retrieves current value of component.
+	 *
+	 * @returns {string|number|boolean}
+	 *   Component value.
+	 */
+	abstract getValue(): string|number|boolean;
+
+	/**
+	 * Updates value from configuration ID & adds listener to update configuration when value changes.
+	 *
+	 * @param {string} cid
+	 *   Configuration ID.
+	 */
+	setConfigId(cid: string) {
+		this.setValue(ConfigManager.get().get(cid) as string);
+		this.setConfigListener(cid);
+	}
+
+	/**
+	 * Adds listener to update configuration when value changes.
+	 *
+	 * @param {string} cid
+	 *   Configuration ID.
+	 */
+	protected setConfigListener(cid: string) {
+		// needs to be first listener called
+		this.insertListener(0, (evt: Event) => {
+			ConfigManager.get().set(cid, this.getValue());
+		});
+	}
 }