Confetti changes

website/src/apps/BroadcastApp.vue

@@ -179,7 +179,6 @@ export default {
             }
         },
         broadcastKey(newCode) {
-            console.log(newCode);
             this.$socket.client.emit("prod-broadcast-join", newCode);
         }
     },

website/src/components/broadcast/roots/ChampionsOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-    <ConfettiOverlay v-if="winner" :theme="winner?.theme" :active="active" :animation-active="animationActive"/>
+    <ConfettiOverlay v-if="winner" :theme="winner?.theme"/>
 </template>
 
 <script>
@@ -9,7 +9,7 @@ import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 
 export default {
     components: { ConfettiOverlay },
-    props: ["broadcast", "stingerText", "active", "animationActive"],
+    props: ["broadcast", "stingerText"],
     name: "ChampionsOverlay",
     data: () => ({
         confettiStarted: false,
@@ -44,7 +44,7 @@ export default {
         winner: {
             deep: true,
             handler(winner) {
-                console.log("winner change", this.$parent);
+                console.log("winner", winner);
                 this.$parent.updateTheme(winner?.theme);
                 this.$parent.updateText(this.winner ? (this.stingerText || "Winners") : null);
                 this.$parent.setTextVisibility(this.stingerTextVal);

website/src/components/broadcast/roots/ConfettiOverlay.vue

@@ -8,7 +8,7 @@ import Vue from "vue";
 Vue.use(VueConfetti);
 
 export default {
-    props: ["themeId", "theme", "active", "animationActive"],
+    props: ["themeId", "theme"],
     name: "ConfettiOverlay",
     data: () => ({
         confettiStarted: false,
@@ -18,11 +18,14 @@ export default {
             minor: true
         }
     }),
+    beforeDestroy() {
+        this.stopConfetti();
+    },
     methods: {
         startOrUpdateConfetti() {
             if (this.confettiDisabled) return;
-            console.log("start confetti");
             if (!this.confettiStarted) {
+                console.log("start confetti");
                 this.$confetti.start({
                     particles: [
                         {
@@ -42,24 +45,22 @@ export default {
                     defaultColors: this.confettiColors
                 });
             }
+        },
+        stopConfetti() {
+            console.log("stopping confetti");
+            this.confettiStarted = false;
+            this.$confetti.stop();
         }
     },
     watch: {
         confettiColors: {
             handler() {
-                if (this.confettiColors.length === 0) return;
+                console.log("confetti color change", this.confettiColors);
+                if (this.confettiColors.length === 0) return this.stopConfetti();
                 this.startOrUpdateConfetti();
             },
-            immediate: true
-        },
-        animationActive: {
-            handler(isActive) {
-                console.log("active", isActive);
-                if (!isActive) return;
-                if (this.confettiColors.length === 0) return;
-                this.startOrUpdateConfetti();
-            },
-            immediate: true
+            immediate: true,
+            deep: true
         }
     },
     computed: {
@@ -86,8 +87,7 @@ export default {
     sockets: {
         stop_confetti() {
             console.log("confetti stop");
-            this.confettiStarted = false;
-            this.$confetti.stop();
+            this.stopConfetti();
         },
         disable_confetti() {
             this.confettiDisabled = true;