From 7f8bbe383b0e281407edeb080b83d8e45aaee74c Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias@zusor.io>
Date: Sun, 3 Sep 2023 22:09:28 +0200
Subject: [PATCH 1/2] Add confetti and champions overlays

---
 website/package.json                          |  1 +
 website/src/apps/BroadcastApp.vue             |  7 +-
 website/src/apps/ClientApp.vue                |  4 +-
 .../src/components/broadcast/StingerWrap.vue  |  4 ++
 .../broadcast/roots/ChampionsOverlay.vue      | 54 +++++++++++++++
 .../broadcast/roots/ConfettiOverlay.vue       | 67 +++++++++++++++++++
 website/src/router/broadcast.js               | 14 ++++
 website/src/router/default.js                 |  2 +
 8 files changed, 149 insertions(+), 4 deletions(-)
 create mode 100644 website/src/components/broadcast/roots/ChampionsOverlay.vue
 create mode 100644 website/src/components/broadcast/roots/ConfettiOverlay.vue

diff --git a/website/package.json b/website/package.json
index 786701dd..4b01caf0 100644
--- a/website/package.json
+++ b/website/package.json
@@ -23,6 +23,7 @@
     "spacetime-informal": "^0.6.1",
     "timesync": "^1.0.11",
     "vue": "^2.7",
+    "vue-confetti": "^2.3.0",
     "vue-cookies": "^1.8.1",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.2.0",
diff --git a/website/src/apps/BroadcastApp.vue b/website/src/apps/BroadcastApp.vue
index 618abfe5..34355936 100644
--- a/website/src/apps/BroadcastApp.vue
+++ b/website/src/apps/BroadcastApp.vue
@@ -1,5 +1,5 @@
 <template>
-    <StingerWrap :theme="broadcast.event && broadcast.event.theme" :active="active" :should-use="useBuiltInStingers" :text="stingerText">
+    <StingerWrap :theme="stingerThemeOverride && overrideTheme || broadcast.event && broadcast.event.theme" :active="active" :should-use="useBuiltInStingers" :text="stingerText">
         <div class="broadcast-app" :class="broadcastClass">
             <!--        <div style="font-size: 5em; color: black">{{ $root.activeScene }}</div>-->
             <router-view id="overlay" :class="bodyClass" :broadcast="broadcast" :client="client" :title="title" :top="top" :active="active"
@@ -36,7 +36,7 @@ function getComponentName(route) {
 
 export default {
     name: "BroadcastApp",
-    props: ["id", "title", "top", "code", "client", "noAnimation", "noStinger", "bodyClass", "full", "clientName", "backgroundIndex", "stingerText"],
+    props: ["id", "title", "top", "code", "client", "noAnimation", "noStinger", "bodyClass", "full", "clientName", "backgroundIndex", "stingerText", "stingerThemeOverride"],
     components: {
         BroadcastBackground,
         StingerWrap
@@ -81,6 +81,9 @@ export default {
             }
             return broadcast;
         },
+        overrideTheme() {
+            return ReactiveRoot(this.stingerThemeOverride);
+        },
         haltAnimations() {
             return this.noAnimation || (this.broadcast?.broadcast_settings || []).includes("No animations");
         },
diff --git a/website/src/apps/ClientApp.vue b/website/src/apps/ClientApp.vue
index 4fbc7039..1ed89614 100644
--- a/website/src/apps/ClientApp.vue
+++ b/website/src/apps/ClientApp.vue
@@ -1,6 +1,6 @@
 <template>
     <BroadcastApp v-if="broadcastID" :id="broadcastID" :title="title" :client="_client" :no-animation="noAnimation"
-        :no-stinger="noStinger" :body-class="bodyClass" :full="full" :clientName="client" :background-index="backgroundIndex" :stinger-text="stingerText" />
+        :no-stinger="noStinger" :body-class="bodyClass" :full="full" :clientName="client" :background-index="backgroundIndex" :stinger-text="stingerText" :stingerThemeOverride="stingerThemeOverride" />
 </template>
 
 <script>
@@ -9,7 +9,7 @@ import { ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 export default {
     name: "ClientApp",
     components: { BroadcastApp },
-    props: ["client", "title", "noAnimation", "noStinger", "bodyClass", "full", "backgroundIndex", "stingerText"],
+    props: ["client", "title", "noAnimation", "noStinger", "bodyClass", "full", "backgroundIndex", "stingerText", "stingerThemeOverride"],
     computed: {
         _client() {
             return ReactiveRoot(`client-${this.client}`, {
diff --git a/website/src/components/broadcast/StingerWrap.vue b/website/src/components/broadcast/StingerWrap.vue
index d5225ac6..7856c501 100644
--- a/website/src/components/broadcast/StingerWrap.vue
+++ b/website/src/components/broadcast/StingerWrap.vue
@@ -52,6 +52,10 @@ export default {
         updateTheme(theme) {
             this.customTheme = theme;
             console.log("custom stinger theme", theme);
+        },
+        updateText(text) {
+            this.customText = text;
+            console.log("custom stinger text", text);
         }
     }
 };
diff --git a/website/src/components/broadcast/roots/ChampionsOverlay.vue b/website/src/components/broadcast/roots/ChampionsOverlay.vue
new file mode 100644
index 00000000..03a24efe
--- /dev/null
+++ b/website/src/components/broadcast/roots/ChampionsOverlay.vue
@@ -0,0 +1,54 @@
+<template>
+    <ConfettiOverlay v-if="winner" :theme="winner?.theme"/>
+</template>
+
+<script>
+
+import ConfettiOverlay from "@/components/broadcast/roots/ConfettiOverlay.vue";
+import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
+
+export default {
+    components: { ConfettiOverlay },
+    props: ["broadcast", "stingerText"],
+    name: "ChampionsOverlay",
+    data: () => ({
+        confettiStarted: false,
+        prodData: {
+            minor: true
+        }
+    }),
+    mounted() {
+        console.log(this.stingerText);
+        this.$parent.updateText(this.stingerText || "Winners");
+    },
+    computed: {
+        match() {
+            if (!this.broadcast?.live_match?.length) return null;
+            return ReactiveRoot(this.broadcast?.live_match?.[0], {
+                teams: ReactiveArray("teams", {
+                    theme: ReactiveThing("theme")
+                })
+            });
+        },
+        winner() {
+            if (!this.match) return null;
+            if (!(this.match.first_to && [this.match.score_1, this.match.score_2].some(s => s === this.match.first_to))) return null;
+            return this.match.teams[this.match.score_1 === this.match.first_to ? 0 : 1];
+        }
+    },
+    watch: {
+        winner: {
+            deep: true,
+            handler(winner) {
+                console.log("winner change", this.$parent);
+                this.$parent.updateTheme(winner?.theme);
+            }
+        }
+    },
+    metaInfo() {
+        return {
+            title: `Champions | ${this.broadcast?.code || this.broadcast?.name || ""}`
+        };
+    }
+};
+</script>
diff --git a/website/src/components/broadcast/roots/ConfettiOverlay.vue b/website/src/components/broadcast/roots/ConfettiOverlay.vue
new file mode 100644
index 00000000..00807a3a
--- /dev/null
+++ b/website/src/components/broadcast/roots/ConfettiOverlay.vue
@@ -0,0 +1,67 @@
+<script>
+import VueConfetti from "vue-confetti";
+import { ReactiveRoot } from "@/utils/reactive";
+import Vue from "vue";
+Vue.use(VueConfetti);
+
+export default {
+    props: ["themeId", "theme"],
+    name: "ConfettiOverlay",
+    data: () => ({
+        confettiStarted: false,
+        noStinger: true,
+        prodData: {
+            minor: true
+        }
+    }),
+    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
+                    });
+                }
+            },
+            immediate: true
+        }
+    },
+    computed: {
+        themeData() {
+            return this.theme || ReactiveRoot(this.themeId);
+        },
+        confettiColors() {
+            return Array.from(new Set(
+                [this.themeData?.color_theme, this.themeData?.color_logo_background, this.themeData?.color_logo_accent]
+                    .filter(
+                        Boolean
+                    )));
+        }
+    },
+    metaInfo() {
+        return {
+            title: `Confetti | ${this.broadcast?.code || this.broadcast?.name || ""}`
+        };
+    }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index d3e47552..d7e84660 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -221,6 +221,20 @@ export default [
             index: parseInt(route.params.index) || parseInt(route.query.index ?? route.query.number) || 1
         })
     },
+    {
+        path: "confetti",
+        component: () => import("@/components/broadcast/roots/ConfettiOverlay.vue"),
+        props: route => ({
+            themeId: route.query.theme || route.query.themeId || route.query.themeid || route.query.themeID
+        })
+    },
+    {
+        path: "champions",
+        component: () => import("@/components/broadcast/roots/ChampionsOverlay.vue"),
+        props: route => ({
+            stingerText: route.query.stingerText
+        })
+    },
 
     /* Production staff stuff */
     { path: "clock", component: () => import("@/components/broadcast/roots/MediaClock.vue") },
diff --git a/website/src/router/default.js b/website/src/router/default.js
index c32c123c..992a9e7e 100644
--- a/website/src/router/default.js
+++ b/website/src/router/default.js
@@ -72,6 +72,7 @@ export default [
             code: route.params.broadcastCode,
             title: route.query.title,
             stingerText: route.query.stingerText,
+            stingerThemeOverride: route.query.stingerThemeOverride || route.query.stingerTheme,
             top: route.query.top,
             noAnimation: (route.query.noAnimate || route.query.dontAnimate || route.query.noAnimation),
             noStinger: (route.query.noStinger || route.query.stinger === "false"),
@@ -88,6 +89,7 @@ export default [
             client: route.params.clientID,
             title: route.query.title,
             stingerText: route.query.stingerText,
+            stingerThemeOverride: route.query.stingerThemeOverride || route.query.stingerTheme,
             noAnimation: (route.query.noAnimate || route.query.dontAnimate || route.query.noAnimation),
             noStinger: (route.query.noStinger || route.query.stinger === "false"),
             bodyClass: route.query.class || route.query.bodyClass,

From a9b7432d34f6f9effb6841a54f213bcd12e51160 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Sun, 3 Sep 2023 22:00:14 +0100
Subject: [PATCH 2/2] Add animation logic and some other bits

---
 .../src/components/broadcast/StingerWrap.vue  |  7 +-
 .../broadcast/roots/ChampionsOverlay.vue      | 12 ++-
 .../broadcast/roots/ConfettiOverlay.vue       | 87 +++++++++++++------
 3 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/website/src/components/broadcast/StingerWrap.vue b/website/src/components/broadcast/StingerWrap.vue
index 7856c501..f34e6561 100644
--- 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
index 03a24efe..55753155 100644
--- 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
index 00807a3a..fbd40c9e 100644
--- a/website/src/components/broadcast/roots/ConfettiOverlay.vue
+++ b/website/src/components/broadcast/roots/ConfettiOverlay.vue
@@ -1,3 +1,6 @@
+<template>
+    <div></div>
+</template>
 <script>
 import VueConfetti from "vue-confetti";
 import { ReactiveRoot } from "@/utils/reactive";
@@ -5,39 +8,56 @@ 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>