Merge branch '1m-new' into 'main'

celebrating 1M users – new branch

See merge request PronounsPage/PronounsPage!495

components/Logo.vue

@@ -1,6 +1,15 @@
 <template>
+    <Tooltip v-if="celebrate1M" :text="$t('home.million')">
+        <span
+            ref="confettiLogo"
+            class="bg-primary logo-wrapper rounded-circle d-inline-flex justify-content-center align-items-center"
+            @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"
@@ -21,6 +30,11 @@ interface Data {
     flagName: string | null;
     d: Day | null;
     forceShowFlagDyn: boolean;
+    celebrate1M: boolean;
+}
+
+interface Refs {
+    confettiLogo: HTMLSpanElement | undefined;
 }
 
 export default Vue.extend({
@@ -35,9 +49,15 @@ export default Vue.extend({
             flagName: null,
             d: this.day,
             forceShowFlagDyn: false,
+            celebrate1M: false,
         };
     },
-    mounted() {
+    computed: {
+        $tRefs(): Refs {
+            return this.$refs as unknown as Refs;
+        },
+    },
+    async mounted() {
         this.flagName = this.selectFlag();
         this.$eventHub.$on('calendar-select', (d: Day | null) => {
             this.forceShowFlagDyn = !!d;
@@ -47,8 +67,42 @@ 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;
+        }
+        setTimeout(() => this.fireConfetti(), 1000);
     },
     methods: {
+        async fireConfetti() {
+            await this.$nextTick();
+            if (!this.$tRefs.confettiLogo?.offsetParent) {
+                return;
+            }
+
+            const confetti = (await import('canvas-confetti')).default;
+
+            const origin = {
+                x: (this.$tRefs.confettiLogo.offsetLeft + this.$tRefs.confettiLogo.offsetWidth) / window.innerWidth,
+                y: (this.$tRefs.confettiLogo.offsetTop + this.$tRefs.confettiLogo.offsetHeight) / window.innerHeight,
+            };
+
+            const centre = { x: 0.5, y: 0.5 };
+
+            const angleRadians = -Math.atan((centre.y - origin.y) / (centre.x - origin.x));
+            const angleDegrees = angleRadians * (180 / Math.PI);
+
+            await confetti({
+                particleCount: 200,
+                angle: angleDegrees,
+                spread: 120,
+                shapes: ['star'],
+                origin,
+                scalar: 0.8,
+                decay: 0.9,
+            });
+        },
         selectFlag(): string | null {
             const events = calendar.getCurrentYear()!.eventsByDate[(this.d || this.day).toString()];
             if (!events) {

locale/_base/translations.suml

@@ -99,6 +99,7 @@ pronouns:
     othersRaw: 'other'
     or: 'or'
     grammarTable: 'Table'
+    million: 'We’re celebrating 1 million registered accounts! Thanks, y’all!'
 
 pronunciation:
     play: 'Play audio sample'

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'

package.json

@@ -32,6 +32,7 @@
         "avris-generator": "^0.8.2",
         "avris-sorter": "^0.0.3",
         "canvas": "^2.11.2",
+        "canvas-confetti": "^1.9.3",
         "cookie-parser": "^1.4.5",
         "cookie-universal-nuxt": "^2.1.4",
         "dotenv": "^8.2.0",
@@ -96,6 +97,7 @@
         "@sentry/webpack-plugin": "^2.14.2",
         "@smithy/types": "^2.12.0",
         "@stylistic/eslint-plugin": "^1.5.4",
+        "@types/canvas-confetti": "^1.6.4",
         "@types/connect": "^3.4.38",
         "@types/cookie-parser": "^1.4.6",
         "@types/express": "^4.17.21",

pnpm-lock.yaml

@@ -59,6 +59,9 @@ dependencies:
   canvas:
     specifier: ^2.11.2
     version: 2.11.2
+  canvas-confetti:
+    specifier: ^1.9.3
+    version: 1.9.3
   cookie-parser:
     specifier: ^1.4.5
     version: 1.4.6
@@ -247,6 +250,9 @@ devDependencies:
   '@stylistic/eslint-plugin':
     specifier: ^1.5.4
     version: 1.5.4(eslint@8.57.0)(typescript@5.5.2)
+  '@types/canvas-confetti':
+    specifier: ^1.6.4
+    version: 1.6.4
   '@types/connect':
     specifier: ^3.4.38
     version: 3.4.38
@@ -4912,6 +4918,10 @@ packages:
       '@types/node': 20.11.5
     dev: true
 
+  /@types/canvas-confetti@1.6.4:
+    resolution: {integrity: sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==}
+    dev: true
+
   /@types/clean-css@4.2.11:
     resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==}
     dependencies:
@@ -6853,6 +6863,10 @@ packages:
   /caniuse-lite@1.0.30001605:
     resolution: {integrity: sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==}
 
+  /canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+    dev: false
+
   /canvas@2.11.2:
     resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==}
     engines: {node: '>=6'}