toggle between "show me" and "reset"

site/src/components/Repl/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, setContext } from 'svelte';
+	import { onMount, setContext, createEventDispatcher } from 'svelte';
 	import { writable } from 'svelte/store';
 	import SplitPane from './SplitPane.svelte';
 	import CodeMirror from './CodeMirror.svelte';
@@ -54,6 +54,8 @@
 		}
 	}
 
+	const dispatch = createEventDispatcher();
+
 	const components = writable([]);
 	const values = writable({});
 	const selected = writable(null);
@@ -99,6 +101,10 @@
 
 			// regenerate bundle (TODO do this in a separate worker?)
 			workers.bundler.postMessage({ type: 'bundle', components: $components });
+
+			dispatch('change', {
+				components: $components
+			});
 		},
 
 		register_module_editor(editor) {

site/src/routes/tutorial/[slug]/index.svelte

@@ -66,12 +66,32 @@
 		});
 	}
 
+	function reset() {
+		repl.update({
+			components: chapter.app_a.map(clone),
+			values: {}
+		});
+	}
+
 	function complete() {
 		repl.update({
 			components: chapter.app_b.map(clone),
 			values: {}
 		});
 	}
+
+	let completed = false;
+
+	function handle_change(event) {
+		completed = event.detail.components.every((file, i) => {
+			const expected = chapter.app_b[i];
+			return (
+				file.name === expected.name &&
+				file.type === expected.type &&
+				file.source === expected.source
+			);
+		});
+	}
 </script>
 
 <style>
@@ -213,8 +233,8 @@
 				{#if chapter.app_b}
 					<!-- TODO disable this button when the contents of the REPL
 						matches the expected end result -->
-					<button class="show" on:click={complete}>
-						Show me
+					<button class="show" on:click="{() => completed ? reset() : complete()}">
+						{completed ? 'Reset' : 'Show me'}
 					</button>
 				{/if}
 
@@ -230,6 +250,6 @@
 	</div>
 
 	<div class="tutorial-repl">
-		<Repl bind:this={repl} orientation="rows" show_props={false}/>
+		<Repl bind:this={repl} orientation="rows" show_props={false} on:change={handle_change}/>
 	</div>
 </div>