From 1b434ed19337defb4119761300c3fac29e22f618 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Tue, 21 Dec 2021 03:27:51 +0000
Subject: [PATCH 01/14] New solo - added files and majority of code

---
 .../broadcast/SoloControlButton.vue           |  93 ++++++++
 .../src/components/broadcast/SoloOverlay.vue  | 224 ++++++++++++++++++
 .../broadcast/SoloTeamControlButton.vue       |  36 +++
 .../components/broadcast/desk/DeskMatch.vue   |   7 +-
 website/src/router/broadcast.js               |   4 +-
 5 files changed, 361 insertions(+), 3 deletions(-)
 create mode 100644 website/src/components/broadcast/SoloControlButton.vue
 create mode 100644 website/src/components/broadcast/SoloOverlay.vue
 create mode 100644 website/src/components/broadcast/SoloTeamControlButton.vue

diff --git a/website/src/components/broadcast/SoloControlButton.vue b/website/src/components/broadcast/SoloControlButton.vue
new file mode 100644
index 00000000..5c52d2bc
--- /dev/null
+++ b/website/src/components/broadcast/SoloControlButton.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="control-button" v-bind:class="elClass" @click="() => click()" :style="css">
+        <span><slot></slot></span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SoloControlButton",
+    props: {
+        left: Boolean,
+        right: Boolean,
+        rotate: Boolean,
+        noclick: Boolean,
+        click: Function,
+        color: String
+    },
+    computed: {
+        css() {
+            if (!this.color) return {};
+            return {
+                backgroundColor: this.color
+            };
+        },
+        elClass() {
+            return {
+                "control-slice": this.left || this.right,
+                "control-left": this.left,
+                "control-right": this.right,
+                rotate: this.rotate,
+                noclick: this.noclick
+            };
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .control-button {
+        width: 200px;
+        height: 200px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: 3em;
+        line-height: 1.2;
+        text-align: center;
+        font-weight: bold;
+        text-transform: uppercase;
+
+        background-color: #f12c2c;
+
+        opacity: 0.8;
+
+        cursor: pointer;
+        /*user-select: none;*/
+    }
+    .control-button span {
+        pointer-events: none;
+        user-select: none
+    }
+    .control-button.noclick {
+        cursor: default;
+        opacity: 0.7;
+        background-color: white;
+    }
+    .control-button:not(.noclick):hover {
+        opacity: 1;
+    }
+
+    .control-button.control-slice {
+        width: 60px;
+        font-size: 2em;
+    }
+    .control-button.control-left.rotate span {
+        transform: rotate(-90deg);
+    }
+    .control-button.control-right.rotate span {
+        transform: rotate(90deg);
+    }
+    .control-button.score {
+        background-color: #ccc;
+        font-size: 6em;
+    }
+    .control-button.score span {
+        transform: translate(0, -0.09em);
+    }
+    .control-button.score.is-score {
+        background-color: var(--theme, red);
+    }
+</style>
diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
new file mode 100644
index 00000000..bb209049
--- /dev/null
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -0,0 +1,224 @@
+<template>
+    <div class="solo-overlay flex-center">
+        <div class="solo-part solo--controls">
+            <div class="control-group" v-if="controlMode === 'default'">
+                <SoloControlButton noclick left rotate>SLMN.GG</SoloControlButton>
+                <SoloControlButton color="#f22cf2" :click="() => flipTeams()">Flip teams</SoloControlButton>
+                <SoloControlButton :color="teams[0] && teams[0].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-1'">Set Team 1</SoloControlButton>
+                <SoloControlButton :color="teams[1] && teams[1].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-2'">Set Team 2</SoloControlButton>
+                <SoloControlButton color="#f22cf2" :click="() => controlMode = 'set-scores'">Set Scores</SoloControlButton>
+                <SoloControlButton :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Set Middle</SoloControlButton>
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+            <div class="control-group" v-if="controlMode === 'set-team-1'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <SoloTeamControlButton v-for="team in currentChunk" v-bind:key="team.id" :team="team"
+                 :click="() => setTeam(0, team)"/>
+                <div class="spacer"></div>
+                <SoloControlButton color="#2cf22c" right rotate :click="() => nextPage()">Next</SoloControlButton>
+            </div>
+
+            <div class="control-group" v-if="controlMode === 'set-team-2'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <SoloTeamControlButton v-for="team in currentChunk" v-bind:key="team.id" :team="team"
+                 :click="() => setTeam(1, team)"/>
+                <div class="spacer"></div>
+                <SoloControlButton color="#2cf22c" right rotate :click="() => nextPage()">Next</SoloControlButton>
+            </div>
+
+            <div class="control-group" v-if="controlMode === 'set-scores'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <div class="spacer"></div>
+
+                <SoloControlButton v-bind:class="{'is-score': scores[0] === score}" class="score" v-for="score in [...scoreArray].reverse()" v-bind:key="'team-1-' + score"
+                                   :click="() => setScore(0, score)">{{ score }}</SoloControlButton>
+
+
+                <SoloTeamControlButton noclick v-for="team in teams" v-bind:key="team.id" :team="team"/>
+
+                <SoloControlButton v-bind:class="{'is-score': scores[1] === score}" class="score" v-for="score in scoreArray" v-bind:key="'team-2-' + score"
+                                   :click="() => setScore(1, score)">{{ score }}</SoloControlButton>
+
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+
+            <div class="control-group" v-if="controlMode === 'set-middle'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+
+                <div class="solo-input-wrapper flex-center w-100">
+                    <input type="text" v-model="tempMiddle" class="solo-text-input">
+                </div>
+                <SoloControlButton color="#f22cf2" :click="() => setMiddle()">Set</SoloControlButton>
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+        </div>
+
+
+        <div class="solo-part solo--desk flex-center">
+            <DeskMatch class="w-100" :_match="virtualMatch" :custom-scores="scores" />
+        </div>
+
+
+        <div class="solo-part solo--ingame">
+            <transition-group name="fade" mode="out-in">
+                <IngameTeam :key="`${team.name}-${i}`" v-for="(team, i) in teams"
+                            :team="team" :right="i === 1" :score="scores[i]"/>
+            </transition-group>
+            <!--  :score="scores[i]" :hideScores="broadcast.hide_scores"
+                        :width="teamWidth" :codes="codes" -->
+
+            <transition name="mid" mode="out-in">
+                <Middle v-if="middle" :text="middle" :key="middle" />
+            </transition>
+        </div>
+        <div class="solo-loader d-none">
+            {{ event && event.name }}
+        </div>
+    </div>
+</template>
+
+<script>
+import IngameTeam from "@/components/broadcast/IngameTeam";
+import SoloControlButton from "@/components/broadcast/SoloControlButton";
+import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
+import SoloTeamControlButton from "@/components/broadcast/SoloTeamControlButton";
+import DeskMatch from "@/components/broadcast/desk/DeskMatch";
+import Middle from "@/components/broadcast/Middle";
+
+export default {
+    name: "SoloOverlay",
+    props: ["broadcast"],
+    components: {
+        SoloControlButton,
+        SoloTeamControlButton,
+        IngameTeam,
+        DeskMatch,
+        Middle
+    },
+    data: () => ({
+        controlMode: "default",
+        controlPage: 0,
+        middle: "",
+        tempMiddle: "",
+
+        teams: [
+            { name: "Team 1", has_theme: 0 },
+            { name: "Team 2", has_theme: 0 }
+        ],
+        scores: [0, 0]
+    }),
+    methods: {
+        flipTeams() {
+            this.teams = this.teams.reverse();
+            this.scores = this.scores.reverse();
+        },
+        nextPage() {
+            this.controlPage++;
+            if (this.currentChunk.length === 0) this.controlPage = 0;
+        },
+        setTeam(index, team) {
+            this.$set(this.teams, index, team);
+            this.controlMode = "default";
+        },
+        setScore(index, score) {
+            this.$set(this.scores, index, score);
+        },
+        setMiddle() {
+            this.middle = this.tempMiddle.toUpperCase();
+            this.controlMode = "default";
+        }
+    },
+    watch: {
+        controlMode(newMode) {
+            this.controlPage = 0;
+        }
+    },
+    computed: {
+        event() {
+            return ReactiveThing("event", {
+                theme: ReactiveThing("theme"),
+                teams: ReactiveArray("teams", {
+                    theme: ReactiveThing("theme")
+                })
+            })(this.broadcast);
+        },
+        chunkedTeams() {
+            if (!this.event?.teams) return [];
+            let i, j;
+            const chunkLength = 9;
+            const array = this.event.teams;
+            const chunked = [];
+
+            for (i = 0, j = array.length; i < j; i += chunkLength) {
+                chunked.push(array.slice(i, i + chunkLength));
+
+                // do whatever
+            }
+            console.log(chunked);
+            return chunked;
+        },
+        currentChunk() {
+            if (!this.chunkedTeams?.[this.controlPage]) return [];
+            return this.chunkedTeams[this.controlPage];
+        },
+        virtualMatch() {
+            return {
+                teams: this.teams
+            };
+        },
+        scoreArray() {
+            return [0, 1, 2, 3];
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .solo-overlay {
+        flex-direction: column;
+        font-family: "Industry", "SLMN-Industry", sans-serif;
+        color: black;
+    }
+    .solo-part {
+        height: 200px;
+        width: 100%;
+        overflow: hidden;
+        /* TODO: remove dev */ border: 2px solid red;
+    }
+
+    .solo--controls {
+        background-color: #222;
+    }
+
+    .solo--ingame {
+        position: relative;
+    }
+
+    .control-group {
+        display: flex;
+    }
+    .spacer {
+        width: 0;
+        flex-grow: 1;
+    }
+
+    .solo--desk {
+        padding: 0 10vw;
+    }
+
+    .solo-input-wrapper {
+        background-color: #f12c2c;
+        opacity: 0.8;
+        padding: 0 2em;
+    }
+
+    .solo-text-input {
+        font-size: 5em;
+        height: 150px;
+        width: 100%;
+        text-transform: uppercase;
+    }
+</style>
diff --git a/website/src/components/broadcast/SoloTeamControlButton.vue b/website/src/components/broadcast/SoloTeamControlButton.vue
new file mode 100644
index 00000000..06a813b0
--- /dev/null
+++ b/website/src/components/broadcast/SoloTeamControlButton.vue
@@ -0,0 +1,36 @@
+<template>
+    <SoloControlButton :click="() => click()" :style="css">
+        <ThemeLogo class="solo-team-logo" :theme="team.theme" border-width="0" />
+        <div class="solo-team-code">{{ team.code || "---" }}</div>
+    </SoloControlButton>
+</template>
+
+<script>
+import SoloControlButton from "@/components/broadcast/SoloControlButton";
+import { logoBackground1 } from "@/utils/theme-styles";
+import ThemeLogo from "@/components/website/ThemeLogo";
+
+export default {
+    name: "SoloTeamControlButton",
+    components: { ThemeLogo, SoloControlButton },
+    props: {
+        team: Object,
+        click: Function
+    },
+    computed: {
+        css() {
+            return logoBackground1(this.team);
+        }
+    },
+    mounted() {
+        console.log(this.click);
+    }
+};
+</script>
+
+<style scoped>
+    .solo-team-logo {
+        height: 120px;
+        width: 150px;
+    }
+</style>
diff --git a/website/src/components/broadcast/desk/DeskMatch.vue b/website/src/components/broadcast/desk/DeskMatch.vue
index 27ad4776..27df481b 100644
--- a/website/src/components/broadcast/desk/DeskMatch.vue
+++ b/website/src/components/broadcast/desk/DeskMatch.vue
@@ -10,7 +10,9 @@
                         <div class="score flex-center" v-bind:class="{'win': match.score_2 === match.first_to}"><span class="industry-align">{{ match.score_2 }}</span></div>
                     </div>
                     <div class="match-vs flex-center" :style="centerBorder" v-if="show.vs">
-                        <span class="industry-align">{{ scoreText }}</span>
+                        <transition mode="out-in" name="fade">
+                            <span class="industry-align" :key="scoreText">{{ scoreText }}</span>
+                        </transition>
                     </div>
                 </div>
             </div>
@@ -28,7 +30,7 @@ import DeskTeam from "@/components/broadcast/desk/DeskTeam";
 export default {
     name: "DeskMatch",
     components: { DeskTeam },
-    props: ["_match", "themeColor"],
+    props: ["_match", "themeColor", "customScores"],
     computed: {
         match() {
             if (!this._match?.special_event) {
@@ -45,6 +47,7 @@ export default {
             };
         },
         scores() {
+            if (this.customScores) return this.customScores;
             if (!this.match?.id) return [];
             return [this.match.score_1, this.match.score_2];
         },
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index 634852c1..72c4ed7c 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -25,6 +25,7 @@ import CamOverlay from "@/components/broadcast/cams/CamOverlay";
 import DeskCamsOverlay from "@/components/broadcast/cams/DeskCamsOverlay";
 import StaffOverlay from "@/components/broadcast/roots/StaffOverlay";
 import CamsWrapper from "@/components/broadcast/cams/CamsWrapper";
+import SoloOverlay from "@/components/broadcast/SoloOverlay";
 
 export default [
     { path: "ingame", component: IngameOverlay, props: route => ({ codes: route.query.codes }) },
@@ -78,5 +79,6 @@ export default [
     { path: "auction", component: AuctionOverlay, props: route => ({ category: route.query.category }) },
     { path: "ad-read", component: AdReadOverlay, props: route => ({ extraDelay: route.query.delay }) },
     { path: "logos", component: LogoAdOverlay },
-    { path: "staff", component: StaffOverlay }
+    { path: "staff", component: StaffOverlay },
+    { path: "solo", component: SoloOverlay }
 ];

From 8b658b5570be7cff58a640c3715e2e22ff0f975a Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Wed, 22 Dec 2021 06:11:24 +0000
Subject: [PATCH 02/14] Hide old overlay test background that shouldn't have
 gone live

---
 website/src/components/broadcast/cams/CamOverlay.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/components/broadcast/cams/CamOverlay.vue b/website/src/components/broadcast/cams/CamOverlay.vue
index 8b954704..0184f00b 100644
--- a/website/src/components/broadcast/cams/CamOverlay.vue
+++ b/website/src/components/broadcast/cams/CamOverlay.vue
@@ -206,7 +206,7 @@ export default {
     }
 
     #overlay {
-        background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/921883053968728074/unknown.png);
-        background-size: 1920px 1080px;
+    /*    background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/921883053968728074/unknown.png);*/
+    /*    background-size: 1920px 1080px;*/
     }
 </style>

From 03b6aadba7f57098390d701443124f84fd18464b Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Wed, 22 Dec 2021 06:12:33 +0000
Subject: [PATCH 03/14] Improve loading on player match pages by moving
 reactive code to a single component

---
 .../src/components/website/match/Match.vue    |  2 +-
 website/src/views/sub-views/PlayerMatches.vue | 34 +++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/website/src/components/website/match/Match.vue b/website/src/components/website/match/Match.vue
index a337877d..8877fd86 100644
--- a/website/src/components/website/match/Match.vue
+++ b/website/src/components/website/match/Match.vue
@@ -20,7 +20,7 @@ export default {
     methods: { url },
     computed: {
         match() {
-            return ReactiveRoot(this.id || this.hydratedMatch.id, {
+            return this.hydratedMatch || ReactiveRoot(this.id, {
                 event: ReactiveThing("event", {
                     theme: ReactiveThing("theme")
                 }),
diff --git a/website/src/views/sub-views/PlayerMatches.vue b/website/src/views/sub-views/PlayerMatches.vue
index 93889bd4..491c04b6 100644
--- a/website/src/views/sub-views/PlayerMatches.vue
+++ b/website/src/views/sub-views/PlayerMatches.vue
@@ -1,14 +1,13 @@
 <template>
     <div>
         <div class="container">
-          {{ matches.length }}
             <div class="role-group" v-for="rel in mainPlayerRelationships" v-bind:key="rel.meta.singular_name">
                 <h1>as {{ rel.meta.singular_name }} ({{ rel.items.length }})</h1>
                 <div class="row">
                     <Match class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3"
                            v-for="item in rel.items"
-                           v-bind:key="item.item"
-                           :id="item.item"
+                           v-bind:key="item.item.id"
+                           :hydrated-match="item.item"
                     />
                 </div>
             </div>
@@ -22,7 +21,7 @@
 -->
 <script>
 import Match from "@/components/website/match/Match";
-import { ReactiveCacheArray } from "@/utils/reactive";
+import { ReactiveArray, ReactiveCacheArray, ReactiveThing } from "@/utils/reactive";
 import { sortMatches } from "@/utils/sorts";
 
 export default {
@@ -32,17 +31,30 @@ export default {
         Match
     },
     computed: {
-        matches() {
-            return ReactiveCacheArray(this.relationshipMatches);
-        },
-        relationshipMatches() {
-            return Object.values(this.mainPlayerRelationships).map(rel => rel.items).flat().map(i => i.item);
+        relationships() {
+            if (!this.player?.player_relationships?.length) return [];
+            return ReactiveArray("player_relationships", {
+                event: ReactiveThing("event", {
+                    theme: ReactiveThing("theme")
+                }),
+                teams: ReactiveArray("teams", {
+                    theme: ReactiveThing("theme")
+                }),
+                matches: ReactiveArray("matches", {
+                    event: ReactiveThing("event", {
+                        theme: ReactiveThing("theme")
+                    }),
+                    teams: ReactiveArray("teams", {
+                        theme: ReactiveThing("theme")
+                    })
+                })
+            })(this.player);
         },
         mainPlayerRelationships() {
-            if (!this.player?.player_relationships) return {};
+            if (!this.relationships) return {};
             const groups = {};
 
-            this.player.player_relationships.forEach(rel => {
+            this.relationships.forEach(rel => {
                 if (!groups[rel.singular_name]) {
                     groups[rel.singular_name] = {
                         meta: {

From 567d7e0bb3ba120502ff2d051b3b19638e49d8ef Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Thu, 30 Dec 2021 20:25:06 +0000
Subject: [PATCH 04/14] Add the roster overlay to the solo overlay

---
 website/src/components/broadcast/SoloOverlay.vue     | 12 ++++++++++--
 .../src/components/broadcast/roots/RosterOverlay.vue |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index bb209049..1c9a33f8 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -74,6 +74,9 @@
                 <Middle v-if="middle" :text="middle" :key="middle" />
             </transition>
         </div>
+        <div class="solo-part solo--rosters">
+            <RosterOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
+        </div>
         <div class="solo-loader d-none">
             {{ event && event.name }}
         </div>
@@ -87,11 +90,13 @@ import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
 import SoloTeamControlButton from "@/components/broadcast/SoloTeamControlButton";
 import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 import Middle from "@/components/broadcast/Middle";
+import RosterOverlay from "@/components/broadcast/roots/RosterOverlay";
 
 export default {
     name: "SoloOverlay",
-    props: ["broadcast"],
+    props: ["broadcast", "client", "title"],
     components: {
+        RosterOverlay,
         SoloControlButton,
         SoloTeamControlButton,
         IngameTeam,
@@ -141,7 +146,8 @@ export default {
             return ReactiveThing("event", {
                 theme: ReactiveThing("theme"),
                 teams: ReactiveArray("teams", {
-                    theme: ReactiveThing("theme")
+                    theme: ReactiveThing("theme"),
+                    players: ReactiveArray("players")
                 })
             })(this.broadcast);
         },
@@ -186,8 +192,10 @@ export default {
         height: 200px;
         width: 100%;
         overflow: hidden;
+        position: relative;
         /* TODO: remove dev */ border: 2px solid red;
     }
+    .solo-part.solo--rosters { height: 1080px; }
 
     .solo--controls {
         background-color: #222;
diff --git a/website/src/components/broadcast/roots/RosterOverlay.vue b/website/src/components/broadcast/roots/RosterOverlay.vue
index 8f2b9213..c9e00200 100644
--- a/website/src/components/broadcast/roots/RosterOverlay.vue
+++ b/website/src/components/broadcast/roots/RosterOverlay.vue
@@ -25,7 +25,7 @@ import { cssImage, getRoleSVG } from "@/utils/content-utils";
 export default {
     name: "RosterOverlay",
     components: { GenericOverlay },
-    props: ["broadcast", "title", "showRoles", "sort"],
+    props: ["broadcast", "title", "showRoles", "sort", "virtualMatch"],
     computed: {
         event() {
             if (!this.broadcast || !this.broadcast.event) return null;
@@ -34,6 +34,7 @@ export default {
             });
         },
         match() {
+            if (this.virtualMatch) return this.virtualMatch;
             if (!this.broadcast || !this.broadcast.live_match) return null;
             return ReactiveRoot(this.broadcast.live_match[0], {
                 teams: ReactiveArray("teams", {

From 2f8b4cdf2826835eeb2b8f0a489dff8e39fef84f Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Sun, 30 Jan 2022 23:38:33 +0000
Subject: [PATCH 05/14] Add more customisable overlay, adding break/roster
 screen support

---
 .../src/components/broadcast/SoloOverlay.vue  | 75 ++++++++++++++-----
 .../components/broadcast/break/BreakMatch.vue |  5 ++
 .../broadcast/break/BreakOverlay.vue          | 13 +++-
 website/src/router/broadcast.js               |  2 +-
 4 files changed, 72 insertions(+), 23 deletions(-)

diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index 1c9a33f8..bf0e67b1 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -1,5 +1,19 @@
 <template>
     <div class="solo-overlay flex-center">
+        <div class="solo-part solo--ingame">
+            <transition-group name="fade" mode="out-in">
+                <IngameTeam :key="`${team.name}-${i}`" v-for="(team, i) in teams"
+                            :team="team" :right="i === 1" :score="scores[i]"/>
+            </transition-group>
+            <!--  :score="scores[i]" :hideScores="broadcast.hide_scores"
+                        :width="teamWidth" :codes="codes" -->
+
+            <transition name="mid" mode="out-in">
+                <Middle v-if="middle" :text="middle" :key="middle" />
+            </transition>
+        </div>
+
+
         <div class="solo-part solo--controls">
             <div class="control-group" v-if="controlMode === 'default'">
                 <SoloControlButton noclick left rotate>SLMN.GG</SoloControlButton>
@@ -9,6 +23,7 @@
                 <SoloControlButton color="#f22cf2" :click="() => controlMode = 'set-scores'">Set Scores</SoloControlButton>
                 <SoloControlButton :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Set Middle</SoloControlButton>
                 <div class="spacer"></div>
+                <SoloControlButton noclick style="font-size: 2.75em">Overlay height: {{ pageHeight }}<small>px</small></SoloControlButton>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
             <div class="control-group" v-if="controlMode === 'set-team-1'">
@@ -57,26 +72,16 @@
         </div>
 
 
-        <div class="solo-part solo--desk flex-center">
+        <div class="solo-part solo--desk flex-center" v-if="showModule('desk')">
             <DeskMatch class="w-100" :_match="virtualMatch" :custom-scores="scores" />
         </div>
 
-
-        <div class="solo-part solo--ingame">
-            <transition-group name="fade" mode="out-in">
-                <IngameTeam :key="`${team.name}-${i}`" v-for="(team, i) in teams"
-                            :team="team" :right="i === 1" :score="scores[i]"/>
-            </transition-group>
-            <!--  :score="scores[i]" :hideScores="broadcast.hide_scores"
-                        :width="teamWidth" :codes="codes" -->
-
-            <transition name="mid" mode="out-in">
-                <Middle v-if="middle" :text="middle" :key="middle" />
-            </transition>
-        </div>
-        <div class="solo-part solo--rosters">
+        <div class="solo-part solo--rosters" v-if="showModule('rosters')">
             <RosterOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
         </div>
+        <div class="solo-part solo--break" v-if="showModule('break')">
+            <BreakOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
+        </div>
         <div class="solo-loader d-none">
             {{ event && event.name }}
         </div>
@@ -91,12 +96,14 @@ import SoloTeamControlButton from "@/components/broadcast/SoloTeamControlButton"
 import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 import Middle from "@/components/broadcast/Middle";
 import RosterOverlay from "@/components/broadcast/roots/RosterOverlay";
+import BreakOverlay from "@/components/broadcast/break/BreakOverlay";
 
 export default {
     name: "SoloOverlay",
-    props: ["broadcast", "client", "title"],
+    props: ["broadcast", "client", "title", "modules"],
     components: {
         RosterOverlay,
+        BreakOverlay,
         SoloControlButton,
         SoloTeamControlButton,
         IngameTeam,
@@ -134,6 +141,9 @@ export default {
         setMiddle() {
             this.middle = this.tempMiddle.toUpperCase();
             this.controlMode = "default";
+        },
+        showModule(module) {
+            return (this.modules || []).includes(module);
         }
     },
     watch: {
@@ -155,7 +165,7 @@ export default {
             if (!this.event?.teams) return [];
             let i, j;
             const chunkLength = 9;
-            const array = this.event.teams;
+            const array = [...this.event.teams].sort((a, b) => a.team_category < b.team_category ? 1 : -1);
             const chunked = [];
 
             for (i = 0, j = array.length; i < j; i += chunkLength) {
@@ -172,11 +182,35 @@ export default {
         },
         virtualMatch() {
             return {
-                teams: this.teams
+                teams: this.teams,
+                show_on_overlays: true,
+                id: "virtual",
+                _virtual_match_category: this.matchCategory
             };
         },
         scoreArray() {
             return [0, 1, 2, 3];
+        },
+        pageHeight() {
+            let height = 0;
+
+            // defaults
+            height += 200; // control panel
+            height += 200; // ingame
+            if (this.showModule("desk")) height += 200; // rosters, full
+            if (this.showModule("rosters")) height += 1080; // rosters, full
+            if (this.showModule("break")) height += 1080; // rosters, full
+
+            return height;
+        },
+        matchCategory() {
+            // assuming match category matches team category
+            if (this.teams[0]?.team_category) {
+                // B League or 3;B League
+                const data = this.teams[0]?.team_category.split(";");
+                return data[data.length - 1];
+            }
+            return null;
         }
     }
 };
@@ -195,7 +229,10 @@ export default {
         position: relative;
         /* TODO: remove dev */ border: 2px solid red;
     }
-    .solo-part.solo--rosters { height: 1080px; }
+    .solo-part.solo--rosters,
+    .solo-part.solo--break {
+        height: 1080px;
+    }
 
     .solo--controls {
         background-color: #222;
diff --git a/website/src/components/broadcast/break/BreakMatch.vue b/website/src/components/broadcast/break/BreakMatch.vue
index 12e5239e..d1736c3f 100644
--- a/website/src/components/broadcast/break/BreakMatch.vue
+++ b/website/src/components/broadcast/break/BreakMatch.vue
@@ -127,6 +127,11 @@ export default {
             // return null;
         }
     },
+    watch: {
+        match() {
+            console.log(this.match);
+        }
+    },
     methods: {
         teamLogo(team) {
             if (!team || !team.theme) return {};
diff --git a/website/src/components/broadcast/break/BreakOverlay.vue b/website/src/components/broadcast/break/BreakOverlay.vue
index e02a522d..f91b848c 100644
--- a/website/src/components/broadcast/break/BreakOverlay.vue
+++ b/website/src/components/broadcast/break/BreakOverlay.vue
@@ -26,7 +26,7 @@
                         <BreakMatch v-for="match in schedule" :timezone="broadcast.timezone" :match="match" :expanded="true" v-bind:key="match.id" :theme-color="themeColor" />
                     </transition-group>
                     <div class="break-col break-standings" v-if="automatedShow === 'Standings'" key="Standings">
-                        <Standings :event="event" :stage="broadcast.current_stage" />
+                        <Standings :event="event" :stage="currentStage" />
                     </div>
                     <div class="break-col break-image" v-if="automatedShow === 'Image'" :key="`image-${breakImageURL}`">
                         <div class="break-image-inner" :style="breakImage"></div>
@@ -46,7 +46,7 @@
         </div>
         <div class="break-preload">
             <BreakMatch v-for="match in schedule" :timezone="broadcast.timezone" :match="match" :expanded="true" v-bind:key="match.id" :theme-color="themeColor" />
-            <Standings :event="event" :stage="broadcast.current_stage" />
+            <Standings :event="event" :stage="currentStage" />
             <div class="break-image-inner" :style="cssImage('backgroundImage', broadcast, ['break_image'], 1080, false)"></div>
             <Bracket class="break-col break-bracket" v-if="breakDisplay === 'Bracket'" key="Bracket" :event="event" :bracket="bracket" use-overlay-scale />
         </div>
@@ -71,7 +71,7 @@ const tickTime = 25;
 
 export default {
     name: "BreakOverlay",
-    props: ["broadcast", "title"],
+    props: ["broadcast", "title", "virtualMatch"],
     components: { BreakStaffList, BreakHeadlines, BroadcastPreview, Bracket, Standings, BreakMatch, Sponsors, Countdown },
     data: () => ({
         tick: 0,
@@ -98,6 +98,8 @@ export default {
             return this.breakImage?.backgroundImage;
         },
         nextMatch() {
+            if (this.virtualMatch) return this.virtualMatch;
+
             if (!this.broadcast || !this.broadcast.live_match || !this.broadcast.show_live_match) return null;
             return ReactiveRoot(this.broadcast.live_match[0], {
                 teams: ReactiveArray("teams", {
@@ -106,6 +108,8 @@ export default {
             });
         },
         fullSchedule() {
+            if (this.virtualMatch) return [this.virtualMatch];
+
             if (!this.broadcast || !this.broadcast.schedule) return null;
             return ReactiveArray("schedule", {
                 teams: ReactiveArray("teams", {
@@ -195,6 +199,9 @@ export default {
                 // empty or automated - do automation
                 return this.suggestedShow;
             }
+        },
+        currentStage() {
+            return this.virtualMatch?._virtual_match_category || this.broadcast?.current_stage;
         }
     },
     watch: {
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index 72c4ed7c..4426a151 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -80,5 +80,5 @@ export default [
     { path: "ad-read", component: AdReadOverlay, props: route => ({ extraDelay: route.query.delay }) },
     { path: "logos", component: LogoAdOverlay },
     { path: "staff", component: StaffOverlay },
-    { path: "solo", component: SoloOverlay }
+    { path: "solo", component: SoloOverlay, props: route => ({ modules: route.query.modules?.split(",") }) }
 ];

From faedecf9634a771f126b0def7f8c4198560cd84b Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Tue, 21 Dec 2021 03:27:51 +0000
Subject: [PATCH 06/14] New solo - added files and majority of code

---
 .../broadcast/SoloControlButton.vue           |  93 ++++++++
 .../src/components/broadcast/SoloOverlay.vue  | 224 ++++++++++++++++++
 .../broadcast/SoloTeamControlButton.vue       |  36 +++
 .../components/broadcast/desk/DeskMatch.vue   |   7 +-
 website/src/router/broadcast.js               |   4 +-
 5 files changed, 361 insertions(+), 3 deletions(-)
 create mode 100644 website/src/components/broadcast/SoloControlButton.vue
 create mode 100644 website/src/components/broadcast/SoloOverlay.vue
 create mode 100644 website/src/components/broadcast/SoloTeamControlButton.vue

diff --git a/website/src/components/broadcast/SoloControlButton.vue b/website/src/components/broadcast/SoloControlButton.vue
new file mode 100644
index 00000000..5c52d2bc
--- /dev/null
+++ b/website/src/components/broadcast/SoloControlButton.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="control-button" v-bind:class="elClass" @click="() => click()" :style="css">
+        <span><slot></slot></span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SoloControlButton",
+    props: {
+        left: Boolean,
+        right: Boolean,
+        rotate: Boolean,
+        noclick: Boolean,
+        click: Function,
+        color: String
+    },
+    computed: {
+        css() {
+            if (!this.color) return {};
+            return {
+                backgroundColor: this.color
+            };
+        },
+        elClass() {
+            return {
+                "control-slice": this.left || this.right,
+                "control-left": this.left,
+                "control-right": this.right,
+                rotate: this.rotate,
+                noclick: this.noclick
+            };
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .control-button {
+        width: 200px;
+        height: 200px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: 3em;
+        line-height: 1.2;
+        text-align: center;
+        font-weight: bold;
+        text-transform: uppercase;
+
+        background-color: #f12c2c;
+
+        opacity: 0.8;
+
+        cursor: pointer;
+        /*user-select: none;*/
+    }
+    .control-button span {
+        pointer-events: none;
+        user-select: none
+    }
+    .control-button.noclick {
+        cursor: default;
+        opacity: 0.7;
+        background-color: white;
+    }
+    .control-button:not(.noclick):hover {
+        opacity: 1;
+    }
+
+    .control-button.control-slice {
+        width: 60px;
+        font-size: 2em;
+    }
+    .control-button.control-left.rotate span {
+        transform: rotate(-90deg);
+    }
+    .control-button.control-right.rotate span {
+        transform: rotate(90deg);
+    }
+    .control-button.score {
+        background-color: #ccc;
+        font-size: 6em;
+    }
+    .control-button.score span {
+        transform: translate(0, -0.09em);
+    }
+    .control-button.score.is-score {
+        background-color: var(--theme, red);
+    }
+</style>
diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
new file mode 100644
index 00000000..bb209049
--- /dev/null
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -0,0 +1,224 @@
+<template>
+    <div class="solo-overlay flex-center">
+        <div class="solo-part solo--controls">
+            <div class="control-group" v-if="controlMode === 'default'">
+                <SoloControlButton noclick left rotate>SLMN.GG</SoloControlButton>
+                <SoloControlButton color="#f22cf2" :click="() => flipTeams()">Flip teams</SoloControlButton>
+                <SoloControlButton :color="teams[0] && teams[0].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-1'">Set Team 1</SoloControlButton>
+                <SoloControlButton :color="teams[1] && teams[1].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-2'">Set Team 2</SoloControlButton>
+                <SoloControlButton color="#f22cf2" :click="() => controlMode = 'set-scores'">Set Scores</SoloControlButton>
+                <SoloControlButton :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Set Middle</SoloControlButton>
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+            <div class="control-group" v-if="controlMode === 'set-team-1'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <SoloTeamControlButton v-for="team in currentChunk" v-bind:key="team.id" :team="team"
+                 :click="() => setTeam(0, team)"/>
+                <div class="spacer"></div>
+                <SoloControlButton color="#2cf22c" right rotate :click="() => nextPage()">Next</SoloControlButton>
+            </div>
+
+            <div class="control-group" v-if="controlMode === 'set-team-2'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <SoloTeamControlButton v-for="team in currentChunk" v-bind:key="team.id" :team="team"
+                 :click="() => setTeam(1, team)"/>
+                <div class="spacer"></div>
+                <SoloControlButton color="#2cf22c" right rotate :click="() => nextPage()">Next</SoloControlButton>
+            </div>
+
+            <div class="control-group" v-if="controlMode === 'set-scores'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <div class="spacer"></div>
+
+                <SoloControlButton v-bind:class="{'is-score': scores[0] === score}" class="score" v-for="score in [...scoreArray].reverse()" v-bind:key="'team-1-' + score"
+                                   :click="() => setScore(0, score)">{{ score }}</SoloControlButton>
+
+
+                <SoloTeamControlButton noclick v-for="team in teams" v-bind:key="team.id" :team="team"/>
+
+                <SoloControlButton v-bind:class="{'is-score': scores[1] === score}" class="score" v-for="score in scoreArray" v-bind:key="'team-2-' + score"
+                                   :click="() => setScore(1, score)">{{ score }}</SoloControlButton>
+
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+
+            <div class="control-group" v-if="controlMode === 'set-middle'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+
+                <div class="solo-input-wrapper flex-center w-100">
+                    <input type="text" v-model="tempMiddle" class="solo-text-input">
+                </div>
+                <SoloControlButton color="#f22cf2" :click="() => setMiddle()">Set</SoloControlButton>
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+        </div>
+
+
+        <div class="solo-part solo--desk flex-center">
+            <DeskMatch class="w-100" :_match="virtualMatch" :custom-scores="scores" />
+        </div>
+
+
+        <div class="solo-part solo--ingame">
+            <transition-group name="fade" mode="out-in">
+                <IngameTeam :key="`${team.name}-${i}`" v-for="(team, i) in teams"
+                            :team="team" :right="i === 1" :score="scores[i]"/>
+            </transition-group>
+            <!--  :score="scores[i]" :hideScores="broadcast.hide_scores"
+                        :width="teamWidth" :codes="codes" -->
+
+            <transition name="mid" mode="out-in">
+                <Middle v-if="middle" :text="middle" :key="middle" />
+            </transition>
+        </div>
+        <div class="solo-loader d-none">
+            {{ event && event.name }}
+        </div>
+    </div>
+</template>
+
+<script>
+import IngameTeam from "@/components/broadcast/IngameTeam";
+import SoloControlButton from "@/components/broadcast/SoloControlButton";
+import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
+import SoloTeamControlButton from "@/components/broadcast/SoloTeamControlButton";
+import DeskMatch from "@/components/broadcast/desk/DeskMatch";
+import Middle from "@/components/broadcast/Middle";
+
+export default {
+    name: "SoloOverlay",
+    props: ["broadcast"],
+    components: {
+        SoloControlButton,
+        SoloTeamControlButton,
+        IngameTeam,
+        DeskMatch,
+        Middle
+    },
+    data: () => ({
+        controlMode: "default",
+        controlPage: 0,
+        middle: "",
+        tempMiddle: "",
+
+        teams: [
+            { name: "Team 1", has_theme: 0 },
+            { name: "Team 2", has_theme: 0 }
+        ],
+        scores: [0, 0]
+    }),
+    methods: {
+        flipTeams() {
+            this.teams = this.teams.reverse();
+            this.scores = this.scores.reverse();
+        },
+        nextPage() {
+            this.controlPage++;
+            if (this.currentChunk.length === 0) this.controlPage = 0;
+        },
+        setTeam(index, team) {
+            this.$set(this.teams, index, team);
+            this.controlMode = "default";
+        },
+        setScore(index, score) {
+            this.$set(this.scores, index, score);
+        },
+        setMiddle() {
+            this.middle = this.tempMiddle.toUpperCase();
+            this.controlMode = "default";
+        }
+    },
+    watch: {
+        controlMode(newMode) {
+            this.controlPage = 0;
+        }
+    },
+    computed: {
+        event() {
+            return ReactiveThing("event", {
+                theme: ReactiveThing("theme"),
+                teams: ReactiveArray("teams", {
+                    theme: ReactiveThing("theme")
+                })
+            })(this.broadcast);
+        },
+        chunkedTeams() {
+            if (!this.event?.teams) return [];
+            let i, j;
+            const chunkLength = 9;
+            const array = this.event.teams;
+            const chunked = [];
+
+            for (i = 0, j = array.length; i < j; i += chunkLength) {
+                chunked.push(array.slice(i, i + chunkLength));
+
+                // do whatever
+            }
+            console.log(chunked);
+            return chunked;
+        },
+        currentChunk() {
+            if (!this.chunkedTeams?.[this.controlPage]) return [];
+            return this.chunkedTeams[this.controlPage];
+        },
+        virtualMatch() {
+            return {
+                teams: this.teams
+            };
+        },
+        scoreArray() {
+            return [0, 1, 2, 3];
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .solo-overlay {
+        flex-direction: column;
+        font-family: "Industry", "SLMN-Industry", sans-serif;
+        color: black;
+    }
+    .solo-part {
+        height: 200px;
+        width: 100%;
+        overflow: hidden;
+        /* TODO: remove dev */ border: 2px solid red;
+    }
+
+    .solo--controls {
+        background-color: #222;
+    }
+
+    .solo--ingame {
+        position: relative;
+    }
+
+    .control-group {
+        display: flex;
+    }
+    .spacer {
+        width: 0;
+        flex-grow: 1;
+    }
+
+    .solo--desk {
+        padding: 0 10vw;
+    }
+
+    .solo-input-wrapper {
+        background-color: #f12c2c;
+        opacity: 0.8;
+        padding: 0 2em;
+    }
+
+    .solo-text-input {
+        font-size: 5em;
+        height: 150px;
+        width: 100%;
+        text-transform: uppercase;
+    }
+</style>
diff --git a/website/src/components/broadcast/SoloTeamControlButton.vue b/website/src/components/broadcast/SoloTeamControlButton.vue
new file mode 100644
index 00000000..06a813b0
--- /dev/null
+++ b/website/src/components/broadcast/SoloTeamControlButton.vue
@@ -0,0 +1,36 @@
+<template>
+    <SoloControlButton :click="() => click()" :style="css">
+        <ThemeLogo class="solo-team-logo" :theme="team.theme" border-width="0" />
+        <div class="solo-team-code">{{ team.code || "---" }}</div>
+    </SoloControlButton>
+</template>
+
+<script>
+import SoloControlButton from "@/components/broadcast/SoloControlButton";
+import { logoBackground1 } from "@/utils/theme-styles";
+import ThemeLogo from "@/components/website/ThemeLogo";
+
+export default {
+    name: "SoloTeamControlButton",
+    components: { ThemeLogo, SoloControlButton },
+    props: {
+        team: Object,
+        click: Function
+    },
+    computed: {
+        css() {
+            return logoBackground1(this.team);
+        }
+    },
+    mounted() {
+        console.log(this.click);
+    }
+};
+</script>
+
+<style scoped>
+    .solo-team-logo {
+        height: 120px;
+        width: 150px;
+    }
+</style>
diff --git a/website/src/components/broadcast/desk/DeskMatch.vue b/website/src/components/broadcast/desk/DeskMatch.vue
index 9472d441..aed7342a 100644
--- a/website/src/components/broadcast/desk/DeskMatch.vue
+++ b/website/src/components/broadcast/desk/DeskMatch.vue
@@ -10,7 +10,9 @@
                         <div class="score flex-center" v-bind:class="{'win': match.score_2 === match.first_to}"><span class="industry-align">{{ match.score_2 }}</span></div>
                     </div>
                     <div class="match-vs flex-center" :style="centerBorder" v-if="show.vs">
-                        <span class="industry-align">{{ scoreText }}</span>
+                        <transition mode="out-in" name="fade">
+                            <span class="industry-align" :key="scoreText">{{ scoreText }}</span>
+                        </transition>
                     </div>
                 </div>
             </div>
@@ -29,7 +31,7 @@ import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 export default {
     name: "DeskMatch",
     components: { DeskTeam },
-    props: ["_match", "themeColor", "matchID"],
+    props: ["_match", "themeColor", "matchID", "customScores"],
     computed: {
         matchData() {
             return this._match || ReactiveRoot(this.matchID, {
@@ -56,6 +58,7 @@ export default {
             };
         },
         scores() {
+            if (this.customScores) return this.customScores;
             if (!this.match?.id) return [];
             return [this.match.score_1, this.match.score_2];
         },
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index 8355bc02..78c59ce1 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -25,6 +25,7 @@ import CamOverlay from "@/components/broadcast/cams/CamOverlay";
 import DeskCamsOverlay from "@/components/broadcast/cams/DeskCamsOverlay";
 import StaffOverlay from "@/components/broadcast/roots/StaffOverlay";
 import CamsWrapper from "@/components/broadcast/cams/CamsWrapper";
+import SoloOverlay from "@/components/broadcast/SoloOverlay";
 import SeasonHistoryOverlay from "@/components/broadcast/roots/SeasonHistoryOverlay";
 import IframeOverlay from "@/components/broadcast/roots/IframeOverlay";
 import TallyTransmitter from "@/components/broadcast/roots/TallyTransmitter";
@@ -91,5 +92,6 @@ export default [
     { path: "logos", component: LogoAdOverlay },
     { path: "staff", component: StaffOverlay },
     { path: "player-history", component: PlayerHistory, props: route => ({ showMinor: route.query.minor }) },
-    { path: "overview", component: OverviewOverlay }
+    { path: "overview", component: OverviewOverlay },
+    { path: "solo", component: SoloOverlay }
 ];

From fecad68f6258e17bd0907265cfb6adcea86bb295 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Thu, 30 Dec 2021 20:25:06 +0000
Subject: [PATCH 07/14] Add the roster overlay to the solo overlay

---
 website/src/components/broadcast/SoloOverlay.vue     | 12 ++++++++++--
 .../src/components/broadcast/roots/RosterOverlay.vue |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index bb209049..1c9a33f8 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -74,6 +74,9 @@
                 <Middle v-if="middle" :text="middle" :key="middle" />
             </transition>
         </div>
+        <div class="solo-part solo--rosters">
+            <RosterOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
+        </div>
         <div class="solo-loader d-none">
             {{ event && event.name }}
         </div>
@@ -87,11 +90,13 @@ import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
 import SoloTeamControlButton from "@/components/broadcast/SoloTeamControlButton";
 import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 import Middle from "@/components/broadcast/Middle";
+import RosterOverlay from "@/components/broadcast/roots/RosterOverlay";
 
 export default {
     name: "SoloOverlay",
-    props: ["broadcast"],
+    props: ["broadcast", "client", "title"],
     components: {
+        RosterOverlay,
         SoloControlButton,
         SoloTeamControlButton,
         IngameTeam,
@@ -141,7 +146,8 @@ export default {
             return ReactiveThing("event", {
                 theme: ReactiveThing("theme"),
                 teams: ReactiveArray("teams", {
-                    theme: ReactiveThing("theme")
+                    theme: ReactiveThing("theme"),
+                    players: ReactiveArray("players")
                 })
             })(this.broadcast);
         },
@@ -186,8 +192,10 @@ export default {
         height: 200px;
         width: 100%;
         overflow: hidden;
+        position: relative;
         /* TODO: remove dev */ border: 2px solid red;
     }
+    .solo-part.solo--rosters { height: 1080px; }
 
     .solo--controls {
         background-color: #222;
diff --git a/website/src/components/broadcast/roots/RosterOverlay.vue b/website/src/components/broadcast/roots/RosterOverlay.vue
index 9d5e4836..69d01219 100644
--- a/website/src/components/broadcast/roots/RosterOverlay.vue
+++ b/website/src/components/broadcast/roots/RosterOverlay.vue
@@ -25,12 +25,13 @@ import { cssImage, getRoleSVG } from "@/utils/content-utils";
 export default {
     name: "RosterOverlay",
     components: { GenericOverlay },
-    props: ["broadcast", "title", "showRoles", "sort"],
+    props: ["broadcast", "title", "showRoles", "sort", "virtualMatch"],
     computed: {
         accentColor() {
             return this.$root?.broadcast?.event?.theme?.color_theme;
         },
         match() {
+            if (this.virtualMatch) return this.virtualMatch;
             if (!this.broadcast || !this.broadcast.live_match) return null;
             return ReactiveRoot(this.broadcast.live_match[0], {
                 teams: ReactiveArray("teams", {

From 9ac5fc833b93557cd2381938a7d1c96b791d03af Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Sun, 30 Jan 2022 23:38:33 +0000
Subject: [PATCH 08/14] Add more customisable overlay, adding break/roster
 screen support

---
 .../src/components/broadcast/SoloOverlay.vue  | 75 ++++++++++++++-----
 .../components/broadcast/break/BreakMatch.vue |  5 ++
 .../broadcast/break/BreakOverlay.vue          | 16 ++--
 website/src/router/broadcast.js               |  2 +-
 4 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index 1c9a33f8..bf0e67b1 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -1,5 +1,19 @@
 <template>
     <div class="solo-overlay flex-center">
+        <div class="solo-part solo--ingame">
+            <transition-group name="fade" mode="out-in">
+                <IngameTeam :key="`${team.name}-${i}`" v-for="(team, i) in teams"
+                            :team="team" :right="i === 1" :score="scores[i]"/>
+            </transition-group>
+            <!--  :score="scores[i]" :hideScores="broadcast.hide_scores"
+                        :width="teamWidth" :codes="codes" -->
+
+            <transition name="mid" mode="out-in">
+                <Middle v-if="middle" :text="middle" :key="middle" />
+            </transition>
+        </div>
+
+
         <div class="solo-part solo--controls">
             <div class="control-group" v-if="controlMode === 'default'">
                 <SoloControlButton noclick left rotate>SLMN.GG</SoloControlButton>
@@ -9,6 +23,7 @@
                 <SoloControlButton color="#f22cf2" :click="() => controlMode = 'set-scores'">Set Scores</SoloControlButton>
                 <SoloControlButton :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Set Middle</SoloControlButton>
                 <div class="spacer"></div>
+                <SoloControlButton noclick style="font-size: 2.75em">Overlay height: {{ pageHeight }}<small>px</small></SoloControlButton>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
             <div class="control-group" v-if="controlMode === 'set-team-1'">
@@ -57,26 +72,16 @@
         </div>
 
 
-        <div class="solo-part solo--desk flex-center">
+        <div class="solo-part solo--desk flex-center" v-if="showModule('desk')">
             <DeskMatch class="w-100" :_match="virtualMatch" :custom-scores="scores" />
         </div>
 
-
-        <div class="solo-part solo--ingame">
-            <transition-group name="fade" mode="out-in">
-                <IngameTeam :key="`${team.name}-${i}`" v-for="(team, i) in teams"
-                            :team="team" :right="i === 1" :score="scores[i]"/>
-            </transition-group>
-            <!--  :score="scores[i]" :hideScores="broadcast.hide_scores"
-                        :width="teamWidth" :codes="codes" -->
-
-            <transition name="mid" mode="out-in">
-                <Middle v-if="middle" :text="middle" :key="middle" />
-            </transition>
-        </div>
-        <div class="solo-part solo--rosters">
+        <div class="solo-part solo--rosters" v-if="showModule('rosters')">
             <RosterOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
         </div>
+        <div class="solo-part solo--break" v-if="showModule('break')">
+            <BreakOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
+        </div>
         <div class="solo-loader d-none">
             {{ event && event.name }}
         </div>
@@ -91,12 +96,14 @@ import SoloTeamControlButton from "@/components/broadcast/SoloTeamControlButton"
 import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 import Middle from "@/components/broadcast/Middle";
 import RosterOverlay from "@/components/broadcast/roots/RosterOverlay";
+import BreakOverlay from "@/components/broadcast/break/BreakOverlay";
 
 export default {
     name: "SoloOverlay",
-    props: ["broadcast", "client", "title"],
+    props: ["broadcast", "client", "title", "modules"],
     components: {
         RosterOverlay,
+        BreakOverlay,
         SoloControlButton,
         SoloTeamControlButton,
         IngameTeam,
@@ -134,6 +141,9 @@ export default {
         setMiddle() {
             this.middle = this.tempMiddle.toUpperCase();
             this.controlMode = "default";
+        },
+        showModule(module) {
+            return (this.modules || []).includes(module);
         }
     },
     watch: {
@@ -155,7 +165,7 @@ export default {
             if (!this.event?.teams) return [];
             let i, j;
             const chunkLength = 9;
-            const array = this.event.teams;
+            const array = [...this.event.teams].sort((a, b) => a.team_category < b.team_category ? 1 : -1);
             const chunked = [];
 
             for (i = 0, j = array.length; i < j; i += chunkLength) {
@@ -172,11 +182,35 @@ export default {
         },
         virtualMatch() {
             return {
-                teams: this.teams
+                teams: this.teams,
+                show_on_overlays: true,
+                id: "virtual",
+                _virtual_match_category: this.matchCategory
             };
         },
         scoreArray() {
             return [0, 1, 2, 3];
+        },
+        pageHeight() {
+            let height = 0;
+
+            // defaults
+            height += 200; // control panel
+            height += 200; // ingame
+            if (this.showModule("desk")) height += 200; // rosters, full
+            if (this.showModule("rosters")) height += 1080; // rosters, full
+            if (this.showModule("break")) height += 1080; // rosters, full
+
+            return height;
+        },
+        matchCategory() {
+            // assuming match category matches team category
+            if (this.teams[0]?.team_category) {
+                // B League or 3;B League
+                const data = this.teams[0]?.team_category.split(";");
+                return data[data.length - 1];
+            }
+            return null;
         }
     }
 };
@@ -195,7 +229,10 @@ export default {
         position: relative;
         /* TODO: remove dev */ border: 2px solid red;
     }
-    .solo-part.solo--rosters { height: 1080px; }
+    .solo-part.solo--rosters,
+    .solo-part.solo--break {
+        height: 1080px;
+    }
 
     .solo--controls {
         background-color: #222;
diff --git a/website/src/components/broadcast/break/BreakMatch.vue b/website/src/components/broadcast/break/BreakMatch.vue
index dc0b9b57..acb9135c 100644
--- a/website/src/components/broadcast/break/BreakMatch.vue
+++ b/website/src/components/broadcast/break/BreakMatch.vue
@@ -138,6 +138,11 @@ export default {
             // return null;
         }
     },
+    watch: {
+        match() {
+            console.log(this.match);
+        }
+    },
     methods: {
         teamLogo(team) {
             if (!team || !team.theme) return {};
diff --git a/website/src/components/broadcast/break/BreakOverlay.vue b/website/src/components/broadcast/break/BreakOverlay.vue
index 43367a7c..6409d710 100644
--- a/website/src/components/broadcast/break/BreakOverlay.vue
+++ b/website/src/components/broadcast/break/BreakOverlay.vue
@@ -26,8 +26,8 @@
                     <transition-group class="break-col break-schedule" name="a--match" v-if="automatedShow === 'Schedule'" key="Schedule">
                         <BreakMatch v-for="match in schedule" :timezone="broadcast.timezone" :match="match" :expanded="true" v-bind:key="match.id" :theme-color="themeColor" />
                     </transition-group>
-                    <div class="break-col break-standings" v-if="automatedShow === 'Standings'" :key="`Standings-${broadcast.current_stage || ''}`">
-                        <Standings :event="event" :stage="broadcast.current_stage" />
+                    <div class="break-col break-standings" v-if="automatedShow === 'Standings'" :key="`Standings-${currentStage || ''}`">
+                        <Standings :event="event" :stage="currentStage" />
                     </div>
                     <div class="break-col break-image" v-if="automatedShow === 'Image'" :key="`image-${breakImageURL}`">
                         <div v-if="breakImageURL" class="break-image-inner" :style="breakImage"></div>
@@ -50,7 +50,7 @@
         </div>
         <div class="break-preload">
             <BreakMatch v-for="match in schedule" :timezone="broadcast.timezone" :match="match" :expanded="true" v-bind:key="match.id" :theme-color="themeColor" />
-            <Standings :event="event" :stage="broadcast.current_stage" />
+            <Standings :event="event" :stage="currentStage" />
             <div class="break-image-inner" :style="cssImage('backgroundImage', broadcast, ['break_image'], 1080, false)"></div>
             <Bracket class="break-col break-bracket" :event="event" :bracket="bracket" use-overlay-scale />
             <BreakMatchup class="break-col break-matchup" :match="nextMatch" />
@@ -80,7 +80,7 @@ const tickTime = 25;
 
 export default {
     name: "BreakOverlay",
-    props: ["broadcast", "title", "animationActive"],
+    props: ["broadcast", "title", "animationActive", "virtualMatch"],
     components: { ThemeLogo, BreakMatchup, BreakStaffList, BreakHeadlines, BroadcastPreview, Bracket, Standings, BreakMatch, Sponsors, Countdown },
     data: () => ({
         tick: 0,
@@ -107,6 +107,7 @@ export default {
             return this.breakImage?.backgroundImage;
         },
         nextMatch() {
+            if (this.virtualMatch) return this.virtualMatch;
             if (!this.broadcast || !this.broadcast.live_match || !this.broadcast.show_live_match) return null;
             return ReactiveRoot(this.broadcast.live_match[0], {
                 teams: ReactiveArray("teams", {
@@ -115,6 +116,7 @@ export default {
             });
         },
         fullSchedule() {
+            if (this.virtualMatch) return [this.virtualMatch];
             if (!this.broadcast || !this.broadcast.schedule) return null;
             return ReactiveArray("schedule", {
                 teams: ReactiveArray("teams", {
@@ -181,8 +183,7 @@ export default {
             let slides = this.broadcast.break_automation.filter(s => s.startsWith("use:")).map(s => s.replace("use: ", ""));
             console.log(slides);
             if (!this.nextMatch) slides = slides.filter(s => s !== "Matchup");
-
-            console.log(slides, this.nextMatch);
+            // console.log(slides, this.nextMatch);
 
             // TODO: add stuff here that changes based on the countdown remaining
 
@@ -206,6 +207,9 @@ export default {
                 return this.suggestedShow;
             }
         },
+        currentStage() {
+            return this.virtualMatch?._virtual_match_category || this.broadcast?.current_stage;
+        },
         matchIsLast() {
             if (!this.schedule?.length) return true; // no schedule - assume last
             if (!this.nextMatch?.first_to) return false; // no match - assume others??
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index 78c59ce1..4f67a62c 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -93,5 +93,5 @@ export default [
     { path: "staff", component: StaffOverlay },
     { path: "player-history", component: PlayerHistory, props: route => ({ showMinor: route.query.minor }) },
     { path: "overview", component: OverviewOverlay },
-    { path: "solo", component: SoloOverlay }
+    { path: "solo", component: SoloOverlay, props: route => ({ modules: route.query.modules?.split(",") }) }
 ];

From 0de130c4403b585109e691c3e6a73a670f994440 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Mon, 7 Feb 2022 00:26:26 +0000
Subject: [PATCH 09/14] Lots of solo changes

---
 website/src/apps/BroadcastApp.vue             |   6 +-
 .../src/components/broadcast/MapDisplay.vue   |   3 +-
 .../broadcast/SoloControlButton.vue           |  16 +-
 .../components/broadcast/SoloMapButton.vue    |  41 +++++
 .../src/components/broadcast/SoloOverlay.vue  | 174 ++++++++++++++++--
 .../src/components/broadcast/Standings.vue    |   2 +-
 .../broadcast/break/BreakOverlay.vue          |  34 +++-
 .../components/broadcast/desk/DeskMatch.vue   |   5 +-
 .../components/broadcast/desk/DeskTeam.vue    |  16 +-
 .../broadcast/roots/OverviewOverlay.vue       |  11 +-
 10 files changed, 267 insertions(+), 41 deletions(-)
 create mode 100644 website/src/components/broadcast/SoloMapButton.vue

diff --git a/website/src/apps/BroadcastApp.vue b/website/src/apps/BroadcastApp.vue
index b6e79e3c..be97a51e 100644
--- a/website/src/apps/BroadcastApp.vue
+++ b/website/src/apps/BroadcastApp.vue
@@ -42,9 +42,9 @@ export default {
             window.addEventListener("obsSourceActiveChanged", (e) => {
                 this.active = e.detail.active;
             });
-            document.body.addEventListener("click", () => {
-                this.active = !this.active;
-            });
+            // document.body.addEventListener("click", () => {
+            //     this.active = !this.active;
+            // });
         }
     },
     watch: {
diff --git a/website/src/components/broadcast/MapDisplay.vue b/website/src/components/broadcast/MapDisplay.vue
index 0857e73b..d5c49636 100644
--- a/website/src/components/broadcast/MapDisplay.vue
+++ b/website/src/components/broadcast/MapDisplay.vue
@@ -18,13 +18,14 @@ import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 export default {
     name: "MapDisplay",
     components: { MapSegment },
-    props: ["broadcast", "animationActive", "useTransitions"],
+    props: ["broadcast", "animationActive", "useTransitions", "virtualMatch"],
     data: () => ({
         activeAudio: null,
         showNextMap: false
     }),
     computed: {
         match() {
+            if (this.virtualMatch) return this.virtualMatch;
             if (!this.broadcast?.live_match) return null;
             return ReactiveRoot(this.broadcast.live_match[0], {
                 teams: ReactiveArray("teams", {
diff --git a/website/src/components/broadcast/SoloControlButton.vue b/website/src/components/broadcast/SoloControlButton.vue
index 5c52d2bc..6852b628 100644
--- a/website/src/components/broadcast/SoloControlButton.vue
+++ b/website/src/components/broadcast/SoloControlButton.vue
@@ -1,6 +1,7 @@
 <template>
-    <div class="control-button" v-bind:class="elClass" @click="() => click()" :style="css">
-        <span><slot></slot></span>
+    <div class="control-button d-flex flex-column" v-bind:class="elClass" @click="() => click()" :style="css">
+        <span class="icon" v-if="icon"><i :class="icon"></i></span>
+        <span class="slot"><slot></slot></span>
     </div>
 </template>
 
@@ -13,7 +14,8 @@ export default {
         rotate: Boolean,
         noclick: Boolean,
         click: Function,
-        color: String
+        color: String,
+        icon: String
     },
     computed: {
         css() {
@@ -28,7 +30,8 @@ export default {
                 "control-left": this.left,
                 "control-right": this.right,
                 rotate: this.rotate,
-                noclick: this.noclick
+                noclick: this.noclick,
+                "has-icon": !!this.icon
             };
         }
     }
@@ -61,6 +64,11 @@ export default {
         pointer-events: none;
         user-select: none
     }
+    .control-button.has-icon .slot {
+        margin-top: .25em;
+        font-size: 0.9em;
+        line-height: 1;
+    }
     .control-button.noclick {
         cursor: default;
         opacity: 0.7;
diff --git a/website/src/components/broadcast/SoloMapButton.vue b/website/src/components/broadcast/SoloMapButton.vue
new file mode 100644
index 00000000..4aae4250
--- /dev/null
+++ b/website/src/components/broadcast/SoloMapButton.vue
@@ -0,0 +1,41 @@
+<template>
+    <SoloControlButton class="map-button" :click="() => click()" :style="bg">
+        <div class="text">{{ text }}</div>
+    </SoloControlButton>
+</template>
+
+<script>
+import SoloControlButton from "@/components/broadcast/SoloControlButton";
+export default {
+    name: "SoloMapButton",
+    components: { SoloControlButton },
+    props: ["map", "click"],
+    computed: {
+        bg() {
+            console.log(this.map);
+            if (!this.map?.map_image) return {};
+            return {
+                backgroundImage: `url(${this.map.map_image[0].url})`
+            };
+        },
+        text() {
+            return this.map?.short_name || "Choose map";
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .map-button {
+        color: white !important;
+        background-size: cover;
+        background-position: center;
+        font-size: 2em;
+        justify-content: flex-end;
+        padding-bottom: 15px;
+    }
+    .map-button >>> div.text {
+        background-color: rgba(0,0,0,0.8);
+        padding: 3px 8px;
+    }
+</style>
diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index bf0e67b1..bf69845c 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -17,13 +17,18 @@
         <div class="solo-part solo--controls">
             <div class="control-group" v-if="controlMode === 'default'">
                 <SoloControlButton noclick left rotate>SLMN.GG</SoloControlButton>
-                <SoloControlButton color="#f22cf2" :click="() => flipTeams()">Flip teams</SoloControlButton>
-                <SoloControlButton :color="teams[0] && teams[0].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-1'">Set Team 1</SoloControlButton>
-                <SoloControlButton :color="teams[1] && teams[1].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-2'">Set Team 2</SoloControlButton>
-                <SoloControlButton color="#f22cf2" :click="() => controlMode = 'set-scores'">Set Scores</SoloControlButton>
-                <SoloControlButton :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Set Middle</SoloControlButton>
+                <SoloControlButton icon="fas fa-exchange" color="#f22cf2" :click="() => flipTeams()">Flip teams</SoloControlButton>
+                <SoloControlButton icon="fas fa-users" :color="teams[0] && teams[0].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-1'">Set Team 1</SoloControlButton>
+                <SoloControlButton icon="far fa-users" :color="teams[1] && teams[1].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-2'">Set Team 2</SoloControlButton>
+                <SoloControlButton icon="fas fa-medal" color="#f22cf2" :click="() => controlMode = 'set-scores'">Set Scores</SoloControlButton>
+                <SoloControlButton icon="fas fa-align-center" :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Set Middle</SoloControlButton>
+                <SoloControlButton v-if="showModule('break')" icon="far fa-snooze" :click="() => controlMode = 'set-break'">Break</SoloControlButton>
+
+                <SoloControlButton icon="fas fa-map-marked-alt" color="#f22cf2" :click="() => controlMode = 'set-maps'" v-if="showModule('overview')">Set Maps</SoloControlButton>
+
                 <div class="spacer"></div>
-                <SoloControlButton noclick style="font-size: 2.75em">Overlay height: {{ pageHeight }}<small>px</small></SoloControlButton>
+<!--                <SoloControlButton icon="fas fa-wrench" color="#f22cf2" :click="() => controlMode = 'set-options'">Match Options</SoloControlButton>-->
+                <SoloControlButton icon="fas fa-desktop" noclick style="font-size: 2.75em">Overlay height: {{ pageHeight }}<small>px</small></SoloControlButton>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
             <div class="control-group" v-if="controlMode === 'set-team-1'">
@@ -69,18 +74,71 @@
                 <div class="spacer"></div>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
+            <div class="control-group" v-if="controlMode === 'set-options'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+
+                <SoloControlButton icon="fas fa-stopwatch" :click="() => controlMode = 'set-first-to'">First to</SoloControlButton>
+
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+            <div class="control-group" v-if="controlMode === 'set-maps'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+
+                <SoloControlButton v-for="num in mapNums" :key="num" :click="() => controlMap(num)">Map {{ num + 1}}</SoloControlButton>
+
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+            <div class="control-group" v-if="controlMode === 'set-map'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+
+                <SoloControlButton noclick>Map {{ controllingMapNum + 1}}</SoloControlButton>
+                <SoloMapButton :map="maps[controllingMapNum].map" :click="() => chooseMap()">Click to change</SoloMapButton>
+
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+
+            <div class="control-group" v-if="controlMode === 'choose-map'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <SoloControlButton noclick>Map {{ controllingMapNum + 1 }} <small>{{ maps[controllingMapNum]._type || '' }}</small></SoloControlButton>
+
+                <SoloMapButton v-for="map in currentMapChunk" v-bind:key="map.id" :map="map"
+                                       :click="() => setMap(controllingMapNum, map)"/>
+
+
+                <div class="spacer"></div>
+                <SoloControlButton color="#2cf22c" right rotate :click="() => nextPage()">Next</SoloControlButton>
+            </div>
+            <div class="control-group" v-if="controlMode === 'set-break'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+
+                <SoloControlButton icon="fas fa-stopwatch" :click="() => setBreak(1)">1:00</SoloControlButton>
+                <SoloControlButton icon="fas fa-stopwatch" :click="() => setBreak(3)">3:00</SoloControlButton>
+                <SoloControlButton icon="fas fa-stopwatch" :click="() => setBreak(5)">5:00</SoloControlButton>
+                <SoloControlButton icon="fas fa-stopwatch" :click="() => setBreak(10)">10:00</SoloControlButton>
+                <SoloControlButton icon="fas fa-stopwatch" :click="() => setBreak(15)">15:00</SoloControlButton>
+                <SoloControlButton icon="fas fa-stopwatch" :click="() => setBreak(null)">Empty</SoloControlButton>
+
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
         </div>
 
 
         <div class="solo-part solo--desk flex-center" v-if="showModule('desk')">
-            <DeskMatch class="w-100" :_match="virtualMatch" :custom-scores="scores" />
+            <DeskMatch class="w-100" :_match="virtualMatch" />
         </div>
 
         <div class="solo-part solo--rosters" v-if="showModule('rosters')">
             <RosterOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
         </div>
         <div class="solo-part solo--break" v-if="showModule('break')">
-            <BreakOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
+            <BreakOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" :animation-active="true" />
+        </div>
+        <div class="solo-part solo--overview" v-if="showModule('overview')">
+            <OverviewOverlay :broadcast="broadcast" :virtual-match="virtualMatch" />
         </div>
         <div class="solo-loader d-none">
             {{ event && event.name }}
@@ -97,11 +155,15 @@ import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 import Middle from "@/components/broadcast/Middle";
 import RosterOverlay from "@/components/broadcast/roots/RosterOverlay";
 import BreakOverlay from "@/components/broadcast/break/BreakOverlay";
+import OverviewOverlay from "@/components/broadcast/roots/OverviewOverlay";
+import SoloMapButton from "@/components/broadcast/SoloMapButton";
 
 export default {
     name: "SoloOverlay",
     props: ["broadcast", "client", "title", "modules"],
     components: {
+        SoloMapButton,
+        OverviewOverlay,
         RosterOverlay,
         BreakOverlay,
         SoloControlButton,
@@ -115,12 +177,15 @@ export default {
         controlPage: 0,
         middle: "",
         tempMiddle: "",
+        controllingMapNum: null,
 
         teams: [
             { name: "Team 1", has_theme: 0 },
             { name: "Team 2", has_theme: 0 }
         ],
-        scores: [0, 0]
+        scores: [0, 0],
+        breakEnd: null,
+        maps: []
     }),
     methods: {
         flipTeams() {
@@ -129,12 +194,23 @@ export default {
         },
         nextPage() {
             this.controlPage++;
-            if (this.currentChunk.length === 0) this.controlPage = 0;
+            if (["set-team-1", "set-team-2"].includes(this.controlMode) && this.currentChunk.length === 0) this.controlPage = 0;
+            if (["choose-map"].includes(this.controlMode) && this.currentMapChunk.length === 0) this.controlPage = 0;
         },
         setTeam(index, team) {
             this.$set(this.teams, index, team);
             this.controlMode = "default";
         },
+        setMap(index, map) {
+            this.$set(this.maps, index, {
+                ...map,
+                map: map,
+                big_image: map.map_big_image,
+                image: map.map_image,
+                name: [map.name] // this emulates the lookup from Airtable
+            });
+            this.controlMode = "set-maps"; // TODO: change to "set-map" so other things can be done with it
+        },
         setScore(index, score) {
             this.$set(this.scores, index, score);
         },
@@ -144,6 +220,31 @@ export default {
         },
         showModule(module) {
             return (this.modules || []).includes(module);
+        },
+        setBreak(minutes) {
+            if (minutes) {
+                this.breakEnd = new Date(new Date()).getTime() + (minutes * 1000 * 60);
+            } else {
+                this.breakEnd = null;
+            }
+            this.controlMode = "default";
+        },
+        controlMap(num) {
+            this.controllingMapNum = num;
+            console.log(this.allMaps, this.maps);
+            if (!this.maps[num]) {
+                this.maps[num] = {
+                    map: null,
+                    winner: null,
+                    _type: this.mapTypes[num]
+                };
+            }
+            this.controlMode = "set-map";
+        },
+        chooseMap() {
+            this.controlPage = 0;
+            this.controlMode = "choose-map";
+            console.log(this.chunkedMaps, this.currentMapChunk);
         }
     },
     watch: {
@@ -152,15 +253,34 @@ export default {
         }
     },
     computed: {
+        mapTypes() {
+            if (!this.broadcast?.map_set) return [];
+            return this.broadcast.map_set.split(",");
+        },
+        likelyNeededMaps() {
+            return (this.virtualMatch.first_to * 2) - 1;
+        },
+        mapNums() {
+            const nums = [];
+            for (let i = 0; i < this.likelyNeededMaps + 1; i++) {
+                nums.push(i);
+            }
+            console.log("likely needed", this.likelyNeededMaps, nums);
+            return nums;
+        },
         event() {
             return ReactiveThing("event", {
                 theme: ReactiveThing("theme"),
                 teams: ReactiveArray("teams", {
                     theme: ReactiveThing("theme"),
                     players: ReactiveArray("players")
-                })
+                }),
+                map_pool: ReactiveArray("map_pool")
             })(this.broadcast);
         },
+        allMaps() {
+            return this.event.map_pool;
+        },
         chunkedTeams() {
             if (!this.event?.teams) return [];
             let i, j;
@@ -180,12 +300,34 @@ export default {
             if (!this.chunkedTeams?.[this.controlPage]) return [];
             return this.chunkedTeams[this.controlPage];
         },
+        chunkedMaps() {
+            if (!this.allMaps?.length) return [];
+            let i, j;
+            let maps = [...this.allMaps];
+            if (this.mapTypes?.length && this.mapTypes[this.controllingMapNum]) {
+                maps = maps.filter(m => m.type === this.mapTypes[this.controllingMapNum]);
+            }
+            const chunkLength = 8;
+            const array = maps.sort((a, b) => a.type < b.type ? 1 : -1);
+            const chunked = [];
+            for (i = 0, j = array.length; i < j; i += chunkLength) { chunked.push(array.slice(i, i + chunkLength)); }
+            return chunked;
+        },
+        currentMapChunk() {
+            if (!this.chunkedMaps?.[this.controlPage]) return [];
+            return this.chunkedMaps[this.controlPage];
+        },
         virtualMatch() {
             return {
                 teams: this.teams,
+                score_1: this.scores[0],
+                score_2: this.scores[1],
                 show_on_overlays: true,
                 id: "virtual",
-                _virtual_match_category: this.matchCategory
+                _virtual_match_category: this.matchCategory,
+                _virtual_break_end: this.breakEnd,
+                first_to: 3,
+                maps: this.maps
             };
         },
         scoreArray() {
@@ -197,9 +339,10 @@ export default {
             // defaults
             height += 200; // control panel
             height += 200; // ingame
-            if (this.showModule("desk")) height += 200; // rosters, full
-            if (this.showModule("rosters")) height += 1080; // rosters, full
-            if (this.showModule("break")) height += 1080; // rosters, full
+            if (this.showModule("desk")) height += 200; // full
+            if (this.showModule("rosters")) height += 1080; // full
+            if (this.showModule("break")) height += 1080; // full
+            if (this.showModule("overview")) height += 1080; // full
 
             return height;
         },
@@ -230,6 +373,7 @@ export default {
         /* TODO: remove dev */ border: 2px solid red;
     }
     .solo-part.solo--rosters,
+    .solo-part.solo--overview,
     .solo-part.solo--break {
         height: 1080px;
     }
diff --git a/website/src/components/broadcast/Standings.vue b/website/src/components/broadcast/Standings.vue
index ebea1ce5..f5d8a7c8 100644
--- a/website/src/components/broadcast/Standings.vue
+++ b/website/src/components/broadcast/Standings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="standings" v-if="standings && standings.standings.length">
+    <div class="standings" v-if="standings && standings.standings && standings.standings.length">
 <!--        <div>{{ event.name }} / {{ stage }} / {{ allMatches.length }} -> {{ stageMatches.length }} ({{ teams.length }} teams)</div>-->
         <h3 class="top-standings-name text-center d-md-none">{{ title || stage || 'Team' }}</h3>
         <div class="standings-header d-flex align-items-center">
diff --git a/website/src/components/broadcast/break/BreakOverlay.vue b/website/src/components/broadcast/break/BreakOverlay.vue
index 6409d710..20ed41d2 100644
--- a/website/src/components/broadcast/break/BreakOverlay.vue
+++ b/website/src/components/broadcast/break/BreakOverlay.vue
@@ -17,9 +17,9 @@
                         </div>
                     </transition>
                     <transition name="anim-break-next">
-                    <div class="countdown-text" v-if="!broadcast.countdown_end && !nextMatch">Current time</div>
+                    <div class="countdown-text" v-if="!countdownEnd && !nextMatch">Current time</div>
                     </transition>
-                    <Countdown class="break-countdown" :to="broadcast.countdown_end" :timezone="broadcast.timezone" :update="(e) => countdownTick(e)" />
+                    <Countdown class="break-countdown" :to="countdownEnd" :timezone="broadcast.timezone" :update="(e) => countdownTick(e)" />
                     <Sponsors class="break-sponsors" :sponsors="sponsorThemes" />
                 </div>
                 <transition name="break-content" mode="out-in">
@@ -34,7 +34,7 @@
                         <ThemeLogo v-else class="break-image-inner break-image-default" :theme="event.theme"
                                    icon-padding="10%" border-width="0" :logo-size="450" />
                     </div>
-                    <Bracket class="break-col break-bracket" v-if="automatedShow === 'Bracket'" key="Bracket" :event="event" :bracket="bracket" use-overlay-scale small />
+                    <Bracket class="break-col break-bracket" v-if="automatedShow === 'Bracket'" :key="`Bracket-${currentStage || bracketKey}`" :event="event" :bracket="bracket" use-overlay-scale small />
                     <div class="break-col break-others" v-if="automatedShow === 'Other Broadcasts'">
                         <div class="broadcast-previews-title">
                             {{ broadcasts.length === 1 ? broadcasts[0].name : 'Other broadcasts' }}
@@ -167,9 +167,15 @@ export default {
         },
         bracket() {
             if (!this.event?.brackets) return null;
-            if (!this.bracketKey) return this.event.brackets[0];
-            const bracket = this.event.brackets.find(b => b && b.key === this.bracketKey);
-            return bracket || this.event.brackets[0];
+            if (this.virtualMatch?._virtual_match_category) {
+                const bracket = this.event.brackets.find(b => b && b.associated_match_group === this.virtualMatch._virtual_match_category);
+                if (bracket) return bracket;
+            }
+            if (this.bracketKey) {
+                const bracket = this.event.brackets.find(b => b && b.key === this.bracketKey);
+                if (bracket) return bracket;
+            }
+            return this.event.brackets[0];
         },
         headlines() {
             return (this.broadcast?.headlines || []).filter(b => b.ready);
@@ -183,19 +189,22 @@ export default {
             let slides = this.broadcast.break_automation.filter(s => s.startsWith("use:")).map(s => s.replace("use: ", ""));
             console.log(slides);
             if (!this.nextMatch) slides = slides.filter(s => s !== "Matchup");
-            // console.log(slides, this.nextMatch);
+            if (!this.currentStage) slides = slides.filter(s => s !== "Standings");
+            if (!this.bracket) slides = slides.filter(s => s !== "Bracket");
+            if (!this.virtualMatch) slides = slides.filter(s => s !== "Schedule"); // Only going to be 1 match atm so matchup will be fine
+            console.log(slides);
 
             // TODO: add stuff here that changes based on the countdown remaining
 
 
-            if (slides?.includes("Schedule") && this.broadcast.countdown_end && this.lastCountdownTick <= 30) {
+            if (slides?.includes("Schedule") && this.countdownEnd && this.lastCountdownTick <= 30) {
                 return "Schedule";
             }
 
             return slides[(this.tick % slides.length)];
         },
         automatedShow() {
-            if (this.broadcast?.break_automation?.length && this.lastCountdownTick <= 30 && this.broadcast.countdown_end) {
+            if (this.broadcast?.break_automation?.length && this.lastCountdownTick <= 30 && this.countdownEnd) {
                 if (this.broadcast.break_automation.includes("setting: Always do 30s Schedule")) return "Schedule";
                 if (this.broadcast.break_automation.includes("setting: Always do 30s Matchup")) return "Matchup";
             }
@@ -210,9 +219,15 @@ export default {
         currentStage() {
             return this.virtualMatch?._virtual_match_category || this.broadcast?.current_stage;
         },
+        countdownEnd() {
+            return this.virtualMatch?._virtual_break_end || this.broadcast?.countdown_end;
+        },
         matchIsLast() {
             if (!this.schedule?.length) return true; // no schedule - assume last
             if (!this.nextMatch?.first_to) return false; // no match - assume others??
+
+            // TODO: this logic doesn't make much sense. it should check if any match has completed, rather than the order in the schedule
+
             const index = this.schedule.findIndex(match => match.id === this.nextMatch.id);
             if (index === -1) return true; // not in schedule - assume it's a schedule for tomorrow
             if (index === (this.schedule.length - 1)) return true; // last of the day!
@@ -228,6 +243,7 @@ export default {
         },
         overlayTitle() {
             const title = this.title || this.broadcast?.title || this.broadcast?.name || "";
+            if (this.virtualMatch) return this.autoTitle || this.broadcast?.event?.name;
             const titleWithAuto = title.replace("{auto}", this.autoTitle);
             if (!titleWithAuto || titleWithAuto.trim().length === 0) return title; // make sure we have something here
             return titleWithAuto;
diff --git a/website/src/components/broadcast/desk/DeskMatch.vue b/website/src/components/broadcast/desk/DeskMatch.vue
index aed7342a..b6de6f56 100644
--- a/website/src/components/broadcast/desk/DeskMatch.vue
+++ b/website/src/components/broadcast/desk/DeskMatch.vue
@@ -31,7 +31,7 @@ import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 export default {
     name: "DeskMatch",
     components: { DeskTeam },
-    props: ["_match", "themeColor", "matchID", "customScores"],
+    props: ["_match", "themeColor", "matchID"],
     computed: {
         matchData() {
             return this._match || ReactiveRoot(this.matchID, {
@@ -47,7 +47,7 @@ export default {
             if (!this.matchData?.special_event) {
                 if (!this.matchData?.teams) return null;
                 if (this.matchData.teams.length !== 2) return null;
-                if (this.matchData.teams.some(t => !t.theme || t.theme.__loading)) return null;
+                // if (this.matchData.teams.some(t => !t.theme || t.theme.__loading)) return null;
             }
             return this.matchData;
         },
@@ -58,7 +58,6 @@ export default {
             };
         },
         scores() {
-            if (this.customScores) return this.customScores;
             if (!this.match?.id) return [];
             return [this.match.score_1, this.match.score_2];
         },
diff --git a/website/src/components/broadcast/desk/DeskTeam.vue b/website/src/components/broadcast/desk/DeskTeam.vue
index 23ae024a..2bae57e7 100644
--- a/website/src/components/broadcast/desk/DeskTeam.vue
+++ b/website/src/components/broadcast/desk/DeskTeam.vue
@@ -17,8 +17,20 @@ export default {
     name: "DeskTeam",
     props: ["team"],
     computed: {
-        bg() { return logoBackground1(this.team); },
-        logo() { return cssImage("backgroundImage", this.team.theme, ["default_wordmark", "default_logo"], null, false); }
+        bg() {
+            if (!this.team?.theme) {
+                return {
+                    backgroundColor: "#373737",
+                    color: "white",
+                    borderColor: "#5F5F5F"
+                };
+            }
+            return logoBackground1(this.team);
+        },
+        logo() {
+            if (!this.team?.theme) return {};
+            return cssImage("backgroundImage", this.team.theme, ["default_wordmark", "default_logo"], null, false);
+        }
     }
 };
 </script>
diff --git a/website/src/components/broadcast/roots/OverviewOverlay.vue b/website/src/components/broadcast/roots/OverviewOverlay.vue
index 8388b0b2..2c36a309 100644
--- a/website/src/components/broadcast/roots/OverviewOverlay.vue
+++ b/website/src/components/broadcast/roots/OverviewOverlay.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="overview-overlay">
         <div class="part part-desk-match">
-            <DeskMatch class="desk-match" :matchID="matchID"/>
+            <DeskMatch class="desk-match" :matchID="matchID" :_match="virtualMatch"/>
         </div>
         <div class="part part-map-display flex-grow-1">
-            <MapDisplay :broadcast="broadcast" use-transitions="true"/>
+            <MapDisplay :broadcast="broadcast" use-transitions="true" :virtual-match="virtualMatch" />
         </div>
     </div>
 </template>
@@ -15,9 +15,10 @@ import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 export default {
     name: "OverviewOverlay",
     components: { DeskMatch, MapDisplay },
-    props: ["broadcast"],
+    props: ["broadcast", "virtualMatch"],
     computed: {
         matchID() {
+            if (this.virtualMatch) return null;
             if (!this.broadcast?.live_match) return null;
             return this.broadcast.live_match[0];
         }
@@ -52,4 +53,8 @@ export default {
 .desk-match >>> .team-logo-holder {
     height: 120px !important;
 }
+
+.overview-overlay >>> .map-lower {
+    padding: 10px;
+}
 </style>

From 0678b2ab8d20def277687d6373a5e6c853110d46 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Mon, 17 Apr 2023 21:30:00 +0100
Subject: [PATCH 10/14] Update solo overlay to be on parity with master

---
 .../components/broadcast/SoloMapButton.vue    | 25 ++++--
 .../src/components/broadcast/SoloOverlay.vue  | 82 ++++++++++++++-----
 .../broadcast/SoloTeamControlButton.vue       |  2 +-
 .../components/broadcast/break/BreakMatch.vue |  2 +-
 .../broadcast/roots/OverviewOverlay.vue       |  4 +-
 website/src/router/broadcast.js               | 10 ++-
 6 files changed, 92 insertions(+), 33 deletions(-)

diff --git a/website/src/components/broadcast/SoloMapButton.vue b/website/src/components/broadcast/SoloMapButton.vue
index 4aae4250..43a97dfe 100644
--- a/website/src/components/broadcast/SoloMapButton.vue
+++ b/website/src/components/broadcast/SoloMapButton.vue
@@ -1,22 +1,25 @@
 <template>
-    <SoloControlButton class="map-button" :click="() => click()" :style="bg">
+    <SoloControlButton class="map-button" :click="() => click()" :style="bg" :noclick="noclick">
+        <div class="top flex-center" v-if="topText">
+            <div class="text top-text">{{ topText }}</div>
+        </div>
         <div class="text">{{ text }}</div>
     </SoloControlButton>
 </template>
 
 <script>
 import SoloControlButton from "@/components/broadcast/SoloControlButton";
+import { resizedImage } from "@/utils/images";
+
 export default {
     name: "SoloMapButton",
     components: { SoloControlButton },
-    props: ["map", "click"],
+    props: ["map", "click", "topText", "noclick"],
     computed: {
         bg() {
-            console.log(this.map);
-            if (!this.map?.map_image) return {};
-            return {
-                backgroundImage: `url(${this.map.map_image[0].url})`
-            };
+            console.log("Map BG", this.map);
+            if (!this.map?.image) return {};
+            return resizedImage(this.map, ["image"], "h-200");
         },
         text() {
             return this.map?.short_name || "Choose map";
@@ -33,9 +36,17 @@ export default {
         font-size: 2em;
         justify-content: flex-end;
         padding-bottom: 15px;
+        position: relative;
     }
     .map-button >>> div.text {
         background-color: rgba(0,0,0,0.8);
         padding: 3px 8px;
     }
+    .top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        padding-top: 15px;
+    }
 </style>
diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index bf69845c..64dd8767 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -1,6 +1,7 @@
 <template>
-    <div class="solo-overlay flex-center">
+    <div class="solo-overlay flex-center" :class="{'show-guides': showGuides}">
         <div class="solo-part solo--ingame">
+            <div class="solo-pixel-info">200px</div>
             <transition-group name="fade" mode="out-in">
                 <IngameTeam :key="`${team.name}-${i}`" v-for="(team, i) in teams"
                             :team="team" :right="i === 1" :score="scores[i]"/>
@@ -15,6 +16,8 @@
 
 
         <div class="solo-part solo--controls">
+            <div class="solo-pixel-info">200px</div>
+<!--            <div class="solo-pixel-info d-flex">{{ controlMode }}</div>-->
             <div class="control-group" v-if="controlMode === 'default'">
                 <SoloControlButton noclick left rotate>SLMN.GG</SoloControlButton>
                 <SoloControlButton icon="fas fa-exchange" color="#f22cf2" :click="() => flipTeams()">Flip teams</SoloControlButton>
@@ -28,6 +31,7 @@
 
                 <div class="spacer"></div>
 <!--                <SoloControlButton icon="fas fa-wrench" color="#f22cf2" :click="() => controlMode = 'set-options'">Match Options</SoloControlButton>-->
+                <SoloControlButton icon="fas fa-border-outer" :color="showGuides ? '' : '#2cd1f2'" :click="() => showGuides = !showGuides" style="font-size: 2.75em">{{ showGuides ? 'Hide' : 'Show' }} guides</SoloControlButton>
                 <SoloControlButton icon="fas fa-desktop" noclick style="font-size: 2.75em">Overlay height: {{ pageHeight }}<small>px</small></SoloControlButton>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
@@ -85,7 +89,7 @@
             <div class="control-group" v-if="controlMode === 'set-maps'">
                 <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
 
-                <SoloControlButton v-for="num in mapNums" :key="num" :click="() => controlMap(num)">Map {{ num + 1}}</SoloControlButton>
+                <SoloMapButton v-for="num in mapNums" :key="num" :click="() => chooseMap(num)" :noclick="num !== 0 && !maps[Math.max(0,num - 1)]?.name" :map="maps[num]" :top-text="`Map ${num + 1}`"></SoloMapButton>
 
                 <div class="spacer"></div>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
@@ -93,7 +97,7 @@
             <div class="control-group" v-if="controlMode === 'set-map'">
                 <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
 
-                <SoloControlButton noclick>Map {{ controllingMapNum + 1}}</SoloControlButton>
+                <SoloControlButton noclick>Map {{ controllingMapNum + 1 }} <small>{{ maps[controllingMapNum]._type || maps[controllingMapNum].type || '' }}</small></SoloControlButton>
                 <SoloMapButton :map="maps[controllingMapNum].map" :click="() => chooseMap()">Click to change</SoloMapButton>
 
                 <div class="spacer"></div>
@@ -101,8 +105,8 @@
             </div>
 
             <div class="control-group" v-if="controlMode === 'choose-map'">
-                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
-                <SoloControlButton noclick>Map {{ controllingMapNum + 1 }} <small>{{ maps[controllingMapNum]._type || '' }}</small></SoloControlButton>
+                <SoloControlButton left rotate :click="() => controlMode = 'set-maps'" color="#f0802c">Maps</SoloControlButton>
+                <SoloControlButton noclick>Map {{ controllingMapNum + 1 }} <small>{{ maps[controllingMapNum]._type || maps[controllingMapNum].type || '' }}</small></SoloControlButton>
 
                 <SoloMapButton v-for="map in currentMapChunk" v-bind:key="map.id" :map="map"
                                        :click="() => setMap(controllingMapNum, map)"/>
@@ -128,17 +132,22 @@
 
 
         <div class="solo-part solo--desk flex-center" v-if="showModule('desk')">
+            <div class="solo-pixel-info">200px</div>
             <DeskMatch class="w-100" :_match="virtualMatch" />
         </div>
 
         <div class="solo-part solo--rosters" v-if="showModule('rosters')">
-            <RosterOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" />
+            <div class="solo-pixel-info">1080px</div>
+            <RosterOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" :animation-active="true"
+                           :show-roles="rosterOptions.includes('roles')" :sort="rosterOptions.includes('sort')" :show-badges="rosterOptions.includes('badges')" />
         </div>
         <div class="solo-part solo--break" v-if="showModule('break')">
+            <div class="solo-pixel-info">1080px</div>
             <BreakOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" :animation-active="true" />
         </div>
         <div class="solo-part solo--overview" v-if="showModule('overview')">
-            <OverviewOverlay :broadcast="broadcast" :virtual-match="virtualMatch" />
+            <div class="solo-pixel-info">1080px</div>
+            <OverviewOverlay :broadcast="broadcast" :virtual-match="virtualMatch" :no-map-videos="!showMapVideos" />
         </div>
         <div class="solo-loader d-none">
             {{ event && event.name }}
@@ -149,7 +158,7 @@
 <script>
 import IngameTeam from "@/components/broadcast/IngameTeam";
 import SoloControlButton from "@/components/broadcast/SoloControlButton";
-import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
+import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 import SoloTeamControlButton from "@/components/broadcast/SoloTeamControlButton";
 import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 import Middle from "@/components/broadcast/Middle";
@@ -160,7 +169,7 @@ import SoloMapButton from "@/components/broadcast/SoloMapButton";
 
 export default {
     name: "SoloOverlay",
-    props: ["broadcast", "client", "title", "modules"],
+    props: ["broadcast", "client", "title", "modules", "rosterOptions", "showMapVideos"],
     components: {
         SoloMapButton,
         OverviewOverlay,
@@ -185,7 +194,8 @@ export default {
         ],
         scores: [0, 0],
         breakEnd: null,
-        maps: []
+        maps: [],
+        showGuides: false
     }),
     methods: {
         flipTeams() {
@@ -205,10 +215,11 @@ export default {
             this.$set(this.maps, index, {
                 ...map,
                 map: map,
-                big_image: map.map_big_image,
-                image: map.map_image,
+                big_image: map.big_image,
+                image: map.image,
                 name: [map.name] // this emulates the lookup from Airtable
             });
+            console.log("setting map", map, this.maps[index]);
             this.controlMode = "set-maps"; // TODO: change to "set-map" so other things can be done with it
         },
         setScore(index, score) {
@@ -229,9 +240,10 @@ export default {
             }
             this.controlMode = "default";
         },
-        controlMap(num) {
+        chooseMap(num) {
             this.controllingMapNum = num;
-            console.log(this.allMaps, this.maps);
+            this.controlPage = 0;
+            this.controlMode = "choose-map";
             if (!this.maps[num]) {
                 this.maps[num] = {
                     map: null,
@@ -239,11 +251,6 @@ export default {
                     _type: this.mapTypes[num]
                 };
             }
-            this.controlMode = "set-map";
-        },
-        chooseMap() {
-            this.controlPage = 0;
-            this.controlMode = "choose-map";
             console.log(this.chunkedMaps, this.currentMapChunk);
         }
     },
@@ -279,7 +286,13 @@ export default {
             })(this.broadcast);
         },
         allMaps() {
-            return this.event.map_pool;
+            console.log("all maps", this.event);
+            if (this.event?.map_pool) return this.event.map_pool;
+            const allMaps = ReactiveRoot("Map Data", {
+                ids: ReactiveArray("ids")
+            })?.ids;
+            if (!allMaps?.length) return [];
+            return allMaps.filter(map => map.game === this.event.game);
         },
         chunkedTeams() {
             if (!this.event?.teams) return [];
@@ -365,12 +378,39 @@ export default {
         font-family: "Industry", "SLMN-Industry", sans-serif;
         color: black;
     }
+    .solo-overlay.show-guides .solo-part {
+        border: 1px solid red;
+        background-color: rgba(255,0,0,0.2);
+    }
+    .solo-overlay.show-guides .solo-part:nth-child(2n+1) {
+        border: 1px solid blue;
+        background-color: rgba(0,0,255,0.2);
+    }
+    .solo-pixel-info {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        font-weight: bold;
+        font-size: 2em;
+        background-color: rgba(255,255,255,0.9);
+        padding: 0.25em .5em;
+        line-height: 1;
+        margin: .25em;
+        border: 2px solid red;
+    }
+
+    .solo-overlay.show-guides .solo-part:nth-child(2n+1) .solo-pixel-info {
+        border: 2px solid blue;
+    }
+    .solo-overlay:not(.show-guides) .solo-pixel-info {
+        display: none;
+    }
     .solo-part {
         height: 200px;
         width: 100%;
         overflow: hidden;
         position: relative;
-        /* TODO: remove dev */ border: 2px solid red;
     }
     .solo-part.solo--rosters,
     .solo-part.solo--overview,
diff --git a/website/src/components/broadcast/SoloTeamControlButton.vue b/website/src/components/broadcast/SoloTeamControlButton.vue
index 06a813b0..abff9511 100644
--- a/website/src/components/broadcast/SoloTeamControlButton.vue
+++ b/website/src/components/broadcast/SoloTeamControlButton.vue
@@ -1,6 +1,6 @@
 <template>
     <SoloControlButton :click="() => click()" :style="css">
-        <ThemeLogo class="solo-team-logo" :theme="team.theme" border-width="0" />
+        <ThemeLogo class="solo-team-logo" logo-size="w-150" :theme="team.theme" border-width="0" />
         <div class="solo-team-code">{{ team.code || "---" }}</div>
     </SoloControlButton>
 </template>
diff --git a/website/src/components/broadcast/break/BreakMatch.vue b/website/src/components/broadcast/break/BreakMatch.vue
index 3e088018..91bffb67 100644
--- a/website/src/components/broadcast/break/BreakMatch.vue
+++ b/website/src/components/broadcast/break/BreakMatch.vue
@@ -13,7 +13,7 @@
 <!--        <transition-group name="fade" mode="out-in" class="match-teams flex-center">-->
 
 
-        <div class="match-teams flex-center">
+        <div class="match-teams flex-center" v-if="match">
 
             <div class="match-special-event-name" v-if="match.special_event">
                 {{ match.custom_name }}
diff --git a/website/src/components/broadcast/roots/OverviewOverlay.vue b/website/src/components/broadcast/roots/OverviewOverlay.vue
index b6e7aae8..65f36d8c 100644
--- a/website/src/components/broadcast/roots/OverviewOverlay.vue
+++ b/website/src/components/broadcast/roots/OverviewOverlay.vue
@@ -4,7 +4,7 @@
             <DeskMatch class="desk-match" :matchID="matchID" :_match="virtualMatch"/>
         </div>
         <div class="part part-map-display flex-grow-1">
-            <MapDisplay :broadcast="broadcast" use-transitions="true" :virtual-match="virtualMatch" />
+            <MapDisplay :broadcast="broadcast" use-transitions="true" :virtual-match="virtualMatch" :no-map-videos="noMapVideos" />
         </div>
     </div>
 </template>
@@ -15,7 +15,7 @@ import DeskMatch from "@/components/broadcast/desk/DeskMatch";
 export default {
     name: "OverviewOverlay",
     components: { DeskMatch, MapDisplay },
-    props: ["broadcast", "virtualMatch"],
+    props: ["broadcast", "virtualMatch", "noMapVideos"],
     computed: {
         matchID() {
             if (this.virtualMatch) return null;
diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
index 38e57a79..58d4ae67 100644
--- a/website/src/router/broadcast.js
+++ b/website/src/router/broadcast.js
@@ -189,5 +189,13 @@ export default [
             wsPassword: route.query.wsPassword || route.query.password || route.query.pw
         })
     },
-    { path: "solo", component: import("@/components/broadcast/SoloOverlay.vue"), props: route => ({ modules: route.query.modules?.split(",") }) }
+    {
+        path: "solo",
+        component: () => import("@/components/broadcast/SoloOverlay.vue"),
+        props: route => ({
+            modules: route.query.modules?.split(","),
+            rosterOptions: (route.query.rosterOptions || route.query.roster)?.split(","),
+            showMapVideos: !!(route.query.mapVideos || route.query.videos)
+        })
+    }
 ];

From e228f5273ae803fb9f92bde34a589904c49afc51 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Mon, 17 Apr 2023 21:41:24 +0100
Subject: [PATCH 11/14] Remove stinger from the solo overlay

---
 website/.env                                     | 3 ++-
 website/src/components/broadcast/SoloOverlay.vue | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/website/.env b/website/.env
index 19a975be..957cea56 100644
--- a/website/.env
+++ b/website/.env
@@ -1,5 +1,6 @@
 VITE_DEPLOY_MODE=live
-VITE_DATA_SERVER="https://data.slmn.gg"
+# VITE_DATA_SERVER="https://data.slmn.gg"
+VITE_DATA_SERVER="http://localhost:8901"
 
 # VITE_MAIN_DOMAIN="https://dev.slmn.gg"   # for auth returns
 # VITE_MAIN_COOKIE_DOMAIN="dev.slmn.gg"    # no protocol or ports (for cookies)
diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index 64dd8767..ba73fac1 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -195,7 +195,9 @@ export default {
         scores: [0, 0],
         breakEnd: null,
         maps: [],
-        showGuides: false
+        showGuides: false,
+
+        noStinger: true
     }),
     methods: {
         flipTeams() {

From db947dd3b2057afa3f3e852eb17188e29c595111 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Mon, 17 Apr 2023 22:15:05 +0100
Subject: [PATCH 12/14] Add break automation to solo overlay

---
 .../src/components/broadcast/SoloOverlay.vue    | 13 +++++++++++--
 .../components/broadcast/break/BreakOverlay.vue | 17 +++++++++++------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index ba73fac1..54066529 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -31,7 +31,7 @@
 
                 <div class="spacer"></div>
 <!--                <SoloControlButton icon="fas fa-wrench" color="#f22cf2" :click="() => controlMode = 'set-options'">Match Options</SoloControlButton>-->
-                <SoloControlButton icon="fas fa-border-outer" :color="showGuides ? '' : '#2cd1f2'" :click="() => showGuides = !showGuides" style="font-size: 2.75em">{{ showGuides ? 'Hide' : 'Show' }} guides</SoloControlButton>
+                <SoloControlButton icon="fas fa-border-outer" :color="showGuides ? '#2cd1f2' : ''" :click="() => showGuides = !showGuides" style="font-size: 2.75em">{{ showGuides ? 'Hide' : 'Show' }} guides</SoloControlButton>
                 <SoloControlButton icon="fas fa-desktop" noclick style="font-size: 2.75em">Overlay height: {{ pageHeight }}<small>px</small></SoloControlButton>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
@@ -143,7 +143,8 @@
         </div>
         <div class="solo-part solo--break" v-if="showModule('break')">
             <div class="solo-pixel-info">1080px</div>
-            <BreakOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" :animation-active="true" />
+            <BreakOverlay :virtual-match="virtualMatch" :broadcast="broadcast" :client="client" :title="title" :animation-active="true"
+                          :custom-break-automation="breakAutomation"/>
         </div>
         <div class="solo-part solo--overview" v-if="showModule('overview')">
             <div class="solo-pixel-info">1080px</div>
@@ -369,6 +370,14 @@ export default {
                 return data[data.length - 1];
             }
             return null;
+        },
+        breakAutomation() {
+            return [
+                "use: Schedule",
+                "use: Matchup",
+                "use: Bracket",
+                "setting: Always do 30s Matchup"
+            ];
         }
     }
 };
diff --git a/website/src/components/broadcast/break/BreakOverlay.vue b/website/src/components/broadcast/break/BreakOverlay.vue
index 8dfe423a..7d0890ba 100644
--- a/website/src/components/broadcast/break/BreakOverlay.vue
+++ b/website/src/components/broadcast/break/BreakOverlay.vue
@@ -107,7 +107,7 @@ const tickTime = 25;
 
 export default {
     name: "BreakOverlay",
-    props: ["broadcast", "title", "animationActive", "secondary", "headlineInterval", "virtualMatch"],
+    props: ["broadcast", "title", "animationActive", "secondary", "headlineInterval", "virtualMatch", "customBreakAutomation"],
     components: { Squeezable, OtherBroadcasts, ThemeLogo, BreakMatchup, BreakStaffList, BreakHeadlines, BroadcastPreview, Bracket, Standings, BreakMatch, Sponsors, Countdown, ThemeTransition },
     data: () => ({
         tick: 0,
@@ -210,10 +210,13 @@ export default {
         themeColor() {
             return themeBackground1(this.event);
         },
+        breakAutomation() {
+            return this.customBreakAutomation || this.broadcast?.break_automation || [];
+        },
         suggestedShow() {
-            if (!this.broadcast?.break_automation?.length) return null;
+            if (!this.breakAutomation?.length) return null;
 
-            let slides = this.broadcast.break_automation.filter(s => s.startsWith("use:")).map(s => s.replace("use: ", ""));
+            let slides = this.breakAutomation.filter(s => s.startsWith("use:")).map(s => s.replace("use: ", ""));
             console.log(slides);
             if (!this.nextMatch) slides = slides.filter(s => s !== "Matchup");
             if (!this.currentStage) slides = slides.filter(s => s !== "Standings");
@@ -231,10 +234,12 @@ export default {
             return slides[(this.tick % slides.length)];
         },
         automatedShow() {
-            if (this.broadcast?.break_automation?.length && this.lastCountdownTick <= 30 && this.countdownEnd) {
-                if (this.broadcast.break_automation.includes("setting: Always do 30s Schedule")) return "Schedule";
-                if (this.broadcast.break_automation.includes("setting: Always do 30s Matchup") && this.nextMatch) return "Matchup";
+            if (this.breakAutomation?.length && this.lastCountdownTick <= 30 && this.countdownEnd) {
+                if (this.breakAutomation.includes("setting: Always do 30s Schedule")) return "Schedule";
+                if (this.breakAutomation.includes("setting: Always do 30s Matchup") && this.nextMatch) return "Matchup";
             }
+            if (this.customBreakAutomation) return this.suggestedShow;
+
             if (this.broadcast.break_display && this.broadcast.break_display !== "Automated") {
                 // do what it says
                 return this.broadcast.break_display;

From b53f0db56c9edd03d43efa2b37abc522bc3e7490 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Fri, 21 Apr 2023 06:11:47 +0100
Subject: [PATCH 13/14] Solo: edit middle text and set match first to

---
 .../broadcast/SoloControlButton.vue           |  2 +-
 .../src/components/broadcast/SoloOverlay.vue  | 41 ++++++++++++++++---
 .../components/broadcast/break/BreakMatch.vue |  5 ---
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/website/src/components/broadcast/SoloControlButton.vue b/website/src/components/broadcast/SoloControlButton.vue
index 6852b628..d37792c1 100644
--- a/website/src/components/broadcast/SoloControlButton.vue
+++ b/website/src/components/broadcast/SoloControlButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="control-button d-flex flex-column" v-bind:class="elClass" @click="() => click()" :style="css">
+    <div class="control-button d-flex flex-column" v-bind:class="elClass" @click="() => click && click()" :style="css">
         <span class="icon" v-if="icon"><i :class="icon"></i></span>
         <span class="slot"><slot></slot></span>
     </div>
diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index 54066529..7c62e058 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -10,7 +10,7 @@
                         :width="teamWidth" :codes="codes" -->
 
             <transition name="mid" mode="out-in">
-                <Middle v-if="middle" :text="middle" :key="middle" />
+                <Middle v-if="autoMiddle" :text="autoMiddle" :key="autoMiddle" />
             </transition>
         </div>
 
@@ -59,7 +59,9 @@
                                    :click="() => setScore(0, score)">{{ score }}</SoloControlButton>
 
 
-                <SoloTeamControlButton noclick v-for="team in teams" v-bind:key="team.id" :team="team"/>
+                <SoloTeamControlButton noclick :team="teams[0]"/>
+                <SoloControlButton icon="fas fa-trophy" color="#f22cf2" :click="() => controlMode = 'set-first-to'">First<br>To {{ firstTo }}</SoloControlButton>
+                <SoloTeamControlButton noclick :team="teams[1]"/>
 
                 <SoloControlButton v-bind:class="{'is-score': scores[1] === score}" class="score" v-for="score in scoreArray" v-bind:key="'team-2-' + score"
                                    :click="() => setScore(1, score)">{{ score }}</SoloControlButton>
@@ -68,11 +70,24 @@
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
 
+            <div class="control-group" v-if="controlMode === 'set-first-to'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+                <SoloControlButton icon="fas fa-trophy" color="#f22cf2" noclick>First<br>To</SoloControlButton>
+
+
+                <SoloControlButton v-bind:class="{'is-score': firstTo === num}" class="score" v-for="num in [1,2,3,4,5]" v-bind:key="'first-to' + num"
+                                   :click="() => setFirstTo(num)">{{ num }}</SoloControlButton>
+
+
+                <div class="spacer"></div>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+
             <div class="control-group" v-if="controlMode === 'set-middle'">
                 <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
 
                 <div class="solo-input-wrapper flex-center w-100">
-                    <input type="text" v-model="tempMiddle" class="solo-text-input">
+                    <input type="text" v-model="tempMiddle" class="solo-text-input" @keydown.enter="() => setMiddle()">
                 </div>
                 <SoloControlButton color="#f22cf2" :click="() => setMiddle()">Set</SoloControlButton>
                 <div class="spacer"></div>
@@ -197,6 +212,7 @@ export default {
         breakEnd: null,
         maps: [],
         showGuides: false,
+        firstTo: 3,
 
         noStinger: true
     }),
@@ -255,6 +271,10 @@ export default {
                 };
             }
             console.log(this.chunkedMaps, this.currentMapChunk);
+        },
+        setFirstTo(num) {
+            this.firstTo = num;
+            this.controlMode = "set-scores";
         }
     },
     watch: {
@@ -263,6 +283,13 @@ export default {
         }
     },
     computed: {
+        autoMiddle() {
+            if (!this.middle && !this.firstTo) return null;
+            const parts = [];
+            if (this.middle) parts.push(this.middle);
+            if (this.firstTo) parts.push(`First to ${this.firstTo}`);
+            return parts.join(" - ");
+        },
         mapTypes() {
             if (!this.broadcast?.map_set) return [];
             return this.broadcast.map_set.split(",");
@@ -342,12 +369,16 @@ export default {
                 id: "virtual",
                 _virtual_match_category: this.matchCategory,
                 _virtual_break_end: this.breakEnd,
-                first_to: 3,
+                first_to: this.firstTo,
                 maps: this.maps
             };
         },
         scoreArray() {
-            return [0, 1, 2, 3];
+            const arr = [];
+            for (let i = 0; i <= this.firstTo; i++) {
+                arr.push(i);
+            }
+            return arr;
         },
         pageHeight() {
             let height = 0;
diff --git a/website/src/components/broadcast/break/BreakMatch.vue b/website/src/components/broadcast/break/BreakMatch.vue
index 91bffb67..ef6e4b11 100644
--- a/website/src/components/broadcast/break/BreakMatch.vue
+++ b/website/src/components/broadcast/break/BreakMatch.vue
@@ -139,11 +139,6 @@ export default {
             // return null;
         }
     },
-    watch: {
-        match() {
-            console.log(this.match);
-        }
-    },
     methods: {
         teamLogo(team) {
             if (!team || !team.theme) return {};

From 1022e7958238dd9cce84dc742a02f9fe19d9df49 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Sat, 29 Apr 2023 02:54:58 +0100
Subject: [PATCH 14/14] Add solo map wins

---
 .../broadcast/SoloControlButton.vue           |  5 +-
 .../components/broadcast/SoloMapButton.vue    | 27 ++++-
 .../broadcast/SoloMapToggleButton.vue         | 99 +++++++++++++++++++
 .../src/components/broadcast/SoloOverlay.vue  | 75 ++++++++++++--
 4 files changed, 192 insertions(+), 14 deletions(-)
 create mode 100644 website/src/components/broadcast/SoloMapToggleButton.vue

diff --git a/website/src/components/broadcast/SoloControlButton.vue b/website/src/components/broadcast/SoloControlButton.vue
index d37792c1..048be489 100644
--- a/website/src/components/broadcast/SoloControlButton.vue
+++ b/website/src/components/broadcast/SoloControlButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="control-button d-flex flex-column" v-bind:class="elClass" @click="() => click && click()" :style="css">
+    <div class="control-button d-flex flex-column" v-bind:class="elClass" @click="() => click && !noclick && click()" :style="css">
         <span class="icon" v-if="icon"><i :class="icon"></i></span>
         <span class="slot"><slot></slot></span>
     </div>
@@ -75,7 +75,8 @@ export default {
         background-color: white;
     }
     .control-button:not(.noclick):hover {
-        opacity: 1;
+        /* this fixes a bug for some reason */
+        opacity: 0.99;
     }
 
     .control-button.control-slice {
diff --git a/website/src/components/broadcast/SoloMapButton.vue b/website/src/components/broadcast/SoloMapButton.vue
index 43a97dfe..c681bddf 100644
--- a/website/src/components/broadcast/SoloMapButton.vue
+++ b/website/src/components/broadcast/SoloMapButton.vue
@@ -1,5 +1,7 @@
 <template>
-    <SoloControlButton class="map-button" :click="() => click()" :style="bg" :noclick="noclick">
+    <SoloControlButton class="map-button" :click="() => click()" :noclick="noclick" :class="{'has-gel': !!teamGel}">
+        <div class="bg" :style="bg"></div>
+        <div class="team-gel" v-if="teamGel" :style="teamGelBG"></div>
         <div class="top flex-center" v-if="topText">
             <div class="text top-text">{{ topText }}</div>
         </div>
@@ -10,17 +12,21 @@
 <script>
 import SoloControlButton from "@/components/broadcast/SoloControlButton";
 import { resizedImage } from "@/utils/images";
+import { logoBackground } from "@/utils/theme-styles";
 
 export default {
     name: "SoloMapButton",
     components: { SoloControlButton },
-    props: ["map", "click", "topText", "noclick"],
+    props: ["map", "click", "topText", "noclick", "teamGel"],
     computed: {
         bg() {
             console.log("Map BG", this.map);
             if (!this.map?.image) return {};
             return resizedImage(this.map, ["image"], "h-200");
         },
+        teamGelBG() {
+            return this.teamGel && logoBackground(this.teamGel);
+        },
         text() {
             return this.map?.short_name || "Choose map";
         }
@@ -49,4 +55,21 @@ export default {
         width: 100%;
         padding-top: 15px;
     }
+    .team-gel, .bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .bg {
+        z-index: -2;
+    }
+    .map-button.has-gel .bg {
+        filter: grayscale(1);
+    }
+    .team-gel {
+        z-index: -1;
+        opacity: 0.4;
+    }
 </style>
diff --git a/website/src/components/broadcast/SoloMapToggleButton.vue b/website/src/components/broadcast/SoloMapToggleButton.vue
new file mode 100644
index 00000000..0e089c7e
--- /dev/null
+++ b/website/src/components/broadcast/SoloMapToggleButton.vue
@@ -0,0 +1,99 @@
+<template>
+    <SoloControlButton class="map-button" :click="() => click()" :style="bg" :noclick="noclick">
+        <div class="top flex-center" v-if="topText">
+            <div class="text top-text">{{ topText }}</div>
+        </div>
+
+        <div class="selection-box" v-if="!noclick">
+            <div class="box empty" :class="{'active': !current}">
+                No winner
+            </div>
+            <div class="box team" v-for="(team, i) in teams" :key="team?.id" :class="{'active': current === `team-${i+1}`}">
+                <div class="team-code w-100" :style="themeBackground1(team)">{{ team?.code }}</div>
+            </div>
+            <div class="box draw" :class="{'active': current === 'draw'}">
+                <div class="draw-text">DRAW</div>
+            </div>
+        </div>
+    </SoloControlButton>
+</template>
+
+<script>
+import SoloControlButton from "@/components/broadcast/SoloControlButton";
+import { resizedImage } from "@/utils/images";
+import { themeBackground1 } from "@/utils/theme-styles";
+
+export default {
+    name: "SoloMapToggleButton",
+    methods: { themeBackground1 },
+    components: { SoloControlButton },
+    props: ["map", "click", "topText", "noclick", "current", "teams"],
+    computed: {
+        bg() {
+            console.log("Map BG", this.map);
+            if (!this.map?.image) return {};
+            return resizedImage(this.map, ["image"], "h-200");
+        },
+        text() {
+            return this.current;
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .map-button {
+        color: white !important;
+        background-size: cover;
+        background-position: center;
+        font-size: 2em;
+        justify-content: flex-end;
+        padding-bottom: 15px;
+        position: relative;
+    }
+    .map-button >>> div.text {
+        background-color: rgba(0,0,0,0.8);
+        padding: 3px 8px;
+    }
+    .top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        padding-top: 15px;
+    }
+
+    .selection-box {
+        display: flex;
+        background-color: rgba(0,0,0,0.8);
+        flex-direction: column;
+    }
+
+    .selection-box, .box {
+        border: 1px solid rgba(0,0,0,0.5);
+    }
+
+    .box {
+        width: 100%;
+        height: 26px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        opacity: 0.3;
+    }
+    .box.active {
+        border-color: white;
+        background-color: rgba(255,255,255,0.5);
+        opacity: 1;
+    }
+
+    .selection-box {
+        width: 160px;
+    }
+
+    .box.draw, .box.empty {
+        font-size: 13px;
+    }
+</style>
diff --git a/website/src/components/broadcast/SoloOverlay.vue b/website/src/components/broadcast/SoloOverlay.vue
index 7c62e058..3ea95c61 100644
--- a/website/src/components/broadcast/SoloOverlay.vue
+++ b/website/src/components/broadcast/SoloOverlay.vue
@@ -16,18 +16,18 @@
 
 
         <div class="solo-part solo--controls">
-            <div class="solo-pixel-info">200px</div>
+            <div class="solo-pixel-info">200px / {{ controlMode }}</div>
 <!--            <div class="solo-pixel-info d-flex">{{ controlMode }}</div>-->
             <div class="control-group" v-if="controlMode === 'default'">
                 <SoloControlButton noclick left rotate>SLMN.GG</SoloControlButton>
                 <SoloControlButton icon="fas fa-exchange" color="#f22cf2" :click="() => flipTeams()">Flip teams</SoloControlButton>
                 <SoloControlButton icon="fas fa-users" :color="teams[0] && teams[0].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-1'">Set Team 1</SoloControlButton>
                 <SoloControlButton icon="far fa-users" :color="teams[1] && teams[1].id ? '#2cd1f2' : ''" :click="() => controlMode = 'set-team-2'">Set Team 2</SoloControlButton>
-                <SoloControlButton icon="fas fa-medal" color="#f22cf2" :click="() => controlMode = 'set-scores'">Set Scores</SoloControlButton>
-                <SoloControlButton icon="fas fa-align-center" :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Set Middle</SoloControlButton>
-                <SoloControlButton v-if="showModule('break')" icon="far fa-snooze" :click="() => controlMode = 'set-break'">Break</SoloControlButton>
+                <SoloControlButton icon="fas fa-align-center" :color="middle ? '#2cd1f2' : ''" :click="() => controlMode = 'set-middle'">Middle</SoloControlButton>
+                <SoloControlButton icon="fas fa-medal" color="#f22cf2" :click="() => controlMode = 'set-scores'">Scores</SoloControlButton>
+                <SoloControlButton icon="fas fa-map-marked-alt" color="#f22cf2" :click="() => controlMode = 'set-maps'" v-if="showModule('overview')">Maps & Winners</SoloControlButton>
+                <SoloControlButton v-if="showModule('break')" :color="!breakEnd ? '#f22cf2' : '#2cd1f2'" icon="far fa-snooze" :click="() => controlMode = 'set-break'">Break</SoloControlButton>
 
-                <SoloControlButton icon="fas fa-map-marked-alt" color="#f22cf2" :click="() => controlMode = 'set-maps'" v-if="showModule('overview')">Set Maps</SoloControlButton>
 
                 <div class="spacer"></div>
 <!--                <SoloControlButton icon="fas fa-wrench" color="#f22cf2" :click="() => controlMode = 'set-options'">Match Options</SoloControlButton>-->
@@ -104,9 +104,23 @@
             <div class="control-group" v-if="controlMode === 'set-maps'">
                 <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
 
-                <SoloMapButton v-for="num in mapNums" :key="num" :click="() => chooseMap(num)" :noclick="num !== 0 && !maps[Math.max(0,num - 1)]?.name" :map="maps[num]" :top-text="`Map ${num + 1}`"></SoloMapButton>
+                <SoloMapButton v-for="num in mapNums" :key="num" :click="() => chooseMap(num)" :noclick="num !== 0 && !maps[Math.max(0,num - 1)]?.name"
+                               :map="maps[num]" :top-text="`Map ${num + 1}`" :team-gel="mapWinners[num] === 'team-1' ? teams[0]?.theme : (mapWinners[num] === 'team-2'? teams[1]?.theme : null)"></SoloMapButton>
+
+                <div class="spacer"></div>
+                <SoloControlButton icon="fas fa-trophy" style="font-size: 2.5em" color="#f17a2c" :click="() => controlMode = 'set-map-winners'">Set Winners</SoloControlButton>
+                <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
+            </div>
+            <div class="control-group" v-if="controlMode === 'set-map-winners'">
+                <SoloControlButton left rotate :click="() => controlMode = 'default'">Menu</SoloControlButton>
+
+                <SoloMapToggleButton v-for="num in mapNums" :key="num" :click="() => toggleMapWinner(num)"
+                                     :teams="teams" :map="maps[num]" :noclick="num !== 0 && !maps[Math.max(0,num - 1)]?.name"
+                                     :top-text="maps[num]?.short_name || `Map ${num + 1}`" :current="mapWinners[num]">
+                </SoloMapToggleButton>
 
                 <div class="spacer"></div>
+                <SoloControlButton icon="fas fa-map-marked-alt" style="font-size: 2.5em" :click="() => controlMode = 'set-maps'">Set<br>Maps</SoloControlButton>
                 <SoloControlButton noclick right rotate>SLMN.GG</SoloControlButton>
             </div>
             <div class="control-group" v-if="controlMode === 'set-map'">
@@ -120,7 +134,7 @@
             </div>
 
             <div class="control-group" v-if="controlMode === 'choose-map'">
-                <SoloControlButton left rotate :click="() => controlMode = 'set-maps'" color="#f0802c">Maps</SoloControlButton>
+                <SoloControlButton left rotate :click="() => controlMode = 'set-maps'" color="#f0a02c">Maps</SoloControlButton>
                 <SoloControlButton noclick>Map {{ controllingMapNum + 1 }} <small>{{ maps[controllingMapNum]._type || maps[controllingMapNum].type || '' }}</small></SoloControlButton>
 
                 <SoloMapButton v-for="map in currentMapChunk" v-bind:key="map.id" :map="map"
@@ -182,11 +196,13 @@ import RosterOverlay from "@/components/broadcast/roots/RosterOverlay";
 import BreakOverlay from "@/components/broadcast/break/BreakOverlay";
 import OverviewOverlay from "@/components/broadcast/roots/OverviewOverlay";
 import SoloMapButton from "@/components/broadcast/SoloMapButton";
+import SoloMapToggleButton from "@/components/broadcast/SoloMapToggleButton.vue";
 
 export default {
     name: "SoloOverlay",
     props: ["broadcast", "client", "title", "modules", "rosterOptions", "showMapVideos"],
     components: {
+        SoloMapToggleButton,
         SoloMapButton,
         OverviewOverlay,
         RosterOverlay,
@@ -205,12 +221,13 @@ export default {
         controllingMapNum: null,
 
         teams: [
-            { name: "Team 1", has_theme: 0 },
-            { name: "Team 2", has_theme: 0 }
+            { name: "Team 1", code: "T1", has_theme: 0 },
+            { name: "Team 2", code: "T2", has_theme: 0 }
         ],
         scores: [0, 0],
         breakEnd: null,
         maps: [],
+        mapWinners: [],
         showGuides: false,
         firstTo: 3,
 
@@ -275,6 +292,28 @@ export default {
         setFirstTo(num) {
             this.firstTo = num;
             this.controlMode = "set-scores";
+        },
+        toggleMapWinner(num) {
+            console.log("toggle winner", num);
+            const rotation = [null, "team-1", "team-2", "draw"];
+            let current = this.mapWinners[num];
+            if (current === undefined) {
+                this.$set(this.mapWinners, num, null);
+                current = null;
+            }
+
+            const index = rotation.indexOf(current);
+            if (index === -1) {
+                console.warn("Unsure what map winner to toggle to", { num, current });
+                this.$set(this.mapWinners, num, null);
+                return;
+            }
+            if (index >= rotation.length - 1) {
+                this.$set(this.mapWinners, num, rotation[0]);
+            } else {
+                this.$set(this.mapWinners, num, rotation[index + 1]);
+            }
+            console.log(this.mapWinners[num]);
         }
     },
     watch: {
@@ -360,6 +399,22 @@ export default {
             if (!this.chunkedMaps?.[this.controlPage]) return [];
             return this.chunkedMaps[this.controlPage];
         },
+        mapsWithWinners() {
+            return this.maps.map((_map, i) => {
+                const map = { ..._map };
+                const mapWinData = this.mapWinners[i];
+                if (mapWinData) {
+                    if (mapWinData === "draw") {
+                        map.draw = true;
+                    } else if (mapWinData === "team-1") {
+                        map.winner = this.teams[0];
+                    } else if (mapWinData === "team-2") {
+                        map.winner = this.teams[1];
+                    }
+                }
+                return map;
+            });
+        },
         virtualMatch() {
             return {
                 teams: this.teams,
@@ -370,7 +425,7 @@ export default {
                 _virtual_match_category: this.matchCategory,
                 _virtual_break_end: this.breakEnd,
                 first_to: this.firstTo,
-                maps: this.maps
+                maps: this.mapsWithWinners
             };
         },
         scoreArray() {