From 1055055090536bf30e81e3cb5ce36d13f8e37f9b Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Thu, 19 Sep 2024 15:41:27 +0300
Subject: [PATCH] Add new front page animation

---
 src/components/FrontPageAnimation.vue         | 164 +++++++++++-------
 src/components/IconComponent.vue              |  14 +-
 src/components/__tests__/LogView.spec.ts      |  13 +-
 .../__snapshots__/LogView.spec.ts.snap        |  25 +--
 4 files changed, 116 insertions(+), 100 deletions(-)

diff --git a/src/components/FrontPageAnimation.vue b/src/components/FrontPageAnimation.vue
index 4d0f07b..7dd32cb 100644
--- a/src/components/FrontPageAnimation.vue
+++ b/src/components/FrontPageAnimation.vue
@@ -1,88 +1,128 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import {getRandomEmojis} from '@/utils/helpers';
+
+const emojis = getRandomEmojis(4);
+</script>
 <template>
-  <div class="chart-background justify-center">
+  <div class="front-page-animation__container" aria-hidden="true">
     <div class="front-page-animation">
-      <div class="front-page-animation__content">
-        <div class="flex">
-          <IconComponent class="front-page-animation__icon" icon="watermelon" size="9rem" />
-          <IconComponent
-            class="front-page-animation__icon"
-            style="animation-delay: -750ms"
-            icon="carrot"
-            size="9rem"
-          />
-          <IconComponent
-            class="front-page-animation__icon"
-            style="animation-delay: -500ms"
-            icon="pear"
-            size="9rem"
-          />
-          <IconComponent
-            class="front-page-animation__icon"
-            style="animation-delay: -250ms"
-            icon="apple"
-            size="9rem"
-          />
-        </div>
-        <div class="flex">
-          <IconComponent class="front-page-animation__icon" icon="watermelon" size="9rem" />
-          <IconComponent
-            class="front-page-animation__icon"
-            style="animation-delay: -750ms"
-            icon="carrot"
-            size="9rem"
-          />
-          <IconComponent
-            class="front-page-animation__icon"
-            style="animation-delay: -500ms"
-            icon="pear"
-            size="9rem"
-          />
-          <IconComponent
-            class="front-page-animation__icon"
-            style="animation-delay: -250ms"
-            icon="apple"
-            size="9rem"
-          />
-        </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[0] }}</span>
+        <span class="front-page-animation__shadow"></span>
+      </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[1] }}</span>
+        <span class="front-page-animation__shadow"></span>
+      </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[2] }}</span>
+        <span class="front-page-animation__shadow"></span>
+      </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[3] }}</span>
+        <span class="front-page-animation__shadow"></span>
+      </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[0] }}</span>
+        <span class="front-page-animation__shadow"></span>
+      </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[1] }}</span>
+        <span class="front-page-animation__shadow"></span>
+      </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[2] }}</span>
+        <span class="front-page-animation__shadow"></span>
+      </div>
+      <div class="front-page-animation__icon-container">
+        <span class="front-page-animation__icon">{{ emojis[3] }}</span>
+        <span class="front-page-animation__shadow"></span>
       </div>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
-.front-page-animation {
-  @apply w-full overflow-hidden;
+.front-page-animation__container {
+  @apply h-full;
   mask-image: linear-gradient(to right, transparent 5%, black 30%, black 70%, transparent 95%);
 }
 
-.front-page-animation__content {
-  @apply flex;
-  width: calc(8 * 9rem);
-  animation: marquee 10s linear infinite;
+.front-page-animation {
+  @apply flex w-fit mt-28;
+  animation:
+    enter 3.5s linear,
+    marquee 4s linear 3.5s infinite;
+}
+
+.front-page-animation__icon-container {
+  @apply relative;
+  @apply flex flex-col items-center;
+}
+
+@for $i from 1 through 8 {
+  .front-page-animation__icon-container:nth-child(#{$i}) span {
+    animation-delay: $i * (1s / 4);
+  }
 }
 
 .front-page-animation__icon {
-  animation: jitter 1000ms ease-out infinite;
+  @apply text-9xl w-[175px] static z-10;
+  @apply flex items-center justify-center;
+  animation: bounce 0.5s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
 }
 
-@keyframes marquee {
-  from {
-    transform: translateX(0);
+.front-page-animation__shadow {
+  @apply absolute h-5 w-28 opacity-0 -bottom-24;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 1);
+  animation: shadow 0.5s cubic-bezier(0.5, 0.05, 1, 0.5) infinite alternate;
+}
+
+@keyframes shadow {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+    filter: blur(6px);
   }
-  to {
-    transform: translateX(-50%);
+  80% {
+    opacity: 0.2;
+    transform: scale(100%);
+    filter: blur(2px);
+  }
+  100% {
+    opacity: 0.2;
+    transform: scale(110%);
+    filter: blur(1px);
   }
 }
 
-@keyframes jitter {
+@keyframes bounce {
   0% {
-    transform: translateY(0);
+    transform: translate3d(0, 0px, 0) scaleX(1) scaleY(1);
   }
-  40% {
-    transform: translateY(0.75rem);
+  90% {
+    transform: translate3d(0, 100px, 0) scaleX(1) scaleY(1);
   }
   100% {
-    transform: translateY(0);
+    transform: translate3d(0, 100px, 0) scaleX(1.2) scaleY(0.7);
+  }
+}
+
+@keyframes enter {
+  from {
+    margin-left: 100%;
+  }
+  to {
+    margin-left: 0;
+  }
+}
+
+@keyframes marquee {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(-50%, 0, 0);
   }
 }
 </style>
diff --git a/src/components/IconComponent.vue b/src/components/IconComponent.vue
index 3e00424..cf3672a 100644
--- a/src/components/IconComponent.vue
+++ b/src/components/IconComponent.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
 import {
-  mdiApple,
-  mdiCarrot,
   mdiChartBar,
   mdiCheckCircleOutline,
   mdiChevronDown,
   mdiClose,
   mdiCogOutline,
   mdiEarth,
-  mdiFruitPear,
-  mdiFruitWatermelon,
   mdiMinus,
   mdiPlus,
   mdiRadioboxBlank,
@@ -18,8 +14,6 @@ import {
 } from '@mdi/js';
 
 export type IconString =
-  | 'apple'
-  | 'carrot'
   | 'chart'
   | 'check'
   | 'chevron'
@@ -27,12 +21,10 @@ export type IconString =
   | 'cog'
   | 'earth'
   | 'minus'
-  | 'pear'
   | 'plus'
   | 'radioboxBlank'
   | 'radioboxMarked'
-  | 'trashCan'
-  | 'watermelon';
+  | 'trashCan';
 
 withDefaults(
   defineProps<{
@@ -45,8 +37,6 @@ withDefaults(
 );
 
 const icons = {
-  apple: mdiApple,
-  carrot: mdiCarrot,
   chart: mdiChartBar,
   check: mdiCheckCircleOutline,
   chevron: mdiChevronDown,
@@ -54,12 +44,10 @@ const icons = {
   cog: mdiCogOutline,
   earth: mdiEarth,
   minus: mdiMinus,
-  pear: mdiFruitPear,
   plus: mdiPlus,
   radioboxBlank: mdiRadioboxBlank,
   radioboxMarked: mdiRadioboxMarked,
   trashCan: mdiTrashCan,
-  watermelon: mdiFruitWatermelon,
 };
 </script>
 <template>
diff --git a/src/components/__tests__/LogView.spec.ts b/src/components/__tests__/LogView.spec.ts
index 3ebbe33..416e979 100644
--- a/src/components/__tests__/LogView.spec.ts
+++ b/src/components/__tests__/LogView.spec.ts
@@ -14,10 +14,21 @@ describe('LogView', () => {
   });
 
   it('renders', () => {
-    const wrapper = mount(LogView);
+    const wrapper = mount(LogView, {
+      global: {
+        stubs: {
+          FrontPageAnimation: true,
+        },
+      },
+    });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
+  it('renders with animation', () => {
+    const wrapper = mount(LogView);
+    expect(wrapper).toBeTruthy();
+  });
+
   it('renders with data', () => {
     activityStore.startDate = lastWeek;
     activityStore.weeks.push(
diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
index f57be66..649d8b7 100644
--- a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -6,30 +6,7 @@ exports[`LogView > renders 1`] = `
     </svg></button>
   <!---->
 </div>
-<div data-v-706d8f88="" class="chart-background justify-center log-view__chart">
-  <div data-v-706d8f88="" class="front-page-animation">
-    <div data-v-706d8f88="" class="front-page-animation__content">
-      <div data-v-706d8f88="" class="flex"><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem;" class="front-page-animation__icon">
-          <path d="M16.4 16.4C19.8 13 19.8 7.5 16.4 4.2L4.2 16.4C7.5 19.8 13 19.8 16.4 16.4M16 7C16.6 7 17 7.4 17 8C17 8.6 16.6 9 16 9S15 8.6 15 8C15 7.4 15.4 7 16 7M16 11C16.6 11 17 11.4 17 12C17 12.6 16.6 13 16 13S15 12.6 15 12C15 11.4 15.4 11 16 11M12 11C12.6 11 13 11.4 13 12C13 12.6 12.6 13 12 13S11 12.6 11 12C11 11.4 11.4 11 12 11M12 15C12.6 15 13 15.4 13 16C13 16.6 12.6 17 12 17S11 16.6 11 16C11 15.4 11.4 15 12 15M8 17C7.4 17 7 16.6 7 16C7 15.4 7.4 15 8 15S9 15.4 9 16C9 16.6 8.6 17 8 17M18.6 18.6C14 23.2 6.6 23.2 2 18.6L3.4 17.2C7.2 21 13.3 21 17.1 17.2C20.9 13.4 20.9 7.3 17.1 3.5L18.6 2C23.1 6.6 23.1 14 18.6 18.6Z" class="transition-all"></path>
-        </svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -750ms;" class="front-page-animation__icon">
-          <path d="M16,10L15.8,11H13.5A0.5,0.5 0 0,0 13,11.5A0.5,0.5 0 0,0 13.5,12H15.6L14.6,17H12.5A0.5,0.5 0 0,0 12,17.5A0.5,0.5 0 0,0 12.5,18H14.4L14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20L9,15H10.5A0.5,0.5 0 0,0 11,14.5A0.5,0.5 0 0,0 10.5,14H8.8L8,10C8,8.8 8.93,7.77 10.29,7.29L8.9,5.28C8.59,4.82 8.7,4.2 9.16,3.89C9.61,3.57 10.23,3.69 10.55,4.14L11,4.8V3A1,1 0 0,1 12,2A1,1 0 0,1 13,3V5.28L14.5,3.54C14.83,3.12 15.47,3.07 15.89,3.43C16.31,3.78 16.36,4.41 16,4.84L13.87,7.35C15.14,7.85 16,8.85 16,10Z" class="transition-all"></path>
-        </svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -500ms;" class="front-page-animation__icon">
-          <path d="M18 16C18 19.31 15.31 22 12 22C8.69 22 6 19.31 6 16C6 13 8 13 8 10C8 8.56 8.75 7.22 10 6.5C10.4 6.27 10.82 6.12 11.25 6.04V5C11.25 4.63 11.17 4.42 11.03 4.28C10.9 4.14 10.63 4 10 4V2.5C10.88 2.5 11.6 2.73 12.09 3.22C12.58 3.71 12.75 4.38 12.75 5V6.04C13.18 6.12 13.61 6.27 14 6.5C15.25 7.22 16 8.56 16 10C16 13 18 13 18 16Z" class="transition-all"></path>
-        </svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -250ms;" class="front-page-animation__icon">
-          <path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" class="transition-all"></path>
-        </svg></div>
-      <div data-v-706d8f88="" class="flex"><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem;" class="front-page-animation__icon">
-          <path d="M16.4 16.4C19.8 13 19.8 7.5 16.4 4.2L4.2 16.4C7.5 19.8 13 19.8 16.4 16.4M16 7C16.6 7 17 7.4 17 8C17 8.6 16.6 9 16 9S15 8.6 15 8C15 7.4 15.4 7 16 7M16 11C16.6 11 17 11.4 17 12C17 12.6 16.6 13 16 13S15 12.6 15 12C15 11.4 15.4 11 16 11M12 11C12.6 11 13 11.4 13 12C13 12.6 12.6 13 12 13S11 12.6 11 12C11 11.4 11.4 11 12 11M12 15C12.6 15 13 15.4 13 16C13 16.6 12.6 17 12 17S11 16.6 11 16C11 15.4 11.4 15 12 15M8 17C7.4 17 7 16.6 7 16C7 15.4 7.4 15 8 15S9 15.4 9 16C9 16.6 8.6 17 8 17M18.6 18.6C14 23.2 6.6 23.2 2 18.6L3.4 17.2C7.2 21 13.3 21 17.1 17.2C20.9 13.4 20.9 7.3 17.1 3.5L18.6 2C23.1 6.6 23.1 14 18.6 18.6Z" class="transition-all"></path>
-        </svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -750ms;" class="front-page-animation__icon">
-          <path d="M16,10L15.8,11H13.5A0.5,0.5 0 0,0 13,11.5A0.5,0.5 0 0,0 13.5,12H15.6L14.6,17H12.5A0.5,0.5 0 0,0 12,17.5A0.5,0.5 0 0,0 12.5,18H14.4L14,20A2,2 0 0,1 12,22A2,2 0 0,1 10,20L9,15H10.5A0.5,0.5 0 0,0 11,14.5A0.5,0.5 0 0,0 10.5,14H8.8L8,10C8,8.8 8.93,7.77 10.29,7.29L8.9,5.28C8.59,4.82 8.7,4.2 9.16,3.89C9.61,3.57 10.23,3.69 10.55,4.14L11,4.8V3A1,1 0 0,1 12,2A1,1 0 0,1 13,3V5.28L14.5,3.54C14.83,3.12 15.47,3.07 15.89,3.43C16.31,3.78 16.36,4.41 16,4.84L13.87,7.35C15.14,7.85 16,8.85 16,10Z" class="transition-all"></path>
-        </svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -500ms;" class="front-page-animation__icon">
-          <path d="M18 16C18 19.31 15.31 22 12 22C8.69 22 6 19.31 6 16C6 13 8 13 8 10C8 8.56 8.75 7.22 10 6.5C10.4 6.27 10.82 6.12 11.25 6.04V5C11.25 4.63 11.17 4.42 11.03 4.28C10.9 4.14 10.63 4 10 4V2.5C10.88 2.5 11.6 2.73 12.09 3.22C12.58 3.71 12.75 4.38 12.75 5V6.04C13.18 6.12 13.61 6.27 14 6.5C15.25 7.22 16 8.56 16 10C16 13 18 13 18 16Z" class="transition-all"></path>
-        </svg><svg data-v-706d8f88="" viewBox="0 0 24 24" aria-hidden="true" style="width: 9rem; height: 9rem; animation-delay: -250ms;" class="front-page-animation__icon">
-          <path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" class="transition-all"></path>
-        </svg></div>
-    </div>
-  </div>
-</div>
+<front-page-animation-stub class="log-view__chart"></front-page-animation-stub>
 <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container"></transition-group-stub>"
 `;