feat: add all map modes to tooltips and system-level map modes to legend

MichaelMakesGames · Sep 8, 2024 · 1ab0ba0 · 1ab0ba0
1 parent d9d4816
commit 1ab0ba0
Show file tree

Hide file tree

Showing 9 changed files with 267 additions and 53 deletions.
diff --git a/src/renderer/src/intl/en-US.ts b/src/renderer/src/intl/en-US.ts
@@ -25,9 +25,13 @@ export default {
 		loading: 'This could take a few seconds',
 		error: 'Something has gone wrong',
 		click_to_view_system: 'Click to open map',
+		tooltip: {
+			colonies: 'Colonies',
+		},
 	},
 	// various generic messages
 	generic: {
+		NEVER: 'THIS IS A BUG', // this message will never be displayed
 		enabled: 'Enabled',
 		disabled: 'Disabled',
 		back_button: 'Back',
@@ -234,14 +238,6 @@ export default {
 			colonized: 'Colonized Systems',
 			all: 'All Systems',
 		},
-		map_mode: {
-			default: 'Empires',
-			wars: 'Wars',
-			population: 'Population',
-			populationByCountry: 'Population (Country Color)',
-			populationSpecies: 'Species Population',
-			fleetPowerAlliedAndHostile: 'Fleet Power (Allied and Hostile)',
-		},
 		system_map_label_position: {
 			top: 'Top',
 			bottom: 'Bottom',
@@ -446,12 +442,38 @@ export default {
 		common: {
 			selected_country: 'Selected Country',
 		},
+		default: {
+			name: 'Empires',
+		},
 		wars: {
+			name: 'Wars',
+			tooltip_label: 'War Status',
 			hostile: 'Hostile',
 			ally: 'Ally in Active War',
 			at_war: 'At War (Uninvolved)',
 			at_peace: 'At Peace',
 		},
+		population: {
+			name_total: 'Total Population',
+			name_by_country: 'Population by Country',
+			name_species: 'Species Population',
+			tooltip_label: 'Population',
+			total: 'Total Population',
+			country: 'Population (Colored by Country)',
+			free_species: 'Free {species}',
+			enslaved_species: 'Enslaved {species}',
+			other_species: 'Other Species',
+		},
+		fleet_power: {
+			name_allied_and_hostile: 'Allied and Hostile Fleet Power',
+			tooltip_label: 'Fleet Power',
+			own_fleet: 'Own Fleet',
+			own_station: 'Own Station',
+			allied_fleet: 'Allied Fleet',
+			allied_station: 'Allied Station',
+			hostile_fleet: 'Hostile Fleet',
+			hostile_station: 'Hostile Station',
+		},
 	},
 	legend: {
 		fully_occupied: 'Fully Occupied',

diff --git a/src/renderer/src/lib/map/Legend.svelte b/src/renderer/src/lib/map/Legend.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { mapSettings } from '../settings';
 	import type { MapData } from './data/processMapData';
+	import Icons from './Icons.svelte';
 	import {
 		getFillColorAttributes,
 		getStrokeAttributes,
@@ -33,6 +34,7 @@
 			{#if colors}
 				<OccupationPatternDefs {colors} {data} />
 			{/if}
+			<Icons />
 		</defs>
 		<rect
 			x={borderWidth / 2}
@@ -77,6 +79,20 @@
 						})}
 					/>
 				{/if}
+				{#if colors && item.symbol.type === 'icon'}
+					<use
+						href="#{item.symbol.icon}"
+						x={0}
+						y={0}
+						width={symbolSize}
+						height={symbolSize}
+						{...getFillColorAttributes({
+							mapSettings: $mapSettings,
+							colors,
+							colorStack: [item.symbol.color],
+						})}
+					/>
+				{/if}
 				{#if item.symbol.type === 'pattern'}
 					<rect width={symbolSize} height={symbolSize} fill="url(#{item.symbol.pattern})" />
 				{/if}

diff --git a/src/renderer/src/lib/map/MapContainer.svelte b/src/renderer/src/lib/map/MapContainer.svelte
@@ -445,7 +445,14 @@
 	{/if}
 	{#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} />
+			<MapTooltip
+				x={tooltip.x}
+				y={tooltip.y}
+				system={tooltip.system}
+				processedSystem={dataOrNull?.systems.find((s) => s.id === tooltip?.system.id)}
+				gameState={gameStateOrNull}
+				colors={colorsOrNull ?? {}}
+			/>
 		</div>
 	{/if}
 	{#if !$gameStatePromise}

diff --git a/src/renderer/src/lib/map/MapTooltip.svelte b/src/renderer/src/lib/map/MapTooltip.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
 	import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 	import { onDestroy, onMount } from 'svelte';
-	import { t } from '../../intl';
+	import { locale, t } from '../../intl';
 	import type { GalacticObject, GameState } from '../GameState';
 	import HeroiconUserMicro from '../icons/HeroiconUserMicro.svelte';
+	import { mapSettings } from '../settings';
 	import { isDefined } from '../utils';
 	import { localizeText } from './data/locUtils';
+	import { mapModes, type MapModeSystemValue } from './data/mapModes';
+	import type { ProcessedSystem } from './data/processSystems';
+	import { resolveColor } from './mapUtils';
 
 	export let x: number;
 	export let y: number;
 	export let system: GalacticObject;
+	export let processedSystem: ProcessedSystem | null | undefined;
 	export let gameState: null | GameState;
+	export let colors: Record<string, string>;
 
 	let targetEl: HTMLDivElement;
 	let popupEl: HTMLDivElement;
@@ -53,6 +59,16 @@
 		?.map((planetId) => gameState?.planets.planet[planetId])
 		.filter(isDefined)
 		.sort((a, b) => (b?.num_sapient_pops ?? 0) - (a?.num_sapient_pops ?? 0));
+
+	async function localizeValueLabel(value: MapModeSystemValue) {
+		const values: Record<string, string> = {};
+		for (const [k, v] of Object.entries(value.legendLabelData ?? {})) {
+			values[k] = await localizeText(v);
+		}
+		return typeof value.legendLabel === 'string'
+			? $t(value.legendLabel, values)
+			: await localizeText(value.legendLabel);
+	}
 </script>
 
 <div
@@ -69,13 +85,60 @@
 	bind:this={popupEl}
 >
 	<div class="arrow bg-surface-600" bind:this={arrowEl} />
-	{#await localizeText(system.name)}
-		{$t('generic.loading')}
-	{:then name}
-		{name}
-	{/await}
-	{#if planets}
-		<ul class="ps-3">
+	<strong>
+		{#await localizeText(system.name)}
+			{$t('generic.loading')}
+		{:then name}
+			{name}
+		{/await}
+	</strong>
+	{#if processedSystem?.mapModeCountryLabel}
+		<div class="flex flex-row justify-between gap-1 text-sm">
+			<span>
+				{$t(mapModes[$mapSettings.mapMode]?.tooltipLabel ?? 'generic.NEVER')}:
+			</span>
+			<strong>{$t(processedSystem.mapModeCountryLabel)}</strong>
+		</div>
+	{/if}
+	{#if processedSystem?.mapModeValues?.length}
+		<strong class="mt-2 block">
+			{$t(mapModes[$mapSettings.mapMode]?.tooltipLabel ?? 'generic.NEVER')}
+		</strong>
+		<ul class="text-sm">
+			{#each processedSystem.mapModeValues.filter((v) => v.value) as systemValue}
+				<li class="flex flex-row justify-between gap-3">
+					<span>
+						<svg class="inline-block h-3 w-3" viewBox="-1 -1 2 2">
+							<circle
+								r="0.875"
+								fill={resolveColor({
+									mapSettings: $mapSettings,
+									colorStack: [systemValue.color],
+									colors,
+								})}
+								stroke={colors.black}
+								stroke-width="0.125"
+							/>
+						</svg>
+						{#await localizeValueLabel(systemValue)}
+							{$t('generic.loading')}
+						{:then label}
+							{label}
+						{/await}
+					</span>
+					<strong>
+						{new Intl.NumberFormat($locale, {
+							notation: 'compact',
+							maximumFractionDigits: 1,
+						}).format(systemValue.value)}
+					</strong>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+	{#if planets?.length}
+		<strong class="mt-2 block">{$t('map.tooltip.colonies')}</strong>
+		<ul class="ps-4">
 			{#each planets as planet}
 				<li class="flex flex-row justify-between text-sm">
 					<span>
@@ -92,7 +155,7 @@
 			{/each}
 		</ul>
 	{/if}
-	<small class="w-10">
+	<div class="text-sm">
 		{$t('map.click_to_view_system')}
-	</small>
+	</div>
 </div>