From bdccc93bf97cbc84be38f637774071df93bdc3d9 Mon Sep 17 00:00:00 2001
From: Tobias Berger <tobi.berger13@gmail.com>
Date: Tue, 28 Sep 2021 12:24:58 +0200
Subject: [PATCH] Add some transitions

---
 src/components/Log.svelte                         | 9 +++++++--
 src/components/ResourceTable/ResourceGroup.svelte | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Log.svelte b/src/components/Log.svelte
index 0ccc11e..68e2cf3 100644
--- a/src/components/Log.svelte
+++ b/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}
diff --git a/src/components/ResourceTable/ResourceGroup.svelte b/src/components/ResourceTable/ResourceGroup.svelte
index c7d9853..a012cda 100644
--- a/src/components/ResourceTable/ResourceGroup.svelte
+++ b/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}