From f99f5d7cdc4bf1b21eb0dce809b46bd1f488aca7 Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Wed, 24 Jul 2024 15:19:17 +0100
Subject: [PATCH 1/9] feat: add horizontal FOV converter

---
 layout/pages/settings/video.xml | 10 +++++-
 scripts/pages/settings/fov.js   | 62 +++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 scripts/pages/settings/fov.js

diff --git a/layout/pages/settings/video.xml b/layout/pages/settings/video.xml
index 06eb998f..3cc33077 100644
--- a/layout/pages/settings/video.xml
+++ b/layout/pages/settings/video.xml
@@ -5,6 +5,7 @@
 
 	<scripts>
 		<include src="file://{scripts}/pages/settings/page.js" />
+		<include src="file://{scripts}/pages/settings/fov.js" />
 	</scripts>
 
 	<Panel class="settings-page">
@@ -31,7 +32,14 @@
 					<Label class="settings-group__title" text="#Settings_Video" />
 				</Panel>
 
-				<SettingsSlider text="#Settings_Video_FOV" min="50" max="130" convar="fov_desired" hasdocspage="false" />
+				<Panel class="settings-group__combo" onload="Fov.loadSettings()">
+					<SettingsSlider id="FOV" text="#Settings_Video_FOV" min="50" max="130" convar="fov_desired" hasdocspage="false" onvaluechanged="Fov.updateFOV()" />
+
+					<Panel class="settings-enum__values pr-2 pl-4 mb-1">
+						<Label text="#Settings_Video_Horizontal_FOV" class="settings-enum__title" />
+						<TextEntry id="FOV_Horizontal" class="textentry settings-slider__textentry ml-4" multiline="false" textmode="numeric" oninputsubmit="Fov.updateHorizontalFov()" />
+					</Panel>
+				</Panel>
 
 				<SettingsSlider text="#Settings_Video_MaxFPS" min="0" max="400" convar="fps_max" infomessage="#Settings_Video_MaxFPS_Info" hasdocspage="false" />
 
diff --git a/scripts/pages/settings/fov.js b/scripts/pages/settings/fov.js
new file mode 100644
index 00000000..ae1406e5
--- /dev/null
+++ b/scripts/pages/settings/fov.js
@@ -0,0 +1,62 @@
+function deg2rad(x) { return x/180*Math.PI; }
+function rad2deg(x) { return x*180/Math.PI; }
+
+class Fov {
+	static panels = {
+		/** @type {SettingsSlider} @static */
+		fov: $('#FOV'),
+		/** @type {TextEntry} @static */
+		horizontalFov: $('#FOV_Horizontal'),
+	};
+
+	static loadSettings() {
+		this.updateFOV();
+	}
+
+	static aspectRatio() {
+		// find the display panel
+		// there doesn't seem to be an api for this yet
+		let panel = this.panels.fov;
+		let parent = panel;
+		while (parent = panel.GetParent()) {
+			panel = parent;
+		};
+
+		return panel.actuallayoutwidth / panel.actuallayoutheight;
+	}
+
+	// based on https://casualhacks.net/Source-FOV-calculator.html
+	static fovToHorizontal(fov) {
+		const ratioRatio = this.aspectRatio() / (4/3);
+		return 2 * rad2deg(Math.atan(Math.tan(deg2rad(fov)/2)*ratioRatio));
+	}
+
+	static horizontalToFov(horizontalFov) {
+		const ratioRatio = this.aspectRatio() / (4/3);
+		return 2 * rad2deg(Math.atan(Math.tan(deg2rad(horizontalFov)/2)/ratioRatio));
+	}
+
+	static updateFOV() {
+		if(!this.panels.fov || !this.panels.horizontalFov) return;
+
+		let fov = GameInterfaceAPI.GetSettingFloat('fov_desired');
+		fov = Math.round(this.fovToHorizontal(fov));
+
+		if(!isNaN(fov)) {
+			this.panels.horizontalFov.text = fov;
+		}
+	}
+
+	static updateHorizontalFov() {
+		if(!this.panels.fov || !this.panels.horizontalFov) return;
+
+		let fov = parseFloat(this.panels.horizontalFov.text);
+		fov = Math.round(this.horizontalToFov(fov));
+
+		if(!isNaN(fov)) {
+			const fovText = this.panels.fov.FindChildTraverse('Value');
+			fovText.text = fov;
+			fovText.Submit();
+		}
+	}
+}

From 6cd520249f8709b01e60cf930a55cc0017a85e3b Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Wed, 24 Jul 2024 15:41:47 +0100
Subject: [PATCH 2/9] fixup! feat: add horizontal FOV converter

---
 layout/pages/settings/video.xml |  2 +-
 scripts/pages/settings/fov.js   | 30 +++++++++++++++++-------------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/layout/pages/settings/video.xml b/layout/pages/settings/video.xml
index 3cc33077..e595276b 100644
--- a/layout/pages/settings/video.xml
+++ b/layout/pages/settings/video.xml
@@ -37,7 +37,7 @@
 
 					<Panel class="settings-enum__values pr-2 pl-4 mb-1">
 						<Label text="#Settings_Video_Horizontal_FOV" class="settings-enum__title" />
-						<TextEntry id="FOV_Horizontal" class="textentry settings-slider__textentry ml-4" multiline="false" textmode="numeric" oninputsubmit="Fov.updateHorizontalFov()" />
+						<TextEntry id="FOV_Horizontal" class="textentry settings-slider__textentry HasInput ml-4" multiline="false" textmode="numeric" oninputsubmit="Fov.updateHorizontalFov()" />
 					</Panel>
 				</Panel>
 
diff --git a/scripts/pages/settings/fov.js b/scripts/pages/settings/fov.js
index ae1406e5..ae5418b7 100644
--- a/scripts/pages/settings/fov.js
+++ b/scripts/pages/settings/fov.js
@@ -1,12 +1,16 @@
-function deg2rad(x) { return x/180*Math.PI; }
-function rad2deg(x) { return x*180/Math.PI; }
+function deg2rad(x) {
+	return (x / 180) * Math.PI;
+}
+function rad2deg(x) {
+	return (x * 180) / Math.PI;
+}
 
 class Fov {
 	static panels = {
 		/** @type {SettingsSlider} @static */
 		fov: $('#FOV'),
 		/** @type {TextEntry} @static */
-		horizontalFov: $('#FOV_Horizontal'),
+		horizontalFov: $('#FOV_Horizontal')
 	};
 
 	static loadSettings() {
@@ -18,42 +22,42 @@ class Fov {
 		// there doesn't seem to be an api for this yet
 		let panel = this.panels.fov;
 		let parent = panel;
-		while (parent = panel.GetParent()) {
+		while ((parent = panel.GetParent())) {
 			panel = parent;
-		};
+		}
 
 		return panel.actuallayoutwidth / panel.actuallayoutheight;
 	}
 
 	// based on https://casualhacks.net/Source-FOV-calculator.html
 	static fovToHorizontal(fov) {
-		const ratioRatio = this.aspectRatio() / (4/3);
-		return 2 * rad2deg(Math.atan(Math.tan(deg2rad(fov)/2)*ratioRatio));
+		const ratioRatio = this.aspectRatio() / (4 / 3);
+		return 2 * rad2deg(Math.atan(Math.tan(deg2rad(fov) / 2) * ratioRatio));
 	}
 
 	static horizontalToFov(horizontalFov) {
-		const ratioRatio = this.aspectRatio() / (4/3);
-		return 2 * rad2deg(Math.atan(Math.tan(deg2rad(horizontalFov)/2)/ratioRatio));
+		const ratioRatio = this.aspectRatio() / (4 / 3);
+		return 2 * rad2deg(Math.atan(Math.tan(deg2rad(horizontalFov) / 2) / ratioRatio));
 	}
 
 	static updateFOV() {
-		if(!this.panels.fov || !this.panels.horizontalFov) return;
+		if (!this.panels.fov || !this.panels.horizontalFov) return;
 
 		let fov = GameInterfaceAPI.GetSettingFloat('fov_desired');
 		fov = Math.round(this.fovToHorizontal(fov));
 
-		if(!isNaN(fov)) {
+		if (!isNaN(fov)) {
 			this.panels.horizontalFov.text = fov;
 		}
 	}
 
 	static updateHorizontalFov() {
-		if(!this.panels.fov || !this.panels.horizontalFov) return;
+		if (!this.panels.fov || !this.panels.horizontalFov) return;
 
 		let fov = parseFloat(this.panels.horizontalFov.text);
 		fov = Math.round(this.horizontalToFov(fov));
 
-		if(!isNaN(fov)) {
+		if (!isNaN(fov)) {
 			const fovText = this.panels.fov.FindChildTraverse('Value');
 			fovText.text = fov;
 			fovText.Submit();

From bde375153d698f99bd2bd1f3c1042ac1e7b145c8 Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Wed, 24 Jul 2024 15:44:09 +0100
Subject: [PATCH 3/9] fixup! feat: add horizontal FOV converter

---
 scripts/pages/settings/fov.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/pages/settings/fov.js b/scripts/pages/settings/fov.js
index ae5418b7..82cbe670 100644
--- a/scripts/pages/settings/fov.js
+++ b/scripts/pages/settings/fov.js
@@ -46,7 +46,7 @@ class Fov {
 		let fov = GameInterfaceAPI.GetSettingFloat('fov_desired');
 		fov = Math.round(this.fovToHorizontal(fov));
 
-		if (!isNaN(fov)) {
+		if (!Number.isNaN(fov)) {
 			this.panels.horizontalFov.text = fov;
 		}
 	}
@@ -57,7 +57,7 @@ class Fov {
 		let fov = parseFloat(this.panels.horizontalFov.text);
 		fov = Math.round(this.horizontalToFov(fov));
 
-		if (!isNaN(fov)) {
+		if (!Number.isNaN(fov)) {
 			const fovText = this.panels.fov.FindChildTraverse('Value');
 			fovText.text = fov;
 			fovText.Submit();

From 7309650e1ab7aa6b521baeec43c83e52e72849a3 Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Wed, 24 Jul 2024 15:45:01 +0100
Subject: [PATCH 4/9] fixup! feat: add horizontal FOV converter

---
 scripts/pages/settings/fov.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pages/settings/fov.js b/scripts/pages/settings/fov.js
index 82cbe670..0aa3dab5 100644
--- a/scripts/pages/settings/fov.js
+++ b/scripts/pages/settings/fov.js
@@ -54,7 +54,7 @@ class Fov {
 	static updateHorizontalFov() {
 		if (!this.panels.fov || !this.panels.horizontalFov) return;
 
-		let fov = parseFloat(this.panels.horizontalFov.text);
+		let fov = Number.parseFloat(this.panels.horizontalFov.text);
 		fov = Math.round(this.horizontalToFov(fov));
 
 		if (!Number.isNaN(fov)) {

From 0e719415cb6ac8e34f968dc0799d4f089eecf6a5 Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Thu, 25 Jul 2024 08:37:09 +0100
Subject: [PATCH 5/9] fixup! feat: add horizontal FOV converter

---
 scripts/pages/settings/fov.js | 8 --------
 scripts/util/math.ts          | 8 ++++++++
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/scripts/pages/settings/fov.js b/scripts/pages/settings/fov.js
index 0aa3dab5..e3153c38 100644
--- a/scripts/pages/settings/fov.js
+++ b/scripts/pages/settings/fov.js
@@ -1,10 +1,3 @@
-function deg2rad(x) {
-	return (x / 180) * Math.PI;
-}
-function rad2deg(x) {
-	return (x * 180) / Math.PI;
-}
-
 class Fov {
 	static panels = {
 		/** @type {SettingsSlider} @static */
@@ -29,7 +22,6 @@ class Fov {
 		return panel.actuallayoutwidth / panel.actuallayoutheight;
 	}
 
-	// based on https://casualhacks.net/Source-FOV-calculator.html
 	static fovToHorizontal(fov) {
 		const ratioRatio = this.aspectRatio() / (4 / 3);
 		return 2 * rad2deg(Math.atan(Math.tan(deg2rad(fov) / 2) * ratioRatio));
diff --git a/scripts/util/math.ts b/scripts/util/math.ts
index f9096b09..306f3906 100644
--- a/scripts/util/math.ts
+++ b/scripts/util/math.ts
@@ -121,3 +121,11 @@ function mapAngleToScreenDist(angle: number, fov: number, length: number, scale:
 			return Math.round((1 + Math.tan(angle * 0.5) / Math.tan(fov * 0.5)) * screenDist * 0.5);
 	}
 }
+
+function deg2rad(x: number): number {
+	return (x / 180) * Math.PI;
+}
+
+function rad2deg(x: number): number {
+	return (x * 180) / Math.PI;
+}

From d135cd1edb45ef9e9b46db7e414f45153933ab97 Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Thu, 25 Jul 2024 10:55:36 +0100
Subject: [PATCH 6/9] fixup! feat: add horizontal FOV converter

---
 layout/pages/settings/video.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/layout/pages/settings/video.xml b/layout/pages/settings/video.xml
index e595276b..d3e90247 100644
--- a/layout/pages/settings/video.xml
+++ b/layout/pages/settings/video.xml
@@ -5,6 +5,7 @@
 
 	<scripts>
 		<include src="file://{scripts}/pages/settings/page.js" />
+		<include src="file://{scripts}/util/math.js" />
 		<include src="file://{scripts}/pages/settings/fov.js" />
 	</scripts>
 

From 5d54f0891c2aae5237ef6e1c49b29a744d5c9e8e Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Thu, 25 Jul 2024 19:26:39 +0100
Subject: [PATCH 7/9] fixup! feat: add horizontal FOV converter

---
 layout/pages/settings/video.xml    | 15 +++++++++++----
 scripts/pages/settings/fov.js      | 21 ++++++++++++---------
 scripts/pages/settings/settings.js | 17 +++++++++--------
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/layout/pages/settings/video.xml b/layout/pages/settings/video.xml
index d3e90247..8567cc2f 100644
--- a/layout/pages/settings/video.xml
+++ b/layout/pages/settings/video.xml
@@ -33,12 +33,19 @@
 					<Label class="settings-group__title" text="#Settings_Video" />
 				</Panel>
 
-				<Panel class="settings-group__combo" onload="Fov.loadSettings()">
-					<SettingsSlider id="FOV" text="#Settings_Video_FOV" min="50" max="130" convar="fov_desired" hasdocspage="false" onvaluechanged="Fov.updateFOV()" />
+				<SettingsSlider id="FOV" text="#Settings_Video_FOV" min="50" max="130" convar="fov_desired" hasdocspage="false" onvaluechanged="Fov.updateFOV()" />
 
-					<Panel class="settings-enum__values pr-2 pl-4 mb-1">
+				<Panel class="settings-group__combo" onload="Fov.loadSettings()" infotitle="#Settings_Video_Horizontal_FOV" infomessage="#Settings_Video_Horizontal_FOV_Info">
+					<Panel class="settings-enum">
 						<Label text="#Settings_Video_Horizontal_FOV" class="settings-enum__title" />
-						<TextEntry id="FOV_Horizontal" class="textentry settings-slider__textentry HasInput ml-4" multiline="false" textmode="numeric" oninputsubmit="Fov.updateHorizontalFov()" />
+						<Panel class="settings-enum__values">
+							<TextEntry id="FOV_Horizontal" class="textentry settings-slider__textentry HasInput ml-4" multiline="false" textmode="numeric" oninputsubmit="Fov.updateHorizontalFov()" />
+							<DropDown id="FOV_Horizontal_AspectRatioEnum" class="dropdown ml-4" menuclass="dropdown-menu" onuserinputsubmit="Fov.updateFOV()">
+								<Label text="#Settings_Video_AspectRatio_Normal" value="0" id="aspectratio0" />
+								<Label text="#Settings_Video_AspectRatio_16x9" value="1" id="aspectratio1" />
+								<Label text="#Settings_Video_AspectRatio_16x10" value="2" id="aspectratio2" />
+							</DropDown>
+						</Panel>
 					</Panel>
 				</Panel>
 
diff --git a/scripts/pages/settings/fov.js b/scripts/pages/settings/fov.js
index e3153c38..dc50c32a 100644
--- a/scripts/pages/settings/fov.js
+++ b/scripts/pages/settings/fov.js
@@ -3,23 +3,26 @@ class Fov {
 		/** @type {SettingsSlider} @static */
 		fov: $('#FOV'),
 		/** @type {TextEntry} @static */
-		horizontalFov: $('#FOV_Horizontal')
+		horizontalFov: $('#FOV_Horizontal'),
+		aspectRatio: $('#FOV_Horizontal_AspectRatioEnum')
 	};
 
 	static loadSettings() {
+		this.panels.aspectRatio.SetSelected('aspectratio1');
 		this.updateFOV();
 	}
 
 	static aspectRatio() {
-		// find the display panel
-		// there doesn't seem to be an api for this yet
-		let panel = this.panels.fov;
-		let parent = panel;
-		while ((parent = panel.GetParent())) {
-			panel = parent;
+		const id = this.panels.aspectRatio.GetSelected().id;
+		switch(id) {
+			case 'aspectratio0':
+				return 4/3;
+			case 'aspectratio1':
+				return 16/9;
+			case 'aspectratio2':
+				return 16/10;
 		}
-
-		return panel.actuallayoutwidth / panel.actuallayoutheight;
+		return Number.NaN;
 	}
 
 	static fovToHorizontal(fov) {
diff --git a/scripts/pages/settings/settings.js b/scripts/pages/settings/settings.js
index 4f3ed864..07a5235a 100644
--- a/scripts/pages/settings/settings.js
+++ b/scripts/pages/settings/settings.js
@@ -244,9 +244,7 @@ class MainMenuSettings {
 
 	static initPanelsRecursive(panel) {
 		// Initialise info panel event handlers
-		if (this.isSettingsPanel(panel) || this.isSpeedometerPanel(panel)) {
-			this.setPanelInfoEvents(panel);
-		}
+		this.setPanelInfoEvents(panel);
 
 		// Initialise all the settings using persistent storage
 		// Only Enum and EnumDropDown are currently supported, others can be added when/if needed
@@ -312,13 +310,20 @@ class MainMenuSettings {
 
 	static setPanelInfoEvents(panel) {
 		const message = panel.GetAttributeString('infomessage', '');
+		const title = panel.GetAttributeString('infotitle', '');
+
+		// Don't set events if there's no info to show
+		if(!this.isSettingsPanel(panel) && message === '' && title === '' && !panel.convar && !panel.bind) return;
+
 		// Default to true if not set
 		const hasDocs = !(panel.GetAttributeString('hasdocspage', '') === 'false');
+
+
 		panel.SetPanelEvent('onmouseover', () => {
 			// Set onmouseover events for all settings panels
 			this.showInfo(
 				// If a panel has a specific title use that, if not use the panel's name. Child ID names vary between panel types, blame Valve
-				panel.GetAttributeString('infotitle', '') ||
+				title ||
 					panel.FindChildTraverse('Title')?.text ||
 					panel.FindChildTraverse('title')?.text,
 				message,
@@ -438,8 +443,4 @@ class MainMenuSettings {
 			'ConVarColorDisplay'
 		].includes(panel.paneltype);
 	}
-
-	static isSpeedometerPanel(panel) {
-		return ['SpeedometersContainer', 'RangeColorProfilesContainer'].includes(panel.id);
-	}
 }

From f7fe817623211e846a4f858eadc4aa9d625cf9af Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Thu, 25 Jul 2024 19:32:34 +0100
Subject: [PATCH 8/9] fixup! feat: add horizontal FOV converter

---
 scripts/pages/settings/fov.js      | 8 ++++----
 scripts/pages/settings/settings.js | 7 ++-----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/scripts/pages/settings/fov.js b/scripts/pages/settings/fov.js
index dc50c32a..9d6ee571 100644
--- a/scripts/pages/settings/fov.js
+++ b/scripts/pages/settings/fov.js
@@ -14,13 +14,13 @@ class Fov {
 
 	static aspectRatio() {
 		const id = this.panels.aspectRatio.GetSelected().id;
-		switch(id) {
+		switch (id) {
 			case 'aspectratio0':
-				return 4/3;
+				return 4 / 3;
 			case 'aspectratio1':
-				return 16/9;
+				return 16 / 9;
 			case 'aspectratio2':
-				return 16/10;
+				return 16 / 10;
 		}
 		return Number.NaN;
 	}
diff --git a/scripts/pages/settings/settings.js b/scripts/pages/settings/settings.js
index 07a5235a..8a8b50af 100644
--- a/scripts/pages/settings/settings.js
+++ b/scripts/pages/settings/settings.js
@@ -313,19 +313,16 @@ class MainMenuSettings {
 		const title = panel.GetAttributeString('infotitle', '');
 
 		// Don't set events if there's no info to show
-		if(!this.isSettingsPanel(panel) && message === '' && title === '' && !panel.convar && !panel.bind) return;
+		if (!this.isSettingsPanel(panel) && message === '' && title === '' && !panel.convar && !panel.bind) return;
 
 		// Default to true if not set
 		const hasDocs = !(panel.GetAttributeString('hasdocspage', '') === 'false');
 
-
 		panel.SetPanelEvent('onmouseover', () => {
 			// Set onmouseover events for all settings panels
 			this.showInfo(
 				// If a panel has a specific title use that, if not use the panel's name. Child ID names vary between panel types, blame Valve
-				title ||
-					panel.FindChildTraverse('Title')?.text ||
-					panel.FindChildTraverse('title')?.text,
+				title || panel.FindChildTraverse('Title')?.text || panel.FindChildTraverse('title')?.text,
 				message,
 				panel.convar ?? panel.bind,
 				hasDocs,

From 8c9fbabcdc41e6e6a6c53116d330649552ca4ae0 Mon Sep 17 00:00:00 2001
From: wertiop <wertiop121@gmail.com>
Date: Sat, 27 Jul 2024 11:27:57 +0100
Subject: [PATCH 9/9] Fix style missing from panels inside a ConVarEnabler

---
 scripts/pages/settings/settings.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/scripts/pages/settings/settings.js b/scripts/pages/settings/settings.js
index 8a8b50af..f7038ccf 100644
--- a/scripts/pages/settings/settings.js
+++ b/scripts/pages/settings/settings.js
@@ -411,10 +411,6 @@ class MainMenuSettings {
 					if (this.isSettingsPanel(child) || child.HasClass('settings-group__combo')) {
 						this.styleItem(child, n);
 						n++;
-					}
-					// Otherwise if it's a ConVarEnabler search all its children
-					else if (child.paneltype === 'ConVarEnabler') {
-						for (const grandchild of child.Children()) search(grandchild);
 					} else {
 						search(child);
 					}