diff --git a/website/src/components/broadcast/roots/QuadTallyDot.vue b/website/src/components/broadcast/roots/QuadTallyDot.vue index 8b6f6b2f..6986c626 100644 --- 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 index 9770a120..060b2511 100644 --- a/website/src/components/broadcast/roots/TallyDot.vue +++ b/website/src/components/broadcast/roots/TallyDot.vue @@ -1,8 +1,15 @@ - {{ number }} - {{ observer || '' }} + + {{ number }} + + + {{ observerName || '' }} + + {{ team.slice(-1) }} + + @@ -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; +} + diff --git a/website/src/components/website/dashboard/BroadcastEditor.vue b/website/src/components/website/dashboard/BroadcastEditor.vue index a92f741f..3b5df9c2 100644 --- a/website/src/components/website/dashboard/BroadcastEditor.vue +++ b/website/src/components/website/dashboard/BroadcastEditor.vue @@ -42,10 +42,7 @@