feat(ui): add tooltips to the various Advanced Border Settings

MichaelMakesGames · Feb 24, 2024 · 5b115ca · 5b115ca
1 parent 929295d
commit 5b115ca
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 10 deletions.
diff --git a/src/renderer/src/lib/MapSettingControl.svelte b/src/renderer/src/lib/MapSettingControl.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
+	import { RangeSlider, SlideToggle, popup } from '@skeletonlabs/skeleton';
 	import { onDestroy } from 'svelte';
 	import type { FormEventHandler } from 'svelte/elements';
 	import { get, type Readable } from 'svelte/store';
 	import { slide } from 'svelte/transition';
 	import ColorSettingControl from './ColorSettingControl.svelte';
 	import IconSettingControl from './IconSettingControl.svelte';
 	import StrokeSettingControl from './StrokeSettingControl.svelte';
+	import HeroiconInfoMini from './icons/HeroiconInfoMini.svelte';
 	import {
 		editedMapSettings,
 		emptyOptions,
@@ -60,6 +61,22 @@
 	<label class="label" for={config.id} transition:slide>
 		<div class="flex items-center">
 			{config.name}
+			{#if config.tooltip}
+				<button
+					type="button"
+					class="text-secondary-500-400-token ms-1 [&>*]:pointer-events-none"
+					use:popup={{ event: 'hover', target: `${config.id}-tooltip`, placement: 'top' }}
+				>
+					<HeroiconInfoMini />
+				</button>
+				<div
+					class="card variant-filled-secondary z-10 max-w-96 p-2 text-sm"
+					data-popup="{config.id}-tooltip"
+				>
+					{@html config.tooltip}
+					<div class="variant-filled-secondary arrow" />
+				</div>
+			{/if}
 			<div class="grow" />
 			{#if config.type === 'stroke' || config.type === 'icon'}
 				<div class="relative top-1 inline-block">

diff --git a/src/renderer/src/lib/icons/HeroiconInfoMini.svelte b/src/renderer/src/lib/icons/HeroiconInfoMini.svelte
@@ -0,0 +1,12 @@
+<script>
+	let className = 'w-5 h-5';
+	export { className as class };
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class={className}>
+	<path
+		fill-rule="evenodd"
+		d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
+		clip-rule="evenodd"
+	/>
+</svg>
diff --git a/src/renderer/src/lib/mapSettings.ts b/src/renderer/src/lib/mapSettings.ts
@@ -128,6 +128,7 @@ type RequiresReprocessingFunc<T> = (prev: T, next: T) => boolean;
 interface MapSettingConfigBase extends IdAndName {
 	requiresReprocessing?: boolean | RequiresReprocessingFunc<any>;
 	hideIf?: (settings: MapSettings) => boolean;
+	tooltip?: string;
 }
 
 interface MapSettingConfigToggle extends MapSettingConfigBase {
@@ -693,12 +694,25 @@ export const mapSettingConfig: MapSettingGroup[] = [
 				name: 'Circular Galaxy Borders',
 				requiresReprocessing: true,
 				type: 'toggle',
+				tooltip: `<ul class="list-disc ms-4">
+					<li>When enabled, the overall border of the galaxy will be circular in shape, and there will be no "holes" between systems.</li>
+					<li>If the galaxy is a "Starburst", a special spiral shape will be used instead of a circle.</li>
+				</ul>`,
 			},
 			{
 				id: 'hyperlaneSensitiveBorders',
 				name: 'Hyperlane Sensitive Borders',
 				requiresReprocessing: true,
 				type: 'toggle',
+				tooltip: `<ul class="list-disc ms-4">
+					<li>When enabled, borders will follow hyperlanes.</li>
+					<li>When disabled, only solar systems affect borders.</li>
+					<li>Not supported if the following are enabled:</li>
+					<li><ul class="list-disc ms-5">
+						<li>Metro-style Hyperlanes</li>
+						<li>Align Solar Systems to Grid</li>
+					</ul></li>
+				</ul>`,
 			},
 			{
 				id: 'voronoiGridSize',
@@ -707,15 +721,12 @@ export const mapSettingConfig: MapSettingGroup[] = [
 				type: 'number',
 				step: 1,
 				min: 1,
-			},
-			{
-				id: 'claimVoidBorderThreshold',
-				name: 'Claim Bordering Void Threshold',
-				requiresReprocessing: true,
-				type: 'range',
-				step: 0.05,
-				min: 0,
-				max: 1,
+				tooltip: `<ul class="list-disc ms-4">
+					<li>Higher values make borders "looser".</li>
+					<li>Lower values make borders "tighter".</li>
+					<li>Lower values take longer to process.</li>
+					<li><strong class="text-warning-500">WARNING</strong>: values below 10 can take a very long time to process.</li>
+				</ul>`,
 			},
 			{
 				id: 'claimVoidMaxSize',
@@ -725,6 +736,26 @@ export const mapSettingConfig: MapSettingGroup[] = [
 				step: 1,
 				min: 0,
 				optional: true,
+				tooltip: `<ul class="list-disc ms-4">
+					<li>Empty "void" between systems can be claimed by neighboring country borders.</li>
+					<li>Only void smaller than this size can be claimed.</li>
+					<li>Set to 0 or leave empty to disable this behavior entirely.</li>
+				</ul>`,
+			},
+			{
+				id: 'claimVoidBorderThreshold',
+				name: 'Claim Bordering Void Threshold',
+				requiresReprocessing: true,
+				type: 'range',
+				step: 0.05,
+				min: 0,
+				max: 1,
+				tooltip: `<ul class="list-disc ms-4">
+					<li>Empty pockets of "void" between systems can be claimed by neighboring country borders.</li>
+					<li>To claim void, a country much control at least this much of the void's border.</li>
+					<li>Set to full so only fully enclosed void is claimed.</li>
+					<li>Set to empty so all void bordering at least one country is claimed.</li>
+				</ul>`,
 			},
 		],
 	},