From 7b4be2f1e290b068b0933c5b7a56d07e56ffc2b1 Mon Sep 17 00:00:00 2001
From: Tobias Berger <tobi.berger13@gmail.com>
Date: Wed, 29 Sep 2021 22:49:39 +0200
Subject: [PATCH] Modals, settings

---
 package.json                               |   1 +
 src/App.svelte                             |  71 ++++-
 src/components/Header.svelte               |   8 +-
 src/components/Modals/BaseModal.svelte     |  58 ++++
 src/components/Modals/SettingsModal.svelte |  76 +++++
 src/components/Wrapper.svelte              |  43 +--
 src/shark/Log.ts                           |   9 +-
 src/shark/Settings.ts                      | 337 ++-------------------
 src/shark/SharkGame.ts                     |  10 +-
 src/styles/shark-styles.scss               |  18 +-
 src/styles/themes.scss                     |  28 +-
 yarn.lock                                  |   5 +
 12 files changed, 308 insertions(+), 356 deletions(-)
 create mode 100644 src/components/Modals/BaseModal.svelte
 create mode 100644 src/components/Modals/SettingsModal.svelte

diff --git a/package.json b/package.json
index 6b98ec1..8ed70fe 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "sirv-cli": "^1.0.0",
     "svelte": "^3.0.0",
     "svelte-check": "^2.0.0",
+    "svelte-modals": "^1.0.4",
     "svelte-preprocess": "^4.0.0",
     "tslib": "^2.0.0",
     "typescript": "^4.0.0"
diff --git a/src/App.svelte b/src/App.svelte
index d8ad76a..16eecd7 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,12 +1,81 @@
+<script lang="ts" context="module">
+  async function getCurrentHash(): Promise<string> {
+    const response = await fetch(
+      "https://api.github.com/repos/Toby222/svelte-sharg/commits/main",
+      {
+        mode: "cors",
+      }
+    );
+    if (response.status < 200 || response.status > 299) {
+      throw new Error(response.statusText);
+    } else {
+      const result = (await response.json()).sha;
+      return result;
+    }
+  }
+  let CURRENT_HASH: string;
+  getCurrentHash().then((hash) => (CURRENT_HASH = hash));
+</script>
+
 <script lang="ts">
   import Footer from "./components/Footer.svelte";
   import Header from "./components/Header.svelte";
   import Wrapper from "./components/Wrapper.svelte";
   import { SharkGame } from "./shark/SharkGame";
 
+  import { Modals, closeModal } from "svelte-modals";
+  import { onDestroy, onMount } from "svelte";
+  import type { Unsubscriber } from "svelte/store";
+
   SharkGame.init();
+
+  let root: HTMLElement;
+  let unsubscribeSettings: Unsubscriber;
+  let updateInterval: ReturnType<typeof setInterval> | undefined;
+
+  onMount(() => {
+    root = document.documentElement;
+
+    SharkGame.Settings.subscribe((settings) => {
+      root.classList.toggle("no-theme", !settings.enableThemes.current);
+      settings.theme.options.forEach((theme) => {
+        root.classList.toggle(theme, theme === settings.theme.current);
+      });
+
+      if (settings.updateCheck.current && updateInterval === undefined) {
+        updateInterval = setInterval(async () => {
+          if (
+            CURRENT_HASH !== undefined &&
+            CURRENT_HASH !== (await getCurrentHash())
+          ) {
+            console.log("Updoot");
+          }
+        }, 6 * 60 * 1000);
+      } else if (
+        !settings.updateCheck.current &&
+        updateInterval !== undefined
+      ) {
+        clearInterval(updateInterval);
+      }
+    });
+  });
+
+  onDestroy(() => {
+    unsubscribeSettings();
+  });
+
+  function handleKeyUp(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      closeModal();
+    }
+  }
 </script>
 
-<Header title={SharkGame.title} />
+<svelte:body on:keyup={handleKeyUp} />
+
+<Modals>
+  <div slot="backdrop" id="modal-backdrop" on:click={closeModal} />
+</Modals>
+<Header game={SharkGame} title={SharkGame.title} />
 <Wrapper game={SharkGame} />
 <Footer />
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 90d0b3f..14400b3 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
+  import { openModal } from "svelte-modals";
+  import type { SharkGame } from "../shark/SharkGame";
+
+  import SettingsModal from "./Modals/SettingsModal.svelte";
+
   export let title: string;
+  export let game: typeof SharkGame;
 
   const discordLink = "https://discord.gg/eYqApFkFPY";
 
@@ -8,7 +14,7 @@
       console.log("save");
     },
     settings() {
-      console.log("settings");
+      openModal(SettingsModal, { settings: game.Settings }, { replace: true });
     },
     help() {
       console.log("help");
diff --git a/src/components/Modals/BaseModal.svelte b/src/components/Modals/BaseModal.svelte
new file mode 100644
index 0000000..332fda2
--- /dev/null
+++ b/src/components/Modals/BaseModal.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { closeModal } from "svelte-modals";
+
+  // provided by Modals
+  export let isOpen: boolean;
+</script>
+
+{#if isOpen}
+  <div role="dialog" class="modal">
+    <button class="close-modal" on:click={closeModal} />
+    <div class="modal-content">
+      <slot />
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  .modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+
+    /* allow click-through to backdrop */
+    pointer-events: none;
+
+    > .close-modal {
+      position: fixed;
+      top: 5em;
+      right: 5em;
+      height: 4em;
+      width: 4em;
+
+      padding: 0;
+
+      pointer-events: auto;
+
+      &:before {
+        content: "✕";
+        font-size: 3em;
+      }
+    }
+
+    > .modal-content {
+      box-shadow: 0 0 5px 5px var(--color-darker);
+      border-radius: 6px;
+      padding: 16px;
+      background: var(--color-darker);
+      pointer-events: auto;
+    }
+  }
+</style>
diff --git a/src/components/Modals/SettingsModal.svelte b/src/components/Modals/SettingsModal.svelte
new file mode 100644
index 0000000..0db4e58
--- /dev/null
+++ b/src/components/Modals/SettingsModal.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+
+  import type { Settings } from "../../shark/Settings";
+
+  import BaseModal from "./BaseModal.svelte";
+
+  export let isOpen: boolean;
+
+  type SettingsUnkownOptions = typeof Settings extends Writable<infer X>
+    ? Writable<
+        Record<
+          keyof X,
+          Omit<X[keyof X], "options" | "current"> & {
+            current: unknown;
+            options: readonly unknown[];
+          }
+        >
+      >
+    : never;
+  export let settings: typeof Settings;
+  $: usableSettings = settings as SettingsUnkownOptions;
+</script>
+
+<BaseModal {isOpen}>
+  <table id="settings-modal">
+    <colgroup>
+      <col style="text-align: left;" />
+      <col />
+    </colgroup>
+    <tbody>
+      {#each Object.entries($usableSettings) as [settingName, setting] (settingName)}
+        <tr>
+          <td>
+            {setting.name}<br />
+            <span class="setting-description">({setting.description}) </span>
+          </td>
+          {#each setting.options as option}
+            <td
+              ><button
+                disabled={setting.current === option}
+                on:click={() => {
+                  setting.current = option;
+                }}>{option}</button
+              ></td
+            >
+          {/each}
+        </tr>
+      {/each}</tbody
+    >
+  </table>
+</BaseModal>
+
+<style lang="scss">
+  #settings-modal {
+    display: flex;
+    flex-direction: column;
+
+    > tbody > tr {
+      > td:nth-child(1) {
+        text-align: left;
+
+        > .setting-description {
+          color: var(--color-lighter);
+          font-size: 80%;
+        }
+      }
+
+      > td > button {
+        font-size: 1em;
+        width: 6.5em;
+        height: 2em;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Wrapper.svelte b/src/components/Wrapper.svelte
index 8017d66..54cd69b 100644
--- a/src/components/Wrapper.svelte
+++ b/src/components/Wrapper.svelte
@@ -6,7 +6,6 @@
   import TabSelector from "./TabSelector.svelte";
 
   export let game: typeof SharkGame;
-  $: Game = game;
 
   let sidebarExpanded = false;
 
@@ -14,19 +13,28 @@
     sidebarExpanded = to ?? !sidebarExpanded;
   }
   function handleAddMessage(event: CustomEvent<AddMessageEvent>) {
-    Game.Log.addMessage(event.detail.message, event.detail.messageType);
+    game.Log.addMessage(event.detail.message, event.detail.messageType);
   }
   function handleResetLog() {
-    Game.Log.reset();
+    game.Log.reset();
   }
+
+  let logLength: number;
+  game.Settings.subscribe((settings) => {
+    logLength = settings.logLength.current;
+  });
 </script>
 
 <main>
-  <div id="left-column" class={sidebarExpanded ? "expanded" : "collapsed"}>
-    <ResourceTable bind:resources={Game.Resources.Resources} />
+  <div
+    id="left-column"
+    class:expanded={sidebarExpanded}
+    class:collapsed={!sidebarExpanded}
+  >
+    <ResourceTable resources={game.Resources.Resources} />
     <Log
-      bind:logLength={Game.Settings.logLength.current}
-      bind:messages={Game.Log.messages}
+      {logLength}
+      messages={game.Log.messages}
       on:addMessage={handleAddMessage}
       on:resetLog={handleResetLog}
     />
@@ -35,6 +43,7 @@
     <div id="right-top">
       <div
         role="button"
+        name="sidebar toggle"
         id="sidebar-toggle"
         on:click={(ev) => {
           ev.cancelBubble = true;
@@ -42,26 +51,22 @@
         }}
       >
         <svg width="1em" height="1em">
-          <line id="top" x1="0" y1="1px" x2="1em" y2="1px" />
-          <line id="middle" x1="0" y1="0.5em" x2="1em" y2="0.5em" />
-          <line
-            id="bottom"
-            x1="0"
-            y1="calc(1em - 1px)"
-            x2="1em"
-            y2="calc(1em - 1px)"
-          />
+          <line x1="0" y1="0" x2="1em" y2="0" />
+          <line x1="0" y1="0.5em" x2="1em" y2="0.5em" />
+          <line x1="0" y1="1em" x2="1em" y2="1em" />
         </svg>
       </div>
       <TabSelector
-        bind:tabs={Game.Tabs.AllTabs}
-        bind:selectedTab={Game.Tabs.currentTab}
+        tabs={game.Tabs.AllTabs}
+        bind:selectedTab={game.Tabs.currentTab}
       />
     </div>
     <div id="tab-content">
       <svelte:component
-        this={Game.Tabs.currentTab}
+        this={game.Tabs.currentTab}
         on:addMessage={handleAddMessage}
+        on:openModal
+        on:closeModal
       />
     </div>
   </div>
diff --git a/src/shark/Log.ts b/src/shark/Log.ts
index 9c694b3..f07035c 100644
--- a/src/shark/Log.ts
+++ b/src/shark/Log.ts
@@ -6,6 +6,13 @@ import { StaticClass } from "./StaticClass";
 
 export class Log extends StaticClass {
   static messages = writable<Message[]>([]);
+  static #maxLogLength: number;
+
+  static init(): void {
+    Settings.subscribe((settings) => {
+      Log.#maxLogLength = Math.max(...settings.logLength.options);
+    })();
+  }
 
   static addMessage(
     message: string,
@@ -13,7 +20,7 @@ export class Log extends StaticClass {
   ): void {
     this.messages.update((oldMessages) =>
       [...oldMessages, new Message(message, messageType)].slice(
-        -Math.max(...Settings.logLength.options)
+        -Log.#maxLogLength
       )
     );
   }
diff --git a/src/shark/Settings.ts b/src/shark/Settings.ts
index 6826d74..5a183ea 100644
--- a/src/shark/Settings.ts
+++ b/src/shark/Settings.ts
@@ -1,342 +1,47 @@
 // How to make current just be undefined here, but keep the type of defaultValue?
 
-export const Settings = {
-  // Internal / No category
-  buyAmount: {
-    current: 1,
-    defaultValue: 1 as const,
-    options: [1, 10, 100, -3, -2, -1, "custom"] as const,
-  },
-
-  grottoMode: {
-    current: "simple",
-    defaultValue: "simple" as const,
-    options: ["simple", "advanced"] as const,
-  },
-
-  showPercentages: {
-    current: "absolute",
-    defaultValue: "absolute" as const,
-    options: ["absolute", "percentage"] as const,
-  },
-
-  // PERFORMANCE
-
-  framerate: {
-    current: 20,
-    defaultValue: 20 as const,
-    name: "Framerate/TPS" as const,
-    desc: "How fast to update the game." as const,
-    category: "PERFORMANCE" as const,
-    options: [1, 2, 5, 10, 20, 30] as const,
-    onChange(): void {
-      // main.applyFramerate();
-      console.warn("TODO");
-    },
-  },
-
-  showAnimations: {
-    current: true,
-    defaultValue: true as const,
-    name: "Show Animations" as const,
-    desc: "Whether to show animated transitions." as const,
-    category: "PERFORMANCE" as const,
-    options: [true, false] as const, // might remove this option? could be a pain to continue supporting it
-  },
-
-  // LAYOUT
-
-  minimizedTopbar: {
-    current: true,
-    defaultValue: true as const,
-    name: "Minimized Title Bar" as const,
-    desc: "Whether to minimize the title bar at the top." as const,
-    category: "LAYOUT" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      //   if (SharkGame.Settings.current["minimizedTopbar"]) {
-      //     document.querySelector("body").classList.add("top-bar");
-      //     $("#wrapper").removeClass("notMinimized");
-      //   } else {
-      //     document.querySelector("body").classList.remove("top-bar");
-      //     $("#wrapper").addClass("notMinimized");
-      //   }
-      console.warn("TODO");
-    },
-  },
-
-  groupResources: {
-    current: true,
-    defaultValue: true as const,
-    name: "Group Resources" as const,
-    desc: "Whether to categorize resources in the table." as const,
-    category: "LAYOUT" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      // res.rebuildTable = true;
-      console.warn("TODO");
-    },
-  },
-
-  smallTable: {
-    current: false,
-    defaultValue: false as const,
-    name: "Smaller Table" as const,
-    desc: "Whether to make the stuff table smaller." as const,
-    category: "LAYOUT" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      // res.rebuildTable = true;
-      console.warn("TODO");
-    },
-  },
-
-  buttonDisplayType: {
-    current: "pile",
-    defaultValue: "pile" as const,
-    name: "Home Sea Button Display" as const,
-    desc: "How to arrange buttons." as const,
-    category: "LAYOUT" as const,
-    options: ["list", "pile"] as const,
-    onChange(): void {
-      // SharkGame.TabHandler.changeTab(SharkGame.Tabs.current);
-      console.warn("TODO");
-    },
-  },
+import { writable } from "svelte/store";
 
+export const Settings = writable({
   logLength: {
     current: 30,
     defaultValue: 30 as const,
     name: "Max Log Messages" as const,
-    desc: "Max number of messages kept in the log." as const,
+    description: "Max number of messages kept in the log." as const,
     category: "LAYOUT" as const,
     options: [5, 10, 15, 20, 30, 60] as const,
-    onChange(): void {
-      // log.correctLogLength();
-    },
   },
-
-  sidebarWidth: {
-    current: "30%",
-    defaultValue: "30%" as const,
-    name: "Sidebar Width" as const,
-    desc: "How much screen space the sidebar should take." as const,
-    category: "LAYOUT" as const,
-    options: ["25%", "30%", "35%"] as const,
-    onChange(): void {
-      // const sidebar = $("#sidebar");
-      // if (SharkGame.Settings.current.showAnimations) {
-      //   sidebar.animate(
-      //     { width: SharkGame.Settings.current.sidebarWidth },
-      //     100
-      //   );
-      // } else {
-      //   sidebar.width(SharkGame.Settings.current.sidebarWidth);
-      // }
-      console.warn("TODO");
-    },
-  },
-
-  // APPEARANCE
-
-  colorCosts: {
-    current: "color",
-    defaultValue: "color" as const,
-    name: "Color Resource Names" as const,
-    desc: "How to color names of resources." as const,
-    category: "APPEARANCE" as const,
-    options: ["color", "bright", "none"] as const,
-    onChange(): void {
-      // res.rebuildTable = true;
-      // stats.recreateIncomeTable = true;
-      console.warn("TODO");
-    },
-  },
-
-  boldCosts: {
-    current: true,
-    defaultValue: true as const,
-    name: "Bold Resource Names" as const,
-    desc: "Should resource names be bolded?" as const,
-    options: [true, false] as const,
-    category: "APPEARANCE" as const,
-    onChange(): void {
-      // res.rebuildTable = true;
-      // stats.recreateIncomeTable = true;
-      console.warn("TODO");
-    },
-  },
-
-  alwaysSingularTooltip: {
-    current: false,
-    defaultValue: false as const,
-    name: "Tooltip Always Singular" as const,
-    desc: "Should the tooltip only show what one of each thing produces?" as const,
-    category: "APPEARANCE" as const,
-    options: [true, false] as const,
-  },
-
-  tooltipQuantityReminders: {
-    current: true,
-    defaultValue: true as const,
-    name: "Tooltip Amount Reminder" as const,
-    desc: "Should tooltips tell you much you own of stuff?" as const,
-    category: "APPEARANCE" as const,
-    options: [true, false] as const,
-  },
-
   enableThemes: {
     current: true,
     defaultValue: true as const,
     name: "Enable Planet-dependent Styles" as const,
-    desc: "Should page colors change for different planets?" as const,
+    description: "Should page colors change for different planets?" as const,
     options: [true, false] as const,
     category: "APPEARANCE" as const,
-    onChange(): void {
-      // if (SharkGame.Settings.enableThemes.current) {
-      //   document.querySelector("body").classList.remove("no-theme");
-      // } else {
-      //   document.querySelector("body").classList.add("no-theme");
-      // }
-      console.warn("TODO");
-    },
   },
-
-  showIcons: {
-    current: true,
-    defaultValue: true as const,
-    name: "Show Action Button icons" as const,
-    desc: "Show button icons?" as const,
+  theme: {
+    current: "marine",
+    defaultValue: "marine" as const,
+    name: "Currently enabled theme" as const,
+    description: "Changes the colors of the game" as const,
+    options: [
+      "abandoned",
+      "chaotic",
+      "frigid",
+      "haven",
+      "marine",
+      "shrouded",
+      "tempestuous",
+      "violent",
+    ],
     category: "APPEARANCE" as const,
-    options: [true, false] as const,
   },
-
-  showTabImages: {
-    current: true,
-    defaultValue: true as const,
-    name: "Show Tab Header Images" as const,
-    desc: "Show art?" as const,
-    category: "APPEARANCE" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      // SharkGame.TabHandler.changeTab(SharkGame.Tabs.current);
-      console.warn("TODO");
-    },
-  },
-
-  // ACCESSIBILITY
-
-  doAspectTable: {
-    current: "tree",
-    defaultValue: "tree" as const,
-    name: "Aspect Table or Tree" as const,
-    desc: "Draw a visual aspect tree or a more accessible aspect table?" as const,
-    category: "ACCESSIBILITY" as const,
-    options: ["tree", "table"] as const,
-  },
-
-  verboseTokenDescriptions: {
-    current: false,
-    defaultValue: false as const,
-    name: "Verbose Token" as const,
-    desc: "Should tokens display text saying where they are?" as const,
-    category: "ACCESSIBILITY" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      // res.tokens.updateTokenDescriptions();
-      console.warn("TODO");
-    },
-  },
-
-  minuteHandEffects: {
-    current: true,
-    defaultValue: true as const,
-    name: "Minute Hand Special Effects" as const,
-    desc: "Should the minute hand glow a ton?" as const,
-    category: "ACCESSIBILITY" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      // res.minuteHand.updatePowers();
-      console.warn("TODO");
-    },
-  },
-
-  // OTHER
-
-  idleEnabled: {
-    current: true,
-    defaultValue: true as const,
-    name: "Stored Offline Progress" as const,
-    desc: "Should the game store idle progress for later use? (otherwise, it will not go idle and will have real offline progress)" as const,
-    category: "OTHER" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      // res.minuteHand.init();
-      console.warn("TODO");
-    },
-  },
-
-  showTooltips: {
-    current: true,
-    defaultValue: true as const,
-    name: "Tooltips" as const,
-    desc: "Whether to show informational tooltips when hovering over certain stuff." as const,
-    category: "OTHER" as const,
-    options: [true, false] as const,
-  },
-
   updateCheck: {
     current: true,
     defaultValue: true as const,
     name: "Check for updates" as const,
-    desc: "Whether to notify you of new updates." as const,
-    category: "OTHER" as const,
-    options: [true, false] as const,
-    onChange(): void {
-      // clearInterval(SharkGame.Main.checkForUpdateHandler);
-      // if (SharkGame.Settings.current.updateCheck) {
-      //   SharkGame.Main.checkForUpdateHandler = setInterval(
-      //     main.checkForUpdates,
-      //     300000
-      //   );
-      // }
-      console.warn("TODO");
-    },
-  },
-
-  offlineModeActive: {
-    current: true,
-    defaultValue: true as const,
-    name: "Offline Progress" as const,
-    desc: "Should there be ANY offline progress?" as const,
+    description: "Whether to notify you of new updates." as const,
     category: "OTHER" as const,
     options: [true, false] as const,
   },
-
-  // SAVES (Needs to come last due to hard-coded import/export/wipe buttons at the bottom)
-
-  autosaveFrequency: {
-    // times given in minutes
-    current: 5,
-    defaultValue: 5 as const,
-    name: "Autosave Frequency" as const,
-    desc: "Number of minutes between autosaves." as const,
-    category: "SAVES" as const,
-    options: [1, 2, 5, 10, 30] as const,
-    onChange(): void {
-      // clearInterval(main.autosaveHandler);
-      // main.autosaveHandler = setInterval(
-      //   main.autosave,
-      //   SharkGame.Settings.current.autosaveFrequency * 60000
-      // );
-      // log.addMessage(
-      //   "Now autosaving every " +
-      //     SharkGame.Settings.current.autosaveFrequency +
-      //     " minute" +
-      //     sharktext.plural(SharkGame.Settings.current.autosaveFrequency) +
-      //     "."
-      // );
-      console.warn("TODO");
-    },
-  },
-};
+});
diff --git a/src/shark/SharkGame.ts b/src/shark/SharkGame.ts
index e611022..cb6f4b3 100644
--- a/src/shark/SharkGame.ts
+++ b/src/shark/SharkGame.ts
@@ -61,9 +61,13 @@ export class SharkGame extends StaticClass {
   static readonly Tabs = Tabs;
 
   static init(): void {
-    for (const setting of Object.values(Settings)) {
-      setting.current = setting.defaultValue;
-    }
+    Settings.update((settings) => {
+      for (const setting of Object.values(settings)) {
+        setting.current = setting.defaultValue;
+      }
+      return settings;
+    });
+    Log.init();
 
     SharkGame.title =
       SharkGame.#GAME_NAMES[
diff --git a/src/styles/shark-styles.scss b/src/styles/shark-styles.scss
index 3427e5b..31c34e0 100644
--- a/src/styles/shark-styles.scss
+++ b/src/styles/shark-styles.scss
@@ -35,13 +35,29 @@ button {
   &:hover {
     box-shadow: 0 0 2px 2px var(--color-lighter);
   }
-  &:active {
+  &:active,
+  &:disabled {
     background-color: var(--color-dark);
     color: var(--color-light);
     box-shadow: 0 3px 7px 7px var(--color-darker) inset;
   }
 
+  &:disabled {
+    pointer-events: none;
+    border-color: var(--color-med);
+  }
+
   &:not(:disabled) {
     cursor: pointer;
   }
 }
+
+#modal-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index b01b507..5cbc374 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -27,11 +27,11 @@ $color-dark-haven: #053247;
 $color-darker-haven: #001d2b;
 
 // marine theme (default)
-$color-lighter: #8e9fc0;
-$color-light: #536892;
-$color-med: #2e4372;
-$color-dark: #152a55;
-$color-darker: #061639;
+$color-lighter-marine: #8e9fc0;
+$color-light-marine: #536892;
+$color-med-marine: #2e4372;
+$color-dark-marine: #152a55;
+$color-darker-marine: #061639;
 
 //shrouded theme
 $color-lighter-shrouded: #22bec3;
@@ -77,19 +77,19 @@ $color-discovery-dark4: darken(#ace3d1, 65%);
 $color-text: white;
 
 :root {
-  --color-lighter: #{$color-lighter};
-  --color-light: #{$color-light};
-  --color-med: #{$color-med};
-  --color-dark: #{$color-dark};
-  --color-darker: #{$color-darker};
+  --color-lighter: #{$color-lighter-marine};
+  --color-light: #{$color-light-marine};
+  --color-med: #{$color-med-marine};
+  --color-dark: #{$color-dark-marine};
+  --color-darker: #{$color-darker-marine};
   --color-title: #{rgba(
-      red($color-med),
-      green($color-med),
-      blue($color-med),
+      red($color-med-marine),
+      green($color-med-marine),
+      blue($color-med-marine),
       0.2
     )};
 
-  :not(.no-theme) {
+  &:not(.no-theme) {
     &.abandoned {
       --color-lighter: #{$color-lighter-abandoned};
       --color-light: #{$color-light-abandoned};
diff --git a/yarn.lock b/yarn.lock
index 8686201..0e5f54f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1688,6 +1688,11 @@ svelte-check@^2.0.0:
     svelte-preprocess "^4.0.0"
     typescript "*"
 
+svelte-modals@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/svelte-modals/-/svelte-modals-1.0.4.tgz#d1e7b2301f274417e03897ea6b76e3ddfb4be4fc"
+  integrity sha512-nwYEF7PlxX4uqKU1zRCi+fcECxlEOEFGNGcazdyGsFK0LMngrxwqq3q77xBabGNU7DXYxGyDXq/9YHzyHyCAFg==
+
 svelte-preprocess@^4.0.0:
   version "4.9.5"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.5.tgz#e11bdf3fcdacbd90188cdf29a7371030991f9eba"