Update dots and minor fixes

slmnio · Dec 30, 2022 · 7c0e629 · 7c0e629
1 parent ac63df0
commit 7c0e629
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/website/src/components/broadcast/roots/QuadTallyDot.vue b/website/src/components/broadcast/roots/QuadTallyDot.vue
@@ -15,6 +15,7 @@ export default {
     props: ["client"],
     components: { TallyDot },
     data: () => ({
+        noBroadcastStyle: true,
         noStinger: true
     })
 };

diff --git a/website/src/components/broadcast/roots/TallyDot.vue b/website/src/components/broadcast/roots/TallyDot.vue
@@ -1,8 +1,15 @@
 <template>
     <div class="tally-dot">
         <div class="d-flex">
-            <div class="dot" v-bind:class="{ preview: state === 'preview', active: state === 'active', 'unassigned': !observer }">{{ number }}</div>
-            <div class="text">{{ observer || '' }}</div>
+            <div class="dot" v-bind:class="{ preview: state === 'preview', active: state === 'active', 'unassigned': !observer }">
+                <span class="industry-align">{{ number }}</span>
+            </div>
+            <div class="text">
+                <span class="name">{{ observerName || '' }}</span>
+                <span class="team-cams">
+                    <span class="team" v-for="team in teamCams" :key="team">{{ team.slice(-1) }}</span>
+                </span>
+            </div>
         </div>
     </div>
 </template>
@@ -50,16 +57,24 @@ export default {
             return (this.liveMatch?.player_relationships || []).filter(rel => rel.singular_name === "Observer");
         },
         observer() {
-            return this.observers[this.number - 1]?.player?.name;
+            return this.observers[this.number - 1];
+        },
+        observerName() {
+            return this.observer?.player?.name;
         },
         liveMatch() {
             const matchID = this.client?.broadcast?.live_match?.[0];
             if (!matchID) return null;
             return ReactiveRoot(matchID, {
                 player_relationships: ReactiveArray("player_relationships", {
-                    player: ReactiveThing("player")
+                    player: ReactiveThing("player", {
+                        clients: ReactiveThing("clients")
+                    })
                 })
             });
+        },
+        teamCams() {
+            return this.observer.player.clients.cams;
         }
     },
     data: () => ({
@@ -87,7 +102,7 @@ export default {
     position: absolute;
     bottom: 0;
     left: 0;
-    margin: .2em;
+    padding: .2em;
     font-size: 120px;
     justify-content: flex-start;
     align-items: flex-end;
@@ -99,17 +114,24 @@ export default {
     border-radius: 50%;
     text-align: center;
     font-weight: bold;
+
+    line-height: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 6px solid #222;
 }
 
 .text {
     font-weight: bold;
     margin-left: .2em;
-    text-shadow: 4px 4px black, 0 0 4px black;
+    text-shadow: 8px 8px black, 0 0 8px black;
 }
 
 .dot {
     background-color: black;
     color: white;
+    font-size: 1.25em;
 }
 .dot.unassigned {
     color: rgba(255,255,255,0.5);
@@ -125,4 +147,16 @@ export default {
     background-color: #ff0000;
 }
 
+.team-cams .team {
+    background-color: black;
+    font-size: 0.4em;
+    padding:  0 0.25em;
+    margin-left: 0.1em;
+    line-height: 1;
+}
+
+.team-cams {
+    margin-left: .1em;
+}
+
 </style>
diff --git a/website/src/components/website/dashboard/BroadcastEditor.vue b/website/src/components/website/dashboard/BroadcastEditor.vue
@@ -42,10 +42,7 @@
 <script>
 import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
 import {
-    setBroadcastAdvertise,
-    setMapAttack,
     toggleFlipTeams,
-    togglePlayerCams,
     updateBroadcastData
 } from "@/utils/dashboard";
 

diff --git a/website/src/views/sub-views/PlayerBrands.vue b/website/src/views/sub-views/PlayerBrands.vue
@@ -10,7 +10,6 @@
 </template>
 
 <script>
-import { sortTeams } from "@/utils/sorts";
 import ThemeLogo from "@/components/website/ThemeLogo";
 
 export default {