Run npm format

2026-02-05 20:01:54 +00:00
parent 221159433c
commit 4220cdfa5e
18 changed files with 751 additions and 723 deletions
--- a/scripts/parse-maps.js
+++ b/scripts/parse-maps.js
@@ -5,12 +5,12 @@ import path from 'path';
 const inputDir = '../static/mapFiles/yaml';
 const outputDir = '../static/mapFiles/json';

-if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, {recursive: true});
+if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });

-fs.readdirSync(inputDir).forEach(file => {
+fs.readdirSync(inputDir).forEach((file) => {
 	if (file.endsWith('.yaml')) {
 		const content = yaml.load(fs.readFileSync(path.join(inputDir, file), 'utf8'));
 		const fileName = file.replace('.yaml', '.json');
 		fs.writeFileSync(path.join(outputDir, fileName), JSON.stringify(content));
 	}
-})
+});
--- a/src/app.html
+++ b/src/app.html
@@ -2,7 +2,10 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
+		/>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
--- a/src/lib/components/RouteRow.svelte
+++ b/src/lib/components/RouteRow.svelte
@@ -10,17 +10,12 @@

 <div class="row-container">
 	<div class="mileage-col">
-        <span class="miles">{feature.miles + "m" || "" }</span>
-        <span class="chains">{feature.chains + "ch" || "" }</span>
+		<span class="miles">{feature.miles + 'm' || ''}</span>
+		<span class="chains">{feature.chains + 'ch' || ''}</span>
 	</div>

 	<div class="icon-col">
-        <svelte:component
-          this={Icon}
-          {feature}
-          {activeElec}
-          {reversed}
-        />
+		<svelte:component this={Icon} {feature} {activeElec} {reversed} />
 	</div>

 	<div class="label-col">
@@ -34,7 +29,7 @@
 </div>

 <style>
-.row-container {
+	.row-container {
 		display: grid;
 		/* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
 		grid-template-columns: 3.5rem 64px 1fr;
@@ -64,7 +59,7 @@
 		font-size: 0.7rem;
 	}

-.icon-col {
+	.icon-col {
 		width: 64px;
 		height: 64px;
 		/* Ensure the icon itself is centered if the SVG is smaller than 64px */
@@ -73,7 +68,7 @@
 		align-items: center;
 	}

-.label-col {
+	.label-col {
 		padding-left: 16px;
 		display: flex;
 		flex-direction: column;
@@ -83,9 +78,9 @@
 		overflow: hidden;
 		/* min-width: 0 is critical for flex children to allow truncation */
 		min-width: 0;
-}
+	}

-.feature-name {
+	.feature-name {
 		font-weight: 700;
 		color: #1e293b;
 		font-size: 0.8rem;
@@ -95,9 +90,9 @@
 		white-space: normal;
 		line-height: 1.2;
 		margin-bottom: 2px;
-}
+	}

-.feature-desc {
+	.feature-desc {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 2;
@@ -111,10 +106,10 @@
 		font-size: 0.75rem;
 		color: #64748b;
 		word-break: break-word;
-}
+	}

-/* Tablet and Desktop scaling */
-@media (min-width: 480px) {
+	/* Tablet and Desktop scaling */
+	@media (min-width: 480px) {
 		.feature-name {
 			font-size: 1rem; /* The larger title you requested */
 			margin-bottom: 4px;
@@ -129,5 +124,5 @@
 		.label-col {
 			padding-left: 24px; /* More "breathing room" on big screens */
 		}
-}
+	}
 </style>
--- a/src/lib/components/mapIcons/BaseTrack.svelte
+++ b/src/lib/components/mapIcons/BaseTrack.svelte
@@ -8,13 +8,18 @@
 	$: colour = getElecColour(activeElec);
 </script>

-<line x1="32" y1="0" x2="32" y2={height}
+<line
+	x1="32"
+	y1="0"
+	x2="32"
+	y2={height}
 	stroke={colour}
 	stroke-width={width}
-    stroke-linecap="butt" />
+	stroke-linecap="butt"
+/>

 <style>
-    svg{
+	svg {
 		display: block;
 		width: 100%;
 		height: 100%;
--- a/src/lib/components/mapIcons/Bridge.svelte
+++ b/src/lib/components/mapIcons/Bridge.svelte
@@ -5,25 +5,25 @@
 		position: 'over' | 'under';
 		category: 'rail' | 'footbridge' | 'aroad' | 'minorRoad' | 'motorway' | 'waterway';
 		roadName?: string;
-    }
+	};

 	export let activeElec: string;

 	const bridgeStyles = {
-        rail: { color: '#ffffff', stroke: '#000000', width: 20, text: '#000000'},
+		rail: { color: '#ffffff', stroke: '#000000', width: 20, text: '#000000' },
 		footbridge: { color: '#ffffff', stroke: '#475569', width: 10, text: '#475569' },
 		aroad: { color: '#00703c', stroke: '#004d29', width: 24, text: '#FFEB3B' },
 		minorRoad: { color: '#ffffff', stroke: '#64748b', width: 20, text: '#334155' },
 		motorway: { color: '#005da1', stroke: '#003e6b', width: 32, text: '#ffffff' },
 		waterway: { color: '#bae6fd', stroke: '#0369a1', width: 24, text: '#075985' },
-        pipeline:   { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'},
-    }
+		pipeline: { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155' }
+	};

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

-    $: topY = 32 - (s.width / 2);
-    $: bottomY = 32 + (s.width /2);
+	$: topY = 32 - s.width / 2;
+	$: bottomY = 32 + s.width / 2;

 	$: topPath = `M 0 ${topY} Q 8 ${topY} 8 ${topY - 4} M 56 ${topY - 4} Q 56 ${topY} 64 ${topY}`;
 	$: bottomPath = `M 0 ${bottomY} Q 8 ${bottomY} 8 ${bottomY + 4} M 56 ${bottomY + 4} Q 56 ${bottomY} 64 ${bottomY}`;
@@ -45,21 +45,22 @@
 		<g fill="none" stroke={s.stroke} stroke-width="2.5" stroke-linecap="round">
 			<path d={`M 0 ${topY} L 64 ${topY}`} />
 			<path d={`M 0 ${bottomY} L 64 ${bottomY}`} />
-        <path d={`M 0 ${topY} Q 4 ${topY} 4 ${topY-6}`} />
-        <path d={`M 64 ${topY} Q 60 ${topY} 60 ${topY-6}`} />
-        <path d={`M 0 ${bottomY} Q 4 ${bottomY} 4 ${bottomY+6}`} />
-        <path d={`M 64 ${bottomY} Q 60 ${bottomY} 60 ${bottomY+6}`} />
+			<path d={`M 0 ${topY} Q 4 ${topY} 4 ${topY - 6}`} />
+			<path d={`M 64 ${topY} Q 60 ${topY} 60 ${topY - 6}`} />
+			<path d={`M 0 ${bottomY} Q 4 ${bottomY} 4 ${bottomY + 6}`} />
+			<path d={`M 64 ${bottomY} Q 60 ${bottomY} 60 ${bottomY + 6}`} />
 		</g>

 		{#if feature.roadName}
 			<text
-        x="32" y="32" 
+				x="32"
+				y="32"
 				text-anchor="middle"
 				dominant-baseline="central"
 				fill={s.text}
 				font-family="sans-serif"
 				font-weight="bold"
-        font-size={s.width > 20 ? "10" : "8"}
+				font-size={s.width > 20 ? '10' : '8'}
 				style="pointer-events: none; text-transform: uppercase; letter-spacing: 0.5px;"
 			>
 				{feature.roadName}
@@ -69,6 +70,11 @@
 </svg>

 <style>
-  svg { display: block; overflow: visible; }
-  text { user-select: none; }
+	svg {
+		display: block;
+		overflow: visible;
+	}
+	text {
+		user-select: none;
+	}
 </style>
--- a/src/lib/components/mapIcons/Crossing.svelte
+++ b/src/lib/components/mapIcons/Crossing.svelte
@@ -9,31 +9,43 @@

 	$: type = feature.kind.toLowerCase();
 	$: isFoot = type === 'foot';
-    $: filterCategory = isFoot ? 'foot' : (type === 'uwc' ? 'uwc' : 'level-crossing');
+	$: filterCategory = isFoot ? 'foot' : type === 'uwc' ? 'uwc' : 'level-crossing';
 </script>

 <svg viewBox="0 0 64 64" width="64" height="64" class={filterCategory}>
 	<BaseTrack {activeElec} height={64} />

 	{#if type === 'foot'}
-        <line x1="12" y1="32" x2="52" y2="32" stroke="#475569" stroke-width="2" stroke-dasharray="4 2" />
-
+		<line
+			x1="12"
+			y1="32"
+			x2="52"
+			y2="32"
+			stroke="#475569"
+			stroke-width="2"
+			stroke-dasharray="4 2"
+		/>
 	{:else if type === 'uwc'}
 		<g stroke="#1e293b" stroke-width="3">
 			<line x1="12" y1="26" x2="26" y2="26" />
 			<line x1="38" y1="38" x2="52" y2="38" />
 		</g>
 		<text x="50" y="32" class="label-right">UWC</text>
-
 	{:else}
 		<rect x="18" y="22" width="28" height="20" rx="1" fill="#1e293b" />

-        <circle cx="25" cy="29" r="3.5" fill="#ef4444" /> <circle cx="39" cy="29" r="3.5" fill="#ef4444" /> <circle cx="32" cy="37" r="3.5" fill="#ffcc00" /> <text x="50" y="32" class="label-right">{type.toUpperCase()}</text>
+		<circle cx="25" cy="29" r="3.5" fill="#ef4444" />
+		<circle cx="39" cy="29" r="3.5" fill="#ef4444" />
+		<circle cx="32" cy="37" r="3.5" fill="#ffcc00" />
+		<text x="50" y="32" class="label-right">{type.toUpperCase()}</text>
 	{/if}
 </svg>

 <style>
-    svg { display: block; overflow: visible; }
+	svg {
+		display: block;
+		overflow: visible;
+	}
 	.label-right {
 		text-anchor: start; /* Align to the left of the start point */
 		dominant-baseline: central;
--- a/src/lib/components/mapIcons/ElectrificationChange.svelte
+++ b/src/lib/components/mapIcons/ElectrificationChange.svelte
@@ -5,12 +5,12 @@
 		from: {
 			elec: string;
 			eco?: string;
-        },
+		};
 		to: {
 			elec: string;
 			eco?: string;
-        }
-    }
+		};
+	};

 	$: fromColour = getElecColour(feature.from.elec);
 	$: toColour = getElecColour(feature.to.elec);
@@ -23,8 +23,15 @@
 	<line x1="32" y1="32" x2="32" y2="64" stroke={toColour} stroke-width="6" />

 	{#if showFromEco || showToEco}
-        <line x1="32" y1="32" x2="800" y2="32" 
-              stroke="#ef4444" stroke-width="2" stroke-dasharray="6 3" />
+		<line
+			x1="32"
+			y1="32"
+			x2="800"
+			y2="32"
+			stroke="#ef4444"
+			stroke-width="2"
+			stroke-dasharray="6 3"
+		/>

 		<g font-family="sans-serif" font-size="10" font-weight="800" text-anchor="start">
 			{#if showFromEco}
@@ -45,5 +52,8 @@
 </svg>

 <style>
-    svg { display: block; overflow: visible; }
+	svg {
+		display: block;
+		overflow: visible;
+	}
 </style>
--- a/src/lib/components/mapIcons/Junction.svelte
+++ b/src/lib/components/mapIcons/Junction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {getElecColour} from '$lib/railStyles';
+	import { getElecColour } from '$lib/railStyles';
 	import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';

 	export let feature: {
@@ -24,16 +24,13 @@
 </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"
-    />
+	<path d={branchPath} fill="none" stroke={branchColour} stroke-width="5" strone-linecap="round" />
 	<BaseTrack {activeElec} height={64} />
 </svg>

 <style>
-    svg { display: block; overflow: visible; }
+	svg {
+		display: block;
+		overflow: visible;
+	}
 </style>
--- a/src/lib/components/mapIcons/Loop.svelte
+++ b/src/lib/components/mapIcons/Loop.svelte
@@ -33,5 +33,4 @@
 	</g>

 	<BaseTrack {activeElec} height={64} />
-
 </svg>
--- a/src/lib/components/mapIcons/SignallerChange.svelte
+++ b/src/lib/components/mapIcons/SignallerChange.svelte
@@ -12,8 +12,15 @@
 <svg viewBox="0 0 64 64" width="64" height="64" style="overflow: visible;">
 	<BaseTrack {activeElec} height={64} />

-    <line x1="-500" y1="32" x2="800" y2="32" 
-          stroke="#6366f1" stroke-width="2" stroke-dasharray="8 4" />
+	<line
+		x1="-500"
+		y1="32"
+		x2="800"
+		y2="32"
+		stroke="#6366f1"
+		stroke-width="2"
+		stroke-dasharray="8 4"
+	/>

 	<g font-family="sans-serif" font-weight="800" font-size="11">
 		<text x="70" y="24" fill="#4338ca" style="text-transform: uppercase;">
--- a/src/lib/components/mapIcons/Station.svelte
+++ b/src/lib/components/mapIcons/Station.svelte
@@ -14,13 +14,6 @@
 		<circle cx="32" cy="32" r="12" fill="white" />
 		<circle cx="32" cy="32" r="12" fill="none" stroke="#000000" stroke-width="3" />
 	{:else}
-        <rect
-          x="8" y="12"
-          width="50" height="50"
-          rx="8"
-          fill="white"
-          stroke="black"
-          stroke-width="3"
-        />
+		<rect x="8" y="12" width="50" height="50" rx="8" fill="white" stroke="black" stroke-width="3" />
 	{/if}
 </svg>
--- a/src/lib/mapRegistry.ts
+++ b/src/lib/mapRegistry.ts
@@ -9,7 +9,6 @@ import SignallerChange from '$lib/components/mapIcons/SignallerChange.svelte';
 import ElectrificationChange from '$lib/components/mapIcons/ElectrificationChange.svelte';
 import SiteOf from '$lib/components/mapIcons/SiteOf.svelte';

-
 export const components = {
 	station: Station,
 	junction: Junction,
@@ -22,5 +21,5 @@ export const components = {
 	loops: Loop,
 	signallerChange: SignallerChange,
 	electrificationChange: ElectrificationChange,
-    default: BaseTrack,
-}
+	default: BaseTrack
+};
--- a/src/lib/railStyles.ts
+++ b/src/lib/railStyles.ts
@@ -1,11 +1,11 @@
 export type ElecType = 'none' | '25kvac' | '750vdc' | '650vdc' | '1500vdc';

 export const elecColours: Record<ElecType, string> = {
-    'none': '#344415',
+	none: '#344415',
 	'25kvac': '#ed4444',
 	'750vdc': '#3b82f6',
 	'650vdc': '#eab308',
-    '1500vdc': '#f97316',
+	'1500vdc': '#f97316'
 };

 export const getElecColour = (type?: ElecType) => elecColours[type ?? 'none'];
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import RouteRow from '$lib/components/RouteRow.svelte';

-
 	const dummyFeatures = [
 		{
 			type: 'station',
@@ -10,7 +9,7 @@
 			name: 'Testington',
 			description: 'Terminus',
 			terminus: true,
-            elec: '25kvac',
+			elec: '25kvac'
 		},
 		{
 			type: 'station',
@@ -18,7 +17,7 @@
 			chains: 76,
 			name: 'Closeby',
 			description: 'Temporarily closed',
-            elec: '25kvac',
+			elec: '25kvac'
 		},
 		{
 			type: 'junction',
@@ -28,45 +27,45 @@
 			elec: '25kvac',
 			elecBranch: 'none',
 			miles: 1,
-            chains: 13,
+			chains: 13
 		},
 		{
 			type: 'bridge',
 			position: 'over',
 			category: 'pipeline',
 			name: 'Waterway Bridge',
-            roadName: "TfL (LU)",
+			roadName: 'TfL (LU)',
 			elec: '25kvac',
 			miles: 1,
-            chains: 41,
+			chains: 41
 		},
 		{
 			type: 'crossover',
 			name: 'Dolphin junction',
 			elec: '25kvac',
 			miles: 1,
-            chains: 42,
+			chains: 42
 		},
 		{
 			type: 'junction',
 			name: 'Test Junction South',
-            description: "To: Banbury West Junction & Birmingham",
+			description: 'To: Banbury West Junction & Birmingham',
 			diverges: 'left',
 			direction: 'down',
 			elec: '25kvac',
 			elecBranch: '650vdc',
 			miles: 1,
-            chains: 42,
+			chains: 42
 		},
 		{
 			type: 'electrificationChange',
 			from: {
 				elec: '25kvac',
-              eco: 'Didcot',
+				eco: 'Didcot'
 			},
 			to: {
-                elec: 'none',
-            },
+				elec: 'none'
+			}
 		},
 		{
 			type: 'crossing',
@@ -79,13 +78,13 @@
 			type: 'loop',
 			side: 'both',
 			elec: '25kvac',
-            elecLoop: 'none',
+			elecLoop: 'none'
 		},
 		{
 			type: 'signallerChange',
 			from: 'TVSC - Didcot WS (SB)',
 			to: 'TVSC - Swindon WS (SN)',
-            elec: '25kvac',
+			elec: '25kvac'
 		},
 		{
 			type: 'station',
@@ -93,10 +92,11 @@
 			chains: 13,
 			name: 'Powerless',
 			description: "Doesn't exist",
-            elec: '750vdc',
+			elec: '750vdc'
 		}
-    ]
+	];
 </script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

--- a/src/routes/map/[slug]/+page.svelte
+++ b/src/routes/map/[slug]/+page.svelte
@@ -15,8 +15,8 @@
 		signallerChange: true,
 		electrificationChange: true,
 		siteof: true,
-        junction: true,
-    }
+		junction: true
+	};

 	let showFilters = false;

@@ -27,19 +27,16 @@
 	};

 	// Helper to prettify 'types'
-    const formatLabel = (str: string) => str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());
+	const formatLabel = (str: string) =>
+		str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());

 	$: processedFeatures = (() => {
-        const list = reversed 
-            ? [...data.route.routeDetail].reverse() 
-            : [...data.route.routeDetail];
+		const list = reversed ? [...data.route.routeDetail].reverse() : [...data.route.routeDetail];

 		// Seed currentElec from the YAML header boundary
-        let currentElec = reversed 
-            ? data.route.elecEnd.elec 
-            : data.route.elecStart.elec;
+		let currentElec = reversed ? data.route.elecEnd.elec : data.route.elecStart.elec;

-        return list.map(f => {
+		return list.map((f) => {
 			if (f.type === 'electrificationChange') {
 				// Transition state: this tile and everything after it
 				// adopts the new electrification.
@@ -53,9 +50,9 @@
 		});
 	})();

-    $: filteredFeatures = processedFeatures.filter(f => {
+	$: filteredFeatures = processedFeatures.filter((f) => {
 		return visibleTypes[f.type] ?? true;
-    })
+	});
 </script>

 <div class="map-layout">
@@ -63,24 +60,29 @@
 		<h1>{data.route.routeName}</h1>
 		<span class="route-code">{data.route.routeId}</span>
 		<div class="quick-actions">
-            <button class="icon-btn" on:click={() => reversed = !reversed}>
+			<button class="icon-btn" on:click={() => (reversed = !reversed)}>
 				⇄ {reversed ? 'UP' : 'DN'}
 			</button>
-            <button class="icon-btn" on:click={() => showFilters = !showFilters}>
-                Settings
-            </button>
+			<button class="icon-btn" on:click={() => (showFilters = !showFilters)}> Settings </button>
 		</div>
 	</header>

-{#if showFilters}
-    <div class="backdrop" on:click={() => showFilters = false}></div>
+	{#if showFilters}
+		<div class="backdrop" on:click={() => (showFilters = false)}></div>

 		<div class="filter-drawer" transition:slide>
 			<div class="drawer-header">
 				<h3>Visibility Filters</h3>
-            <button class="close-icon" on:click={() => showFilters = false} aria-label="Close">
-                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5">
-                    <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+				<button class="close-icon" on:click={() => (showFilters = false)} aria-label="Close">
+					<svg
+						viewBox="0 0 24 24"
+						width="20"
+						height="20"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2.5"
+					>
+						<path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
 					</svg>
 				</button>
 			</div>
@@ -99,7 +101,7 @@
 				</div>
 			</div>
 		</div>
-{/if}
+	{/if}

 	<main class="map-spine">
 		<div class="container">
@@ -118,7 +120,7 @@
 		min-height: 100vh;
 	}

-.top-nav {
+	.top-nav {
 		position: sticky;
 		top: 0;
 		z-index: 100;
@@ -130,9 +132,9 @@
 		justify-content: space-between;
 		align-items: center;
 		gap: 1rem;
-}
+	}

-h1 {
+	h1 {
 		flex: 1;
 		min-width: 0;
 		margin: 0;
@@ -143,9 +145,9 @@ h1 {
 		letter-spacing: -0.02em;
 		white-space: normal;
 		overflow-wrap: break-word;
-}
+	}

-@media (min-width: 768px) {
+	@media (min-width: 768px) {
 		.top-nav {
 			padding: 1rem 2rem;
 		}
@@ -154,7 +156,7 @@ h1 {
 			font-size: 1.5rem;
 			letter-spacing: -0.03em;
 		}
-}
+	}

 	.container {
 		width: 100%;
@@ -163,7 +165,7 @@ h1 {
 		padding-top: 1rem;
 	}

-.backdrop {
+	.backdrop {
 		position: fixed;
 		inset: 0;
 		background: rgba(0, 0, 0, 0.4);
--- a/src/routes/map/[slug]/+page.ts
+++ b/src/routes/map/[slug]/+page.ts
@@ -17,7 +17,7 @@ export const load: PageLoad = async ({ params, fetch }) => {

 		return {
 			route: rawData,
-            slug: slug,
+			slug: slug
 		};
 	} catch (err) {
 		console.error(`Error loading map ${slug}: `, err);