feat: play around with confetti animation

Author: bencodezen

package.json

@@ -8,9 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "canvas-confetti": "^1.3.1",
     "core-js": "^3.6.5",
     "lodash": "^4.17.20",
-    "vue": "^3.0.0-0"
+    "lottie-web": "^5.7.3",
+    "vue": "^3.0.0-0",
+    "vue-confetti": "^2.2.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

public/confetti.json

@@ -1,17 +1,17 @@
 <template>
   <div id="app">
     <h1>Hello!</h1>
-    <CardShuffle />
+    <Congratulations />
   </div>
 </template>
 
 <script>
-import CardShuffle from './components/CardShuffle'
+import Congratulations from './components/Congratulations'
 
 export default {
   name: 'App',
   components: {
-    CardShuffle
+    Congratulations
   },
   data() {
     return {

src/App.vue

@@ -0,0 +1,44 @@
+<script>
+import confetti from 'canvas-confetti'
+
+export default {
+  methods: {
+    fireConfetti() {
+      var end = Date.now() + 3 * 1000
+
+      // go Buckeyes!
+      var colors = ['#34495E', '#41B883']
+
+      ;(function frame() {
+        confetti({
+          particleCount: 2,
+          angle: 60,
+          spread: 100,
+          origin: { x: 0 },
+          colors: colors
+        })
+        confetti({
+          particleCount: 2,
+          angle: 120,
+          spread: 100,
+          origin: { x: 1 },
+          colors: colors
+        })
+
+        if (Date.now() < end) {
+          requestAnimationFrame(frame)
+        }
+      })()
+    }
+  }
+}
+</script>
+
+<template>
+  <div id="confetti">
+    <h1>Congratulations</h1>
+    <button @click="fireConfetti">Fire Confetti</button>
+  </div>
+</template>
+
+<style></style>