From c034612a35df37ab5e54cf53d6a416341f48a739 Mon Sep 17 00:00:00 2001
From: Tobias Berger <tobi.berger13@gmail.com>
Date: Sat, 2 Oct 2021 19:33:31 +0200
Subject: [PATCH] Add HelpModal

---
 src/components/Header.svelte           |  3 ++-
 src/components/Modals/HelpModal.svelte | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Modals/HelpModal.svelte

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 46440b6..1c5f366 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -3,6 +3,7 @@
   import type { SharkGame } from "../shark/SharkGame";
 
   import SettingsModal from "./Modals/SettingsModal.svelte";
+  import HelpModal from "./Modals/HelpModal.svelte";
 
   export let title: string;
   export let game: typeof SharkGame;
@@ -17,7 +18,7 @@
       openModal(SettingsModal, { settings: game.Settings.settings }, { replace: true });
     },
     help() {
-      console.log("help");
+      openModal(HelpModal, { discordLink }, { replace: true });
     },
     reset() {
       console.log("reset");
diff --git a/src/components/Modals/HelpModal.svelte b/src/components/Modals/HelpModal.svelte
new file mode 100644
index 0000000..d0bf4ce
--- /dev/null
+++ b/src/components/Modals/HelpModal.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import BaseModal from "./BaseModal.svelte";
+
+  export let isOpen: boolean;
+  export let discordLink: string;
+</script>
+
+<BaseModal {isOpen}>
+  <div id="help-modal">
+    <h3>Help</h3>
+    <p>
+      Some help text may or may not go here in the future... check out our <a href={discordLink}>discord</a>.
+    </p>
+  </div>
+</BaseModal>
+
+<style lang="scss">
+  #help-modal {
+    > h3 {
+      border-bottom: 0.5em double var(--color-med);
+    }
+  }
+</style>