feat(map,data): add system labels

Author: oatmealproblem

src/renderer/src/intl/en-US.ts

@@ -223,13 +223,21 @@ export default {
 			striped: 'Striped',
 			cloudy: 'Cloudy',
 		},
+		system_names: {
+			none: 'None',
+			country_capitals: 'Country Capitals',
+			sector_capitals: 'Country and Sector Capitals',
+			colonized: 'Colonized Systems',
+			all: 'All Systems',
+		},
 	},
 	// labels and tooltips for various settings
 	setting: {
 		group: {
 			borders: 'Borders',
 			unions: 'Union Mode',
 			countryLabels: 'Country Labels',
+			systemLabels: 'System Labels',
 			systemIcons: 'System Icons',
 			hyperlanes: 'Hyperlanes',
 			bypassLinks: 'Bypass Links',
@@ -262,6 +270,9 @@ export default {
 		countryEmblemsMinSize: 'Emblem Min Size',
 		countryEmblemsMaxSize: 'Emblem Max Size',
 		labelsAvoidHoles: 'Avoid Holes in Border',
+		systemNames: 'System Names',
+		systemNamesFont: 'Font',
+		systemNamesFontSize: 'Font Size',
 		countryCapitalIcon: 'Country Capital',
 		sectorCapitalIcon: 'Sector Capital',
 		populatedSystemIcon: 'Populated System',

src/renderer/src/lib/map/SystemIcons.svelte

@@ -100,6 +100,31 @@
 			});
 		return { center, left, right, top, bottom, system };
 	}
+
+	function getIconsBottom(systemIcons: ReturnType<typeof getSystemIcons>): number {
+		return Math.max(
+			systemIcons.center
+				? systemIcons.center.y + systemIcons.center.size / 2
+				: systemIcons.system.y,
+			...systemIcons.left.map((i) => i.y + i.size / 2),
+			...systemIcons.right.map((i) => i.y + i.size / 2),
+			...systemIcons.top.map((i) => i.y + i.size / 2),
+			...systemIcons.bottom.map((i) => i.y + i.size / 2),
+		);
+	}
+
+	function shouldShowLabel(system: MapData['systems'][number]) {
+		if ($mapSettings.systemNames === 'none') return false;
+		if ($mapSettings.systemNames === 'all') return true;
+		if ($mapSettings.systemNames === 'countryCapitals' && system.isCountryCapital) return true;
+		if (
+			$mapSettings.systemNames === 'sectorCapitals' &&
+			(system.isCountryCapital || system.isSectorCapital)
+		)
+			return true;
+		if ($mapSettings.systemNames === 'colonized' && system.isColonized) return true;
+		return false;
+	}
 </script>
 
 {#each data.systems
@@ -120,4 +145,18 @@
 			})}
 		/>
 	{/each}
+	{#if shouldShowLabel(systemIcons.system)}
+		<text
+			x={systemIcons.system.x}
+			y={getIconsBottom(systemIcons) + $mapSettings.systemNamesFontSize / 4}
+			text-anchor="middle"
+			dominant-baseline="hanging"
+			font-size={$mapSettings.systemNamesFontSize}
+			fill="white"
+			font-family={$mapSettings.systemNamesFont}
+			style:text-shadow="0px 0px 3px black"
+		>
+			{systemIcons.system.name}
+		</text>
+	{/if}
 {/each}

src/renderer/src/lib/map/data/processLabels.ts

@@ -3,7 +3,6 @@ import polylabel from 'polylabel';
 import type { GameState } from '../../GameState';
 import type { MapSettings } from '../../settings';
 import type processBorders from './processBorders';
-import type processNames from './processNames';
 import type processSystemOwnership from './processSystemOwnership';
 import type processTerraIncognita from './processTerraIncognita';
 import {
@@ -37,7 +36,7 @@ export default function processLabels(
 	countryToGeojson: Record<number, PolygonalFeature>,
 	unionLeaderToUnionMembers: Record<number, Set<number>>,
 	borders: ReturnType<typeof processBorders>,
-	countryNames: Awaited<ReturnType<typeof processNames>>,
+	countryNames: Record<number, string>,
 	knownCountries: ReturnType<typeof processTerraIncognita>['knownCountries'],
 	ownedSystemPoints: ReturnType<typeof processSystemOwnership>['ownedSystemPoints'],
 ) {

src/renderer/src/lib/map/data/processMapData.ts

@@ -40,7 +40,7 @@ export default async function processMapData(
 		cached(processEmblems),
 		Object.values(gameState.country),
 	);
-	const countryNamesPromise = timeItAsync('names', cached(processNames), gameState, language);
+	const namesPromise = timeItAsync('names', cached(processNames), gameState, language);
 
 	const getSystemCoordinates = timeIt(
 		'system coordinates',
@@ -145,7 +145,7 @@ export default async function processMapData(
 		galaxyBorderCirclesGeoJSON,
 		getSystemCoordinates,
 	);
-	const countryNames = await countryNamesPromise;
+	const { countryNames, systemNames } = await namesPromise;
 	const labels = timeIt(
 		'labels',
 		cached(processLabels),
@@ -167,6 +167,7 @@ export default async function processMapData(
 		knownCountries,
 		knownSystems,
 		getSystemCoordinates,
+		systemNames,
 	);
 	const bypassLinks = timeIt(
 		'bypassLinks',

src/renderer/src/lib/map/data/processNames.ts

@@ -1,18 +1,21 @@
 import { get } from 'svelte/store';
-import type { Country, GameState } from '../../GameState';
+import type { GameState, LocalizedText } from '../../GameState';
 import { stellarisDataPromiseStore } from '../../loadStellarisData';
 import { localizeTextSync } from './locUtils';
 
 // _language is just here to control caching
 export default async function processNames(gameState: GameState, _language: string) {
-	const countryNames = await localizeCountryNames(gameState.country);
-	return countryNames;
+	const countryNames = await localizeEntityNames(gameState.country);
+	const systemNames = await localizeEntityNames(gameState.galactic_object);
+	return { countryNames, systemNames };
 }
 
-function localizeCountryNames(countries: Record<number, Country>) {
+function localizeEntityNames(entities: Record<number, { id: number; name: LocalizedText }>) {
 	return get(stellarisDataPromiseStore).then(({ loc }) => {
-		return Object.fromEntries<string | undefined>(
-			Object.values(countries).map((c) => [c.id, localizeTextSync(c.name, loc)] as const),
-		);
+		return Object.fromEntries<string>(
+			Object.values(entities).map(
+				(entity) => [entity.id, localizeTextSync(entity.name, loc)] as const,
+			),
+		) as Record<number, string>;
 	});
 }

src/renderer/src/lib/map/data/processSystems.ts

@@ -18,6 +18,7 @@ export default function processSystems(
 	knownCountries: Set<number>,
 	knownSystems: Set<number>,
 	getSystemCoordinates: (id: number, options?: { invertX?: boolean }) => [number, number],
+	systemNames: Record<number, string>,
 ) {
 	const systems = Object.values(gameState.galactic_object).map((system) => {
 		const countryId = systemIdToCountry[system.id];
@@ -61,6 +62,7 @@ export default function processSystems(
 			hasShroudTunnel,
 			x,
 			y,
+			name: systemNames[system.id] ?? 'Unknown',
 		};
 	});
 	return systems;

src/renderer/src/lib/settings/mapSettings.ts

@@ -10,7 +10,8 @@ export type NumberMapSettings =
 	| 'unionLeaderSymbolSize'
 	| 'terraIncognitaBrightness'
 	| 'borderFillFade'
-	| 'claimVoidBorderThreshold';
+	| 'claimVoidBorderThreshold'
+	| 'systemNamesFontSize';
 
 export type NumberOptionalMapSettings =
 	| 'countryEmblemsMaxSize'
@@ -30,7 +31,9 @@ export type StringMapSettings =
 	| 'unionSubjects'
 	| 'unionLeaderSymbol'
 	| 'terraIncognitaPerspectiveCountry'
-	| 'terraIncognitaStyle';
+	| 'terraIncognitaStyle'
+	| 'systemNames'
+	| 'systemNamesFont';
 
 export type BooleanMapSettings =
 	| 'hyperlaneSensitiveBorders'
@@ -152,6 +155,9 @@ export const defaultMapSettings: MapSettings = {
 	countryEmblemsMinSize: null,
 	countryEmblemsMaxSize: 75,
 	labelsAvoidHoles: 'owned',
+	systemNames: 'none',
+	systemNamesFont: 'Orbitron',
+	systemNamesFontSize: 3,
 	sectorBorderStroke: {
 		enabled: true,
 		width: 1,

src/renderer/src/lib/settings/mapSettingsConfig.ts

@@ -214,6 +214,35 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 			},
 		],
 	},
+	{
+		id: 'systemLabels',
+		name: 'setting.group.systemLabels',
+		settings: [
+			{
+				id: 'systemNames',
+				type: 'select',
+				options: [
+					{ id: 'none', name: 'option.system_names.none' },
+					{ id: 'countryCapitals', name: 'option.system_names.country_capitals' },
+					{ id: 'sectorCapitals', name: 'option.system_names.sector_capitals' },
+					{ id: 'colonized', name: 'option.system_names.colonized' },
+					{ id: 'all', name: 'option.system_names.all' },
+				],
+			},
+			{
+				id: 'systemNamesFont',
+				type: 'select',
+				options: [{ id: 'Orbitron', literalName: 'Orbitron' }],
+				dynamicOptions: fontOptions,
+			},
+			{
+				id: 'systemNamesFontSize',
+				type: 'number',
+				min: 0,
+				step: 0.5,
+			},
+		],
+	},
 	{
 		id: 'systemIcons',
 		name: 'setting.group.systemIcons',