refactor: better tab emu credit styling

momentum-mod · Nov 29, 2024 · 18cbbc0 · 18cbbc0
1 parent 8361acf
commit 18cbbc0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/layout/hud/tab-menu.xml b/layout/hud/tab-menu.xml
@@ -22,7 +22,6 @@
 					</Panel>
 					<Panel class="hud-tab-menu-map-info__bottom">
 						<Panel id="HudTabMenuMapCredits" class="hud-tab-menu-map-info__credits">
-							<Label class="hud-tab-menu-map-info__credits-other-text" text="#Common_By" />
 							<!-- Author names inserted by JS -->
 						</Panel>
 						<Panel class="hud-tab-menu-map-info__stats">

diff --git a/scripts/hud/tab-menu.ts b/scripts/hud/tab-menu.ts
@@ -72,20 +72,29 @@ class HudTabMenuHandler {
 
 	setMapAuthorCredits(credits: SimpleMapCredit[]) {
 		// Delete existing name labels
-		for (const label of this.panels.credits.Children().slice(1) || []) {
-			label.DeleteAsync(0);
+		this.panels.credits.Children()?.forEach((label) => label.DeleteAsync(0));
+
+		if (credits.length === 0) {
+			return;
 		}
 
+		$.CreatePanel('Label', this.panels.credits, '', {
+			class: 'hud-tab-menu-map-info__credits-other-text',
+			text: $.Localize('#CommonBy')
+		});
+
 		for (const [idx, { alias, steamID }] of credits.entries()) {
 			const namePanel = $.CreatePanel('Label', this.panels.credits, '', {
 				text: alias
 			});
 
 			namePanel.AddClass('hud-tab-menu-map-info__credits-name');
 
-				// TODO: Perhaps better if left-click just loads momentum profile? Can access steam through that,
-				// and profile pages no longer require a login to view.
 			if (steamID) {
+				namePanel.AddClass('hud-tab-menu-map-info__credits-name--steam');
+
+				// TODO: Should be an onactivate (left click, not right), and open player card component,
+				// once that's made.
 				namePanel.SetPanelEvent('oncontextmenu', () => {
 					UiToolkitAPI.ShowSimpleContextMenu('', '', [
 						{
@@ -96,12 +105,10 @@ class HudTabMenuHandler {
 						}
 					]);
 				});
-			} else {
-				namePanel.AddClass('hud-tab-menu-map-info__credits-name--no-steam');
 			}
 
 			// hoped this would make contextmenu work but it doesn't
-			if (authorCredits.indexOf(credit) < authorCredits.length - 1) {
+			if (idx < credits.length - 1) {
 				const commaPanel = $.CreatePanel('Label', this.panels.credits, '');
 				commaPanel.AddClass('hud-tab-menu-map-info__credits-other-text');
 				commaPanel.text = ',';

diff --git a/styles/hud/tab-menu.scss b/styles/hud/tab-menu.scss
@@ -158,12 +158,16 @@
 	}
 
 	&__credits-name {
-		color: $mid-blue;
 		margin-left: 4px;
-		transition: color 0.1s ease-in-out 0s;
+		color: color.scale($mid-blue, $lightness: 75%);
 
-		&:hover:not(&--no-steam) {
-			color: color.scale($mid-blue, $lightness: 50%);
+		&--steam {
+			color: $mid-blue;
+			transition: color 0.1s ease-in-out 0s;
+
+			&:hover {
+				color: color.scale($mid-blue, $lightness: 50%);
+			}
 		}
 	}