feat(map): add planet labels to system maps

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

@@ -242,6 +242,13 @@ export default {
 			populationSpecies: 'Species Population',
 			fleetPowerAlliedAndHostile: 'Fleet Power (Allied and Hostile)',
 		},
+		system_map_label_position: {
+			top: 'Top',
+			bottom: 'Bottom',
+			right: 'Right',
+			left: 'Left',
+			orbit: 'Orbit',
+		},
 	},
 	// labels and tooltips for various settings
 	setting: {
@@ -408,6 +415,15 @@ export default {
 		systemMapOrbitStroke: 'Orbit Lines',
 		systemMapOrbitColor: 'Orbit Lines Color',
 		systemMapPlanetScale: 'Planet Scale',
+		systemMapLabelPlanetsFont: 'Planet Name Font',
+		systemMapLabelPlanetsFontSize: 'Planet Name Font Size',
+		systemMapLabelPlanetsPosition: 'Planet Name Position',
+		systemMapLabelPlanetsFallbackPosition: 'Planet Name Fallback Position',
+		systemMapLabelColoniesEnabled: 'Colony Names Enabled',
+		systemMapLabelStarsEnabled: 'Star Names Enabled',
+		systemMapLabelPlanetsEnabled: 'Planet Names Enabled',
+		systemMapLabelMoonsEnabled: 'Moon Names Enabled',
+		systemMapLabelAsteroidsEnabled: 'Asteroid Names Enabled',
 		appLocale: 'StellarMaps Language',
 		appLocale_tooltip:
 			'Join the Discord server (link in the top bar) if you want to help translate!',

src/renderer/src/lib/GameState.ts

@@ -101,6 +101,7 @@ const planetSchema = z.object({
 	planet_class: z.string(),
 	entity_name: z.string().optional(),
 	orbit: z.number(),
+	is_moon: z.boolean().optional(),
 	moon_of: z.number().optional(),
 	has_ring: z.boolean().optional(),
 	coordinate: z.object({ x: z.number(), y: z.number() }),

src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { select } from 'd3-selection';
 	import { zoom } from 'd3-zoom';
+	import { t } from '../../../intl';
 	import type { GalacticObject, GameState, Planet } from '../../GameState';
-	import { mapSettings } from '../../settings';
+	import { mapSettings, type MapSettings } from '../../settings';
 	import { isDefined } from '../../utils';
+	import { localizeText } from '../data/locUtils';
 	import Glow from '../Glow.svelte';
 	import { getStrokeAttributes, getStrokeColorAttributes } from '../mapUtils';
 
@@ -241,6 +243,126 @@
 		return planet.planet_class.includes('black_hole');
 	}
 
+	function isColony(planet: Planet) {
+		return planet.owner != null;
+	}
+
+	function isMoon(planet: Planet) {
+		return Boolean(planet.is_moon);
+	}
+
+	function isPlanetLabeled(planet: Planet, settings: MapSettings) {
+		return (
+			(isColony(planet) && settings.systemMapLabelColoniesEnabled) ||
+			(isStar(planet) && settings.systemMapLabelStarsEnabled) ||
+			(isMoon(planet) && settings.systemMapLabelMoonsEnabled) ||
+			(isAsteroid(planet) && settings.systemMapLabelAsteroidsEnabled) ||
+			(!isStar(planet) &&
+				!isMoon(planet) &&
+				!isAsteroid(planet) &&
+				settings.systemMapLabelPlanetsEnabled)
+		);
+	}
+
+	function getPlanetLabelPathAttributes(planet: Planet, settings: MapSettings) {
+		const r = Math.sqrt(
+			planet.planet_size * (settings.systemMapPlanetScale ?? 1) * (isStar(planet) ? 2 : 1),
+		);
+		let x = -planet.coordinate.x;
+		let y = planet.coordinate.y;
+		let position = settings.systemMapLabelPlanetsPosition;
+		if (position === 'orbit' && !planet.orbit) {
+			position = settings.systemMapLabelPlanetsFallbackPosition;
+		}
+		switch (position) {
+			case 'top': {
+				y -= r + settings.systemMapLabelPlanetsFontSize / 2;
+				x -= 500;
+				return { d: `M ${x} ${y} h 1000`, pathLength: 1 };
+			}
+			case 'bottom': {
+				y += r + settings.systemMapLabelPlanetsFontSize / 2;
+				x -= 500;
+				return { d: `M ${x} ${y} h 1000`, pathLength: 1 };
+			}
+			case 'right': {
+				x += r + settings.systemMapLabelPlanetsFontSize / 2;
+				return { d: `M ${x} ${y} h 1000`, pathLength: 1 };
+			}
+			case 'left': {
+				x -= r + settings.systemMapLabelPlanetsFontSize / 2 + 1000;
+				return { d: `M ${x} ${y} h 1000`, pathLength: 1 };
+			}
+			case 'orbit': {
+				const cx = -(planets.find((p) => p.id === planet.moon_of)?.coordinate.x ?? 0);
+				const cy = planets.find((p) => p.id === planet.moon_of)?.coordinate.y ?? 0;
+				const orbitRadius = planet.orbit;
+				if (cy > y) {
+					return {
+						d: `M ${x} ${y} A ${orbitRadius} ${orbitRadius} 0 0 1 ${cx + (cx - x)} ${cy + (cy - y)}`,
+					};
+				} else {
+					return {
+						d: `M ${x} ${y} A ${orbitRadius} ${orbitRadius} 0 0 0 ${cx + (cx - x)} ${cy + (cy - y)}`,
+					};
+				}
+			}
+			default: {
+				throw new Error(`Unhandled label position: ${position}`);
+			}
+		}
+	}
+
+	function getPlanetLabelTextPathAttributes(planet: Planet, settings: MapSettings) {
+		const r = Math.sqrt(
+			planet.planet_size * (settings.systemMapPlanetScale ?? 1) * (isStar(planet) ? 2 : 1),
+		);
+		let position = settings.systemMapLabelPlanetsPosition;
+		if (position === 'orbit' && !planet.orbit) {
+			position = settings.systemMapLabelPlanetsFallbackPosition;
+		}
+		switch (position) {
+			case 'top': {
+				return {
+					startOffset: 0.5,
+					'dominant-baseline': 'auto',
+					'text-anchor': 'middle',
+				};
+			}
+			case 'bottom': {
+				return {
+					startOffset: 0.5,
+					'dominant-baseline': 'hanging',
+					'text-anchor': 'middle',
+				};
+			}
+			case 'right': {
+				return {
+					startOffset: 0,
+					'dominant-baseline': 'middle',
+					'text-anchor': 'start',
+				};
+			}
+			case 'left': {
+				return {
+					startOffset: 1,
+					'dominant-baseline': 'middle',
+					'text-anchor': 'end',
+				};
+			}
+			case 'orbit': {
+				return {
+					startOffset: r + settings.systemMapLabelPlanetsFontSize / 2,
+					'dominant-baseline': 'auto',
+					'text-anchor': 'start',
+				};
+			}
+			default: {
+				throw new Error(`Unhandled label position: ${position}`);
+			}
+		}
+	}
+
 	function getShadowPath(planet: Planet, scale: number) {
 		const r = Math.sqrt(planet.planet_size * scale);
 		return `
@@ -286,7 +408,7 @@
 	</defs>
 	<g bind:this={g}>
 		{#if $mapSettings.systemMapOrbitStroke.enabled}
-			{#each planets.filter((p) => !isAsteroid(p)) as planet (planet.id)}
+			{#each planets.filter((p) => !isAsteroid(p) && p.orbit > 0) as planet (planet.id)}
 				<Glow enabled={$mapSettings.systemMapOrbitStroke.glow}>
 					<circle
 						cx={-(planets.find((p) => p.id === planet.moon_of)?.coordinate.x ?? 0)}
@@ -368,5 +490,29 @@
 				/>
 			{/if}
 		{/each}
+		{#each planets.filter((p) => isPlanetLabeled(p, $mapSettings)) as planet (planet.id)}
+			<defs>
+				<path
+					id="planetLabelPath{planet.id}"
+					{...getPlanetLabelPathAttributes(planet, $mapSettings)}
+				/>
+			</defs>
+			<text
+				font-family={$mapSettings.systemMapLabelPlanetsFont}
+				font-size={$mapSettings.systemMapLabelPlanetsFontSize}
+				fill="#FFFFFF"
+			>
+				<textPath
+					href="#planetLabelPath{planet.id}"
+					{...getPlanetLabelTextPathAttributes(planet, $mapSettings)}
+				>
+					{#await localizeText(planet.name)}
+						{$t('generic.loading')}
+					{:then planetName}
+						{planetName}
+					{/await}
+				</textPath>
+			</text>
+		{/each}
 	</g>
 </svg>

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

@@ -10,6 +10,7 @@ export type NumberMapSettings =
 	| 'borderFillFade'
 	| 'claimVoidBorderThreshold'
 	| 'legendFontSize'
+	| 'systemMapLabelPlanetsFontSize'
 	| 'systemNamesFontSize'
 	| 'terraIncognitaBrightness'
 	| 'unionLeaderSymbolSize'
@@ -34,6 +35,9 @@ export type StringMapSettings =
 	| 'mapMode'
 	| 'mapModePointOfView'
 	| 'mapModeSpecies'
+	| 'systemMapLabelPlanetsFont'
+	| 'systemMapLabelPlanetsPosition'
+	| 'systemMapLabelPlanetsFallbackPosition'
 	| 'systemNames'
 	| 'systemNamesFont'
 	| 'terraIncognitaPerspectiveCountry'
@@ -58,6 +62,11 @@ export type BooleanMapSettings =
 	| 'starScapeDust'
 	| 'starScapeNebula'
 	| 'starScapeStars'
+	| 'systemMapLabelColoniesEnabled'
+	| 'systemMapLabelStarsEnabled'
+	| 'systemMapLabelPlanetsEnabled'
+	| 'systemMapLabelMoonsEnabled'
+	| 'systemMapLabelAsteroidsEnabled'
 	| 'terraIncognita'
 	| 'unionLeaderUnderline'
 	| 'unionMode';
@@ -431,6 +440,15 @@ export const defaultMapSettings: MapSettings = {
 		width: 0.5,
 	},
 	systemMapPlanetScale: 1,
+	systemMapLabelPlanetsFont: 'Orbitron',
+	systemMapLabelPlanetsFontSize: 10,
+	systemMapLabelPlanetsPosition: 'right',
+	systemMapLabelPlanetsFallbackPosition: 'bottom',
+	systemMapLabelColoniesEnabled: true,
+	systemMapLabelStarsEnabled: true,
+	systemMapLabelPlanetsEnabled: false,
+	systemMapLabelMoonsEnabled: false,
+	systemMapLabelAsteroidsEnabled: false,
 };
 
 export const mapSettings = localStorageStore('mapSettings', defaultMapSettings);

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

@@ -715,6 +715,60 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 				min: 0,
 				step: 0.1,
 			},
+			{
+				id: 'systemMapLabelPlanetsFont',
+				type: 'select',
+				options: [{ id: 'Orbitron', literalName: 'Orbitron' }],
+				dynamicOptions: fontOptions,
+			},
+			{
+				id: 'systemMapLabelPlanetsFontSize',
+				type: 'number',
+				min: 0,
+				step: 1,
+			},
+			{
+				id: 'systemMapLabelPlanetsPosition',
+				type: 'select',
+				options: [
+					{ id: 'top', name: 'option.system_map_label_position.top' },
+					{ id: 'bottom', name: 'option.system_map_label_position.bottom' },
+					{ id: 'left', name: 'option.system_map_label_position.left' },
+					{ id: 'right', name: 'option.system_map_label_position.right' },
+					{ id: 'orbit', name: 'option.system_map_label_position.orbit' },
+				],
+			},
+			{
+				id: 'systemMapLabelPlanetsFallbackPosition',
+				type: 'select',
+				hideIf: (settings) => settings.systemMapLabelPlanetsPosition !== 'orbit',
+				options: [
+					{ id: 'top', name: 'option.system_map_label_position.top' },
+					{ id: 'bottom', name: 'option.system_map_label_position.bottom' },
+					{ id: 'left', name: 'option.system_map_label_position.left' },
+					{ id: 'right', name: 'option.system_map_label_position.right' },
+				],
+			},
+			{
+				id: 'systemMapLabelColoniesEnabled',
+				type: 'toggle',
+			},
+			{
+				id: 'systemMapLabelStarsEnabled',
+				type: 'toggle',
+			},
+			{
+				id: 'systemMapLabelPlanetsEnabled',
+				type: 'toggle',
+			},
+			{
+				id: 'systemMapLabelMoonsEnabled',
+				type: 'toggle',
+			},
+			{
+				id: 'systemMapLabelAsteroidsEnabled',
+				type: 'toggle',
+			},
 		],
 	},
 ];