Add some transitions

src/components/Log.svelte

@@ -1,7 +1,9 @@
 <svelte:options immutable />
 
 <script lang="ts">
+  import { expoOut } from "svelte/easing";
   import type { Writable } from "svelte/store";
+  import { slide } from "svelte/transition";
 
   import { Message, MessageType } from "../shark/Message";
   import { SharkGame } from "../shark/SharkGame";
@@ -49,9 +51,12 @@
     }}>Clear log</button
   >
   <ol>
-    {#each displayMessages as message, i}
+    {#each displayMessages as message, i (message)}
       {#if i < logLength}
-        <li class={(message.isEven ? "even" : "odd") + " " + message.type}>
+        <li
+          transition:slide={{ easing: expoOut }}
+          class={(message.isEven ? "even" : "odd") + " " + message.type}
+        >
           {message}
         </li>
       {/if}

src/components/ResourceTable/ResourceGroup.svelte

@@ -1,6 +1,8 @@
 <svelte:options immutable />
 
 <script lang="ts">
+  import { fade } from "svelte/transition";
+
   import type { Resource } from "../../shark/data/Resources";
 
   export let categoryName: string;
@@ -14,10 +16,10 @@
 </tr>
 {#if !collapsed}
   {#each resources as [resourceName, resource], index}
-    <tr class={index % 2 === 0 ? "even" : "odd"}>
+    <tr transition:fade class={index % 2 === 0 ? "even" : "odd"}>
       <td colspan="2">{resourceName}</td>
       <td>{resource.amount}</td>
-      <td>{Math.round(100 * resource.change) / 100}/s</td>
+      <td>{Math.round(100 * (resource.change + Number.EPSILON)) / 100}/s</td>
     </tr>
   {/each}
 {/if}