Skip to content

Commit

Permalink
Update GFX to support MVPs properly
Browse files Browse the repository at this point in the history
  • Loading branch information
@slmnio
slmnio committed Nov 22, 2024
1 parent be13d28 commit b37247a
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 59 deletions.
11 changes: 10 additions & 1 deletion website/src/components/broadcast/roots/GFXRoot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@
<StandingsOverlay v-if="gfx?.type === 'Standings'" v-bind="overlayProps" :stage="overlayProps.identifier" />
<TextOverlay v-if="gfx?.type === 'Text'" v-bind="overlayProps" />
<MultiStandingsOverlay v-if="gfx?.type === 'Multi Standings'" v-bind="overlayProps" :stage-codes="gfx?.identifier?.split(',')" />
<MVPOverlay
v-if="gfx?.type === 'MVP'"
v-bind="overlayProps"
:player="gfx.players?.[0]"
:team="gfx.teams?.[0]"
:hero="gfx.heroes?.[0]" />
<StatsGFXOverlay v-if="gfx?.type?.startsWith('Stats: ')" v-bind="overlayProps" />
<v-style>
{{ gfx?.custom_css }}
Expand All @@ -24,22 +30,25 @@ import StandingsOverlay from "@/components/broadcast/roots/StandingsOverlay.vue"
import TextOverlay from "@/components/broadcast/roots/TextOverlay.vue";
import MultiStandingsOverlay from "@/components/broadcast/roots/MultiStandingsOverlay.vue";
import StatsGFXOverlay from "@/components/broadcast/roots/StatsGFXOverlay.vue";
import MVPOverlay from "@/components/broadcast/roots/MVPOverlay.vue";
export default {
name: "GFXRoot",
components: { StatsGFXOverlay, MultiStandingsOverlay, TextOverlay, StandingsOverlay, IframeOverlay, ImageOverlay, BracketOverlay, ScheduleOverlay },
components: { MVPOverlay, StatsGFXOverlay, MultiStandingsOverlay, TextOverlay, StandingsOverlay, IframeOverlay, ImageOverlay, BracketOverlay, ScheduleOverlay },
props: {
index: Number,
broadcast: Object,
client: Object,
title: String,
animationActive: Boolean,
},
computed: {
overlayProps() {
return {
broadcast: this.broadcast,
client: this.client,
gfx: this.gfx,
animationActive: this.animationActive,
matches: this.gfx?.matches || [],
title: this.title || this.gfx?.title,
Expand Down
137 changes: 79 additions & 58 deletions website/src/components/broadcast/roots/MVPOverlay.vue
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,55 @@
<template>
<div class="mvp-overlay">
<div v-if="mvp">
<div class="text-container">
<div class="all-text-holder">
<div v-if="sponsor" class="sponsor-theme-holder">
<ThemeTransition
class="sponsor-theme-transition"
start="right"
:theme="sponsor"
:active="animationActive"
:starting-delay="200"
:duration="300">
<div v-if="showSponsor" class="sponsor-logo-holder flex-center">
<div class="sponsor-logo bg-center" :style="logo(sponsor)"></div>
</div>
</ThemeTransition>
</div>
<div class="title-holder">
<ThemeTransition
start="right"
:theme="themeBackground(broadcast?.event?.theme)"
:active="animationActive"
:starting-delay="100"
:duration="500">
<div class="title" :style="themeBackground(broadcast?.event?.theme)">{{ title || 'MVP' }}</div>
</ThemeTransition>
</div>
<div v-if="mvp" class="mvp-overlay">
<div class="text-container">
<div class="all-text-holder">
<div v-if="sponsor" class="sponsor-theme-holder">
<ThemeTransition
class="sponsor-theme-transition"
start="right"
:theme="sponsor"
:active="animationActive"
:starting-delay="200"
:duration="300">
<div v-if="showSponsor" class="sponsor-logo-holder flex-center">
<div class="sponsor-logo bg-center" :style="logo(sponsor)"></div>
</div>
</ThemeTransition>
</div>
<div class="title-holder">
<ThemeTransition
start="right"
:theme="themeBackground(broadcast?.event?.theme)"
:active="animationActive"
:starting-delay="100"
:duration="500">
<div class="title" :style="themeBackground(broadcast?.event?.theme)">{{ title || 'MVP' }}</div>
</ThemeTransition>
</div>

<div class="text-holder">
<ThemeTransition
start="right"
:theme="theme"
:active="animationActive"
:starting-delay="400"
:duration="300">
<div class="player-name-holder" :style="themeBackground(theme)">
<ThemeLogo
icon-padding="20%"
border-width="0"
:theme="mvpTeam && mvpTeam.theme"
class="player-team-logo" />
<div class="player-name">{{ mvp.name }}</div>
</div>
</ThemeTransition>
</div>
<div class="text-holder">
<ThemeTransition
start="right"
:theme="theme"
:active="animationActive"
:starting-delay="400"
:duration="300">
<div class="player-name-holder" :style="themeBackground(theme)">
<ThemeLogo
icon-padding="20%"
border-width="0"
:theme="mvpTeam && mvpTeam.theme"
class="player-team-logo" />
<div class="player-name">{{ mvp.name }}</div>
</div>
</ThemeTransition>
</div>
</div>
<transition name="hero-move">
<div v-show="animationActive && mvpTeam && mvpTeam.theme" class="hero-container">
<recolored-hero v-if="mvpTeam && mvpTeam.theme" class="hero" :theme="mvpTeam.theme" :hero="hero" />
</div>
</transition>
</div>
<transition name="hero-move">
<div v-show="animationActive && mvpTeam && mvpTeam.theme" class="hero-container">
<recolored-hero v-if="mvpTeam && mvpTeam.theme" class="hero" :theme="mvpTeam.theme" :hero="hero" />
</div>
</transition>
</div>
</template>

Expand All @@ -63,11 +61,12 @@ import { themeBackground } from "@/utils/theme-styles";
import ThemeTransition from "@/components/broadcast/ThemeTransition";
import { useStatusStore } from "@/stores/statusStore";
import { resizedImage } from "@/utils/images";
import { cleanID } from "@/utils/content-utils.js";
export default {
name: "MVPOverlay",
components: { ThemeTransition, ThemeLogo, RecoloredHero },
props: ["broadcast", "title", "animationActive", "showSponsor"],
props: ["broadcast", "title", "animationActive", "showSponsor", "player", "team", "hero"],
computed: {
match() {
return ReactiveRoot(this.broadcast?.live_match?.[0], {
Expand All @@ -82,25 +81,47 @@ export default {
});
},
broadcastData() {
return ReactiveRoot(this.broadcast?.id, {
highlight_player: ReactiveThing("highlight_player"),
highlight_team: ReactiveThing("highlight_team", {
theme: ReactiveThing("theme")
})
});
if (this.player) {
// Load all event data if a player is passed (i.e. GFX or something)
return ReactiveRoot(this.broadcast?.id, {
highlight_player: ReactiveThing("highlight_player"),
highlight_team: ReactiveThing("highlight_team", {
theme: ReactiveThing("theme")
}),
event: ReactiveThing("event", {
teams: ReactiveArray("teams", {
players: ReactiveArray("players"),
theme: ReactiveThing("theme")
})
})
});
} else {
return ReactiveRoot(this.broadcast?.id, {
highlight_player: ReactiveThing("highlight_player"),
highlight_team: ReactiveThing("highlight_team", {
theme: ReactiveThing("theme")
})
});
}
},
mvp() {
return this.match?.mvp || this.broadcastData?.highlight_player;
return this.player || this.match?.mvp || this.broadcastData?.highlight_player;
},
mvpTeam() {
return this.relatedMvpTeam || this.broadcastData?.highlight_team;
},
relatedMvpTeam() {
if (this.team) return this.team;
if (this.player) {
let playerTeam = (this.broadcastData?.event?.teams || []).find(team => (team?.players || []).find(player => cleanID(player.id) === cleanID(this.player?.id)));
if (playerTeam) return playerTeam;
}
if (!this.mvp) return null;
return (this.mvp.member_of || []).find(team => (this.match?.teams || []).some(t => t.id === team.id));
},
hero() {

Check failure on line 123 in website/src/components/broadcast/roots/MVPOverlay.vue

View workflow job for this annotation

GitHub Actions / build (website) 

Duplicate key 'hero'. May cause name collision in script or template tag
return this.broadcast?.highlight_hero || this.mvp?.favourite_hero;
return this.hero || this.broadcast?.highlight_hero || this.mvp?.favourite_hero;
},
borderColor() {
return {
Expand Down

0 comments on commit b37247a

Please sign in to comment.