From 167bee51c8f919cd045af1992218d2a110d867de Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Mon, 14 Oct 2024 04:15:47 +0100
Subject: [PATCH 01/19] refactor: shorten name of utility classes

I miss Tailwind
---
 layout/components/graphs/line-graph.xml       |  2 +-
 layout/components/settings/slider.xml         |  2 +-
 layout/components/settings/toggle.xml         |  2 +-
 layout/hud/ammo.xml                           |  2 +-
 layout/hud/cgaz.xml                           | 12 +++----
 layout/hud/chat.xml                           |  2 +-
 layout/hud/comparisons.xml                    |  2 +-
 layout/hud/conc-cook-time.xml                 |  6 ++--
 layout/hud/conc-entities.xml                  |  6 ++--
 layout/hud/ghost-entities.xml                 |  6 ++--
 layout/hud/ground-boost.xml                   |  2 +-
 layout/hud/hud.xml                            |  2 +-
 layout/hud/map-info.xml                       | 22 ++++++------
 layout/hud/replay-controls.xml                | 14 ++++----
 layout/hud/spec-info.xml                      |  8 ++---
 layout/hud/spectate.xml                       | 12 +++----
 layout/hud/speedometer.xml                    |  4 +--
 layout/hud/status.xml                         |  2 +-
 layout/hud/sticky-charge.xml                  |  8 ++---
 layout/hud/sticky-count.xml                   |  4 +--
 layout/hud/strafe-sync.xml                    |  4 +--
 layout/hud/tab-menu.xml                       |  2 +-
 layout/hud/timer.xml                          |  2 +-
 layout/hud/version-info.xml                   |  2 +-
 layout/hud/weapon-selection.xml               |  4 +--
 .../popups/dont-show-again-settings.xml       | 12 +++----
 .../modals/popups/import-export-settings.xml  | 30 ++++++++--------
 layout/modals/popups/lobby-create.xml         |  6 ++--
 layout/modals/popups/lobby-settings.xml       |  8 ++---
 layout/modals/popups/playtest-welcome.xml     | 10 +++---
 .../popups/range-color-profile-name.xml       |  8 ++---
 layout/modals/popups/speedometer-select.xml   | 12 +++----
 .../modals/toasts/custom-layout-example.xml   |  2 +-
 layout/pages/console.xml                      |  8 ++---
 layout/pages/controls-library.xml             | 12 +++----
 layout/pages/drawer/lobby.xml                 |  2 +-
 layout/pages/drawer/profile.xml               |  2 +-
 layout/pages/end-of-run/end-of-run.xml        |  6 ++--
 layout/pages/leaderboards/leaderboards.xml    | 12 +++----
 layout/pages/learn.xml                        |  4 +--
 layout/pages/main-menu/main-menu.xml          |  8 ++---
 layout/pages/main-menu/news.xml               |  2 +-
 layout/pages/map-selector/map-entry.xml       |  2 +-
 layout/pages/map-selector/map-selector.xml    | 24 ++++++-------
 layout/pages/settings/audio.xml               |  2 +-
 layout/pages/settings/gameplay.xml            | 18 +++++-----
 layout/pages/settings/input.xml               |  2 +-
 layout/pages/settings/interface.xml           | 34 +++++++++----------
 layout/pages/settings/online.xml              |  8 ++---
 layout/pages/settings/settings.xml            |  2 +-
 layout/pages/settings/video.xml               |  2 +-
 layout/pages/zoning/zoning.xml                | 12 +++----
 layout/util/toast-manager.xml                 |  2 +-
 scripts/hud/synchronizer.ts                   |  4 +--
 styles/core/utility.scss                      | 30 ++++++++--------
 55 files changed, 210 insertions(+), 210 deletions(-)

diff --git a/layout/components/graphs/line-graph.xml b/layout/components/graphs/line-graph.xml
index ad8e38f9..6cfcc697 100644
--- a/layout/components/graphs/line-graph.xml
+++ b/layout/components/graphs/line-graph.xml
@@ -17,7 +17,7 @@
 	</snippets>
 
 	<Panel class="linegraph">
-		<Panel class="flow-right full-width fill-height">
+		<Panel class="flow-right w-full h-fill">
 			<Panel id="YMarkers" class="linegraph__y-markers" />
 			<Panel class="linegraph__main">
 				<Panel class="linegraph__axis-y-container">
diff --git a/layout/components/settings/slider.xml b/layout/components/settings/slider.xml
index 88d48455..d2587166 100644
--- a/layout/components/settings/slider.xml
+++ b/layout/components/settings/slider.xml
@@ -10,7 +10,7 @@
 		</Panel>
 		<Panel class="settings-slider__input-container">
 			<Slider class="slider slider--horizontal settings-slider__slider" showdefault="true" direction="horizontal" id="Slider" />
-			<TooltipPanel tooltip="#Settings_General_OutOfBounds" class="full-height">
+			<TooltipPanel tooltip="#Settings_General_OutOfBounds" class="h-full">
 				<Image class="settings-slider__outofbounds" src="file://{images}/alert-octagon.svg" texturewidth="32" />
 			</TooltipPanel>
 			<TextEntry class="textentry settings-slider__textentry" maxchars="6" textmode="numeric" id="Value" />
diff --git a/layout/components/settings/toggle.xml b/layout/components/settings/toggle.xml
index 45e39d19..04a62db6 100644
--- a/layout/components/settings/toggle.xml
+++ b/layout/components/settings/toggle.xml
@@ -6,7 +6,7 @@
 	<!-- Unused, doesn't have styling -->
 
 	<SettingsToggle>
-		<Panel class="flow-right vertical-align-center full-width">
+		<Panel class="flow-right v-align-center w-full">
 			<Panel id="TitleContainer">
 				<Label id="Title" />
 			</Panel>
diff --git a/layout/hud/ammo.xml b/layout/hud/ammo.xml
index 79c5881f..942b9c27 100644
--- a/layout/hud/ammo.xml
+++ b/layout/hud/ammo.xml
@@ -3,7 +3,7 @@
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
 
-	<MomHudAmmo class="full-width">
+	<MomHudAmmo class="w-full">
 		<Label class="ammo__label" text="{i:ammoCount}" />
 	</MomHudAmmo>
 </root>
diff --git a/layout/hud/cgaz.xml b/layout/hud/cgaz.xml
index 2992742b..772231a2 100644
--- a/layout/hud/cgaz.xml
+++ b/layout/hud/cgaz.xml
@@ -7,7 +7,7 @@
 		<include type="module" src="file://{scripts}/hud/cgaz.ts" />
 	</scripts>
 
-	<MomHudCgaz class="full-width full-height" alternateTicks="false">
+	<MomHudCgaz class="w-full h-full" alternateTicks="false">
 		<ConVarEnabler id="AccelContainer" class="cgaz__container" convar="mom_df_hud_accel_enable" togglevisibility="true">
 			<Panel id="LeftTurnZone" />
 			<Panel id="LeftFastZone" />
@@ -25,19 +25,19 @@
 		<ConVarEnabler id="SnapContainer" class="cgaz__container" convar="mom_df_hud_snap_enable" togglevisibility="true" />
 		<ConVarEnabler id="PrimeContainer" class="cgaz__container" convar="mom_df_hud_prime_enable" togglevisibility="true" />
 		<Panel id="PrimeArrow">
-			<ConVarEnabler class="full-height" convar="mom_df_hud_prime_arrow_enable" togglevisibility="true">
+			<ConVarEnabler class="h-full" convar="mom_df_hud_prime_arrow_enable" togglevisibility="true">
 				<Image id="PrimeArrowIcon" class="arrow__down" src="file://{images}/hud/cgaz-arrow.svg" textureheight="48" />
 			</ConVarEnabler>
 		</Panel>
 		<Panel id="CompassArrow">
-			<ConVarEnabler class="full-height" convar="mom_df_hud_compass_mode" togglevisibility="true">
+			<ConVarEnabler class="h-full" convar="mom_df_hud_compass_mode" togglevisibility="true">
 				<Image id="CompassArrowIcon" class="arrow__up" src="file://{images}/hud/cgaz-arrow.svg" textureheight="48" />
 			</ConVarEnabler>
 		</Panel>
-		<ConVarEnabler class="full-height" convar="mom_df_hud_pitch_enable" togglevisibility="true">
+		<ConVarEnabler class="h-full" convar="mom_df_hud_pitch_enable" togglevisibility="true">
 			<Panel id="PitchLines" class="cgaz-line__container" />
 		</ConVarEnabler>
-		<ConVarEnabler class="full-height" convar="mom_df_hud_compass_stat_mode" togglevisibility="true">
+		<ConVarEnabler class="h-full" convar="mom_df_hud_compass_stat_mode" togglevisibility="true">
 			<Panel id="StatsBox" class="cgaz-stats__container">
 				<Label id="PitchStat" class="cgaz-stats cgaz-stats__pitch" />
 				<Label id="YawStat" class="cgaz-stats cgaz-stats__yaw" />
@@ -45,7 +45,7 @@
 		</ConVarEnabler>
 		<Panel id="CompassTicks" class="cgaz-tick__container" />
 		<Panel id="WindicatorArrow">
-			<ConVarEnabler class="full-height" convar="mom_df_hud_windicator_enable" togglevisibility="true">
+			<ConVarEnabler class="h-full" convar="mom_df_hud_windicator_enable" togglevisibility="true">
 				<Image id="WindicatorArrowIcon" class="arrow__down" src="file://{images}/hud/cgaz-arrow.svg" textureheight="48" />
 			</ConVarEnabler>
 		</Panel>
diff --git a/layout/hud/chat.xml b/layout/hud/chat.xml
index 4905e95e..011720a7 100644
--- a/layout/hud/chat.xml
+++ b/layout/hud/chat.xml
@@ -17,7 +17,7 @@
 
 	</scripts>
 	<Panel class="hud-chat no-flow">
-		<MomentumChat id="RaisedChat" class="full-width full-height" />
+		<MomentumChat id="RaisedChat" class="w-full h-full" />
 		<ToastContainer id="LoweredChat" class="toast-chat" thinkwheninvisible="true" />
 	</Panel>
 </root>
diff --git a/layout/hud/comparisons.xml b/layout/hud/comparisons.xml
index aabee5f5..9d2695ac 100644
--- a/layout/hud/comparisons.xml
+++ b/layout/hud/comparisons.xml
@@ -8,7 +8,7 @@
 	</scripts>
 
 	<HudComparisons class="hud-comparisons">
-		<ConVarEnabler class="width-fit-children" convar="mom_hud_comparisons_enable" togglevisibility="true">
+		<ConVarEnabler class="w-fit-children" convar="mom_hud_comparisons_enable" togglevisibility="true">
 			<Panel id="Splits" class="hud-comparisons__splits">
 				<!-- Populated in JS -->
 			</Panel>
diff --git a/layout/hud/conc-cook-time.xml b/layout/hud/conc-cook-time.xml
index 61a599b8..b68ee91d 100644
--- a/layout/hud/conc-cook-time.xml
+++ b/layout/hud/conc-cook-time.xml
@@ -7,10 +7,10 @@
 		<include type="module" src="file://{scripts}/hud/conc-cook-time.ts" />
 	</scripts>
 
-	<MomHudConcCooktime class="horizontal-align-center">
+	<MomHudConcCooktime class="h-align-center">
 		<Panel id="ConcCooktimeContainer" class="conccook">
-			<ProgressBar id="ConcCookMeter" class="horizontal-align-center progressbar-hudmeter" />
-			<Label id="ConcCookTime" text="" class="horizontal-align-center vertical-align-center text-align-center progressbar-hudmeter__label" />
+			<ProgressBar id="ConcCookMeter" class="h-align-center progressbar-hudmeter" />
+			<Label id="ConcCookTime" text="" class="h-align-center v-align-center text-align-center progressbar-hudmeter__label" />
 		</Panel>
 	</MomHudConcCooktime>
 </root>
diff --git a/layout/hud/conc-entities.xml b/layout/hud/conc-entities.xml
index 99f77cc4..8488abd5 100644
--- a/layout/hud/conc-entities.xml
+++ b/layout/hud/conc-entities.xml
@@ -11,12 +11,12 @@
 		<snippet name="conc-ent-panel">
 			<Panel class="conc-ent">
 				<ProgressBar id="ConcTimeMeter" class="conc-ent__progressbar progressbar-hudmeter" />
-				<Label id="ConcTimeLabel" text="" class="horizontal-align-center vertical-align-center text-align-center conc-ent__label progressbar-hudmeter__label" />
+				<Label id="ConcTimeLabel" text="" class="h-align-center v-align-center text-align-center conc-ent__label progressbar-hudmeter__label" />
 			</Panel>
 		</snippet>
 	</snippets>
 
-	<MomHudConcEntities class="full-width full-height">
-		<Panel id="ConcEntPanelsContainer" class="full-width full-height" />
+	<MomHudConcEntities class="w-full h-full">
+		<Panel id="ConcEntPanelsContainer" class="w-full h-full" />
 	</MomHudConcEntities>
 </root>
diff --git a/layout/hud/ghost-entities.xml b/layout/hud/ghost-entities.xml
index eaeaa637..b9f1287e 100644
--- a/layout/hud/ghost-entities.xml
+++ b/layout/hud/ghost-entities.xml
@@ -12,14 +12,14 @@
 			<Panel class="ghost-ent">
 				<AvatarImage id="GhostAvatar" class="ghost-ent__avatar" />
 				<Panel id="NamePanel" class="ghost-ent__namepanel ghost-ent-namepanel">
-					<Image class="full-width full-height" src="file://{images}/playercards/card_bg.png" scaling="stretch-to-cover-preserve-aspect" />
+					<Image class="w-full h-full" src="file://{images}/playercards/card_bg.png" scaling="stretch-to-cover-preserve-aspect" />
 					<Label id="GhostName" class="ghost-ent-namepanel__label text-l" text="" />
 				</Panel>
 			</Panel>
 		</snippet>
 	</snippets>
 
-	<MomHudGhostEntities class="full-width full-height">
-		<Panel id="GhostEntPanelsContainer" class="full-width full-height" />
+	<MomHudGhostEntities class="w-full h-full">
+		<Panel id="GhostEntPanelsContainer" class="w-full h-full" />
 	</MomHudGhostEntities>
 </root>
diff --git a/layout/hud/ground-boost.xml b/layout/hud/ground-boost.xml
index 3179d824..c7bd4602 100644
--- a/layout/hud/ground-boost.xml
+++ b/layout/hud/ground-boost.xml
@@ -7,7 +7,7 @@
 		<include type="module" src="file://{scripts}/hud/ground-boost.ts" />
 	</scripts>
 
-	<MomHudGroundboost class="horizontal-align-center" alternateTicks="false">
+	<MomHudGroundboost class="h-align-center" alternateTicks="false">
 		<ConVarEnabler id="GroundboostContainer" class="groundboost__container groundboost__container--hide" convar="mom_df_hud_gb_enable" togglevisibility="true">
 			<Image id="GroundboostBackground" class="groundboost__background-meter" src="file://{images}/hud/meter-ring.svg" textureheight="100" />
 			<Image id="GroundboostMeter" class="groundboost__meter" src="file://{images}/hud/meter-ring.svg" textureheight="100" />
diff --git a/layout/hud/hud.xml b/layout/hud/hud.xml
index d7ae99a5..56d3b9a0 100644
--- a/layout/hud/hud.xml
+++ b/layout/hud/hud.xml
@@ -81,7 +81,7 @@
 		</Panel>
 
 		<!-- This container is here so we can move the leaderboard in and out of it during the end-of-match sequence -->
-		<Panel id="TabMenuContainer" class="full-width full-height" hittest="false" hittestchildren="true">
+		<Panel id="TabMenuContainer" class="w-full h-full" hittest="false" hittestchildren="true">
 			<HudTabMenu id="TabMenu" hittest="true" />
 		</Panel>
 
diff --git a/layout/hud/map-info.xml b/layout/hud/map-info.xml
index bb3c417c..e409d24d 100644
--- a/layout/hud/map-info.xml
+++ b/layout/hud/map-info.xml
@@ -8,34 +8,34 @@
 	</scripts>
 
 	<MomHudMapInfo class="hudmapinfo">
-		<ConVarEnabler class="flow-down full-width" convar="mom_hud_mapinfo_enable" togglevisibility="true">
+		<ConVarEnabler class="flow-down w-full" convar="mom_hud_mapinfo_enable" togglevisibility="true">
 
-			<ConVarEnabler class="full-width" convar="mom_hud_mapinfo_mapname_enable" togglevisibility="true">
-				<Label class="hudmapinfo__label horizontal-align-right" text="{s:mapname}" />
+			<ConVarEnabler class="w-full" convar="mom_hud_mapinfo_mapname_enable" togglevisibility="true">
+				<Label class="hudmapinfo__label h-align-right" text="{s:mapname}" />
 			</ConVarEnabler>
 
-			<Panel id="CachedInfoContainer" class="flow-down width-fit-children horizontal-align-right vertical-align-center">
+			<Panel id="CachedInfoContainer" class="flow-down w-fit-children h-align-right v-align-center">
 
-				<ConVarEnabler class="flow-right width-fit-children horizontal-align-right" convar="mom_hud_mapinfo_author_enable" togglevisibility="true">
+				<ConVarEnabler class="flow-right w-fit-children h-align-right" convar="mom_hud_mapinfo_author_enable" togglevisibility="true">
 					<Label class="hudmapinfo__label" text="#MapInfo_Author" />
 				</ConVarEnabler>
 
-				<Panel class="flow-left width-fit-children horizontal-align-right vertical-align-center">
-					<ConVarEnabler class="flow-right width-fit-children horizontal-align-right" convar="mom_hud_mapinfo_numzones_enable" togglevisibility="true">
-						<ConVarEnabler class="width-fit-children horizontal-align-right" convar="mom_hud_mapinfo_zonetype_enable" togglevisibility="true">
+				<Panel class="flow-left w-fit-children h-align-right v-align-center">
+					<ConVarEnabler class="flow-right w-fit-children h-align-right" convar="mom_hud_mapinfo_numzones_enable" togglevisibility="true">
+						<ConVarEnabler class="w-fit-children h-align-right" convar="mom_hud_mapinfo_zonetype_enable" togglevisibility="true">
 							<Label class="hudmapinfo__label" text=" " />
 						</ConVarEnabler>
 						<Label id="NumzonesLabel" class="hudmapinfo__label" text="#MapInfo_Zones" />
 					</ConVarEnabler>
 
-					<ConVarEnabler class="flow-right width-fit-children horizontal-align-right" convar="mom_hud_mapinfo_zonetype_enable" togglevisibility="true">
-						<ConVarEnabler class="width-fit-children horizontal-align-right" convar="mom_hud_mapinfo_tier_enable" togglevisibility="true">
+					<ConVarEnabler class="flow-right w-fit-children h-align-right" convar="mom_hud_mapinfo_zonetype_enable" togglevisibility="true">
+						<ConVarEnabler class="w-fit-children h-align-right" convar="mom_hud_mapinfo_tier_enable" togglevisibility="true">
 							<Label class="hudmapinfo__label" text=" - " />
 						</ConVarEnabler>
 						<Label id="ZonetypeLabel" class="hudmapinfo__label" text="{s:zonetype}" />
 					</ConVarEnabler>
 
-					<ConVarEnabler class="flow-right width-fit-children horizontal-align-right" convar="mom_hud_mapinfo_tier_enable" togglevisibility="true">
+					<ConVarEnabler class="flow-right w-fit-children h-align-right" convar="mom_hud_mapinfo_tier_enable" togglevisibility="true">
 						<Label id="TierLabel" class="hudmapinfo__label" text="#MapInfo_Tier" />
 					</ConVarEnabler>
 				</Panel>
diff --git a/layout/hud/replay-controls.xml b/layout/hud/replay-controls.xml
index 2492830d..356b9952 100644
--- a/layout/hud/replay-controls.xml
+++ b/layout/hud/replay-controls.xml
@@ -8,15 +8,15 @@
 	</scripts>
 
 	<MomHudReplayControls class="replaycontrols">
-		<Panel class="flow-right full-width pb-4">
+		<Panel class="flow-right w-full pb-4">
 			<Label class="text-h4" text="#Replay_Controls" />
-			<Button class="button button--blue horizontal-align-right ml-3" onactivate="ReplayControlsHandler.toggleHiddenState();">
+			<Button class="button button--blue h-align-right ml-3" onactivate="ReplayControlsHandler.toggleHiddenState();">
 				<Image class="button__icon" src="file://{images}/mom-arrow-down.svg" />
 			</Button>
 		</Panel>
-		<Panel class="flow-down full-width ">
-			<Panel class="flow-right full-width">
-				<Label class="vertical-align-bottom" text="Tick: {i:curr_tick}/{i:total_ticks}" />
+		<Panel class="flow-down w-full ">
+			<Panel class="flow-right w-full">
+				<Label class="v-align-bottom" text="Tick: {i:curr_tick}/{i:total_ticks}" />
 				<TextEntry class="textentry replaycontrols__gototick" id="ReplayControlsGotoTick" placeholder="Goto tick" oninputsubmit="ReplayControlsHandler.gotoTick()" clearaftersubmit="true" />
 			</Panel>
 			<Label text="Time: {g:time:curr_time}/{g:time:end_time}" />
@@ -52,8 +52,8 @@
 				<Image class="button__icon" src="file://{images}/skip-next.svg" textureheight="32" />
 			</Button>
 		</Panel>
-		<Panel class="full-width">
-			<Slider id="ReplayControlsTimeSlider" class="slider slider--horizontal full-width" direction="horizontal" />
+		<Panel class="w-full">
+			<Slider id="ReplayControlsTimeSlider" class="slider slider--horizontal w-full" direction="horizontal" />
 		</Panel>
 	</MomHudReplayControls>
 </root>
diff --git a/layout/hud/spec-info.xml b/layout/hud/spec-info.xml
index e786e8d1..49f8f9f6 100644
--- a/layout/hud/spec-info.xml
+++ b/layout/hud/spec-info.xml
@@ -15,13 +15,13 @@
 		</snippet>
 	</snippets>
 
-	<MomHudSpecInfo class="full-width flow-down">
+	<MomHudSpecInfo class="w-full flow-down">
 		<!-- So we can toggle visibility for the whole panel -->
 		<Panel id="SpecInfoContainer" class="hudspecinfo">
-			<ConVarEnabler class="flow-down width-fit-children horizontal-align-right vertical-align-center" convar="mom_hud_specinfo_enable" togglevisibility="true">
-				<Label id="NumSpecLabel" class="hudspecinfo__count horizontal-align-right" text="{d:numspec} Spectator(s)" />
+			<ConVarEnabler class="flow-down w-fit-children h-align-right v-align-center" convar="mom_hud_specinfo_enable" togglevisibility="true">
+				<Label id="NumSpecLabel" class="hudspecinfo__count h-align-right" text="{d:numspec} Spectator(s)" />
 				<!-- Filled with specinfo-list-entry snippets -->
-				<ConVarEnabler id="NamesContainer" class="flow-down width-fit-children horizontal-align-right" convar="mom_hud_specinfo_names_enable" togglevisibility="true" />
+				<ConVarEnabler id="NamesContainer" class="flow-down w-fit-children h-align-right" convar="mom_hud_specinfo_names_enable" togglevisibility="true" />
 			</ConVarEnabler>
 		</Panel>
 	</MomHudSpecInfo>
diff --git a/layout/hud/spectate.xml b/layout/hud/spectate.xml
index 5aed8fc7..035df3e5 100644
--- a/layout/hud/spectate.xml
+++ b/layout/hud/spectate.xml
@@ -7,27 +7,27 @@
 		<include type="module" src="file://{scripts}/hud/spectate.ts" />
 	</scripts>
 	
-	<MomHudSpectate class="full-width flow-down">
+	<MomHudSpectate class="w-full flow-down">
 		<Panel class="spectate">
 			<Panel class="spectate__status">
-				<Panel class="horizontal-align-left flow-right" id="IndicatorSpectating">
+				<Panel class="h-align-left flow-right" id="IndicatorSpectating">
 					<Image src="file://{images}/spectatingIcon.svg" textureheight="64" scaling="stretch-to-cover-preserve-aspect" />
 					<Label class="text-h4" text="#Spectate_Status_Spectating" />
 				</Panel>
-				<Panel class="horizontal-align-left flow-right" id="IndicatorWatchingReplay">
+				<Panel class="h-align-left flow-right" id="IndicatorWatchingReplay">
 					<Image src="file://{images}/replay-open.svg" textureheight="64" scaling="stretch-to-cover-preserve-aspect" />
 					<Label class="text-h4" text="#Spectate_Status_WatchingReplay" />
 				</Panel>
 			</Panel>
 			<Panel class="spectate__playerinfo">
-				<Panel class="horizontal-align-center">
+				<Panel class="h-align-center">
 					<Label class="text-h4" text="{s:spec_target}" id="TargetName" />
 				</Panel>
 				<!-- TODO: Put playercard here somehow -->
 			</Panel>
 			<Panel class="spectate__interface">
-				<Panel class="flow-right horizontal-align-right">
-					<Label class="text-h6 vertical-align-center" text="Press CTRL to toggle mouse input!" />
+				<Panel class="flow-right h-align-right">
+					<Label class="text-h6 v-align-center" text="Press CTRL to toggle mouse input!" />
 					<Button class="button ml-3" onactivate="GameInterfaceAPI.ConsoleCommand('spec_mode');">
 						<Label class="button__text" text="{s:next_spec_mode}" />
 					</Button>
diff --git a/layout/hud/speedometer.xml b/layout/hud/speedometer.xml
index 925d8cc6..10cb5b8a 100644
--- a/layout/hud/speedometer.xml
+++ b/layout/hud/speedometer.xml
@@ -9,7 +9,7 @@
 
 	<snippets>
 		<snippet name="speedometer-entry">
-			<Panel class="vertical-align-center horizontal-align-center">
+			<Panel class="v-align-center h-align-center">
 				<Panel id="SpeedometerContainer" class="speedometer">
 					<Label id="SpeedometerLabel" text="" class="text-align-center" />
 					<Label id="SpeedometerComparisonLabel" text="" />
@@ -18,7 +18,7 @@
 		</snippet>
 	</snippets>
 
-	<MomHudSpeedometer class="horizontal-align-center">
+	<MomHudSpeedometer class="h-align-center">
 		<Panel id="SpeedometersContainer" class="speedometers">
 		</Panel>
 	</MomHudSpeedometer>
diff --git a/layout/hud/status.xml b/layout/hud/status.xml
index 30770a0f..bbd8d353 100644
--- a/layout/hud/status.xml
+++ b/layout/hud/status.xml
@@ -7,7 +7,7 @@
 		<include type="module" src="file://{scripts}/hud/status.ts" />
 	</scripts>
 
-	<MomHudStatus class="full-width">
+	<MomHudStatus class="w-full">
 		<ConVarEnabler class="hudstatus" convar="mom_hud_status_enable" togglevisibility="true">
 			<Label id="HudStatusLabel" class="hudstatus__label" text="#HudStatus_Spawn" />
 		</ConVarEnabler>
diff --git a/layout/hud/sticky-charge.xml b/layout/hud/sticky-charge.xml
index 7f367763..995d8ef6 100644
--- a/layout/hud/sticky-charge.xml
+++ b/layout/hud/sticky-charge.xml
@@ -7,10 +7,10 @@
 		<include type="module" src="file://{scripts}/hud/sticky-charge.ts" />
 	</scripts>
 
-	<MomHudStickyCharge class="horizontal-align-center">
-		<Panel id="StickyChargeContainer" class="stickycharge horizontal-align-center">
-			<ProgressBar id="StickyChargeMeter" class="horizontal-align-center progressbar-hudmeter" />
-			<Label id="StickyChargeSpeed" text="" class="horizontal-align-center vertical-align-center text-align-center progressbar-hudmeter__label" />
+	<MomHudStickyCharge class="h-align-center">
+		<Panel id="StickyChargeContainer" class="stickycharge h-align-center">
+			<ProgressBar id="StickyChargeMeter" class="h-align-center progressbar-hudmeter" />
+			<Label id="StickyChargeSpeed" text="" class="h-align-center v-align-center text-align-center progressbar-hudmeter__label" />
 		</Panel>
 	</MomHudStickyCharge>
 </root>
diff --git a/layout/hud/sticky-count.xml b/layout/hud/sticky-count.xml
index ca8526b9..a33b44c9 100644
--- a/layout/hud/sticky-count.xml
+++ b/layout/hud/sticky-count.xml
@@ -7,7 +7,7 @@
 		<include type="module" src="file://{scripts}/hud/sticky-count.ts" />
 	</scripts>
 
-	<MomHudStickyCharge class="horizontal-align-center">
-		<Panel id="StickyCountContainer" class="sticky-count horizontal-align-center flow-right" />
+	<MomHudStickyCharge class="h-align-center">
+		<Panel id="StickyCountContainer" class="sticky-count h-align-center flow-right" />
 	</MomHudStickyCharge>
 </root>
diff --git a/layout/hud/strafe-sync.xml b/layout/hud/strafe-sync.xml
index 1b4e440a..40760ced 100644
--- a/layout/hud/strafe-sync.xml
+++ b/layout/hud/strafe-sync.xml
@@ -8,9 +8,9 @@
 	</scripts>
 	
 	<Panel class="strafesync">
-		<Label text="{s:sync_value}" id="SyncLabel" class="horizontal-align-center vertical-align-center text-align-center progressbar-hudmeter__label" />
+		<Label text="{s:sync_value}" id="SyncLabel" class="h-align-center v-align-center text-align-center progressbar-hudmeter__label" />
 		<ConVarEnabler class="strafesync__bar-wrapper" convar="mom_hud_strafesync_drawbar" togglevisibility="true">
-			<ProgressBar id="SyncProgressBar" min="0" max="100" class="horizontal-align-center progressbar-hudmeter" />
+			<ProgressBar id="SyncProgressBar" min="0" max="100" class="h-align-center progressbar-hudmeter" />
 		</ConVarEnabler>
 	</Panel>
 </root>
diff --git a/layout/hud/tab-menu.xml b/layout/hud/tab-menu.xml
index d931990d..70046821 100644
--- a/layout/hud/tab-menu.xml
+++ b/layout/hud/tab-menu.xml
@@ -54,7 +54,7 @@
 			</Panel>
 			
 			<Panel class="hud-tab-menu__enable-cursor">
-				<ToggleButton id="ZoningToggle" class="button horizontal-align-left hud-tab-menu__zoning-button" convar="mom_zone_edit" />
+				<ToggleButton id="ZoningToggle" class="button h-align-left hud-tab-menu__zoning-button" convar="mom_zone_edit" />
 				<Label class="hud-tab-menu__enable-cursor-tip" text="#HudTabMenu_EnableCursorTip"/> 
 			</Panel>
 		</Panel>
diff --git a/layout/hud/timer.xml b/layout/hud/timer.xml
index b8003a3f..3c02f6bb 100644
--- a/layout/hud/timer.xml
+++ b/layout/hud/timer.xml
@@ -7,7 +7,7 @@
 		<include type="module" src="file://{scripts}/hud/timer.ts" />
 	</scripts>
 
-	<MomHudTimer class="full-width">
+	<MomHudTimer class="w-full">
 		<ConVarEnabler class="hudtimer" convar="mom_hud_timer_enable" togglevisibility="true">
 			<Label id="HudTimerTime" class="hudtimer__time hudtimer__time--inactive" text="{g:time:runtime}" />
 			<Label id="HudTimerComparison" class="hudtimer__comparison hudtimer__comparison--fadeout" text="{s:diffSymbol}{g:time:runtimediff}" visible="false" />
diff --git a/layout/hud/version-info.xml b/layout/hud/version-info.xml
index 5cd37420..1ef163ef 100644
--- a/layout/hud/version-info.xml
+++ b/layout/hud/version-info.xml
@@ -5,6 +5,6 @@
 
 	<MomHudVersionInfo class="hud-version-info">
 		<!-- This label's text is set in C++ code -->
-		<Label id="VersionLabel" class="text-h6 horizontal-align-right text-align-right" />
+		<Label id="VersionLabel" class="text-h6 h-align-right text-align-right" />
 	</MomHudVersionInfo>
 </root>
diff --git a/layout/hud/weapon-selection.xml b/layout/hud/weapon-selection.xml
index cc660a90..461925cf 100644
--- a/layout/hud/weapon-selection.xml
+++ b/layout/hud/weapon-selection.xml
@@ -11,7 +11,7 @@
 		<snippet name="Weapon">
 			<Panel class="weaponselection__wrapper">
 				<Panel class="weaponselection__notch" />
-				<ConVarEnabler class="width-fit-children height-fit-children vertical-align-center" convar="mom_hud_weaponselection_keybind_enable" togglevisibility="true">
+				<ConVarEnabler class="w-fit-children h-fit-children v-align-center" convar="mom_hud_weaponselection_keybind_enable" togglevisibility="true">
 					<Label id="WeaponKeyBind" class="weaponselection__keybind" text="" />
 				</ConVarEnabler>
 				<Label class="weaponselection__weplabel" text="{s:weapon}" />
@@ -19,7 +19,7 @@
 		</snippet>
 	</snippets>
 
-	<MomHudWeaponSelection class="full-width">
+	<MomHudWeaponSelection class="w-full">
 		<ConVarEnabler id="WeaponSelection" class="weaponselection" convar="mom_hud_weaponselection_enable" togglevisibility="true">
 		</ConVarEnabler>
 	</MomHudWeaponSelection>
diff --git a/layout/modals/popups/dont-show-again-settings.xml b/layout/modals/popups/dont-show-again-settings.xml
index 1c5a3d51..38dc43a6 100644
--- a/layout/modals/popups/dont-show-again-settings.xml
+++ b/layout/modals/popups/dont-show-again-settings.xml
@@ -9,9 +9,9 @@
 
 	<snippets>
 		<snippet name="dosa-item">
-			<Panel class="flow-right py-2 full-width">
-				<Label class="vertical-align-center" text="{s:name}" />
-				<Button id="ResetButton" class="horizontal-align-right button button--blue">
+			<Panel class="flow-right py-2 w-full">
+				<Label class="v-align-center" text="{s:name}" />
+				<Button id="ResetButton" class="h-align-right button button--blue">
 					<Label class="button__text" text="#Settings_General_Reset" />
 				</Button>
 			</Panel>
@@ -19,12 +19,12 @@
 	</snippets>
 
 	<PopupCustomLayout class="PopupPanel Hidden" popupbackground="dim">
-		<Panel class="flow-down horizontal-align-center">
+		<Panel class="flow-down h-align-center">
 			<Label class="text-h3 mb-3 text-align-center" text="#Settings_Dosa_Title" />
 			<Label class="text-xs text-italic" text="#Settings_Dosa_Info" />
 			<!-- Inserted by JS -->
-			<Panel id="Dosas" class="flow-down full-width mb-2" />
-			<Button class="button button--red horizontal-align-right" onactivate="UiToolkitAPI.CloseAllVisiblePopups()">
+			<Panel id="Dosas" class="flow-down w-full mb-2" />
+			<Button class="button button--red h-align-right" onactivate="UiToolkitAPI.CloseAllVisiblePopups()">
 				<Label class="button__text" text="#Common_Close" />
 			</Button>
 		</Panel>
diff --git a/layout/modals/popups/import-export-settings.xml b/layout/modals/popups/import-export-settings.xml
index 2edea35b..d4d43ad6 100644
--- a/layout/modals/popups/import-export-settings.xml
+++ b/layout/modals/popups/import-export-settings.xml
@@ -8,38 +8,38 @@
 	</scripts>
 
 	<PopupCustomLayout class="PopupPanel Hidden generic-popup importexport" popupbackground="blur">
-		<Panel class="flow-down full-width">
-			<Panel class="flow-down horizontal-align-center full-width">
-				<Label class="text-h1 mb-3 full-width text-align-center" text="{s:title}" />
-				<Panel class="flow-right horizontal-align-right mb-3">
-					<Label id="Base64ModeWarning" class="text-xs text-italic vertical-align-center mr-3" text="#Settings_ImportExport_B64Warning" />
+		<Panel class="flow-down w-full">
+			<Panel class="flow-down h-align-center w-full">
+				<Label class="text-h1 mb-3 w-full text-align-center" text="{s:title}" />
+				<Panel class="flow-right h-align-right mb-3">
+					<Label id="Base64ModeWarning" class="text-xs text-italic v-align-center mr-3" text="#Settings_ImportExport_B64Warning" />
 					<ToggleButton id="Base64ModeButton" class="checkbox checkbox--right" onactivate="ImportExportSettingsHandler.toggleBase64Mode()">
 						<Label text="#Settings_ImportExport_B64Mode" />
 					</ToggleButton>
 				</Panel>
 			</Panel>
-			<Panel class="flow-right full-width">
-				<Panel class="flow-down fill-width pr-1">
-					<Label class="text-h4 full-width text-align-center mb-2" text="#Settings_ImportExport_Export" />
-					<Panel class="full-width">
+			<Panel class="flow-right w-full">
+				<Panel class="flow-down w-fill pr-1">
+					<Label class="text-h4 w-full text-align-center mb-2" text="#Settings_ImportExport_Export" />
+					<Panel class="w-full">
 						<TextEntry id="ExportCode" class="textentry importexport__textentry" multiline="true" ontextentrychange="ImportExportSettingsHandler.blockExportEntryInput()" />
 						<Button class="button importexport__selectall" onactivate="ImportExportSettingsHandler.exportSelectAll()">
 							<Label class="button__text" text="#Common_SelectAll" />
 						</Button>
 					</Panel>
 				</Panel>
-				<Panel class="flow-down fill-width pl-1">
-					<Label class="text-h4 full-width text-align-center mb-2" text="#Settings_ImportExport_Import" />
+				<Panel class="flow-down w-fill pl-1">
+					<Label class="text-h4 w-full text-align-center mb-2" text="#Settings_ImportExport_Import" />
 					<TextEntry id="ImportCode" class="textentry importexport__textentry" multiline="true" />
 				</Panel>
 			</Panel>
 		</Panel>
-		<Panel class="flow-right horizontal-align-right mt-3">
-			<Label id="ImportStatus" class="vertical-align-center mr-3" text="{s:import_warning}" />
-			<Button class="button horizontal-align-right mr-3" onactivate="ImportExportSettingsHandler.importSettings()">
+		<Panel class="flow-right h-align-right mt-3">
+			<Label id="ImportStatus" class="v-align-center mr-3" text="{s:import_warning}" />
+			<Button class="button h-align-right mr-3" onactivate="ImportExportSettingsHandler.importSettings()">
 				<Label class="button__text" text="#Settings_ImportExport_ImportSettings" />
 			</Button>
-			<Button class="button button--red horizontal-align-right" onactivate="UiToolkitAPI.CloseAllVisiblePopups()">
+			<Button class="button button--red h-align-right" onactivate="UiToolkitAPI.CloseAllVisiblePopups()">
 				<Label class="button__text" text="#Common_Close" />
 			</Button>
 		</Panel>
diff --git a/layout/modals/popups/lobby-create.xml b/layout/modals/popups/lobby-create.xml
index e46c7b01..a239edc8 100644
--- a/layout/modals/popups/lobby-create.xml
+++ b/layout/modals/popups/lobby-create.xml
@@ -14,7 +14,7 @@
 		<Panel id="WarningRow" class="row my-2">
 			<Label id="WarningLabel" class="generic-popup__text text-sm text-italic color-gray-800" text="{s:warning}" />
 		</Panel>
-		<Panel class="row horizontal-align-center mt-3">
+		<Panel class="row h-align-center mt-3">
 			<RadioButton id="LobbyCreatePublicButton" class="button radiobutton radiobutton--blue mr-2" selected="true" onactivate="LobbyCreateHandler.onChanged()">
 				<Image class="button__icon button__icon--left" src="file://{images}/online/publiclobby.svg" textureheight="32" />
 				<Label class="button__text button__text--right" text="#Lobby_Type_Public" />
@@ -29,10 +29,10 @@
 			</RadioButton>
 		</Panel>
 		<Panel class="row mt-4">
-			<Label class="mr-3 vertical-align-center" text="#Lobby_MaxPlayers" />
+			<Label class="mr-3 v-align-center" text="#Lobby_MaxPlayers" />
 			<TextEntry id="MaxPlayers" class="textentry pl-3 pr-0" maxchars="3" textmode="numeric" style="width: 48px; tooltip-position: bottom;" ontextentrychange="LobbyCreateHandler.onChanged()" text="16" />
 		</Panel>
-		<Panel class="row horizontal-align-right">
+		<Panel class="row h-align-right">
 			<Button id="UpdateButton" class="button button--green mr-3" disabled="true" onactivate="LobbyCreateHandler.create()">
 				<Label class="button__text" text="#Common_Create" />
 			</Button>
diff --git a/layout/modals/popups/lobby-settings.xml b/layout/modals/popups/lobby-settings.xml
index 0b42d6f0..b493abde 100644
--- a/layout/modals/popups/lobby-settings.xml
+++ b/layout/modals/popups/lobby-settings.xml
@@ -11,7 +11,7 @@
 		<Panel class="row mt-0">
 			<Label id="TitleLabel" class="generic-popup__title" text="#Lobby_Settings" />
 		</Panel>
-		<Panel class="row horizontal-align-center my-3">
+		<Panel class="row h-align-center my-3">
 			<RadioButton id="LobbySettingsPublicButton" class="button radiobutton radiobutton--blue mr-2" onactivate="LobbySettingsHandler.onChanged()">
 				<Image class="button__icon button__icon--left" src="file://{images}/online/publiclobby.svg" textureheight="32" />
 				<Label class="button__text button__text--right" text="#Lobby_Type_Public" />
@@ -26,10 +26,10 @@
 			</RadioButton>
 		</Panel>
 		<Panel class="row mt-1">
-			<Label class="mr-3 vertical-align-center" text="#Lobby_MaxPlayers" disabled="true" />
-			<TextEntry id="MaxPlayers" class="textentry text-align-center horizontal-align-center px-3" maxchars="3" textmode="numeric" style="width: 52px;" ontextentrychange="LobbySettingsHandler.onChanged()" />
+			<Label class="mr-3 v-align-center" text="#Lobby_MaxPlayers" disabled="true" />
+			<TextEntry id="MaxPlayers" class="textentry text-align-center h-align-center px-3" maxchars="3" textmode="numeric" style="width: 52px;" ontextentrychange="LobbySettingsHandler.onChanged()" />
 		</Panel>
-		<Panel class="row horizontal-align-right">
+		<Panel class="row h-align-right">
 			<Button id="UpdateButton" class="button button--green mr-3" disabled="true" onactivate="LobbySettingsHandler.submit()">
 				<Label class="button__text" text="#Common_Update" />
 			</Button>
diff --git a/layout/modals/popups/playtest-welcome.xml b/layout/modals/popups/playtest-welcome.xml
index 44b779b0..beb5aaa1 100644
--- a/layout/modals/popups/playtest-welcome.xml
+++ b/layout/modals/popups/playtest-welcome.xml
@@ -9,20 +9,20 @@
 
 	<PopupCustomLayout class="PopupPanel Hidden generic-popup generic-popup--large" popupbackground="blur">
 		<Panel class="flow-down">
-			<Label class="text-h1 mb-4 full-width text-align-center" text="Welcome to the\nMomentum Mod Playtest!" />
+			<Label class="text-h1 mb-4 w-full text-align-center" text="Welcome to the\nMomentum Mod Playtest!" />
 			<Label class="mb-2" text="Congratulations on gaining access to the Momentum Mod playtest!" />
 			<Label class="mb-3" text="Please note this build is a work in progress, not a final copy of the game. You should expect to encounter bugs and unfinished features, and most importantly..." />
-			<Label class="color-error mb-3 full-width text-align-center" text="Times you submit to the leaderboards will be wiped before the 1.0.0 release!!" />
+			<Label class="color-error mb-3 w-full text-align-center" text="Times you submit to the leaderboards will be wiped before the 1.0.0 release!!" />
 			<Label class="mb-2" text="Whilst we don't want to discourage people from enjoying the game, no times submitted or XP gained will be permanent. Additionally, the game is only available in English, and anti-cheat hasn't been added yet, meaning you may come across glitched runs. This is to be expected, in fact we encourage you to try to break the game in whatever ways you can find! Just please make sure to let us know how you do in our Discord (links on the bottom left of this page) as well sending us any suggestions you might have." />
 			<Label class="mb-4" text="All that being said, thanks for your interest, and we hope you enjoy the game!" />
 			<Label class="ml-4 mb-4 text-italic" text="   - Momentum Mod Team" />
 		</Panel>
 
-		<Panel class="flow-right full-width">
-			<ToggleButton id="DontShowAgainCheckbox" class="checkbox vertical-align-center mr-4">
+		<Panel class="flow-right w-full">
+			<ToggleButton id="DontShowAgainCheckbox" class="checkbox v-align-center mr-4">
 				<Label text="#Common_DontShowAgain" />
 			</ToggleButton>
-			<Button class="button button--blue horizontal-align-right" onactivate="DosaPopupHandler.onSubmit()">
+			<Button class="button button--blue h-align-right" onactivate="DosaPopupHandler.onSubmit()">
 				<Label class="button__text" text="#Common_IUnderstand" />
 			</Button>
 		</Panel>
diff --git a/layout/modals/popups/range-color-profile-name.xml b/layout/modals/popups/range-color-profile-name.xml
index e5e64631..917769eb 100644
--- a/layout/modals/popups/range-color-profile-name.xml
+++ b/layout/modals/popups/range-color-profile-name.xml
@@ -8,14 +8,14 @@
 	</scripts>
 	
 	<PopupCustomLayout class="PopupPanel Hidden" popupbackground="dim">
-		<Panel class="row horizontal-align-center mt-0">
+		<Panel class="row h-align-center mt-0">
 			<Label id="TitleLabel" class="generic-popup__title" text="#Settings_RangeColorProfile_Prompt" />
 		</Panel>
-		<Panel class="row horizontal-align-center mt-4">
+		<Panel class="row h-align-center mt-4">
 			<TextEntry id="RangeColorProfileName" class="textentry" maxchars="255" placeholder="#Settings_RangeColorProfile_Placeholder" text="" ontextentrysubmit="RangeColorProfileNamePopupHandler.onTextSubmitted()" />
 		</Panel>
-		<Label id="InvalidNameLabel" class="text-m horizontal-align-center" text="#Settings_RangeColorProfile_InvalidName" />
-		<Panel class="row horizontal-align-center mt-4 generic-popup__button-row">
+		<Label id="InvalidNameLabel" class="text-m h-align-center" text="#Settings_RangeColorProfile_InvalidName" />
+		<Panel class="row h-align-center mt-4 generic-popup__button-row">
 			<Button id="CancelButton" class="button mr-4" onactivate="UiToolkitAPI.CloseAllVisiblePopups()">
 				<Label class="button__text" text="#Common_Cancel" />
 			</Button>
diff --git a/layout/modals/popups/speedometer-select.xml b/layout/modals/popups/speedometer-select.xml
index 93a84507..30dc5cc7 100644
--- a/layout/modals/popups/speedometer-select.xml
+++ b/layout/modals/popups/speedometer-select.xml
@@ -9,7 +9,7 @@
 	
 	<snippets>
 		<snippet name="speedometer-radiobutton">
-			<Panel class="row my-3 horizontal-align-center">
+			<Panel class="row my-3 h-align-center">
 				<RadioButton id="SpeedometerRadioBtn" class="button radiobutton radiobutton--blue mr-2">
 					<Label id="SpeedometerBtnLabel" class="button__text" />
 				</RadioButton>
@@ -18,16 +18,16 @@
 	</snippets>
 	
 	<PopupCustomLayout class="PopupPanel Hidden" popupbackground="dim">
-		<Panel class="row horizontal-align-center mt-0">
+		<Panel class="row h-align-center mt-0">
 			<Label id="TitleLabel" class="generic-popup__title" text="#Settings_Speedometer_Pick" />
 		</Panel>
-		<Panel id="SpeedometerSelectContainer" class="flow-down horizontal-align-center">
+		<Panel id="SpeedometerSelectContainer" class="flow-down h-align-center">
 		</Panel>
-		<Panel class="row horizontal-align-center mt-4">
+		<Panel class="row h-align-center mt-4">
 			<TextEntry id="SpeedometerName" class="textentry" maxchars="255" placeholder="#Settings_Speedometer_Customname_Placeholder" text="" ontextentrysubmit="SpeedometerSelectPopupHandler.onTextSubmitted()"/>
 		</Panel>
-		<Label id="InvalidNameLabel" class="text-m horizontal-align-center" text="#Settings_Speedometer_InvalidName" />
-		<Panel class="row horizontal-align-center mt-4 generic-popup__button-row">
+		<Label id="InvalidNameLabel" class="text-m h-align-center" text="#Settings_Speedometer_InvalidName" />
+		<Panel class="row h-align-center mt-4 generic-popup__button-row">
 			<Button id="CancelButton" class="button mr-4" onactivate="UiToolkitAPI.CloseAllVisiblePopups();">
 				<Label class="button__text" text="#Common_Cancel" />
 			</Button>
diff --git a/layout/modals/toasts/custom-layout-example.xml b/layout/modals/toasts/custom-layout-example.xml
index 7ab8735c..6a7fe2cb 100644
--- a/layout/modals/toasts/custom-layout-example.xml
+++ b/layout/modals/toasts/custom-layout-example.xml
@@ -8,7 +8,7 @@
 	</script>
 
 	<Panel class="toast flow-right p-3 bg-gray-100" onload="onLoad()">
-		<AvatarImage class="vertical-align-center mr-5" style="width: 32px; height: 32px;" steamid="local" />
+		<AvatarImage class="v-align-center mr-5" style="width: 32px; height: 32px;" steamid="local" />
 		<Panel class="flow-down">
 			<Label class="toast__title" text="Custom Toast Example" />
 			<Label class="toast__message" text="you can put whatever stupid panels in here" />
diff --git a/layout/pages/console.xml b/layout/pages/console.xml
index 55987e1f..e0012835 100644
--- a/layout/pages/console.xml
+++ b/layout/pages/console.xml
@@ -15,17 +15,17 @@
 	</scripts>
 	
 	<Panel class="console__outer" hittest="true" defaultfocus="ConsoleInput">
-		<Panel id="MoveDragArea" class="console__move-drag-area vertical-align-center" draggable="true">
+		<Panel id="MoveDragArea" class="console__move-drag-area v-align-center" draggable="true">
 			<Label text="#Console_Title" class="text-h3 console__header" />
-			<Button class="button button--red horizontal-align-right" onactivate="ConsoleHandler.toggle()">
+			<Button class="button button--red h-align-right" onactivate="ConsoleHandler.toggle()">
 				<Image class="button__icon" src="file://{images}/close.svg" />
 			</Button>
 		</Panel>
 
 		<Panel class="console__top-splitter" />
 		<Panel class="console__inner" acceptsfocus="true" acceptsinput="true">
-			<StaticConsoleMessageTarget id="ConsoleMessageTarget" class="console__message-target full-width" />
-			<ConsoleInput id="ConsoleInput" class="textentry console__input full-width" clearaftersubmit="true" />
+			<StaticConsoleMessageTarget id="ConsoleMessageTarget" class="console__message-target w-full" />
+			<ConsoleInput id="ConsoleInput" class="textentry console__input w-full" clearaftersubmit="true" />
 		</Panel>
 		<ResizeDragKnob target="Console" class="console__resize-drag-knob">
 			<Image src="file://{images}/resize.svg" textureheight="32" />
diff --git a/layout/pages/controls-library.xml b/layout/pages/controls-library.xml
index 70fc1920..2943fb39 100644
--- a/layout/pages/controls-library.xml
+++ b/layout/pages/controls-library.xml
@@ -211,14 +211,14 @@
 					</Panel>
 				</Panel>
 				<Panel class="col">
-					<Panel class="col full-width">
-						<Label class="text-xs max-width-200 ml-4" text="horizontal-separator" />
+					<Panel class="col w-full">
+						<Label class="text-xs max-w-200 ml-4" text="horizontal-separator" />
 						<Panel class="horizontal-separator" />
 					</Panel>
 				</Panel>
-				<Panel class="col full-height">
-					<Panel class="row full-height">
-						<Label class="text-xs max-width-200" text="vertical-separator" />
+				<Panel class="col h-full">
+					<Panel class="row h-full">
+						<Label class="text-xs max-w-200" text="vertical-separator" />
 						<Panel class="vertical-separator" />
 					</Panel>
 				</Panel>
@@ -746,7 +746,7 @@
 			</Panel>
 
 			<Label class="text-h3 mt-3" text="Settings" />
-			<Panel class="flow-down half-width">
+			<Panel class="flow-down w-half">
 				<SettingsEnum text="SettingsEnum">
 					<RadioButton group="settingsenum" text="1" value="0" />
 					<RadioButton group="settingsenum" text="2" value="1" />
diff --git a/layout/pages/drawer/lobby.xml b/layout/pages/drawer/lobby.xml
index 60ce018e..d7a2617c 100644
--- a/layout/pages/drawer/lobby.xml
+++ b/layout/pages/drawer/lobby.xml
@@ -31,7 +31,7 @@
 				<Label id="MemberName" class="lobby-members__text lobby-members__name" text="{s:memberName}" />
 				<!--<Label id="MemberPrestige" /> -->
 				<Panel class="lobby-members__map-container">
-					<Panel class="flow-right horizontal-align-center">
+					<Panel class="flow-right h-align-center">
 						<Label id="MemberMap" class="lobby-members__text lobby-members__map" text="{s:memberMap}" />
 						<Image id="MemberState" class="lobby-members__state" textureheight="32" onmouseout="UiToolkitAPI.HideTitleImageTextTooltip();" />
 					</Panel>
diff --git a/layout/pages/drawer/profile.xml b/layout/pages/drawer/profile.xml
index 3b92bc30..635c6818 100644
--- a/layout/pages/drawer/profile.xml
+++ b/layout/pages/drawer/profile.xml
@@ -12,7 +12,7 @@
 			<Panel class="profile-global__left">
 				<Panel class="profile__row">
 					<Label class="profile-global__name" text="{s:name}" />
-					<TooltipPanel tooltip="View on website" class="ml-3 full-height">
+					<TooltipPanel tooltip="View on website" class="ml-3 h-full">
 						<Button id="ProfileSiteButton" class="button" onactivate="ProfileHandler.openWebsiteProfile()">
 							<Image class="button__icon" src="file://{images}/online/publiclobby.svg" textureheight="32" />
 						</Button>
diff --git a/layout/pages/end-of-run/end-of-run.xml b/layout/pages/end-of-run/end-of-run.xml
index b038f40e..44faf4e3 100644
--- a/layout/pages/end-of-run/end-of-run.xml
+++ b/layout/pages/end-of-run/end-of-run.xml
@@ -25,13 +25,13 @@
 				</Panel>
 				<Panel id="EndOfRunActionButtons" class="endofrun__header-buttons">
 					<Button class="endofrun__header-button" onactivate="EndOfRunHandler.watchReplay();">
-						<Panel class="flow-right horizontal-align-center vertical-align-center">
+						<Panel class="flow-right h-align-center v-align-center">
 							<Image class="button__icon button__icon--left" src="file://{images}/movie-open-play-outline.svg" textureheight="64" />
 							<Label class="button__text button__text--right" text="#Action_WatchReplay" />
 						</Panel>
 					</Button>
 					<Button class="endofrun__header-button endofrun__header-button--last" onactivate="EndOfRunHandler.restartMap();">
-						<Panel class="flow-right horizontal-align-center  vertical-align-center">
+						<Panel class="flow-right h-align-center  v-align-center">
 							<Image class="button__icon button__icon--left" src="file://{images}/reset.svg" textureheight="64" />
 							<Label class="button__text button__text--right" text="#Action_RestartMap" />
 						</Panel>
@@ -48,7 +48,7 @@
 				<Panel class="endofrun-stats">
 					<Panel class="endofrun-stats__header">
 						<Label class="endofrun-stats__title" text="#EndOfRun_Comparison_ZoneTitle" />
-						<Panel class="flow-right horizontal-align-right">
+						<Panel class="flow-right h-align-right">
 							<Label class="endofrun-stats__comparison-pre" text="#EndOfRun_Comparison" />
 							<Label class="endofrun-stats__comparison" text="{s:comparison_name}" />
 						</Panel>
diff --git a/layout/pages/leaderboards/leaderboards.xml b/layout/pages/leaderboards/leaderboards.xml
index 75630db3..243a3130 100644
--- a/layout/pages/leaderboards/leaderboards.xml
+++ b/layout/pages/leaderboards/leaderboards.xml
@@ -49,7 +49,7 @@
 				</DropDown>
 			</Panel>
 
-			<TooltipPanel class="horizontal-align-right width-fit-children height-fit-children" tooltip="#Leaderboards_EndOfRunButton">
+			<TooltipPanel class="h-align-right w-fit-children h-fit-children" tooltip="#Leaderboards_EndOfRunButton">
 				<Button id="EndOfRunButton" class="button" onactivate="LeaderboardsHandler.showEndOfRun();">
 					<Image class="button__icon button__icon--left" src="file://{images}/arrow-thick-right.svg" textureheight="64" />
 				</Button>
@@ -67,15 +67,15 @@
 					<!-- Populated via code -->
 				</DelayLoadList>
 				<Panel class="leaderboard-times__empty">
-					<Panel class="vertical-align-center horizontal-align-center flow-down">
-						<Label id="LeaderboardEmptyWarningTitle" class="text-h3 horizontal-align-center mb-3" text="#Leaderboards_NoRunsFound" />
-						<Label id="LeaderboardEmptyWarningText" class="horizontal-align-center" text="{s:empty-warning}" />
+					<Panel class="v-align-center h-align-center flow-down">
+						<Label id="LeaderboardEmptyWarningTitle" class="text-h3 h-align-center mb-3" text="#Leaderboards_NoRunsFound" />
+						<Label id="LeaderboardEmptyWarningText" class="h-align-center" text="{s:empty-warning}" />
 					</Panel>
 				</Panel>
 				<Panel class="leaderboard-times__loading">
-					<Panel class="vertical-align-center horizontal-align-center flow-down">
+					<Panel class="v-align-center h-align-center flow-down">
 						<Image class="button__icon button__icon--left spin-clockwise leaderboard-times__loading-spinner" src="file://{images}/refresh.svg" textureheight="128" />
-						<Label class="text-h5 horizontal-align-center" text="#Leaderboards_RequestingData" />
+						<Label class="text-h5 h-align-center" text="#Leaderboards_RequestingData" />
 					</Panel>
 				</Panel>
 			</Panel>
diff --git a/layout/pages/learn.xml b/layout/pages/learn.xml
index 4c0f8aab..7223a35a 100644
--- a/layout/pages/learn.xml
+++ b/layout/pages/learn.xml
@@ -79,7 +79,7 @@
 			<Panel id="RightPanel" class="learn__right">
 				<Panel class="learn__info learn-info">
 					<Panel class="learn-info__left">
-						<Panel class="flow-right full-width">
+						<Panel class="flow-right w-full">
 							<Label class="learn-info__title" text="{s:selected_lesson_title}" />
 							<Label id="LessonCompletionStatus" class="learn-info__completion-status" text="#Learn_Completed" />
 						</Panel>
@@ -90,7 +90,7 @@
 							<Label text="Image Goes Here" style="align: center center; opacity: 0.1" />
 						</Image>
 						<Button class="button button--blue learn-info__play-button" onactivate="Learn.startCurrentLesson();">
-							<Panel class="flow-right full-height horizontal-align-center">
+							<Panel class="flow-right h-full h-align-center">
 								<Image class="button__icon button__icon--left" src="file://{images}/play-circle.svg" textureheight="64" />
 								<Label class="button__text button__text--right learn-info__playbutton-text" text="#Learn_Practice" />
 							</Panel>
diff --git a/layout/pages/main-menu/main-menu.xml b/layout/pages/main-menu/main-menu.xml
index 06232cba..d9c61638 100644
--- a/layout/pages/main-menu/main-menu.xml
+++ b/layout/pages/main-menu/main-menu.xml
@@ -27,7 +27,7 @@
 					<Image class="topnav__logo" src="file://{images}/momentumLogo.svg" textureheight="64" scaling="stretch-to-fit-preserve-aspect" />
 				</RadioButton>
 
-				<Panel id="MainMenuTopButtons" class="full-height flow-right">
+				<Panel id="MainMenuTopButtons" class="h-full flow-right">
 					<RadioButton id="PlayButton" group="TopNavRadio" class="topnav__button" onactivate="MainMenuHandler.navigateToPage('MapSelection', 'map-selector/wrapper', false)">
 						<Image class="topnav__icon" src="file://{images}/play-circle.svg" textureheight="64" />
 					</RadioButton>
@@ -42,11 +42,11 @@
 					</RadioButton>
 				</Panel>
 
-				<Panel class="full-height flow-right horizontal-align-right">
+				<Panel class="h-full flow-right h-align-right">
 					<RadioButton id="NotificationsButton" class="topnav__button">
 						<Image class="topnav__icon" src="file://{images}/notification.svg" textureheight="64" />
 					</RadioButton>
-					<PlayerCard class="full-height" onactivate="DrawerHandler.onPlayerCardPressed();" />
+					<PlayerCard class="h-full" onactivate="DrawerHandler.onPlayerCardPressed();" />
 					<RadioButton id="QuitButton" class="topnav__button" onactivate="MainMenuHandler.onQuitButtonPressed()">
 						<Image id="QuitButtonImage" class="topnav__icon" src="file://{images}/quit.svg" textureheight="64" />
 					</RadioButton>
@@ -153,7 +153,7 @@
 								<RadioButton id="ControlsLibraryButton" class="bottombar__button hide" group="TopNavRadio" onactivate="MainMenuHandler.navigateToPage('ControlsLibrary', 'controls-library')">
 									<Label class="bottombar__text" text="Controls Library" />
 								</RadioButton>
-								<TooltipPanel class="bottombar__tooltip horizontal-align-right" tooltip="#MainMenu_Button_SwitchBackground">
+								<TooltipPanel class="bottombar__tooltip h-align-right" tooltip="#MainMenu_Button_SwitchBackground">
 									<Button class="bottombar__button" onactivate="MainMenuHandler.toggleBackgroundLightDark()">
 										<Image class="bottombar__icon" src="file://{images}/theme-light-dark.svg" textureheight="64" />
 									</Button>
diff --git a/layout/pages/main-menu/news.xml b/layout/pages/main-menu/news.xml
index a3aa9f63..57543f66 100644
--- a/layout/pages/main-menu/news.xml
+++ b/layout/pages/main-menu/news.xml
@@ -12,7 +12,7 @@
 			<Panel class="news__header">
 				<Label class="news__title" text="#MainMenu_News_Title" />
 				<Button class="news__minimize" onactivate="NewsHandler.minimize();">
-					<Image class="button__icon horizontal-align-right rot-90" src="file://{images}/mom-arrow-right.svg" textureheight="32" />
+					<Image class="button__icon h-align-right rot-90" src="file://{images}/mom-arrow-right.svg" textureheight="32" />
 				</Button>
 			</Panel>
 			<Panel class="news__main">
diff --git a/layout/pages/map-selector/map-entry.xml b/layout/pages/map-selector/map-entry.xml
index 0ed26784..4a0802f3 100644
--- a/layout/pages/map-selector/map-entry.xml
+++ b/layout/pages/map-selector/map-entry.xml
@@ -20,7 +20,7 @@
 		</snippet>
 	</snippets>
 
-	<MapEntry class="full-width map-entry" oncontextmenu="MapEntryHandler.showContextMenu()" ondblclick="MapEntryHandler.tryPlayMap()">
+	<MapEntry class="w-full map-entry" oncontextmenu="MapEntryHandler.showContextMenu()" ondblclick="MapEntryHandler.tryPlayMap()">
 		<Panel class="map-entry__left">
 			<Panel class="map-entry__state" />
 			<Panel id="MapEntryImageContainer" class=" map-entry__image">
diff --git a/layout/pages/map-selector/map-selector.xml b/layout/pages/map-selector/map-selector.xml
index b10e182b..1ebe4947 100644
--- a/layout/pages/map-selector/map-selector.xml
+++ b/layout/pages/map-selector/map-selector.xml
@@ -14,13 +14,13 @@
 					<Panel class="mapselector__left-wrapper">
 						<Panel class="mapselector-category-tabs">
 							<RadioButton id="CategoryListMaps" class="mapselector-category-tabs__tab" group="CategoryListNavBar" selected="true" onactivate='$("#CategoryContents").SetHasClass("mapselector__category-contents--playlists", false)'>
-								<Panel class="flow-right horizontal-align-center">
+								<Panel class="flow-right h-align-center">
 									<Image class="mapselector-category-tabs__image" src="file://{images}/panorama-variant.svg" textureheight="32" style="padding: 1px;" />
 									<Label class="text-h mapselector-category-tabs__text" text="#MapSelector_Maps" />
 								</Panel>
 							</RadioButton>
 							<RadioButton id="CategoryListPlaylists" class="mapselector-category-tabs__tab" group="CategoryListNavBar" onactivate='$("#CategoryContents").SetHasClass("mapselector__category-contents--playlists", true)'>
-								<Panel class="flow-right horizontal-align-center">
+								<Panel class="flow-right h-align-center">
 									<Image class="mapselector-category-tabs__image" src="file://{images}/playlist-play.svg" textureheight="32" />
 									<Label class="text-h mapselector-category-tabs__text" text="#MapSelector_Playlists" />
 								</Panel>
@@ -92,7 +92,7 @@
 									</Panel>
 									<Panel class="mapselector-filters__row">
 										<Panel class="mapselector-filters__tiers">
-											<Label class="text-h5 mr-2 vertical-align-center" text="Tiers" />
+											<Label class="text-h5 mr-2 v-align-center" text="Tiers" />
 											<Panel class="mapselector-tier-slider">
 												<Panel class="mapselector-tier-slider__numbers">
 													<Label class="mapselector-tier-slider__number" text="1" />
@@ -118,7 +118,7 @@
 												<DualSlider id="TierSlider" class="slider slider--horizontal mapselector-tier-slider__slider" snaptoincrement="true" direction="horizontal" min="1" max="10" increment="1" default="1" default2="10" value="1" value2="10" />
 											</Panel>
 										</Panel>
-										<Panel class="horizontal-align-right flow-right">
+										<Panel class="h-align-right flow-right">
 											<TooltipPanel tooltip="&lt;b&gt;Filter by&lt;/b&gt;: Completed">
 												<NStateButton id="MapCompletedFilterButton" class="button nstatebutton mapselector-filters__nstatebutton mr-2">
 													<Image class="button__icon" src="file://{images}/flag.svg" textureheight="32" />
@@ -168,21 +168,21 @@
 									</Panel>
 								</Panel>
 
-								<Panel class="full-width">
+								<Panel class="w-full">
 									<DelayLoadList id="MapListContainer" class="mapselector__list" itemheight="54px" itemwidth="100%" spacersize="3px" spacerperiod="1">
 										<!-- Populated via MapEntry snippets in code -->
 									</DelayLoadList>
 									<Panel id="MapListEmptyContainer" class="mapselector__emptywarning mapselector__emptywarning--hidden">
-										<Label class="text-h2 horizontal-align-center mb-4" text="#MapSelector_Error_NoMapsFound" />
-										<Label class="horizontal-align-center text-align-center full-height" text="#MapSelector_Error_NoMapsFound_Long" />
+										<Label class="text-h2 h-align-center mb-4" text="#MapSelector_Error_NoMapsFound" />
+										<Label class="h-align-center text-align-center h-full" text="#MapSelector_Error_NoMapsFound_Long" />
 									</Panel>
 								</Panel>
 							</Panel>
 
 							<!-- Playlist Selector -->
 							<Panel id="PlaylistSelector" class="mapselector__playlists">
-								<Panel class="full-height full-width">
-									<Label class="text-h1 text-align-center horizontal-align-center mt-5" text="#Common_ComingSoon" />
+								<Panel class="h-full w-full">
+									<Label class="text-h1 text-align-center h-align-center mt-5" text="#Common_ComingSoon" />
 								</Panel>
 							</Panel>
 						</Panel>
@@ -232,7 +232,7 @@
 							<Panel class="mapselector-map-info__wrapper mapselector-map-info__wrapper--unpadded">
 								<Panel class="mapselector-map-info__description-scroll">
 									<Panel class="mapselector-map-info__description-main-elements">
-										<Panel id="MapDescriptionContainer" class="flow-down full-width">
+										<Panel id="MapDescriptionContainer" class="flow-down w-full">
 											<Label class="text-h5 mb-1" text="#MapSelector_Info_Description" />
 											<Label class="mapselector-map-info__paragraph" text="{s:description}" />
 										</Panel>
@@ -257,9 +257,9 @@
 						</Panel>
 
 						<Panel class="flow-down mapselector-map-info__block-right">
-							<Panel class="flow-right full-width pb-3">
+							<Panel class="flow-right w-full pb-3">
 								<ToggleButton id="LeaderboardsBtn" class="button togglebutton togglebutton--blue mapselector-map-info__leaderboard-button" onactivate="MapSelectorHandler.toggleLeaderboards()">
-									<Panel class="flow-right  full-height horizontal-align-center">
+									<Panel class="flow-right  h-full h-align-center">
 										<Image class="button__icon button__icon--left" src="file://{images}/chart-timeline.svg" textureheight="40" />
 										<Label class="button__text button__icon--right mr-3" text="#MapSelector_Button_Leaderboards" />
 									</Panel>
diff --git a/layout/pages/settings/audio.xml b/layout/pages/settings/audio.xml
index bb90b6c0..67997ece 100644
--- a/layout/pages/settings/audio.xml
+++ b/layout/pages/settings/audio.xml
@@ -19,7 +19,7 @@
 			<Panel id="VolumeSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Volume_Title" tags="volume,sound" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Volume_Title', 'VolumeSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
diff --git a/layout/pages/settings/gameplay.xml b/layout/pages/settings/gameplay.xml
index d809c692..d2508cc0 100644
--- a/layout/pages/settings/gameplay.xml
+++ b/layout/pages/settings/gameplay.xml
@@ -19,7 +19,7 @@
 			<Panel id="GameplayGeneralSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Gameplay_General_Title" tags="gameplay" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Gameplay', 'GameplayGeneralSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -65,7 +65,7 @@
 			<Panel id="PaintSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Paint_Title" tags="paint,spray" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Paint_Title', 'PaintSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -81,7 +81,7 @@
 					<Panel id="PaintContainer" class="settings__paint">
 						<Panel id="PaintBlob" class="settings__paint-blob" />
 					</Panel>
-					<Panel class="fill-width flow-down">
+					<Panel class="w-fill flow-down">
 						<ConVarColorDisplay convar="mom_paint_color" text="#Settings_Paint_Color" oncolorchange="SettingsPage.updatePaintPreview();" tags="color" />
 
 						<SettingsSlider text="#Settings_Paint_Scale" min="0.001" max="1" percentage="true" convar="mom_paint_scale" tags="color,size,scale" onvaluechanged="SettingsPage.updatePaintPreview();" />
@@ -109,7 +109,7 @@
 			<Panel id="SafeguardsSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Safeguards_Title" tags="safeguards" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Safeguards_Title', 'SafeguardsSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -174,7 +174,7 @@
 			<Panel id="ZonesSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Zones_Title" tags="zones" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Zones_Title', 'ZonesSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -234,7 +234,7 @@
 			<Panel id="RocketJumpSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_RJ_Title" tags="rj,rocketjump,soldier" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_RJ_Title', 'RocketJumpSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -290,7 +290,7 @@
 			<Panel id="StickyJumpSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_SJ_Title" tags="sj,stickyjump,demoman" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_SJ_Title', 'StickyJumpSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -368,7 +368,7 @@
 			<Panel id="ConcSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Conc_Title" tags="conc,concussion,grenade" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Conc', 'ConcSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -432,7 +432,7 @@
 			<Panel id="DefragSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Defrag_Title" tags="defrag,quake" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Defrag_Title', 'DefragSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
diff --git a/layout/pages/settings/input.xml b/layout/pages/settings/input.xml
index 17baf315..5ae0033d 100644
--- a/layout/pages/settings/input.xml
+++ b/layout/pages/settings/input.xml
@@ -20,7 +20,7 @@
 			<Panel id="MouseSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Mouse_Title" tags="mouse,cursor,aim,look,input" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Mouse_Title', 'MouseSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
diff --git a/layout/pages/settings/interface.xml b/layout/pages/settings/interface.xml
index f078f3d5..9eefedca 100644
--- a/layout/pages/settings/interface.xml
+++ b/layout/pages/settings/interface.xml
@@ -26,7 +26,7 @@
 					</Button>
 					<ToggleButton id="SpeedometerToggleBtn" class="button togglebutton togglebutton--blue settings-speedometer__togglebutton" selected="false">
 						<Label id="SpeedometerName" class="button__text button__text--left settings-speedometer__name" />
-						<Image class="button__icon button__icon--right horizontal-align-right rot-90" src="file://{images}/mom-arrow-right.svg" textureheight="32" />
+						<Image class="button__icon button__icon--right h-align-right rot-90" src="file://{images}/mom-arrow-right.svg" textureheight="32" />
 					</ToggleButton>
 				</Panel>
 				<Panel id="SpeedometerDetailContainer" class="settings-speedometer__detail settings-speedometer__detail--hidden">
@@ -87,7 +87,7 @@
 					</Button>
 					<ToggleButton id="RangeColorToggleBtn" class="button togglebutton togglebutton--blue settings-speedometer-rangecolor__togglebutton" selected="false">
 						<Label id="RangeColorName" class="button__text button__text--left settings-speedometer-rangecolor__name" />
-						<Image class="button__icon button__icon--right horizontal-align-right rot-90" src="file://{images}/mom-arrow-right.svg" textureheight="32" />
+						<Image class="button__icon button__icon--right h-align-right rot-90" src="file://{images}/mom-arrow-right.svg" textureheight="32" />
 					</ToggleButton>
 				</Panel>
 				<Panel id="RangeColorDisplaysContainer" class="settings-speedometer-rangecolor__displayscont settings-speedometer-rangecolor__displayscont--hidden">
@@ -134,7 +134,7 @@
 				</SettingsEnumDropDown>
 
 				<Panel class="settings-group__combo">
-					<Button class="horizontal-align-center button my-2" onactivate="UiToolkitAPI.ShowCustomLayoutPopup('', 'file://{resources}/layout/modals/popups/dont-show-again-settings.xml')">
+					<Button class="h-align-center button my-2" onactivate="UiToolkitAPI.ShowCustomLayoutPopup('', 'file://{resources}/layout/modals/popups/dont-show-again-settings.xml')">
 						<Label class="button__text" text="#Settings_Dosa_Title" />
 					</Button>
 				</Panel>
@@ -154,7 +154,7 @@
 				<ConVarEnabler convar="mom_hud_speedometer_enable" togglevisibility="true" class="flow-down">
 					<SettingsSlider text="#Settings_Speedometer_FPS" min="0" max="400" convar="mom_hud_speedometer_fps" infomessage="#Settings_Speedometer_FPS_Info" hasdocspage="true" tags="speedometer" />
 
-					<Panel id="SpeedometersContainer" class="flow-down full-width" infotitle="#Settings_Speedometer_Gamemode_Long" infomessage="#Settings_Speedometer_Container_Info" tags="speedometer">
+					<Panel id="SpeedometersContainer" class="flow-down w-full" infotitle="#Settings_Speedometer_Gamemode_Long" infomessage="#Settings_Speedometer_Container_Info" tags="speedometer">
 						<Panel class="settings-group__header">
 							<Label class="settings-group__subtitle" text="#Settings_Speedometer_Gamemode_Long" />
 							<!-- TODO: hook this up to some events so it can change when a map is loaded -->
@@ -177,12 +177,12 @@
 						<Panel id="Speedometers" class="settings-speedometers">
 							<!--Filled with snippets in JS-->
 						</Panel>
-						<Button id="AddSpeedometerBtn" class="button horizontal-align-center half-width mt-4 mb-4" onactivate="Speedometers.addSpeedometer();">
+						<Button id="AddSpeedometerBtn" class="button h-align-center w-half mt-4 mb-4" onactivate="Speedometers.addSpeedometer();">
 							<Label class="button__text" text="#Settings_Speedometer_Add" />
 						</Button>
 					</Panel>
 
-					<Panel id="RangeColorProfilesContainer" class="flow-down full-width" infotitle="Settings_Speedometer_ColorRange_Title" infomessage="#Settings_Speedometer_ColorRange_Info">
+					<Panel id="RangeColorProfilesContainer" class="flow-down w-full" infotitle="Settings_Speedometer_ColorRange_Title" infomessage="#Settings_Speedometer_ColorRange_Info">
 						<Panel class="settings-group__header">
 							<Label class="settings-group__subtitle" text="#Settings_Speedometer_ColorRange_Title" />
 							<Panel class="settings-speedometer-buttons">
@@ -202,7 +202,7 @@
 						<Panel id="SpeedometerColorProfiles" class="settings-speedometer-rangecolorprofs">
 							<!--Filled with snippets in JS-->
 						</Panel>
-						<Button id="AddColorProfileBtn" class="button horizontal-align-center half-width mt-4 mb-4" onactivate="RangeColorProfileHandler.addProfile();">
+						<Button id="AddColorProfileBtn" class="button h-align-center w-half mt-4 mb-4" onactivate="RangeColorProfileHandler.addProfile();">
 							<Label class="button__text" text="#Settings_Speedometer_ColorProfile_Add" />
 						</Button>
 					</Panel>
@@ -214,7 +214,7 @@
 			<Panel id="CrosshairSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Crosshair_Title" tags="crosshair" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Crosshair_Title', 'CrosshairSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -226,11 +226,11 @@
 					</Panel>
 				</Panel>
 
-				<Panel class="full-width flow-right mb-2">
+				<Panel class="w-full flow-right mb-2">
 					<ConVarEnabler class="settings__crosshair-wrapper" convar="crosshair">
 						<MomCrosshair id="SettingsCrosshair" class="settings__crosshair" preview="true" />
 					</ConVarEnabler>
-					<Panel class="fill-width flow-down">
+					<Panel class="w-fill flow-down">
 						<Panel class="settings-group__combo" style="margin-bottom: 0px;">							<!-- TODO: fix when sass specificity is fixed -->
 							<SettingsEnum text="#Settings_Crosshair_Enable" convar="crosshair" hasdocspage="false">
 								<RadioButton group="xhairenable" text="#Common_Off" value="0" />
@@ -270,7 +270,7 @@
 			<Panel id="TimerSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Timer_Title" tags="timer" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Timer_Title', 'TimerSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -366,7 +366,7 @@
 			<Panel id="WeaponSelSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_WeaponSelection_Title" tags="weapon,hud" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_WeaponSelection_Title', 'WeaponSelSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -402,7 +402,7 @@
 			<Panel id="JumpStatsSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_JumpStats_Title" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Jump Stats', 'JumpStatsSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -488,7 +488,7 @@
 			<Panel id="StrafeSyncSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_TotalSync_Title" tags="sync,strafe" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_TotalSync_Title', 'StrafeSyncSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -529,7 +529,7 @@
 
 					<Label class="settings-group__title" text="#Settings_DamageIndicator_Title" />
 
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Damage Indicator', 'DamageIndicatorSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
@@ -576,7 +576,7 @@
 			<Panel id="SynchronizerSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_Synchronizer_Title" tags="sync,strafe,trainer" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_Synchronizer_Title', 'SynchronizerSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -640,7 +640,7 @@
 			<Panel id="MapInfoSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_MapInfo_Title" tags="info,hud" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_MapInfo_Title', 'MapInfoSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
diff --git a/layout/pages/settings/online.xml b/layout/pages/settings/online.xml
index d22b0545..cb4746f8 100644
--- a/layout/pages/settings/online.xml
+++ b/layout/pages/settings/online.xml
@@ -19,7 +19,7 @@
 			<Panel id="OnlineGhostSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_OnlineGhost_Title" tags="online,ghost,multiplayer" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_OnlineGhost_Title', 'OnlineGhostSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -79,7 +79,7 @@
 			<Panel id="GhostSubSection" class="settings-group">
 				<Panel class="settings-group__header">
 					<Label class="settings-group__title" text="#Settings_OnlinePlayer_Title" />
-					<Panel class="flow-right horizontal-align-right">
+					<Panel class="flow-right h-align-right">
 						<Button class="button mr-3" onactivate="SettingsPage.showImportExportDialogue('Settings_OnlinePlayer_Title', 'GhostSubSection')">
 							<Label class="button__text" text="#Settings_ImportExport_ImportExport" />
 						</Button>
@@ -91,11 +91,11 @@
 					</Panel>
 				</Panel>
 
-				<Panel class="full-width flow-right">
+				<Panel class="w-full flow-right">
 
 					<ModelPanel id="GhostModelPreview" class="settings__ghost" src="models/player/player_shape_base.mdl" mouse_rotate="true" antialias="true" />
 
-					<Panel class="fill-width flow-down">
+					<Panel class="w-fill flow-down">
 						<SettingsEnumDropDown text="#Settings_OnlinePlayer_Body" convar="mom_ghost_bodygroup" oninputsubmit="SettingsPage.onlineSettingsUpdateModel()" infomessage="#Settings_OnlinePlayer_Body_Info" tags="shape,model">
 							<Label text="#Settings_OnlinePlayer_Bodygroup_0" value="0" id="bodygroup0" />
 							<Label text="#Settings_OnlinePlayer_Bodygroup_1" value="1" id="bodygroup1" />
diff --git a/layout/pages/settings/settings.xml b/layout/pages/settings/settings.xml
index 96a079e8..16bd1ea3 100644
--- a/layout/pages/settings/settings.xml
+++ b/layout/pages/settings/settings.xml
@@ -27,7 +27,7 @@
 					<Panel id="SettingsNav" class="settings-nav__main">
 						<!-- INPUT -->
 						<RadioButton id="InputRadio" class="settings-nav__item" group="SettingsNav" onactivate="SettingsHandler.navigateToTab('InputSettings')" selected="true">
-							<Panel class="full-width">
+							<Panel class="w-full">
 								<Label class="settings-nav__item-label" text="#Settings_Input_Title" />
 							</Panel>
 							<Panel class="settings-nav__subsection settings-nav__subsection--2 settings-nav__subsection--hidden">
diff --git a/layout/pages/settings/video.xml b/layout/pages/settings/video.xml
index c96a9d9a..65606f72 100644
--- a/layout/pages/settings/video.xml
+++ b/layout/pages/settings/video.xml
@@ -177,7 +177,7 @@
 					<Panel id="TextureReplacePreviewContainer" class="settings__texturereplace">
 						<Image id="TextureReplacePreview" />
 					</Panel>
-					<Panel class="fill-width flow-down">
+					<Panel class="w-fill flow-down">
 						<SettingsEnumDropDown text="#Settings_TextureReplace_Type" convar="mat_error_texture_type" id="MatErrorType" infomessage="#Settings_TextureReplace_Type_Info">
 							<Label text="#Settings_TextureReplace_0" id="materrortype0" value="0" />
 							<Label text="#Settings_TextureReplace_1" id="materrortype1" value="1" />
diff --git a/layout/pages/zoning/zoning.xml b/layout/pages/zoning/zoning.xml
index 26b3841d..0cfcb029 100644
--- a/layout/pages/zoning/zoning.xml
+++ b/layout/pages/zoning/zoning.xml
@@ -19,7 +19,7 @@
 						<Label id="Name" class="zoning__tracklist-label" />
 					</RadioButton>
 				</Panel>
-				<Panel id="ChildContainer" class="full-width flow-down">
+				<Panel id="ChildContainer" class="w-full flow-down">
 					<Panel id="SegmentContainer" class="zoning__list-container" />
 					<Panel id="EndZoneContainer" class="zoning__list-container" />
 				</Panel>
@@ -36,7 +36,7 @@
 						<Label id="Name" class="zoning__tracklist-label" />
 					</RadioButton>
 				</Panel>
-				<Panel id="ChildContainer" class="full-width flow-down">
+				<Panel id="ChildContainer" class="w-full flow-down">
 					<Panel id="CheckpointContainer" class="zoning__list-container" />
 					<Panel id="CancelContainer" class="zoning__list-container" />
 				</Panel>
@@ -71,10 +71,10 @@
         	</Panel>
 		</Panel>
 		<Panel class="zoning__button-box">
-			<Button id="NewZoneButton" class="button button--blue ml-2 horizontal-align-right" onactivate="ZoneMenuHandler.showAddMenu()">
+			<Button id="NewZoneButton" class="button button--blue ml-2 h-align-right" onactivate="ZoneMenuHandler.showAddMenu()">
 				<Label class="button__text" text="#Zoning_New" />
 			</Button>
-			<Button class="button button--red ml-2 horizontal-align-right" onactivate="ZoneMenuHandler.showDeletePopup()">
+			<Button class="button button--red ml-2 h-align-right" onactivate="ZoneMenuHandler.showDeletePopup()">
 				<Label class="button__text" text="#Zoning_Delete" />
 			</Button>
 		</Panel>
@@ -238,10 +238,10 @@
 			</Panel>
 		</Panel>
 		<Panel class="zoning__button-box">
-			<Button class="button button--blue ml-2 horizontal-align-right" onactivate="ZoneMenuHandler.saveZones()">
+			<Button class="button button--blue ml-2 h-align-right" onactivate="ZoneMenuHandler.saveZones()">
 				<Label class="button__text" text="#Zoning_Save" />
 			</Button>
-			<Button class="button ml-2 horizontal-align-right" onactivate="ZoneMenuHandler.cancelEdit()">
+			<Button class="button ml-2 h-align-right" onactivate="ZoneMenuHandler.cancelEdit()">
 				<Label class="button__text" text="#Zoning_CancelEdit" />
 			</Button>
 		</Panel>
diff --git a/layout/util/toast-manager.xml b/layout/util/toast-manager.xml
index 4aad4f7d..0afa5073 100644
--- a/layout/util/toast-manager.xml
+++ b/layout/util/toast-manager.xml
@@ -7,7 +7,7 @@
 		<include type="module" src="file://{scripts}/util/toast-manager.ts" />
 	</scripts>
 
-	<Panel class="full-width full-height" hittest="false" hittestchildren="false">
+	<Panel class="w-full h-full" hittest="false" hittestchildren="false">
 		<ConVarEnabler class="toast-manager" hittest="false" hittestchildren="false" convar="mom_ui_toasts_enable" togglevisibility="true">
 			<Panel id="Center" class="toast-manager__center" />
 			<Panel id="Left" class="toast-manager__left" />
diff --git a/scripts/hud/synchronizer.ts b/scripts/hud/synchronizer.ts
index e20afd73..b8a1592e 100644
--- a/scripts/hud/synchronizer.ts
+++ b/scripts/hud/synchronizer.ts
@@ -134,14 +134,14 @@ class Synchronizer {
 		let flow;
 
 		switch (this.displayMode) {
-			case 1: // "Half-width throttle"
+			case 1: // "w-half throttle"
 				flow = direction * flip;
 				this.panels.container.style.flowChildren = flow < 0 ? 'left' : 'right';
 				this.panels.segments[0].style.backgroundColor = color;
 				this.panels.segments[0].style.width = (yawRatio * 50).toFixed(3) + '%';
 				break;
 			case 2: {
-				// "Full-width throttle"
+				// "w-full throttle"
 				const absRatio = Math.abs(gainRatio);
 				flow = direction * (yawRatio > 1 ? -1 : 1) * flip;
 				this.panels.container.style.flowChildren = flow < 0 ? 'left' : 'right';
diff --git a/styles/core/utility.scss b/styles/core/utility.scss
index 570b42b0..6b4fea84 100644
--- a/styles/core/utility.scss
+++ b/styles/core/utility.scss
@@ -10,40 +10,40 @@
 	height: 100%;
 }
 
-.full-width {
+.w-full {
 	width: 100%;
 }
 
-.half-width {
+.w-half {
 	width: 50%;
 }
 
-.full-height {
+.h-full {
 	height: 100%;
 }
 
-.fill-width {
+.w-fill {
 	width: fill-parent-flow(1);
 }
 
-.fill-height {
+.h-fill {
 	height: fill-parent-flow(1);
 }
 
-.height-fit-children {
+.h-fit-children {
 	height: fit-children;
 }
 
-.width-fit-children {
+.w-fit-children {
 	width: fit-children;
 }
 
 @each $name, $width in ('200': 200px, '250': 250px, '300': 300px, '350': 350px, '400': 400px) {
-	.max-width-#{$width} {
+	.max-w-#{$width} {
 		max-width: $width;
 	}
 
-	.min-width-#{$width} {
+	.min-w-#{$width} {
 		min-width: $width;
 	}
 }
@@ -121,27 +121,27 @@ $s: list.join((0px), $spacers);
 // ALIGNMENT
 // ================
 
-.horizontal-align-center {
+.h-align-center {
 	horizontal-align: center;
 }
 
-.horizontal-align-right {
+.h-align-right {
 	horizontal-align: right;
 }
 
-.horizontal-align-left {
+.h-align-left {
 	horizontal-align: left;
 }
 
-.vertical-align-center {
+.v-align-center {
 	vertical-align: middle;
 }
 
-.vertical-align-top {
+.v-align-top {
 	vertical-align: top;
 }
 
-.vertical-align-bottom {
+.v-align-bottom {
 	vertical-align: bottom;
 }
 

From 0f3ea6f0509b9952154435271c2344fbb8738cca Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Mon, 14 Oct 2024 05:48:44 +0100
Subject: [PATCH 02/19] refactor: use new iterator methods

Thanks SCell!!
---
 scripts/hud/sticky-count.ts                |  3 +--
 scripts/modals/popups/lobby-settings.ts    |  3 +--
 scripts/pages/map-selector/map-selector.ts |  9 ++-------
 scripts/pages/settings/page.ts             |  6 +++---
 scripts/pages/settings/speedometer.ts      | 22 ++++++++++++----------
 scripts/util/toast-manager.ts              |  5 +++--
 6 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/scripts/hud/sticky-count.ts b/scripts/hud/sticky-count.ts
index 525d3b93..c7731516 100644
--- a/scripts/hud/sticky-count.ts
+++ b/scripts/hud/sticky-count.ts
@@ -35,8 +35,7 @@ class StickyCountHandler {
 			case StickyState.NOSTICKY:
 			default:
 				// remove all classes except the no sticky one
-				// TODO: iterator methods
-				[...StickyPanelClasses.values()]
+				StickyPanelClasses.values()
 					.filter((spClass) => spClass !== StickyPanelClasses.get(StickyState.NOSTICKY))
 					.forEach((spClass) => stickyPanel.RemoveClass(spClass));
 				break;
diff --git a/scripts/modals/popups/lobby-settings.ts b/scripts/modals/popups/lobby-settings.ts
index ee4c80a3..68053fa2 100644
--- a/scripts/modals/popups/lobby-settings.ts
+++ b/scripts/modals/popups/lobby-settings.ts
@@ -39,8 +39,7 @@ class LobbySettingsHandler implements OnPanelLoad {
 	}
 
 	submit() {
-		//  TODO: iterator methods
-		const type = [...this.lobbyButtons.entries()].find(([, button]) => button.checked)[0];
+		const type = this.lobbyButtons.entries().find(([, button]) => button.checked)[0];
 		SteamLobbyAPI.ChangeVisibility(+type as 0 | 1 | 2);
 
 		SteamLobbyAPI.SetMaxPlayers(this.getMaxPlayersEntered());
diff --git a/scripts/pages/map-selector/map-selector.ts b/scripts/pages/map-selector/map-selector.ts
index 8fc36b95..9c3042eb 100644
--- a/scripts/pages/map-selector/map-selector.ts
+++ b/scripts/pages/map-selector/map-selector.ts
@@ -134,8 +134,7 @@ class MapSelectorHandler implements OnPanelLoad {
 	/** Set up panel events to update filter panel properties in persistent storage whenever they change. */
 	setupFilterSaveEvents(panel: GenericPanel) {
 		// Find every panel of paneltype that we want to store
-		// TODO: spread not needed when we have iterator methods when on latest v8/TS
-		[...traverseChildren(panel)]
+		traverseChildren(panel)
 			.filter(({ paneltype }) => Object.keys(this.filterablePanels).includes(paneltype))
 			.forEach((panel) => {
 				const paneltype = panel.paneltype as keyof typeof this.filterablePanels;
@@ -319,11 +318,7 @@ class MapSelectorHandler implements OnPanelLoad {
 	/** When a NState button is pressed, update its styling classes */
 	onNStateBtnChanged(panelID: string, state: NStateButtonState) {
 		const panel = this.panels.cp.FindChildTraverse(panelID);
-
-		// TODO: Iterator method when on latest v8/TS
-		[...NStateButtonClasses.entries()].forEach(([i, className]) =>
-			$(`#${panelID}`).SetHasClass(className, state === i)
-		);
+		NStateButtonClasses.entries().forEach(([i, className]) => panel.SetHasClass(className, state === i));
 	}
 
 	/**
diff --git a/scripts/pages/settings/page.ts b/scripts/pages/settings/page.ts
index ef7dae97..a4613468 100644
--- a/scripts/pages/settings/page.ts
+++ b/scripts/pages/settings/page.ts
@@ -134,10 +134,10 @@ export class SettingsPage {
 	showImportExportDialogue(localeString: string, panelID: string) {
 		const section = $.GetContextPanel().FindChildTraverse(panelID);
 
-		// // TODO: iterator methods
-		const cvars = [...traverseChildren(section)]
+		const cvars = traverseChildren(section)
 			.filter((panel) => isSettingsPanel(panel) && panel.paneltype !== 'SettingsKeyBinder')
-			.map((panel) => panel.convar);
+			.map((panel) => panel.convar)
+			.toArray();
 
 		let cvarParams = '';
 		for (const [i, cvar] of cvars.entries()) cvarParams += (i !== 0 ? '&' : '') + 'cvar' + (i + 1) + '=' + cvar;
diff --git a/scripts/pages/settings/speedometer.ts b/scripts/pages/settings/speedometer.ts
index 79ae722d..dd935ce7 100644
--- a/scripts/pages/settings/speedometer.ts
+++ b/scripts/pages/settings/speedometer.ts
@@ -661,15 +661,17 @@ class RangeColorProfileHandler {
 	}
 
 	static saveAllProfiles(): void {
-		// TODO: iterator methods
-		const saveData = [...this.profiles.entries()].map(([name, range]) => {
-			range.markAsUnmodified();
-
-			return {
-				profile_name: name,
-				profile_ranges: range.save()
-			};
-		});
+		const saveData = this.profiles
+			.entries()
+			.map(([name, range]) => {
+				range.markAsUnmodified();
+
+				return {
+					profile_name: name,
+					profile_ranges: range.save()
+				};
+			})
+			.toArray();
 
 		if (SpeedometerSettingsAPI.SaveColorProfilesFromJS(saveData)) {
 			this.markAsUnmodified();
@@ -705,7 +707,7 @@ class RangeColorProfileHandler {
 			'',
 			'file://{resources}/layout/modals/popups/range-color-profile-name.xml',
 			`profileNames=${[
-				[...this.profiles.keys()].join(',')
+				this.profiles.keys().toArray().join(',')
 			]}&prefilledText=${prefilledText}&OKBtnText=${OKBtnText}&callback=${UiToolkitAPI.RegisterJSCallback(
 				callback
 			)}`
diff --git a/scripts/util/toast-manager.ts b/scripts/util/toast-manager.ts
index 584105f8..22b99229 100644
--- a/scripts/util/toast-manager.ts
+++ b/scripts/util/toast-manager.ts
@@ -180,8 +180,9 @@ class ToastManagerInternal {
 	deleteToastByID(toastID: string) {
 		if (!toastID) return;
 
-		// TODO: spread unneeded w iterator methods on latest v8
-		[...this.activeToasts.values()]
+		this.activeToasts
+			.values()
+			.toArray()
 			.flat()
 			.filter(({ id }) => id === toastID)
 			.forEach((toast) => this.deleteToast(toast));

From 02fd71bf2f9c09b241b33f2fec706256bf51c821 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Tue, 12 Nov 2024 16:50:35 +0000
Subject: [PATCH 03/19] fix: don't capitalize toast titles in JS

Looks bad, also Pano can capitalize in CSS if needed, stupid (me) doing it in JS
---
 scripts/util/toast-manager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/util/toast-manager.ts b/scripts/util/toast-manager.ts
index 22b99229..4d9f5735 100644
--- a/scripts/util/toast-manager.ts
+++ b/scripts/util/toast-manager.ts
@@ -238,7 +238,7 @@ class ToastManagerInternal {
 				toast.panel.AddClass(`toast-generic--${toast.style}`);
 			}
 
-			toast.panel.SetDialogVariable('toast_title', toast.title.toUpperCase());
+			toast.panel.SetDialogVariable('toast_title', toast.title);
 			toast.panel.SetDialogVariable('toast_message', toast.message);
 
 			toast.panel.FindChildInLayoutFile('Title').SetHasClass('hide', !toast.title);

From 2de427be5ab969e032eab5b3855fcb038976041b Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Tue, 12 Nov 2024 20:06:19 +0000
Subject: [PATCH 04/19] fix: random zone null error

Peen you've probs fixed this already and this'll probs conflict with your stuff, just overwrite.
---
 scripts/pages/zoning/zoning.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/pages/zoning/zoning.ts b/scripts/pages/zoning/zoning.ts
index cc863aa3..ca64dd67 100644
--- a/scripts/pages/zoning/zoning.ts
+++ b/scripts/pages/zoning/zoning.ts
@@ -201,7 +201,7 @@ class ZoneMenuHandler {
 				}
 			);
 			if (segmentChildContainer === null) continue;
-			if (segment.checkpoints.length === 0 && segment.cancel.length === 0) {
+			if (segment.checkpoints?.length === 0 && segment.cancel?.length === 0) {
 				trackChildContainer.FindChildTraverse<Panel>('CollapseButton').visible = false;
 				continue;
 			}

From e12302d26503dbe729d9d4c745cdfadf15623fdc Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Tue, 12 Nov 2024 20:06:46 +0000
Subject: [PATCH 05/19] chore: bump typescript to 5.6.4

Wanted the iterator method thingies
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 tsconfig.json     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index faf2862f..9036a416 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
 				"papaparse": "^5.4.1",
 				"prettier": "^3.3.3",
 				"prettier-eslint": "^16.3.0",
-				"typescript": "^5.5.4",
+				"typescript": "^5.6.3",
 				"typescript-eslint": "^8.1.0"
 			}
 		},
@@ -3681,9 +3681,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.5.4",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-			"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+			"version": "5.6.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+			"integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
 			"dev": true,
 			"bin": {
 				"tsc": "bin/tsc",
diff --git a/package.json b/package.json
index b0bd8629..3cc0ec7c 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
 		"papaparse": "^5.4.1",
 		"prettier": "^3.3.3",
 		"prettier-eslint": "^16.3.0",
-		"typescript": "^5.5.4",
+		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.1.0"
 	},
 	"lint-staged": {
diff --git a/tsconfig.json b/tsconfig.json
index b84a536a..f9967202 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"compilerOptions": {
-		"target": "ES2022",
+		"target": "ESNext",
 		"lib": ["ESNext"],
 		// Dynamic imports, import.meta, top-level await and import attributes are all unsupported.
 		"module": "ES2015",

From c083228879007db2653f0293e72ff4a7eaa23b69 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Tue, 12 Nov 2024 20:07:52 +0000
Subject: [PATCH 06/19] chore: bump types submodule

Yaaaaay we have to do submodule bumps for P2:CE-only stuff :)
---
 scripts/types | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/types b/scripts/types
index cca88a85..21bfb3e1 160000
--- a/scripts/types
+++ b/scripts/types
@@ -1 +1 @@
-Subproject commit cca88a85b4af05c117caef54125873abbce528c4
+Subproject commit 21bfb3e16f4f3c480fb6510c0cf84a8d1cfd1425

From 2e377a97de59942738712c0750c67768535cbdf5 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Fri, 15 Nov 2024 05:54:51 +0000
Subject: [PATCH 07/19] chore: bump deps and node version in CI

---
 .github/workflows/format.yml |   2 +-
 package-lock.json            | 415 ++++++++++++++++-------------------
 package.json                 |  12 +-
 3 files changed, 199 insertions(+), 230 deletions(-)

diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index 259bd8dd..bac843bd 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -14,7 +14,7 @@ jobs:
     - name: Setup Node.js 18
       uses: actions/setup-node@v3
       with:
-        node-version: '18'
+        node-version: '20'
         cache: 'npm'
 
     - name: Install dependencies
diff --git a/package-lock.json b/package-lock.json
index 9036a416..a47c329f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,20 +9,20 @@
 			"version": "2.0.0",
 			"license": "MIT",
 			"devDependencies": {
-				"@eslint/js": "^9.9.0",
+				"@eslint/js": "^9.14.0",
 				"@types/eslint__js": "^8.42.3",
-				"axios": "^1.7.4",
-				"eslint": "^9.9.0",
+				"axios": "^1.7.7",
+				"eslint": "^9.14.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-prettier": "^5.2.1",
 				"eslint-plugin-unicorn": "^55.0.0",
-				"husky": "^9.1.4",
-				"lint-staged": "^15.2.9",
+				"husky": "^9.1.6",
+				"lint-staged": "^15.2.10",
 				"papaparse": "^5.4.1",
 				"prettier": "^3.3.3",
 				"prettier-eslint": "^16.3.0",
 				"typescript": "^5.6.3",
-				"typescript-eslint": "^8.1.0"
+				"typescript-eslint": "^8.14.0"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -149,18 +149,18 @@
 			}
 		},
 		"node_modules/@eslint-community/regexpp": {
-			"version": "4.11.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
-			"integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+			"version": "4.12.1",
+			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+			"integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
 			"dev": true,
 			"engines": {
 				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
 			}
 		},
 		"node_modules/@eslint/config-array": {
-			"version": "0.17.1",
-			"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.17.1.tgz",
-			"integrity": "sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==",
+			"version": "0.18.0",
+			"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
+			"integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
 			"dev": true,
 			"dependencies": {
 				"@eslint/object-schema": "^2.1.4",
@@ -171,26 +171,13 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
-		"node_modules/@eslint/config-array/node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+		"node_modules/@eslint/core": {
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
+			"integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
 			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
-			}
-		},
-		"node_modules/@eslint/config-array/node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^1.1.7"
-			},
 			"engines": {
-				"node": "*"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
 		"node_modules/@eslint/eslintrc": {
@@ -216,44 +203,69 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
-		"node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+		"node_modules/@eslint/js": {
+			"version": "9.14.0",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
+			"integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
 			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
-		"node_modules/@eslint/eslintrc/node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+		"node_modules/@eslint/object-schema": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
+			"integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
+			"dev": true,
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/plugin-kit": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+			"integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
 			"dev": true,
 			"dependencies": {
-				"brace-expansion": "^1.1.7"
+				"levn": "^0.4.1"
 			},
 			"engines": {
-				"node": "*"
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
-		"node_modules/@eslint/js": {
-			"version": "9.9.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.9.0.tgz",
-			"integrity": "sha512-hhetes6ZHP3BlXLxmd8K2SNgkhNSi+UcecbnwWKwpP7kyi/uC75DJ1lOOBO3xrC4jyojtGE3YxKZPHfk4yrgug==",
+		"node_modules/@humanfs/core": {
+			"version": "0.19.1",
+			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+			"integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
 			"dev": true,
 			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+				"node": ">=18.18.0"
 			}
 		},
-		"node_modules/@eslint/object-schema": {
-			"version": "2.1.4",
-			"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
-			"integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
+		"node_modules/@humanfs/node": {
+			"version": "0.16.6",
+			"resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+			"integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
 			"dev": true,
+			"dependencies": {
+				"@humanfs/core": "^0.19.1",
+				"@humanwhocodes/retry": "^0.3.0"
+			},
 			"engines": {
-				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+				"node": ">=18.18.0"
+			}
+		},
+		"node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+			"version": "0.3.1",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+			"integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+			"dev": true,
+			"engines": {
+				"node": ">=18.18"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/nzakas"
 			}
 		},
 		"node_modules/@humanwhocodes/config-array": {
@@ -271,28 +283,6 @@
 				"node": ">=10.10.0"
 			}
 		},
-		"node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
-			}
-		},
-		"node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^1.1.7"
-			},
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/@humanwhocodes/module-importer": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -314,9 +304,9 @@
 			"dev": true
 		},
 		"node_modules/@humanwhocodes/retry": {
-			"version": "0.3.0",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.0.tgz",
-			"integrity": "sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==",
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+			"integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
 			"dev": true,
 			"engines": {
 				"node": ">=18.18"
@@ -411,9 +401,9 @@
 			}
 		},
 		"node_modules/@types/estree": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
 			"dev": true
 		},
 		"node_modules/@types/json-schema": {
@@ -429,16 +419,16 @@
 			"dev": true
 		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.1.0.tgz",
-			"integrity": "sha512-LlNBaHFCEBPHyD4pZXb35mzjGkuGKXU5eeCA1SxvHfiRES0E82dOounfVpL4DCqYvJEKab0bZIA0gCRpdLKkCw==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.14.0.tgz",
+			"integrity": "sha512-tqp8H7UWFaZj0yNO6bycd5YjMwxa6wIHOLZvWPkidwbgLCsBMetQoGj7DPuAlWa2yGO3H48xmPwjhsSPPCGU5w==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/regexpp": "^4.10.0",
-				"@typescript-eslint/scope-manager": "8.1.0",
-				"@typescript-eslint/type-utils": "8.1.0",
-				"@typescript-eslint/utils": "8.1.0",
-				"@typescript-eslint/visitor-keys": "8.1.0",
+				"@typescript-eslint/scope-manager": "8.14.0",
+				"@typescript-eslint/type-utils": "8.14.0",
+				"@typescript-eslint/utils": "8.14.0",
+				"@typescript-eslint/visitor-keys": "8.14.0",
 				"graphemer": "^1.4.0",
 				"ignore": "^5.3.1",
 				"natural-compare": "^1.4.0",
@@ -462,15 +452,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.1.0.tgz",
-			"integrity": "sha512-U7iTAtGgJk6DPX9wIWPPOlt1gO57097G06gIcl0N0EEnNw8RGD62c+2/DiP/zL7KrkqnnqF7gtFGR7YgzPllTA==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.14.0.tgz",
+			"integrity": "sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "8.1.0",
-				"@typescript-eslint/types": "8.1.0",
-				"@typescript-eslint/typescript-estree": "8.1.0",
-				"@typescript-eslint/visitor-keys": "8.1.0",
+				"@typescript-eslint/scope-manager": "8.14.0",
+				"@typescript-eslint/types": "8.14.0",
+				"@typescript-eslint/typescript-estree": "8.14.0",
+				"@typescript-eslint/visitor-keys": "8.14.0",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -490,13 +480,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.1.0.tgz",
-			"integrity": "sha512-DsuOZQji687sQUjm4N6c9xABJa7fjvfIdjqpSIIVOgaENf2jFXiM9hIBZOL3hb6DHK9Nvd2d7zZnoMLf9e0OtQ==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.14.0.tgz",
+			"integrity": "sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "8.1.0",
-				"@typescript-eslint/visitor-keys": "8.1.0"
+				"@typescript-eslint/types": "8.14.0",
+				"@typescript-eslint/visitor-keys": "8.14.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -507,13 +497,13 @@
 			}
 		},
 		"node_modules/@typescript-eslint/type-utils": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.1.0.tgz",
-			"integrity": "sha512-oLYvTxljVvsMnldfl6jIKxTaU7ok7km0KDrwOt1RHYu6nxlhN3TIx8k5Q52L6wR33nOwDgM7VwW1fT1qMNfFIA==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.14.0.tgz",
+			"integrity": "sha512-Xcz9qOtZuGusVOH5Uk07NGs39wrKkf3AxlkK79RBK6aJC1l03CobXjJbwBPSidetAOV+5rEVuiT1VSBUOAsanQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/typescript-estree": "8.1.0",
-				"@typescript-eslint/utils": "8.1.0",
+				"@typescript-eslint/typescript-estree": "8.14.0",
+				"@typescript-eslint/utils": "8.14.0",
 				"debug": "^4.3.4",
 				"ts-api-utils": "^1.3.0"
 			},
@@ -531,9 +521,9 @@
 			}
 		},
 		"node_modules/@typescript-eslint/types": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.1.0.tgz",
-			"integrity": "sha512-q2/Bxa0gMOu/2/AKALI0tCKbG2zppccnRIRCW6BaaTlRVaPKft4oVYPp7WOPpcnsgbr0qROAVCVKCvIQ0tbWog==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.14.0.tgz",
+			"integrity": "sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==",
 			"dev": true,
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -544,15 +534,15 @@
 			}
 		},
 		"node_modules/@typescript-eslint/typescript-estree": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.1.0.tgz",
-			"integrity": "sha512-NTHhmufocEkMiAord/g++gWKb0Fr34e9AExBRdqgWdVBaKoei2dIyYKD9Q0jBnvfbEA5zaf8plUFMUH6kQ0vGg==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.14.0.tgz",
+			"integrity": "sha512-OPXPLYKGZi9XS/49rdaCbR5j/S14HazviBlUQFvSKz3npr3NikF+mrgK7CFVur6XEt95DZp/cmke9d5i3vtVnQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "8.1.0",
-				"@typescript-eslint/visitor-keys": "8.1.0",
+				"@typescript-eslint/types": "8.14.0",
+				"@typescript-eslint/visitor-keys": "8.14.0",
 				"debug": "^4.3.4",
-				"globby": "^11.1.0",
+				"fast-glob": "^3.3.2",
 				"is-glob": "^4.0.3",
 				"minimatch": "^9.0.4",
 				"semver": "^7.6.0",
@@ -571,16 +561,31 @@
 				}
 			}
 		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/@typescript-eslint/utils": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.1.0.tgz",
-			"integrity": "sha512-ypRueFNKTIFwqPeJBfeIpxZ895PQhNyH4YID6js0UoBImWYoSjBsahUn9KMiJXh94uOjVBgHD9AmkyPsPnFwJA==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.14.0.tgz",
+			"integrity": "sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
-				"@typescript-eslint/scope-manager": "8.1.0",
-				"@typescript-eslint/types": "8.1.0",
-				"@typescript-eslint/typescript-estree": "8.1.0"
+				"@typescript-eslint/scope-manager": "8.14.0",
+				"@typescript-eslint/types": "8.14.0",
+				"@typescript-eslint/typescript-estree": "8.14.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -594,12 +599,12 @@
 			}
 		},
 		"node_modules/@typescript-eslint/visitor-keys": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.1.0.tgz",
-			"integrity": "sha512-ba0lNI19awqZ5ZNKh6wCModMwoZs457StTebQ0q1NP58zSi2F6MOZRXwfKZy+jB78JNJ/WH8GSh2IQNzXX8Nag==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.14.0.tgz",
+			"integrity": "sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/types": "8.1.0",
+				"@typescript-eslint/types": "8.14.0",
 				"eslint-visitor-keys": "^3.4.3"
 			},
 			"engines": {
@@ -617,9 +622,9 @@
 			"dev": true
 		},
 		"node_modules/acorn": {
-			"version": "8.12.1",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-			"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+			"integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
 			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
@@ -714,9 +719,9 @@
 			"dev": true
 		},
 		"node_modules/axios": {
-			"version": "1.7.4",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
-			"integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+			"version": "1.7.7",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+			"integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
 			"dev": true,
 			"dependencies": {
 				"follow-redirects": "^1.15.6",
@@ -1111,27 +1116,31 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "9.9.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.9.0.tgz",
-			"integrity": "sha512-JfiKJrbx0506OEerjK2Y1QlldtBxkAlLxT5OEcRF8uaQ86noDe2k31Vw9rnSWv+MXZHj7OOUV/dA0AhdLFcyvA==",
+			"version": "9.14.0",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
+			"integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
 			"dev": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
-				"@eslint-community/regexpp": "^4.11.0",
-				"@eslint/config-array": "^0.17.1",
+				"@eslint-community/regexpp": "^4.12.1",
+				"@eslint/config-array": "^0.18.0",
+				"@eslint/core": "^0.7.0",
 				"@eslint/eslintrc": "^3.1.0",
-				"@eslint/js": "9.9.0",
+				"@eslint/js": "9.14.0",
+				"@eslint/plugin-kit": "^0.2.0",
+				"@humanfs/node": "^0.16.6",
 				"@humanwhocodes/module-importer": "^1.0.1",
-				"@humanwhocodes/retry": "^0.3.0",
-				"@nodelib/fs.walk": "^1.2.8",
+				"@humanwhocodes/retry": "^0.4.0",
+				"@types/estree": "^1.0.6",
+				"@types/json-schema": "^7.0.15",
 				"ajv": "^6.12.4",
 				"chalk": "^4.0.0",
 				"cross-spawn": "^7.0.2",
 				"debug": "^4.3.2",
 				"escape-string-regexp": "^4.0.0",
-				"eslint-scope": "^8.0.2",
-				"eslint-visitor-keys": "^4.0.0",
-				"espree": "^10.1.0",
+				"eslint-scope": "^8.2.0",
+				"eslint-visitor-keys": "^4.2.0",
+				"espree": "^10.3.0",
 				"esquery": "^1.5.0",
 				"esutils": "^2.0.2",
 				"fast-deep-equal": "^3.1.3",
@@ -1141,14 +1150,11 @@
 				"ignore": "^5.2.0",
 				"imurmurhash": "^0.1.4",
 				"is-glob": "^4.0.0",
-				"is-path-inside": "^3.0.3",
 				"json-stable-stringify-without-jsonify": "^1.0.1",
-				"levn": "^0.4.1",
 				"lodash.merge": "^4.6.2",
 				"minimatch": "^3.1.2",
 				"natural-compare": "^1.4.0",
 				"optionator": "^0.9.3",
-				"strip-ansi": "^6.0.1",
 				"text-table": "^0.2.0"
 			},
 			"bin": {
@@ -1257,9 +1263,9 @@
 			}
 		},
 		"node_modules/eslint-scope": {
-			"version": "8.0.2",
-			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.0.2.tgz",
-			"integrity": "sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==",
+			"version": "8.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
+			"integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
 			"dev": true,
 			"dependencies": {
 				"esrecurse": "^4.3.0",
@@ -1284,20 +1290,10 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
-		"node_modules/eslint/node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
-			}
-		},
 		"node_modules/eslint/node_modules/eslint-visitor-keys": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz",
-			"integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==",
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+			"integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
 			"dev": true,
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1306,27 +1302,15 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
-		"node_modules/eslint/node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^1.1.7"
-			},
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/espree": {
-			"version": "10.1.0",
-			"resolved": "https://registry.npmjs.org/espree/-/espree-10.1.0.tgz",
-			"integrity": "sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==",
+			"version": "10.3.0",
+			"resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+			"integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
 			"dev": true,
 			"dependencies": {
-				"acorn": "^8.12.0",
+				"acorn": "^8.14.0",
 				"acorn-jsx": "^5.3.2",
-				"eslint-visitor-keys": "^4.0.0"
+				"eslint-visitor-keys": "^4.2.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1336,9 +1320,9 @@
 			}
 		},
 		"node_modules/espree/node_modules/eslint-visitor-keys": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz",
-			"integrity": "sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==",
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+			"integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
 			"dev": true,
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1644,28 +1628,6 @@
 				"node": ">=10.13.0"
 			}
 		},
-		"node_modules/glob/node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
-			}
-		},
-		"node_modules/glob/node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
-			"dependencies": {
-				"brace-expansion": "^1.1.7"
-			},
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/globals": {
 			"version": "14.0.0",
 			"resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -1762,9 +1724,9 @@
 			}
 		},
 		"node_modules/husky": {
-			"version": "9.1.4",
-			"resolved": "https://registry.npmjs.org/husky/-/husky-9.1.4.tgz",
-			"integrity": "sha512-bho94YyReb4JV7LYWRWxZ/xr6TtOTt8cMfmQ39MQYJ7f/YE268s3GdghGwi+y4zAeqewE5zYLvuhV0M0ijsDEA==",
+			"version": "9.1.6",
+			"resolved": "https://registry.npmjs.org/husky/-/husky-9.1.6.tgz",
+			"integrity": "sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==",
 			"dev": true,
 			"bin": {
 				"husky": "bin.js"
@@ -2036,9 +1998,9 @@
 			"dev": true
 		},
 		"node_modules/lint-staged": {
-			"version": "15.2.9",
-			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.9.tgz",
-			"integrity": "sha512-BZAt8Lk3sEnxw7tfxM7jeZlPRuT4M68O0/CwZhhaw6eeWu0Lz5eERE3m386InivXB64fp/mDID452h48tvKlRQ==",
+			"version": "15.2.10",
+			"resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.10.tgz",
+			"integrity": "sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==",
 			"dev": true,
 			"dependencies": {
 				"chalk": "~5.3.0",
@@ -2047,7 +2009,7 @@
 				"execa": "~8.0.1",
 				"lilconfig": "~3.1.2",
 				"listr2": "~8.2.4",
-				"micromatch": "~4.0.7",
+				"micromatch": "~4.0.8",
 				"pidtree": "~0.6.0",
 				"string-argv": "~0.3.2",
 				"yaml": "~2.5.0"
@@ -2377,18 +2339,25 @@
 			}
 		},
 		"node_modules/minimatch": {
-			"version": "9.0.5",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
 			"dev": true,
 			"dependencies": {
-				"brace-expansion": "^2.0.1"
+				"brace-expansion": "^1.1.7"
 			},
 			"engines": {
-				"node": ">=16 || 14 >=14.17"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
+				"node": "*"
+			}
+		},
+		"node_modules/minimatch/node_modules/brace-expansion": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"dev": true,
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
 			}
 		},
 		"node_modules/ms": {
@@ -3694,14 +3663,14 @@
 			}
 		},
 		"node_modules/typescript-eslint": {
-			"version": "8.1.0",
-			"resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.1.0.tgz",
-			"integrity": "sha512-prB2U3jXPJLpo1iVLN338Lvolh6OrcCZO+9Yv6AR+tvegPPptYCDBIHiEEUdqRi8gAv2bXNKfMUrgAd2ejn/ow==",
+			"version": "8.14.0",
+			"resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.14.0.tgz",
+			"integrity": "sha512-K8fBJHxVL3kxMmwByvz8hNdBJ8a0YqKzKDX6jRlrjMuNXyd5T2V02HIq37+OiWXvUUOXgOOGiSSOh26Mh8pC3w==",
 			"dev": true,
 			"dependencies": {
-				"@typescript-eslint/eslint-plugin": "8.1.0",
-				"@typescript-eslint/parser": "8.1.0",
-				"@typescript-eslint/utils": "8.1.0"
+				"@typescript-eslint/eslint-plugin": "8.14.0",
+				"@typescript-eslint/parser": "8.14.0",
+				"@typescript-eslint/utils": "8.14.0"
 			},
 			"engines": {
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
diff --git a/package.json b/package.json
index 3cc0ec7c..df400614 100644
--- a/package.json
+++ b/package.json
@@ -22,20 +22,20 @@
 	"author": "Momentum Team",
 	"license": "MIT",
 	"devDependencies": {
-		"@eslint/js": "^9.9.0",
+		"@eslint/js": "^9.14.0",
 		"@types/eslint__js": "^8.42.3",
-		"axios": "^1.7.4",
-		"eslint": "^9.9.0",
+		"axios": "^1.7.7",
+		"eslint": "^9.14.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
 		"eslint-plugin-unicorn": "^55.0.0",
-		"husky": "^9.1.4",
-		"lint-staged": "^15.2.9",
+		"husky": "^9.1.6",
+		"lint-staged": "^15.2.10",
 		"papaparse": "^5.4.1",
 		"prettier": "^3.3.3",
 		"prettier-eslint": "^16.3.0",
 		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.1.0"
+		"typescript-eslint": "^8.14.0"
 	},
 	"lint-staged": {
 		"**/*.{js,ts,scss,css,md}": [

From 073c131de11ccf6ca241885376bda974a1d5b7b4 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Sat, 16 Nov 2024 00:10:56 +0000
Subject: [PATCH 08/19] fix: broken delayloadlist if map selector list is ever
 empty

---
 layout/pages/map-selector/map-selector.xml  | 2 +-
 styles/pages/map-selector/map-selector.scss | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/layout/pages/map-selector/map-selector.xml b/layout/pages/map-selector/map-selector.xml
index 1ebe4947..0d4dda8e 100644
--- a/layout/pages/map-selector/map-selector.xml
+++ b/layout/pages/map-selector/map-selector.xml
@@ -168,7 +168,7 @@
 									</Panel>
 								</Panel>
 
-								<Panel class="w-full">
+								<Panel class="w-full h-fill">
 									<DelayLoadList id="MapListContainer" class="mapselector__list" itemheight="54px" itemwidth="100%" spacersize="3px" spacerperiod="1">
 										<!-- Populated via MapEntry snippets in code -->
 									</DelayLoadList>
diff --git a/styles/pages/map-selector/map-selector.scss b/styles/pages/map-selector/map-selector.scss
index 95f68117..b38a102a 100644
--- a/styles/pages/map-selector/map-selector.scss
+++ b/styles/pages/map-selector/map-selector.scss
@@ -86,7 +86,9 @@
 	// Elements are MapEntrys, in mapentry.scss
 	&__list {
 		flow-children: down;
-		height: fill-parent-flow(1);
+		// Important note: always ensure a DelayLoadList has a non-zero height, if having 0 items results in 0 height,
+		// it'll never repaint itself when items are added.
+		height: 100%;
 		padding-right: 16px;
 		width: 100%;
 		overflow: squish scroll;

From 96fcf3d3f7dfb586f3f259d327de14d9a0dbc878 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Fri, 15 Nov 2024 05:57:13 +0000
Subject: [PATCH 09/19] fix: fetch-web.sh not working with npm run

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index df400614..b8d7ed44 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
 		"pre-commit": "lint-staged",
 		"get-learn": "node tools/get-learn.js",
 		"get-credits": "node tools/get-credits.js",
-		"fetch-web": "./tools/fetch-web.sh"
+		"fetch-web": "bash tools/fetch-web.sh"
 	},
 	"type": "module",
 	"author": "Momentum Team",

From 82662f0c58f75f3c81876e900828b220fa5df84f Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Fri, 15 Nov 2024 04:27:38 +0000
Subject: [PATCH 10/19] chore: update website dependencies

---
 scripts/common/web.ts | 97 +++++++++++++++++++++++++------------------
 1 file changed, 57 insertions(+), 40 deletions(-)

diff --git a/scripts/common/web.ts b/scripts/common/web.ts
index 180b6532..4562b18a 100644
--- a/scripts/common/web.ts
+++ b/scripts/common/web.ts
@@ -29,22 +29,14 @@ type File = never;
 
 export const STEAM_APPIDS = [669270, 1802710];
 
-export function approvedBspPath(key: string | number): string {
+export function bspPath(key: string | number): string {
 	return `maps/${key}.bsp`;
 }
 
-export function approvedVmfsPath(key: string | number): string {
+export function vmfsPath(key: string | number): string {
 	return `maps/${key}_VMFs.zip`;
 }
 
-export function submissionBspPath(key: string | number): string {
-	return `submissions/${key}.bsp`;
-}
-
-export function submissionVmfsPath(key: string | number): string {
-	return `submissions/${key}_VMFs.zip`;
-}
-
 export function imgSmallPath(key: string): string {
 	return `img/${key}-small.jpg`;
 }
@@ -97,7 +89,7 @@ export const MAX_TEST_INVITES = 20;
 export const MIN_PUBLIC_TESTING_DURATION = 7 * 24 * 60 * 60 * 1000;
 export const MAX_CREDITS_EXCEPT_TESTERS = 20;
 export const MAX_BIO_LENGTH = 2000;
-export const MIN_MAP_DESCRIPTION_LENGTH = 30; // Fuck you, make an effort
+export const MIN_MAP_DESCRIPTION_LENGTH = 10;
 export const MAX_MAP_DESCRIPTION_LENGTH = 1500;
 export const MIN_MAP_NAME_LENGTH = 3;
 export const MAX_MAP_NAME_LENGTH = 32; // Seems high but this is actually a constant in engine.
@@ -188,10 +180,14 @@ export const SocialsData: Readonly<
 	}
 };
 
+export function steamAvatarUrl(id: string): string {
+	return `https://avatars.cloudflare.steamstatic.com/${id}_full.jpg`;
+}
+
 // This is the specific key Steam uses for all missing avatars.
 // They even kept it when migrating to Cloudflare!
 export const STEAM_MISSING_AVATAR = 'fef49e7fa7e1997310d705b2a6158ff8dc1cdfeb';
-export const STEAM_MISSING_AVATAR_URL = `https://avatars.cloudflare.steamstatic.com/${STEAM_MISSING_AVATAR}_full.jpg`;
+export const STEAM_MISSING_AVATAR_URL = steamAvatarUrl(STEAM_MISSING_AVATAR);
 
 export enum ActivityType {
 	ALL = 0,
@@ -582,13 +578,14 @@ export enum MapStatus {
 	DISABLED = 5
 }
 
-export const CombinedMapStatuses = Object.freeze({
+export const MapStatuses = Object.freeze({
 	IN_SUBMISSION: [
 		MapStatus.PRIVATE_TESTING,
 		MapStatus.PUBLIC_TESTING,
 		MapStatus.CONTENT_APPROVAL,
 		MapStatus.FINAL_APPROVAL
-	]
+	],
+	PRIVATE: [MapStatus.PRIVATE_TESTING, MapStatus.CONTENT_APPROVAL]
 });
 
 export enum MapSubmissionType {
@@ -968,7 +965,11 @@ export const MapStatusChangeRules: ReadonlyArray<{ from: MapStatus; to: MapStatu
 		{ from: MapStatus.PUBLIC_TESTING, to: MapStatus.PRIVATE_TESTING, roles: [] },
 		{ from: MapStatus.PUBLIC_TESTING, to: MapStatus.CONTENT_APPROVAL, roles: [Role.ADMIN, Role.MODERATOR] },
 		{ from: MapStatus.PUBLIC_TESTING, to: MapStatus.PUBLIC_TESTING, roles: [] },
-		{ from: MapStatus.PUBLIC_TESTING, to: MapStatus.FINAL_APPROVAL, roles: ['submitter'] },
+		{
+			from: MapStatus.PUBLIC_TESTING,
+			to: MapStatus.FINAL_APPROVAL,
+			roles: ['submitter', Role.ADMIN, Role.MODERATOR]
+		},
 		{ from: MapStatus.PUBLIC_TESTING, to: MapStatus.DISABLED, roles: [Role.ADMIN, Role.MODERATOR] },
 
 		{ from: MapStatus.FINAL_APPROVAL, to: MapStatus.APPROVED, roles: [Role.ADMIN, Role.MODERATOR] },
@@ -1195,13 +1196,12 @@ export interface MMap {
 	id: number;
 	name: string;
 	status: MapStatus;
-	downloadURL: string;
-	hash: string;
-	vmfDownloadURL: string;
 	submitterID: number;
 	createdAt: DateString;
 	updatedAt: DateString;
-	zones: MapZones;
+	currentVersion: MapVersion;
+	currentVersionID: string;
+	versions: MapVersion[];
 	info: MapInfo;
 	submission: MapSubmission;
 	submitter: User;
@@ -1216,6 +1216,19 @@ export interface MMap {
 	testInvites?: MapTestInvite[];
 }
 
+export interface MapVersion {
+	id: string;
+	versionNum: number;
+	submitterID: number | null;
+	changelog: string;
+	zones: MapZones;
+	bspHash: string;
+	zoneHash: string;
+	downloadURL: string;
+	vmfDownloadURL?: string;
+	createdAt: DateString;
+}
+
 export interface MapInfo {
 	description: string;
 	youtubeID: string;
@@ -1330,8 +1343,6 @@ export interface MapSubmission {
 	suggestions: MapSubmissionSuggestion[];
 	placeholders: MapSubmissionPlaceholder[];
 	dates: MapSubmissionDate[];
-	currentVersion: MapSubmissionVersion;
-	versions: MapSubmissionVersion[];
 }
 
 export interface MapSubmissionApproval {
@@ -1362,17 +1373,6 @@ export interface MapSubmissionSuggestion {
 	comment?: string;
 }
 
-export interface MapSubmissionVersion {
-	id: string;
-	versionNum: number;
-	changelog: string;
-	zones: MapZones;
-	hash: string;
-	downloadURL: string;
-	vmfDownloadURL?: string;
-	createdAt: DateString;
-}
-
 export type MapTags = string[];
 
 export interface MapTestInvite {
@@ -1392,21 +1392,28 @@ export interface MapZones {
 	dataTimestamp: number;
 	maxVelocity?: number;
 	tracks: MapTracks;
+	globalRegions?: GlobalRegions;
+}
+
+export interface GlobalRegions {
+	allowBhop: Region[];
 }
 
 export interface MapTracks {
 	main: MainTrack;
-	bonuses: BonusTrack[];
+	bonuses?: BonusTrack[];
 }
 
 export interface MainTrack {
 	zones: TrackZones;
 	stagesEndAtStageStarts: boolean;
+	bhopEnabled?: boolean;
 }
 
 export interface BonusTrack {
 	zones?: TrackZones;
 	defragModifiers?: number;
+	bhopEnabled?: boolean;
 }
 
 export interface TrackZones {
@@ -1416,7 +1423,7 @@ export interface TrackZones {
 
 export interface Segment {
 	checkpoints: Zone[];
-	cancel: Zone[];
+	cancel?: Zone[];
 	name?: string;
 	limitStartGroundSpeed: boolean;
 	checkpointsRequired: boolean;
@@ -1593,12 +1600,21 @@ export type AdminActivitiesGetQuery = PagedQuery & {
 
 //#region Map
 
-type BaseMapsGetAllExpand = 'zones' | 'leaderboards' | 'info' | 'stats' | 'submitter' | 'credits';
+type BaseMapsGetAllExpand =
+	| 'leaderboards'
+	| 'info'
+	| 'stats'
+	| 'submitter'
+	| 'currentVersionWithZones'
+	| 'currentVersion'
+	| 'versions'
+	| 'versionsWithZones'
+	| 'credits';
 
 export type MapsGetAllExpand = Array<BaseMapsGetAllExpand | 'inFavorites' | 'personalBest' | 'worldRecord'>;
 
 export type MapsGetAllSubmissionExpand = Array<
-	BaseMapsGetAllExpand | 'inFavorites' | 'personalBest' | 'worldRecord' | 'currentVersion' | 'versions' | 'reviews'
+	BaseMapsGetAllExpand | 'inFavorites' | 'personalBest' | 'worldRecord' | 'reviews'
 >;
 
 type MapsGetAllBaseQuery = {
@@ -1717,7 +1733,8 @@ export type MapLeaderboardGetQuery = PagedQuery & {
 	style?: Style; // Default 0
 	expand?: MapRunsGetExpand;
 	filter?: MapRunsGetFilter;
-	filterUserIDs?: number[];
+	userIDs?: number[];
+	steamIDs?: string[];
 	orderByDate?: boolean;
 };
 
@@ -1734,13 +1751,13 @@ export type MapLeaderboardGetRunQuery = PagedQuery & {
 //#endregion
 //#region Submissions
 
-export interface CreateMapSubmissionVersion extends Pick<MapSubmissionVersion, 'changelog' | 'zones'> {
+export interface CreateMapVersion extends Pick<MapVersion, 'changelog' | 'zones'> {
 	resetLeaderboards?: boolean;
 }
 
-export interface CreateMapSubmissionVersionWithFiles {
+export interface CreateMapVersionWithFiles {
 	vmfs: File[];
-	data: CreateMapSubmissionVersion;
+	data: CreateMapVersion;
 }
 
 //#endregion

From d6d78463dafd29410dbfb92821f7bb931a6ddc81 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Fri, 15 Nov 2024 05:50:22 +0000
Subject: [PATCH 11/19] feat: ToastStyle enum for toast styling

---
 scripts/types-mom/events.d.ts |  2 +-
 scripts/util/toast-manager.ts | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/scripts/types-mom/events.d.ts b/scripts/types-mom/events.d.ts
index ce4c1205..e1b9c657 100644
--- a/scripts/types-mom/events.d.ts
+++ b/scripts/types-mom/events.d.ts
@@ -195,7 +195,7 @@ interface GlobalEventNameMap {
 		location: import('util/toast-manager').ToastLocation,
 		duration: number,
 		icon: string,
-		style: string
+		style: import('util/toast-manager').ToastStyle
 	) => void;
 
 	/**
diff --git a/scripts/util/toast-manager.ts b/scripts/util/toast-manager.ts
index 4d9f5735..0738f3b4 100644
--- a/scripts/util/toast-manager.ts
+++ b/scripts/util/toast-manager.ts
@@ -11,6 +11,17 @@ const DEFAULT_TOAST_DURATION = 10;
 const MAX_ACTIVE_TOASTS = 10;
 const HIDE_TRANSITION_DURATION = 0.3; // This should match transition-duration properties in toast.scss
 
+export enum ToastStyle {
+	INFO = 'info',
+	SUCCESS = 'success',
+	WARNING = 'warning',
+	ERROR = 'error',
+	BLUE = 'blue',
+	RED = 'red',
+	GREEN = 'green',
+	ORANGE = 'orange'
+}
+
 export class ToastError extends Error {
 	constructor(message: string) {
 		super(`ToastManager: ${message}`);
@@ -22,7 +33,7 @@ export type ToastCreateArgs = ({ title: string; message?: string } | { title?: s
 	icon?: string;
 	duration?: number;
 	location?: ToastLocation;
-	style?: string;
+	style?: ToastStyle | string;
 	id?: string;
 	parameters?: Record<string, any>;
 };
@@ -31,7 +42,7 @@ export interface ToastCreateWithLayoutArgs {
 	layoutFile: string;
 	duration?: number;
 	location?: ToastLocation;
-	style?: string;
+	style?: ToastStyle | string;
 	id?: string;
 	parameters?: Record<string, any>;
 }

From 6732684c869f00a6129c07be4357cf14ca236f27 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Fri, 22 Nov 2024 22:22:12 +0000
Subject: [PATCH 12/19] fix: try localize toasts starting with #

I thought SetDialogVariable was supposed to do this, but isn't working,
idk.
---
 scripts/util/toast-manager.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/scripts/util/toast-manager.ts b/scripts/util/toast-manager.ts
index 0738f3b4..85412c2e 100644
--- a/scripts/util/toast-manager.ts
+++ b/scripts/util/toast-manager.ts
@@ -249,8 +249,17 @@ class ToastManagerInternal {
 				toast.panel.AddClass(`toast-generic--${toast.style}`);
 			}
 
-			toast.panel.SetDialogVariable('toast_title', toast.title);
-			toast.panel.SetDialogVariable('toast_message', toast.message);
+			if (toast.title)
+				toast.panel.SetDialogVariable(
+					'toast_title',
+					toast.title.startsWith('#') ? $.Localize(toast.title) : toast.title
+				);
+
+			if (toast.message)
+				toast.panel.SetDialogVariable(
+					'toast_message',
+					toast.message.startsWith('#') ? $.Localize(toast.message) : toast.message
+				);
 
 			toast.panel.FindChildInLayoutFile('Title').SetHasClass('hide', !toast.title);
 

From 47e7766c910817048aa03d1e6970d6c4a8855ae2 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Sat, 23 Nov 2024 10:54:50 +0000
Subject: [PATCH 13/19] tmp: fix const enum usage due to broken native
 typescript compilation

This commit resolves a couple of JS exceptions until the builtin
typescript compiler can detect const enums in .d.ts files. One of these
threw every frame, so worth fixing temporarily.

When compilation is fixed, just revert this commit.
---
 scripts/common/state.ts              |  9 ---------
 scripts/hud/replay-controls.ts       | 10 ++++++++--
 scripts/pages/main-menu/main-menu.ts | 13 +++++++++++--
 scripts/types-mom/apis.d.ts          |  2 +-
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/scripts/common/state.ts b/scripts/common/state.ts
index a64c7156..a702f2d8 100644
--- a/scripts/common/state.ts
+++ b/scripts/common/state.ts
@@ -1,12 +1,3 @@
-export enum GameUIState {
-	INVALID = 0,
-	LOADINGSCREEN = 1,
-	INGAME = 2,
-	MAINMENU = 3,
-	PAUSEMENU = 4,
-	INTROMOVIE = 5
-}
-
 /**
  * Bitflags of different HUD types to associate with hiding this panel.
  * @example
diff --git a/scripts/hud/replay-controls.ts b/scripts/hud/replay-controls.ts
index 9a202918..b6947419 100644
--- a/scripts/hud/replay-controls.ts
+++ b/scripts/hud/replay-controls.ts
@@ -1,5 +1,11 @@
 import { PanelHandler } from 'util/module-helpers';
 
+enum ReplayState {
+	NONE = 0,
+	PLAYING = 1,
+	PAUSED = 2
+}
+
 @PanelHandler()
 class ReplayControlsHandler {
 	readonly panels = {
@@ -23,7 +29,7 @@ class ReplayControlsHandler {
 	onHudUpdate() {
 		const state = MomentumReplayAPI.GetReplayState();
 
-		if (state === MomentumReplayAPI.ReplayState.NONE) return;
+		if (state === ReplayState.NONE) return;
 
 		const progress = MomentumReplayAPI.GetReplayProgress();
 
@@ -33,7 +39,7 @@ class ReplayControlsHandler {
 		if (!this.panels.timeSlider.dragging) this.panels.timeSlider.SetValueNoEvents(progressPercent);
 
 		// Deal with pause/play -- play == selected
-		const bPlaying = state === MomentumReplayAPI.ReplayState.PLAYING;
+		const bPlaying = state === ReplayState.PLAYING;
 		if (this.panels.pausePlayButton.checked !== bPlaying) this.panels.pausePlayButton.checked = bPlaying;
 
 		this.panels.cp.SetDialogVariableInt('curr_tick', progress.curtick);
diff --git a/scripts/pages/main-menu/main-menu.ts b/scripts/pages/main-menu/main-menu.ts
index f92e4240..9c46afe0 100644
--- a/scripts/pages/main-menu/main-menu.ts
+++ b/scripts/pages/main-menu/main-menu.ts
@@ -2,6 +2,15 @@ import { PanelHandler, OnPanelLoad } from 'util/module-helpers';
 import { checkDosa } from 'util/dont-show-again';
 import { RunSafeguardType } from 'common/safeguards';
 
+enum GameUIState {
+	INVALID = 0,
+	LOADINGSCREEN = 1,
+	INGAME = 2,
+	MAINMENU = 3,
+	PAUSEMENU = 4,
+	INTROMOVIE = 5
+}
+
 @PanelHandler()
 class MainMenuHandler implements OnPanelLoad {
 	readonly panels = {
@@ -318,7 +327,7 @@ class MainMenuHandler implements OnPanelLoad {
 	 * based on if we're ingame or not.
 	 */
 	onQuitButtonPressed() {
-		if (GameInterfaceAPI.GetGameUIState() === GameUIState.PAUSEMENU) {
+		if (GameInterfaceAPI.GetGameUIState() === (GameUIState.PAUSEMENU as any)) {
 			GameInterfaceAPI.ConsoleCommand('disconnect');
 			this.onHomeButtonPressed();
 			return;
@@ -384,7 +393,7 @@ class MainMenuHandler implements OnPanelLoad {
 
 	onEscapeKeyPressed() {
 		// Resume game in pause menu mode, OTHERWISE close the active menu menu page
-		if (GameInterfaceAPI.GetGameUIState() === GameUIState.PAUSEMENU) {
+		if (GameInterfaceAPI.GetGameUIState() === (GameUIState.PAUSEMENU as any)) {
 			$.DispatchEvent('MainMenuResumeGame');
 		} else {
 			this.onHomeButtonPressed();
diff --git a/scripts/types-mom/apis.d.ts b/scripts/types-mom/apis.d.ts
index 94ff7a32..ba8a87bc 100644
--- a/scripts/types-mom/apis.d.ts
+++ b/scripts/types-mom/apis.d.ts
@@ -147,7 +147,7 @@ declare namespace MomentumReplayAPI {
 	/** Sets the progress of the replay */
 	function SetProgress(progress: float): void;
 
-	const enum ReplayState {
+	enum ReplayState {
 		NONE = 0,
 		PLAYING = 1,
 		PAUSED = 2

From f7a2353d93ff01cc7070a1d857a158c9426a93bd Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Sat, 23 Nov 2024 11:07:12 +0000
Subject: [PATCH 14/19] refactor: rework MapEntry banners

TS changes are in the next commit since they're intertwined with all
the mapdata stuff.
---
 layout/pages/map-selector/map-entry.xml  | 35 ++++++++++--------------
 styles/pages/map-selector/map-entry.scss | 19 +++++++------
 2 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/layout/pages/map-selector/map-entry.xml b/layout/pages/map-selector/map-entry.xml
index 4a0802f3..00439439 100644
--- a/layout/pages/map-selector/map-entry.xml
+++ b/layout/pages/map-selector/map-entry.xml
@@ -2,30 +2,18 @@
 	<styles>
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
-	
+
 	<scripts>
 		<include type="module" src="file://{scripts}/pages/map-selector/map-entry.ts" />
 	</scripts>
 
-	<snippets>
-		<snippet name="MapBannerBeta">
-			<Panel class="map-entry__banner map-entry__banner--beta">
-				<Label class="map-entry__banner-text" text="#MapSelector_Banner_Beta" />
-			</Panel>
-		</snippet>
-		<snippet name="MapBannerNew">
-			<Panel class="map-entry__banner map-entry__banner--new">
-				<Label class="map-entry__banner-text" text="#MapSelector_Banner_New" />
-			</Panel>
-		</snippet>
-	</snippets>
-
 	<MapEntry class="w-full map-entry" oncontextmenu="MapEntryHandler.showContextMenu()" ondblclick="MapEntryHandler.tryPlayMap()">
 		<Panel class="map-entry__left">
-			<Panel class="map-entry__state" />
 			<Panel id="MapEntryImageContainer" class=" map-entry__image">
 				<Image id="MapEntryImage" scaling="stretch-to-cover-preserve-aspect" />
-				<!-- MapEntryBanner inserted via code -->
+				<Panel class="map-entry__banner">
+					<Label class="map-entry__banner-text" text="{s:banner}" />
+				</Panel>
 			</Panel>
 			<Label id="MapEntryName" class="map-entry__text map-entry__name" text="{s:name}" />
 		</Panel>
@@ -44,10 +32,17 @@
 						<Image class="button__icon" src="file://{images}/star.svg" textureheight="40" />
 					</ToggleButton>
 				</Panel>
-				<Label id="MapEntryTier" class="map-entry__text map-entry__tier" text="T{s:tier}" />
-				<Panel id="MapPB" class="map-entry__pb" onmouseout="UiToolkitAPI.HideTextTooltip()">
-					<Label id="PBLabel" class="map-entry__text map-entry__pb-text" />
-					<Image id="PBIcon" class="map-entry__pb-icon" textureheight="32" />
+				<Panel class="map-entry__tier-wrapper">
+					<Panel class="flow-right v-align-center h-align-center">
+						<Label id="MapEntryTier" class="map-entry__text map-entry__tier" text="T{d:tier}" />
+						<TooltipPanel class="map-entry__tier-notice" tooltip="#MapSelector_Tooltip_UnofficialTier">
+							<Label text="*" />
+						</TooltipPanel>
+					</Panel>
+				</Panel>
+				<Panel id="MapEntryPB" class="map-entry__pb" onmouseout="UiToolkitAPI.HideTextTooltip()">
+					<Label id="MapEntryPBLabel" class="map-entry__text map-entry__pb-text" />
+					<Image id="MapEntryPBIcon" class="map-entry__pb-icon" textureheight="32" />
 				</Panel>
 			</Panel>
 		</Panel>
diff --git a/styles/pages/map-selector/map-entry.scss b/styles/pages/map-selector/map-entry.scss
index 767d1307..06c41000 100644
--- a/styles/pages/map-selector/map-entry.scss
+++ b/styles/pages/map-selector/map-entry.scss
@@ -144,7 +144,7 @@ $transition: 0.125s ease-out 0s;
 		height: 100%;
 		vertical-align: middle;
 		padding: 6px 4px 6px 10px;
-		margin-left: 36px;
+		margin-left: 24px;
 
 		&-button {
 			height: 100%;
@@ -193,23 +193,24 @@ $transition: 0.125s ease-out 0s;
 		width: 100px;
 		height: 20px;
 		align: center center;
-		transform: translate3d(-14px, -32px, 0) rotateZ(-45deg);
+		transform: translate3d(-16px, -26px, 0) rotateZ(-30deg);
+		visibility: collapse;
 
 		&-text {
 			align: center center;
-
-			@include mixin.font-styles($use-header: true, $light-header: true);
 			font-size: 14px;
 
-			height: 16px;
+			@include mixin.font-styles($use-header: true, $light-header: true);
 		}
 
-		&--beta {
-			@include mixin.gradient-themed($color: 'purple', $direction: 'down');
+		#{$root}--new & {
+			visibility: visible;
+			@include mixin.gradient-themed($color: 'blue', $direction: 'down');
 		}
 
-		&--new {
-			@include mixin.gradient-themed($color: 'red', $direction: 'down');
+		#{$root}--private & {
+			visibility: visible;
+			@include mixin.gradient-themed($color: 'purple', $direction: 'down');
 		}
 	}
 }

From 170e4e5883feaae597b2e622aaff9d9f9c6cf70b Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Fri, 22 Nov 2024 21:57:55 +0000
Subject: [PATCH 15/19] refactor: map selector restyling

---
 layout/pages/leaderboards/leaderboards.xml  |  17 +-
 layout/pages/map-selector/map-selector.xml  | 159 ++++++------
 scripts/pages/map-selector/map-selector.ts  |  14 +-
 scripts/util/event-definition.ts            |   3 +
 styles/components/search.scss               |   2 +-
 styles/pages/leaderboards/leaderboards.scss |  32 +--
 styles/pages/map-selector/map-selector.scss | 252 ++++++++++++--------
 7 files changed, 265 insertions(+), 214 deletions(-)

diff --git a/layout/pages/leaderboards/leaderboards.xml b/layout/pages/leaderboards/leaderboards.xml
index 243a3130..7dd40c0e 100644
--- a/layout/pages/leaderboards/leaderboards.xml
+++ b/layout/pages/leaderboards/leaderboards.xml
@@ -43,17 +43,22 @@
 				</Panel>
 			</Panel>
 
-			<Panel class="leaderboard-dropdown__input-container">
-				<DropDown id="TracksDropdown" class="dropdown sorting__dropdown" menuclass="dropdown-menu">
-					<Panel id="placeholder" /> <!-- This is needed to unfuck the dynamic dropdown -->
-				</DropDown>
-			</Panel>
+			<Panel class="w-fill mr-4"/>
+
+			<DropDown id="TracksDropdown" class="dropdown" menuclass="dropdown-menu">
+				<Panel id="placeholder" /> <!-- This is needed to unfuck the dynamic dropdown -->
+			</DropDown>
 
-			<TooltipPanel class="h-align-right w-fit-children h-fit-children" tooltip="#Leaderboards_EndOfRunButton">
+			<TooltipPanel tooltip="#Leaderboards_EndOfRunButton" class="v-align-center">
 				<Button id="EndOfRunButton" class="button" onactivate="LeaderboardsHandler.showEndOfRun();">
 					<Image class="button__icon button__icon--left" src="file://{images}/arrow-thick-right.svg" textureheight="64" />
 				</Button>
 			</TooltipPanel>
+
+			<Button class="button button--blue leaderboards__hide-button" onactivate="$.DispatchEvent('MapSelector_HideLeaderboards');">
+				<Image class="button__icon button__icon--left" src="file://{images}/chart-timeline.svg" textureheight="40" />
+				<Label class="button__text button__icon--right mr-3" text="#MapSelector_Button_Leaderboards" />
+			</Button>
 		</Panel>
 		<Panel class="leaderboard-times">
 			<Panel class="leaderboard-times__header">
diff --git a/layout/pages/map-selector/map-selector.xml b/layout/pages/map-selector/map-selector.xml
index 0d4dda8e..3f0d54a3 100644
--- a/layout/pages/map-selector/map-selector.xml
+++ b/layout/pages/map-selector/map-selector.xml
@@ -2,7 +2,7 @@
 	<styles>
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
-	
+
 	<scripts>
 		<include type="module" src="file://{scripts}/pages/map-selector/map-selector.ts" />
 	</scripts>
@@ -12,24 +12,39 @@
 			<Panel id="MapSelectorLeftContainer" class="mapselector__left-container">
 				<Panel id="MapSelectorLeft" class="mapselector__left">
 					<Panel class="mapselector__left-wrapper">
-						<Panel class="mapselector-category-tabs">
-							<RadioButton id="CategoryListMaps" class="mapselector-category-tabs__tab" group="CategoryListNavBar" selected="true" onactivate='$("#CategoryContents").SetHasClass("mapselector__category-contents--playlists", false)'>
-								<Panel class="flow-right h-align-center">
-									<Image class="mapselector-category-tabs__image" src="file://{images}/panorama-variant.svg" textureheight="32" style="padding: 1px;" />
-									<Label class="text-h mapselector-category-tabs__text" text="#MapSelector_Maps" />
-								</Panel>
-							</RadioButton>
-							<RadioButton id="CategoryListPlaylists" class="mapselector-category-tabs__tab" group="CategoryListNavBar" onactivate='$("#CategoryContents").SetHasClass("mapselector__category-contents--playlists", true)'>
-								<Panel class="flow-right h-align-center">
-									<Image class="mapselector-category-tabs__image" src="file://{images}/playlist-play.svg" textureheight="32" />
-									<Label class="text-h mapselector-category-tabs__text" text="#MapSelector_Playlists" />
-								</Panel>
-							</RadioButton>
-						</Panel>
+
+<!--						 Disabling top tabs until we do leaderboards, may not even keep original styling anyway.-->
+<!--						<Panel class="mapselector-category-tabs">-->
+<!--							<RadioButton id="CategoryListMaps" class="mapselector-category-tabs__tab" group="CategoryListNavBar" selected="true" onactivate='$("#CategoryContents").SetHasClass("mapselector__category-contents&#45;&#45;playlists", false)'>-->
+<!--								<Panel class="flow-right h-align-center">-->
+<!--									<Image class="mapselector-category-tabs__image" src="file://{images}/panorama-variant.svg" textureheight="32" style="padding: 1px;" />-->
+<!--									<Label class="text-h mapselector-category-tabs__text" text="#MapSelector_Maps" />-->
+<!--								</Panel>-->
+<!--							</RadioButton>-->
+<!--							<RadioButton id="CategoryListPlaylists" class="mapselector-category-tabs__tab" group="CategoryListNavBar" onactivate='$("#CategoryContents").SetHasClass("mapselector__category-contents&#45;&#45;playlists", true)'>-->
+<!--								<Panel class="flow-right h-align-center">-->
+<!--									<Image class="mapselector-category-tabs__image" src="file://{images}/playlist-play.svg" textureheight="32" />-->
+<!--									<Label class="text-h mapselector-category-tabs__text" text="#MapSelector_Playlists" />-->
+<!--								</Panel>-->
+<!--							</RadioButton>-->
+<!--						</Panel>-->
 
 						<Panel id="CategoryContents" class="mapselector__category-contents">
 							<Panel id="MapSelector" class="mapselector__maps">
 								<Panel class="mapselector-header">
+									<Panel class="tabs mapselector-header__tabs">
+										<RadioButton id="MapListRanked" class="tabs__tab mapselector-header__tab" group="MapListNavBar" selected="true">
+											<Label class="tabs__text" text="#MapSelector_Tabs_Ranked" />
+										</RadioButton>
+										<Panel class="tabs__gap" />
+										<RadioButton id="MapListUnranked" class="tabs__tab mapselector-header__tab" group="MapListNavBar">
+											<Label class="tabs__text" text="#MapSelector_Tabs_Unranked" />
+										</RadioButton>
+										<Panel class="tabs__gap" />
+										<RadioButton id="MapListBeta" class="tabs__tab mapselector-header__tab" group="MapListNavBar">
+											<Label class="tabs__text" text="#MapSelector_Tabs_Beta" />
+										</RadioButton>
+									</Panel>
 									<Panel class="search mapselector-header__search">
 										<Image class="search__icon" src="file://{images}/search.svg" textureheight="32" />
 										<TextEntry id="MapSearchTextEntry" class="search__textentry" maxchars="30" placeholder="#MapSelector_SearchMaps" />
@@ -48,126 +63,106 @@
 								</Panel>
 								<Panel id="MapFilters" class="mapselector-filters">
 									<Panel class="mapselector-filters__row mapselector-filters__gamemodes">
-										<RadioButton id="SurfFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button" selected="true">
+										<RadioButton id="SurfFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button" selected="true">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_Surf" />
 										</RadioButton>
-										<RadioButton id="BhopFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="BhopFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_Bhop" />
 										</RadioButton>
-										<RadioButton id="BhopHL1FilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="BhopHL1FilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_BhopHL1" />
 										</RadioButton>
-										<RadioButton id="KzMomFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="KzMomFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_KzMom" />
 										</RadioButton>
-										<RadioButton id="KzKztFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button hidden">
+										<RadioButton id="KzKztFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button hidden">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_KzKzt" />
 										</RadioButton>
-										<RadioButton id="Kz16FilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="Kz16FilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_Kz16" />
 										</RadioButton>
-										<RadioButton id="RJFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="RJFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_RJ" />
 										</RadioButton>
-										<RadioButton id="SJFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="SJFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_SJ" />
 										</RadioButton>
-										<RadioButton id="AhopFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="AhopFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_Ahop" />
 										</RadioButton>
-										<RadioButton id="ConcFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="ConcFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_Conc" />
 										</RadioButton>
-									</Panel>
-									<Panel class="mapselector-filters__row mapselector-filters__gamemodes">
-										<RadioButton id="DefragCPMFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="DefragCPMFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_DefragCPM" />
 										</RadioButton>
-										<RadioButton id="DefragVQ3FilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="DefragVQ3FilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_DefragVQ3" />
 										</RadioButton>
-										<RadioButton id="DefragVTGFilterButton" class="button togglebutton togglebutton--blue mapselector-filters__button">
+										<RadioButton id="DefragVTGFilterButton" class="button radiobutton radiobutton--blue mapselector-filters__gamemode-button">
 											<Label class="button__text mapselector-filters__text" text="#Gamemode_DefragVTG" />
 										</RadioButton>
 									</Panel>
 									<Panel class="mapselector-filters__row">
 										<Panel class="mapselector-filters__tiers">
-											<Label class="text-h5 mr-2 v-align-center" text="Tiers" />
+											<Label class="mapselector-filters__tier-label" text="#MapSelector_Filters_Tier" />
 											<Panel class="mapselector-tier-slider">
 												<Panel class="mapselector-tier-slider__numbers">
-													<Label class="mapselector-tier-slider__number" text="1" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--1" text="1" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="2" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--2" text="2" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="3" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--3" text="3" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="4" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--4" text="4" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="5" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--5" text="5" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="6" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--6" text="6" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="7" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--7" text="7" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="8" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--8" text="8" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number" text="9" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--9" text="9" />
 													<Panel class="mapselector-tier-slider__gap" />
-													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--double-digit" text="10" />
+													<Label class="mapselector-tier-slider__number mapselector-tier-slider__number--10" text="10" />
 												</Panel>
 												<DualSlider id="TierSlider" class="slider slider--horizontal mapselector-tier-slider__slider" snaptoincrement="true" direction="horizontal" min="1" max="10" increment="1" default="1" default2="10" value="1" value2="10" />
 											</Panel>
 										</Panel>
-										<Panel class="h-align-right flow-right">
-											<TooltipPanel tooltip="&lt;b&gt;Filter by&lt;/b&gt;: Completed">
+										<Panel class="flow-right h-align-right v-align-bottom">
+											<TooltipPanel tooltip="#MapSelector_Filters_ByCompleted">
 												<NStateButton id="MapCompletedFilterButton" class="button nstatebutton mapselector-filters__nstatebutton mr-2">
 													<Image class="button__icon" src="file://{images}/flag.svg" textureheight="32" />
 												</NStateButton>
 											</TooltipPanel>
-											<TooltipPanel tooltip="&lt;b&gt;Filter by&lt;/b&gt;: Favorited">
+											<TooltipPanel tooltip="#MapSelector_Filters_ByFavorited">
 												<NStateButton id="MapFavoritedFilterButton" class="button nstatebutton mapselector-filters__nstatebutton mr-2">
 													<Image class="button__icon" src="file://{images}/star.svg" textureheight="32" />
 												</NStateButton>
 											</TooltipPanel>
-											<TooltipPanel tooltip="&lt;b&gt;Filter by&lt;/b&gt;: Downloaded">
-												<NStateButton id="MapDownloadedFilterButton" class="button nstatebutton mapselector-filters__nstatebutton">
+											<TooltipPanel tooltip="#MapSelector_Filters_ByDownloaded">
+												<NStateButton id="MapDownloadedFilterButton" class="button nstatebutton mapselector-filters__nstatebutton mr-2">
 													<Image class="button__icon" src="file://{images}/download.svg" textureheight="32" />
 												</NStateButton>
 											</TooltipPanel>
+											<DropDown id="SortByDropdown" class="dropdown sorting__dropdown" menuclass="dropdown-menu">
+												<Label text="#MapSelector_Sorting_DateReleased_Asc" id="dateRelAsc" value="6" />
+												<Label text="#MapSelector_Sorting_DateReleased_Desc" id="dateRelDesc" value="7" />
+												<Label text="#MapSelector_Sorting_Alphabetical_Asc" id="alphaAsc" value="0" />
+												<Label text="#MapSelector_Sorting_Alphabetical_Desc" id="alphaDesc" value="1" />
+												<Label text="#MapSelector_Sorting_Tier_Asc" id="tierAsc" value="2" />
+												<Label text="#MapSelector_Sorting_Tier_Desc" id="tierDesc" value="3" />
+												<Label text="#MapSelector_Sorting_LastPlayed_Asc" id="lastPlayAsc" value="4" />
+												<Label text="#MapSelector_Sorting_LastPlayed_Desc" id="lastPlayDesc" value="5" />
+												<Label text="#MapSelector_Sorting_DateCreated_Asc" id="dateCreatedAsc" value="8" />
+												<Label text="#MapSelector_Sorting_DateCreated_Desc" id="dateCreatedDesc" value="9" />
+											</DropDown>
 										</Panel>
 									</Panel>
 								</Panel>
 
-								<Panel id="TabsAndSortBy" class="mapselector-sorting">
-									<Panel class="tabs mapselector-sorting__tabs">
-										<RadioButton id="MapListRanked" class="tabs__tab mapselector-sorting__tab" group="MapListNavBar" selected="true">
-											<Label class="tabs__text" text="#MapSelector_Tabs_Ranked" />
-										</RadioButton>
-										<Panel class="tabs__gap" />
-										<RadioButton id="MapListUnranked" class="tabs__tab mapselector-sorting__tab" group="MapListNavBar">
-											<Label class="tabs__text" text="#MapSelector_Tabs_Unranked" />
-										</RadioButton>
-										<Panel class="tabs__gap" />
-										<RadioButton id="MapListBeta" class="tabs__tab mapselector-sorting__tab" group="MapListNavBar">
-											<Label class="tabs__text" text="#MapSelector_Tabs_Beta" />
-										</RadioButton>
-									</Panel>
-									<Panel id="SortBy" class="mapselector-sorting__sort">
-										<DropDown id="SortByDropdown" class="dropdown sorting__dropdown" menuclass="dropdown-menu">
-											<Label text="#MapSelector_Sorting_DateReleased_Asc" id="dateRelAsc" value="6" />
-											<Label text="#MapSelector_Sorting_DateReleased_Desc" id="dateRelDesc" value="7" />
-											<Label text="#MapSelector_Sorting_Alphabetical_Asc" id="alphaAsc" value="0" />
-											<Label text="#MapSelector_Sorting_Alphabetical_Desc" id="alphaDesc" value="1" />
-											<Label text="#MapSelector_Sorting_Tier_Asc" id="tierAsc" value="2" />
-											<Label text="#MapSelector_Sorting_Tier_Desc" id="tierDesc" value="3" />
-											<Label text="#MapSelector_Sorting_LastPlayed_Asc" id="lastPlayAsc" value="4" />
-											<Label text="#MapSelector_Sorting_LastPlayed_Desc" id="lastPlayDesc" value="5" />
-											<Label text="#MapSelector_Sorting_DateCreated_Asc" id="dateCreatedAsc" value="8" />
-											<Label text="#MapSelector_Sorting_DateCreated_Desc" id="dateCreatedDesc" value="9" />
-										</DropDown>
-									</Panel>
-								</Panel>
-
 								<Panel class="w-full h-fill">
 									<DelayLoadList id="MapListContainer" class="mapselector__list" itemheight="54px" itemwidth="100%" spacersize="3px" spacerperiod="1">
 										<!-- Populated via MapEntry snippets in code -->
@@ -191,9 +186,15 @@
 			</Panel>
 
 			<Panel class="mapselector__right">
-				<Panel id="MapTimes" class="mapselector-map-times">
-					<Panel class="mapselector-map-times__list-wrapper">
-						<Leaderboards id="Leaderboards" class="mapselector-map-times__list mapselector-map-times__list--hidden" />
+				<Panel class="mapselector-leaderboards__clipping-hack">
+					<Panel id="MapTimes" class="mapselector-leaderboards">
+						<Panel class="mapselector-leaderboards__list-wrapper">
+							<Leaderboards id="Leaderboards" class="mapselector-leaderboards__list mapselector-leaderboards__list--hidden leaderboards--in-map-selector" />
+						</Panel>
+						<Button class="button mapselector-leaderboards__open-button" onactivate="MapSelectorHandler.toggleLeaderboards(true);">
+							<Image class="button__icon button__icon--left" src="file://{images}/chart-timeline.svg" textureheight="40" />
+							<Label class="button__text button__icon--right mr-3" text="#MapSelector_Button_Leaderboards" />
+						</Button>
 					</Panel>
 				</Panel>
 				<Panel id="MapInfo" class="mapselector-map-info">
diff --git a/scripts/pages/map-selector/map-selector.ts b/scripts/pages/map-selector/map-selector.ts
index 9c3042eb..efd33aed 100644
--- a/scripts/pages/map-selector/map-selector.ts
+++ b/scripts/pages/map-selector/map-selector.ts
@@ -46,6 +46,7 @@ class MapSelectorHandler implements OnPanelLoad {
 		],
 		emptyContainer: $<Panel>('#MapListEmptyContainer'),
 		tierSlider: $<DualSlider>('#TierSlider'),
+		leaderboardContainer: $<Panel>('#MapTimes'),
 		descriptionContainer: $<Panel>('#MapDescriptionContainer'),
 		creditsContainer: $<Panel>('#MapCreditsContainer'),
 		datesContainer: $<Panel>('#MapDatesContainer'),
@@ -71,6 +72,7 @@ class MapSelectorHandler implements OnPanelLoad {
 		$.RegisterForUnhandledEvent('MapSelector_ShowConfirmOverwrite', (mapID) => this.showConfirmOverwrite(mapID));
 		$.RegisterForUnhandledEvent('MapSelector_MapsFiltered', (count) => this.onMapsFiltered(count));
 		$.RegisterForUnhandledEvent('MapSelector_SelectedDataUpdate', () => this.onSelectedDataUpdated());
+		$.RegisterForUnhandledEvent('MapSelector_HideLeaderboards', () => this.toggleLeaderboards(false));
 
 		this.panels.nStateButtons.forEach((panel) =>
 			$.RegisterEventHandler('NStateButtonStateChanged', panel, (panelID, state) =>
@@ -91,6 +93,10 @@ class MapSelectorHandler implements OnPanelLoad {
 		);
 
 		this.panels.cp.ApplyFilters();
+		this.panels.leaderboardContainer.SetHasClass(
+			'mapselector-leaderboards--open',
+			$.persistentStorage.getItem('mapSelector.leaderboardsOpen')
+		);
 
 		$.DispatchEvent('MapSelector_OnLoaded');
 	}
@@ -321,10 +327,8 @@ class MapSelectorHandler implements OnPanelLoad {
 		NStateButtonClasses.entries().forEach(([i, className]) => panel.SetHasClass(className, state === i));
 	}
 
-	/**
-	 * Toggles the visibility of the leaderboards panel
-	 */
-	toggleLeaderboards() {
-		this.panels.cp.FindChildTraverse('Leaderboards')?.ToggleClass('mapselector-map-times__list--hidden');
+	toggleLeaderboards(open: boolean) {
+		this.panels.leaderboardContainer.SetHasClass('mapselector-leaderboards--open', open);
+		$.persistentStorage.setItem('mapSelector.leaderboardsOpen', open);
 	}
 }
diff --git a/scripts/util/event-definition.ts b/scripts/util/event-definition.ts
index 7e12fc18..8b229621 100644
--- a/scripts/util/event-definition.ts
+++ b/scripts/util/event-definition.ts
@@ -62,6 +62,8 @@ declare interface GlobalEventNameMap {
 
 	MapSelector_ShowConfirmCancelDownload: (mapID: number) => void;
 
+	MapSelector_HideLeaderboards: () => void;
+
 	/** Force close the tab menu */
 	HudTabMenu_ForceClose: () => void;
 
@@ -87,6 +89,7 @@ $.DefineEvent('RefreshLobbyList', 0);
 $.DefineEvent('Lobby_SetMaxPlayers', 1);
 $.DefineEvent('MapSelector_OnLoaded', 0);
 $.DefineEvent('MapSelector_ShowConfirmCancelDownload', 1);
+$.DefineEvent('MapSelector_HideLeaderboards', 0);
 $.DefineEvent('HudTabMenu_ForceClose', 0);
 $.DefineEvent('ColorPickerSave', 1, 'color');
 $.DefineEvent('ColorPickerCancel', 0);
diff --git a/styles/components/search.scss b/styles/components/search.scss
index 3232a513..6de106f0 100644
--- a/styles/components/search.scss
+++ b/styles/components/search.scss
@@ -19,7 +19,7 @@
 	}
 
 	&__icon {
-		height: fill-parent-flow(1);
+		height: 100%;
 		width: height-percentage(100%);
 		opacity: 0.8;
 		vertical-align: middle;
diff --git a/styles/pages/leaderboards/leaderboards.scss b/styles/pages/leaderboards/leaderboards.scss
index 090df4a1..f6339199 100644
--- a/styles/pages/leaderboards/leaderboards.scss
+++ b/styles/pages/leaderboards/leaderboards.scss
@@ -11,6 +11,15 @@
 		horizontal-align: center;
 		width: 100%;
 	}
+
+	&__hide-button {
+		margin-left: 8px;
+		visibility: collapse;
+
+		.leaderboards--in-map-selector & {
+			visibility: visible;
+		}
+	}
 }
 
 .leaderboard-times {
@@ -85,7 +94,7 @@
 
 	&__empty {
 		width: 100%;
-		height: fill-parent-flow(1);
+		height: 100%;
 		background-color: rgba(0, 0, 0, 0.4);
 		padding-bottom: 36px;
 
@@ -95,7 +104,7 @@
 
 	&__loading {
 		width: 100%;
-		height: fill-parent-flow(1);
+		height: 100%;
 		background-color: rgba(0, 0, 0, 0.4);
 		padding-bottom: 36px;
 
@@ -146,22 +155,5 @@
 }
 
 .leaderboard-dropdown {
-	flow-children: right;
-	align: center center;
-
-	width: 100%;
-	height: 48px;
-
-	padding: 0 6px 0 12px;
-
-	border-radius: 2px;
-	border: 1px solid rgba(0, 0, 0, 0.5);
-
-	margin-bottom: 4px;
-
-	&__input-container {
-		flow-children: right;
-		width: 65%;
-		vertical-align: center;
-	}
+	vertical-align: center;
 }
diff --git a/styles/pages/map-selector/map-selector.scss b/styles/pages/map-selector/map-selector.scss
index b38a102a..15540bf5 100644
--- a/styles/pages/map-selector/map-selector.scss
+++ b/styles/pages/map-selector/map-selector.scss
@@ -4,39 +4,49 @@
 @use 'sass:color';
 
 .mapselector {
+	$root: &;
+
+	flow-children: none;
 	width: 100%;
 	height: 100%;
-	flow-children: right;
 
-	$root: &;
+	&__left-container {
+		horizontal-align: left;
+		// Warning: using percentage widths here cause ugly raster scaling
+		width: 820px;
+		height: 100%;
+		margin-right: 8px;
+	}
 
 	&__left {
 		horizontal-align: middle;
 		width: 100%;
 		height: 100%;
 		background-color: rgba(0, 0, 0, 0.3);
+		opacity: 1;
 
-		&-wrapper {
-			flow-children: down;
-			height: 100%;
-			width: 100%;
-			box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
-		}
+		transform: translateX(0);
+		@include gallery-transition;
 
-		&-container {
-			horizontal-align: left;
-			width: 50%;
-			height: 100%;
-			margin-right: 8px;
+		#{$root}--gallery-mode & {
+			transform: translateX(-200px);
+			opacity: 0;
 		}
 	}
 
+	&__left-wrapper {
+		flow-children: down;
+		height: 100%;
+		width: 100%;
+		border: 1px solid rgba(255, 255, 255, 0.01);
+		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
+	}
+
 	&__right {
 		flow-children: down;
 		horizontal-align: right;
-		width: 50%;
-		height: 100%;
-		margin-left: 8px;
+		width: 960px;
+		height: fill-parent-flow(1);
 	}
 
 	&__maps,
@@ -52,7 +62,6 @@
 	}
 
 	&__playlists {
-		height: fill-parent-flow(1);
 		visibility: collapse;
 	}
 
@@ -133,12 +142,31 @@
 	width: 100%;
 	padding-right: 8px;
 
-	&__search {
-		width: fill-parent-flow(1);
+	&__tabs {
+		flow-children: right;
+		horizontal-align: right;
+		vertical-align: bottom;
+		border: 0 none;
+		border-radius: 4px;
+		margin-right: 8px;
 	}
 
-	&__filters {
-		flow-children: right;
+	&__tab {
+		padding: 2px 8px;
+		border-bottom: 1px solid $tab-lower-border-color;
+
+		&:hover {
+			border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+		}
+
+		&:selected {
+			border-bottom: 1px solid rgba(255, 255, 255, 0.8);
+		}
+	}
+
+	&__search {
+		width: fill-parent-flow(1);
+		margin-right: 6px;
 	}
 }
 
@@ -148,16 +176,17 @@
 	flow-children: down;
 	width: 100%;
 	padding-right: 8px;
+	margin-top: 2px;
+	margin-bottom: 8px;
 
-	transition: height 0.2s ease-in-out 0s;
-	//overflow: squish;
-
-	&__button {
-		width: fit-children;
+	&__gamemode-button {
+		// IMPORTANT: `button` class gives vertical-align: center which is buggy with flow wrapping!!
+		vertical-align: top;
+		margin-bottom: 4px;
+		margin-right: 4px;
 	}
 
 	&__text {
-		vertical-align: center;
 		font-size: 20px;
 	}
 
@@ -168,9 +197,9 @@
 	}
 
 	&__gamemodes {
-		flow-children: right;
-		width: 100%;
-		overflow: squish;
+		margin-top: 4px;
+		margin-bottom: 4px;
+		flow-children: right-wrap;
 
 		& > #HorizontalScrollBar {
 			height: 2px;
@@ -182,8 +211,17 @@
 
 	&__tiers {
 		width: fill-parent-flow(1);
+		max-width: 360px;
 		flow-children: right;
 		margin-right: 24px;
+		margin-top: 4px;
+	}
+
+	&__tier-label {
+		@include mixin.font-styles($use-header: true);
+		font-size: 22px;
+		margin-right: 8px;
+		vertical-align: center;
 	}
 
 	&__nstatebutton {
@@ -192,31 +230,35 @@
 	}
 }
 
-// Be careful with widths here to ensure the numbers align exactly. The SliderThumb must be the same width as the numbers, and the
-// whole panel must be allowed to fit all its children, so make sure some space is left on the right side. Always test on multiple resolutions!
-$notch-width: 16px;
+// TODO: Getting this to align well without magic numbers is extremely difficult, but spacing ends up difference on
+// different resolutions. The fill-parent-flow gaps seem to be causing some kind of rounding which differs per res.
+$notch-width: 10px;
 .mapselector-tier-slider {
 	flow-children: none;
 	width: 100%;
-	height: 34px;
-	margin-top: 2px;
 
 	&__numbers {
 		flow-children: right;
 		width: 100%;
-		padding-top: 0px;
+		padding-top: 0;
+		overflow: noclip;
 	}
 
 	&__number {
-		font-size: 14px;
+		@include mixin.font-styles($use-header: false);
+		font-weight: bold;
+		font-size: 12px;
 		text-align: center;
-		text-shadow: 0px 1px 2px 2 rgba(0, 0, 0, 0.5);
+		text-shadow: 0 1px 2px 1 rgba(0, 0, 0, 1);
 		width: $notch-width;
 		height: 16px;
 
-		&--double-digit {
+		&--10 {
+			transform: translateX(-4px);
 			width: $notch-width + 4px;
-			horizontal-align: right;
+			margin-right: -4px;
+			text-overflow: noclip;
+			overflow: noclip;
 		}
 	}
 
@@ -227,12 +269,12 @@ $notch-width: 16px;
 
 	&__slider {
 		width: 100%;
-		margin-top: 18px;
+		margin-top: 16px;
 		padding: 0;
 
 		#SliderTrack,
 		#SliderTrackProgress {
-			height: 6px;
+			height: 4px;
 		}
 
 		#SliderThumb,
@@ -244,58 +286,54 @@ $notch-width: 16px;
 	}
 }
 
-.mapselector-sorting {
-	flow-children: right;
-	width: 100%;
-	margin-top: 10px;
-	padding-right: 8px;
-
-	&__tabs {
-		flow-children: right;
-		horizontal-align: right;
-		vertical-align: bottom;
-		border: 0px none;
-	}
+.mapselector-leaderboards {
+	$root: &;
 
-	&__tab {
-		padding: 2px 14px;
-		border-bottom: 1px solid $tab-lower-border-color;
+	width: 100%;
+	flow-children: none;
+	overflow: noclip;
 
-		&:hover {
-			border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-		}
+	transform: translateY(0);
+	@include gallery-transition;
 
-		&:selected {
-			border-bottom: 1px solid rgba(255, 255, 255, 0.8);
-		}
+	// Hack noclip container to much gallery mode anims work. Noclip on parent breaks y layout.
+	&__clipping-hack {
+		width: 100%;
+		vertical-align: top;
+		overflow: noclip;
 	}
 
-	&__sort {
-		horizontal-align: right;
-		margin-bottom: 8px;
+	.mapselector--gallery-mode & {
+		transform: translateY(-200px);
+		opacity: 0;
 	}
-}
-
-.mapselector-map-times {
-	width: 100%;
 
 	&__list {
 		width: 100%;
 		height: fit-children;
 		background-color: rgba(0, 0, 0, 0.6);
 		padding: 16px;
-
-		visibility: visible;
-
-		&--hidden {
-			visibility: collapse;
-		}
 	}
 
 	&__list-wrapper {
 		width: 100%;
 		height: fit-children;
 		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
+
+		visibility: collapse;
+
+		#{$root}--open & {
+			visibility: visible;
+		}
+	}
+
+	&__open-button {
+		horizontal-align: right;
+		height: 36px;
+
+		#{$root}--open & {
+			visibility: collapse;
+		}
 	}
 }
 
@@ -342,26 +380,19 @@ $notch-width: 16px;
 		margin: 0 6px;
 	}
 
-	&__square-button,
 	&__leaderboard-button {
 		box-shadow: fill 0 0 1px 0 rgba(0, 0, 0, 0.8);
 	}
 
-	&__square-button {
-		width: 40px;
-		height: 40px;
-		margin-left: 6px;
-	}
-
-	&__leaderboard-button {
+	&__big-button {
 		width: fill-parent-flow(1);
 		height: 40px;
 	}
 
 	&__description {
 		height: 100%;
-
-		background-color: rgba(0, 0, 0, 0.6);
+		@include mixin.font-styles($use-header: false);
+		background-color: rgba(0, 0, 0, 0.5);
 	}
 
 	&__description-scroll {
@@ -385,25 +416,21 @@ $notch-width: 16px;
 		min-height: 210px;
 	}
 
-	&__webbutton {
+	&__status,
+	&__changelog {
 		width: 100%;
-		background-color: rgba(0, 0, 0, 0.4);
-		border-top: 1px solid rgba(0, 0, 0, 0.2);
-		padding: 6px;
-		margin: -12px;
-		margin-top: 12px;
-
-		transition: background-color 0.1s ease-in-out 0s;
+		flow-children: down;
+		visibility: collapse;
 
-		&:hover {
-			background-color: rgba(0, 0, 0, 0.3);
+		#{$root}--submission & {
+			visibility: visible;
 		}
 	}
 
-	&__webbutton-text {
-		align: center center;
-		@include mixin.font-styles($use-header: true);
-		font-size: 20px;
+	&__status-icon {
+		wash-color: #fafafa;
+		width: 16px;
+		height: 16px;
 	}
 
 	&__wrapper {
@@ -413,7 +440,6 @@ $notch-width: 16px;
 		padding: 12px;
 
 		&--unpadded {
-			padding: 0px;
 		}
 
 		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
@@ -501,11 +527,31 @@ $notch-width: 16px;
 	}
 
 	&__text {
-		vertical-align: center;
 		@include mixin.font-styles($use-header: true, $light-header: true);
 		font-size: 22px;
 		text-overflow: shrink;
-		text-shadow: 0px 1px 3px 2 rgba(0, 0, 0, 0.8);
+		margin-left: 6px;
+		text-shadow: 0 1px 3px 2 rgba(0, 0, 0, 0.8);
+
+		transition: opacity 0.1s ease-out 0s;
+		opacity: 1;
+		.mapselector-stats--loading & {
+			opacity: 0;
+		}
+	}
+
+	&__spinner {
+		padding: 2px;
+		height: 100%;
+		width: height-percentage(100%);
+		img-shadow: 0 0 3px 1 rgba(0, 0, 0, 1);
+		@include animations.spin-animation;
+
+		transition: opacity 0.1s ease-out 0s;
+		opacity: 0;
+		.mapselector-stats--loading & {
+			opacity: 1;
+		}
 	}
 }
 

From d1540a7d54527865c3cfcba689227755dfe6734f Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Fri, 22 Nov 2024 22:13:13 +0000
Subject: [PATCH 16/19] refactor: use new mapdata structure

---
 scripts/common/leaderboard.ts            |  36 +++-
 scripts/common/maps.ts                   |  59 +++++
 scripts/hud/map-info.ts                  |  15 +-
 scripts/hud/tab-menu.ts                  |   8 +-
 scripts/pages/loading-screen.ts          |  20 +-
 scripts/pages/map-selector/map-entry.ts  | 263 +++++++++++++----------
 scripts/types-mom/apis.d.ts              |  27 ++-
 scripts/types-mom/events.d.ts            |   4 +-
 scripts/types-mom/panels.d.ts            |   7 +-
 scripts/util/time.ts                     |  20 ++
 styles/pages/map-selector/map-entry.scss |  35 ++-
 11 files changed, 330 insertions(+), 164 deletions(-)
 create mode 100644 scripts/common/maps.ts
 create mode 100644 scripts/util/time.ts

diff --git a/scripts/common/leaderboard.ts b/scripts/common/leaderboard.ts
index 44c6a53d..a4181ee5 100644
--- a/scripts/common/leaderboard.ts
+++ b/scripts/common/leaderboard.ts
@@ -32,13 +32,43 @@ export enum LeaderboardStatusType {
 	UNAUTHORIZED_FRIENDS_LIST = 6
 }
 
-export function getMainTrack(mapData: MMap, gamemode: Gamemode): Leaderboard {
+export function getTrack(
+	mapData: MMap,
+	gamemode: Gamemode,
+	trackType: TrackType = TrackType.MAIN,
+	trackNum: number = 1,
+	style: number = 0
+): Leaderboard {
 	return mapData.leaderboards.find(
 		(leaderboard) =>
-			leaderboard.gamemode === gamemode && leaderboard.trackType === TrackType.MAIN && leaderboard.style === 0
+			leaderboard.gamemode === gamemode &&
+			leaderboard.trackType === trackType &&
+			leaderboard.trackNum === trackNum &&
+			leaderboard.style === style
 	);
 }
 
+function highestTrackNum(mapData: MMap, trackType: TrackType): number {
+	return Math.max(
+		...mapData.leaderboards
+			.filter((leaderboard) => leaderboard.trackType === trackType)
+			.map((leaderboard) => leaderboard.trackNum)
+	);
+}
 export function getNumZones(mapData: MMap): number {
-	return mapData.leaderboards.filter((leaderboard) => leaderboard.trackType === TrackType.STAGE).length;
+	return highestTrackNum(mapData, TrackType.STAGE) - 1;
+}
+
+export function getNumBonuses(mapData: MMap): number {
+	return highestTrackNum(mapData, TrackType.BONUS) - 1;
+}
+
+export function getUserMapDataTrack(
+	userMapData: MapCacheAPI.UserData,
+	gamemode: Gamemode,
+	trackType: TrackType = TrackType.MAIN,
+	trackNum: number = 1,
+	style: number = 0
+): MapCacheAPI.UserTrackData | undefined {
+	return userMapData?.tracks?.[(gamemode << 24) | (trackType << 16) | (trackNum << 8) | style];
 }
diff --git a/scripts/common/maps.ts b/scripts/common/maps.ts
new file mode 100644
index 00000000..0352fddd
--- /dev/null
+++ b/scripts/common/maps.ts
@@ -0,0 +1,59 @@
+import { MapStatuses, MapCreditType, MMap, TrackType } from './web';
+import { getTrack } from './leaderboard';
+
+export enum MapListType {
+	APPROVED = 0,
+	SUBMISSIONS = 1
+}
+
+/** Get the tier of a track, used a suggested tier if the map is in submission */
+export function getTier(
+	staticData: MMap,
+	gamemode: Gamemode,
+	trackType = TrackType.MAIN,
+	trackNum = 1
+): number | undefined {
+	return MapStatuses.IN_SUBMISSION.includes(staticData.status)
+		? staticData.submission.suggestions.find(
+				(s) => s.gamemode === gamemode && s.trackType === trackType && s.trackNum === trackNum
+			)?.tier
+		: getTrack(staticData, gamemode, trackType, trackNum)?.tier;
+}
+
+/**
+ * Get collection of simplified credits data, optionally filtered by type.
+ * If the map is in submission, placeholders suggestions are included, with steamID omitted.
+ */
+export function getAllCredits(staticData: MMap, type?: MapCreditType): Array<{ alias: string; steamID?: string }> {
+	const credits = [];
+
+	let normal = staticData.credits;
+	if (normal) {
+		if (type !== undefined) {
+			normal = normal?.filter(({ type: t }) => t === type);
+		}
+
+		credits.push(...normal.map(({ user: { alias, steamID } }) => ({ alias, steamID })));
+	}
+
+	if (!MapStatuses.IN_SUBMISSION.includes(staticData.status)) {
+		return credits;
+	}
+
+	let placeholders = staticData.submission.placeholders;
+	if (placeholders) {
+		if (type !== undefined) {
+			placeholders = placeholders?.filter(({ type: t }) => t === type);
+		}
+
+		credits.push(...placeholders.map(({ alias }) => ({ alias })));
+	}
+
+	return credits;
+}
+
+export function getAuthorNames(staticData: MMap): string {
+	return getAllCredits(staticData, MapCreditType.AUTHOR)
+		.map(({ alias }) => alias)
+		.join(', ');
+}
diff --git a/scripts/hud/map-info.ts b/scripts/hud/map-info.ts
index bd5ed715..744b0aed 100644
--- a/scripts/hud/map-info.ts
+++ b/scripts/hud/map-info.ts
@@ -1,6 +1,7 @@
 import { PanelHandler } from 'util/module-helpers';
-import { getMainTrack, getNumZones } from 'common/leaderboard';
+import { getNumZones, getTrack } from 'common/leaderboard';
 import { MapCreditType } from 'common/web';
+import { getAllCredits, getAuthorNames } from '../common/maps';
 
 @PanelHandler()
 class HudMapInfoHandler {
@@ -21,16 +22,10 @@ class HudMapInfoHandler {
 
 			const cp = $.GetContextPanel();
 
-			cp.SetDialogVariable(
-				'author',
-				mapData.credits
-					.filter((x) => x.type === MapCreditType.AUTHOR)
-					.map(({ user: { alias } }) => alias)
-					.join(', ')
-			);
+			cp.SetDialogVariable('author', getAuthorNames(mapData.staticData));
 
-			const mainTrack = getMainTrack(mapData, GameModeAPI.GetCurrentGameMode());
-			const numZones = getNumZones(mapData);
+			const mainTrack = getTrack(mapData.staticData, GameModeAPI.GetCurrentGameMode());
+			const numZones = getNumZones(mapData.staticData);
 
 			cp.SetDialogVariableInt('tier', mainTrack?.tier ?? 0);
 			cp.SetDialogVariable('zonetype', mainTrack?.linear ? '#MapInfo_Type_Linear' : '#MapInfo_Type_Staged');
diff --git a/scripts/hud/tab-menu.ts b/scripts/hud/tab-menu.ts
index e7f7963c..c4421a9e 100644
--- a/scripts/hud/tab-menu.ts
+++ b/scripts/hud/tab-menu.ts
@@ -1,7 +1,7 @@
 import { PanelHandler } from 'util/module-helpers';
 import { EndOfRunShowReason } from 'common/timer';
 import { GamemodeInfo, MapCredit, MapCreditType, MMap } from 'common/web';
-import { getMainTrack, getNumZones } from 'common/leaderboard';
+import { getNumZones, getTrack } from 'common/leaderboard';
 
 /**
  * Class for the HUD tab menu panel, which contains the leaderboards, end of run, and zoning.
@@ -64,8 +64,8 @@ class HudTabMenuHandler {
 		const mapData = MapCacheAPI.GetCurrentMapData();
 
 		if (mapData && isOfficial) {
-			this.setMapStats(mapData);
-			this.setMapAuthorCredits(mapData.credits);
+			this.setMapStats(mapData.staticData);
+			this.setMapAuthorCredits(mapData.staticData.credits);
 		}
 	}
 
@@ -113,7 +113,7 @@ class HudTabMenuHandler {
 	setMapStats(mapData: MMap) {
 		this.panels.cp.forceCloseTabMenu();
 
-		const mainTrack = getMainTrack(mapData, GameModeAPI.GetCurrentGameMode());
+		const mainTrack = getTrack(mapData, GameModeAPI.GetCurrentGameMode());
 		const numZones = getNumZones(mapData);
 
 		this.panels.cp.SetDialogVariableInt('tier', mainTrack?.tier ?? 0);
diff --git a/scripts/pages/loading-screen.ts b/scripts/pages/loading-screen.ts
index fc849a7e..becc2feb 100644
--- a/scripts/pages/loading-screen.ts
+++ b/scripts/pages/loading-screen.ts
@@ -1,6 +1,6 @@
 import { PanelHandler } from 'util/module-helpers';
-import { getMainTrack, getNumZones } from 'common/leaderboard';
-import { MapCreditType } from 'common/web';
+import { getNumBonuses, getNumZones, getTrack } from 'common/leaderboard';
+import { getAuthorNames } from '../common/maps';
 
 @PanelHandler()
 class LoadingScreenHandler {
@@ -63,24 +63,22 @@ class LoadingScreenHandler {
 			return;
 		}
 
-		const mainTrack = getMainTrack(mapData, GameModeAPI.GetCurrentGameMode());
-		const numZones = getNumZones(mapData);
+		const gamemode = GameModeAPI.GetCurrentGameMode();
+		const mainTrack = getTrack(mapData.staticData, gamemode);
 
-		this.panels.cp.SetDialogVariable('mapname', mapData.name);
+		this.panels.cp.SetDialogVariable('mapname', mapData.staticData.name);
 		this.panels.cp.SetDialogVariableInt('tier', mainTrack?.tier ?? 0);
-		this.panels.cp.SetDialogVariableInt('numzones', numZones);
+		this.panels.cp.SetDialogVariableInt('numzones', getNumZones(mapData.staticData));
 		this.panels.cp.SetDialogVariable('tracktype', mainTrack?.linear ? 'Linear' : 'Staged');
+		this.panels.cp.SetDialogVariableInt('bonuses', getNumBonuses(mapData.staticData));
 
-		let authorString = '';
-		for (const [i, item] of mapData.credits.filter((x) => x.type === MapCreditType.AUTHOR).entries())
-			authorString += (i > 0 ? ', ' : '') + item.user.alias;
-		this.panels.cp.SetDialogVariable('author', authorString);
+		this.panels.cp.SetDialogVariable('author', getAuthorNames(mapData.staticData));
 
 		this.panels.mapName.visible = true;
 		this.panels.author.visible = true;
 		this.panels.tierAndType.visible = true;
 		this.panels.numZones.visible = true;
 
-		this.panels.backgroundImage.SetImage(mapData.thumbnail.large);
+		this.panels.backgroundImage.SetImage(mapData.staticData.thumbnail.large);
 	}
 }
diff --git a/scripts/pages/map-selector/map-entry.ts b/scripts/pages/map-selector/map-entry.ts
index 331ec9fb..62480b50 100644
--- a/scripts/pages/map-selector/map-entry.ts
+++ b/scripts/pages/map-selector/map-entry.ts
@@ -1,141 +1,176 @@
 import { PanelHandler } from 'util/module-helpers';
 import * as Enum from 'util/enum';
-import { Gamemode } from 'common/web';
+import { MapStatuses, Gamemode, MapStatus, TrackType } from 'common/web';
 import { GamemodeInfo } from 'common/gamemode';
+import { getTrack, getUserMapDataTrack } from 'common/leaderboard';
+import { timetoHHMMSS } from 'util/time';
+import { getTier } from 'common/maps';
+
+const NEW_MAP_BANNER_CUTOFF = 1000 * 60 * 60 * 24 * 5; // 5 days
 
 @PanelHandler()
 class MapEntryHandler {
 	constructor() {
-		$.RegisterEventHandler('MapEntry_MapDataUpdate', $.GetContextPanel(), () => this.onMapDataUpdate());
+		$.RegisterEventHandler('MapEntry_MapDataUpdate', $.GetContextPanel(), () => this.update());
 	}
 
+	panels = {
+		cp: $.GetContextPanel<MapEntry>(),
+		pbPanel: $<Panel>('#MapEntryPB'),
+		pbLabel: $<Label>('#MapEntryPBLabel'),
+		pbIcon: $<Image>('#MapEntryPBIcon'),
+		tier: $<Label>('#MapEntryTier')
+	};
+
+	strings = {
+		bannerNew: $.Localize('#MapSelector_Banner_New'),
+		bannerPrivate: $.Localize('#MapSelector_Banner_Private')
+	};
+
 	showGameModeOverrideMenu() {
 		const mapData = $.GetContextPanel<MapEntry>().mapData;
-		if (!mapData) {
-			return;
-		}
 
 		const items = Enum.fastValuesNumeric(Gamemode).map((gamemode) => ({
 			label: $.Localize(GamemodeInfo.get(gamemode)!.i18n),
-			jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap_GameModeOverride', mapData.id, gamemode)
+			jsCallback: () =>
+				$.DispatchEvent('MapSelector_TryPlayMap_GameModeOverride', mapData.staticData.id, gamemode)
 		}));
 
 		UiToolkitAPI.ShowSimpleContextMenu('', 'ControlsLibSimpleContextMenu', items);
 	}
 
 	showContextMenu() {
-		// const { mapData, userMapData, isDownloading } = $.GetContextPanel<MapEntry>();
-		// if (!mapData || !userMapData) {
-		// 	return;
-		// }
-		//
-		// const items = [];
-		// const mapID = mapData.id;
-		//
-		// if (userMapData.mapFileExists) {
-		// 	items.push(
-		// 		{
-		// 			label: $.Localize('#Action_StartMap'),
-		// 			icon: 'file://{images}/play.svg',
-		// 			style: 'icon-color-green',
-		// 			jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
-		// 		},
-		// 		// Gamemode override submenu
-		// 		{
-		// 			label: $.Localize('#Action_StartMapOverride'),
-		// 			icon: 'file://{images}/alternative-mode.svg',
-		// 			style: 'icon-color-green',
-		// 			jsCallback: () => this.showGameModeOverrideMenu()
-		// 		},
-		// 		{
-		// 			label: $.Localize('#Action_DeleteMap'),
-		// 			icon: 'file://{images}/delete.svg',
-		// 			style: 'icon-color-red',
-		// 			jsCallback: () => $.DispatchEvent('MapSelector_DeleteMap', mapID)
-		// 		}
-		// 	);
-		// } else {
-		// 	if (isDownloading) {
-		// 		items.push({
-		// 			label: $.Localize('#Action_CancelDownload'),
-		// 			icon: 'file://{images}/cancel.svg',
-		// 			style: 'icon-color-red',
-		// 			jsCallback: () => $.DispatchEvent('MapSelector_ShowConfirmCancelDownload', mapID)
-		// 		});
-		// 	} else if (MapCacheAPI.MapQueuedForDownload(mapID)) {
-		// 		items.push({
-		// 			label: $.Localize('#Action_RemoveFromQueue'),
-		// 			icon: 'file://{images}/playlist-remove.svg',
-		// 			style: 'icon-color-red',
-		// 			jsCallback: () => $.DispatchEvent('MapSelector_RemoveMapFromDownloadQueue', mapID)
-		// 		});
-		// 	} else {
-		// 		items.push({
-		// 			label: $.Localize('#Action_DownloadMap'),
-		// 			icon: 'file://{images}/play.svg',
-		// 			style: 'icon-color-mid-blue',
-		// 			jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
-		// 		});
-		// 	}
-		// }
-		// TODO: Isn't fetched by C++ yet, complicated to do with new map list system.
-		// if (userMapData.isFavorited) {
-		// 	items.push({
-		// 		label: $.Localize('#Action_RemoveFromFavorites'),
-		// 		icon: 'file://{images}/favorite-remove.svg',
-		// 		style: 'icon-color-yellow',
-		// 		jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, false)
-		// 	});
-		// } else {
-		// 	items.push({
-		// 		label: $.Localize('#Action_AddToFavorites'),
-		// 		icon: 'file://{images}/star.svg',
-		// 		style: 'icon-color-yellow',
-		// 		jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, true)
-		// 	});
-		// }
-		//
-		// UiToolkitAPI.ShowSimpleContextMenu('', 'ControlsLibSimpleContextMenu', items);
+		const { mapData, isDownloading } = $.GetContextPanel<MapEntry>();
+
+		const items = [];
+		const mapID = mapData.staticData.id;
+
+		if (mapData.mapFileExists) {
+			items.push(
+				{
+					label: $.Localize('#Action_StartMap'),
+					icon: 'file://{images}/play.svg',
+					style: 'icon-color-green',
+					jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
+				},
+				// Gamemode override submenu
+				{
+					label: $.Localize('#Action_StartMapOverride'),
+					icon: 'file://{images}/alternative-mode.svg',
+					style: 'icon-color-green',
+					jsCallback: () => this.showGameModeOverrideMenu()
+				},
+				{
+					label: $.Localize('#Action_DeleteMap'),
+					icon: 'file://{images}/delete.svg',
+					style: 'icon-color-red',
+					jsCallback: () => $.DispatchEvent('MapSelector_DeleteMap', mapID)
+				}
+			);
+		} else {
+			if (isDownloading) {
+				items.push({
+					label: $.Localize('#Action_CancelDownload'),
+					icon: 'file://{images}/cancel.svg',
+					style: 'icon-color-red',
+					jsCallback: () => $.DispatchEvent('MapSelector_ShowConfirmCancelDownload', mapID)
+				});
+			} else if (MapCacheAPI.MapQueuedForDownload(mapID)) {
+				items.push({
+					label: $.Localize('#Action_RemoveFromQueue'),
+					icon: 'file://{images}/playlist-remove.svg',
+					style: 'icon-color-red',
+					jsCallback: () => $.DispatchEvent('MapSelector_RemoveMapFromDownloadQueue', mapID)
+				});
+			} else {
+				items.push({
+					label: $.Localize('#Action_DownloadMap'),
+					icon: 'file://{images}/play.svg',
+					style: 'icon-color-mid-blue',
+					jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
+				});
+			}
+		}
+		if (mapData.userData?.inFavorites) {
+			items.push({
+				label: $.Localize('#Action_RemoveFromFavorites'),
+				icon: 'file://{images}/favorite-remove.svg',
+				style: 'icon-color-yellow',
+				jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, false)
+			});
+		} else {
+			items.push({
+				label: $.Localize('#Action_AddToFavorites'),
+				icon: 'file://{images}/star.svg',
+				style: 'icon-color-yellow',
+				jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, true)
+			});
+		}
+
+		UiToolkitAPI.ShowSimpleContextMenu('', 'ControlsLibSimpleContextMenu', items);
 	}
 
 	tryPlayMap() {
-		$.DispatchEvent('MapSelector_TryPlayMap', $.GetContextPanel<MapEntry>().mapData.id);
+		$.DispatchEvent('MapSelector_TryPlayMap', $.GetContextPanel<MapEntry>().mapData.staticData.id);
 	}
 
-	onMapDataUpdate() {
-		const cp = $.GetContextPanel<MapEntry>();
-		const mapData = cp.mapData;
-		const pbPanel = cp.FindChildTraverse('MapPB');
-		const pbIcon = cp.FindChildTraverse<Image>('PBIcon');
-		const pbLabel = cp.FindChildTraverse<Label>('PBLabel');
-
-		// TODO: Not passing user-specific data in yet. This is hard to do. Fucking hell!
-		// if (mapData.isCompleted) {
-		// 	pbPanel.RemoveClass('hide');
-		//
-		// 	// Do G1-6 here when it's hooked up
-		// 	const icon = mapData.pr.rank <= 10 ? 'file://{images}/ranks/top10.svg' : 'file://{images}/flag.svg';
-		//
-		// 	pbIcon.SetImage(icon);
-		//
-		// 	let time = mapData.pr.run.time;
-		// 	if (!time.includes(':')) time = Number.parseInt(time) >= 10 ? '0:' + time : '0:0' + time;
-		//
-		// 	pbLabel.text = time.split('.')[0];
-		//
-		// 	pbPanel.SetPanelEvent('onmouseover', () => {
-		// 		UiToolkitAPI.ShowTextTooltip(
-		// 			pbPanel.id,
-		// 			`<b>${$.Localize('#Common_PersonalBest')}</b>: ${time}\n<b>${$.Localize('#Common_Rank')}</b>: ${
-		// 				mapData.pr.rank
-		// 			}`
-		// 			// `Last Played: ${new Date(mapData.lastPlayed).toDateString()}` +
-		// 		);
-		// 	});
-		// } else {
-		// 	pbPanel.AddClass('hide');
-		// 	pbPanel.ClearPanelEvent('onmouseover');
-		// 	pbLabel.text = '';
-		// }
+	update() {
+		// Images and favorite and action buttons are handled in C++.
+		const cp = this.panels.cp;
+		const { staticData, userData } = this.panels.cp.mapData;
+		const gamemode = GameModeAPI.GetMetaGameMode();
+		const inSubmission = MapStatuses.IN_SUBMISSION.includes(staticData.status);
+
+		cp.SetDialogVariable('name', staticData.name);
+		cp.SetHasClass('map-entry--submission', inSubmission);
+
+		// If we're in submission, use the tier of suggested by the submitter, if exists
+		const tier = getTier(staticData, gamemode);
+		cp.SetHasClass('map-entry--has-tier', Boolean(tier));
+		if (tier) {
+			cp.SetDialogVariableInt('tier', tier);
+		}
+
+		const userTrackData = getUserMapDataTrack(userData, gamemode);
+		cp.SetHasClass('map-entry--completed', userTrackData?.completed ?? false);
+
+		if (userTrackData && userTrackData.time > 0) {
+			this.panels.pbPanel.visible = true;
+
+			// Current system doesn't know user ranks
+			const icon = /* track.pr.rank <= 10 ? 'file://{images}/ranks/top10.svg' : */ 'file://{images}/flag.svg';
+			this.panels.pbIcon.SetImage(icon);
+			this.panels.pbLabel.text = timetoHHMMSS(userTrackData.time);
+			this.panels.pbPanel.SetPanelEvent('onmouseover', () => {
+				UiToolkitAPI.ShowTextTooltip(
+					this.panels.pbPanel.id,
+					`<b>${$.Localize('#Common_PersonalBest')}</b>: ${userTrackData.time}\n` +
+						`<b>${$.Localize('#Common_LastPlayed')}</b>: ${new Date(userData.lastPlayed).toDateString()}`
+				);
+			});
+		} else {
+			this.panels.pbPanel.visible = false;
+			this.panels.pbPanel.ClearPanelEvent('onmouseover');
+		}
+
+		const isPrivate = MapStatuses.PRIVATE.includes(staticData.status);
+		// TODO: This is wrong, should use mapData.static.info.approvedData once added to backend
+		// (https://github.com/momentum-mod/website/issues/903)
+		const isNew =
+			staticData.status === MapStatus.APPROVED &&
+			Date.now() - new Date(staticData.createdAt).getTime() < NEW_MAP_BANNER_CUTOFF;
+
+		if (isPrivate) {
+			cp.SetDialogVariable('banner', this.strings.bannerPrivate);
+			cp.SetHasClass('map-entry--private', true);
+			cp.SetHasClass('map-entry--new', false);
+		} else if (isNew) {
+			cp.SetDialogVariable('banner', this.strings.bannerNew);
+			cp.SetHasClass('map-entry--private', false);
+			cp.SetHasClass('map-entry--new', true);
+		} else {
+			cp.SetHasClass('map-entry--private', false);
+			cp.SetHasClass('map-entry--new', false);
+		}
 	}
 }
diff --git a/scripts/types-mom/apis.d.ts b/scripts/types-mom/apis.d.ts
index ba8a87bc..69c30335 100644
--- a/scripts/types-mom/apis.d.ts
+++ b/scripts/types-mom/apis.d.ts
@@ -260,18 +260,33 @@ declare namespace MomentumTimerAPI {
 }
 
 declare namespace MapCacheAPI {
-	type Map = import('common/web').MMap;
+	interface UserTrackData {
+		completed: boolean;
+		time: number;
+	}
+	interface UserData {
+		inFavorites: boolean;
+		lastPlayed: number;
+		// Keys are bitpacked as `gamemode << 24 | trackType << 16 | trackNum << 8 | style`
+		tracks: Record<number, UserTrackData>;
+	}
+
+	type StaticData = import('common/web').MMap;
+
+	interface MapData {
+		staticData: StaticData;
+		userData?: UserData;
+		mapFileExists: boolean;
+	}
+
 	/** Get the current map's name */
 	function GetMapName(): string;
 
 	/** Get the metadata for the current map */
-	function GetCurrentMapData(): Map;
-
-	/** Gets all the maps from the map cache */
-	function GetMaps(): Map[];
+	function GetCurrentMapData(): MapData;
 
 	/** Gets the map data for the given mapID */
-	function GetMapDataByID(mapID: int32): Map;
+	function GetMapData(mapID: int32): MapData;
 
 	/** Returns true if the given mapID is queued from download */
 	function MapQueuedForDownload(mapID: int32): boolean;
diff --git a/scripts/types-mom/events.d.ts b/scripts/types-mom/events.d.ts
index e1b9c657..75618fca 100644
--- a/scripts/types-mom/events.d.ts
+++ b/scripts/types-mom/events.d.ts
@@ -33,11 +33,11 @@ interface GlobalEventNameMap {
 	/** Fired when the maps list has applied filters, with the number of maps that passed the filters passed along. */
 	MapSelector_MapsFiltered: (count: number) => void;
 
-	/** "Fired after TryPlayMap returns, if wasSuccessful the map was started, otherwise the map may be downloading or failed to start. */
+	/** Fired after TryPlayMap returns, if wasSuccessful the map was started, otherwise the map may be downloading or failed to start. */
 	MapSelector_TryPlayMap_Outcome: (wasSuccessful: boolean) => void;
 
 	/** Fired when the selected map has its data update */
-	MapSelector_SelectedDataUpdate: () => void;
+	MapSelector_SelectedDataUpdate: (mapData: MapCacheAPI.MapData) => void;
 
 	PanoramaComponent_SteamLobby_OnListUpdated: (lobbyList: import('common/online').GroupedLobbyLists) => void;
 
diff --git a/scripts/types-mom/panels.d.ts b/scripts/types-mom/panels.d.ts
index 7f7433cf..438ccd0d 100644
--- a/scripts/types-mom/panels.d.ts
+++ b/scripts/types-mom/panels.d.ts
@@ -27,13 +27,14 @@ interface MomentumChat extends AbstractPanel<'MomentumChat'> {
 }
 
 interface MomentumMapSelector extends AbstractPanel<'MomentumMapSelector'> {
-	readonly selectedMapData: import('common/web').MMap;
+	readonly selectedMapData: MapCacheAPI.MapData;
 
-	ApplyFilters(): void;
+	applyFilters(totalChange: boolean): void;
 }
 
 interface MapEntry extends AbstractPanel<'MapEntry'> {
-	readonly mapData: import('common/web').MMap;
+	readonly mapData: MapCacheAPI.MapData;
+	readonly isDownloading: boolean;
 }
 
 interface Leaderboards extends AbstractPanel<'Leaderboards'> {
diff --git a/scripts/util/time.ts b/scripts/util/time.ts
new file mode 100644
index 00000000..eec85f52
--- /dev/null
+++ b/scripts/util/time.ts
@@ -0,0 +1,20 @@
+/**
+ * Format time (in milliseconds) to a human readable format e.g. (12:34:56)
+ */
+export function timetoHHMMSS(input: number): string {
+	const hours = Math.trunc(input / 3600);
+	const minutes = Math.trunc((input / 60) % 60);
+	const seconds = Math.trunc(input % 60);
+	const millis = input.toFixed(2).split('.')[1];
+	if (hours > 0) {
+		return `${padNum(hours)}:${padNum(minutes)}:${padNum(seconds)}`;
+	} else if (minutes > 0) {
+		return `${padNum(minutes)}:${padNum(seconds)}.${millis}`;
+	} else {
+		return `${seconds}.${millis}`;
+	}
+}
+
+function padNum(num: number): string {
+	return num.toString().padStart(2, '0');
+}
diff --git a/styles/pages/map-selector/map-entry.scss b/styles/pages/map-selector/map-entry.scss
index 06c41000..cf2f8ea4 100644
--- a/styles/pages/map-selector/map-entry.scss
+++ b/styles/pages/map-selector/map-entry.scss
@@ -34,6 +34,7 @@ $transition: 0.125s ease-out 0s;
 		horizontal-align: left;
 		vertical-align: middle;
 
+		border-radius: 4px 0 0 4px;
 		height: 100%;
 
 		transform: translateX(0px);
@@ -56,7 +57,7 @@ $transition: 0.125s ease-out 0s;
 
 		margin-left: $image-width;
 
-		border-radius: 4px;
+		border-radius: 0 4px 4px 0;
 
 		box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
 
@@ -91,10 +92,6 @@ $transition: 0.125s ease-out 0s;
 		height: 100%;
 		background-color: function.gradient-vertical(rgba(255, 255, 255, 0.5), rgba(182, 182, 182, 0.5));
 		transition: background-color $transition;
-
-		#{$root}--completed & {
-			@include mixin.gradient-themed($color: 'green', $direction: 'down');
-		}
 	}
 
 	&__image {
@@ -120,10 +117,6 @@ $transition: 0.125s ease-out 0s;
 			height: 20px;
 			margin-right: 6px;
 			img-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
-
-			&--hidden {
-				visibility: collapse;
-			}
 		}
 
 		&-text {
@@ -133,10 +126,30 @@ $transition: 0.125s ease-out 0s;
 	}
 
 	&__tier {
-		text-align: center;
 		@include mixin.font-styles($use-header: true);
+		text-align: center;
 		font-size: 26px;
-		margin-left: 60px;
+
+		&-wrapper {
+			height: 100%;
+			width: 44px;
+			margin-left: 32px;
+			visibility: collapse;
+
+			#{$root}--has-tier & {
+				visibility: visible;
+			}
+		}
+
+		&-notice {
+			align: right top;
+			font-size: 14px;
+			visibility: collapse;
+
+			#{$root}--submission & {
+				visibility: visible;
+			}
+		}
 	}
 
 	&__favorite {

From fcfb87efc0fce26faa44567ddd4402588bf63201 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Sat, 23 Nov 2024 11:41:12 +0000
Subject: [PATCH 17/19] feat: add submission info to map selector, use mapdata
 structure

---
 images/help.svg                             |   3 +
 layout/pages/map-selector/map-selector.xml  | 148 ++++++----
 scripts/pages/map-selector/map-selector.ts  | 293 ++++++++++++++++----
 scripts/types-mom/panels.d.ts               |   2 +
 styles/core/animations.scss                 |   6 +-
 styles/pages/map-selector/map-selector.scss | 157 +++++++----
 6 files changed, 440 insertions(+), 169 deletions(-)
 create mode 100644 images/help.svg

diff --git a/images/help.svg b/images/help.svg
new file mode 100644
index 00000000..020ff0f4
--- /dev/null
+++ b/images/help.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
+	<path fill="#fff" d="M10 19h3v3h-3zm2-17c5.35.22 7.68 5.62 4.5 9.67-.83 1-2.17 1.66-2.83 2.5C13 15 13 16 13 17h-3c0-1.67 0-3.08.67-4.08.66-1 2-1.59 2.83-2.25C15.92 8.43 15.32 5.26 12 5a3 3 0 0 0-3 3H6a6 6 0 0 1 6-6"/>
+</svg>
\ No newline at end of file
diff --git a/layout/pages/map-selector/map-selector.xml b/layout/pages/map-selector/map-selector.xml
index 3f0d54a3..20329fd1 100644
--- a/layout/pages/map-selector/map-selector.xml
+++ b/layout/pages/map-selector/map-selector.xml
@@ -198,83 +198,87 @@
 					</Panel>
 				</Panel>
 				<Panel id="MapInfo" class="mapselector-map-info">
-					<!-- Stacked labels to give double layers of shadow. I don't like it, but I'll have to go along with it. -->
-					<Panel>
-						<Label class="text-h1 text-shadow-outline" text="{s:name}" />
-						<Label class="text-h1 text-shadow-black color-transparent" text="{s:name}" />
-					</Panel>
-					<Panel class="mapselector-map-info__block">
-						<Panel class="mapselector-map-info__block-left">
-							<!-- TODO: This is a hack to get a stronger font shadow. Remove when doing sRGB styling! -->
-							<Label class="text-h4 text-shadow-outline" text="#MapSelector_Info_Stats" />
-							<Label class="text-h4 text-shadow-bold color-transparent" text="#MapSelector_Info_Stats" />
-						</Panel>
-						<Panel class="flow-right mapselector-map-info__block-right">
-							<Panel class="mapselector-map-info__action">
-								<Button id="MapInfoAction" class="button mapselector-action-button">
-									<Panel class="mapselector-action-button__typecontainer action-play">
-										<Image class="button__icon mapselector-action-button__icon" src="file://{images}/play-circle.svg" textureheight="40" />
-										<Label class="button__text mapselector-action-button__text" text="#MapSelector_Button_Play" />
-									</Panel>
-									<Panel class="mapselector-action-button__typecontainer action-download">
-										<Image class="button__icon mapselector-action-button__icon" src="file://{images}/download.svg" textureheight="40" />
-										<Label class="button__text mapselector-action-button__text" text="#MapSelector_Button_Download" />
-									</Panel>
-								</Button>
-								<MapDownloadStatus id="MapInfoDownloadStatus" class="map-download-status" />
+					<Panel class="mapselector-map-info__top">
+						<Panel class="mapselector-map-info__top-left">
+							<Panel class="w-full">
+								<!-- Stacked labels to give double layers of shadow. I don't like it, but I'll have to go along with it. -->
+								<Label class="text-h1 text-shadow-outline" text="{s:name}" />
+								<Label class="text-h1 text-shadow-black color-transparent" text="{s:name}" />
 							</Panel>
+							<Panel class="w-full">
+								<!-- TODO: This is a hack to get a stronger font shadow. Remove when doing sRGB styling! -->
+								<Label class="text-h4 text-shadow-outline" text="#MapSelector_Info_Stats" />
+								<Label class="text-h4 text-shadow-bold color-transparent" text="#MapSelector_Info_Stats" />
+							</Panel>
+						</Panel>
+						<Panel class="mapselector-map-info__top-right">
 						</Panel>
 					</Panel>
-					<!-- <Panel class="map-info-gallery_container">
-						<Panel class="map-info-gallery" />
-					</Panel> -->
 					<Panel class="mapselector-map-info__content">
-						<Panel id="MapDescription" class="mapselector-map-info__block-left mapselector-map-info__description">
+						<Panel id="MapDescription" class="mapselector-map-info__content-left mapselector-map-info__description">
 							<Panel class="mapselector-map-info__wrapper mapselector-map-info__wrapper--unpadded">
 								<Panel class="mapselector-map-info__description-scroll">
 									<Panel class="mapselector-map-info__description-main-elements">
 										<Panel id="MapDescriptionContainer" class="flow-down w-full">
-											<Label class="text-h5 mb-1" text="#MapSelector_Info_Description" />
+											<Label class="mapselector-map-info__h1" text="#MapSelector_Info_Description" />
 											<Label class="mapselector-map-info__paragraph" text="{s:description}" />
 										</Panel>
-										<Panel id="MapCreditsContainer" class="flow-down mt-4">
-											<Label class="text-h5 mb-1" text="#MapSelector_Info_Authors" />
-											<Panel id="MapCredits" class="mapselector-credits">
+										<Panel id="MapCredits" class="mapselector-credits">
+											<!-- Populated by JS -->
+										</Panel>
+										<Panel class="mapselector-map-info__status">
+											<Label class="mapselector-map-info__h1" text="#MapSelector_Status_Heading" />
+											<Panel class="flow-right w-full">
+												<Label class="mapselector-map-info__text mr-1" text="{s:status}" />
+												<TooltipPanel tooltip="{s:status_tooltip}" class="v-align-center">
+													<Image class="mapselector-map-info__status-icon" src="file://{images}/info.svg" textureheight="32" />
+												</TooltipPanel>
+											</Panel>
+										</Panel>
+										<Panel id="MapChangelog" class="mapselector-map-info__changelog mt-4">
+											<Label class="mapselector-map-info__h1" text="#MapSelector_Info_Changelog_Heading" />
+											<Panel class="flow-down w-full">
 												<!-- Populated by JS -->
 											</Panel>
 										</Panel>
 										<Panel id="MapDatesContainer" class="flow-down mt-4">
-											<Label class="text-h5 mb-1" text="#MapSelector_Info_DateCreated" />
+											<Label class="mapselector-map-info__h1" text="#MapSelector_Info_DateCreated" />
 											<Label class="mapselector-map-info__paragraph" text="{s:date}" />
 										</Panel>
 										<!-- <Label class="text-h5 mt-4 mb-1" text="#MapSelector_Info_Tags" />
 										<Label id="MapTags" class="mapselector-map-info__paragraph" />-->
 									</Panel>
-									<Button id="MapInfoWebsiteButton" class="mapselector-map-info__webbutton">
-										<Label class="mapselector-map-info__webbutton-text" text="#Action_ViewOnWebsite" />
-									</Button>
 								</Panel>
 							</Panel>
 						</Panel>
 
-						<Panel class="flow-down mapselector-map-info__block-right">
-							<Panel class="flow-right w-full pb-3">
-								<ToggleButton id="LeaderboardsBtn" class="button togglebutton togglebutton--blue mapselector-map-info__leaderboard-button" onactivate="MapSelectorHandler.toggleLeaderboards()">
-									<Panel class="flow-right  h-full h-align-center">
-										<Image class="button__icon button__icon--left" src="file://{images}/chart-timeline.svg" textureheight="40" />
-										<Label class="button__text button__icon--right mr-3" text="#MapSelector_Button_Leaderboards" />
+						<Panel class="flow-down mapselector-map-info__content-right">
+							<Panel class="mapselector-map-info__action mb-3">
+								<Button id="MapInfoAction" class="button mapselector-action-button">
+									<Panel class="mapselector-action-button__typecontainer action-play">
+										<Image class="button__icon mapselector-action-button__icon" src="file://{images}/play-circle.svg" textureheight="40" />
+										<Label class="button__text mapselector-action-button__text" text="#MapSelector_Button_Play" />
+									</Panel>
+									<Panel class="mapselector-action-button__typecontainer action-download">
+										<Image class="button__icon mapselector-action-button__icon" src="file://{images}/download.svg" textureheight="40" />
+										<Label class="button__text mapselector-action-button__text" text="#MapSelector_Button_Download" />
+									</Panel>
+								</Button>
+								<MapDownloadStatus id="MapInfoDownloadStatus" class="map-download-status" />
+							</Panel>
+							<Panel class="flow-right w-full mb-3">
+								<ToggleButton id="MapInfoFavorite" class="button togglebutton togglebutton--yellow mapselector-map-info__big-button mr-1">
+									<Panel class="flow-right h-full h-align-center">
+										<Image class="button__icon button__icon--left" src="file://{images}/star.svg" textureheight="40" />
+										<Label class="button__text button__text--right" text="#MapSelector_Button_Favorite" />
 									</Panel>
 								</ToggleButton>
-								<TooltipPanel tooltip="#MapSelector_Button_Favorite">
-									<ToggleButton id="MapInfoFavorite" class="button togglebutton togglebutton--yellow mapselector-map-info__square-button">
-										<Image class="button__icon" src="file://{images}/star.svg" textureheight="40" />
-									</ToggleButton>
-								</TooltipPanel>
-								<TooltipPanel tooltip="#MapSelector_Button_Gallery">
-									<Button id="MapInfoGallery" class="button mapselector-map-info__square-button">
-										<Image class="button__icon" src="file://{images}/fullscreen.svg" textureheight="40" />
-									</Button>
-								</TooltipPanel>
+								<Button id="MapInfoWebsiteButton" class="button mapselector-map-info__big-button ml-1" onactivate="MapSelectorHandler.openInSteamOverlay();">
+									<Panel class="flow-right h-full h-align-center">
+										<Image class="button__icon button__icon--left ml-0" src="file://{images}/globe.svg" textureheight="40" />
+										<Label class="button__text button__text--right" text="#MapSelector_Button_Webpage" />
+									</Panel>
+								</Button>
 							</Panel>
 							<Panel id="MapInfoStats" class="mapselector-stats">
 								<Panel class="mapselector-map-info__wrapper">
@@ -283,38 +287,62 @@
 										<Panel class="mapselector-stats__column">
 											<TooltipPanel class="mapselector-stat" tooltip="#MapSelector_Stats_PlaylistInstances">
 												<Image class="mapselector-stat__icon" src="file://{images}/playlist-plus.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{d:completesUnique}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{d:completesUnique}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 											<TooltipPanel class="mapselector-stat" tooltip="#MapSelector_Stats_Favorites">
 												<Image class="mapselector-stat__icon" src="file://{images}/star.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{d:favorites}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{d:favorites}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 											<TooltipPanel class="mapselector-stat" tooltip="#MapSelector_Stats_Downloads">
 												<Image class="mapselector-stat__icon" src="file://{images}/download.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{d:downloads}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{d:downloads}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 											<TooltipPanel class="mapselector-stat" tooltip="#Common_PersonalBest">
 												<Image class="mapselector-stat__icon" src="file://{images}/ranks/pb.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{s:pb}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{s:pb}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 										</Panel>
 										<Panel class="vertical-separator mt-3" />
 										<Panel class="mapselector-stats__column mapselector-stats__column--right">
 											<TooltipPanel class="mapselector-stat" tooltip="#MapSelector_Stats_Downloads">
 												<Image class="mapselector-stat__icon" src="file://{images}/play.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{d:plays}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{d:plays}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 											<TooltipPanel class="mapselector-stat" tooltip="#MapSelector_Stats_Completions">
 												<Image class="mapselector-stat__icon" src="file://{images}/flag.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{d:completes}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{d:completes}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 											<TooltipPanel class="mapselector-stat" tooltip="#MapSelector_Stats_PercentCompletion">
 												<Image class="mapselector-stat__icon" src="file://{images}/percent.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{s:avgTime}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{s:avgTime}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 											<TooltipPanel class="mapselector-stat" tooltip="#Common_WorldRecord">
 												<Image class="mapselector-stat__icon" src="file://{images}/ranks/wr.svg" textureheight="48" />
-												<Label class="mapselector-stat__text" text="{s:wr}" />
+												<Panel class="h-full v-align-center">
+													<Label class="mapselector-stat__text" text="{s:wr}" />
+													<Image class="mapselector-stat__spinner" src="file://{images}/refresh.svg" textureheight="32" />
+												</Panel>
 											</TooltipPanel>
 										</Panel>
 									</Panel>
diff --git a/scripts/pages/map-selector/map-selector.ts b/scripts/pages/map-selector/map-selector.ts
index efd33aed..7294e92c 100644
--- a/scripts/pages/map-selector/map-selector.ts
+++ b/scripts/pages/map-selector/map-selector.ts
@@ -1,6 +1,12 @@
 import { OnPanelLoad, PanelHandler } from 'util/module-helpers';
 import { traverseChildren } from 'util/functions';
-import { MapCreditType } from 'common/web';
+import { MapStatuses, MapCreditType, MapStatus, MapImage, MMap, MapStats } from 'common/web';
+import { ToastCreateArgs, ToastManager, ToastStyle } from 'util/toast-manager';
+import * as Maps from 'common/maps';
+import * as Leaderboards from 'common/leaderboard';
+import * as Time from 'util/time';
+
+const REFRESH_COOLDOWN = 1000 * 10; // 10 seconds
 
 enum NStateButtonState {
 	OFF = 0,
@@ -8,12 +14,6 @@ enum NStateButtonState {
 	EXCLUDE = 2
 }
 
-const NStateButtonClasses: ReadonlyMap<NStateButtonState, string> = new Map([
-	[NStateButtonState.OFF, 'mapselector-filters__nstatebutton--off'],
-	[NStateButtonState.INCLUDE, 'mapselector-filters__nstatebutton--include'],
-	[NStateButtonState.EXCLUDE, 'mapselector-filters__nstatebutton--exclude']
-]);
-
 /**
  *  Structure of the data from filter panels we store to persistent storage, e.g.
  * {
@@ -46,13 +46,21 @@ class MapSelectorHandler implements OnPanelLoad {
 		],
 		emptyContainer: $<Panel>('#MapListEmptyContainer'),
 		tierSlider: $<DualSlider>('#TierSlider'),
+		info: $<Panel>('#MapInfo'),
 		leaderboardContainer: $<Panel>('#MapTimes'),
 		descriptionContainer: $<Panel>('#MapDescriptionContainer'),
 		creditsContainer: $<Panel>('#MapCreditsContainer'),
 		datesContainer: $<Panel>('#MapDatesContainer'),
 		credits: $<Panel>('#MapCredits'),
+		changelog: $<Panel>('#MapChangelog'),
+		stats: $<Panel>('#MapInfoStats'),
 		websiteButton: $<Button>('#MapInfoWebsiteButton'),
-		tags: $<Label>('#MapTags')
+		tags: $<Label>('#MapTags'),
+		listTypes: {
+			ranked: $<Button>('#MapListRanked'),
+			unranked: $<Button>('#MapListUnranked'),
+			beta: $<Button>('#MapListBeta')
+		},
 	};
 
 	// Describing which data on which type of panel we want to store out to PS.
@@ -62,8 +70,57 @@ class MapSelectorHandler implements OnPanelLoad {
 		DualSlider: { event: 'onvaluechanged', properties: ['lowerValue', 'upperValue'] }
 	};
 
+	readonly strings = {
+		staged: $.Localize('#MapInfo_Type_Staged'),
+		linear: $.Localize('#MapInfo_Type_Linear'),
+		placeholder: $.Localize('#MapSelector_Info_Placeholder'),
+		changelogVersion: $.Localize('#MapSelector_Info_Changelog_Version'),
+		statuses: new Map([
+			[
+				MapStatus.PRIVATE_TESTING,
+				{
+					status: $.Localize('#MapSelector_Status_PrivateTesting'),
+					tooltip: $.Localize('#MapSelector_Status_PrivateTesting_Tooltip')
+				}
+			],
+			[
+				MapStatus.CONTENT_APPROVAL,
+				{
+					status: $.Localize('#MapSelector_Status_ContentApproval'),
+					tooltip: $.Localize('#MapSelector_Status_ContentApproval_Tooltip')
+				}
+			],
+			[
+				MapStatus.PUBLIC_TESTING,
+				{
+					status: $.Localize('#MapSelector_Status_PublicTesting'),
+					tooltip: $.Localize('#MapSelector_Status_PublicTesting_Tooltip')
+				}
+			],
+			[
+				MapStatus.FINAL_APPROVAL,
+				{
+					status: $.Localize('#MapSelector_Status_FinalApproval'),
+					tooltip: $.Localize('#MapSelector_Status_FinalApproval_Tooltip')
+				}
+			]
+		]),
+		credits: new Map([
+			[MapCreditType.AUTHOR, '#MapSelector_Info_Authors'],
+			[MapCreditType.CONTRIBUTOR, '#MapSelector_Info_Contributors'],
+			[MapCreditType.SPECIAL_THANKS, '#MapSelector_Info_SpecialThanks'],
+			[MapCreditType.TESTER, '#MapSelector_Info_Testers']
+		])
+	};
+
+	readonly nStateButtonClasses: ReadonlyMap<NStateButtonState, string> = new Map([
+		[NStateButtonState.OFF, 'mapselector-filters__nstatebutton--off'],
+		[NStateButtonState.INCLUDE, 'mapselector-filters__nstatebutton--include'],
+		[NStateButtonState.EXCLUDE, 'mapselector-filters__nstatebutton--exclude']
+	]);
+
 	readonly tierMin = 1;
-	readonly tierMax = 1;
+	readonly tierMax = 10;
 
 	constructor() {
 		$.RegisterForUnhandledEvent('MapSelector_ShowConfirmCancelDownload', (mapID) =>
@@ -71,7 +128,10 @@ class MapSelectorHandler implements OnPanelLoad {
 		);
 		$.RegisterForUnhandledEvent('MapSelector_ShowConfirmOverwrite', (mapID) => this.showConfirmOverwrite(mapID));
 		$.RegisterForUnhandledEvent('MapSelector_MapsFiltered', (count) => this.onMapsFiltered(count));
-		$.RegisterForUnhandledEvent('MapSelector_SelectedDataUpdate', () => this.onSelectedDataUpdated());
+		$.RegisterForUnhandledEvent('MapSelector_SelectedDataUpdate', (mapData) => this.onSelectedDataUpdated(mapData));
+		$.RegisterForUnhandledEvent('MapSelector_SelectedOnlineDataUpdate', (stats) =>
+			this.onSelectedOnlineDataUpdated(stats)
+		);
 		$.RegisterForUnhandledEvent('MapSelector_HideLeaderboards', () => this.toggleLeaderboards(false));
 
 		this.panels.nStateButtons.forEach((panel) =>
@@ -92,7 +152,7 @@ class MapSelectorHandler implements OnPanelLoad {
 			this.panels.searchClear.SetHasClass('search__clearbutton--hidden', this.panels.searchText.text === '')
 		);
 
-		this.panels.cp.ApplyFilters();
+		this.panels.cp.applyFilters(false);
 		this.panels.leaderboardContainer.SetHasClass(
 			'mapselector-leaderboards--open',
 			$.persistentStorage.getItem('mapSelector.leaderboardsOpen')
@@ -129,7 +189,7 @@ class MapSelectorHandler implements OnPanelLoad {
 		this.panels.tierSlider.SetValues(this.tierMin, this.tierMax);
 
 		// Apply the changes
-		this.panels.cp.ApplyFilters();
+		this.panels.cp.applyFilters(false);
 
 		// Clear persistent storage state. Nothing wrong with just resetting to a blank object. This will mean that in
 		// some cases a panel's state is saved to PS but with default state (e.g. when user changes from default and
@@ -258,73 +318,186 @@ class MapSelectorHandler implements OnPanelLoad {
 		$.persistentStorage.setItem('mapSelector.mapsFiltersYieldEmptyResults', isZero);
 	}
 
-	/*
-	 *	Set all the map data for the map just selected
-	 */
-	onSelectedDataUpdated() {
-		const mapData = $.GetContextPanel<MomentumMapSelector>().selectedMapData;
+	/** Set all the map data for the map just selected */
+	onSelectedDataUpdated(mapData: MapCacheAPI.MapData) {
+		if (!mapData) {
+			return;
+		}
 
-		if (!mapData) return;
+		const baseImageUrl = this.parseMapImageUrl(mapData.staticData);
+		if (baseImageUrl) {
+			this.panels.cp.applyBackgroundMapImage(mapData.staticData.thumbnail.id, baseImageUrl);
+		}
 
-		// Set the description and creation date text
-		$.GetContextPanel().SetDialogVariable('description', mapData.info?.description);
-		this.panels.descriptionContainer.SetHasClass('hide', !mapData.info?.description);
+		this.updateSelectedMapInfo(mapData.staticData, mapData.userData);
+		this.updateSelectedMapCredits(mapData.staticData);
 
-		const date = new Date(mapData.info?.creationDate);
+		// Start loading spinner on live-updateing stats panels -- MapSelector_OnSelectedOnlineDataUpdate will kill it
+		this.panels.stats.AddClass('mapselector-stats--loading');
+	}
 
-		$.GetContextPanel().SetDialogVariable('date', date.toLocaleDateString());
-		this.panels.datesContainer.SetHasClass('hide', !mapData.info?.creationDate);
+	updateSelectedMapInfo(staticData: MMap, userData?: MapCacheAPI.UserData) {
+		const gamemode = GameModeAPI.GetMetaGameMode();
+		const mainTrack = Leaderboards.getTrack(staticData, gamemode);
+		const info = this.panels.info;
 
-		// Clear the credits from the last map
-		this.panels.credits.RemoveAndDeleteChildren();
+		info.SetDialogVariable('name', staticData.name);
 
-		// Find all authors
-		const authorCredits = mapData.credits.filter((x) => x.type === MapCreditType.AUTHOR);
+		info.SetDialogVariableInt('tier', Maps.getTier(staticData, gamemode) ?? 0);
+		info.SetDialogVariableInt('numZones', Leaderboards.getNumZones(staticData));
+		info.SetDialogVariable('type', mainTrack.linear ? this.strings.staged : this.strings.linear);
 
-		const hasCredits = authorCredits.length > 0;
+		info.SetDialogVariable('description', staticData.info?.description);
+		this.panels.descriptionContainer.SetHasClass('hide', !staticData.info?.description);
 
-		this.panels.creditsContainer.SetHasClass('hide', !hasCredits);
+		info.SetDialogVariable('date', new Date(staticData.info?.creationDate)?.toLocaleDateString());
+		this.panels.datesContainer.SetHasClass('hide', !staticData.info?.creationDate);
 
-		if (hasCredits) {
-			// Add them to the panel
-			for (const [i, credit] of authorCredits.entries()) {
-				const namePanel = $.CreatePanel('Label', this.panels.credits, '', {
-					text: credit.user.alias,
-					class: 'mapselector-credits__text mapselector-credits__name'
-				});
+		const pb = Leaderboards.getUserMapDataTrack(userData, gamemode);
+		if (pb) {
+			info.SetDialogVariable('pb', Time.timetoHHMMSS(pb.time));
+		}
 
-				if (credit.user.steamID !== '0') {
-					namePanel.AddClass('mapselector-credits__name--steam');
-
-					// This will become a player profile panel in the future
-					namePanel.SetPanelEvent('onactivate', () => {
-						UiToolkitAPI.ShowSimpleContextMenu(namePanel.id, '', [
-							{
-								label: $.Localize('#Action_ShowSteamProfile'),
-								jsCallback: () => SteamOverlayAPI.OpenToProfileID(credit.user.steamID)
-							}
-						]);
+		const inSubmission = MapStatuses.IN_SUBMISSION.includes(staticData.status);
+		info.SetHasClass('mapselector-map-info--submission', inSubmission);
+
+		if (inSubmission) {
+			const { status, tooltip } = this.strings.statuses.get(staticData.status);
+			this.panels.info.SetDialogVariable('status', status);
+			this.panels.info.SetDialogVariable('status_tooltip', tooltip);
+
+			const hasChangelog = staticData.versions.length > 1;
+			this.panels.changelog.visible = hasChangelog;
+			if (hasChangelog) {
+				const container = this.panels.changelog.GetChild(1);
+				container.RemoveAndDeleteChildren();
+
+				staticData.versions
+					.values()
+					// Skip first version entirely, doesn't have a changelog, nothing at all to show.
+					.drop(1)
+					.forEach(({ changelog }, i) => {
+						$.CreatePanel('Label', container, '', {
+							class: 'mapselector-map-info__h3',
+							text: $.Localize('#MapSelector_Info_Changelog_Version').replace(
+								'%version%',
+								(i + 2).toString()
+							)
+						});
+						$.CreatePanel('Label', container, '', {
+							text: changelog,
+							class: 'mapselector-map-info__changelog-text'
+						});
 					});
-				}
-
-				if (i < authorCredits.length - 1) {
-					const commaPanel = $.CreatePanel('Label', this.panels.credits, '');
-					commaPanel.AddClass('mapselector-credits__text');
-					commaPanel.text = ',  ';
-				}
 			}
 		}
+	}
 
-		// Set the website button link
-		this.panels.websiteButton.SetPanelEvent('onactivate', () =>
-			SteamOverlayAPI.OpenURL(`https://momentum-mod.org/dashboard/maps/${mapData.id}`)
-		);
+	updateSelectedMapCredits(staticData: MMap) {
+		this.panels.credits.RemoveAndDeleteChildren();
+
+		// Panorama's buggy right-wrap behaviour makes doing layout for this with CSS very hard - just built out in JS.
+		this.strings.credits
+			.entries()
+			// Map to collections of both regular and placeholder suggestions, filter out empty credit types
+			.map(([type, heading]) => [heading, Maps.getAllCredits(staticData, type)] as const)
+			.filter(([_heading, credits]) => credits.length > 0)
+			.forEach(([heading, credits], i) => {
+				const row =
+					i % 2 === 0
+						? $.CreatePanel('Panel', this.panels.credits, '', { class: 'mapselector-credits__row' })
+						: this.panels.credits.Children().at(-1);
+
+				const col = $.CreatePanel('Panel', row, '', { class: 'mapselector-credits__col' });
+				$.CreatePanel('Label', col, '', { text: $.Localize(heading), class: 'mapselector-map-info__h2' });
+
+				credits.forEach(({ alias, steamID }, i) => {
+					const panel = $.CreatePanel('Panel', col, '', { class: 'mapselector-credits__credit' });
+
+					if (steamID) {
+						$.CreatePanel('AvatarImage', panel, '', {
+							class: 'mapselector-credits__avatar',
+							steamid: steamID
+						});
+					} else {
+						const placeholder = $.CreatePanel('Image', panel, `Placholder${i}`, {
+							class: 'mapselector-credits__placeholder',
+							src: 'file://{images}/help.svg',
+							textureheight: '32px'
+						});
+						placeholder.SetPanelEvent('onmouseover', () =>
+							UiToolkitAPI.ShowTextTooltip(placeholder.id, this.strings.placeholder)
+						);
+						placeholder.SetPanelEvent('onmouseout', () => UiToolkitAPI.HideTextTooltip());
+					}
+
+					const namePanel = $.CreatePanel('Label', panel, '', {
+						text: alias,
+						class: 'mapselector-credits__text mapselector-credits__name'
+					});
+
+					if (steamID) {
+						namePanel.AddClass('mapselector-credits__name--steam');
+
+						// This will become a player profile panel in the future
+						panel.SetPanelEvent('onactivate', () => {
+							UiToolkitAPI.ShowSimpleContextMenu(namePanel.id, '', [
+								{
+									label: $.Localize('#Action_ShowSteamProfile'),
+									jsCallback: () => SteamOverlayAPI.OpenToProfileID(steamID)
+								}
+							]);
+						});
+					}
+				});
+			});
+	}
+
+	onSelectedOnlineDataUpdated(stats: MapStats) {
+		const statsPanel = this.panels.stats;
+
+		statsPanel.RemoveClass('mapselector-stats--loading');
+
+		// Removing / omitting several stats here, so we only include the stats that ACTUALLY WORK
+		// - Subscriptions - No longer exists since removing map library.
+		// - Downloads - No longer tracked by the backend.
+		// - Plays - We *may* track this in the future but don't currently.
+		// - Time Played - We don't track this *yet*.
+		// Map stats is in a very WIP state at the moment and doesn't need to be perfect yet.
+		statsPanel.SetDialogVariableInt('completesUnique', stats.uniqueCompletions);
+		statsPanel.SetDialogVariableInt('completes', stats.completions);
+		statsPanel.SetDialogVariableInt('favorites', stats.favorites);
+	}
+
+	/**
+	 * Figure out the base CDN URL from the map images.
+	 *
+	 * Data returned from the backend is a bit unwieldy (would be better to just return the CDN url and array of the
+	 * image IDs), don't want to spend the time refactoring.
+	 */
+	parseMapImageUrl(staticData: MMap): string | undefined {
+		// Pick any image, check URL makes sense
+		const image = staticData.images[0]?.small;
+		if (!/http.+\/[\da-z-]{36}-small.jpg/.test(image)) {
+			$.Warning(`Map Selector: Invalid image URL "${image}", not opening gallery`);
+			return;
+		}
+
+		return image.split('/').slice(0, -1).join('/');
+	}
+
+	openInSteamOverlay() {
+		const mapData = $.GetContextPanel<MomentumMapSelector>().selectedMapData;
+		const frontendUrl = GameInterfaceAPI.GetSettingString('mom_api_url_frontend');
+		if (mapData && frontendUrl) {
+			SteamOverlayAPI.OpenURL(`${frontendUrl}/maps/${mapData.staticData.name}`);
+		}
 	}
 
 	/** When a NState button is pressed, update its styling classes */
 	onNStateBtnChanged(panelID: string, state: NStateButtonState) {
 		const panel = this.panels.cp.FindChildTraverse(panelID);
-		NStateButtonClasses.entries().forEach(([i, className]) => panel.SetHasClass(className, state === i));
+		this.nStateButtonClasses.entries().forEach(([i, className]) => panel.SetHasClass(className, state === i));
 	}
 
 	toggleLeaderboards(open: boolean) {
diff --git a/scripts/types-mom/panels.d.ts b/scripts/types-mom/panels.d.ts
index 438ccd0d..dcdbccc8 100644
--- a/scripts/types-mom/panels.d.ts
+++ b/scripts/types-mom/panels.d.ts
@@ -30,6 +30,8 @@ interface MomentumMapSelector extends AbstractPanel<'MomentumMapSelector'> {
 	readonly selectedMapData: MapCacheAPI.MapData;
 
 	applyFilters(totalChange: boolean): void;
+	applyBackgroundMapImage(id: string, baseUrl: string): void;
+	applyMapImageToImagePanel(imagePanel: Image, id: string, small: boolean, baseUrl: string): void;
 }
 
 interface MapEntry extends AbstractPanel<'MapEntry'> {
diff --git a/styles/core/animations.scss b/styles/core/animations.scss
index 6b5fa1b8..9cd1bd2b 100644
--- a/styles/core/animations.scss
+++ b/styles/core/animations.scss
@@ -1,12 +1,16 @@
 @use '../config' as *;
 
-.spin-clockwise {
+@mixin spin-animation {
 	animation-name: SpinClockwise;
 	animation-duration: 0.8s;
 	animation-timing-function: ease-in-out;
 	animation-iteration-count: infinite;
 }
 
+.spin-clockwise {
+	@include spin-animation;
+}
+
 @keyframes SpinClockwise {
 	0% {
 		transform: rotateZ(0deg);
diff --git a/styles/pages/map-selector/map-selector.scss b/styles/pages/map-selector/map-selector.scss
index 15540bf5..e0c7f910 100644
--- a/styles/pages/map-selector/map-selector.scss
+++ b/styles/pages/map-selector/map-selector.scss
@@ -1,5 +1,6 @@
 @use '../../config' as *;
 @use '../../abstract/mixin';
+@use '../../core/animations';
 @use 'sass:map';
 @use 'sass:color';
 
@@ -23,15 +24,6 @@
 		width: 100%;
 		height: 100%;
 		background-color: rgba(0, 0, 0, 0.3);
-		opacity: 1;
-
-		transform: translateX(0);
-		@include gallery-transition;
-
-		#{$root}--gallery-mode & {
-			transform: translateX(-200px);
-			opacity: 0;
-		}
 	}
 
 	&__left-wrapper {
@@ -192,7 +184,6 @@
 
 	&__row {
 		flow-children: right;
-		margin-top: 8px;
 		width: 100%;
 	}
 
@@ -291,22 +282,6 @@ $notch-width: 10px;
 
 	width: 100%;
 	flow-children: none;
-	overflow: noclip;
-
-	transform: translateY(0);
-	@include gallery-transition;
-
-	// Hack noclip container to much gallery mode anims work. Noclip on parent breaks y layout.
-	&__clipping-hack {
-		width: 100%;
-		vertical-align: top;
-		overflow: noclip;
-	}
-
-	.mapselector--gallery-mode & {
-		transform: translateY(-200px);
-		opacity: 0;
-	}
 
 	&__list {
 		width: 100%;
@@ -338,40 +313,59 @@ $notch-width: 10px;
 }
 
 .mapselector-map-info {
+	$root: &;
 	flow-children: down;
 	vertical-align: bottom;
 	width: 100%;
 
-	&__block {
+	$content-height: 290px;
+
+	&__top {
 		flow-children: right;
 		width: 100%;
+		vertical-align: bottom;
 
 		&-left {
+			flow-children: down;
 			width: fill-parent-flow(1);
-			min-width: 450px;
 			margin-right: 8px;
+			vertical-align: bottom;
 		}
 
 		&-right {
-			width: fill-parent-flow(0.5);
-			max-width: 290px;
-			horizontal-align: left;
+			flow-children: down;
+			width: fit-children;
+			horizontal-align: right;
+			vertical-align: bottom;
 		}
 	}
 
+	&__action {
+		flow-children: none;
+
+		width: 100%;
+
+		height: 72px;
+		max-height: 40px;
+
+		margin-bottom: 8px;
+	}
+
 	&__content {
 		flow-children: right;
-		height: 270px;
+		height: $content-height;
 		width: 100%;
 		margin-top: 8px;
-	}
 
-	&__action {
-		flow-children: none;
+		&-left {
+			width: fill-parent-flow(1);
+			margin-right: 8px;
+		}
 
-		width: fill-parent-flow(1);
-		height: 72px;
-		max-height: 40px;
+		&-right {
+			width: 300px;
+			horizontal-align: left;
+		}
 	}
 
 	&__favourite {
@@ -440,39 +434,83 @@ $notch-width: 10px;
 		padding: 12px;
 
 		&--unpadded {
+			padding: 0;
 		}
 
 		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
 	}
 
+	&__h1,
+	&__h2,
+	&__h3 {
+		@include mixin.font-styles($use-header: true);
+		margin-bottom: 4px;
+		color: #eee;
+	}
+
+	&__h1 {
+		font-size: 22px;
+	}
+
+	&__h2 {
+		font-size: 20px;
+	}
+
+	&__h3 {
+		font-size: 18px;
+	}
+
 	&__paragraph {
 		width: 100%;
-		font-size: 17px;
+	}
+
+	&__paragraph,
+	&__text,
+	&__changelog-text {
+		font-size: 16px;
 		text-shadow: 1px 1px 2px 1 rgba(0, 0, 0, 0.8);
 	}
+
+	&__changelog-text {
+		font-size: 16px;
+	}
 }
 
 .mapselector-credits {
-	flow-children: right-wrap;
-	margin-right: 8px;
+	flow-children: down;
+	width: 100%;
+	margin-top: 12px;
 
-	& > HorizontalScrollBar {
-		.ScrollThumb {
-			transform: translateY(6px);
-			max-height: 2px;
-		}
+	&__row {
+		flow-children: right; // right-wrap SUCKS
+	}
+
+	&__col {
+		flow-children: down;
+		min-width: 240px;
+		margin-bottom: 8px;
+	}
+
+	&__credit {
+		flow-children: right;
+		margin-bottom: 4px;
 	}
 
 	&__text {
 		@include mixin.font-styles($use-header: false);
-		font-size: 18px;
+		font-size: 16px;
+		font-weight: medium;
+		text-overflow: clip;
+		vertical-align: top;
 	}
 
 	&__name {
 		transition: color 0s ease-in-out 0s;
+		color: #eee;
 
 		&--steam {
 			color: $light-blue;
+			font-style: normal;
 
 			transition: color 0.1s ease-in-out 0s;
 			&:hover {
@@ -480,6 +518,30 @@ $notch-width: 10px;
 			}
 		}
 	}
+
+	&__avatar {
+		width: 18px;
+		height: 18px;
+		border-radius: 1px;
+		margin-right: 6px;
+		vertical-align: center;
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
+	}
+
+	&__placeholder {
+		width: 18px;
+		padding: 1px;
+		height: 18px;
+		margin-right: 6px;
+		vertical-align: center;
+	}
+
+	& > HorizontalScrollBar {
+		.ScrollThumb {
+			transform: translateY(6px);
+			max-height: 2px;
+		}
+	}
 }
 
 .mapselector-stats {
@@ -522,7 +584,6 @@ $notch-width: 10px;
 		padding: 2px;
 		height: 100%;
 		width: height-percentage(100%);
-		margin-right: 6px;
 		img-shadow: 0 0 3px 1 rgba(0, 0, 0, 1);
 	}
 

From 4b4c239845b4d36efe1b559e37d44f301f31b818 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Sat, 23 Nov 2024 11:05:08 +0000
Subject: [PATCH 18/19] feat: map selector refresh button

---
 layout/pages/map-selector/map-selector.xml | 12 +--
 scripts/pages/map-selector/map-selector.ts | 99 +++++++++++++++++++++-
 scripts/types-mom/apis.d.ts                |  6 ++
 scripts/types-mom/events.d.ts              | 17 ++++
 4 files changed, 128 insertions(+), 6 deletions(-)

diff --git a/layout/pages/map-selector/map-selector.xml b/layout/pages/map-selector/map-selector.xml
index 20329fd1..ed13b1ca 100644
--- a/layout/pages/map-selector/map-selector.xml
+++ b/layout/pages/map-selector/map-selector.xml
@@ -52,14 +52,16 @@
 											<Image class="search__clearicon" src="file://{images}/close.svg" textureheight="32" />
 										</Button>
 									</Panel>
-									<Panel class="mapselector-header__filters">
-										<Button class="button button--green ml-2" onactivate="MapSelectorHandler.requestMapUpdate()">
-											<Label class="button__text" text="#Common_Update" />
+									<TooltipPanel class="mr-2" tooltip="#MapSelector_Updates_Check">
+										<Button class="button" onactivate="MapSelectorHandler.checkForUpdates()">
+											<Image id="RefreshIcon" class="button__icon" src="file://{images}/refresh.svg" textureheight="32" />
 										</Button>
-										<Button id="FilterErase" class="ml-2 button button--red" onactivate="MapSelectorHandler.clearFilters()">
+									</TooltipPanel>
+									<TooltipPanel tooltip="#MapSelector_Filters_Reset">
+										<Button class="button button--red" onactivate="MapSelectorHandler.clearFilters()">
 											<Image class="button__icon" src="file://{images}/filter-remove.svg" textureheight="32" />
 										</Button>
-									</Panel>
+									</TooltipPanel>
 								</Panel>
 								<Panel id="MapFilters" class="mapselector-filters">
 									<Panel class="mapselector-filters__row mapselector-filters__gamemodes">
diff --git a/scripts/pages/map-selector/map-selector.ts b/scripts/pages/map-selector/map-selector.ts
index 7294e92c..63af2ad5 100644
--- a/scripts/pages/map-selector/map-selector.ts
+++ b/scripts/pages/map-selector/map-selector.ts
@@ -61,6 +61,7 @@ class MapSelectorHandler implements OnPanelLoad {
 			unranked: $<Button>('#MapListUnranked'),
 			beta: $<Button>('#MapListBeta')
 		},
+		refreshIcon: $<Image>('#RefreshIcon')
 	};
 
 	// Describing which data on which type of panel we want to store out to PS.
@@ -345,7 +346,7 @@ class MapSelectorHandler implements OnPanelLoad {
 
 		info.SetDialogVariableInt('tier', Maps.getTier(staticData, gamemode) ?? 0);
 		info.SetDialogVariableInt('numZones', Leaderboards.getNumZones(staticData));
-		info.SetDialogVariable('type', mainTrack.linear ? this.strings.staged : this.strings.linear);
+		info.SetDialogVariable('layout', mainTrack.linear ? this.strings.staged : this.strings.linear);
 
 		info.SetDialogVariable('description', staticData.info?.description);
 		this.panels.descriptionContainer.SetHasClass('hide', !staticData.info?.description);
@@ -504,4 +505,100 @@ class MapSelectorHandler implements OnPanelLoad {
 		this.panels.leaderboardContainer.SetHasClass('mapselector-leaderboards--open', open);
 		$.persistentStorage.setItem('mapSelector.leaderboardsOpen', open);
 	}
+
+	checkingUpdates = false;
+	lastUpdateCheck = 0;
+
+	checkForUpdates() {
+		if (this.checkingUpdates || this.lastUpdateCheck + REFRESH_COOLDOWN > Date.now()) {
+			return;
+		}
+
+		this.lastUpdateCheck = Date.now();
+
+		this.panels.refreshIcon.AddClass('spin-clockwise');
+
+		// Has to handle both private and static map updates, where we only need private if we're in the beta, and we
+		// could need 0, 1 or 2 static updates, depending on the response from the version check. So logic gets quite
+		// complicated, all for one loading spinner. I want RxJS!
+		let updatesNeeded = 0;
+		let fetchedStaticVersions = false;
+		let errored = false;
+		if (this.panels.listTypes.beta.IsSelected()) {
+			updatesNeeded++;
+
+			const privHandle = $.RegisterForUnhandledEvent('MapCache_PrivateMapsUpdate', (success: boolean) => {
+				$.UnregisterForUnhandledEvent('MapCache_PrivateMapsUpdate', privHandle);
+
+				if (!success) {
+					errored = true;
+				}
+
+				updatesNeeded--;
+
+				if (updatesNeeded === 0 && fetchedStaticVersions) {
+					this.onFinishUpdate(errored, {
+						message: '#MapSelector_Updates_Updated',
+						style: ToastStyle.SUCCESS
+					});
+				}
+			});
+
+			MapCacheAPI.FetchPrivateMaps();
+		}
+
+		const versionsHandle = $.RegisterForUnhandledEvent(
+			'MapCache_StaticCacheVersionChecked',
+			(staticUpdatesNeeded) => {
+				$.UnregisterForUnhandledEvent('MapCache_StaticCacheVersionChecked', versionsHandle);
+
+				fetchedStaticVersions = true;
+
+				if (staticUpdatesNeeded === 0) {
+					if (updatesNeeded === 0) {
+						this.onFinishUpdate(errored, {
+							message: '#MapSelector_Updates_UpToDate',
+							style: ToastStyle.INFO
+						});
+					}
+					return;
+				}
+
+				updatesNeeded += staticUpdatesNeeded;
+				let staticUpdates = 0;
+				const staticHandle = $.RegisterForUnhandledEvent('MapCache_StaticCacheUpdate', (_type, success) => {
+					if (!success) {
+						errored = true;
+					}
+
+					staticUpdates++;
+					if (staticUpdates === staticUpdatesNeeded) {
+						$.UnregisterForUnhandledEvent('MapCache_StaticCacheUpdate', staticHandle);
+					}
+
+					--updatesNeeded;
+					if (updatesNeeded === 0) {
+						this.onFinishUpdate(errored, {
+							message: '#MapSelector_Updates_Updated',
+							style: ToastStyle.SUCCESS
+						});
+					}
+				});
+			}
+		);
+
+		this.checkingUpdates = true;
+		MapCacheAPI.CheckForUpdates();
+	}
+
+	onFinishUpdate(errored: boolean, toast: ToastCreateArgs) {
+		// If we errored at any point, C++ will show a toast. Even if some requests were successful, don't show
+		// both success and error toasts, would be confusing.
+		if (!errored) {
+			ToastManager.createToast(toast);
+		}
+
+		this.panels.refreshIcon.RemoveClass('spin-clockwise');
+		this.checkingUpdates = false;
+	}
 }
diff --git a/scripts/types-mom/apis.d.ts b/scripts/types-mom/apis.d.ts
index 69c30335..02f96454 100644
--- a/scripts/types-mom/apis.d.ts
+++ b/scripts/types-mom/apis.d.ts
@@ -290,6 +290,12 @@ declare namespace MapCacheAPI {
 
 	/** Returns true if the given mapID is queued from download */
 	function MapQueuedForDownload(mapID: int32): boolean;
+
+	/** Checks backend for latest static cache versions, download if out-of-date */
+	function CheckForUpdates(): void;
+
+	/** Fetches private maps visible to the user */
+	function FetchPrivateMaps(): void;
 }
 
 declare namespace SpectatorAPI {
diff --git a/scripts/types-mom/events.d.ts b/scripts/types-mom/events.d.ts
index 75618fca..0c9cf9a3 100644
--- a/scripts/types-mom/events.d.ts
+++ b/scripts/types-mom/events.d.ts
@@ -39,6 +39,14 @@ interface GlobalEventNameMap {
 	/** Fired when the selected map has its data update */
 	MapSelector_SelectedDataUpdate: (mapData: MapCacheAPI.MapData) => void;
 
+	/**
+	 * Fired when lives stats for the selected map have been updated.
+	 * These are fetched from the backend when a map is selected, with a 60s cooldown. If we're outside the cooldown,
+	 * the event fires once we get a response from backend, otherwise it fires immediately after
+	 * `MapSelector_SelectedDataUpdate`.
+	 */
+	MapSelector_SelectedOnlineDataUpdate: (stats: import('common/web').MapStats) => void;
+
 	PanoramaComponent_SteamLobby_OnListUpdated: (lobbyList: import('common/online').GroupedLobbyLists) => void;
 
 	PanoramaComponent_SteamLobby_OnDataUpdated: (lobbyData: import('common/online').LobbyList) => void;
@@ -81,6 +89,15 @@ interface GlobalEventNameMap {
 
 	MapCache_SearchComplete: (success: boolean) => void;
 
+	/** Fired when a static map list is updated from backend */
+	MapCache_StaticCacheUpdate: (type: import('common/maps').MapListType, success: boolean) => void;
+
+	/** Fired when finished checking latest static cache versions */
+	MapCache_StaticCacheVersionChecked: (updatesNeeded: 0 | 1 | 2) => void;
+
+	/** Fired when the private map lists are updated from online */
+	MapCache_PrivateMapsUpdate: (success: boolean) => void;
+
 	MapDownload_Queued: (mapID: uint32, added: boolean) => void;
 
 	MapDownload_Start: (mapID: uint32, mapName: string) => void;

From 65d06a3d8a7eb4ee8b42d60b9f095416cf2a8b33 Mon Sep 17 00:00:00 2001
From: tsa96 <tom@trumpetdust.org>
Date: Sat, 23 Nov 2024 13:45:08 +0000
Subject: [PATCH 19/19] chore: remove unused imports

May have to add eslint plugin for this...
---
 scripts/hud/map-info.ts                    | 3 +--
 scripts/hud/spectate.ts                    | 1 -
 scripts/hud/speedometer.ts                 | 1 -
 scripts/pages/map-selector/map-entry.ts    | 4 ++--
 scripts/pages/map-selector/map-selector.ts | 2 +-
 5 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/scripts/hud/map-info.ts b/scripts/hud/map-info.ts
index 744b0aed..61a8ca2a 100644
--- a/scripts/hud/map-info.ts
+++ b/scripts/hud/map-info.ts
@@ -1,7 +1,6 @@
 import { PanelHandler } from 'util/module-helpers';
 import { getNumZones, getTrack } from 'common/leaderboard';
-import { MapCreditType } from 'common/web';
-import { getAllCredits, getAuthorNames } from '../common/maps';
+import { getAuthorNames } from '../common/maps';
 
 @PanelHandler()
 class HudMapInfoHandler {
diff --git a/scripts/hud/spectate.ts b/scripts/hud/spectate.ts
index ef6fd99b..8e6c40bb 100644
--- a/scripts/hud/spectate.ts
+++ b/scripts/hud/spectate.ts
@@ -1,5 +1,4 @@
 import { PanelHandler } from 'util/module-helpers';
-import { RunEntityType } from 'common/timer';
 
 @PanelHandler()
 class HudSpectateHandler {
diff --git a/scripts/hud/speedometer.ts b/scripts/hud/speedometer.ts
index dcecbd78..9a352b97 100644
--- a/scripts/hud/speedometer.ts
+++ b/scripts/hud/speedometer.ts
@@ -1,7 +1,6 @@
 import { PanelHandler } from 'util/module-helpers';
 import { tupleToRgbaString } from 'util/colors';
 import { SpeedometerColorType, SpeedometerType } from 'common/speedometer';
-import { TimerState_OLD } from 'common/timer';
 
 // arbitrary value to determine how much speed needs to change to be considered an increase/decrease
 // adjusted by speedometer update delta time
diff --git a/scripts/pages/map-selector/map-entry.ts b/scripts/pages/map-selector/map-entry.ts
index 62480b50..befc51d5 100644
--- a/scripts/pages/map-selector/map-entry.ts
+++ b/scripts/pages/map-selector/map-entry.ts
@@ -1,8 +1,8 @@
 import { PanelHandler } from 'util/module-helpers';
 import * as Enum from 'util/enum';
-import { MapStatuses, Gamemode, MapStatus, TrackType } from 'common/web';
+import { MapStatuses, Gamemode, MapStatus } from 'common/web';
 import { GamemodeInfo } from 'common/gamemode';
-import { getTrack, getUserMapDataTrack } from 'common/leaderboard';
+import { getUserMapDataTrack } from 'common/leaderboard';
 import { timetoHHMMSS } from 'util/time';
 import { getTier } from 'common/maps';
 
diff --git a/scripts/pages/map-selector/map-selector.ts b/scripts/pages/map-selector/map-selector.ts
index 63af2ad5..ccef1357 100644
--- a/scripts/pages/map-selector/map-selector.ts
+++ b/scripts/pages/map-selector/map-selector.ts
@@ -1,6 +1,6 @@
 import { OnPanelLoad, PanelHandler } from 'util/module-helpers';
 import { traverseChildren } from 'util/functions';
-import { MapStatuses, MapCreditType, MapStatus, MapImage, MMap, MapStats } from 'common/web';
+import { MapStatuses, MapCreditType, MapStatus, MMap, MapStats } from 'common/web';
 import { ToastCreateArgs, ToastManager, ToastStyle } from 'util/toast-manager';
 import * as Maps from 'common/maps';
 import * as Leaderboards from 'common/leaderboard';