Add manual guests & dashboard editor

server/src/actions/update-broadcast.js

@@ -3,18 +3,18 @@ const { safeInput } = require("../action-utils/action-utils");
 module.exports = {
     key: "update-broadcast",
     auth: ["client"],
-    optionalParams: ["match", "advertise", "playerCams", "mapAttack", "title"],
+    optionalParams: ["match", "advertise", "playerCams", "mapAttack", "title", "manualGuests"],
     /***
      * @param {AnyAirtableID} match
      * @param {ClientData} client
      * @returns {Promise<void>}
      */
     // eslint-disable-next-line no-empty-pattern
-    async handler({ match: matchID, advertise, playerCams, mapAttack, title }, { client }) {
+    async handler({ match: matchID, advertise, playerCams, mapAttack, title, manualGuests }, { client }) {
         let broadcast = await this.helpers.get(client?.broadcast?.[0]);
         if (!broadcast) throw ("No broadcast associated");
 
-        console.log({ matchID, advertise, playerCams, mapAttack, title });
+        console.log({ matchID, advertise, playerCams, mapAttack, title, manualGuests });
         let validatedData = {};
 
         if (matchID !== undefined) {
@@ -40,6 +40,9 @@ module.exports = {
         if (title !== undefined) {
             validatedData["Title"] = safeInput(title);
         }
+        if (manualGuests !== undefined) {
+            validatedData["Manual Guests"] = safeInput(manualGuests);
+        }
 
         console.log(validatedData);
 

website/src/assets/app.css

@@ -83,10 +83,6 @@ a:not(.link-text), a:not(.link-text):hover {
     background-color: var(--theme);
 }
 
-.btn-primary {
-    background-color: var(--brand-theme);
-    border-color: var(--brand-theme);
-}
 /*.btn:hover:not(:disabled), .btn.hover:not(:disabled) {*/
 /*    background-color: #00a367 !important;*/
 /*    border-color: #00a367 !important;*/
@@ -279,3 +275,8 @@ input.no-arrows[type=number] {
     width: 500px;
     height: 500px;
 }
+
+.table.border-no-top tr:first-child td,
+.table.border-no-top tr:first-child th {
+    border-top: none;
+}

website/src/components/broadcast/auction/AuctionOverlay.vue

@@ -20,27 +20,34 @@
                 </div>
             </div>
             <div class="player-middle d-flex flex-grow-1">
-                <div class="player-info w-100 flex-center flex-column position-relative">
+                <div class="player-info-holder w-100 flex-center flex-column position-relative">
                     <AuctionCountdown v-if="player" />
+                    <transition name="color-block-fade">
+                        <div class="color-block" v-if="blockColorCSS" :style="blockColorCSS"></div>
+                    </transition>
                     <transition name="fade-right">
                         <RecoloredHero v-if="!showCaptainInfo && player && player.favourite_hero" :theme="heroColor" :hero="player.favourite_hero"></RecoloredHero>
                     </transition>
                     <transition name="fade-right">
                         <div class="player-info" v-if="player">
                             <div class="player-name">{{ player.name }}</div>
-                            <div class="player-role" v-if="player.role" v-html="getRoleSVG(player.role)"></div>
-                            <div class="accolades" v-if="accolades.length">
-                                <ContentThing :thing="accolade" type="event" :link-to="accolade.event" :theme="accolade.event && accolade.event.theme" v-for="accolade in accolades"
-                                              :key="accolade.id" :show-logo="true" :text="accolade.player_text" />
-                            </div>
-                            <div class="player-captain-info" v-if="showCaptainInfo">
-                                {{ player.pronouns }}
+                            <div class="player-extras">
+                                <div class="player-role" v-if="player.role" v-html="getRoleSVG(player.role)"></div>
+                                <div class="accolades" v-if="accolades.length">
+                                    <ContentThing :thing="accolade" type="event" :link-to="accolade.event"
+                                                  :theme="accolade.event && accolade.event.theme"
+                                                  v-for="accolade in accolades"
+                                                  :key="accolade.id" :show-logo="true" :text="accolade.player_text"/>
+                                </div>
+                                <div class="player-captain-info" v-if="showCaptainInfo">
+                                    {{ player.pronouns }}
                                     <br>
-                                {{ player.draft_data }}
-                            </div>
-                            <div class="player-teams d-flex flex-wrap flex-center" v-for="group in groupedTeams"
-                                 :key="group.group" :class="`group-${group.group}`">
-                                <PlayerTeamDisplay :team="team" v-for="team in group.teams" :key="team.id"/>
+                                    {{ player.draft_data }}
+                                </div>
+                                <div class="player-teams d-flex flex-wrap flex-center" v-for="group in groupedTeams"
+                                     :key="group.group" :class="`group-${group.group}`">
+                                    <PlayerTeamDisplay :team="team" v-for="team in group.teams" :key="team.id"/>
+                                </div>
                             </div>
                         </div>
                     </transition>
@@ -79,13 +86,13 @@
                     <SignedTeamList :team="signedTeam" :amount="signAmount" :signedPlayer="socketPlayerID" :auction-settings="auctionSettings" />
                 </div>
                 <div :style="background" class="bid-focus flex-center h-100 w-100" v-if="rightDisplay === 'bid-focus'" key="bid-focus">
-                    <BidFocus :teams="teams" :bids="bids"/>
+                    <BidFocus :teams="teams" :bids="bids" :auction-settings="auctionSettings" />
                 </div>
                 <div :style="background" class="team-focus" v-if="rightDisplay === 'team-focus'" key="team-focus">
                     <TeamFocus :team="highlightedTeam" :auction-settings="auctionSettings" />
                 </div>
                 <div :style="background" class="bidding-war" v-if="rightDisplay === 'bidding-war'" key="bidding-war">
-                    <BiddingWar :teams="biddingWar" :leading="leadingBid"/>
+                    <BiddingWar :teams="biddingWar" :leading="leadingBid" :auction-settings="auctionSettings"/>
                 </div>
             </transition>
         </div>
@@ -99,7 +106,7 @@ import { cleanID, getRoleSVG, money } from "@/utils/content-utils";
 import PlayerTeamDisplay from "./PlayerTeamDisplay";
 import { sortEvents } from "@/utils/sorts";
 import SignedTeamList from "@/components/broadcast/auction/SignedTeamList";
-import { logoBackground1 } from "@/utils/theme-styles";
+import { logoBackground1, themeBackground1 } from "@/utils/theme-styles";
 import BidFocus from "./BidFocus";
 import TeamFocus from "@/components/broadcast/auction/TeamFocus";
 import BiddingWar from "@/components/broadcast/auction/BiddingWar";
@@ -222,9 +229,10 @@ export default {
         accolades() {
             if (!this.player) return [];
 
+            console.log("accolades", this.players?.member_of);
             return [
                 // team things
-                ...(this.player.member_of ? [].concat(...this.player.member_of.map(e => e.accolades).filter(e => !!e)) : []),
+                ...(this.player.member_of ? [].concat(...this.player.member_of.map(e => e.accolades).filter(e => e?.show_for_players)) : []),
                 ...(this.player.accolades ? this.player.accolades : [])
             ];
         },
@@ -285,8 +293,6 @@ export default {
             });
         },
         rightDisplay() {
-            // return "bid-focus";
-            // // eslint-disable-next-line no-unreachable
             if (this.justSigned) return "sign-focus";
             if (this.biddingWar && !this.showCaptainInfo) return "bidding-war";
             if (this.highlightedTeam) return "team-focus";
@@ -374,21 +380,29 @@ export default {
         heroColor() {
             return this.signedTeam?.theme || this.broadcast?.event?.theme;
         },
+        blockColorCSS() {
+            if (!this.signedTeam?.theme?.color_theme) return null;
+            return {
+                backgroundImage: `linear-gradient(to top, ${this.signedTeam?.theme?.color_theme}, transparent)`
+            };
+        },
         leadingBid() {
             if (!this.bids) return null;
             return this.bids[this.bids.length - 1];
         },
         biddingWar() {
             // if (!this.biddingActive) return false;
-            const count = 5;
+            const count = 6;
             const latestBids = this.bids.slice(Math.max(this.bids.length - count, 0));
             if (latestBids.length !== count) return false;
             const teams = [];
-            console.log(latestBids);
+            console.log("latest bids", latestBids);
             latestBids.forEach((bid) => {
-                if (teams.indexOf(bid.teamID) === -1) teams.push(this.teams.find(t => cleanID(t.id) === cleanID(bid.teamID)));
+                if (!teams.find(t => cleanID(t?.id) === cleanID(bid.teamID))) {
+                    teams.push(this.teams.find(t => cleanID(t.id) === cleanID(bid.teamID)));
+                }
             });
-            console.log(teams);
+            console.log("bidding war teams", teams);
             if (teams.length === 2) return teams;
             return null;
         },
@@ -418,6 +432,7 @@ export default {
         }
     },
     methods: {
+        themeBackground1,
         money,
         getRoleSVG,
         getLogo(teamID) {
@@ -619,6 +634,7 @@ export default {
         transform: translate(0,0)
     }
 
+
     .fade-scroll-enter-active, .fade-scroll-leave-active {
         transition: all 500ms ease;
     }
@@ -816,4 +832,22 @@ export default {
         height: 60px;
         margin-bottom: 20px;
     }
+    .color-block {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0.5;
+    }
+    .color-block-fade-enter-active, .color-block-fade-leave-active { transition: opacity 750ms ease; }
+    .color-block-fade-enter, .color-block-fade-leave-to { opacity: 0; }
+    .color-block-fade-enter-to, .color-block-fade-leave { opacity: 0.5; }
+
+
+    .player-extras {
+        max-height: 670px;
+    }
+
+    .player-info-holder {
+        padding-top: 48px;
+    }
 </style>

website/src/components/broadcast/auction/BidFocus.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="bid-focus-grid">
-        <BidFocusTeam class="team" v-for="team in teams" :key="team.id" :team="team" :leading="leadingBid" />
+        <BidFocusTeam class="team" v-for="team in teams" :key="team.id" :team="team" :leading="leadingBid" :auction-settings="auctionSettings" />
     </div>
 </template>
 
@@ -9,7 +9,7 @@ import BidFocusTeam from "./BidFocusTeam";
 
 export default {
     name: "BidFocus",
-    props: ["teams", "bids"],
+    props: ["teams", "bids", "auctionSettings"],
     components: { BidFocusTeam },
     computed: {
         leadingBid() {

website/src/components/broadcast/auction/BiddingWar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bidding-war d-flex">
         <div class="bidding-war-text">BIDDING WAR</div>
-        <TeamFocus class="team-focus" v-for="team in _teams" :team="team" :key="team.id" :leading="leading" />
+        <TeamFocus class="team-focus" v-for="team in filledTeams" :team="team" :key="team.id" :leading="leading" :auction-settings="auctionSettings" />
     </div>
 </template>
 
@@ -12,9 +12,9 @@ import { ReactiveArray, ReactiveRoot, ReactiveThing } from "@/utils/reactive";
 export default {
     name: "BiddingWar",
     components: { TeamFocus },
-    props: ["teams", "leading"],
+    props: ["teams", "leading", "auctionSettings"],
     computed: {
-        _teams() {
+        filledTeams() {
             if (!this.teams) return [];
             return this.teams.map(t => ReactiveRoot(t, {
                 theme: ReactiveThing("theme"),
@@ -33,9 +33,9 @@ export default {
         height: 250px;
     }
     .team-focus {
-        margin: 0;
         width: 50% !important;
         flex-shrink: 0;
+        margin-top: 25px;
     }
     .bidding-war >>> .title {
         font-size: 40px;
@@ -52,7 +52,15 @@ export default {
         box-shadow: 0 0 0px 4px white;
         transform: scale(1);
     }
-
+    .bidding-war >>> .player {
+        font-size: 23px !important;
+    }
+    .bidding-war >>> .player .player-role {
+        width: 30px;
+        height: 20px;
+        transform: translate(-8px, -2px);
+        margin-right: -7px;
+    }
     .bidding-war-text {
         width: 100%;
         display: flex;
@@ -61,7 +69,8 @@ export default {
         font-size: 64px;
         height: 1.3em;
         position: absolute;
-        top: -35px;
+        top: 0;
+        font-weight: bold;
     }
 
     .bidding-war {

website/src/components/broadcast/auction/TeamFocus.vue

@@ -43,7 +43,7 @@ export default {
         },
         isLeading() {
             if (!this.leading) return false;
-            return cleanID(this.leading.team.id) === this.team.id;
+            return cleanID(this.leading.teamID) === this.team?.id;
         }
     }
 };

website/src/components/broadcast/auction/TeamPlayerList.vue

@@ -143,6 +143,6 @@ export default {
         width: 24px;
         height: 24px;
         margin-right: 2px;
-        transform: translate(-2px, -2px);
+        transform: translate(-2px, -1px);
     }
 </style>

website/src/components/broadcast/desk/Caster.vue

@@ -9,8 +9,8 @@
                 <div class="caster-name flex-center">
                     <div class="c-name industry-align">{{ name }}</div>
                     <div class="c-twitter industry-align" v-if="twitter">{{ twitter }}</div>
-                    <div class="c-pronouns industry-align" v-if="player && player.pronouns && showPronouns && !pronounsOnNewline">{{ player.pronouns }}</div>
-                    <div class="c-pronouns industry-align" v-if="player && player.pronouns && showPronouns && pronounsOnNewline" v-html="breakUp(player.pronouns)"></div>
+                    <div class="c-pronouns industry-align" v-if="pronouns && showPronouns && !pronounsOnNewline">{{ pronouns }}</div>
+                    <div class="c-pronouns industry-align" v-if="pronouns && showPronouns && pronounsOnNewline" v-html="breakUp(pronouns)"></div>
                 </div>
             </div>
         </transition>
@@ -47,7 +47,11 @@ export default {
         player() {
             return this.caster || this.guest.player;
         },
+        pronouns() {
+            return this.player?.pronouns || this.guest?.pronouns;
+        },
         twitter() {
+            if (this.guest?.manual && this.guest?.twitter) return this.guest?.twitter;
             if (!this.player?.socials) return "";
             const twitter = this.player.socials.find(s => s.type === "Twitter");
             if (!twitter) return "";

website/src/components/broadcast/desk/CasterCam.vue

@@ -33,10 +33,12 @@ export default {
             return this.manualCamera ? true : this.apiVisible;
         },
         useCam() {
+            if (this.guest?.webcam?.includes("view=")) return true;
             if (this.disableVideo) return null;
             return this.guest?.use_cam || false;
         },
         streamID() {
+            if (this.guest?.webcam) return this.guest.webcam;
             if (this.relayPrefix) return this.relayPrefix;
             return this.guest?.cam_code || "";
         },
@@ -175,6 +177,7 @@ export default {
         border-radius: 50%;
         box-shadow: 0 0 8px 0 black;
         background-size: cover;
+        background-position: center;
         transform: translate(0, -10%);
         transition: all .4s ease;
     }