Add Log and placeholder for resource table

src/App.svelte

@@ -2,7 +2,7 @@
   import Footer from "./components/Footer.svelte";
   import Header from "./components/Header.svelte";
   import Wrapper from "./components/Wrapper.svelte";
-  import { SharkGame } from "./shark";
+  import { SharkGame } from "./shark/SharkGame";
 
   SharkGame.init();
 </script>

src/components/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SharkGame } from "../shark";
+  import { SharkGame } from "../shark/SharkGame";
 
   const discordLink = "https://discord.gg/eYqApFkFPY";
 
@@ -7,8 +7,8 @@
     save() {
       console.log("save");
     },
-    options() {
+    settings() {
-      console.log("options");
+      console.log("settings");
     },
     help() {
       console.log("help");

src/components/Log.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { Message } from "../shark/Message";
+  import { SharkGame } from "../shark/SharkGame";
+
+  export function addMessage(message: string): void {
+    SharkGame.messages = [
+      ...SharkGame.messages.slice(
+        -Math.max(...SharkGame.Settings.logLength.options)
+      ),
+      new Message(message),
+    ];
+  }
+
+  $: logLength = SharkGame.Settings.logLength.current;
+  $: displaymessages = [...SharkGame.messages].slice(-logLength).reverse();
+</script>
+
+<div id="log">
+  <button
+    on:click={() => {
+      addMessage("test" + SharkGame.messages.length);
+    }}>Add Test Message</button
+  >
+  <button
+    on:click={() => {
+      Message.even = true;
+      SharkGame.messages = [new Message("Log cleared.")];
+    }}>Clear log</button
+  >
+  <ol>
+    {#each displaymessages as message, i}
+      {#if i < logLength}
+        <li class={message.isEven ? "even" : "odd"}>{message}</li>
+      {/if}
+    {/each}
+  </ol>
+</div>
+
+<style lang="scss">
+  div {
+    height: 50%;
+    width: 100%;
+    overflow-y: scroll;
+    background-color: var(--color-darker);
+
+    > ol {
+      box-shadow: 0 0 2px 2px var(--color-dark) inset;
+      padding: 0;
+      margin: 0;
+
+      list-style-type: none;
+
+      > li {
+        padding: 1em 0.4em;
+        &.odd {
+          background-color: var(--color-med);
+        }
+        &.even {
+          background-color: var(--color-dark);
+        }
+      }
+    }
+  }
+</style>

src/components/ResourceTable.svelte

@@ -0,0 +1,8 @@
+<div><pre>Resource Table goes here</pre></div>
+
+<style lang="scss">
+  div {
+    height: 50%;
+    width: 100%;
+  }
+</style>

src/components/Wrapper.svelte

@@ -1,7 +1,20 @@
-<main>Wrapper</main>
+<script lang="ts">
+  import Log from "./Log.svelte";
+  import ResourceTable from "./ResourceTable.svelte";
+</script>
+
+<main>
+  <div id="left-column">
+    <ResourceTable />
+    <Log />
+  </div>
+</main>
 
 <style lang="scss">
   main {
+    display: flex;
+    flex-direction: row;
+
     background-color: var(--color-dark);
     margin: 2em 0 0 0;
 
@@ -9,5 +22,11 @@
     height: 100%;
 
     overflow-y: scroll;
+
+    > #left-column {
+      height: 100%;
+      max-height: 100%;
+      width: 20%;
+    }
   }
 </style>

src/shark/Message.ts

@@ -0,0 +1,15 @@
+export class Message {
+  static even = true;
+  isEven: boolean;
+  message: string;
+
+  constructor(message: string) {
+    this.message = message;
+    this.isEven = Message.even;
+    Message.even = !Message.even;
+  }
+
+  toString(): string {
+    return this.message;
+  }
+}

src/shark/Settings.ts

@@ -0,0 +1,342 @@
+// 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");
+    },
+  },
+
+  logLength: {
+    current: 30,
+    defaultValue: 30 as const,
+    name: "Max Log Messages" as const,
+    desc: "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,
+    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,
+    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,
+    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");
+    },
+  },
+};

src/shark/SharkGame.ts

@@ -1,3 +1,5 @@
+import { Message } from "./Message";
+import { Settings } from "./Settings";
 import { StaticClass } from "./StaticClass";
 
 export class SharkGame extends StaticClass {
@@ -51,7 +53,14 @@ export class SharkGame extends StaticClass {
   ] as const;
 
   static title: string;
+  static readonly Settings = Settings;
+  static messages: Message[] = [new Message("Welcome to Sharg!")];
+
   static init(): void {
+    for (const setting of Object.values(Settings)) {
+      setting.current = setting.defaultValue;
+    }
+
     SharkGame.title =
       SharkGame.#GAME_NAMES[
         Math.floor(Math.random() * SharkGame.#GAME_NAMES.length)

src/styles/global.scss

@@ -2,7 +2,7 @@ html {
   height: calc(100vh - 2em - 3em);
 }
 body {
-  min-height: 100%;
+  height: 100%;
   margin: 0;
   font-family: Verdana, Geneva, sans-serif;
   text-align: center;