From 13b929472e742ad335efee2f84d8a1e6e3945a40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Babi=C4=8D?= <peter@peterbabic.dev>
Date: Mon, 4 Jan 2021 19:54:10 +0100
Subject: [PATCH] insert crossfade effect

---
 src/App.svelte | 76 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 52 insertions(+), 24 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 7632d16..8f0a96f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,9 +1,13 @@
-<script context="module">
-  import Graph from "./Graph.js"
-</script>
-
 <script>
+  import Graph from "./Graph.js"
   import { onMount } from "svelte"
+  import { crossfade, scale } from "svelte/transition"
+
+  const [send, receive] = crossfade({
+    duration: 400,
+    fallback: scale,
+  })
+
   const pole = 0
   const hole = 1
   const pick = 2
@@ -144,15 +148,6 @@
 </script>
 
 <style>
-  .triangle {
-    width: 600px;
-    height: 450px;
-    display: grid;
-    grid-template-columns: repeat(9, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-  }
   .div0 {
     grid-area: 5 / 1 / 6 / 2;
   }
@@ -199,27 +194,41 @@
     grid-area: 1 / 5 / 2 / 6;
   }
 
+  .triangle {
+    width: 600px;
+    height: 450px;
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+
   .circle {
-    width: 30px;
-    height: 30px;
+    width: 50px;
+    height: 50px;
     clip-path: circle();
     text-align: center;
     color: white;
   }
 
   .red {
+    cursor: pointer;
     background-color: red;
   }
 
   .gray {
+    cursor: default;
     background-color: gray;
   }
 
   .green {
+    cursor: pointer;
     background-color: green;
   }
 
   .blue {
+    cursor: pointer;
     background-color: blue;
   }
 
@@ -243,15 +252,34 @@
   </div>
   <div class="triangle">
     {#each circles as _, i}
-      <div
-        class="circle div{i}"
-        class:gray={circles[i] == hole}
-        class:red={circles[i] == pole}
-        class:green={circles[i] == pick}
-        class:blue={circles[i] == dest}
-        on:click={() => change(i)}>
-        {i}
-      </div>
+      {#if circles[i] == hole}
+        <div
+          in:receive={{ key: i }}
+          out:send={{ key: i }}
+          class="circle div{i} gray"
+          on:click={() => change(i)} />
+      {/if}
+      {#if circles[i] == pole}
+        <div
+          in:receive={{ key: i }}
+          out:send={{ key: i }}
+          class="circle div{i} red"
+          on:click={() => change(i)} />
+      {/if}
+      {#if circles[i] == pick}
+        <div
+          in:receive={{ key: i }}
+          out:send={{ key: i }}
+          class="circle div{i} green"
+          on:click={() => change(i)} />
+      {/if}
+      {#if circles[i] == dest}
+        <div
+          in:receive={{ key: i }}
+          out:send={{ key: i }}
+          class="circle div{i} blue"
+          on:click={() => change(i)} />
+      {/if}
     {/each}
   </div>
 </main>