Adjustments and draft data decoration fixes

slmnio · Nov 3, 2024 · fffd83c · fffd83c
1 parent a958356
commit fffd83c
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 15 deletions.
diff --git a/website/src/components/broadcast/roots/BoxedHeroRosterOverlay.vue b/website/src/components/broadcast/roots/BoxedHeroRosterOverlay.vue
@@ -5,8 +5,8 @@
                 <div class="team-logo bg-center" :style="teamLogo"></div>
             </div>
             <div class="team-text">
-                <div class="team-name">{{ team?.name }}</div>
-                <div v-if="decoratedSubtitle" class="team-subtitle">{{ decoratedSubtitle }}</div>
+                <div class="team-name industry-align">{{ team?.name }}</div>
+                <div v-if="decoratedSubtitle" class="team-subtitle industry-align">{{ decoratedSubtitle }}</div>
             </div>
         </div>
 
@@ -33,7 +33,7 @@
                     <div class="player-name-holder" :style="themeBackground1(team)">
                         <div class="player-name flex-center text-center">
                             <span class="player-name-internal">{{ player.name }}</span>
-                            <span v-if="showRoles" class="player-role" v-html="getRoleSVG(player.role)"></span>
+                            <span v-if="showRoles" class="player-role" v-html="getRoleSVG(player?._draftData?.role)"></span>
                             <span
                                 v-if="showPronouns"
                                 :style="themeBackground1(team)"
@@ -50,7 +50,7 @@
 import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 import RecoloredHero from "@/components/broadcast/RecoloredHero";
 import { logoBackground1, themeBackground1 } from "@/utils/theme-styles";
-import { autoRecord, getRoleSVG } from "@/utils/content-utils";
+import { autoRecord, decoratePlayerWithDraftData, getRoleSVG } from "@/utils/content-utils";
 import { bg, resizedAttachment, resizedImage } from "@/utils/images";
 import { useStatusStore } from "@/stores/statusStore";
 
@@ -75,7 +75,8 @@ export default {
                 teams: ReactiveArray("teams", {
                     theme: ReactiveThing("theme"),
                     players: ReactiveArray("players", {
-                        favourite_hero: ReactiveThing("favourite_hero")
+                        favourite_hero: ReactiveThing("favourite_hero"),
+                        signup_data: ReactiveArray("signup_data")
                     }),
                     matches: ReactiveArray("matches", {
                         teams: ReactiveArray("teams")
@@ -111,7 +112,7 @@ export default {
                 console.log("auto small text", this.team, this.team.matches);
                 text = autoRecord(this.team, this.broadcast?.current_stage || this.match?.match_group);
             }
-            return (this.subtitle || "").replace("{small}", (this.team.small_overlay_text || text || ""));
+            return (this.subtitle || "").replace("{small}", (this.team?.small_overlay_text || text || ""));
         },
         teamLogo() {
             return resizedImage(this.team?.theme, ["default_logo", "small_logo"], "w-200");
@@ -130,12 +131,12 @@ export default {
             if (this.playerCount) players = (players || []).slice(0, this.playerCount);
             return (players || []).sort((a, b) => {
                 console.log(a, b);
-                if (a.role !== b.role) {
+                if (a._draftData?.role !== b._draftData?.role) {
                     const order = ["DPS", "Tank", "Support"];
-                    return order.indexOf(a.role) - order.indexOf(b.role);
+                    return order.indexOf(a._draftData?.role) - order.indexOf(b._draftData?.role);
                 }
                 return 0;
-            });
+            }).map(p => decoratePlayerWithDraftData(p, this.broadcast?.event?.id));
         },
         titleStyle() {
             return themeBackground1(this.team);

diff --git a/website/src/components/broadcast/roots/GenericTeamsOverlay.vue b/website/src/components/broadcast/roots/GenericTeamsOverlay.vue
@@ -23,7 +23,7 @@
                         </div>
                     </slot>
 
-                    <div class="team-bottom flex-center flex-grow-1 w-100">
+                    <div class="team-bottom flex-center flex-grow-1 w-100 overlay--bg">
                         <slot name="team-content" :team="team"></slot>
                     </div>
                 </slot>

diff --git a/website/src/components/broadcast/roots/HeroRosterOverlay.vue b/website/src/components/broadcast/roots/HeroRosterOverlay.vue
@@ -35,7 +35,7 @@ import GenericOverlay from "@/components/broadcast/roots/GenericOverlay";
 import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 import RecoloredHero from "@/components/broadcast/RecoloredHero";
 import { themeBackground1 } from "@/utils/theme-styles";
-import { getRoleSVG } from "@/utils/content-utils";
+import { decoratePlayerWithDraftData, getRoleSVG } from "@/utils/content-utils";
 import { useStatusStore } from "@/stores/statusStore";
 
 export default {
@@ -52,7 +52,8 @@ export default {
                 teams: ReactiveArray("teams", {
                     theme: ReactiveThing("theme"),
                     players: ReactiveArray("players", {
-                        favourite_hero: ReactiveThing("favourite_hero")
+                        favourite_hero: ReactiveThing("favourite_hero"),
+                        signup_data: ReactiveArray("signup_data")
                     }),
                     staff: ReactiveArray("staff")
                 })
@@ -80,7 +81,7 @@ export default {
             return this.match?.teams?.[0];
         },
         players() {
-            const players = this.team?.players || this.team?.limited_players;
+            const players = (this.team?.players || this.team?.limited_players || []).map(p => decoratePlayerWithDraftData(p, this.broadcast?.event?.id));
             if (!this.team?.players && this.team?.limited_players) {
                 players.forEach(player => {
                     // set hero from lookup

diff --git a/website/src/components/broadcast/roots/HistoryOverlay.vue b/website/src/components/broadcast/roots/HistoryOverlay.vue
@@ -2,7 +2,7 @@
     <GenericTeamsOverlay class="history-overlay" :broadcast="broadcast" :title="title || 'Match History'" :match-schema="matchSchema">
         <template #team-content="{ team }">
             <TeamMatchHistory
-                class="team-roster flex-center flex-column overlay--bg w-100"
+                class="team-roster flex-center flex-column w-100"
                 :team="team"
                 :match="match"
                 :max="max"

diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
@@ -118,7 +118,7 @@ export default [
         component: () => import("@/components/broadcast/roots/BoxedHeroRosterOverlay.vue"),
         props: route => ({
             teamNum: route.query.team || route.query.teamNum,
-            playerCount: route.query.count || route.query.players || route.query.playerCount,
+            playerCount: route.query.count || route.query.players || route.query.playerCount || route.query.max,
             showRoles: !!route.query.role || !!route.query.roles || !!route.query.icons,
             showPronouns: !!route.query.pronouns,
             subtitle: route.query.subtitle,
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ @@
                             </div>
                         </slot>
-                        <div class="team-bottom flex-center flex-grow-1 w-100">
+                        <div class="team-bottom flex-center flex-grow-1 w-100 overlay--bg">
                             <slot name="team-content" :team="team"></slot>
                         </div>
                     </slot>
@@ Expand Down @@