Remember that stores exist

src/components/Header.svelte

@@ -81,6 +81,10 @@
 
     pointer-events: none;
 
+    > span {
+      font-weight: bold;
+    }
+
     > ul {
       text-align: center;
       font-weight: bold;

src/components/Log.svelte

@@ -1,45 +1,45 @@
+<svelte:options immutable />
+
 <script lang="ts">
+  import type { Writable } from "svelte/store";
+
   import { Message, MessageType } from "../shark/Message";
   import { SharkGame } from "../shark/SharkGame";
 
-  export let messages: Message[];
+  export let messages: Writable<Message[]>;
 
-  function addMessage(
-    message: string,
-    messageType: MessageType = MessageType.message
-  ) {
-    messages = [...messages, new Message(message, messageType)];
+  // Shorthand
+  function addMessage(message: string, messageType?: MessageType) {
+    SharkGame.Log.addMessage(message, messageType);
   }
 
   $: logLength = SharkGame.Settings.logLength.current;
-  $: displaymessages = messages.slice(-logLength).reverse();
+  $: displayMessages = $messages.slice(-logLength).reverse();
 </script>
 
 <div id="log">
   <button
     on:click={() => {
-      addMessage("message" + messages.length);
+      addMessage("message" + $messages.length);
     }}>Add Message</button
   >
   <button
     on:click={() => {
-      addMessage("warn" + messages.length, MessageType.warning);
+      addMessage("warn" + $messages.length, MessageType.warning);
     }}>Add Warning</button
   >
   <button
     on:click={() => {
-      addMessage("error" + messages.length, MessageType.error);
+      addMessage("error" + $messages.length, MessageType.error);
     }}>Add Error</button
   >
   <button
     on:click={() => {
-      Message.even = true;
-      messages = [];
-      addMessage("Log cleared");
+      SharkGame.Log.reset();
     }}>Clear log</button
   >
   <ol>
-    {#each displaymessages as message, i}
+    {#each displayMessages as message, i}
       {#if i < logLength}
         <li class={(message.isEven ? "even" : "odd") + " " + message.type}>
           {message}

src/components/ResourceTable/ResourceGroup.svelte

@@ -0,0 +1,48 @@
+<svelte:options immutable />
+
+<script lang="ts">
+  import type { ResourceEntry } from "./ResourceTable.svelte";
+  export let categoryName: string;
+  export let collapsed: boolean;
+  export let resources: ResourceEntry[];
+</script>
+
+<tr on:click class="subhead" tabindex="0" role="button">
+  <td>{collapsed ? "▲" : "▼"}</td>
+  <td colspan="3"><h4>{categoryName}</h4> </td>
+</tr>
+{#if !collapsed}
+  {#each resources as [resourceName, resource], index}
+    <tr class={index % 2 === 0 ? "even" : "odd"}>
+      <td colspan="2">{resourceName}</td>
+      <td>{resource.amount}</td>
+      <td>{Math.round(100 * resource.change) / 100}/s</td>
+    </tr>
+  {/each}
+{/if}
+
+<style lang="scss">
+  tr {
+    &.even {
+      background-color: var(--color-med);
+    }
+    &.odd {
+      background-color: var(--color-light);
+    }
+    &.subhead {
+      cursor: pointer;
+      user-select: none;
+
+      background-color: var(--color-dark);
+
+      border: 1px solid var(--color-lighter);
+
+      > td > h4 {
+        margin: 0.3em;
+      }
+      &:hover > td > h4 {
+        text-shadow: 0 0 8px var(--color-lighter);
+      }
+    }
+  }
+</style>

src/components/ResourceTable/ResourceTable.svelte

@@ -1,4 +1,7 @@
-<script lang="ts">
+<svelte:options immutable={true} />
+
+<script context="module" lang="ts">
+  export type ResourceEntry = [string, typeof TEST_RESOURCES["Shark"]];
   const TEST_RESOURCES = {
     Shark: {
       amount: 100,
@@ -51,14 +54,20 @@
       change: (Math.random() - 0.5) * 30,
     },
   };
+</script>
 
+<script lang="ts">
+  import ResourceGroup from "./ResourceGroup.svelte";
   let collapsed: string[] = [];
-  $: grouped = Object.entries(resourceGroups());
+  $: groups = resourceGroups();
 
-  type Entry = [string, typeof TEST_RESOURCES["Shark"]];
   function resourceGroups() {
-    return Object.entries(TEST_RESOURCES).reduce(
-      (reduced: { [key: string]: Entry[] }, [resourceName, resource]) => {
+    return Object.entries(
+      Object.entries(TEST_RESOURCES).reduce(
+        (
+          reduced: { [key: string]: ResourceEntry[] },
+          [resourceName, resource]
+        ) => {
           if (reduced[resource.category] === undefined) {
             reduced[resource.category] = [];
           }
@@ -70,12 +79,13 @@
           return reduced;
         },
         {}
+      )
     );
   }
 
   function toggleCollapsed(categoryName: string) {
     if (collapsed.includes(categoryName)) {
-      collapsed = collapsed.filter((group) => group !== categoryName);
+      collapsed = collapsed.filter((category) => category !== categoryName);
     } else {
       collapsed = [...collapsed, categoryName];
     }
@@ -91,25 +101,13 @@
       <col style="width: 20%;" />
     </colgroup>
     <tbody>
-      {#each grouped as [categoryName, resources]}
-        <tr
+      {#each groups as [categoryName, resources]}
+        <ResourceGroup
           on:click={() => toggleCollapsed(categoryName)}
-          class="subhead"
-          tabindex="0"
-          role="button"
-        >
-          <td>{collapsed.includes(categoryName) ? "▲" : "▼"}</td>
-          <td colspan="3"><h4>{categoryName}</h4> </td>
-        </tr>
-        {#if !collapsed.includes(categoryName)}
-          {#each resources as [resourceName, resource], index}
-            <tr class={index % 2 === 0 ? "even" : "odd"}>
-              <td colspan="2">{resourceName}</td>
-              <td>{resource.amount}</td>
-              <td>{Math.round(100 * resource.change) / 100}/s</td>
-            </tr>
-          {/each}
-        {/if}
+          {categoryName}
+          {resources}
+          collapsed={collapsed.includes(categoryName)}
+        />
       {/each}
     </tbody>
   </table>
@@ -126,32 +124,6 @@
     > table {
       width: 100%;
       border-collapse: collapse;
-
-      > tbody {
-        > tr {
-          &.even {
-            background-color: var(--color-med);
-          }
-          &.odd {
-            background-color: var(--color-light);
-          }
-          &.subhead {
-            cursor: pointer;
-            user-select: none;
-
-            background-color: var(--color-dark);
-
-            border: 1px solid var(--color-lighter);
-
-            > td > h4 {
-              margin: 0.3em;
-            }
-            &:hover > td > h4 {
-              text-shadow: 0 0 8px var(--color-lighter);
-            }
-          }
-        }
-      }
     }
   }
 </style>

src/components/Wrapper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { SharkGame } from "../shark/SharkGame";
   import Log from "./Log.svelte";
-  import ResourceTable from "./ResourceTable.svelte";
+  import ResourceTable from "./ResourceTable/ResourceTable.svelte";
 </script>
 
 <main>

src/shark/Log.ts

@@ -1,15 +1,26 @@
-import type { Message } from "./Message";
-import { SharkGame } from "./SharkGame";
+import { writable } from "svelte/store";
+
+import { Message, MessageType } from "./Message";
+import { Settings } from "./Settings";
 import { StaticClass } from "./StaticClass";
 
 export class Log extends StaticClass {
-  static #messages: Message[] = [];
-  static get messages(): Message[] {
-    return this.#messages;
-  }
-  static set messages(messages: Message[]) {
-    this.#messages = messages.slice(
-      -Math.max(...SharkGame.Settings.logLength.options)
+  static messages = writable<Message[]>([]);
+
+  static addMessage(
+    message: string,
+    messageType: MessageType = MessageType.message
+  ): void {
+    this.messages.update((oldMessages) =>
+      [...oldMessages, new Message(message, messageType)].slice(
+        -Math.max(...Settings.logLength.options)
+      )
     );
   }
+
+  static reset(): void {
+    Message.even = true;
+    this.messages.set([]);
+    this.addMessage("Log cleared");
+  }
 }