Add a self serve overlay for public use

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)

website/src/apps/BroadcastApp.vue

@@ -115,9 +115,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;
+            // });
         }
         if (this.broadcastKey) {
             console.log("loading with broadcastKey");

website/src/components/broadcast/MapDisplay.vue

@@ -20,7 +20,7 @@ import { getNewURL } from "@/utils/images";
 export default {
     name: "MapDisplay",
     components: { MapSegment },
-    props: ["broadcast", "animationActive", "useTransitions", "noMapVideos"],
+    props: ["broadcast", "animationActive", "useTransitions", "virtualMatch", "noMapVideos"],
     data: () => ({
         activeAudio: null,
         showNextMap: false,
@@ -29,6 +29,7 @@ export default {
     }),
     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", {

website/src/components/broadcast/SoloControlButton.vue

@@ -0,0 +1,102 @@
+<template>
+    <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>
+</template>
+
+<script>
+export default {
+    name: "SoloControlButton",
+    props: {
+        left: Boolean,
+        right: Boolean,
+        rotate: Boolean,
+        noclick: Boolean,
+        click: Function,
+        color: String,
+        icon: 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,
+                "has-icon": !!this.icon
+            };
+        }
+    }
+};
+</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.has-icon .slot {
+        margin-top: .25em;
+        font-size: 0.9em;
+        line-height: 1;
+    }
+    .control-button.noclick {
+        cursor: default;
+        opacity: 0.7;
+        background-color: white;
+    }
+    .control-button:not(.noclick):hover {
+        /* this fixes a bug for some reason */
+        opacity: 0.99;
+    }
+
+    .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>

website/src/components/broadcast/SoloMapButton.vue

@@ -0,0 +1,75 @@
+<template>
+    <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>
+        <div class="text">{{ text }}</div>
+    </SoloControlButton>
+</template>
+
+<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", "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";
+        }
+    }
+};
+</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;
+    }
+    .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>

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>