From ae0d5ee4ada0b4699b01b308766dd9014c99282d Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Sat, 15 Oct 2022 20:16:01 +0100
Subject: [PATCH] Add multi standings overlay and add option to go full-width
 on the generic overlay

---
 website/src/apps/BroadcastApp.vue             |  4 +-
 website/src/apps/ClientApp.vue                |  4 +-
 .../src/components/broadcast/Standings.vue    |  9 ++-
 .../components/broadcast/StandingsTeam.vue    |  7 +-
 .../broadcast/roots/GenericOverlay.vue        |  7 +-
 .../broadcast/roots/MultiStandingsOverlay.vue | 72 +++++++++++++++++++
 .../broadcast/roots/StandingsOverlay.vue      |  2 +-
 website/src/router/broadcast.js               | 13 +++-
 website/src/router/default.js                 |  6 +-
 9 files changed, 108 insertions(+), 16 deletions(-)
 create mode 100644 website/src/components/broadcast/roots/MultiStandingsOverlay.vue

diff --git a/website/src/apps/BroadcastApp.vue b/website/src/apps/BroadcastApp.vue
index fc1ecf55..53200048 100644
--- a/website/src/apps/BroadcastApp.vue
+++ b/website/src/apps/BroadcastApp.vue
@@ -3,7 +3,7 @@
         <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"
-                         :animation-active="animationActive"/>
+                         :animation-active="animationActive" :full="full"/>
             <v-style v-if="broadcast && broadcast.event">
                 {{ broadcast.event.broadcast_css }}
 
@@ -21,7 +21,7 @@ import StingerWrap from "@/components/broadcast/StingerWrap";
 
 export default {
     name: "BroadcastApp",
-    props: ["id", "title", "top", "code", "client", "noAnimation", "noStinger", "bodyClass"],
+    props: ["id", "title", "top", "code", "client", "noAnimation", "noStinger", "bodyClass", "full"],
     components: {
         StingerWrap
     },
diff --git a/website/src/apps/ClientApp.vue b/website/src/apps/ClientApp.vue
index 53d3ccdd..eb30e5e6 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" />
+        :no-stinger="noStinger" :body-class="bodyClass" :full="full" />
 </template>
 
 <script>
@@ -9,7 +9,7 @@ import { ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 export default {
     name: "ClientApp",
     components: { BroadcastApp },
-    props: ["client", "title", "noAnimation", "noStinger", "bodyClass"],
+    props: ["client", "title", "noAnimation", "noStinger", "bodyClass", "full"],
     computed: {
         _client() {
             return ReactiveRoot(`client-${this.client}`, {
diff --git a/website/src/components/broadcast/Standings.vue b/website/src/components/broadcast/Standings.vue
index c1ac86a0..e6abfd2c 100644
--- a/website/src/components/broadcast/Standings.vue
+++ b/website/src/components/broadcast/Standings.vue
@@ -19,7 +19,7 @@
         <div class="teams">
             <div class="team-group" v-for="(group, i) in standings.standings" v-bind:key="i">
                 <div class="team" v-for="team in group" v-bind:key="team.id">
-                    <StandingsTeam :team="team" :tie-text="tieText" :showColumns="showColumns" icon-size="w-60" />
+                    <StandingsTeam :team="team" :tie-text="tieText" :showColumns="showColumns" icon-size="w-60" :use-codes="useCodes" />
                 </div>
             </div>
         </div>
@@ -50,7 +50,9 @@ export default {
         stage: String,
         title: String,
         tieText: String,
-        showMapDiff: Boolean
+        showMapDiff: Boolean,
+        useCodes: Boolean,
+        overrideShowColumns: Array
     },
     components: { StandingsTeam },
     methods: {
@@ -119,7 +121,7 @@ export default {
             return (this.blocks?.standings || []).find(s => s.group === this.stage);
         },
         showColumns() {
-            return this.standingsSettings?.show || [
+            return this.overrideShowColumns || this.standingsSettings?.show || [
                 "Matches", "Maps", "MapDiff"
             ];
         },
@@ -350,6 +352,7 @@ export default {
     .standings-header, .top-standings-name {
         font-weight: bold;
         text-transform: uppercase;
+        line-height: 1;
     }
     .team-name {
         margin-left: 2em;
diff --git a/website/src/components/broadcast/StandingsTeam.vue b/website/src/components/broadcast/StandingsTeam.vue
index 370b404e..daa93c85 100644
--- a/website/src/components/broadcast/StandingsTeam.vue
+++ b/website/src/components/broadcast/StandingsTeam.vue
@@ -2,8 +2,9 @@
     <div class="standings-team d-flex">
         <div class="team-rank flex-shrink-0">{{ tieText && !teamStats["tie_show_number"] ? tieText : teamStats["rank"] }}</div>
         <ThemeLogo class="team-logo flex-shrink-0" :theme="team.theme" icon-padding="0.2em" border-width="0.15em" :logo-size="iconSize || 'w-30'" />
-        <router-link :to="url('team', team)" class="team-name ct-passive flex-grow-1 text-left d-none d-md-flex">{{ team.name }}</router-link>
-        <router-link :to="url('team', team)" class="team-name team-code ct-passive flex-grow-1 text-left d-md-none">{{ team.code }}</router-link>
+        <router-link v-if="!useCodes" :to="url('team', team)" class="team-name ct-passive flex-grow-1 text-left d-none d-md-flex">{{ team.name }}</router-link>
+        <router-link v-if="!useCodes" :to="url('team', team)" class="team-name team-code ct-passive flex-grow-1 text-left d-md-none">{{ team.code }}</router-link>
+        <router-link v-if="useCodes" :to="url('team', team)" class="team-name team-code ct-passive flex-grow-1 text-left">{{ team.code }}</router-link>
         <div class="team-stats d-flex">
             <div class="team-stat text-center" v-for="(stat, i) in stats" v-bind:key="stat + i" v-bind:class="{'d-none d-md-block': ['omw'].includes(stat) }">
                 {{ teamStats[stat] }}
@@ -25,7 +26,7 @@ function diffString(val) {
 export default {
     name: "StandingsTeam",
     components: { ThemeLogo },
-    props: ["team", "tieText", "showColumns", "iconSize"],
+    props: ["team", "tieText", "showColumns", "iconSize", "useCodes"],
     data: () => ({
         // stats: ["diff", "map_diff"/*, "points" */]
 
diff --git a/website/src/components/broadcast/roots/GenericOverlay.vue b/website/src/components/broadcast/roots/GenericOverlay.vue
index 8eff7c9b..be830cc3 100644
--- a/website/src/components/broadcast/roots/GenericOverlay.vue
+++ b/website/src/components/broadcast/roots/GenericOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="generic-overlay flex-center flex-column">
+    <div class="generic-overlay flex-center flex-column" :class="{'full': full}">
         <TourneyBar class="st4-top" v-if="top === 'st4'" :broadcast="broadcast" left="Schedule" :right="title"/>
         <div class="g-title-wrapper">
             <theme-transition :theme="theme" :active="$root.animationActive" end="middle"  :duration="500" :inner-delay="150" one-color="true">
@@ -29,7 +29,7 @@ import ThemeTransition from "@/components/broadcast/ThemeTransition";
 export default {
     name: "GenericOverlay",
     components: { ThemeTransition, TourneyBar },
-    props: ["title", "accentColor", "bodyColor", "top", "broadcast", "noBottom", "noBottomAnimate", "titleStyle", "customTheme"],
+    props: ["title", "accentColor", "bodyColor", "top", "broadcast", "noBottom", "noBottomAnimate", "titleStyle", "customTheme", "full"],
     methods: {
         nbr(text) {
             if (!text) return "";
@@ -74,6 +74,9 @@ export default {
     padding: 60px 320px;
 }
 
+.generic-overlay.full {
+    padding: 60px 120px;
+}
 
 .schedule-overlay .generic-overlay-body {
     padding: 0;
diff --git a/website/src/components/broadcast/roots/MultiStandingsOverlay.vue b/website/src/components/broadcast/roots/MultiStandingsOverlay.vue
new file mode 100644
index 00000000..86ceb86f
--- /dev/null
+++ b/website/src/components/broadcast/roots/MultiStandingsOverlay.vue
@@ -0,0 +1,72 @@
+<template>
+    <GenericOverlay class="multi-standings-overlay" :title="title || 'Standings'" :full="full">
+        <div class="all-standings-holder">
+            <div class="standings-holder" v-for="standings in standingsGroups" :key="standings.title">
+                <Standings :event="event" :stage="standings.group" :use-codes="useCodes" :override-show-columns="showColumns"
+                           :tie-text="standings && standings.tieText" :title="standings.short || standings.title"></Standings>
+
+                <!--            event: Object,-->
+                <!--            stage: String,-->
+                <!--            title: String,-->
+                <!--            tieText: String,-->
+                <!--            showMapDiff: Boolean-->
+            </div>
+        </div>
+    </GenericOverlay>
+</template>
+
+<script>
+import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
+import GenericOverlay from "@/components/broadcast/roots/GenericOverlay";
+import Standings from "@/components/broadcast/Standings";
+
+export default {
+    name: "MultiStandingsOverlay",
+    components: { GenericOverlay, Standings },
+    props: ["broadcast", "title", "stageCodes", "showColumns", "useCodes", "full"],
+    computed: {
+        event() {
+            if (!this.broadcast || !this.broadcast.event) return null;
+            return ReactiveRoot(this.broadcast.event.id, {
+                theme: ReactiveThing("theme"),
+                teams: ReactiveArray("teams", {
+                    theme: ReactiveThing("theme")
+                })
+            });
+        },
+        blocks() {
+            if (!this.event || !this.event.blocks) return null;
+            try {
+                const blocks = JSON.parse(this.event.blocks);
+                return blocks || null;
+            } catch (e) {
+                return null;
+            }
+        },
+        standingsGroups() {
+            if (!this.stageCodes?.length) return this.blocks?.standings;
+            return (this.blocks?.standings || []).filter(standings => this.stageCodes.some(code => standings.group === code || standings.key === code));
+        }
+    },
+    metaInfo() {
+        return {
+            title: `Multi Standings ${this.stageCodes} | ${this.broadcast?.code || this.broadcast?.name || ""}`
+        };
+    }
+};
+</script>
+
+<style scoped>
+    .standings >>> .team-name {
+        color: inherit !important;
+    }
+    .all-standings-holder {
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start;
+        width: 100%;
+    }
+    .standings >>> .standings-header .team-name {
+        margin-right: 1.5em;
+    }
+</style>
diff --git a/website/src/components/broadcast/roots/StandingsOverlay.vue b/website/src/components/broadcast/roots/StandingsOverlay.vue
index 47f51ac8..6eb2106b 100644
--- a/website/src/components/broadcast/roots/StandingsOverlay.vue
+++ b/website/src/components/broadcast/roots/StandingsOverlay.vue
@@ -39,7 +39,7 @@ export default {
             return (this.blocks?.standings || []).find(s => s.group === this._stage);
         },
         stageTitle() {
-            return this.standingsSettings?.title || this._stage;
+            return this.standingsSettings?.short || this.standingsSettings?.title || this._stage;
         }
     },
     metaInfo() {
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index ec30f9cc..3b0be96e 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -1,4 +1,5 @@
-import MVPOverlay from "@/components/broadcast/roots/MVPOverlay";
+const MVPOverlay = () => import("@/components/broadcast/roots/MVPOverlay");
+const MultiStandingsOverlay = () => import("@/components/broadcast/roots/MultiStandingsOverlay");
 
 const IngameOverlay = () => import("@/components/broadcast/roots/IngameOverlay");
 const BreakOverlay = () => import("@/components/broadcast/break/BreakOverlay");
@@ -96,6 +97,16 @@ export default [
     { path: "schedule", component: ScheduleOverlay, props: route => ({ secondary: !!route.query.secondary }) },
     { path: "iframe", component: IframeOverlay, props: route => ({ url: route.query.url }) },
     { path: "standings", component: StandingsOverlay, props: route => ({ stage: route.query.stage || route.query.group }) },
+    {
+        path: "multi-standings",
+        component: MultiStandingsOverlay,
+        props: route => ({
+            stageCodes: (route.query.stage || route.query.group || route.query.stages || route.query.groups || "").split(",").filter(t => t),
+            useCodes: !!route.query.codes,
+            showColumns: (route.query.columns || route.query.show || "").split(",").filter(t => t)
+        })
+    },
+    { path: "multistandings", redirect: "multi-standings" },
     { path: "roster", redirect: "rosters" },
     {
         path: "rosters",
diff --git a/website/src/router/default.js b/website/src/router/default.js
index 3bc04926..bded175b 100644
--- a/website/src/router/default.js
+++ b/website/src/router/default.js
@@ -71,7 +71,8 @@ export default [
             top: route.query.top,
             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
+            bodyClass: route.query.class || route.query.bodyClass,
+            full: !!route.query.full
         }),
         children: BroadcastRoutes
     },
@@ -83,7 +84,8 @@ export default [
             title: route.query.title,
             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
+            bodyClass: route.query.class || route.query.bodyClass,
+            full: !!route.query.full
         }),
         children: BroadcastRoutes
     }