From 721d788a5c65649a7e5941dbc8873474011f9eb4 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Fri, 28 Oct 2022 15:16:04 +0200
Subject: [PATCH] Conditional animations

---
 gui/dashboard/app.svelte      | 2 +-
 gui/dashboard/lib.js          | 3 ++-
 gui/dashboard/settings.svelte | 5 +++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/gui/dashboard/app.svelte b/gui/dashboard/app.svelte
index 7feaf43..d4e1bb6 100644
--- a/gui/dashboard/app.svelte
+++ b/gui/dashboard/app.svelte
@@ -110,7 +110,7 @@
         <div
           in:receive={{ key: tile.id }}
           out:send={{ key: tile.id }}
-          animate:flip
+          animate:flip={{ duration: $settings.animate ? (d => Math.sqrt(d) * 120) : 0 }}
         >
           <TileRawValue {...tileProps(tile)} />
         </div>
diff --git a/gui/dashboard/lib.js b/gui/dashboard/lib.js
index 3ca09da..12f1d3b 100644
--- a/gui/dashboard/lib.js
+++ b/gui/dashboard/lib.js
@@ -8,6 +8,7 @@ function createSettingsStore() {
     cols: 4,
     rows: 3,
     fontSize: 1,
+    animate: true,
   };
 
   const s = writable(defaults);
@@ -47,7 +48,7 @@ export const shuffle = crossfade({
     const transform = style.transform === 'none' ? '' : style.transform;
 
     return {
-      duration: 300,
+      duration: get(settings).animate ? 300 : 0,
       easing: quintOut,
       css: t => `
         transform: ${transform} scale(${t});
diff --git a/gui/dashboard/settings.svelte b/gui/dashboard/settings.svelte
index a770dfd..14a927a 100644
--- a/gui/dashboard/settings.svelte
+++ b/gui/dashboard/settings.svelte
@@ -42,6 +42,11 @@
     </select>
   </label>
 
+  <label>
+    Enable animations
+    <input type="checkbox" bind:checked={$settings.animate} />
+  </label>
+
   <label>
     Columns
     <input type="number" bind:value={$settings.cols} width="10" />