Add Resource Table

src/components/ResourceTable.svelte

@@ -1,8 +1,157 @@
-<div><pre>Resource Table goes here</pre></div>
+<script lang="ts">
+  const TEST_RESOURCES = {
+    Shark: {
+      amount: 100,
+      category: "Frenzy",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Ray: {
+      amount: 170,
+      category: "Frenzy",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand1: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand2: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand3: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand4: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand5: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand6: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+    Sand7: {
+      amount: 12,
+      category: "Garbage",
+      change: (Math.random() - 0.5) * 30,
+    },
+  };
+
+  let collapsed: string[] = [];
+  $: grouped = Object.entries(resourceGroups());
+
+  type Entry = [string, typeof TEST_RESOURCES["Shark"]];
+  function resourceGroups() {
+    return Object.entries(TEST_RESOURCES).reduce(
+      (reduced: { [key: string]: Entry[] }, [resourceName, resource]) => {
+        if (reduced[resource.category] === undefined) {
+          reduced[resource.category] = [];
+        }
+        reduced[resource.category] = [
+          ...reduced[resource.category],
+          [resourceName, resource],
+        ];
+
+        return reduced;
+      },
+      {}
+    );
+  }
+
+  function toggleCollapsed(categoryName: string) {
+    if (collapsed.includes(categoryName)) {
+      collapsed = collapsed.filter((group) => group !== categoryName);
+    } else {
+      collapsed = [...collapsed, categoryName];
+    }
+  }
+</script>
+
+<div>
+  <table>
+    <colgroup>
+      <col style="width: 10%;" />
+      <col style="width: 40%;" />
+      <col style="width: 40%;" />
+      <col style="width: 20%;" />
+    </colgroup>
+    <tbody>
+      {#each grouped as [categoryName, resources]}
+        <tr
+          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}
+      {/each}
+    </tbody>
+  </table>
+</div>
 
 <style lang="scss">
   div {
     height: 50%;
     width: 100%;
+    overflow-y: scroll;
+
+    background-color: var(--color-darker);
+
+    > 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>