From 126f9180823e2a87de4cf27e73cf75f4657bfd8e Mon Sep 17 00:00:00 2001
From: Tobias Berger <tobi.berger13@gmail.com>
Date: Thu, 30 Sep 2021 11:10:48 +0200
Subject: [PATCH] Better settings

---
 src/App.svelte                             |  16 +-
 src/components/Modals/BaseModal.svelte     |   5 +
 src/components/Modals/SettingsModal.svelte | 103 ++++++------
 src/components/Wrapper.svelte              |   4 +-
 src/shark/Log.ts                           |   2 +-
 src/shark/Settings.ts                      | 183 ++++++++++++++++-----
 src/shark/SharkGame.ts                     |   6 +-
 7 files changed, 224 insertions(+), 95 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 16eecd7..40c9d3e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -37,12 +37,18 @@
     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);
+      root.classList.toggle(
+        "no-theme",
+        !settings.appearance.enableThemes.current
+      );
+      settings.appearance.theme.options.forEach((theme) => {
+        root.classList.toggle(
+          theme,
+          theme === settings.appearance.theme.current
+        );
       });
 
-      if (settings.updateCheck.current && updateInterval === undefined) {
+      if (settings.other.updateCheck.current && updateInterval === undefined) {
         updateInterval = setInterval(async () => {
           if (
             CURRENT_HASH !== undefined &&
@@ -52,7 +58,7 @@
           }
         }, 6 * 60 * 1000);
       } else if (
-        !settings.updateCheck.current &&
+        !settings.other.updateCheck.current &&
         updateInterval !== undefined
       ) {
         clearInterval(updateInterval);
diff --git a/src/components/Modals/BaseModal.svelte b/src/components/Modals/BaseModal.svelte
index 332fda2..2f577c2 100644
--- a/src/components/Modals/BaseModal.svelte
+++ b/src/components/Modals/BaseModal.svelte
@@ -53,6 +53,11 @@
       padding: 16px;
       background: var(--color-darker);
       pointer-events: auto;
+
+      max-width: 80%;
+      max-height: 80%;
+
+      overflow-y: auto;
     }
   }
 </style>
diff --git a/src/components/Modals/SettingsModal.svelte b/src/components/Modals/SettingsModal.svelte
index 0db4e58..5b3538a 100644
--- a/src/components/Modals/SettingsModal.svelte
+++ b/src/components/Modals/SettingsModal.svelte
@@ -1,75 +1,82 @@
 <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
+  <div id="settings-modal">
+    {#each Object.entries($settings) as [categoryName, categorySettings]}
+      <h4>{categoryName.toUpperCase()}</h4>
+      <div class="settings-category" id={`settings-category-${categoryName}`}>
+        {#each Object.entries(categorySettings) as [settingId, setting] (settingId)}
+          <div
+            class="settings-row"
+            id={`settings-row-${categoryName}-${settingId}`}
+          >
+            <div
+              class="settings-description"
+              id={`settings-description-${categoryName}-${settingId}`}
+            >
+              {setting.name}<br />
+              <span class="settings-small-description"
+                >({setting.description})</span
+              >
+            </div>
+            {#each setting.options as option}<button
                 disabled={setting.current === option}
                 on:click={() => {
                   setting.current = option;
                 }}>{option}</button
-              ></td
-            >
-          {/each}
-        </tr>
-      {/each}</tbody
-    >
-  </table>
+              >
+            {/each}
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
 </BaseModal>
 
 <style lang="scss">
   #settings-modal {
     display: flex;
     flex-direction: column;
+    max-width: 100%;
+    max-height: 100%;
 
-    > tbody > tr {
-      > td:nth-child(1) {
-        text-align: left;
+    user-select: none;
+    overflow-y: scroll;
+    overflow-wrap: break-word;
 
-        > .setting-description {
-          color: var(--color-lighter);
-          font-size: 80%;
+    > .settings-category {
+      width: auto;
+
+      display: flex;
+      flex-direction: column;
+
+      > .settings-row {
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+
+        > .settings-description {
+          text-align: left;
+          width: 20em;
+
+          > .settings-small-description {
+            color: var(--color-lighter);
+            font-size: 80%;
+          }
+        }
+        > button {
+          font-size: 1em;
+          width: 7em;
+          height: 2em;
         }
-      }
-
-      > td > button {
-        font-size: 1em;
-        width: 6.5em;
-        height: 2em;
       }
     }
   }
diff --git a/src/components/Wrapper.svelte b/src/components/Wrapper.svelte
index 54cd69b..403664f 100644
--- a/src/components/Wrapper.svelte
+++ b/src/components/Wrapper.svelte
@@ -21,7 +21,7 @@
 
   let logLength: number;
   game.Settings.subscribe((settings) => {
-    logLength = settings.logLength.current;
+    logLength = settings.layout.logLength.current;
   });
 </script>
 
@@ -81,7 +81,7 @@
 
     padding: 0;
     // Subtract footer and header size (and footer padding)
-    height: calc(100% - 2em - 2em - 2px);
+    height: calc(100% - 2em - 2em - 4px);
 
     overflow-y: hidden;
 
diff --git a/src/shark/Log.ts b/src/shark/Log.ts
index f07035c..573414c 100644
--- a/src/shark/Log.ts
+++ b/src/shark/Log.ts
@@ -10,7 +10,7 @@ export class Log extends StaticClass {
 
   static init(): void {
     Settings.subscribe((settings) => {
-      Log.#maxLogLength = Math.max(...settings.logLength.options);
+      Log.#maxLogLength = Math.max(...settings.layout.logLength.options);
     })();
   }
 
diff --git a/src/shark/Settings.ts b/src/shark/Settings.ts
index 5a183ea..bdcd40e 100644
--- a/src/shark/Settings.ts
+++ b/src/shark/Settings.ts
@@ -3,45 +3,154 @@
 import { writable } from "svelte/store";
 
 export const Settings = writable({
-  logLength: {
-    current: 30,
-    defaultValue: 30 as const,
-    name: "Max Log Messages" 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,
+  layout: {
+    logLength: {
+      current: 30,
+      defaultValue: 30 as const,
+      name: "Log Messages" as const,
+      description: "The number of messages shown in the log" as const,
+      options: [5, 10, 15, 20, 30, 60] as const,
+    },
   },
-  enableThemes: {
-    current: true,
-    defaultValue: true as const,
-    name: "Enable Planet-dependent Styles" as const,
-    description: "Should page colors change for different planets?" as const,
-    options: [true, false] as const,
-    category: "APPEARANCE" as const,
+  appearance: {
+    enableThemes: {
+      current: true,
+      defaultValue: true as const,
+      name: "Enable Planet-dependent Styles" as const,
+      description:
+        "Whether page colors should change for different planets" as const,
+      options: [true, false] as const,
+    },
+    theme: {
+      current: "marine",
+      defaultValue: "marine" as const,
+      name: "Currently enabled theme" as const,
+      description:
+        "Only applied if planet-dependent styles are enabled" as const,
+      options: [
+        "abandoned",
+        "chaotic",
+        "frigid",
+        "haven",
+        "marine",
+        "shrouded",
+        "tempestuous",
+        "violent",
+      ],
+    },
   },
-  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,
+  other: {
+    updateCheck: {
+      current: true,
+      defaultValue: true as const,
+      name: "Check for updates" as const,
+      description: "Whether to notify you of new updates" as const,
+      options: [true, false] as const,
+    },
   },
-  updateCheck: {
-    current: true,
-    defaultValue: true as const,
-    name: "Check for updates" as const,
-    description: "Whether to notify you of new updates." as const,
-    category: "OTHER" as const,
-    options: [true, false] as const,
+  // To test scrolling of the settings modal (gonna use them to test saving later, too)
+  nil: {
+    nil1: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil2: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil3: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil4: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil5: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil6: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil7: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil8: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil9: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil10: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil11: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil12: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil13: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil14: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil15: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil16: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
+    nil17: {
+      defaultValue: true as const,
+      name: "placeholder" as const,
+      description: "placeholder." as const,
+      options: [true, false] as const,
+    },
   },
 });
diff --git a/src/shark/SharkGame.ts b/src/shark/SharkGame.ts
index cb6f4b3..8825c08 100644
--- a/src/shark/SharkGame.ts
+++ b/src/shark/SharkGame.ts
@@ -62,8 +62,10 @@ export class SharkGame extends StaticClass {
 
   static init(): void {
     Settings.update((settings) => {
-      for (const setting of Object.values(settings)) {
-        setting.current = setting.defaultValue;
+      for (const settingsCategory of Object.values(settings)) {
+        for (const setting of Object.values(settingsCategory)) {
+          setting.current = setting.defaultValue;
+        }
       }
       return settings;
     });