feat: added timers for defrag powerups

layout/hud/hud.xml

@@ -44,6 +44,7 @@
 
 		<!-- Anchored to the bottom-left corner of the screen, laid out from top to bottom -->
 		<Panel id="HudLowerLeft" hittest="false" hittestchildren="true">
+			<MomHudPowerupTimer />
 			<HudStaticMenu />
 			<MomHudChat />
 		</Panel>

layout/hud/powerup-timer.xml

@@ -0,0 +1,25 @@
+<root>
+	<styles>
+		<include src="file://{resources}/styles/main.scss" />
+	</styles>
+	<scripts>
+		<include src="file://{scripts}/common/gamemodes.js" />
+		<include src="file://{scripts}/util/register-event-for-gamemodes.js" />
+		<include src="file://{scripts}/hud/powerup-timer.js" />
+	</scripts>
+
+	<MomHudPowerupTimer class="powerup-timer">
+		<Panel id="HasteTimer" class="powerup-timer__item">
+			<Image id="HasteIcon" class="powerup-timer__icon powerup-timer__icon--haste" src="file://{images}/hud/haste.svg" textureheight="72"/>
+			<Label id="HasteLabel" class="powerup-timer__label" text="" />
+		</Panel>
+		<Panel id="DamageBoostTimer" class="powerup-timer__item">
+			<Image id="DamageBoostIcon" class="powerup-timer__icon powerup-timer__icon--damageboost" src="file://{images}/hud/damageboost.svg" textureheight="72"/>
+			<Label id="DamageBoostLabel" class="powerup-timer__label" text="" />
+		</Panel>
+		<Panel id="SlickTimer" class="powerup-timer__item">
+			<Image id="SlickIcon" class="powerup-timer__icon" src="file://{images}/logo.svg" textureheight="72"/>
+			<Label id="SlickLabel" class="powerup-timer__label" text="" />
+		</Panel>
+	</MomHudPowerupTimer>
+</root>

scripts/hud/powerup-timer.ts

@@ -0,0 +1,38 @@
+class PowerupTimer {
+	static panels = {
+		damageBoost: {
+			panel: $('#DamageBoostTimer')!,
+			label: $<Label>('#DamageBoostLabel')!
+		},
+		haste: {
+			panel: $('#HasteTimer')!,
+			label: $<Label>('#HasteLabel')!
+		},
+		slick: {
+			panel: $('#SlickTimer')!,
+			label: $<Label>('#SlickLabel')!
+		}
+	};
+
+	static onUpdate() {
+		// @ts-expect-error - TODO: Types for this API!
+		const { damageBoostTime, hasteTime, slickTime } = MomentumMovementAPI.GetLastMoveData();
+
+		this.updatePanel(this.panels.damageBoost, damageBoostTime);
+		this.updatePanel(this.panels.haste, hasteTime);
+		this.updatePanel(this.panels.slick, slickTime);
+	}
+
+	static updatePanel({ panel, label }: { panel: Panel; label: Label }, time: number) {
+		if (!time) {
+			panel.visible = false;
+		} else {
+			panel.visible = true;
+			label.text = time < 0 ? '∞' : Math.ceil(time / 1000).toString();
+		}
+	}
+
+	static {
+		RegisterEventForGamemodes([GameMode.DEFRAG], 'HudProcessInput', $.GetContextPanel(), this.onUpdate.bind(this));
+	}
+}

scripts/util/panel-registration.js

@@ -17,6 +17,7 @@ UiToolkitAPI.RegisterHUDPanel2d('MomHudDFJump', 'file://{resources}/layout/hud/d
 UiToolkitAPI.RegisterHUDPanel2d('MomHudJumpStats', 'file://{resources}/layout/hud/jump-stats.xml');
 UiToolkitAPI.RegisterHUDPanel2d('MomHudSpecInfo', 'file://{resources}/layout/hud/spec-info.xml');
 UiToolkitAPI.RegisterHUDPanel2d('MomHudSynchronizer', 'file://{resources}/layout/hud/synchronizer.xml');
+UiToolkitAPI.RegisterHUDPanel2d('MomHudPowerupTimer', 'file://{resources}/layout/hud/powerup-timer.xml');
 
 UiToolkitAPI.RegisterPanel2d('ToastManager', 'file://{resources}/layout/util/toast-manager.xml');
 UiToolkitAPI.RegisterPanel2d('ToastGeneric', 'file://{resources}/layout/modals/toasts/generic.xml');

styles/hud/_index.scss

@@ -18,6 +18,7 @@
 @use 'jump-stats';
 @use 'key-press';
 @use 'map-info';
+@use 'powerup-timer';
 @use 'replay-controls';
 @use 'show-pos';
 @use 'spec-info';

styles/hud/powerup-timer.scss

@@ -0,0 +1,35 @@
+@use '../config' as *;
+@use '../abstract/mixin';
+
+.powerup-timer {
+	margin: 10px;
+	flow-children: down;
+	padding-left: 16px;
+
+	&__item {
+		flow-children: right;
+	}
+
+	&__label {
+		@include mixin.font-styles($use-header: true);
+		font-size: 64px;
+		padding-left: 16px;
+		horizontal-align: left;
+		vertical-align: center;
+		color: $white;
+	}
+
+	&__icon {
+		vertical-align: center;
+		height: 48px;
+		width: 48px;
+
+		&--haste {
+			wash-color: $orange;
+		}
+
+		&--damageboost {
+			wash-color: $light-blue;
+		}
+	}
+}