From af126607bc0d4823fc8715f9af0acf51bee0f801 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 May 2023 22:43:15 +0200
Subject: [PATCH] chore(docs): remove animation and confetti

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/components/home/Banner.vue      |   7 +-
 docs/components/home/flows/Intro.vue | 222 +--------------------------
 docs/package.json                    |   2 -
 3 files changed, 7 insertions(+), 224 deletions(-)

diff --git a/docs/components/home/Banner.vue b/docs/components/home/Banner.vue
index dbc75357..468c2d0f 100644
--- a/docs/components/home/Banner.vue
+++ b/docs/components/home/Banner.vue
@@ -3,9 +3,9 @@ import { $fetch } from 'ohmyfetch'
 import Star from '~icons/carbon/star'
 import Download from '~icons/carbon/download'
 
-const starGazersCount = ref(1000)
+const starGazersCount = ref(0)
 
-const downloadCount = ref(10000)
+const downloadCount = ref(0)
 
 const starGazersCountTransitioned = useTransition(starGazersCount, {
   duration: 1000,
@@ -21,6 +21,9 @@ const downloadCountTransitioned = useTransition(downloadCount, {
   },
 })
 
+starGazersCount.value = 3000
+downloadCount.value = 50000
+
 Promise.all([
   $fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100').then((data) => {
     starGazersCount.value = data.stargazers_count
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 0d4b9276..e56c8b72 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -1,18 +1,13 @@
 <script lang="ts" setup>
 import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import confetti from 'canvas-confetti'
-import colors from 'windicss/colors'
 import { Background } from '@vue-flow/background'
-import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const dark = ref(false)
 
-const animatedBackground = ref(false)
-
 onMounted(() => {
   const html = document.getElementsByTagName('html')![0]
 
@@ -53,7 +48,7 @@ const initialEdges = [
     style: { strokeWidth: 4, stroke: '#0ea5e9' },
   },
 ]
-const { onNodeClick, getNodes, findNode, setEdges, updateNodeInternals, dimensions, onNodesInitialized } = useVueFlow({
+const { getNodes, findNode, setEdges, updateNodeInternals, dimensions, onNodesInitialized } = useVueFlow({
   nodes: [
     { id: 'intro', type: 'box', position: { x: 0, y: 0 } },
     { id: 'examples', type: 'box', position: { x: -50, y: 400 } },
@@ -70,56 +65,6 @@ const { onNodeClick, getNodes, findNode, setEdges, updateNodeInternals, dimensio
   elevateEdgesOnSelect: true,
 })
 
-const clickInterval = ref()
-const clicks = ref(0)
-const disabled = ref(false)
-
-const confettiColors = Object.values(colors).flatMap((color) => {
-  if (typeof color === 'string') {
-    return color
-  } else {
-    return Object.values(color).flatMap((c) => c)
-  }
-})
-
-onNodeClick(async ({ node }) => {
-  if (node.id === 'intro') {
-    if (disabled.value) {
-      return
-    }
-
-    animatedBackground.value = !animatedBackground.value
-
-    if (clickInterval.value) {
-      clearInterval(clickInterval.value)
-    }
-
-    clickInterval.value = setInterval(() => {
-      clearInterval(clickInterval.value)
-      clicks.value = 0
-    }, 1000)
-
-    clicks.value++
-    if (clicks.value < 10) {
-      confetti({
-        startVelocity: 25,
-        spread: 360,
-        angle: 270,
-        origin: { y: 0.1 },
-        colors: confettiColors,
-      })
-    } else if (clicks.value < 20) {
-      await cheer(['#10b981', dark.value ? '#ffffff' : '#000000'])
-    } else if (clicks.value === 20) {
-      disabled.value = true
-      await fireworks(confettiColors)
-      disabled.value = false
-    } else {
-      clicks.value = 0
-    }
-  }
-})
-
 onNodesInitialized(setElements)
 
 const el = templateRef<HTMLDivElement>('el', null)
@@ -237,82 +182,11 @@ function scrollTo() {
     el.scrollIntoView({ behavior: 'smooth' })
   }
 }
-
-const animationClassNames = ['checker-gb', 'checker-op', 'checker-yg', 'checker-ss']
-
-function shuffle(a: any[]) {
-  for (let i = a.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1))
-    ;[a[i], a[j]] = [a[j], a[i]]
-  }
-  return a
-}
-
-function createAnimationDurations() {
-  return animationClassNames.map((className) => {
-    const duration = 5 + Math.random() * 5
-
-    return {
-      className,
-      duration,
-    }
-  })
-}
-
-const animations = ref<{ className: string; duration: number }[]>(shuffle(createAnimationDurations()))
 </script>
 
 <template>
   <VueFlow ref="el">
-    <XyzTransition xyz="fade down ease-out-back duration-10" mode="out-in">
-      <Background v-if="animatedBackground">
-        <template #pattern-container="{ id }">
-          <pattern :id="id" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
-            <rect
-              :class="animations[0].className"
-              :style="{ '--animation-duration': `${animations[0].duration}s` }"
-              x="0"
-              y="0"
-              width="50"
-              height="50"
-            />
-            <rect
-              :class="animations[1].className"
-              :style="{ '--animation-duration': `${animations[1].duration}s` }"
-              x="0"
-              y="100"
-              width="50"
-              height="50"
-            />
-            <rect
-              :class="animations[2].className"
-              :style="{ '--animation-duration': `${animations[2].duration}s` }"
-              x="100"
-              y="0"
-              width="50"
-              height="50"
-            />
-            <rect
-              :class="animations[3].className"
-              :style="{ '--animation-duration': `${animations[3].duration}s` }"
-              x="100"
-              y="100"
-              width="50"
-              height="50"
-            />
-          </pattern>
-        </template>
-      </Background>
-    </XyzTransition>
-    <XyzTransition xyz="fade down ease-out-back duration-20" mode="out-in">
-      <Background
-        v-if="!animatedBackground"
-        variant="lines"
-        :pattern-color="dark ? '#ffffff' : '#000000'"
-        :size="0.7"
-        :gap="100"
-      />
-    </XyzTransition>
+    <Background variant="lines" :pattern-color="dark ? '#ffffff' : '#000000'" :size="0.7" :gap="100" />
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">
@@ -353,98 +227,6 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 </template>
 
 <style>
-.checker-gb {
-  animation: fill-green-blue var(--animation-duration) alternate infinite;
-}
-
-.checker-gb path {
-  animation: fill-green-blue var(--animation-duration) alternate infinite;
-}
-
-.checker-op {
-  animation: fill-orange-purple var(--animation-duration) alternate infinite;
-}
-
-.checker-op path {
-  animation: fill-orange-purple var(--animation-duration) alternate infinite;
-}
-
-.checker-yg {
-  animation: fill-yellow-green var(--animation-duration) alternate infinite;
-}
-
-.checker-yg path {
-  animation: fill-yellow-green var(--animation-duration) alternate infinite;
-}
-
-.checker-ss {
-  animation: fill-sky-red var(--animation-duration) alternate infinite;
-}
-
-.checker-ss path {
-  animation: fill-sky-red var(--animation-duration) alternate infinite;
-}
-
-@keyframes fill-green-blue {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-green-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-blue-500/50;
-  }
-}
-
-@keyframes fill-orange-purple {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-orange-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-purple-500/50;
-  }
-}
-
-@keyframes fill-yellow-green {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-yellow-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-green-500/50;
-  }
-}
-
-@keyframes fill-sky-red {
-  0% {
-    @apply fill-transparent;
-  }
-  35% {
-    @apply fill-sky-500/50;
-  }
-  65% {
-    @apply fill-transparent;
-  }
-  100% {
-    @apply fill-red-500/50;
-  }
-}
-
 .intro {
   @apply cursor-pointer
   bg-green-500
diff --git a/docs/package.json b/docs/package.json
index 8d44038f..3ad5c115 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -24,7 +24,6 @@
     "@vue-flow/node-toolbar": "workspace:*",
     "@vue/repl": "1.4.0",
     "blobity": "^0.2.3",
-    "canvas-confetti": "^1.6.0",
     "vue": "3.2.47",
     "web-vitals": "^3.3.1"
   },
@@ -32,7 +31,6 @@
     "@iconify/json": "^2.2.52",
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@types/canvas-confetti": "^1.6.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@windicss/plugin-scrollbar": "^1.2.3",
     "dotenv": "^16.0.3",