feat(map): add icon options for various polygons and stars

MichaelMakesGames · Mar 13, 2024 · 15b21f3 · 15b21f3
1 parent 793c631
commit 15b21f3
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 13 deletions.
diff --git a/src/renderer/src/lib/map/Icons.svelte b/src/renderer/src/lib/map/Icons.svelte
@@ -1,32 +1,110 @@
 <script lang="ts">
+	import * as R from 'rambda';
+
 	let viewBox = '-100 -100 200 200';
 
 	function pointOnCircle(radianFraction: number, radius: number) {
 		return `${Math.cos(radianFraction * 2 * Math.PI) * radius},${
 			Math.sin(radianFraction * 2 * Math.PI) * radius
 		}`;
 	}
+
+	function makeRegularPolygonPath(n: number, { flatTop }: { flatTop: boolean }) {
+		const points = R.range(0, n).map((i) =>
+			pointOnCircle(i / n - 0.25 - (flatTop ? 0.5 / n : 0), 90),
+		);
+		return `${points.map((p, i) => (i === 0 ? `M${p}` : `L${p}`))} z`;
+	}
+
+	function makeStarPath(n: number) {
+		const points = R.range(0, n).flatMap((i) => [
+			pointOnCircle(i / n - 0.25, 90),
+			pointOnCircle((i * 2 + 1) / (n * 2) - 0.25, 30),
+		]);
+		return `${points.map((p, i) => (i === 0 ? `M${p}` : `L${p}`))} z`;
+	}
 </script>
 
+<symbol id="icon-triangle" {viewBox}>
+	<path d={makeRegularPolygonPath(3, { flatTop: false })} />
+</symbol>
+
+<symbol id="icon-triangle-flat" {viewBox}>
+	<path d={makeRegularPolygonPath(3, { flatTop: true })} />
+</symbol>
+
+<symbol id="icon-diamond" {viewBox}>
+	<path d={makeRegularPolygonPath(4, { flatTop: false })} />
+</symbol>
+
+<symbol id="icon-square" {viewBox}>
+	<path d={makeRegularPolygonPath(4, { flatTop: true })} />
+</symbol>
+
+<symbol id="icon-pentagon" {viewBox}>
+	<path d={makeRegularPolygonPath(5, { flatTop: false })} />
+</symbol>
+
+<symbol id="icon-pentagon-flat" {viewBox}>
+	<path d={makeRegularPolygonPath(5, { flatTop: true })} />
+</symbol>
+
+<symbol id="icon-hexagon" {viewBox}>
+	<path d={makeRegularPolygonPath(6, { flatTop: false })} />
+</symbol>
+
+<symbol id="icon-hexagon-flat" {viewBox}>
+	<path d={makeRegularPolygonPath(6, { flatTop: true })} />
+</symbol>
+
+<symbol id="icon-heptagon" {viewBox}>
+	<path d={makeRegularPolygonPath(7, { flatTop: false })} />
+</symbol>
+
+<symbol id="icon-heptagon-flat" {viewBox}>
+	<path d={makeRegularPolygonPath(7, { flatTop: true })} />
+</symbol>
+
+<symbol id="icon-octagon" {viewBox}>
+	<path d={makeRegularPolygonPath(8, { flatTop: false })} />
+</symbol>
+
+<symbol id="icon-octagon-flat" {viewBox}>
+	<path d={makeRegularPolygonPath(8, { flatTop: true })} />
+</symbol>
+
 <symbol id="icon-circle" {viewBox}>
 	<circle cx="0" cy="0" r="90" />
 </symbol>
 
-<symbol id="icon-square" {viewBox}>
-	<rect x="-90" y="-90" width="180" height="180" />
+<symbol id="icon-3-pointed-star" {viewBox}>
+	<path d={makeStarPath(3)} />
 </symbol>
 
-<symbol id="icon-diamond" {viewBox}>
-	<path d="M0,-90 L90,0 L0,90 L-90,0 z" />
+<symbol id="icon-4-pointed-star" {viewBox}>
+	<path d={makeStarPath(4)} />
 </symbol>
 
-<symbol id="icon-cross" {viewBox}>
-	<rect x="-90" y="-30" width="180" height="60" />
-	<rect x="-30" y="-90" width="60" height="180" />
+<symbol id="icon-5-pointed-star" {viewBox}>
+	<path d={makeStarPath(5)} />
 </symbol>
 
-<symbol id="icon-triangle" {viewBox}>
-	<path d="M0,-90 L{pointOnCircle(1 / 12, 90)} L{pointOnCircle(5 / 12, 90)} z" />
+<symbol id="icon-6-pointed-star" {viewBox}>
+	<path d={makeStarPath(6)} />
+</symbol>
+
+<symbol id="icon-7-pointed-star" {viewBox}>
+	<path d={makeStarPath(7)} />
+</symbol>
+
+<symbol id="icon-8-pointed-star" {viewBox}>
+	<path d={makeStarPath(8)} />
+</symbol>
+
+<symbol id="icon-cross" {viewBox}>
+	<rect x="-90" y="-30" width="180" height="60" />
+	<rect x="-30" y="-90" width="60" height="60" />
+	<rect x="-30" y="30" width="60" height="60" />
 </symbol>
 
 <symbol id="icon-wormhole" {viewBox}>

diff --git a/src/renderer/src/lib/mapSettings.ts b/src/renderer/src/lib/mapSettings.ts
@@ -246,11 +246,26 @@ const glyphOptions: SelectOption[] = [
 ];
 
 export const iconOptions: SelectOption[] = [
-	{ group: 'Basic Shapes', id: 'icon-circle', name: 'Circle' },
-	{ group: 'Basic Shapes', id: 'icon-square', name: 'Square' },
-	{ group: 'Basic Shapes', id: 'icon-diamond', name: 'Diamond' },
-	{ group: 'Basic Shapes', id: 'icon-cross', name: 'Cross' },
 	{ group: 'Basic Shapes', id: 'icon-triangle', name: 'Triangle' },
+	{ group: 'Basic Shapes', id: 'icon-triangle-flat', name: 'Triangle (flat top)' },
+	{ group: 'Basic Shapes', id: 'icon-diamond', name: 'Diamond' },
+	{ group: 'Basic Shapes', id: 'icon-square', name: 'Square' },
+	{ group: 'Basic Shapes', id: 'icon-pentagon', name: 'Pentagon' },
+	{ group: 'Basic Shapes', id: 'icon-pentagon-flat', name: 'Pentagon (flat top)' },
+	{ group: 'Basic Shapes', id: 'icon-hexagon', name: 'Hexagon' },
+	{ group: 'Basic Shapes', id: 'icon-hexagon-flat', name: 'Hexagon (flat top)' },
+	{ group: 'Basic Shapes', id: 'icon-heptagon', name: 'Heptagon' },
+	{ group: 'Basic Shapes', id: 'icon-heptagon-flat', name: 'Heptagon (flat top)' },
+	{ group: 'Basic Shapes', id: 'icon-octagon', name: 'Octagon' },
+	{ group: 'Basic Shapes', id: 'icon-octagon-flat', name: 'Octagon (flat top)' },
+	{ group: 'Basic Shapes', id: 'icon-circle', name: 'Circle' },
+	{ group: 'Stars', id: 'icon-3-pointed-star', name: '3-Pointed Star' },
+	{ group: 'Stars', id: 'icon-4-pointed-star', name: '4-Pointed Star' },
+	{ group: 'Stars', id: 'icon-5-pointed-star', name: '5-Pointed Star' },
+	{ group: 'Stars', id: 'icon-6-pointed-star', name: '6-Pointed Star' },
+	{ group: 'Stars', id: 'icon-7-pointed-star', name: '7-Pointed Star' },
+	{ group: 'Stars', id: 'icon-8-pointed-star', name: '8-Pointed Star' },
+	{ group: 'Other Shapes', id: 'icon-cross', name: 'Cross' },
 	{ group: 'Stellaris', id: 'icon-wormhole', name: 'Wormhole' },
 	{ group: 'Stellaris', id: 'icon-gateway', name: 'Gateway' },
 	{ group: 'Stellaris', id: 'icon-l-gate', name: 'L-Gate' },