Add visuals tab to settings dialog

doc/CHANGES.txt

@@ -2,6 +2,12 @@ Changelog
 ---------
 ---------
 
+1.48
+
+*web client*
+- added visuals tab to settings dialog
+
+
 1.47
 
 *world*

src/js/stendhal.html

@@ -271,15 +271,9 @@ <h3></h3>
 
 		<div class="horizontalgroup pad-contents" id="settings-general">
 		<div id="settings_panel1" class="verticalgroup vgroupcol">
-			<label class="checksetting"><input type="checkbox" id="chk_light">Light effects</label>
-			<label class="checksetting"><input type="checkbox" id="chk_weather">Weather</label>
-			<label class="checksetting"><input type="checkbox" id="chk_blood">Blood</label>
-			<label class="checksetting"><input type="checkbox" id="chk_nonude">Cover naked entities</label>
-			<label class="checksetting"><input type="checkbox" id="chk_shadows">Shadows</label>
 			<label class="checksetting"><input type="checkbox" id="chk_speechcr">Creature speech bubbles</label>
 			<label class="checksetting"><input type="checkbox" id="chk_charname">Status panel character name</label>
 			<label class="checksetting"><input type="checkbox" id="chk_hpbar">Status panel HP bar</label>
-			<label class="checksetting"><input type="checkbox" id="chk_activityindicator">Object activity indicator</label>
 			<label class="checksetting"><input type="checkbox" id="chk_floatchat">Floating chat panel</label>
 			<label class="checksetting"><input type="checkbox" id="chk_hidechat" class="experimental">Auto-hide chat panel</label>
 			<label class="checksetting"><input type="checkbox" id="chk_zoom">Touch zoom</label>
@@ -289,7 +283,6 @@ <h3></h3>
 			<label class="checksetting"><input type="checkbox" id="chk_chestqp">Quick pickup from chests and corpses</label>
 			<label class="checksetting"><input type="checkbox" id="chk_movecont">Continuous movement</label>
 			<label class="checksetting"><input type="checkbox" id="chk_pvtsnd">Private message notifications</label>
-			<label class="checksetting"><input type="checkbox" id="chk_clickindicator">Display clicks/touches</label>
 			<label class="checksetting"><input type="checkbox" id="chk_nativeemojis" class="experimental">Native emojis</label>
 		</div>
 		<div id="settings_panel3" class="verticalgroup vgroupcolr">
@@ -320,6 +313,18 @@ <h3></h3>
 		</div>
 		</div>
 
+		<div class="horizontalgroup pad-contents" id="settings-visuals">
+			<div class="verticalgroup vgroupcol" id="col1">
+				<label class="checksetting"><input type="checkbox" id="chk_light">Light effects</label>
+				<label class="checksetting"><input type="checkbox" id="chk_weather">Weather</label>
+				<label class="checksetting"><input type="checkbox" id="chk_blood">Blood</label>
+				<label class="checksetting"><input type="checkbox" id="chk_nonude">Cover naked entities</label>
+				<label class="checksetting"><input type="checkbox" id="chk_shadows">Shadows</label>
+				<label class="checksetting"><input type="checkbox" id="chk_activityindicator">Object activity indicator</label>
+				<label class="checksetting"><input type="checkbox" id="chk_clickindicator">Display clicks/touches</label>
+			</div>
+		</div>
+
 		<div class="horizontalgroup pad-contents" id="settings-sound">
 			<div class="verticalgroup vgroupcol" id="col1"></div>
 		</div>

src/js/stendhal/ui/dialog/SettingsDialog.ts

@@ -14,6 +14,7 @@ declare var stendhal: any;
 import { GeneralTab } from "./settings/GeneralTab";
 import { InputTab } from "./settings/InputTab";
 import { SoundTab } from "./settings/SoundTab";
+import { VisualsTab } from "./settings/VisualsTab";
 
 import { TabDialogContentComponent } from "../toolkit/TabDialogContentComponent";
 
@@ -44,6 +45,7 @@ export class SettingsDialog extends TabDialogContentComponent {
 		};
 
 		this.addTab("General", new GeneralTab(this, this.child("#settings-general")!));
+		this.addTab("Visuals", new VisualsTab(this, this.child("#settings-visuals")!));
 		this.addTab("Sound", new SoundTab(this, this.child("#settings-sound")!));
 		this.addTab("Input", new InputTab(this, this.child("#settings-input")!));
 

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

@@ -38,26 +38,6 @@ export class GeneralTab extends AbstractSettingsTab {
 
 		/* *** left panel *** */
 
-		parent.createCheckBox("chk_light", "effect.lighting",
-				"Lighting effects are enabled", "Lighting effects are disabled");
-
-		parent.createCheckBox("chk_weather", "effect.weather",
-				"Weather is enabled", "Weather is disabled", function() {
-					if (chatLog) {
-						chatLog.addLine("client", "Weather changes will take effect after you change maps.");
-					}
-				})!;
-
-		//const sd = this;
-		parent.createCheckBox("chk_blood", "effect.blood",
-				"Gory images are enabled", "Gory images are disabled");
-
-		parent.createCheckBox("chk_nonude", "effect.no-nude",
-				"Naked entities have undergarments", "Naked entities are not covered");
-
-		parent.createCheckBox("chk_shadows", "effect.shadows",
-				"Shadows are enabled", "Shadows are disabled");
-
 		parent.createCheckBox("chk_speechcr", "speech.creature",
 				"Creature speech bubbles are enabled", "Creature speech bubbles are disabled");
 
@@ -75,9 +55,6 @@ export class GeneralTab extends AbstractSettingsTab {
 					player_stats.enableBar("hp", chk_hpbar.checked);
 				})!;
 
-		parent.createCheckBox("chk_activityindicator", "activity-indicator",
-				"Indicator will be drawn", "Indicator will not be drawn");
-
 		const chk_floatchat = parent.createCheckBox("chk_floatchat", "chat.float",
 				undefined, undefined,
 				function() {
@@ -132,9 +109,6 @@ export class GeneralTab extends AbstractSettingsTab {
 				undefined, "ui/notify_up", "null");
 		chk_pvtsnd.checked = config.get("chat.private.sound") === "ui/notify_up";
 
-		parent.createCheckBox("chk_clickindicator", "click-indicator",
-				"Displaying clicks", "Not displaying clicks");
-
 		parent.createCheckBox("chk_nativeemojis", "emojis.native",
 				"Using native emojis", "Using built-in emojis",
 				function() {

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

@@ -0,0 +1,54 @@
+/***************************************************************************
+ *                    Copyright © 2024 - Faiumoni e. V.                    *
+ ***************************************************************************
+ ***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU Affero General Public License as        *
+ *   published by the Free Software Foundation; either version 3 of the    *
+ *   License, or (at your option) any later version.                       *
+ *                                                                         *
+ ***************************************************************************/
+
+import { AbstractSettingsTab } from "./AbstractSettingsTab";
+
+import { SettingsDialog } from "../SettingsDialog";
+
+import { ui } from "../../UI";
+import { UIComponentEnum } from "../../UIComponentEnum";
+
+import { ChatLogComponent } from "../../component/ChatLogComponent";
+
+
+export class VisualsTab extends AbstractSettingsTab {
+
+	constructor(parent: SettingsDialog, element: HTMLElement) {
+		super(element);
+		const chatLog = (ui.get(UIComponentEnum.ChatLog) as ChatLogComponent);
+
+		parent.createCheckBox("chk_light", "effect.lighting",
+				"Lighting effects are enabled", "Lighting effects are disabled");
+
+		parent.createCheckBox("chk_weather", "effect.weather",
+				"Weather is enabled", "Weather is disabled", function() {
+					if (chatLog) {
+						chatLog.addLine("client", "Weather changes will take effect after you change maps.");
+					}
+				})!;
+
+		parent.createCheckBox("chk_blood", "effect.blood",
+				"Gory images are enabled", "Gory images are disabled");
+
+		parent.createCheckBox("chk_nonude", "effect.no-nude",
+				"Naked entities have undergarments", "Naked entities are not covered");
+
+		parent.createCheckBox("chk_shadows", "effect.shadows",
+				"Shadows are enabled", "Shadows are disabled");
+
+		parent.createCheckBox("chk_activityindicator", "activity-indicator",
+				"Indicator will be drawn", "Indicator will not be drawn");
+
+		parent.createCheckBox("chk_clickindicator", "click-indicator",
+				"Displaying clicks", "Not displaying clicks");
+	}
+}