✨ feat: add confetti animation when player score (#53)

* ✨ feat: add confetti animation when player score

* 📚 docs: add canvas-confetti to project dependencies in README

* 🦄 refactor: move confetti functionality to UI module

---------

Co-authored-by: lingbopro <ilovemc@zohomail.cn>

Author: Minemetero

README.md

@@ -48,4 +48,7 @@ This project uses or references the following open source projects:
 - **Sober.js** [[Official Website]](https://soberjs.com) [[GitHub]](https://github.com/apprat/sober)  
   Sober is a Web Component UI component library that references the Google Material You design specification.
 
+- **canvas-confetti** [[Official Website]](https://catdad.github.io/canvas-confetti/) [[GitHub]](https://github.com/catdad/canvas-confetti)  
+  🎉 performant confetti animation in the browser
+
 Thanks to these projects and their authors.  

package.json

@@ -16,6 +16,7 @@
         "vite-plugin-html": "^3.2.2"
     },
     "dependencies": {
+        "canvas-confetti": "^1.9.3",
         "sober": "~0.7.0"
     }
 }

src/script.js

@@ -1,5 +1,5 @@
 import { lang } from './lang';
-import { hideLoading, showLoading, showSnackBar } from './ui';
+import { hideLoading, showLoading, showSnackBar, showWinnerConfetti } from './ui';
 
 let players = [];
 let totalScores = {};
@@ -146,6 +146,10 @@ export function incrementCurrentMatchScore(playerName) {
             )
         );
         disableScoreButtons();
+        
+        // Wining Animation
+        showWinnerConfetti();
+        
         setTimeout(() => {
             document.getElementById('result').innerText = '';
             updatePlayerScoreList();

src/ui.js

@@ -1,3 +1,4 @@
+import confetti from 'canvas-confetti';
 import { getLanguageList, lang, langForce, setCurrentLanguage, setLanguage, updateElementLanguages } from './lang';
 import { readConfig, writeConfig } from './utils';
 
@@ -63,6 +64,46 @@ export function hideLoading() {
     document.getElementById('top-loading').style.visibility = 'hidden';
 }
 
+/**
+ * @param {number} particleRatio
+ * @param {confetti.Options} [opts]
+ */
+function fireConfetti(particleRatio, opts = {}) {
+    const count = 200;
+    const defaults = {
+        origin: { y: 0.7 },
+    };
+    confetti({
+        ...defaults,
+        ...opts,
+        particleCount: Math.floor(count * particleRatio),
+    });
+}
+export function showWinnerConfetti() {
+    fireConfetti(0.25, {
+        spread: 26,
+        startVelocity: 55,
+    });
+    fireConfetti(0.2, {
+        spread: 60,
+    });
+    fireConfetti(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8,
+    });
+    fireConfetti(0.1, {
+        spread: 120,
+        startVelocity: 25,
+        decay: 0.92,
+        scalar: 1.2,
+    });
+    fireConfetti(0.1, {
+        spread: 120,
+        startVelocity: 45,
+    });
+}
+
 export function e_toggleTheme(theme) {
     let pageEl = document.getElementById('page');
     let themeIconEl = document.getElementById('theme-icon');