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-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,43 @@
+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 {
+		RegisterHUDPanelForGamemode({
+			gamemodes: [GameMode.DEFRAG],
+			context: this,
+			contextPanel: $.GetContextPanel(),
+			handledEvents: [{ event: 'HudProcessInput', contextPanel: $.GetContextPanel(), callback: this.onUpdate }]
+		});
+	}
+}

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');

scripts/util/register-for-gamemodes.ts

@@ -0,0 +1,167 @@
+/**
+ * Pass an event that should be only registered when playing certain gamemodes.
+ *
+ * This function will register/unregister the provided events handler when gamemodes change.
+ *
+ * It returns a function that will clean up both event handlers. It's unlikely we'll ever need to use it,
+ * so usually you can just discard it.
+ *
+ * @example
+ * ```ts
+ * // In the static initializer block for some panel's class, call the onUpdate function on this class
+ * // whenever the 'HudProcessInput' event is fired, ONLY if the current gamemode is Gamemode.DEFRAG.
+ * 	static {
+ * 		RegisterEventForGamemodes(
+ * 			[GameMode.DEFRAG],
+ * 			'HudProcessInput',
+ * 			$.GetContextPanel(),
+ * 			this.onUpdate.bind(this)
+ * 		);
+ * 	}
+ * ```
+ * @param gamemodes - Gamemodes to register the callback for. Handler is unregistered for any other modes.
+ * @param event - Event name
+ * @param context - Panel context
+ * @param callbackFn - Event callback
+ * @returns Cleanup function that unregisters both event handlers
+ */
+function RegisterEventForGamemodes(
+	gamemodes: number[],
+	event: string,
+	context: string | Panel,
+	callbackFn: (...args: unknown[]) => void
+): () => void {
+	let innerHandle: number | undefined;
+	const outerHandle = $.RegisterForUnhandledEvent('LevelInitPostEntity', () => {
+		// @ts-expect-error - TODO: Typings for this API
+		if (!innerHandle && gamemodes.includes(GameModeAPI.GetCurrentGameMode())) {
+			innerHandle = $.RegisterEventHandler(event, context, callbackFn);
+		} else if (innerHandle) {
+			$.UnregisterEventHandler(event, context, innerHandle);
+			innerHandle = undefined;
+		}
+	});
+
+	return () => {
+		if (innerHandle) {
+			$.UnregisterEventHandler(event, context, innerHandle);
+		}
+
+		$.UnregisterForUnhandledEvent('LevelInitPostEntity', outerHandle);
+	};
+}
+
+interface RegisterHUDPanelForGamemodeOptions {
+	context: object;
+	contextPanel: Panel;
+	gamemodes: number[];
+	onLoad?: Func;
+	handledEvents?: Array<{ event: string; callback: Func; contextPanel: Panel }>;
+	unhandledEvents?: Array<{ event: string; callback: Func }>;
+}
+
+/**
+ * Mark a panel as being only active in the given gamemodes.
+ *
+ * The panel will be set to `visible=true` in the given modes, and `false` in all others.
+ *
+ * Any events provided will be registered at `LevelInitPostEntity` when the given a map is launched in the provided
+ * modes, and unregistered in any other modes.
+ *
+ * An optional `onLoad` function will be called whenever a launched in the provided modes.
+ *
+ * You must provide the current JS context with `context`, and don't need to use `.bind(this)` on any functions you pass.
+ *
+ * @example
+ * // Simplest usage, only visible in SURF.
+ * class MyEpicSurfPanel {
+ *   static {
+ *     RegisterHUDPanelForGamemode({
+ *       gamemodes: [Gamemode.SURF],
+ *       context: this,
+ *       contextPanel: $.GetContextPanel()
+ *     })
+ *   }
+ * }
+ *
+ * // More advanced example.
+ * class MyFuckedUpBhopPanel {
+ *   static {
+ *     RegisterHUDPanelForGamemode({
+ *        gamemodes: [Gamemode.BHOP],
+ *        context: this,
+ *        contextPanel: $.GetContextPanel(),
+ *        onLoad: this.setup,
+ *        handledEvents: [{
+ *          event: 'HudProcessInput',
+ *          callback: this.onUpdate,
+ *          contextPanel: $.GetContextPanel()
+ *        }]
+ *     })
+ *   }
+ *
+ *   static setup() {
+ *     // ...
+ *   }
+ *
+ *   static onUpdate() {
+ *     // ...
+ *   }
+ * }
+ *
+ * @returns Cleanup function that unregisters all event handlers
+ */
+function RegisterHUDPanelForGamemode({
+	context,
+	contextPanel,
+	onLoad,
+	gamemodes,
+	handledEvents,
+	unhandledEvents
+}: RegisterHUDPanelForGamemodeOptions): () => void {
+	if (!(gamemodes?.length > 0)) {
+		throw new Error('RegisterHUDPanelForGamemode: no gamemode provided');
+	}
+
+	let handles: Array<{ event: string; handle: number; contextPanel?: Panel }>;
+
+	const unregister = () =>
+		(handles ?? []).forEach(({ event, handle, contextPanel }) =>
+			contextPanel === undefined
+				? $.UnregisterForUnhandledEvent(event, handle)
+				: $.UnregisterEventHandler(event, contextPanel, handle)
+		);
+
+	const handle = $.RegisterForUnhandledEvent('LevelInitPostEntity', () => {
+		unregister();
+		handles = [];
+
+		// @ts-expect-error - TODO: Typings for this API
+		if (gamemodes.includes(GameModeAPI.GetCurrentGameMode())) {
+			contextPanel.enabled = true;
+			onLoad?.call(context);
+
+			for (const { event, callback } of unhandledEvents ?? []) {
+				handles.push({
+					event,
+					handle: $.RegisterForUnhandledEvent(event, callback.bind(context))
+				});
+			}
+
+			for (const { event, contextPanel, callback } of handledEvents ?? []) {
+				handles.push({
+					event,
+					contextPanel,
+					handle: $.RegisterEventHandler(event, contextPanel, callback.bind(context))
+				});
+			}
+		} else {
+			contextPanel.enabled = false;
+		}
+	});
+
+	return () => {
+		unregister();
+		$.UnregisterForUnhandledEvent('LevelInitPostEntity', handle);
+	};
+}

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;
+		}
+	}
+}