Skip to content

Commit

Permalink
Bunch of deadlock stuff (#276)
Browse files Browse the repository at this point in the history 
* bunch of deadlock stuff

* bunch of deadlock stuff

* bunch of deadlock stuff

* bunch of deadlock stuff

* potentially unfuck the linter

* cleanup

* Move vertical versus to one component

* Move vertical versus to one component

* Remove some []s

* Adjust some sizing to remove some absolutes and fixed positions

---------

Co-authored-by: Solomon Cammack <[email protected]>
  • Loading branch information
@MrLotU @slmnio
MrLotU and slmnio authored Oct 22, 2024
1 parent 9303699 commit 3241816
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 28 deletions.
10 changes: 8 additions & 2 deletions website/src/components/broadcast/break/BreakMatch.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="break-match flex-center" :class="{'expanded': expanded, 'has-scores': hasScore}" :data-center="centerShow">
<div v-if="!expanded" class="match-next-details">
<transition name="fade" mode="out-in">
<span :key="match ? match.round : 'empty'">{{ hasFinished ? 'FINAL SCORE:' : 'UP NEXT:' }} {{ match && match.round }}</span>
<span :key="match ? match.round : 'empty'">{{ textPrefix }} {{ match && match.round }}</span>
</transition>
</div>
<!--
Expand Down Expand Up @@ -67,7 +67,7 @@ import { resizedImage } from "@/utils/images";
export default {
name: "BreakMatch",
props: ["match", "expanded", "timezone", "live", "themeColor"],
props: ["match", "expanded", "timezone", "live", "themeColor", "times"],
computed: {
teams() {
if (this.match?.special_event) return [];
Expand Down Expand Up @@ -144,6 +144,12 @@ export default {
// return null;
},
textPrefix() {
if (this.times && this.start) {
return `${this.start}:`
}
return this.hasFinished ? 'FINAL SCORE:' : 'UP NEXT:'
}
},
methods: {
Expand Down
36 changes: 26 additions & 10 deletions website/src/components/broadcast/roots/LBarOverlay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
:timezone="broadcast?.timezone"
:match="match"
:expanded="false"
:times="true"
:theme-color="themeColor" />
</div>
</div>
Expand All @@ -40,25 +41,30 @@
v-html="nbr(title || broadcast.title)"></span>
</transition>
</div>
<div v-if="showSponsors" class="lbar-sponsors-holder">
<Sponsors class="lbar-sponsors" :sponsors="sponsorThemes" />
</div>
</div>
</template>
<script>
import ThemeLogo from "@/components/website/ThemeLogo.vue";
import BreakMatch from "@/components/broadcast/break/BreakMatch.vue";
import { ReactiveArray, ReactiveThing } from "@/utils/reactive";
import { ReactiveArray, ReactiveThing, ReactiveRoot } from "@/utils/reactive";
import { sortMatches } from "@/utils/sorts";
import { themeBackground1 } from "@/utils/theme-styles";
import { logoBackground1, themeBackground1 } from "@/utils/theme-styles";
import Countdown from "@/components/broadcast/Countdown.vue";
import Sponsors from "@/components/broadcast/Sponsors.vue";
export default {
name: "LBarOverlay",
components: { Countdown, BreakMatch, ThemeLogo },
components: { Countdown, BreakMatch, ThemeLogo, Sponsors },
props: {
broadcast: {},
client: {},
virtualMatch: {},
title: String
title: String,
showSponsors: String
},
computed: {
fullSchedule() {
Expand All @@ -81,16 +87,27 @@ export default {
},
countdownText() {
if (!this.broadcast.countdown_end) return "LOCAL TIME";
if (this.schedule && this.schedule.filter(s => [s.score_1, s.score_2].some(_s => _s)).length === 0) { return "STARTING IN"; }
if (this.schedule && this.schedule.filter(s => [s.score_1, s.score_2].some((_s) => _s)).length === 0) { return "STARTING IN"; }
return "BACK IN";
}
},
sponsorThemes() {
if (!this.broadcast?.sponsors) return null;
return ReactiveArray("sponsors", {
theme: ReactiveThing("theme"),
})(this.broadcast);
},
},
methods: {
nbr(text) {
if (!text) return "";
return text.replace(/\\n/g, "<br>");
}
}
},
getTeamStyle(team) {
return {
...logoBackground1(team),
};
},
},
};
</script>
Expand All @@ -104,7 +121,6 @@ export default {
grid-template-rows: repeat(2, 1fr);
}
.content {
--content-width: 1504px;
width: var(--content-width);
Expand All @@ -115,7 +131,7 @@ export default {
width: 100%;
font-size: 48px;
line-height: 1;
padding: 0.25em 0
padding: 0.25em 0;
}
.countdown-group .countdown-timer {
font-size: 2.5em;
Expand Down
23 changes: 21 additions & 2 deletions website/src/components/broadcast/roots/MVPOverlay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<div class="mvp-overlay">
<div v-if="mvp">
<div class="text-container">
<div v-if="showSponsor" class="break-sponsor-logo bg-center" :style="logo(sponsor)"></div>

<div class="title-holder">
<ThemeTransition
start="right"
Expand Down Expand Up @@ -43,11 +45,12 @@ import ThemeLogo from "@/components/website/ThemeLogo";
import { themeBackground1 } from "@/utils/theme-styles";
import ThemeTransition from "@/components/broadcast/ThemeTransition";
import { useStatusStore } from "@/stores/statusStore";
import { resizedImage } from "@/utils/images";
export default {
name: "MVPOverlay",
components: { ThemeTransition, ThemeLogo, RecoloredHero },
props: ["broadcast", "title", "animationActive"],
props: ["broadcast", "title", "animationActive", "showSponsor"],
computed: {
match() {
return ReactiveRoot(this.broadcast?.live_match?.[0], {
Expand Down Expand Up @@ -89,7 +92,18 @@ export default {
},
themeBackground() {
return themeBackground1(this.mvpTeam);
}
},
sponsor() {
if (!this.broadcast?.sponsors) return null;
return ReactiveArray("sponsors", {
theme: ReactiveThing("theme"),
})(this.broadcast)[0];
},
},
methods: {
logo (theme) {
return resizedImage(theme, ["default_wordmark", "default_logo"], "h-300");
},
},
watch: {
mvpTeam: {
Expand Down Expand Up @@ -133,6 +147,11 @@ export default {
.title-holder {
min-height: 168px;
}
.break-sponsor-logo {
position: relative;
width: 300px;
height: 150px;
}
.title {
display: flex;
font-size: 6em;
Expand Down
60 changes: 49 additions & 11 deletions website/src/components/broadcast/roots/VersusOverlay.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
<template>
<div class="versus-overlay d-flex flex-column">
<transition name="fly-down">
<transition v-if="!vertical" name="fly-down">
<div v-if="animationActive" class="top-logo-holder flex-center">
<div class="logo bg-center" :style="eventLogo"></div>
</div>
</transition>
<transition name="fly-sides">
<div v-if="animationActive" class="versus-block-holder flex-center">
<div v-for="team in teams" :key="team.id" class="team" :style="getTeamStyle(team)">
<div class="team-logo bg-center" :style="getTeamLogo(team)"></div>
<div class="team-text-box">
<div v-if="animationActive" class="flex-center" :class="vertical ? 'versus-block-holder-vertical' : 'versus-block-holder'">
<div v-if="animationActive && vertical" class="header-vertical slant">
<div class="reverse-slant">UP NEXT</div>
</div>
<div v-for="(team, i) in teams" :key="team.id" :class="vertical ? 'team-text-box-vertical' : 'team'" :style="{...getTeamStyle(team), order: i * 2}">
<div v-if="!vertical" class="team-logo bg-center" :style="getTeamLogo(team)"></div>
<div v-if="!vertical" class="team-text-box">
<div class="team-text">{{ team.name }}</div>
</div>
<div v-if="vertical" class="team-text-vertical">{{ team.name }}</div>
</div>
<transition name="slide-out">
<div v-if="animationActive" class="vs slant">
<div v-if="animationActive" class="slant" :class="vertical ? 'vs-vertical' : 'vs'">
<div class="reverse-slant">{{ versusText }}</div>
</div>
</transition>
Expand All @@ -31,7 +35,8 @@ export default {
name: "VersusOverlay",
props: {
broadcast: {},
animationActive: Boolean
animationActive: Boolean,
vertical: Boolean
},
computed: {
match() {
Expand Down Expand Up @@ -107,21 +112,32 @@ export default {
position: relative;
}
.versus-block-holder-vertical {
height: 100%;
position: relative;
flex-direction: column;
row-gap: 2em;
}
.team-logo {
height: 100%;
width: 100%;
}
.team-text-box {
width: 515px;
position: absolute;
line-height: 1;
top: calc(100% - 150px);
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.team-text-box-vertical {
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
}
.team-text {
background-color: #333;
color: white;
Expand All @@ -130,8 +146,16 @@ export default {
font-size: 42px;
text-align: center;
padding: 0.25em 0.5em;
width: 515px;
position: absolute;
line-height: 1;
}
.team-text-vertical {
background-color: #333;
color: white;
text-transform: uppercase;
font-weight: bold;
font-size: 84px;
text-align: center;
padding: 0.25em 0.5em;
line-height: 1;
}
.vs {
Expand All @@ -142,6 +166,20 @@ export default {
width: 3em;
text-align: center;
}
.vs-vertical {
font-size: 5em;
font-weight: bold;
background-color: white;
width: 3em;
text-align: center;
}
.header-vertical {
font-size: 5em;
font-weight: bold;
background-color: white;
width: 5em;
text-align: center;
}
.slant {
--skew: -20deg;
Expand Down
8 changes: 5 additions & 3 deletions website/src/router/broadcast.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default [
showSponsors: route.query.sponsors || route.query.showSponsors
})
},
{ path: "versus", component: () => import("@/components/broadcast/roots/VersusOverlay.vue") },
{ path: "versus", component: () => import("@/components/broadcast/roots/VersusOverlay.vue"), props: route => ({ vertical: route.query.vertical}) },
{
path: "winners",
component: () => import("@/components/broadcast/roots/WinnersOverlay.vue"),
Expand Down Expand Up @@ -204,7 +204,7 @@ export default [
animate: route.query.animate
})
},
{ path: "l-bar", component: () => import("@/components/broadcast/roots/LBarOverlay") },
{ path: "l-bar", component: () => import("@/components/broadcast/roots/LBarOverlay"), props: route => ({ showSponsors: route.query.sponsors}) },
{ path: "background", component: () => import("@/components/broadcast/BroadcastBackground.vue"), props: route => ({ index: route.query.index }) },
{ path: "sponsors", component: () => import("@/components/broadcast/roots/SponsorOverlay.vue") },
{ path: "maps", component: () => import("@/components/broadcast/roots/MapsOverlay.vue"), props: route => ({ autoTitle: route.query.auto }) },
Expand Down Expand Up @@ -252,7 +252,9 @@ export default [
})
},
{ path: "broadcasts", alias: ["other-streams", "other-broadcasts"], component: () => import("@/components/broadcast/roots/OtherBroadcastsOverlay.vue") },
{ path: "mvp", component: () => import("@/components/broadcast/roots/MVPOverlay.vue") },
{ path: "mvp", component: () => import("@/components/broadcast/roots/MVPOverlay.vue"), props: route => ({
showSponsor: route.query.sponsor
}) },
{
path: "ingame-comms",
component: () => import("@/components/broadcast/roots/IngameCommsOverlay.vue"),
Expand Down

0 comments on commit 3241816

Please sign in to comment.