fix: refactor compass ticks

momentum-mod · Sep 24, 2023 · 4a707b4 · 4a707b4
1 parent c8bb4ab
commit 4a707b4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 52 deletions.
diff --git a/layout/hud/cgaz.xml b/layout/hud/cgaz.xml
@@ -43,10 +43,7 @@
 				<Label id="YawStat" class="cgaz-stats cgaz-stats__yaw" />
 			</Panel>
 		</ConVarEnabler>
-		<Panel id="CompassTicks" class="cgaz__container">
-			<Panel id="FullTick" class="cgaz-tick cgaz-tick__full" />
-			<Panel id="HalfTick" class="cgaz-tick cgaz-tick__half" />
-		</Panel>
+		<Panel id="CompassTicks" class="cgaz-tick__container" />
 		<Panel id="WindicatorArrow">
 			<ConVarEnabler class="full-height" convar="mom_df_hud_windicator_enable" togglevisibility="true">
 				<Image id="WindicatorArrowIcon" class="arrow__down" src="file://{images}/hud/cgaz-arrow.svg" textureheight="48" />

diff --git a/scripts/hud/cgaz.js b/scripts/hud/cgaz.js
@@ -102,8 +102,6 @@ class Cgaz {
 	static compassArrow = $('#CompassArrow');
 	static compassArrowIcon = $('#CompassArrowIcon');
 	static tickContainer = $('#CompassTicks');
-	static compassTickFull = initZonePanel($('#FullTick'));
-	static compassTickHalf = initZonePanel($('#HalfTick'));
 	static pitchLineContainer = $('#PitchLines');
 	static pitchStat = $('#PitchStat');
 	static yawStat = $('#YawStat');
@@ -322,11 +320,20 @@ class Cgaz {
 			}
 		}
 
-		const size = this.NaNCheck(this.compassTickSize, 0);
-		const offset = this.compassOffset - 0.5 * this.compassTickSize;
-		this.setupContainer(this.tickContainer, offset);
-		this.compassTickFull.style.height = size + 'px';
-		this.compassTickHalf.style.height = size * 0.5 + 'px';
+		this.tickContainer.style.height = this.compassTickSize + 'px';
+		this.tickContainer.style.transform = `translatey( ${this.compassOffset - 0.5 * this.compassTickSize}px )`;
+
+		const compassTicks = this.tickContainer?.Children();
+		if (compassTicks?.length < 4) {
+			// only up to 180 degrees are ever shown, so  only 4 ticks are
+			// needed to represent all potentially visible 45-degree marks
+			for (let i = compassTicks?.length; i < 4; ++i) {
+				const newTick = $.CreatePanel('Panel', this.tickContainer, `CompassTick${i}`, {
+					class: 'cgaz-tick'
+				});
+				newTick.AddClass(i % 2 ? 'cgaz-tick__half' : 'cgaz-tick__full');
+			}
+		}
 
 		const width = 2 * this.compassArrowSize;
 		const height = 2 * width;
@@ -655,27 +662,19 @@ class Cgaz {
 		let velocityAngle = this.remapAngle(viewAngle - velAngle);
 		// compass
 		if (this.compassMode) {
+			const ticks = this.tickContainer.Children();
+
 			const bShouldHighlight =
 				Math.abs(this.remapAngle(8 * velAngle) * 0.125) < 0.01 && speed >= this.accelMinSpeed;
 			const color = bShouldHighlight ? this.compassHlColor : this.compassColor;
 
 			// ticks
-			this.compassTickFull.leftAngle = this.findCompassTick(viewAngle);
-			this.compassTickFull.rightAngle = this.compassTickFull.leftAngle + this.halfPi;
-			this.compassTickHalf.leftAngle = this.findCompassTick(viewAngle - 0.5 * this.halfPi);
-			this.compassTickHalf.rightAngle = this.compassTickHalf.leftAngle + this.halfPi;
-
-			// -1/+1 balances the 2px border across the compass tick
-			this.compassTickFull.leftPx = this.mapToScreenWidth(this.compassTickFull.leftAngle) - 1;
-			this.compassTickFull.rightPx = this.mapToScreenWidth(this.compassTickFull.rightAngle) + 1;
-			this.compassTickHalf.leftPx = this.mapToScreenWidth(this.compassTickHalf.leftAngle) - 1;
-			this.compassTickHalf.rightPx = this.mapToScreenWidth(this.compassTickHalf.rightAngle) + 1;
-
-			this.drawZone(this.compassTickFull);
-			this.drawZone(this.compassTickHalf);
-
-			this.compassTickFull.style.borderColor = color;
-			this.compassTickHalf.style.borderColor = color;
+			for (const [i, tick] of ticks.entries()) {
+				const tickAngle = this.NaNCheck(this.wrapToHalfPi(viewAngle + i * 0.25 * Math.PI), 0);
+				const tickPx = this.NaNCheck(this.mapToScreenWidth(tickAngle), 0);
+				tick.style.position = `${tickPx}px 0px 0px`;
+				tick.style.backgroundColor = color;
+			}
 
 			// arrow
 			if (Math.abs(velocityAngle) < this.hFov) {
@@ -710,7 +709,7 @@ class Cgaz {
 		if (this.compassStatMode) {
 			this.yawStat.text = MomentumPlayerAPI.GetAngles().y.toFixed(0);
 			this.yawStat.style.color =
-				Math.abs(this.distToNearestTick(velAngle)) < 0.01 && speed >= this.accelMinSpeed
+				Math.abs(this.remapAngle(8 * velAngle) * 0.125) < 0.01 && speed >= this.accelMinSpeed
 					? this.compassHlColor
 					: this.compassColor;
 
@@ -1165,16 +1164,6 @@ class Cgaz {
 		pasteZone.rightPx = copyZone.rightPx;
 	}
 
-	static findCompassTick(angle) {
-		while (angle > 0) {
-			angle -= this.halfPi;
-		}
-		while (angle <= -this.hFov) {
-			angle += this.halfPi;
-		}
-		return angle;
-	}
-
 	static setupContainer(container, offset) {
 		container.style.verticalAlign = 'middle';
 		container.style.transform = `translatey( ${this.NaNCheck(-offset, 0)}px )`;
@@ -1316,13 +1305,6 @@ class Cgaz {
 		};
 	}
 
-	static distToNearestTick(angle) {
-		angle += Math.PI * 0.125;
-		const integer = Math.trunc((angle * 4) / Math.PI);
-		angle -= integer * 0.25 * Math.PI;
-		return angle < 0 ? angle + 0.125 * Math.PI : angle - 0.125 * Math.PI;
-	}
-
 	static getColorStringFromArray(color) {
 		return `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3] / 255})`;
 	}

diff --git a/styles/hud/cgaz.scss b/styles/hud/cgaz.scss
@@ -34,19 +34,22 @@
 }
 
 .cgaz-tick {
-	border-left: 2px solid black;
-	border-right: 2px solid black;
-	//margin-left set in js for positioning
-	margin-right: -1px;
+	width: 2px;
+	transform: translatex(-1px);
 	vertical-align: top;
-	overflow: noclip noclip;
 
 	&__full {
-		height: 6px;
+		height: 100%;
 	}
 
 	&__half {
-		height: 3px;
+		height: 50%;
+	}
+
+	&__container {
+		//height set in js
+		width: 100%;
+		vertical-align: center;
 	}
 }