Add animation logic and some other bits

slmnio · Sep 3, 2023 · a9b7432 · a9b7432
1 parent 7f8bbe3
commit a9b7432
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 29 deletions.
diff --git a/website/src/components/broadcast/StingerWrap.vue b/website/src/components/broadcast/StingerWrap.vue
@@ -25,7 +25,8 @@ export default {
     data: () => ({
         showStinger: null,
         customTheme: null,
-        customText: null
+        customText: null,
+        hideText: false
     }),
     watch: {
         active(isActive) {
@@ -45,6 +46,7 @@ export default {
             return logoBackground(this.useTheme);
         },
         stingerText() {
+            if (this.hideText) return;
             return this.customText || this.text;
         }
     },
@@ -56,6 +58,9 @@ export default {
         updateText(text) {
             this.customText = text;
             console.log("custom stinger text", text);
+        },
+        setTextVisibility(visibility) {
+            this.hideText = !visibility;
         }
     }
 };

diff --git a/website/src/components/broadcast/roots/ChampionsOverlay.vue b/website/src/components/broadcast/roots/ChampionsOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-    <ConfettiOverlay v-if="winner" :theme="winner?.theme"/>
+    <ConfettiOverlay v-if="winner" :theme="winner?.theme" :active="active" :animation-active="animationActive"/>
 </template>
 
 <script>
@@ -9,7 +9,7 @@ import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 
 export default {
     components: { ConfettiOverlay },
-    props: ["broadcast", "stingerText"],
+    props: ["broadcast", "stingerText", "active", "animationActive"],
     name: "ChampionsOverlay",
     data: () => ({
         confettiStarted: false,
@@ -19,9 +19,13 @@ export default {
     }),
     mounted() {
         console.log(this.stingerText);
-        this.$parent.updateText(this.stingerText || "Winners");
+        this.$parent.updateText();
+        this.$parent.setTextVisibility(this.stingerTextVal);
     },
     computed: {
+        stingerTextVal() {
+            return this.winner ? (this.stingerText || "Winners") : null;
+        },
         match() {
             if (!this.broadcast?.live_match?.length) return null;
             return ReactiveRoot(this.broadcast?.live_match?.[0], {
@@ -42,6 +46,8 @@ export default {
             handler(winner) {
                 console.log("winner change", this.$parent);
                 this.$parent.updateTheme(winner?.theme);
+                this.$parent.updateText(this.winner ? (this.stingerText || "Winners") : null);
+                this.$parent.setTextVisibility(this.stingerTextVal);
             }
         }
     },

diff --git a/website/src/components/broadcast/roots/ConfettiOverlay.vue b/website/src/components/broadcast/roots/ConfettiOverlay.vue
@@ -1,43 +1,63 @@
+<template>
+    <div></div>
+</template>
 <script>
 import VueConfetti from "vue-confetti";
 import { ReactiveRoot } from "@/utils/reactive";
 import Vue from "vue";
 Vue.use(VueConfetti);
 
 export default {
-    props: ["themeId", "theme"],
+    props: ["themeId", "theme", "active", "animationActive"],
     name: "ConfettiOverlay",
     data: () => ({
         confettiStarted: false,
+        confettiDisabled: false,
         noStinger: true,
         prodData: {
             minor: true
         }
     }),
+    methods: {
+        startOrUpdateConfetti() {
+            if (this.confettiDisabled) return;
+            console.log("start confetti");
+            if (!this.confettiStarted) {
+                this.$confetti.start({
+                    particles: [
+                        {
+                            type: "circle"
+                        }
+                    ],
+                    defaultColors: this.confettiColors
+                });
+                this.confettiStarted = true;
+            } else {
+                this.$confetti.update({
+                    particles: [
+                        {
+                            type: "circle"
+                        }
+                    ],
+                    defaultColors: this.confettiColors
+                });
+            }
+        }
+    },
     watch: {
         confettiColors: {
             handler() {
                 if (this.confettiColors.length === 0) return;
-                if (!this.confettiStarted) {
-                    this.$confetti.start({
-                        particles: [
-                            {
-                                type: "circle"
-                            }
-                        ],
-                        defaultColors: this.confettiColors
-                    });
-                    this.confettiStarted = true;
-                } else {
-                    this.$confetti.update({
-                        particles: [
-                            {
-                                type: "circle"
-                            }
-                        ],
-                        defaultColors: this.confettiColors
-                    });
-                }
+                this.startOrUpdateConfetti();
+            },
+            immediate: true
+        },
+        animationActive: {
+            handler(isActive) {
+                console.log("active", isActive);
+                if (!isActive) return;
+                if (this.confettiColors.length === 0) return;
+                this.startOrUpdateConfetti();
             },
             immediate: true
         }
@@ -48,16 +68,33 @@ export default {
         },
         confettiColors() {
             return Array.from(new Set(
-                [this.themeData?.color_theme, this.themeData?.color_logo_background, this.themeData?.color_logo_accent]
-                    .filter(
-                        Boolean
-                    )));
+                [
+                    this.themeData?.color_theme,
+                    this.themeData?.color_logo_background,
+                    this.themeData?.color_logo_accent,
+                    this.themeData?.color_accent,
+                    this.themeData?.color_alt
+                ].filter(Boolean))
+            );
         }
     },
     metaInfo() {
         return {
             title: `Confetti | ${this.broadcast?.code || this.broadcast?.name || ""}`
         };
+    },
+    sockets: {
+        stop_confetti() {
+            console.log("confetti stop");
+            this.confettiStarted = false;
+            this.$confetti.stop();
+        },
+        disable_confetti() {
+            this.confettiDisabled = true;
+        },
+        enable_confetti() {
+            this.confettiDisabled = false;
+        }
     }
 };
 </script>