Bunch of deadlock stuff

website/src/components/broadcast/break/BreakMatch.vue

@@ -2,7 +2,7 @@
     <div class="break-match flex-center" :class="{'expanded': expanded, 'has-scores': hasScore}" :data-center="centerShow">
         <div v-if="!expanded" class="match-next-details">
             <transition name="fade" mode="out-in">
-                <span :key="match ? match.round : 'empty'">{{ hasFinished ? 'FINAL SCORE:' : 'UP NEXT:' }} {{ match && match.round }}</span>
+                <span :key="match ? match.round : 'empty'">{{ textPrefix }} {{ match && match.round }}</span>
             </transition>
         </div>
         <!--
@@ -67,7 +67,7 @@ import { resizedImage } from "@/utils/images";
 
 export default {
     name: "BreakMatch",
-    props: ["match", "expanded", "timezone", "live", "themeColor"],
+    props: ["match", "expanded", "timezone", "live", "themeColor", "times"],
     computed: {
         teams() {
             if (this.match?.special_event) return [];
@@ -144,6 +144,12 @@ export default {
 
 
             // return null;
+        },
+        textPrefix() {
+            if (this.times && this.start) {
+                return `${this.start}:`
+            }
+            return this.hasFinished ? 'FINAL SCORE:' : 'UP NEXT:'
         }
     },
     methods: {

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

@@ -18,6 +18,7 @@
                     :timezone="broadcast?.timezone"
                     :match="match"
                     :expanded="false"
+                    :times="true"
                     :theme-color="themeColor" />
             </div>
         </div>
@@ -40,25 +41,30 @@
                     v-html="nbr(title || broadcast.title)"></span>
             </transition>
         </div>
+        <div v-if="showSponsors" class="lbar-sponsors-holder">
+            <Sponsors class="lbar-sponsors" :sponsors="sponsorThemes" />
+        </div>
     </div>
 </template>
 
 <script>
 import ThemeLogo from "@/components/website/ThemeLogo.vue";
 import BreakMatch from "@/components/broadcast/break/BreakMatch.vue";
-import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
+import { ReactiveArray, ReactiveThing, ReactiveRoot } from "@/utils/reactive";
 import { sortMatches } from "@/utils/sorts";
-import { themeBackground1 } from "@/utils/theme-styles";
+import { logoBackground1, themeBackground1 } from "@/utils/theme-styles";
 import Countdown from "@/components/broadcast/Countdown.vue";
+import Sponsors from "@/components/broadcast/Sponsors.vue";
 
 export default {
     name: "LBarOverlay",
-    components: { Countdown, BreakMatch, ThemeLogo },
+    components: { Countdown, BreakMatch, ThemeLogo, Sponsors },
     props: {
         broadcast: {},
         client: {},
         virtualMatch: {},
-        title: String
+        title: String,
+        showSponsors: String
     },
     computed: {
         fullSchedule() {
@@ -81,16 +87,27 @@ export default {
         },
         countdownText() {
             if (!this.broadcast.countdown_end) return "LOCAL TIME";
-            if (this.schedule && this.schedule.filter(s => [s.score_1, s.score_2].some(_s => _s)).length === 0) { return "STARTING IN"; }
+            if (this.schedule && this.schedule.filter(s => [s.score_1, s.score_2].some((_s) => _s)).length === 0) { return "STARTING IN"; }
             return "BACK IN";
-        }
+        },
+        sponsorThemes() {
+            if (!this.broadcast?.sponsors) return null;
+            return ReactiveArray("sponsors", {
+                theme: ReactiveThing("theme"),
+            })(this.broadcast);
+        },
     },
     methods: {
         nbr(text) {
             if (!text) return "";
             return text.replace(/\\n/g, "<br>");
-        }
-    }
+        },
+        getTeamStyle(team) {
+            return {
+                ...logoBackground1(team),
+            };
+        },
+    },
 };
 </script>
 
@@ -104,7 +121,6 @@ export default {
         grid-template-rows: repeat(2, 1fr);
     }
 
-
     .content {
         --content-width: 1504px;
         width: var(--content-width);
@@ -115,7 +131,7 @@ export default {
         width: 100%;
         font-size: 48px;
         line-height: 1;
-        padding: 0.25em 0
+        padding: 0.25em 0;
     }
     .countdown-group .countdown-timer {
         font-size: 2.5em;

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

@@ -2,6 +2,8 @@
     <div class="mvp-overlay">
         <div v-if="mvp">
             <div class="text-container">
+                <div v-if="showSponsor" class="break-sponsor-logo bg-center" :style="logo(sponsor)"></div>
+
                 <div class="title-holder">
                     <ThemeTransition
                         start="right"
@@ -43,11 +45,12 @@ import ThemeLogo from "@/components/website/ThemeLogo";
 import { themeBackground1 } from "@/utils/theme-styles";
 import ThemeTransition from "@/components/broadcast/ThemeTransition";
 import { useStatusStore } from "@/stores/statusStore";
+import { resizedImage } from "@/utils/images";
 
 export default {
     name: "MVPOverlay",
     components: { ThemeTransition, ThemeLogo, RecoloredHero },
-    props: ["broadcast", "title", "animationActive"],
+    props: ["broadcast", "title", "animationActive", "showSponsor"],
     computed: {
         match() {
             return ReactiveRoot(this.broadcast?.live_match?.[0], {
@@ -89,7 +92,18 @@ export default {
         },
         themeBackground() {
             return themeBackground1(this.mvpTeam);
-        }
+        },
+        sponsor() {
+            if (!this.broadcast?.sponsors) return null;
+            return ReactiveArray("sponsors", {
+                theme: ReactiveThing("theme"),
+            })(this.broadcast)[0];
+        },
+    },
+    methods: {
+        logo (theme) {
+            return resizedImage(theme, ["default_wordmark", "default_logo"], "h-300");
+        },
     },
     watch: {
         mvpTeam: {
@@ -133,6 +147,11 @@ export default {
     .title-holder {
         min-height: 168px;
     }
+    .break-sponsor-logo {
+        position: relative;
+        width: 300px;
+        height: 150px;
+    }
     .title {
         display: flex;
         font-size: 6em;

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

@@ -1,20 +1,24 @@
 <template>
     <div class="versus-overlay d-flex flex-column">
-        <transition name="fly-down">
+        <transition v-if="!vertical" name="fly-down">
             <div v-if="animationActive" class="top-logo-holder flex-center">
                 <div class="logo bg-center" :style="eventLogo"></div>
             </div>
         </transition>
         <transition name="fly-sides">
-            <div v-if="animationActive" class="versus-block-holder flex-center">
-                <div v-for="team in teams" :key="team.id" class="team" :style="getTeamStyle(team)">
-                    <div class="team-logo bg-center" :style="getTeamLogo(team)"></div>
-                    <div class="team-text-box">
+            <div v-if="animationActive" class="flex-center" :class="vertical ? 'versus-block-holder-vertical' : 'versus-block-holder'">
+                <div v-if="animationActive && vertical" class="header-vertical slant">
+                    <div class="reverse-slant">UP NEXT</div>
+                </div>
+                <div v-for="(team, i) in teams" :key="team.id" :class="vertical ? 'team-text-box-vertical' : 'team'" :style="{...getTeamStyle(team), order: i * 2}">
+                    <div v-if="!vertical" class="team-logo bg-center" :style="getTeamLogo(team)"></div>
+                    <div v-if="!vertical" class="team-text-box">
                         <div class="team-text">{{ team.name }}</div>
                     </div>
+                    <div v-if="vertical" class="team-text-vertical">{{ team.name }}</div>
                 </div>
                 <transition name="slide-out">
-                    <div v-if="animationActive" class="vs slant">
+                    <div v-if="animationActive" class="slant" :class="vertical ? 'vs-vertical' : 'vs'">
                         <div class="reverse-slant">{{ versusText }}</div>
                     </div>
                 </transition>
@@ -31,7 +35,8 @@ export default {
     name: "VersusOverlay",
     props: {
         broadcast: {},
-        animationActive: Boolean
+        animationActive: Boolean,
+        vertical: Boolean
     },
     computed: {
         match() {
@@ -107,21 +112,32 @@ export default {
         position: relative;
     }
 
+    .versus-block-holder-vertical {
+        height: 100%;
+        position: relative;
+        flex-direction: column;
+        row-gap: 2em;
+    }
+
     .team-logo {
         height: 100%;
         width: 100%;
     }
 
     .team-text-box {
         width: 515px;
-        position: absolute;
         line-height: 1;
-        top: calc(100% - 150px);
         height: 300px;
         display: flex;
         justify-content: center;
         align-items: center;
     }
+    .team-text-box-vertical {
+        line-height: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
     .team-text {
         background-color: #333;
         color: white;
@@ -130,8 +146,16 @@ export default {
         font-size: 42px;
         text-align: center;
         padding: 0.25em 0.5em;
-        width: 515px;
-        position: absolute;
+        line-height: 1;
+    }
+    .team-text-vertical {
+        background-color: #333;
+        color: white;
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: 84px;
+        text-align: center;
+        padding: 0.25em 0.5em;
         line-height: 1;
     }
     .vs {
@@ -142,6 +166,20 @@ export default {
         width: 3em;
         text-align: center;
     }
+    .vs-vertical {
+        font-size: 5em;
+        font-weight: bold;
+        background-color: white;
+        width: 3em;
+        text-align: center;
+    }
+    .header-vertical {
+        font-size: 5em;
+        font-weight: bold;
+        background-color: white;
+        width: 5em;
+        text-align: center;
+    }
 
     .slant {
         --skew: -20deg;

website/src/router/broadcast.js

@@ -52,7 +52,7 @@ export default [
             showSponsors: route.query.sponsors || route.query.showSponsors
         })
     },
-    { path: "versus", component: () => import("@/components/broadcast/roots/VersusOverlay.vue") },
+    { path: "versus", component: () => import("@/components/broadcast/roots/VersusOverlay.vue"), props: route => ({ vertical: route.query.vertical}) },
     {
         path: "winners",
         component: () => import("@/components/broadcast/roots/WinnersOverlay.vue"),
@@ -204,7 +204,7 @@ export default [
             animate: route.query.animate
         })
     },
-    { path: "l-bar", component: () => import("@/components/broadcast/roots/LBarOverlay") },
+    { path: "l-bar", component: () => import("@/components/broadcast/roots/LBarOverlay"), props: route => ({ showSponsors: route.query.sponsors}) },
     { path: "background", component: () => import("@/components/broadcast/BroadcastBackground.vue"), props: route => ({ index: route.query.index }) },
     { path: "sponsors", component: () => import("@/components/broadcast/roots/SponsorOverlay.vue") },
     { path: "maps", component: () => import("@/components/broadcast/roots/MapsOverlay.vue"), props: route => ({ autoTitle: route.query.auto }) },
@@ -252,7 +252,9 @@ export default [
         })
     },
     { path: "broadcasts", alias: ["other-streams", "other-broadcasts"], component: () => import("@/components/broadcast/roots/OtherBroadcastsOverlay.vue") },
-    { path: "mvp", component: () => import("@/components/broadcast/roots/MVPOverlay.vue") },
+    { path: "mvp", component: () => import("@/components/broadcast/roots/MVPOverlay.vue"), props: route => ({
+        showSponsor: route.query.sponsor
+    }) },
     {
         path: "ingame-comms",
         component: () => import("@/components/broadcast/roots/IngameCommsOverlay.vue"),