route-maps/src/lib/components/mapIcons/Bridge.svelte

<script lang="ts">
	import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
	import type { ElecType } from '$lib/railStyles';

	export let feature: {
		position: 'over' | 'under';
		category:
			| 'rail'
			| 'stream'
			| 'foot'
			| 'aroad'
			| 'minorRoad'
			| 'motorway'
			| 'waterway'
			| 'pipeline';
		roadName?: string;
	};
	export let activeElec: ElecType;

	const bridgeStyles = {
		rail: {
			stroke: '#0f172a',
			width: 22,
			bg: '#334155',
			text: '#ffffff',
			textBg: '#000000',
			textBorder: '',
			type: 'rail'
		},
		foot: {
			stroke: '#475569',
			width: 10,
			bg: '#94a3b8',
			text: '#ffffff',
			textBg: '#000000',
			textBorder: '',
			type: 'path'
		},
		aroad: {
			stroke: '#065f46',
			width: 32,
			bg: '#059669',
			text: '#ffd200',
			textBg: '#00703c',
			textBorder: '#ffd200',
			type: 'road'
		},
		minorRoad: {
			stroke: '#334155',
			width: 24,
			bg: '#475569',
			text: '#000000',
			textBg: '#ffffff',
			textBorder: '#000000',
			type: 'road'
		},
		motorway: {
			stroke: '#1e40af',
			width: 40,
			bg: '#3b82f6',
			text: '#ffffff',
			textBg: '#007ac1',
			textBorder: '#ffffff',
			type: 'road'
		},
		waterway: {
			stroke: '#0369a1',
			width: 32,
			bg: '#bae6fd',
			text: '#075985',
			textBg: '#000000',
			textBorder: '',
			type: 'water'
		},
		stream: {
			stroke: '#0369a1',
			width: 4,
			bg: '#bae6fd',
			text: '#075985',
			textBg: '#000000',
			textBorder: '',
			type: 'water'
		},
		pipeline: {
			stroke: '#1e293b',
			width: 4,
			bg: '#1e293b',
			text: '#ffffff',
			textBg: '#000000',
			textBorder: '',
			type: 'path'
		}
	};

	$: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
	$: isOver = feature.position === 'over';

	$: xLeft = 6;
	$: xRight = 58;

	const yTop = 16;
	const yBottom = 48;
</script>

<svg viewBox="0 0 64 64" width="64" height="64" class="bridge">
	{#if isOver}
		<BaseTrack {activeElec} height={64} />

		<!-- White edge, to provide separation between abutment line and bridge content -->
		<rect x="0" y={32 - s.width / 2 - 4} width="64" height={s.width + 8} fill="white" />

		<rect x="6" y={32 - s.width / 2} width="52" height={s.width} fill={s.bg} />

		{#if s.type === 'road'}
			<line
				x1={xLeft}
				y1="32"
				x2={xRight}
				y2="32"
				stroke="white"
				stroke-width="1.5"
				stroke-dasharray="4 3"
				opacity="0.6"
			/>
		{:else if s.type === 'rail'}
			<line x1={xLeft} y1="28" x2={xRight} y2="28" stroke="#cbd5e1" stroke-width="1.5" />
			<line x1={xLeft} y1="36" x2={xRight} y2="36" stroke="#cbd5e1" stroke-width="1.5" />
		{/if}

		<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="square">
			<path
				d={`M 20 ${32 - s.width / 2 - 6} L 20 ${32 - s.width / 2 - 4} L 44 ${32 - s.width / 2 - 4} L 44 ${32 - s.width / 2 - 6}`}
			/>

			<path
				d={`M 20 ${32 + s.width / 2 + 6} L 20 ${32 + s.width / 2 + 4} L 44 ${32 + s.width / 2 + 4} L 44 ${32 + s.width / 2 + 6}`}
			/>
		</g>
	{:else}
		<rect x="6" y={32 - s.width / 2} width="52" height={s.width} fill={s.bg} />

		{#if s.type === 'road'}
			<line
				x1={xLeft}
				y1="32"
				x2={xRight}
				y2="32"
				stroke="white"
				stroke-width="1.5"
				stroke-dasharray="4 3"
				opacity="0.6"
			/>
		{:else if s.type === 'rail'}
			<line x1={xLeft} y1="28" x2={xRight} y2="28" stroke="#cbd5e1" stroke-width="1.5" />
			<line x1={xLeft} y1="36" x2={xRight} y2="36" stroke="#cbd5e1" stroke-width="1.5" />
		{/if}

		<rect x="26" y={yTop} width="12" height="64" fill="white" />
		<g stroke={s.stroke} stroke-width="2.5" fill="none" stroke-linecap="square">
			<path
				d={`M 24 ${32 - s.width / 2 - 5} L 25 ${32 - s.width / 2 - 5} L 25 ${32 - s.width / 2 + s.width + 5} L 24 ${32 - s.width / 2 + s.width + 5}`}
			/>

			<path
				d={`M 40 ${32 - s.width / 2 - 5} L 39 ${32 - s.width / 2 - 5} L 39 ${32 - s.width / 2 + s.width + 5} L 40 ${32 - s.width / 2 + s.width + 5}`}
			/>
		</g>

		<BaseTrack {activeElec} height={64} />
	{/if}

	{#if feature.roadName}
		<g class="label-group">
			<rect
				x={32 - feature.roadName.length * 3 - 4}
				y="27"
				width={feature.roadName.length * 6 + 8}
				height="10"
				stroke={s.textBorder || s.textBg}
				stroke-width="1"
				fill={s.textBg}
				rx="3"
				ry="4"
			/>
			<text
				x="32"
				y="32"
				text-anchor="middle"
				dominant-baseline="central"
				fill={s.text}
				font-family="ui-monospace, monospace"
				font-weight="900"
				font-size="8"
			>
				{feature.roadName}
			</text>
		</g>
	{/if}
</svg>

<style>
	text {
		text-transform: uppercase;
		letter-spacing: 0.5px;
		pointer-events: none;
	}
</style>