create input and output in story mode

src/CircuitSim.svelte

@@ -34,6 +34,7 @@
 	import {onMount, onDestroy} from 'svelte';
 
 	export let components;
+	export let nodes = [];
 
 	class LogicSim {
 		constructor(can) {
@@ -633,6 +634,10 @@
 
 	onMount(() => {
 		sim = new LogicSim(canvas);
+		for (let node of nodes) {
+			sim.nodes.push(node);
+		}
+
 		interval = setInterval(sim.update.bind(sim), 100);
 	});
 

src/Router.svelte

@@ -23,6 +23,8 @@
 		if (path[0] != "/") {
 			console.error("Illegal path:", path);
 			path = "/";
+		} else if (path == "") {
+			path = "/";
 		}
 
 		let parts = path.split("/").filter(el => el != "");

src/Sandbox.svelte

@@ -7,7 +7,7 @@
 	import * as comps from './circuit-components.js';
 
 	let components = [
-		{name: "Input", ctor: comps.Input},
+		{name: "Switch", ctor: comps.Switch},
 		{name: "NotGate", ctor: comps.NotGate},
 		{name: "Diode", ctor: comps.Diode},
 		{name: "Lamp", ctor: comps.Lamp},

src/Scene.svelte

@@ -16,10 +16,10 @@
 			{:else}
 				<button on:click={begin}>Begin</button>
 			{/if}
-			<button on:click={begin}>Skip</button>
+			<button on:click={begin} disabled={page == level.pages.length - 1}>Skip</button>
 		</div>
 	{:else}
-		<CircuitSim components={components} />
+		<CircuitSim components={components} nodes={nodes} />
 	{/if}
 </main>
 
@@ -56,6 +56,19 @@
 		return {name, ctor: availableComponents[name]};
 	});
 
+	let nodes = [];
+	let y = 0;
+	for (let name of level.inputs) {
+		nodes.push(new availableComponents.Input(-4, y, name));
+		y += 2;
+	}
+
+	y = 0;
+	for (let name of level.outputs) {
+		nodes.push(new availableComponents.Output(4, y, name));
+		y += 2;
+	}
+
 	let page = 0;
 	let showIntro = true;
 

src/circuit-components.js

@@ -38,8 +38,69 @@ export class Link {
 }
 
 export class Input {
+	constructor(x, y, name) {
+		this.name = name || "Input";
+		this.x = x;
+		this.y = y;
+		this.inputs = [];
+		this.outputs = [{name: "Input", link: new Link(this, 0)}];
+
+		this.width = 4;
+		this.height = 1;
+
+		this.lit = false;
+	}
+
+	activate() {
+		this.lit = !this.lit;
+	}
+
+	tick() {
+		if (this.lit) {
+			this.outputs[0].link.next = true;
+		} else {
+			this.outputs[0].link.next = false;
+		}
+	}
+
+	commit() {
+		this.outputs[0].link.commit();
+	}
+}
+
+export class Output {
+	constructor(x, y, name) {
+		this.name = name || "Output";
+		this.x = x;
+		this.y = y;
+		this.inputs = [{name: "Output", links: []}];
+		this.outputs = [];
+
+		this.width = 4;
+		this.height = 1;
+
+		this.lit = false;
+		this.nextLit = false;
+	}
+
+	tick() {
+		this.nextLit = false;
+		for (let link of this.inputs[0].links) {
+			if (link.current) {
+				this.nextLit = true;
+				break;
+			}
+		}
+	}
+
+	commit() {
+		this.lit = this.nextLit;
+	}
+}
+
+export class Switch {
 	constructor(x, y) {
-		this.name = "IN";
+		this.name = "OFF";
 		this.x = x;
 		this.y = y;
 		this.inputs = [];
@@ -53,6 +114,7 @@ export class Input {
 
 	activate() {
 		this.lit = !this.lit;
+		this.name = this.lit ? "ON" : "OFF";
 	}
 
 	tick() {

src/levels/001-intro.js

@@ -7,7 +7,7 @@ export default {
 		"LED",
 	],
 	components: [
-		"Input",
+		"Switch",
 		"NotGate",
 	],