display 1M confetti

assets/variables.scss

@@ -50,7 +50,7 @@ $square-button-size: 2.2rem;
 
 @import '~@fortawesome/fontawesome-pro/scss/variables';
 
-$primary-dark: #ff95bb;
+$primary-dark: #ff63cb;
 
 $colours: (
     'pink':   ('light': $primary,    'dark': $primary-dark),

components/Logo.vue

@@ -1,6 +1,15 @@
 <template>
+    <Tooltip v-if="celebrate1M" :text="$t('home.million')">
+        <span
+              class="bg-primary logo-wrapper rounded-circle d-inline-flex justify-content-center align-items-center"
+              ref="confettiLogo"
+              @mouseenter="fireConfetti"
+        >
+            <span class="logo" v-html="svg.replace(`<path `, `<path style='fill: #fff' `)"></span>
+        </span>
+    </Tooltip>
     <span
-        v-if="flag"
+        v-else-if="flag"
         :class="['logo-wrapper rounded-circle d-inline-flex justify-content-center align-items-center', forceShowFlag || forceShowFlagDyn ? 'logo-flag-forced' : '', flagName ? 'logo-has-flag' : '']"
         :style="flagName ? `--flag: url('/flags/${flagName}.png')` : ''"
         @transitionend="resetFlagIfNotOverwritten"
@@ -49,6 +58,7 @@ export default Vue.extend({
                 this.flagName = this.selectFlag();
             }
         });
+
         const stats = await this.$axios.$get('/admin/stats-public');
         if (stats && stats.overall.users >= 1_000_000 && stats.overall.users < 1_005_000) {
             this.celebrate1M = true;
@@ -56,8 +66,41 @@ export default Vue.extend({
         if (process.env.NODE_ENV == 'development' || process.env.NODE_ENV == 'test') {
             this.celebrate1M = true;
         }
+        await this.fireConfetti();
     },
     methods: {
+        async fireConfetti() {
+            if (!this.celebrate1M) {
+                return;
+            }
+
+            await this.$loadScript('confetti', 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js');
+            const waitForConfetti = async () => {
+                return new Promise((resolve) => {
+                    const interval = setInterval(() => {
+                        if (window.confetti !== undefined) {
+                            clearInterval(interval);
+                            resolve();
+                        }
+                    }, 100);
+                });
+            }
+            await waitForConfetti();
+
+            setTimeout(() => {
+                const logoPos = this.$refs.confettiLogo!.getBoundingClientRect();
+                window.confetti({
+                    angle: -45,
+                    spread: 90,
+                    shapes: ['star'],
+                    decay: 0.9,
+                    origin: {
+                        x: logoPos.x + logoPos.width / 2,
+                        y: logoPos.y + logoPos.height / 2,
+                    }
+                });
+            }, 1000);
+        },
         selectFlag(): string | null {
             const events = calendar.getCurrentYear()!.eventsByDate[(this.d || this.day).toString()];
             if (!events) {

locale/_base/translations.suml

@@ -59,6 +59,7 @@ home:
             <strong>Inclusivity</strong>
             – so that when we're referring to a person we don't know or a group of people,
             we don't assume their gender and don't exclude them for any reason.
+    million: 'We''re celebrating 1 million registered accounts! Thanks, y''all!'
 
 pronouns:
     header: 'Pronouns'

locale/en/translations.suml

@@ -59,6 +59,7 @@ home:
             <strong>Inclusivity</strong>
             – so that when we're referring to a person we don't know or a group of people,
             we don't assume their gender and don't exclude them for any reason.
+    million: 'We''re celebrating 1 million registered accounts! Thanks, y''all!'
 
 pronouns:
     header: 'Pronouns'

locale/pl/translations.suml

@@ -70,6 +70,7 @@ home:
             <strong>Inkluzywność</strong>
             – by mówiąc o osobie nieznanej lub o grupie osób,
             nie zakładać ich płci i {/inkluzywny=nie wykluczać}.
+    million: 'Świętujemy milion zarejestrowanych kont! Dziękujemy!'
 
 pronouns:
     header: 'Zaimki'