feat: add avatars to map selector credits, show all credit types

momentum-mod · Nov 13, 2024 · c968520 · c968520
1 parent 47f3b77
commit c968520
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 35 deletions.
diff --git a/layout/pages/map-selector/map-selector.xml b/layout/pages/map-selector/map-selector.xml
@@ -229,11 +229,8 @@
 											<Label class="mapselector-map-info__heading" 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">
-												<!-- Populated by JS -->
-											</Panel>
+										<Panel id="MapCredits" class="mapselector-credits">
+											<!-- Populated by JS -->
 										</Panel>
 										<Panel id="MapDatesContainer" class="flow-down mt-4">
 											<Label class="mapselector-map-info__heading" text="#MapSelector_Info_DateCreated" />

diff --git a/scripts/pages/map-selector/map-selector.ts b/scripts/pages/map-selector/map-selector.ts
@@ -265,45 +265,64 @@ class MapSelectorHandler implements OnPanelLoad {
 		$.GetContextPanel().SetDialogVariable('date', date.toLocaleDateString());
 		this.panels.datesContainer.SetHasClass('hide', !mapData.static.info?.creationDate);
 
-		// Clear the credits from the last map
+		// Credits
 		this.panels.credits.RemoveAndDeleteChildren();
 
-		// Find all authors
-		const authorCredits = mapData.credits.filter((x) => x.type === MapCreditType.AUTHOR);
-
-		const hasCredits = authorCredits.length > 0;
-
-		this.panels.creditsContainer.SetHasClass('hide', !hasCredits);
+		const categories = [
+			[MapCreditType.AUTHOR, '#MapSelector_Info_Authors'],
+			[MapCreditType.CONTRIBUTOR, '#MapSelector_Info_Contributors'],
+			[MapCreditType.SPECIAL_THANKS, '#MapSelector_Info_SpecialThanks'],
+			[MapCreditType.TESTER, '#MapSelector_Info_Testers']
+		] as const;
+
+		let i = 0;
+		// Panorama's useless right-wrap behaviour makes doing layout for this with CSS very hard - just built out
+		// in JS.
+		categories.forEach(([type, heading]) => {
+			const credits = mapData.static.credits.filter(({ type: t }) => t === type);
+
+			if (credits.length === 0) return;
+
+			const row =
+				i % 2 === 0
+					? $.CreatePanel('Panel', this.panels.credits, '', { class: 'mapselector-credits__row' })
+					: this.panels.credits.Children().at(-1);
+			i++;
+
+			const col = $.CreatePanel('Panel', row, '', { class: 'mapselector-credits__col' });
+			$.CreatePanel('Label', col, '', { text: $.Localize(heading), class: 'mapselector-map-info__heading' });
+
+			credits.forEach(({ user: { steamID, alias } }) => {
+				const panel = $.CreatePanel('Panel', col, '', { class: 'mapselector-credits__credit' });
+
+				if (steamID) {
+					$.CreatePanel('AvatarImage', panel, '', {
+						class: 'mapselector-credits__avatar',
+						steamid: steamID
+					});
+				}
 
-		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,
+				const namePanel = $.CreatePanel('Label', panel, '', {
+					text: alias,
 					class: 'mapselector-credits__text mapselector-credits__name'
 				});
 
-				if (credit.user.steamID !== '0') {
+				if (steamID) {
 					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)
+								jsCallback: () => SteamOverlayAPI.OpenToProfileID(steamID)
 							}
 						]);
 					});
 				}
-
-				if (i < authorCredits.length - 1) {
-					const commaPanel = $.CreatePanel('Label', this.panels.credits, '');
-					commaPanel.AddClass('mapselector-credits__text');
-					commaPanel.text = ',  ';
-				}
-			}
-		}
+			});
+		});
+	}
 
 	openInSteamOverlay() {
 		const mapData = $.GetContextPanel<MomentumMapSelector>().selectedMapData;

diff --git a/styles/pages/map-selector/map-selector.scss b/styles/pages/map-selector/map-selector.scss
@@ -423,19 +423,31 @@ $notch-width: 10px;
 }
 
 .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 {
@@ -450,6 +462,22 @@ $notch-width: 10px;
 			}
 		}
 	}
+
+	&__avatar {
+		width: 18px;
+		height: 18px;
+		margin-right: 6px;
+		border-radius: 1px;
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.8);
+		vertical-align: center;
+	}
+
+	& > HorizontalScrollBar {
+		.ScrollThumb {
+			transform: translateY(6px);
+			max-height: 2px;
+		}
+	}
 }
 
 .mapselector-stats {