Dialog component (#46)

SIUUUUUUUUUUUUUUUU

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mpls-simulation",
 	"version": "0.0.1",
-	"private": true,
+	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",

src/lib/components/HelpButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Dialog from "$lib/components/Modal.svelte";
+
+	let dialog: HTMLDialogElement;
+</script>
+
+<div>
+	<button
+		on:click={() => {
+			dialog.showModal();
+		}}>Help</button
+	>
+</div>
+
+<Dialog bind:dialog>
+	Drag and drop nodes that you want to add. <br /><br />
+	Hold shiftKey and drag nodes to make connections between the nodes. <br /><br />
+	Press Esc to close this popup.
+</Dialog>
+
+<style>
+	button {
+		padding: 5px;
+	}
+</style>

src/lib/components/Modal.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let dialog: HTMLDialogElement | null = null;
+</script>
+
+<dialog bind:this={dialog} on:close>
+	<slot />
+</dialog>
+
+<style>
+	dialog {
+		padding: 10px;
+		margin: auto;
+	}
+
+	dialog::backdrop {
+		background-color: rgba(0, 0, 139, 0.25);
+	}
+</style>

src/lib/components/Network.svelte

@@ -3,6 +3,7 @@
 	import { network } from "$lib/stores/network";
 	import { NodeType, type Node, type Connection, isNodeType } from "$lib/interfaces/network";
 	import ToolboxItem from "$lib/components/ToolboxItem.svelte";
+	import HelpButton from "$lib/components/HelpButton.svelte";
 
 	enum InteractionState {
 		NONE,
@@ -249,11 +250,14 @@
 			</text>
 		{/each}
 	</svg>
-	<div id="drag-and-drop-container">
+	<div id="drag-and-drop-container" class="absolute-flex">
 		{#each ToolboxItems as item}
 			<ToolboxItem {...item} />
 		{/each}
 	</div>
+	<div id="bottom-bar" class="absolute-flex">
+		<HelpButton />
+	</div>
 </div>
 
 <style>
@@ -274,9 +278,17 @@
 		pointer-events: none;
 	}
 
-	#drag-and-drop-container {
+	.absolute-flex {
 		position: absolute;
 		display: flex;
+	}
+
+	#drag-and-drop-container {
+		margin: 10px;
+	}
+
+	#bottom-bar {
 		margin: 10px;
+		bottom: 0;
 	}
 </style>