Some love for homeactions (icons)

src/components/Tabs/Home.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
 
-  import type { HomeAction } from "../../shark/data/HomeActions";
+  import type { HomeAction, HomeActions } from "../../shark/data/HomeActions";
-  import { HomeActions } from "../../shark/data/HomeActions";
-  import { Resources } from "../../shark/data/Resources";
   import type { AddMessageEvent } from "../../shark/Message";
 
+  import { Resources } from "../../shark/data/Resources";
+
+  export let homeActions: ReturnType<typeof HomeActions["getActionTable"]>;
+  export let showIcons: boolean;
+
   const dispatch = createEventDispatcher<{ addMessage: AddMessageEvent }>();
 
   function homeActionClick(homeAction: HomeAction) {
@@ -28,10 +31,21 @@
 </script>
 
 <div>
-  {#each Object.entries(HomeActions.getActionTable()) as [homeActionId, homeAction]}
+  {#each Object.entries(homeActions) as [homeActionId, homeAction]}
-    <button on:click={() => homeActionClick(homeAction)} id={homeActionId}>
+    {#each Array(50).fill(homeAction) as homeActionClone}
-      {homeAction.name}
+      <button class:no-icons={!showIcons} on:click={() => homeActionClick(homeActionClone)} id={homeActionId}>
-    </button>
+        {#if showIcons}
+          <img
+            width="50"
+            height="50"
+            class="homeaction-icon"
+            alt="A decorative icon representing the home action"
+            src={"img/homeActions/" + homeAction.image}
+          />
+        {/if}
+        {homeAction.name}
+      </button>
+    {/each}
   {/each}
 </div>
 
@@ -39,5 +53,24 @@
   div {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+
+    > button {
+      display: flex;
+      flex-direction: column;
+
+      align-items: center;
+      justify-content: center;
+
+      font-size: 1em;
+      width: 8em;
+
+      &:not(.no-icons) {
+        height: 6em;
+      }
+      &.no-icons {
+        height: calc(6em - 50px);
+      }
+    }
   }
 </style>

src/components/Wrapper.svelte

@@ -20,8 +20,10 @@
   }
 
   let logLength: number;
+  let showIcons: boolean;
   game.Settings.settings.subscribe((settings) => {
     logLength = settings.layout.logLength.current;
+    showIcons = settings.appearance.showIcons.current;
   });
 </script>
 
@@ -50,12 +52,23 @@
       <TabSelector tabs={game.TabHandler.AllTabs} bind:selectedTab={game.TabHandler.currentTab} />
     </div>
     <div id="tab-content">
-      <svelte:component
+      {#if game.TabHandler.currentTab === game.TabHandler.AllTabs.Home}
-        this={game.TabHandler.currentTab}
+        <svelte:component
-        on:addMessage={handleAddMessage}
+          this={game.TabHandler.AllTabs.Home}
-        on:openModal
+          on:addMessage={handleAddMessage}
-        on:closeModal
+          {showIcons}
-      />
+          homeActions={game.Data.HomeActions.getActionTable()}
+        />
+      {:else if game.TabHandler.currentTab === game.TabHandler.AllTabs.Lab}
+        <svelte:component this={game.TabHandler.AllTabs.Lab} />
+      {:else}
+        <svelte:component
+          this={game.TabHandler.currentTab}
+          on:addMessage={handleAddMessage}
+          on:openModal
+          on:closeModal
+        />
+      {/if}
     </div>
   </div>
 </main>

src/shark/Settings.ts

@@ -28,7 +28,14 @@ export class Settings extends StaticClass {
         default: "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"],
+        options: ["abandoned", "chaotic", "frigid", "haven", "marine", "shrouded", "tempestuous", "violent"] as const,
+      },
+      showIcons: {
+        current: true,
+        default: true as const,
+        name: "Show icons" as const,
+        description: "Whether to show decorative icons in various places" as const,
+        options: [true, false] as const,
       },
     },
   };

src/shark/SharkGame.ts

@@ -5,6 +5,8 @@ import { Settings } from "./Settings";
 import { StaticClass } from "./StaticClass";
 import { TabHandler } from "./TabHandler";
 
+import { HomeActions } from "./data/HomeActions";
+
 export class SharkGame extends StaticClass {
   static readonly #GAME_NAMES = [
     "Five Seconds A Shark",
@@ -61,6 +63,9 @@ export class SharkGame extends StaticClass {
   static readonly Resources = Resources;
   static readonly TabHandler = TabHandler;
   static readonly SaveHandler = SaveHandler;
+  static readonly Data = Object.seal({
+    HomeActions,
+  });
 
   static init(): void {
     Log.init();

src/shark/data/HomeActions.ts

@@ -7,6 +7,7 @@ export type HomeAction = {
   };
   outcomes: string[];
   multiOutcomes?: string[];
+  image?: string;
 };
 
 export class HomeActions extends StaticClass {
@@ -16,7 +17,8 @@ export class HomeActions extends StaticClass {
 
   static readonly actionTable = Object.seal({
     catchFish: {
-      name: "Catch fish",
+      image: "catchFish.png",
+      name: "Steal fish",
       effect: {
         resource: {
           fish: 1,
@@ -66,7 +68,8 @@ export class HomeActions extends StaticClass {
       ],
     },
     catchShark: {
-      name: "Catch shark",
+      image: "getShark.png",
+      name: "Kidnap shark",
       effect: {
         resource: {
           shark: 1,