Add tunnel component and map connector component

src/lib/components/mapIcons/Junction.svelte

@@ -1,36 +1,43 @@
 <script lang="ts">
-	import { getElecColour } from '$lib/railStyles';
-	import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+    import { getElecColour } from '$lib/railStyles';
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
 
-	export let feature: {
-		direction: 'up' | 'down';
-		diverges: 'left' | 'right';
-		elecBranch?: string;
-	};
-	export let activeElec: any;
-	export let reversed: boolean = false;
+    export let feature: {
+        direction: 'up' | 'down';
+        diverges: 'left' | 'right' | 'both';
+        elecBranch?: string;
+    };
+    export let activeElec: any;
+    export let reversed: boolean = false;
 
-	$: isUp = feature.direction === 'up';
-	$: visualUp = reversed ? !isUp : isUp;
+    $: isUp = feature.direction === 'up';
+    $: visualUp = reversed ? !isUp : isUp;
 
-	$: isRight = feature.diverges === 'right';
+    const getPath = (side: 'left' | 'right') => {
+        const yStart = visualUp ? 64 : 0;
+        const yEnd = visualUp ? 8 : 56;
+        const xEnd = side === 'right' ? 56 : 8;
+        return `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
+    };
 
-	$: yStart = visualUp ? 64 : 0;
-	$: yEnd = visualUp ? 8 : 56;
-	$: xEnd = isRight ? 56 : 8;
+    $: paths = (() => {
+        if (feature.diverges === 'both') return [getPath('left'), getPath('right')];
+        return [getPath(feature.diverges)];
+    })();
 
-	$: branchColour = getElecColour(feature.elecBranch || activeElec);
-	$: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;
+    $: branchColour = getElecColour(feature.elecBranch || activeElec);
 </script>
 
 <svg viewBox="0 0 64 64" width="64" height="64" class="junction">
-	<path d={branchPath} fill="none" stroke={branchColour} stroke-width="5" strone-linecap="round" />
-	<BaseTrack {activeElec} height={64} />
+    {#each paths as d}
+        <path {d} fill="none" stroke={branchColour} stroke-width="5" stroke-linecap="round" />
+    {/each}
+    <BaseTrack {activeElec} height={64} />
 </svg>
 
 <style>
-	svg {
-		display: block;
-		overflow: visible;
-	}
+    svg {
+        display: block;
+        overflow: visible;
+    }
 </style>