Add team shields to cams overlay for observers

slmnio · Oct 20, 2022 · c3ff5b9 · c3ff5b9
1 parent 1c0e2ad
commit c3ff5b9
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 7 deletions.
diff --git a/website/src/components/broadcast/cams/CamOverlay.vue b/website/src/components/broadcast/cams/CamOverlay.vue
@@ -12,12 +12,18 @@
                 <span class="industry-align">{{ name }}</span>
             </div>
         </div>
+        <div class="team-shield-holder d-flex flex-center" v-if="showShield && activeTeam">
+            <div class="team-shield" :style="logoBackground1(activeTeam)">
+                <div class="shield-triangle"></div>
+                <ThemeLogo small="true" logo-size="w-50" icon-padding="2px" border-width="0" class="shield-logo" :theme="activeTeam.theme"></ThemeLogo>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
-import { themeBackground1 } from "@/utils/theme-styles";
+import { logoBackground1, themeBackground1 } from "@/utils/theme-styles";
 import CasterCam from "@/components/broadcast/desk/CasterCam";
 import ThemeLogo from "@/components/website/ThemeLogo";
 
@@ -26,15 +32,21 @@ export default {
     props: ["broadcast", "params", "number", "full", "alwaysShow", "relay", "client"],
     components: { CasterCam, ThemeLogo },
     computed: {
+        broadcastSettings() {
+            return this.broadcast?.broadcast_settings || [];
+        },
+        showShield() {
+            return this.broadcastSettings.includes("Show team shield on cams");
+        },
         shouldShowCam() {
-            if (this.broadcast?.broadcast_settings?.includes("Disable POV cams")) {
+            if (this.broadcastSettings?.includes("Disable POV cams")) {
                 console.warn("Cam disabled by broadcast settings");
                 return false;
             }
             if (this.alwaysShow) {
                 return this.activeGuest; // needs at least a guest
             } else {
-                if (this.broadcast?.broadcast_settings?.includes("Ignore client cam whitelists")) return this.activeGuest?.use_cam;
+                if (this.broadcastSettings?.includes("Ignore client cam whitelists")) return this.activeGuest?.use_cam;
 
                 const attemptedTeam = this.number >= 7 ? 2 : 1;
                 const cams = this.client?.cams;
@@ -46,7 +58,7 @@ export default {
             }
         },
         shouldShowName() {
-            if (!this.broadcast?.broadcast_settings?.includes("Enable player names")) return false;
+            if (!this.broadcastSettings?.includes("Enable player names")) return false;
 
             return this.activeGuest?.name;
         },
@@ -119,6 +131,9 @@ export default {
             return str;
         }
     },
+    methods: {
+        logoBackground1
+    },
     metaInfo() {
         return {
             title: this.title
@@ -208,6 +223,53 @@ export default {
 
     #overlay {
         /*background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/921883053968728074/unknown.png);*/
+        /*background-image: url(https://cdn.discordapp.com/attachments/855517740914573342/1032407724287336508/Frame_4.png);*/
+        /*background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/1032427693456752750/ScreenShot_22-10-19_23-58-16-000.jpg);*/
+        /*background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/1032428073473282048/unknown.png);*/
+        /*background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/1032428192625070100/unknown.png);*/
         /*background-size: 1920px 1080px;*/
     }
+
+    .team-shield-holder {
+        position: absolute;
+        bottom: 42px;
+        left: 54px;
+        width: 101px;
+        height: 50px;
+        align-items: flex-start;
+
+    }
+    .shield-logo {
+        width: 32px !important;
+        height: 32px !important;
+        background-color: transparent !important;
+        transform: translate(0, 3px);
+        z-index: 2;
+        position: absolute;
+    }
+    .team-shield {
+        width: 36px;
+        height: 36px;
+        border: 2px solid transparent;
+        border-radius: 4px;
+        border-bottom: none;
+        position: relative;
+    }
+    .team-shield .shield-triangle {
+        content: "";
+        position: absolute;
+        display: block;
+        --size: 28px;
+        left: 2px;
+        top: 16px;
+        width: var(--size);
+        height: var(--size);
+        transform: rotate(-45deg);
+        border: 2px solid transparent;
+        background-color: inherit;
+        border-color: inherit;
+        transform-origin: center;
+        clip-path: polygon(0 0, 0% 100%, 100% 100%);
+        border-radius: 4px;
+    }
 </style>
diff --git a/website/src/components/website/ThemeLogo.vue b/website/src/components/website/ThemeLogo.vue
@@ -18,10 +18,10 @@ function sizePadding(val, defaultVal) {
 
 export default {
     name: "ThemeLogo",
-    props: ["theme", "iconPadding", "borderWidth", "logoSize"],
+    props: ["theme", "iconPadding", "borderWidth", "logoSize", "small"],
     computed: {
         image() {
-            if (this.logoSize && parseInt(this.logoSize) <= 100) {
+            if (this.small || (this.logoSize && parseInt(this.logoSize) <= 100)) {
                 // use smalls if possible
                 return resizedImage(this.theme, ["small_logo", "default_logo"], this.logoSize);
             }

diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
@@ -62,7 +62,7 @@ export default [
                 path: "pov",
                 component: CamOverlay,
                 props: route => ({
-                    number: route.query.number || route.query.player,
+                    number: route.query.number || route.query.num || route.query.player,
                     full: !!route.query.full || !!route.query.relay,
                     alwaysShow: !!route.query.alwaysShow || !!route.query.relay,
                     relay: !!route.query.relay