feature: add confetti to win condition

Author: bencodezen

js/package.json

@@ -9,7 +9,7 @@
     "dev": "yarn serve"
   },
   "dependencies": {
-    "canvas-confetti": "^1.3.1",
+    "canvas-confetti": "^1.3.2",
     "core-js": "^3.6.5",
     "jspdf": "^2.1.1",
     "lodash": "^4.17.20",

js/src/utils/canvasConfetti.js

@@ -0,0 +1,34 @@
+import confetti from 'canvas-confetti'
+
+export const launchConfetti = () => {
+  const duration = 15 * 1000
+  const animationEnd = Date.now() + duration
+  const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
+
+  function randomInRange(min, max) {
+    return Math.random() * (max - min) + min
+  }
+
+  const confettiInterval = setInterval(function() {
+    const timeLeft = animationEnd - Date.now()
+
+    if (timeLeft <= 0) {
+      return clearInterval(confettiInterval)
+    }
+
+    const particleCount = 50 * (timeLeft / duration)
+    // since particles fall down, start a bit higher than random
+    confetti(
+      Object.assign({}, defaults, {
+        particleCount,
+        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
+      })
+    )
+    confetti(
+      Object.assign({}, defaults, {
+        particleCount,
+        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
+      })
+    )
+  }, 250)
+}

js/src/views/SpaceGame.vue

@@ -4,6 +4,7 @@ import MiniGame from '../components/MiniGame'
 import MiniGame2 from '../components/MiniGame2'
 import MiniGame3 from '../components/MiniGame3'
 import MiniGameStatus from '../components/MiniGameStatus'
+import { launchConfetti } from '../utils/canvasConfetti'
 
 export default {
   components: {
@@ -22,6 +23,15 @@ export default {
       miniGamesWon: 0
     })
 
+    watch(
+      () => state.gameStatus,
+      currentValue => {
+        if (currentValue === 'Player wins!') {
+          launchConfetti()
+        }
+      }
+    )
+
     watch(
       () => user.miniGamesWon,
       currentValue => {

js/yarn.lock

@@ -2468,10 +2468,10 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001111:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001112.tgz#0fffc3b934ff56ff0548c37bc9dad7d882bcf672"
   integrity sha512-J05RTQlqsatidif/38aN3PGULCLrg8OYQOlJUKbeYVzC2mGZkZLIztwRlB3MtrfLmawUmjFlNJvy/uhwniIe1Q==
 
-canvas-confetti@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.3.1.tgz#40d3af7a8079d1002a555462f587fb06cc4a81ab"
-  integrity sha512-gX4K7JH9JsjEl6eOUa5/NilKExT/9uxXg6Z2+Z2O/lgU/pc1Rfd97Q+bBHQpnZeYfBEbvp1iU8e0CKW+1WBdGw==
+canvas-confetti@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.3.2.tgz#8376f50bb7a68f7f048c5ee6ad77f95d0cd0948d"
+  integrity sha512-fLnMiI7eueyQUXG2msPnOtxjf/kvyEPm6w9ycherNtjc9qtfXcvlyZtoNfA7RClcAMhNOcKghV3z2te9Pusr7g==
 
 canvg@^3.0.6:
   version "3.0.7"