Add tunnel component and map connector component

2026-02-05 22:02:31 +00:00
parent 4220cdfa5e
commit 4280ffe763
8 changed files with 404 additions and 93 deletions
--- a/src/lib/components/mapIcons/Junction.svelte
+++ b/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>
--- a/src/lib/components/mapIcons/RouteEndLink.svelte
+++ b/src/lib/components/mapIcons/RouteEndLink.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  export let feature: {
+    routeName: string;
+    routeId: string;
+  };
+</script>
+
+<div class="link-wrapper">
+  <a href="/map/{feature.routeId}" class="wide-button">
+    <div class="accent-bar"></div>
+    <div class="content">
+      <span class="sub-text">Continue to next map</span>
+      <span class="main-text">{feature.routeName}</span>
+    </div>
+    <div class="icon">
+      <svg viewBox="0 0 24 24" width="20" height="20">
+        <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+  </a>
+</div>
+
+<style>
+  .link-wrapper {
+    position: relative;
+    z-index: 100;
+    padding: 12px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .wide-button {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    border: 2px solid #e2e8f0;
+    border-radius: 12px;
+    text-decoration: none;
+    overflow: hidden;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+  }
+
+  .accent-bar {
+    width: 6px;
+    align-self: stretch;
+    background: #475569;
+  }
+
+  .content {
+    flex: 1;
+    padding: 12px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .sub-text {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+  }
+
+  .main-text {
+    font-size: 16px;
+    font-weight: 800;
+    color: #1e293b;
+  }
+
+  .icon {
+    padding-right: 20px;
+    color: #cbd5e1;
+    transition: transform 0.2s ease;
+  }
+
+
+  .wide-button:hover {
+    border-color: #94a3b8;
+    background: #f8fafc;
+  }
+
+  .wide-button:hover .icon {
+    color: #475569;
+    transform: translateX(4px);
+  }
+
+  .wide-button:active {
+    transform: scale(0.98);
+    background: #f1f5f9;
+  }
+</style>
--- a/src/lib/components/mapIcons/Tunnel.svelte
+++ b/src/lib/components/mapIcons/Tunnel.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import BaseTrack from "./BaseTrack.svelte";
+
+    export let feature: {
+        tunnelType: "start" | "whole" | "end";
+        length: string;
+    };
+
+    export let activeElec: any;
+
+    export let reversed: boolean = false;
+
+    const portalColour = "#475569"; // Slate grey
+
+    $: effectiveType = (() => {
+        if (!reversed || feature.tunnelType === 'whole') return feature.tunnelType;
+        return feature.tunnelType === 'start' ? 'end' : 'start';
+    })();
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="tunnel">
+    <BaseTrack {activeElec} height={64} />
+
+    <g fill="none" stroke={portalColour} stroke-width="3" stroke-linecap="round">
+        {#if effectiveType === 'whole'}
+            <path d="M 16 12 Q 32 24 48 12" />
+            <path d="M 16 52 Q 32 40 48 52" />
+
+        {:else if effectiveType === 'start'}
+            <path d="M 16 12 Q 32 24 48 12" />
+
+        {:else if effectiveType === 'end'}
+            <path d="M 16 52 Q 32 40 48 52" />
+        {/if}
+    </g>
+
+    {#if feature.tunnelType === 'whole' && feature.length}
+        <rect x="12" y="26" width="40" height="12" fill="white" />
+        <text 
+            x="32" 
+            y="35" 
+            text-anchor="middle" 
+            font-size="8.5" 
+            font-weight="bold" 
+            fill={portalColour} 
+            class="t-text"
+        >
+            {feature.length}
+        </text>
+    {/if}
+</svg>
+
+<style>
+    svg { display: block; overflow: visible; }
+    .t-text { font-family: ui-monospace, monospace; }
+</style>
--- a/src/lib/mapRegistry.ts
+++ b/src/lib/mapRegistry.ts
@@ -8,6 +8,7 @@ import Loop from '$lib/components/mapIcons/Loop.svelte';
 import SignallerChange from '$lib/components/mapIcons/SignallerChange.svelte';
 import ElectrificationChange from '$lib/components/mapIcons/ElectrificationChange.svelte';
 import SiteOf from '$lib/components/mapIcons/SiteOf.svelte';
+import Tunnel from '$lib/components/mapIcons/Tunnel.svelte';

 export const components = {
 	station: Station,
@@ -21,5 +22,6 @@ export const components = {
 	loops: Loop,
 	signallerChange: SignallerChange,
 	electrificationChange: ElectrificationChange,
-	default: BaseTrack
+	default: BaseTrack,
+	tunnel: Tunnel,
 };