Minemetero · Minemetero · May 18, 2025 · May 16, 2025 · May 17, 2025 · May 18, 2025
diff --git a/README.md b/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.  
diff --git a/index.html b/index.html
@@ -35,14 +35,14 @@
             <!-- Theme -->
             <s-tooltip slot="action" data-lang="ui.topbar.theme">
                 <s-icon-button id="topbar-theme-toggle" slot="trigger">
-                    <s-icon type="light_mode" id="theme-icon"></s-icon>
+                    <s-icon name="light_mode" id="theme-icon"></s-icon>
                 </s-icon-button>
             </s-tooltip>
             <!-- More -->
             <s-popup-menu slot="action">
                 <s-tooltip slot="trigger" data-lang="ui.topbar.more">
                     <s-icon-button slot="trigger">
-                        <s-icon type="more_horiz"></s-icon>
+                        <s-icon name="more_horiz"></s-icon>
                     </s-icon-button>
                 </s-tooltip>
                 <!-- GitHub -->
@@ -82,18 +82,18 @@
                         <!-- Winning Balls -->
                         <s-text-field id="winBalls" data-lang="ui.setup.winningBalls" data-lang-prop="label">
                             <s-icon-button id="setup-winBalls-add" slot="end">
-                                <s-icon type="chevron_up"></s-icon>
+                                <s-icon name="chevron_up"></s-icon>
                             </s-icon-button>
                             <s-icon-button id="setup-winBalls-minus" slot="end">
-                                <s-icon type="chevron_down"></s-icon>
+                                <s-icon name="chevron_down"></s-icon>
                             </s-icon-button>
                         </s-text-field>
                     </div>
                     <div class="form-group" id="playerInputGroup">
                         <!-- Player Name -->
                         <s-text-field id="playerName" data-lang="ui.setup.playerName" data-lang-prop="label">
                             <s-button type="text" slot="end" id="setup-addPlayer" data-lang="ui.setup.addPlayer">
-                                <s-icon slot="start" type="add"></s-icon>
+                                <s-icon slot="start" name="add"></s-icon>
                             </s-button>
                         </s-text-field>
                     </div>

diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
         "vite-plugin-html": "^3.2.2"
     },
     "dependencies": {
-        "sober": "~0.7.0"
+        "canvas-confetti": "^1.9.3",
+        "sober": "~1.1.5"
     }
 }
diff --git a/src/script.js b/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 = {};
@@ -32,7 +32,7 @@ export function minusWinBalls() {
 export function addPlayer() {
     const playerName = document.getElementById('playerName').value.trim();
     if (playerName === '' || players.includes(playerName)) {
-        showSnackBar(lang('ui.tooltip.playerNameError'), 'PlayerNameError');
+        showSnackBar(lang('ui.tooltip.playerNameError'), 'PlayerNameError', 'error');
         return;
     }
     players.push(playerName);
@@ -56,13 +56,13 @@ export function updatePlayerList() {
 export function startGame() {
     showLoading();
     if (players.length < 2) {
-        showSnackBar(lang('ui.tooltip.playerAmountError'), 'PlayerAmountError');
+        showSnackBar(lang('ui.tooltip.playerAmountError'), 'PlayerAmountError', 'error');
         hideLoading();
         return;
     }
     winBalls = parseInt(document.getElementById('winBalls').value);
     if (isNaN(winBalls) || winBalls <= 0) {
-        showSnackBar(lang('ui.tooltip.winningBallsError'), 'WinningBallsError');
+        showSnackBar(lang('ui.tooltip.winningBallsError'), 'WinningBallsError', 'error');
         hideLoading();
         return;
     }
@@ -71,14 +71,15 @@ export function startGame() {
         document.getElementById('rotationalServes').value
     );
     if (isNaN(serveRule) || serveRule < 0 || serveRule > 1) {
-        showSnackBar(lang('ui.tooltip.serveRuleError'), 'ServeRuleError');
+        showSnackBar(lang('ui.tooltip.serveRuleError'), 'ServeRuleError', 'error');
         hideLoading();
         return;
     }
     if (serveRule === 1 && (isNaN(rotationalServes) || rotationalServes <= 0)) {
         showSnackBar(
             lang('ui.tooltip.rotationalServesError'),
-            'RotationalServesError'
+            'RotationalServesError',
+            'error'
         );
         hideLoading();
         return;
@@ -146,6 +147,10 @@ export function incrementCurrentMatchScore(playerName) {
             )
         );
         disableScoreButtons();
+
+        // Wining Animation
+        showWinnerConfetti();
+
         setTimeout(() => {
             document.getElementById('result').innerText = '';
             updatePlayerScoreList();
@@ -180,8 +185,8 @@ export function updateCurrentMatch() {
             <div class="playerTags">
                 <s-chip class="player-serve ${
                     serveRule === 1 && currentServe == 0 ? 'active' : ''
-                }" type="filled-tonal">
-                    <s-icon slot="start" type="done"></s-icon>
+                }" type="elevated">
+                    <s-icon slot="start" name="done"></s-icon>
                     ${lang('ui.gameBoard.serve')}
                 </s-chip>
             </div>
@@ -195,8 +200,8 @@ export function updateCurrentMatch() {
             <div class="playerTags">
                 <s-chip class="player-serve ${
                     serveRule === 1 && currentServe == 1 ? 'active' : ''
-                }" type="filled-tonal">
-                    <s-icon slot="start" type="done"></s-icon>
+                }" type="elevated">
+                    <s-icon slot="start" name="done"></s-icon>
                     ${lang('ui.gameBoard.serve')}
                 </s-chip>
             </div>
@@ -280,7 +285,7 @@ export function resetScores() {
 
 export function undoLastScore() {
     if (!lastScoringPlayer) {
-        showSnackBar(lang('ui.tooltip.noScoreToUndo'), 'NoScoreToUndo');
+        showSnackBar(lang('ui.tooltip.noScoreToUndo'), 'NoScoreToUndo', 'warning');
         return;
     }
 

diff --git a/src/ui.js b/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';
 
@@ -46,14 +47,15 @@ repo: https://github.com/Minemetero/Table-Tennis-Counter
     });
 }
 
-export function showSnackBar(message, id = 'snackbar') {
+export function showSnackBar(message, id = 'snackbar', type = 'info') {
     let snackBarEl = document.getElementById('snackbar-' + id);
     if (snackBarEl === null) {
         snackBarEl = document.createElement('s-snackbar');
         snackBarEl.id ='snackbar-' + id;
         document.getElementById('tooltips').appendChild(snackBarEl);
     }
     snackBarEl.innerText = message;
+    snackBarEl.type = type;
     snackBarEl.show();
 }
 export function showLoading() {
@@ -63,6 +65,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');
@@ -106,7 +148,7 @@ export function e_toggleTheme(theme) {
             break;
     }
     writeConfig('theme', theme);
-    showSnackBar(lang('ui.tooltip.themeSetTo', lang(`ui.theme.themeName.${theme}`)), 'Theme');
+    showSnackBar(lang('ui.tooltip.themeSetTo', lang(`ui.theme.themeName.${theme}`)), 'Theme', 'info');
 }
 
 export function e_reloadPage() {
@@ -115,7 +157,7 @@ export function e_reloadPage() {
 }
 
 export function e_gotoGitHub() {
-    showSnackBar(lang('ui.tooltip.repoTip'), 'RepoTips');
+    showSnackBar(lang('ui.tooltip.repoTip'), 'RepoTips', 'info');
     window.open('https://github.com/Minemetero/Table-Tennis-Counter', '_blank');
 }