From 00c9bf4468d0f36c12fce00cf060fdc457b04442 Mon Sep 17 00:00:00 2001 From: Solomon Cammack Date: Thu, 11 May 2023 03:58:29 +0100 Subject: [PATCH 1/3] Fix some auction stuff --- .../broadcast/auction/AuctionOverlay.vue | 80 +++++++++++++------ .../components/broadcast/auction/BidFocus.vue | 4 +- .../broadcast/auction/BiddingWar.vue | 21 +++-- .../broadcast/auction/TeamFocus.vue | 2 +- .../broadcast/auction/TeamPlayerList.vue | 2 +- website/src/views/sub-views/EventAuction.vue | 4 +- 6 files changed, 78 insertions(+), 35 deletions(-) diff --git a/website/src/components/broadcast/auction/AuctionOverlay.vue b/website/src/components/broadcast/auction/AuctionOverlay.vue index 6807c6e1..af0df92b 100644 --- a/website/src/components/broadcast/auction/AuctionOverlay.vue +++ b/website/src/components/broadcast/auction/AuctionOverlay.vue @@ -20,27 +20,34 @@
-
+
+ +
+
{{ player.name }}
-
-
- -
-
- {{ player.pronouns }} +
+
+
+ +
+
+ {{ player.pronouns }}
- {{ player.draft_data }} -
-
- + {{ player.draft_data }} +
+
+ +
@@ -79,13 +86,13 @@
- +
- +
@@ -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; + } diff --git a/website/src/components/broadcast/auction/BidFocus.vue b/website/src/components/broadcast/auction/BidFocus.vue index 5ecf9b59..556172ba 100644 --- a/website/src/components/broadcast/auction/BidFocus.vue +++ b/website/src/components/broadcast/auction/BidFocus.vue @@ -1,6 +1,6 @@ @@ -9,7 +9,7 @@ import BidFocusTeam from "./BidFocusTeam"; export default { name: "BidFocus", - props: ["teams", "bids"], + props: ["teams", "bids", "auctionSettings"], components: { BidFocusTeam }, computed: { leadingBid() { diff --git a/website/src/components/broadcast/auction/BiddingWar.vue b/website/src/components/broadcast/auction/BiddingWar.vue index fa27c3a8..e5779981 100644 --- a/website/src/components/broadcast/auction/BiddingWar.vue +++ b/website/src/components/broadcast/auction/BiddingWar.vue @@ -1,7 +1,7 @@ @@ -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 { diff --git a/website/src/components/broadcast/auction/TeamFocus.vue b/website/src/components/broadcast/auction/TeamFocus.vue index c52263f2..9879c6ad 100644 --- a/website/src/components/broadcast/auction/TeamFocus.vue +++ b/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; } } }; diff --git a/website/src/components/broadcast/auction/TeamPlayerList.vue b/website/src/components/broadcast/auction/TeamPlayerList.vue index 197df9d9..97085946 100644 --- a/website/src/components/broadcast/auction/TeamPlayerList.vue +++ b/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); } diff --git a/website/src/views/sub-views/EventAuction.vue b/website/src/views/sub-views/EventAuction.vue index 833329d1..6ea50315 100644 --- a/website/src/views/sub-views/EventAuction.vue +++ b/website/src/views/sub-views/EventAuction.vue @@ -278,8 +278,8 @@ export default { finished: [] }; if (!this.teams?.length) return groups; - this.teams.forEach(team => { - if (team.players.length === this.auctionSettings?.each_team ?? 7) { + (this.teams || []).forEach(team => { + if (team.players?.length === this.auctionSettings?.each_team ?? 7) { // Finished groups.finished.push(team); } else { From 0cd847f1eadda43da8a8f6120c42d56cb4999f87 Mon Sep 17 00:00:00 2001 From: Solomon Cammack Date: Fri, 12 May 2023 23:35:13 +0100 Subject: [PATCH 2/3] First look at manual guests --- .../src/components/broadcast/desk/Caster.vue | 8 ++- .../components/broadcast/desk/DeskOverlay.vue | 16 +++++- .../website/dashboard/DeskEditor.vue | 52 +++++++++++++++++++ .../website/dashboard/GuestEditor.vue | 22 ++++++++ website/src/utils/content-utils.js | 23 ++++++++ website/src/views/Dashboard.vue | 6 ++- 6 files changed, 122 insertions(+), 5 deletions(-) create mode 100644 website/src/components/website/dashboard/DeskEditor.vue create mode 100644 website/src/components/website/dashboard/GuestEditor.vue diff --git a/website/src/components/broadcast/desk/Caster.vue b/website/src/components/broadcast/desk/Caster.vue index 166968bc..f69e5b15 100644 --- a/website/src/components/broadcast/desk/Caster.vue +++ b/website/src/components/broadcast/desk/Caster.vue @@ -9,8 +9,8 @@
{{ name }}
-
{{ player.pronouns }}
-
+
{{ pronouns }}
+
@@ -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 ""; diff --git a/website/src/components/broadcast/desk/DeskOverlay.vue b/website/src/components/broadcast/desk/DeskOverlay.vue index a88580e6..a0c6c753 100644 --- a/website/src/components/broadcast/desk/DeskOverlay.vue +++ b/website/src/components/broadcast/desk/DeskOverlay.vue @@ -4,7 +4,7 @@
- @@ -22,6 +22,7 @@ import TourneyBar from "@/components/broadcast/TourneyBar"; import Caster from "@/components/broadcast/desk/Caster"; import DeskMatch from "@/components/broadcast/desk/DeskMatch"; import { themeBackground1 } from "@/utils/theme-styles"; +import { createGuestObject } from "@/utils/content-utils"; export default { name: "DeskOverlay", @@ -59,9 +60,15 @@ export default { }) }); }, + manualGuests() { + if (!this.broadcast?.manual_guests) return []; + const manualGuests = this.broadcast.manual_guests.split("\n").filter(Boolean).map(guestString => createGuestObject(guestString)); + console.log(manualGuests); + return manualGuests; + }, guests: function() { if (!this.broadcast?.guests) return []; - return ReactiveArray("guests", { + const guests = ReactiveArray("guests", { player: ReactiveThing("player", { socials: ReactiveArray("socials") }), @@ -70,6 +77,11 @@ export default { theme: ReactiveThing("theme") }) })(this.broadcast); + + return [ + ...guests, + ...this.manualGuests + ]; }, casters() { if (!this.guests.length) { diff --git a/website/src/components/website/dashboard/DeskEditor.vue b/website/src/components/website/dashboard/DeskEditor.vue new file mode 100644 index 00000000..aab42b35 --- /dev/null +++ b/website/src/components/website/dashboard/DeskEditor.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/website/src/components/website/dashboard/GuestEditor.vue b/website/src/components/website/dashboard/GuestEditor.vue new file mode 100644 index 00000000..0a66adf1 --- /dev/null +++ b/website/src/components/website/dashboard/GuestEditor.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/website/src/utils/content-utils.js b/website/src/utils/content-utils.js index e07d051f..079c81a7 100644 --- a/website/src/utils/content-utils.js +++ b/website/src/utils/content-utils.js @@ -416,3 +416,26 @@ export function unescapeText(text) { .replaceAll(""", "\"") .replaceAll("'", "'"); } + + +export function createGuestObject(str) { + const guest = { + manual: true + }; + + str.split(/[,|]/).forEach(part => { + if (!part) return; + part = part.trim(); + + if (part.startsWith("@")) { + guest.twitter = part; + } else if (part.startsWith("http")) { + guest.avatar = part; + } else if (part.includes("/")) { + guest.pronouns = part; + } else { + guest.name = part; + } + }); + return guest; +} diff --git a/website/src/views/Dashboard.vue b/website/src/views/Dashboard.vue index d29eaed3..04ae09d7 100644 --- a/website/src/views/Dashboard.vue +++ b/website/src/views/Dashboard.vue @@ -26,6 +26,9 @@ + + + @@ -74,10 +77,11 @@ import DashboardModule from "@/components/website/dashboard/DashboardModule.vue" import BracketImplications from "@/components/website/dashboard/BracketImplications.vue"; import PreviewProgramDisplay from "@/components/website/dashboard/PreviewProgramDisplay.vue"; import Bracket from "@/components/website/bracket/Bracket.vue"; +import DeskEditor from "@/components/website/dashboard/DeskEditor.vue"; export default { name: "Dashboard", - components: { Bracket, PreviewProgramDisplay, BracketImplications, DashboardModule, DashboardClock, ScheduleEditor, BroadcastEditor, CommsControl, Commercials, Predictions, MatchEditor, MatchThumbnail, BroadcastSwitcher, BButton }, + components: { DeskEditor, Bracket, PreviewProgramDisplay, BracketImplications, DashboardModule, DashboardClock, ScheduleEditor, BroadcastEditor, CommsControl, Commercials, Predictions, MatchEditor, MatchThumbnail, BroadcastSwitcher, BButton }, computed: { user() { if (!this.$root.auth.user?.airtableID) return {}; From 341bec9cbe4c5d6016e5ed47b7328c6fa6cd3607 Mon Sep 17 00:00:00 2001 From: Solomon Cammack Date: Tue, 16 May 2023 04:14:17 +0100 Subject: [PATCH 3/3] Add manual guest editor and dashboard style changes --- server/src/actions/update-broadcast.js | 9 +- website/src/assets/app.css | 9 +- .../components/broadcast/desk/CasterCam.vue | 3 + .../components/broadcast/desk/DeskOverlay.vue | 3 +- .../website/dashboard/DashboardModule.vue | 9 ++ .../website/dashboard/DeskEditor.vue | 124 +++++++++++++++++- .../website/dashboard/GuestEditor.vue | 22 ---- website/src/utils/content-utils.js | 7 + website/src/views/Dashboard.vue | 13 +- 9 files changed, 161 insertions(+), 38 deletions(-) delete mode 100644 website/src/components/website/dashboard/GuestEditor.vue diff --git a/server/src/actions/update-broadcast.js b/server/src/actions/update-broadcast.js index 98f0db8b..43bc7a90 100644 --- a/server/src/actions/update-broadcast.js +++ b/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} */ // 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); diff --git a/website/src/assets/app.css b/website/src/assets/app.css index 7ded90f2..80ff9a3e 100644 --- a/website/src/assets/app.css +++ b/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; +} diff --git a/website/src/components/broadcast/desk/CasterCam.vue b/website/src/components/broadcast/desk/CasterCam.vue index 9b9b4d38..51a41dac 100644 --- a/website/src/components/broadcast/desk/CasterCam.vue +++ b/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; } diff --git a/website/src/components/broadcast/desk/DeskOverlay.vue b/website/src/components/broadcast/desk/DeskOverlay.vue index a0c6c753..8819922d 100644 --- a/website/src/components/broadcast/desk/DeskOverlay.vue +++ b/website/src/components/broadcast/desk/DeskOverlay.vue @@ -67,8 +67,7 @@ export default { return manualGuests; }, guests: function() { - if (!this.broadcast?.guests) return []; - const guests = ReactiveArray("guests", { + const guests = (!this.broadcast?.guests) ? [] : ReactiveArray("guests", { player: ReactiveThing("player", { socials: ReactiveArray("socials") }), diff --git a/website/src/components/website/dashboard/DashboardModule.vue b/website/src/components/website/dashboard/DashboardModule.vue index 25c52e50..77f1bfa5 100644 --- a/website/src/components/website/dashboard/DashboardModule.vue +++ b/website/src/components/website/dashboard/DashboardModule.vue @@ -88,6 +88,15 @@ export default { border: none; } + .module-content >>> .table tr th:last-child, + .module-content >>> .table tr td:last-child { + border-right: none; + } + .module-content >>> .table tr th:first-child, + .module-content >>> .table tr td:first-child { + border-left: none; + } + .clip-swipe-down-enter-active, .clip-swipe-down-leave-active { transition: clip-path 200ms ease, max-height 200ms ease; diff --git a/website/src/components/website/dashboard/DeskEditor.vue b/website/src/components/website/dashboard/DeskEditor.vue index aab42b35..ea5a3069 100644 --- a/website/src/components/website/dashboard/DeskEditor.vue +++ b/website/src/components/website/dashboard/DeskEditor.vue @@ -1,23 +1,79 @@ diff --git a/website/src/components/website/dashboard/GuestEditor.vue b/website/src/components/website/dashboard/GuestEditor.vue deleted file mode 100644 index 0a66adf1..00000000 --- a/website/src/components/website/dashboard/GuestEditor.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - - diff --git a/website/src/utils/content-utils.js b/website/src/utils/content-utils.js index 079c81a7..bd1f14a6 100644 --- a/website/src/utils/content-utils.js +++ b/website/src/utils/content-utils.js @@ -429,6 +429,8 @@ export function createGuestObject(str) { if (part.startsWith("@")) { guest.twitter = part; + } else if (part.includes("view=")) { + guest.webcam = part; } else if (part.startsWith("http")) { guest.avatar = part; } else if (part.includes("/")) { @@ -439,3 +441,8 @@ export function createGuestObject(str) { }); return guest; } + +export function getGuestString(guest) { + delete guest.manual; + return Object.values(guest).join("|"); +} diff --git a/website/src/views/Dashboard.vue b/website/src/views/Dashboard.vue index 04ae09d7..22330c14 100644 --- a/website/src/views/Dashboard.vue +++ b/website/src/views/Dashboard.vue @@ -26,7 +26,8 @@ - + + @@ -144,6 +145,16 @@ export default { }) }) })(this.liveMatch); + }, + deskGuestSource() { + if (this.broadcast?.guests) { + return "Broadcast › Guests"; + } else if (this.liveMatch?.casters) { + return "Broadcast › Live Match › Casters"; + } else if (this.broadcast?.manual_guests) { + return "Broadcast › Manual Guests"; + } + return null; } }, methods: {