feat: Roaming lobbies

Display the roaming lobby player count on top of map icons.

layout/pages/map-selector/map-entry.xml

@@ -14,6 +14,10 @@
 				<Panel class="map-entry__banner">
 					<Label class="map-entry__banner-text" text="{s:banner}" />
 				</Panel>
+				<Panel id="MapEntryLobbyContainer" class="map-entry__lobby">
+					<Image class="map-entry__lobby-icon" src="file://{images}/profile.svg" textureheight="40" />
+					<Label class="map-entry__lobby-playercount" text="{d:playerCount}" />
+				</Panel>
 			</Panel>
 			<Label id="MapEntryName" class="map-entry__text map-entry__name" text="{s:name}" />
 		</Panel>

scripts/common/online.ts

@@ -56,12 +56,14 @@ export enum LobbyMemberStateChange {
 export enum LobbyType {
 	PRIVATE = '0',
 	FRIENDS = '1',
-	PUBLIC = '2'
+	PUBLIC = '2',
+	INVISIBLE = '3'
 }
 
 // TODO: Localise `name`!
 export const LobbyProperties: ReadonlyMap<LobbyType, { name: string; icon: string }> = new Map([
 	[LobbyType.PRIVATE, { name: 'Private Lobby', icon: 'privatelobby' }],
 	[LobbyType.FRIENDS, { name: 'Friends Only Lobby', icon: 'friendslobby' }],
-	[LobbyType.PUBLIC, { name: 'Public Lobby', icon: 'publiclobby' }]
+	[LobbyType.PUBLIC, { name: 'Public Lobby', icon: 'publiclobby' }],
+	[LobbyType.INVISIBLE, { name: 'Roaming Lobby', icon: 'publiclobby' }] // TODO: Roaming lobby icon?
 ]);

scripts/pages/map-selector/map-entry.ts

@@ -12,14 +12,19 @@ const NEW_MAP_BANNER_CUTOFF = 1000 * 60 * 60 * 24 * 5; // 5 days
 class MapEntryHandler {
 	constructor() {
 		$.RegisterEventHandler('MapEntry_MapDataUpdate', $.GetContextPanel(), () => this.update());
+		$.RegisterForUnhandledEvent('MapSelector_RoamingLobbiesUpdated', () => this.updatePlayerCount());
+		$.RegisterForUnhandledEvent('Game_MetaModeChanged', () => this.metaModeChanged());
+
+		this.updatePlayerCount();
 	}
 
 	panels = {
 		cp: $.GetContextPanel<MapEntry>(),
 		pbPanel: $<Panel>('#MapEntryPB'),
 		pbLabel: $<Label>('#MapEntryPBLabel'),
 		pbIcon: $<Image>('#MapEntryPBIcon'),
-		tier: $<Label>('#MapEntryTier')
+		tier: $<Label>('#MapEntryTier'),
+		lobbyContainer: $<Panel>('#MapEntryLobbyContainer')
 	};
 
 	strings = {
@@ -178,4 +183,20 @@ class MapEntryHandler {
 			cp.SetHasClass('map-entry--new', false);
 		}
 	}
+
+	updatePlayerCount() {
+		// Roaming lobby player count
+		const playerCount = this.panels.cp.mapData.roamingLobbyPlayerCount;
+		if (playerCount > 0) {
+			this.panels.lobbyContainer.visible = true;
+			this.panels.cp.SetDialogVariableInt('playerCount', playerCount);
+		} else {
+			this.panels.lobbyContainer.visible = false;
+		}
+	}
+
+	metaModeChanged() {
+		// Wait for next roaming lobby update
+		this.panels.lobbyContainer.visible = false;
+	}
 }

scripts/types-mom/apis.d.ts

@@ -283,6 +283,7 @@ declare namespace MapCacheAPI {
 		staticData: StaticData;
 		userData?: UserData;
 		mapFileExists: boolean;
+		roamingLobbyPlayerCount: number;
 	}
 
 	/** Get the current map's name */

scripts/types-mom/events.d.ts

@@ -361,6 +361,9 @@ interface GlobalEventNameMap {
 
 	/** Fired when local user data is loaded from disk or fetched from backend. */
 	MomAPI_UserUpdate: (user: import('common/web').User) => void;
+
+	/** Fired after updating the map cache with the latest roaming lobby player counts. */
+	MapSelector_RoamingLobbiesUpdated: () => void;
 }
 
 interface PanelEventNameMap {

styles/pages/map-selector/map-entry.scss

@@ -226,4 +226,24 @@ $transition: 0.125s ease-out 0s;
 			@include mixin.gradient-themed($color: 'purple', $direction: 'down');
 		}
 	}
+
+	&__lobby {
+		width: 100px;
+		height: 20px;
+		flow-children: left;
+		align: right bottom;
+
+		&-icon {
+			height: 100%;
+			width: height-percentage(100%);
+			img-shadow: $button-icon-shadow;
+		}
+
+		&-playercount {
+			font-size: 14px;
+			margin-right: 1px;
+			vertical-align: bottom;
+			text-shadow: $button-icon-shadow;
+		}
+	}
 }