revamp router

src/CircuitSim.svelte

 			this.ctx.scale(this.scale * pixelRatio, this.scale * pixelRatio);
 			this.ctx.translate(-this.x, -this.y);
 
-			this.ctx.strokeStyle = "rgba(0, 0, 0, 0.2)";
+			this.ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
 			this.ctx.lineWidth = 1 / this.scale;
 
 			let gridStartX = Math.floor(this.x - canWidth / 2);
 				}
 			}
 
-			this.ctx.strokeStyle = "black";
-			this.ctx.lineWidth = 0.1;
+			this.ctx.strokeStyle = "rgba(255, 255, 255, 1)";
+			this.ctx.lineWidth = 0.05;
 			this.ctx.setLineDash([0.2, 0.1]);
 			for (let node of this.selectedNodes) {
 				this.ctx.beginPath();
 			}
 
 			if (this.currentLink != null) {
-				this.ctx.strokeStyle = "black";
+				this.ctx.strokeStyle = "brown";
 
 				let from = this.currentLink.from;
 				let fromX = from.node.x;

src/MainMenu.svelte

 	<h1>Game</h1>
 
 	<ul>
-		<li><a on:click={play} href="#/play">Start</a></li>
+		<li><a on:click={play} href="#/play">Story Mode</a></li>
 		<li><a href="#/sandbox">Sandbox Mode</a></li>
 	</ul>
 </main>

src/Router.svelte

 <main>
-	<svelte:component this={element} />
+	<svelte:component this={currentElement} {...currentProps} />
 </main>
 
 <script>
-	import MainMenu from "./MainMenu.svelte";
-	import SceneSelector from "./SceneSelector.svelte";
-	import Sandbox from "./Sandbox.svelte";
+	export let routes;
 
-	let routes = {
-		"/": MainMenu,
-		"/play": SceneSelector,
-		"/sandbox": Sandbox,
-	};
+	let routeMap = new Map();
+	for (let route of routes) {
+		let [descriptor, el] = route;
+		let parts = descriptor.split("/:");
+		let props = parts.slice(1);
+		let base = parts[0] + "@" + props.length;
 
-	let element = null;
+		routeMap.set(base, {props, el});
+	}
+
+	let currentElement = null;
+	let currentProps = null;
 
 	function route() {
 		let path = location.hash.substr(1);
-		if (path == "") {
+		if (path[0] != "/") {
+			console.error("Illegal path:", path);
 			path = "/";
 		}
 
-		if (routes[path] != null) {
-			element = routes[path];
-		} else {
-			element = routes["/"];
+		let parts = path.split("/").filter(el => el != "");
+		let base = "/" + parts.join("/") + "@0";
+		let propVals = [];
+		let route = routeMap.get(base);
+
+		// Check if we match anything, removing one path component every iteration
+		while (route == null && parts.length > 0) {
+			propVals.push(parts.pop());
+			base = "/" + parts.join("/") + "@" + propVals.length;
+			route = routeMap.get(base);
+		}
+
+		if (route == null) {
+			console.warn("No route matches", path);
+			route = routeMap.get("/@0");
+		}
+
+		let props = {};
+		for (let propName of route.props) {
+			props[propName] =  propVals.pop();
 		}
+
+		currentElement = route.el;
+		currentProps = props;
 	}
 
 	route();

src/SceneSelector.svelte

 
 <script>
 	import Scene from './Scene.svelte';
-	import level01 from './levels/01-intro.js';
+	import * as levels from "./levels.js";
 
-	let level = level01;
+	export let levelId = "001";
+
+	let level = levels["level" + levelId];
+	if (level == null) {
+		console.warn("Unknown level ID:", levelId);
+		level = levels["level001"];
+	}
 </script>

src/levels.js

+export {default as level001} from "./levels/001-intro.js";

src/main.js

+import MainMenu from "./MainMenu.svelte";
+import SceneSelector from "./SceneSelector.svelte";
+import Sandbox from "./Sandbox.svelte";
+
 import Router from './Router.svelte';
 
 export default new Router({
 	target: document.body,
+	props: {
+		routes: [
+			["/", MainMenu],
+			["/play/:levelId", SceneSelector],
+			["/play", SceneSelector],
+			["/sandbox", Sandbox],
+		],
+	},
 });