From 005f3bbe541d8fe6297f40b8e87d2d447d337a04 Mon Sep 17 00:00:00 2001
From: Michael Moore <mscottmoore@protonmail.com>
Date: Sun, 1 Sep 2024 23:51:55 -0500
Subject: [PATCH] feat(map): add basic display of solar system maps

---
 src/renderer/src/intl/en-US.ts                |   6 +
 src/renderer/src/lib/ExportModal.svelte       | 144 ++++---
 src/renderer/src/lib/GameState.ts             |  15 +
 src/renderer/src/lib/map/Glow.svelte          |   3 +-
 src/renderer/src/lib/map/MapContainer.svelte  | 235 ++++++-----
 src/renderer/src/lib/map/MapTooltip.svelte    |   3 +
 .../map/solarSystemMap/SolarSystemMap.svelte  | 372 ++++++++++++++++++
 src/renderer/src/lib/settings/mapSettings.ts  |  15 +-
 .../src/lib/settings/mapSettingsConfig.ts     |  24 ++
 9 files changed, 660 insertions(+), 157 deletions(-)
 create mode 100644 src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte

diff --git a/src/renderer/src/intl/en-US.ts b/src/renderer/src/intl/en-US.ts
index 279d9a4..6cdb181 100644
--- a/src/renderer/src/intl/en-US.ts
+++ b/src/renderer/src/intl/en-US.ts
@@ -24,11 +24,13 @@ export default {
 		select_save: 'Select a save in the top left',
 		loading: 'This could take a few seconds',
 		error: 'Something has gone wrong',
+		click_to_view_system: 'Click to open map',
 	},
 	// various generic messages
 	generic: {
 		enabled: 'Enabled',
 		disabled: 'Disabled',
+		back_button: 'Back',
 		cancel_button: 'Cancel',
 		close_button: 'Close',
 		loading: 'Loading...',
@@ -257,6 +259,7 @@ export default {
 			advancedBorder: 'Advanced Border Settings',
 			starscape: 'Starscape',
 			legend: 'Legend',
+			solarSystemMap: 'Solar System Maps',
 		},
 		mapMode: 'Map Mode',
 		mapModePointOfView: 'Point of View',
@@ -402,6 +405,9 @@ export default {
 		legendBorderStroke: 'Border',
 		legendBorderColor: 'Border Color',
 		legendBackgroundColor: 'Background Color',
+		systemMapOrbitStroke: 'Orbit Lines',
+		systemMapOrbitColor: 'Orbit Lines Color',
+		systemMapPlanetScale: 'Planet Scale',
 		appLocale: 'StellarMaps Language',
 		appLocale_tooltip:
 			'Join the Discord server (link in the top bar) if you want to help translate!',
diff --git a/src/renderer/src/lib/ExportModal.svelte b/src/renderer/src/lib/ExportModal.svelte
index 37a6836..94f187e 100644
--- a/src/renderer/src/lib/ExportModal.svelte
+++ b/src/renderer/src/lib/ExportModal.svelte
@@ -6,11 +6,13 @@
 		getToastStore,
 		localStorageStore,
 	} from '@skeletonlabs/skeleton';
+	import { onDestroy } from 'svelte';
 	import { t } from '../intl';
-	import type { GameState } from './GameState';
+	import type { GalacticObject, GameState } from './GameState';
 	import convertSvgToPng from './convertSvgToPng';
 	import type { MapData } from './map/data/processMapData';
 	import { getBackgroundColor, getFillColorAttributes, resolveColor } from './map/mapUtils';
+	import SolarSystemMap from './map/solarSystemMap/SolarSystemMap.svelte';
 	import processStarScape from './map/starScape/renderStarScape';
 	import { mapSettings } from './settings';
 	import stellarMapsApi from './stellarMapsApi';
@@ -19,10 +21,26 @@
 	const _props = $$props; // this suppresses warning about unknown prop 'parent'
 	const modalStore = getModalStore();
 	const toastStore = getToastStore();
-	const svg: SVGGElement = $modalStore[0]?.meta?.svg;
+	const galaxyMapSvg: SVGElement = $modalStore[0]?.meta?.svg;
 	const colors: Record<string, string> = $modalStore[0]?.meta?.colors;
 	const mapData: MapData = $modalStore[0]?.meta?.mapData;
 	const gameState: GameState = $modalStore[0]?.meta?.gameState;
+	const openedSystem: GalacticObject | undefined = $modalStore[0]?.meta?.openedSystem;
+
+	const solarSystemMapTarget = document.createElement('div');
+	const solarSystemMap = openedSystem
+		? new SolarSystemMap({
+				target: solarSystemMapTarget,
+				props: {
+					id: 'exportSystemMap',
+					colors: colors,
+					gameState: gameState,
+					system: openedSystem,
+					exportMode: true,
+				},
+			})
+		: null;
+	onDestroy(() => solarSystemMap?.$destroy());
 
 	const defaultExportSettings = {
 		lockAspectRatio: true,
@@ -99,31 +117,36 @@
 	}
 
 	async function exportPng() {
-		const backgroundImageUrl = await processStarScape(
-			gameState,
-			$mapSettings,
-			colors,
+		const backgroundImageUrl = openedSystem
+			? undefined
+			: await processStarScape(
+					gameState,
+					$mapSettings,
+					colors,
+					{
+						left: mapLeft,
+						top: mapTop,
+						width: mapWidth,
+						height: mapHeight,
+					},
+					{
+						width: imageWidth,
+						height: imageHeight,
+					},
+				);
+		const buffer = await convertSvgToPng(
+			solarSystemMap ? (solarSystemMapTarget.firstChild as SVGElement) : galaxyMapSvg,
 			{
 				left: mapLeft,
 				top: mapTop,
 				width: mapWidth,
 				height: mapHeight,
+				outputWidth: imageWidth,
+				outputHeight: imageHeight,
+				backgroundImageUrl,
+				backgroundColor: getBackgroundColor(colors, $mapSettings),
 			},
-			{
-				width: imageWidth,
-				height: imageHeight,
-			},
-		);
-		const buffer = await convertSvgToPng(svg, {
-			left: mapLeft,
-			top: mapTop,
-			width: mapWidth,
-			height: mapHeight,
-			outputWidth: imageWidth,
-			outputHeight: imageHeight,
-			backgroundImageUrl,
-			backgroundColor: getBackgroundColor(colors, $mapSettings),
-		}).then((blob) => blob.arrayBuffer());
+		).then((blob) => blob.arrayBuffer());
 		const savePath = await stellarMapsApi.dialog.save({
 			defaultPath: await stellarMapsApi.path.join(
 				await stellarMapsApi.path.pictureDir(),
@@ -131,7 +154,7 @@
 			),
 			filters: [{ extensions: ['png'], name: 'Image' }],
 		});
-		if (savePath && svg) {
+		if (savePath && galaxyMapSvg) {
 			await stellarMapsApi.fs.writeBinaryFile(savePath, new Uint8Array(buffer)).then(() => {
 				toastStore.trigger({
 					background: 'variant-filled-success',
@@ -154,34 +177,39 @@
 	}
 
 	async function exportSvg() {
-		svg.setAttribute('width', imageWidth.toString());
-		svg.setAttribute('height', imageHeight.toString());
-		svg.setAttribute('viewBox', `${mapLeft} ${mapTop} ${mapWidth} ${mapHeight}`);
+		const svgToExport = openedSystem
+			? (solarSystemMapTarget.firstChild as SVGElement)
+			: galaxyMapSvg;
+		svgToExport.setAttribute('width', imageWidth.toString());
+		svgToExport.setAttribute('height', imageHeight.toString());
+		svgToExport.setAttribute('viewBox', `${mapLeft} ${mapTop} ${mapWidth} ${mapHeight}`);
 
 		const bgImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-		bgImage.setAttribute('x', mapLeft.toString());
-		bgImage.setAttribute('y', mapTop.toString());
-		bgImage.setAttribute('width', mapWidth.toString());
-		bgImage.setAttribute('height', mapHeight.toString());
-		bgImage.setAttribute(
-			'xlink:href',
-			await processStarScape(
-				gameState,
-				$mapSettings,
-				colors,
-				{
-					left: mapLeft,
-					top: mapTop,
-					width: mapWidth,
-					height: mapHeight,
-				},
-				{
-					width: imageWidth,
-					height: imageHeight,
-				},
-			),
-		);
-		svg.prepend(bgImage);
+		if (!openedSystem) {
+			bgImage.setAttribute('x', mapLeft.toString());
+			bgImage.setAttribute('y', mapTop.toString());
+			bgImage.setAttribute('width', mapWidth.toString());
+			bgImage.setAttribute('height', mapHeight.toString());
+			bgImage.setAttribute(
+				'xlink:href',
+				await processStarScape(
+					gameState,
+					$mapSettings,
+					colors,
+					{
+						left: mapLeft,
+						top: mapTop,
+						width: mapWidth,
+						height: mapHeight,
+					},
+					{
+						width: imageWidth,
+						height: imageHeight,
+					},
+				),
+			);
+			svgToExport.prepend(bgImage);
+		}
 
 		const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
 		bgRect.setAttribute('x', mapLeft.toString());
@@ -189,11 +217,11 @@
 		bgRect.setAttribute('width', mapWidth.toString());
 		bgRect.setAttribute('height', mapHeight.toString());
 		bgRect.setAttribute('fill', getBackgroundColor(colors, $mapSettings));
-		svg.prepend(bgRect);
+		svgToExport.prepend(bgRect);
 
-		const svgString = svg.outerHTML;
-		svg.removeChild(bgImage);
-		svg.removeChild(bgRect);
+		const svgString = svgToExport.outerHTML;
+		if (!openedSystem) svgToExport.removeChild(bgImage);
+		svgToExport.removeChild(bgRect);
 
 		const savePath = await stellarMapsApi.dialog.save({
 			defaultPath: await stellarMapsApi.path
@@ -201,7 +229,7 @@
 				.catch(() => ''),
 			filters: [{ extensions: ['svg'], name: 'Image' }],
 		});
-		if (savePath && svg) {
+		if (savePath && svgToExport) {
 			await stellarMapsApi.fs.writeFile(savePath, svgString).then(() => {
 				toastStore.trigger({
 					background: 'variant-filled-success',
@@ -377,7 +405,15 @@
 				role="button"
 				style:cursor="pointer"
 			>
-				{#if mapData}
+				{#if openedSystem}
+					<SolarSystemMap
+						system={openedSystem}
+						{colors}
+						{gameState}
+						id="systemMapPreview"
+						previewMode
+					/>
+				{:else if mapData}
 					{#each mapData.borders as border}
 						<path
 							d={border.borderPath}
diff --git a/src/renderer/src/lib/GameState.ts b/src/renderer/src/lib/GameState.ts
index 11cfae6..41d5435 100644
--- a/src/renderer/src/lib/GameState.ts
+++ b/src/renderer/src/lib/GameState.ts
@@ -65,6 +65,14 @@ const galacticObjectSchema = z
 			.optional(),
 		planet: z.number().optional(),
 		fleet_presence: z.array(z.number()).default([]),
+		asteroid_belts: z
+			.array(
+				z.object({
+					type: z.string(),
+					inner_radius: z.number(),
+				}),
+			)
+			.default([]),
 		$multiKeys: z
 			.object({
 				planet: preprocessedArray(z.number()).optional(),
@@ -89,6 +97,13 @@ const planetSchema = z.object({
 	species_information: z
 		.record(z.string(), z.object({ num_pops: z.number(), num_enslaved: z.number().optional() }))
 		.optional(),
+	planet_size: z.number(),
+	planet_class: z.string(),
+	entity_name: z.string().optional(),
+	orbit: z.number(),
+	moon_of: z.number().optional(),
+	has_ring: z.boolean().optional(),
+	coordinate: z.object({ x: z.number(), y: z.number() }),
 });
 
 /**
diff --git a/src/renderer/src/lib/map/Glow.svelte b/src/renderer/src/lib/map/Glow.svelte
index 65c4eaf..2da186f 100644
--- a/src/renderer/src/lib/map/Glow.svelte
+++ b/src/renderer/src/lib/map/Glow.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	export let enabled: boolean;
+	export let filterId = 'glow';
 </script>
 
 {#if enabled}
-	<slot filter="url(#glow)" />
+	<slot filter="url(#{filterId})" />
 {/if}
 <slot filter="" />
diff --git a/src/renderer/src/lib/map/MapContainer.svelte b/src/renderer/src/lib/map/MapContainer.svelte
index fdc117d..da0f5f0 100644
--- a/src/renderer/src/lib/map/MapContainer.svelte
+++ b/src/renderer/src/lib/map/MapContainer.svelte
@@ -31,6 +31,7 @@
 	import MapTooltip from './MapTooltip.svelte';
 	import processMapData from './data/processMapData';
 	import { getBackgroundColor } from './mapUtils';
+	import SolarSystemMap from './solarSystemMap/SolarSystemMap.svelte';
 	import processStarScape from './starScape/renderStarScape';
 
 	const modalStore = getModalStore();
@@ -73,7 +74,13 @@
 			modalStore.trigger({
 				type: 'component',
 				component: 'export',
-				meta: { colors, mapData, gameState: gameStateOrNull, svg: mapTarget.firstChild },
+				meta: {
+					colors,
+					mapData,
+					gameState: gameStateOrNull,
+					svg: mapTarget.firstChild,
+					openedSystem,
+				},
 			});
 		});
 	}
@@ -375,35 +382,52 @@
 		onMouseMoveInnerDebounced(e);
 	}
 
-	function onMapClick() {
-		const countryId = tooltip?.countryId;
-		if (countryId != null) {
-			editedMapSettings.update((value) => ({ ...value, mapModePointOfView: countryId.toString() }));
-			mapSettings.update((value) => ({ ...value, mapModePointOfView: countryId.toString() }));
-			lastProcessedMapSettings.update((value) => ({
-				...value,
-				mapModePointOfView: countryId.toString(),
-			}));
+	let openedSystem: GalacticObject | undefined = undefined;
+	function closeSystemMap() {
+		openedSystem = undefined;
+	}
+	$: if (gameStateOrNull || !gameStateOrNull) {
+		closeSystemMap();
+	}
+
+	function onMapClick(e: MouseEvent) {
+		if (e.shiftKey) {
+			const countryId = tooltip?.countryId;
+			if (countryId != null) {
+				editedMapSettings.update((value) => ({
+					...value,
+					mapModePointOfView: countryId.toString(),
+				}));
+				mapSettings.update((value) => ({ ...value, mapModePointOfView: countryId.toString() }));
+				lastProcessedMapSettings.update((value) => ({
+					...value,
+					mapModePointOfView: countryId.toString(),
+				}));
+			}
+		} else {
+			openedSystem = tooltip?.system;
 		}
 	}
 </script>
 
 <div class="relative h-full w-full" style:background={bg} bind:this={container}>
-	{#if dataOrNull && colorsOrNull}
+	{#if dataOrNull && colorsOrNull && openedSystem == null}
 		<div class="absolute left-0 top-16">
 			<Legend data={dataOrNull} colors={colorsOrNull}></Legend>
 		</div>
 	{/if}
-	{#if transform != null}
-		<button
-			type="button"
-			class="variant-filled btn-icon absolute left-3 top-3"
-			transition:fade
-			on:click={resetZoom}
-		>
-			<HeroiconArrowsPointingOut />
-		</button>
-	{/if}
+	<div class="absolute left-3 top-3 flex gap-3">
+		{#if openedSystem}
+			<button type="button" class="variant-filled btn" on:click={closeSystemMap}>
+				{$t('generic.back_button')}
+			</button>
+		{/if}
+		{#if transform != null && !openedSystem}
+			<button type="button" class="variant-filled btn-icon" transition:fade on:click={resetZoom}>
+				<HeroiconArrowsPointingOut />
+			</button>
+		{/if}
+	</div>
 	{#if dataOrNull}
 		<button
 			type="button"
@@ -414,7 +438,7 @@
 			{$t('export.button')}
 		</button>
 	{/if}
-	{#if tooltip != null && !tooltip.hidden && !zooming && !resizing}
+	{#if tooltip != null && openedSystem == null && !tooltip.hidden && !zooming && !resizing}
 		<div class="pointer-events-none absolute left-0 top-0 h-full w-full overflow-hidden">
 			<MapTooltip x={tooltip.x} y={tooltip.y} system={tooltip.system} gameState={gameStateOrNull} />
 		</div>
@@ -451,92 +475,101 @@
 				</div>
 			</div>
 		{/await}
-		<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-		<svg
-			bind:this={svg}
-			width={outputWidth}
-			height={outputHeight}
-			viewBox="0 0 {outputWidth} {outputHeight}"
-			role="presentation"
-			on:mousemove={onMouseMove}
-			on:mouseout={() => {
-				tooltip = null;
-			}}
-			on:click={onMapClick}
-			class:cursor-pointer={tooltip?.countryId != null}
-			class="h-full w-full"
-		>
-			<g transform={transform?.toString()}>
-				{#if unzoomedStarScapeDataUrl}
-					<image
-						x="0"
-						y="0"
-						width={outputWidth}
-						height={outputHeight}
-						href={unzoomedStarScapeDataUrl}
-					/>
-				{/if}
-			</g>
-			<g bind:this={g}>
-				{#if pngDataUrl}
-					<image x="0" y="0" width={outputWidth} height={outputHeight} href={pngDataUrl} />
-				{/if}
-			</g>
-			{#if starScapeDataUrl}
-				<rect
-					x="0"
-					y="0"
-					width={outputWidth}
-					height={outputHeight}
-					fill={getBackgroundColor(colorsOrNull, $mapSettings)}
-				/>
-				<image x="0" y="0" width={outputWidth} height={outputHeight} href={starScapeDataUrl} />
-			{:else if lastRenderedTransformStarScapePngDataUrl}
+		{#if openedSystem && gameStateOrNull && colorsOrNull}
+			<SolarSystemMap
+				id="systemMap"
+				gameState={gameStateOrNull}
+				system={openedSystem}
+				colors={colorsOrNull}
+			/>
+		{:else}
+			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+			<svg
+				bind:this={svg}
+				width={outputWidth}
+				height={outputHeight}
+				viewBox="0 0 {outputWidth} {outputHeight}"
+				role="presentation"
+				on:mousemove={onMouseMove}
+				on:mouseout={() => {
+					tooltip = null;
+				}}
+				on:click={onMapClick}
+				class:cursor-pointer={tooltip?.countryId != null}
+				class="h-full w-full"
+			>
 				<g transform={transform?.toString()}>
+					{#if unzoomedStarScapeDataUrl}
+						<image
+							x="0"
+							y="0"
+							width={outputWidth}
+							height={outputHeight}
+							href={unzoomedStarScapeDataUrl}
+						/>
+					{/if}
+				</g>
+				<g bind:this={g}>
+					{#if pngDataUrl}
+						<image x="0" y="0" width={outputWidth} height={outputHeight} href={pngDataUrl} />
+					{/if}
+				</g>
+				{#if starScapeDataUrl}
 					<rect
 						x="0"
 						y="0"
 						width={outputWidth}
 						height={outputHeight}
 						fill={getBackgroundColor(colorsOrNull, $mapSettings)}
-						transform={lastRenderedTransformStarScape
-							? `scale(${
-									1 / lastRenderedTransformStarScape.k
-								}) translate(${-lastRenderedTransformStarScape.x},${-lastRenderedTransformStarScape.y})`
-							: undefined}
-					/>
-					<image
-						x="0"
-						y="0"
-						width={outputWidth}
-						height={outputHeight}
-						href={lastRenderedTransformStarScapePngDataUrl}
-						transform={lastRenderedTransformStarScape
-							? `scale(${
-									1 / lastRenderedTransformStarScape.k
-								}) translate(${-lastRenderedTransformStarScape.x},${-lastRenderedTransformStarScape.y})`
-							: undefined}
 					/>
-				</g>
-			{/if}
-			{#if zoomedPngDataUrl}
-				<image x="0" y="0" width={outputWidth} height={outputHeight} href={zoomedPngDataUrl} />
-			{:else if lastRenderedTransformPngDataUrl}
-				<g transform={transform?.toString()}>
-					<image
-						x="0"
-						y="0"
-						width={outputWidth}
-						height={outputHeight}
-						href={lastRenderedTransformPngDataUrl}
-						transform={lastRenderedTransform
-							? `scale(${
-									1 / lastRenderedTransform.k
-								}) translate(${-lastRenderedTransform.x},${-lastRenderedTransform.y})`
-							: undefined}
-					/>
-				</g>
-			{/if}
-		</svg>
+					<image x="0" y="0" width={outputWidth} height={outputHeight} href={starScapeDataUrl} />
+				{:else if lastRenderedTransformStarScapePngDataUrl}
+					<g transform={transform?.toString()}>
+						<rect
+							x="0"
+							y="0"
+							width={outputWidth}
+							height={outputHeight}
+							fill={getBackgroundColor(colorsOrNull, $mapSettings)}
+							transform={lastRenderedTransformStarScape
+								? `scale(${
+										1 / lastRenderedTransformStarScape.k
+									}) translate(${-lastRenderedTransformStarScape.x},${-lastRenderedTransformStarScape.y})`
+								: undefined}
+						/>
+						<image
+							x="0"
+							y="0"
+							width={outputWidth}
+							height={outputHeight}
+							href={lastRenderedTransformStarScapePngDataUrl}
+							transform={lastRenderedTransformStarScape
+								? `scale(${
+										1 / lastRenderedTransformStarScape.k
+									}) translate(${-lastRenderedTransformStarScape.x},${-lastRenderedTransformStarScape.y})`
+								: undefined}
+						/>
+					</g>
+				{/if}
+				{#if zoomedPngDataUrl}
+					<image x="0" y="0" width={outputWidth} height={outputHeight} href={zoomedPngDataUrl} />
+				{:else if lastRenderedTransformPngDataUrl}
+					<g transform={transform?.toString()}>
+						<image
+							x="0"
+							y="0"
+							width={outputWidth}
+							height={outputHeight}
+							href={lastRenderedTransformPngDataUrl}
+							transform={lastRenderedTransform
+								? `scale(${
+										1 / lastRenderedTransform.k
+									}) translate(${-lastRenderedTransform.x},${-lastRenderedTransform.y})`
+								: undefined}
+						/>
+					</g>
+				{/if}
+			</svg>
+		{/if}
 	{/if}
 </div>
diff --git a/src/renderer/src/lib/map/MapTooltip.svelte b/src/renderer/src/lib/map/MapTooltip.svelte
index 01e8d04..9752ed7 100644
--- a/src/renderer/src/lib/map/MapTooltip.svelte
+++ b/src/renderer/src/lib/map/MapTooltip.svelte
@@ -92,4 +92,7 @@
 			{/each}
 		</ul>
 	{/if}
+	<small class="w-10">
+		{$t('map.click_to_view_system')}
+	</small>
 </div>
diff --git a/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte b/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte
new file mode 100644
index 0000000..d70edc4
--- /dev/null
+++ b/src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+	import { select } from 'd3-selection';
+	import { zoom } from 'd3-zoom';
+	import type { GalacticObject, GameState, Planet } from '../../GameState';
+	import { mapSettings } from '../../settings';
+	import { isDefined } from '../../utils';
+	import Glow from '../Glow.svelte';
+	import { getStrokeAttributes, getStrokeColorAttributes } from '../mapUtils';
+
+	export let system: GalacticObject;
+	export let gameState: GameState;
+	export let colors: Record<string, string>;
+	export let id: string;
+	export let exportMode = false;
+	export let previewMode = false;
+
+	let svg: SVGElement;
+	let g: SVGGElement;
+	let zoomHandler = zoom().on('zoom', (e) => {
+		if (g) g.setAttribute('transform', e.transform.toString());
+	});
+	$: if (svg && !exportMode && !previewMode) {
+		select(svg).call(zoomHandler as any);
+	}
+
+	$: planets = system.planet
+		.map((planetId) => gameState.planets.planet[planetId])
+		.filter(isDefined);
+
+	function getPlanetColor(planet: Planet): string | undefined {
+		let pc = planet.planet_class;
+		if (pc.includes('_station')) [(pc = pc.substring(0, pc.indexOf('_station')))];
+		switch (pc) {
+			// standard habitable
+			case 'pc_desert':
+			case 'pc_arid':
+			case 'pc_savanna':
+			case 'mem_pc_death': // mem
+				return colors.swamp_green;
+			case 'pc_tropical':
+			case 'pc_continental':
+			case 'pc_ocean':
+				return colors.intense_blue;
+			case 'pc_tundra':
+			case 'pc_arctic':
+			case 'pc_alpine':
+				return colors.ice_turquoise;
+			// standard uninhabitable
+			case 'pc_gas_giant':
+				return colors.beige;
+			case 'pc_asteroid':
+				return colors.brown;
+			case 'pc_ice_asteroid':
+				return colors.faded_blue;
+			case 'pc_rare_crystal_asteroid':
+			case 'pc_crystal_asteroid':
+				return colors.wave_blue;
+			case 'pc_molten':
+				return colors.intense_orange;
+			case 'pc_barren':
+			case 'pc_hollow': // RS (habitable)
+			case 'pc_sterile': // RS (habitable)
+			case 'pc_tidally_locked': // RS (habitable)
+				return colors.khaki_brown;
+			case 'pc_barren_cold':
+				return colors.faded_blue;
+			case 'pc_toxic':
+				return colors.toxic_green;
+			case 'pc_frozen':
+				return colors.off_white;
+			// special
+			case 'pc_nuked':
+			case 'pc_gpm_precursor_tomb': // gpm
+				return colors.grey;
+			case 'pc_gaia':
+				return colors.ocean_turquoise;
+			case 'pc_hive':
+			case 'pc_infested':
+				return colors.sick_green;
+			case 'pc_shielded':
+				return colors.blue;
+			case 'pc_astral_scar':
+			case 'pc_shrouded':
+				return colors.intense_purple;
+			case 'pc_broken':
+			case 'pc_egg_cracked':
+			case 'pc_shattered':
+			case 'pc_shattered_2':
+			case 'pc_mem_destroyed_barren': // mem
+			case 'pc_mem_broken_city': // mem
+				return colors.brown;
+			// artificial
+			case 'pc_ai':
+			case 'pc_city':
+			case 'pc_cosmogenesis_world':
+			case 'pc_crystal_habitat':
+			case 'pc_cybrex':
+			case 'pc_gray_goo':
+			case 'pc_habitat_shielded':
+			case 'pc_habitat':
+			case 'pc_machine_broken':
+			case 'pc_machine':
+			case 'pc_nanotech':
+			case 'pc_ringworld_habitable_damaged':
+			case 'pc_ringworld_habitable':
+			case 'pc_ringworld_seam_damaged':
+			case 'pc_ringworld_seam':
+			case 'pc_ringworld_shielded':
+			case 'pc_ringworld_tech_damaged':
+			case 'pc_ringworld_tech':
+			case 'pc_shattered_ring_habitable':
+			case 'pc_warden_guardian':
+				return colors.ship_steel;
+			case 'pc_relic':
+				return colors.beige;
+			// stars (many of these are from RS)
+			case 'pc_o_star':
+			case 'pc_o_super_star':
+			case 'pc_o_hyper_star':
+			case 'pc_giga_o_star': // giga
+				return colors.cloud_purple;
+			case 'pc_b_star':
+			case 'pc_b_super_star':
+				return colors.light_blue;
+			case 'pc_a_star':
+			case 'pc_a_super_star':
+				return colors.white;
+			case 'pc_f_star':
+			case 'pc_f_super_star':
+				return colors.desert_yellow;
+			case 'pc_g_star':
+			case 'pc_g_giant_star':
+			case 'pc_g_super_star':
+				return colors.bright_yellow;
+			case 'pc_k_star':
+			case 'pc_k_giant_star':
+			case 'pc_k_super_star':
+			case 'pc_s_giant_star': // RS zirconium star
+			case 'pc_fu_star': // RS FU Orionis
+				return colors.light_orange;
+			case 'pc_m_star':
+			case 'pc_m_giant_star':
+			case 'pc_m_super_star':
+			case 'pc_m_hyper_star':
+			case 'pc_c_giant_star': // RS carbon star
+			case 'pc_gigaignited_star': // gaga
+				return colors.cerise_red;
+			case 'pc_l_star': // RS brown dwarf
+			case 'pc_t_star': // brown dwarf
+			case 'pc_t_star_big': // giga brown dwarf
+			case 'pc_y_star': // RS brown dwarf
+				return colors.brown;
+			case 'pc_black_hole':
+			case 'pc_mem_micro_black_hole': // mem
+			case 'pc_black_hole_giga': // giga
+			case 'pc_pouchkinn_black_hole': // giga
+			case 'pc_ehod_black_hole': // giga
+				return colors.true_black;
+			case 'pc_neutron_star':
+			case 'pc_pulsar':
+			case 'pc_d_star': // RS
+			case 'pc_collapsar': // RS
+			case 'pc_protostar': // RS
+			case 'pc_magnetar': // RS
+			case 'pc_microquasar_1': // RS
+			case 'pc_microquasar_2': // RS
+			case 'pc_ae_star': // RS
+			case 'pc_mem_synthetic_sun': // mem
+			case 'pc_whc_star': // giga
+			case 'pc_wh_star': // giga
+			case 'pc_whdyson_star': // giga
+				return colors.white;
+			case 'pc_w_azure_star': // RS
+			case 'pc_lbv_blue_star': // RS
+				return colors.light_blue;
+			case 'pc_w_red_star': // RS
+			case 'pc_lbv_red_star': // RS
+			case 'pc_tt_red_star': // RS
+				return colors.cerise_red;
+			case 'pc_tt_orange_star': // RS
+				return colors.light_orange;
+			case 'pc_w_green_star': // RS
+			case 'pc_lbv_green_star': // RS
+				return colors.sun_green;
+			case 'pc_w_purple_star': // RS
+				return colors.cloud_purple;
+			case 'pc_tt_white_star': // RS
+				return colors.white;
+			case 'pc_toxoid_star':
+				return colors.sun_green;
+			case 'pc_rift_star':
+				return colors.intense_purple;
+			// RS stations that don't correspond planet classes
+			case 'pc_cracking':
+				return colors.brown;
+			case 'pc_methane':
+			case 'pc_greenhouse':
+			case 'pc_sulfur':
+				return colors.toxic_green;
+			case 'pc_scorched':
+			case 'pc_hot_giant':
+				return colors.intense_orange;
+			case 'pc_ice_giant':
+				return colors.ice_turquoise;
+			// fallback
+			default:
+				console.warn(`Unhandled planet class: ${pc}; assuming megastructure`);
+				return colors.ship_steel;
+		}
+	}
+
+	function getBeltColor(beltType: string) {
+		switch (beltType) {
+			case 'icy_asteroid_belt':
+				return colors.ice_turquoise;
+			case 'crystal_asteroid_belt':
+				return colors.wave_blue;
+			case 'debris_asteroid_belt':
+				return colors.ship_steel;
+			default:
+				return colors.brown;
+		}
+	}
+
+	function isAsteroid(planet: Planet) {
+		return planet.planet_class.includes('asteroid');
+	}
+
+	function isStar(planet: Planet) {
+		return (
+			isBlackHole(planet) ||
+			planet.planet_class.includes('star') ||
+			planet.planet_class === 'pc_pulsar' ||
+			planet.planet_class === 'pc_collapsar' ||
+			planet.planet_class === 'pc_nova_1' ||
+			planet.planet_class === 'nova_2'
+		);
+	}
+
+	function isBlackHole(planet: Planet) {
+		return planet.planet_class.includes('black_hole');
+	}
+
+	function getShadowPath(planet: Planet, scale: number) {
+		const r = Math.sqrt(planet.planet_size * scale);
+		return `
+			M 0 ${r}
+			A ${r} ${r} 0 0 0 0 ${-r}
+			A ${r * 0.5} ${r} 0 0 1 0 ${r}
+			Z
+		`;
+	}
+
+	function getShadowRotation(planet: Planet) {
+		const angle = (Math.atan(planet.coordinate.y / -planet.coordinate.x) / Math.PI / 2) * 360;
+		if (planet.coordinate.x > 0) return angle + 180;
+		return angle;
+	}
+</script>
+
+<svg
+	{id}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="-500 -500 1000 1000"
+	class={!previewMode && !exportMode ? 'h-full w-full' : undefined}
+	bind:this={svg}
+	x={previewMode ? -500 : undefined}
+	y={previewMode ? -500 : undefined}
+	width={previewMode ? 1000 : undefined}
+>
+	<defs>
+		<filter id="glow" filterUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
+			<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
+		</filter>
+		<filter
+			id="starGlow"
+			filterUnits="objectBoundingBox"
+			x="-500%"
+			y="-500%"
+			width="1100%"
+			height="1100%"
+		>
+			<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
+		</filter>
+	</defs>
+	<g bind:this={g}>
+		{#if $mapSettings.systemMapOrbitStroke.enabled}
+			{#each planets.filter((p) => !isAsteroid(p)) as planet (planet.id)}
+				<Glow enabled={$mapSettings.systemMapOrbitStroke.glow}>
+					<circle
+						cx={-(planets.find((p) => p.id === planet.moon_of)?.coordinate.x ?? 0)}
+						cy={planets.find((p) => p.id === planet.moon_of)?.coordinate.y ?? 0}
+						r={planet.orbit}
+						fill="none"
+						{...getStrokeAttributes($mapSettings.systemMapOrbitStroke)}
+						{...getStrokeColorAttributes({
+							colors,
+							mapSettings: $mapSettings,
+							colorStack: [$mapSettings.systemMapOrbitColor],
+						})}
+					/>
+				</Glow>
+			{/each}
+		{/if}
+
+		{#each system.asteroid_belts as belt}
+			<circle
+				fill="none"
+				stroke={getBeltColor(belt.type)}
+				stroke-width="2"
+				stroke-opacity={0.2}
+				r={belt.inner_radius}
+			/>
+			<circle
+				fill="none"
+				stroke={getBeltColor(belt.type)}
+				stroke-width="4"
+				stroke-opacity={0.05}
+				r={belt.inner_radius + 5}
+			/>
+			<circle
+				fill="none"
+				stroke={getBeltColor(belt.type)}
+				stroke-width="4"
+				stroke-opacity={0.05}
+				r={belt.inner_radius - 5}
+			/>
+			<circle
+				fill="none"
+				stroke={getBeltColor(belt.type)}
+				stroke-width="1"
+				stroke-opacity={0.1}
+				r={belt.inner_radius + 10}
+			/>
+			<circle
+				fill="none"
+				stroke={getBeltColor(belt.type)}
+				stroke-width="1"
+				stroke-opacity={0.1}
+				r={belt.inner_radius - 10}
+			/>
+		{/each}
+		{#each planets as planet (planet.id)}
+			{#if isStar(planet)}
+				<Glow enabled filterId="starGlow" let:filter>
+					<circle
+						fill={isBlackHole(planet) && filter ? '#FFFFFF' : getPlanetColor(planet)}
+						r={Math.sqrt(planet.planet_size * 2 * ($mapSettings.systemMapPlanetScale ?? 1))}
+						cx={-planet.coordinate.x}
+						cy={planet.coordinate.y}
+						{filter}
+					/>
+				</Glow>
+			{:else}
+				<circle
+					fill={getPlanetColor(planet)}
+					r={Math.sqrt(planet.planet_size * ($mapSettings.systemMapPlanetScale ?? 1))}
+					cx={-planet.coordinate.x}
+					cy={planet.coordinate.y}
+				/>
+				<path
+					d={getShadowPath(planet, $mapSettings.systemMapPlanetScale ?? 1)}
+					transform=" translate({-planet.coordinate.x} {planet.coordinate
+						.y}) rotate({getShadowRotation(planet)})"
+					fill="#000000"
+					opacity={0.5}
+				/>
+			{/if}
+		{/each}
+	</g>
+</svg>
diff --git a/src/renderer/src/lib/settings/mapSettings.ts b/src/renderer/src/lib/settings/mapSettings.ts
index 0d471a5..61963d1 100644
--- a/src/renderer/src/lib/settings/mapSettings.ts
+++ b/src/renderer/src/lib/settings/mapSettings.ts
@@ -24,7 +24,8 @@ export type NumberOptionalMapSettings =
 	| 'countryNamesSecondaryRelativeSize'
 	| 'claimVoidMaxSize'
 	| 'frontierBubbleThreshold'
-	| 'starScapeStarsCount';
+	| 'starScapeStarsCount'
+	| 'systemMapPlanetScale';
 
 export type StringMapSettings =
 	| 'countryNamesFont'
@@ -71,6 +72,7 @@ export type ColorMapSettings =
 	| 'legendBorderColor'
 	| 'lGateStrokeColor'
 	| 'occupationColor'
+	| 'systemMapOrbitColor'
 	| 'sectorBorderColor'
 	| 'sectorCoreBorderColor'
 	| 'sectorFrontierBorderColor'
@@ -92,6 +94,7 @@ export type StrokeMapSettings =
 	| 'hyperRelayStroke'
 	| 'legendBorderStroke'
 	| 'lGateStroke'
+	| 'systemMapOrbitStroke'
 	| 'sectorBorderStroke'
 	| 'sectorCoreBorderStroke'
 	| 'sectorFrontierBorderStroke'
@@ -418,6 +421,16 @@ export const defaultMapSettings: MapSettings = {
 		color: 'border',
 		colorAdjustments: [{ type: 'MIN_CONTRAST', value: 0.25 }],
 	},
+	systemMapOrbitColor: { color: 'dark_grey', colorAdjustments: [] },
+	systemMapOrbitStroke: {
+		dashArray: '3 3',
+		dashed: false,
+		enabled: true,
+		glow: false,
+		smoothing: false,
+		width: 0.5,
+	},
+	systemMapPlanetScale: 1,
 };
 
 export const mapSettings = localStorageStore('mapSettings', defaultMapSettings);
diff --git a/src/renderer/src/lib/settings/mapSettingsConfig.ts b/src/renderer/src/lib/settings/mapSettingsConfig.ts
index 1890127..8ea10c4 100644
--- a/src/renderer/src/lib/settings/mapSettingsConfig.ts
+++ b/src/renderer/src/lib/settings/mapSettingsConfig.ts
@@ -693,4 +693,28 @@ export const mapSettingsConfig: MapSettingConfigGroup[] = [
 			},
 		],
 	},
+	{
+		id: 'solarSystemMap',
+		name: 'setting.group.solarSystemMap',
+		settings: [
+			{
+				id: 'systemMapOrbitStroke',
+				type: 'stroke',
+				noSmoothing: true,
+			},
+			{
+				id: 'systemMapOrbitColor',
+				type: 'color',
+				allowedDynamicColors: [],
+				hideIf: (settings) => !settings.systemMapOrbitStroke.enabled,
+			},
+			{
+				id: 'systemMapPlanetScale',
+				type: 'number',
+				optional: true,
+				min: 0,
+				step: 0.1,
+			},
+		],
+	},
 ];