Matches can be Special Events which hide teams and have different dis…

…plays
slmnio · Dec 14, 2021 · 1fa741b · 1fa741b
1 parent ad4e9b5
commit 1fa741b
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 15 deletions.
diff --git a/website/src/components/broadcast/break/BreakMatch.vue b/website/src/components/broadcast/break/BreakMatch.vue
@@ -11,7 +11,14 @@
         </div>
         -->
 <!--        <transition-group name="fade" mode="out-in" class="match-teams flex-center">-->
+
+
         <div class="match-teams flex-center">
+
+            <div class="match-special-event-name" v-if="match.special_event">
+                {{ match.custom_name }}
+            </div>
+
                 <div class="match-team" v-for="(team, i) in teams" v-bind:key="team ? `${team.id}-${team.name}-${team.code}-${i}` : i" :style="{ order: i*2 }">
                     <div :class="expanded ? 'match-team-name' : 'match-team-code'" v-if="team && expanded" :data-code="team.code">
                         <span class="industry-align" v-if="team.dummy">{{ team.text }}</span>
@@ -47,6 +54,7 @@ export default {
     props: ["match", "expanded", "timezone", "live", "themeColor"],
     computed: {
         teams() {
+            if (this.match?.special_event) return [];
             const dummy = { text: "TBD", dummy: true, id: null };
             if (!this.match) return [{ ...dummy, _empty: true }, { ...dummy, _empty: true }];
 
@@ -108,6 +116,7 @@ export default {
                 return "time";
                 // return this.start;
             } else {
+                if (this.match?.special_event) return "";
                 return "vs";
             }
             // return "vs";
@@ -304,4 +313,9 @@ export default {
         font-size: calc(1.1em);
         transform: translate(0, -0.0925em);
     }
+    .match-special-event-name {
+        flex-grow: 1;
+        line-height: 1;
+        text-align: center;
+    }
 </style>
diff --git a/website/src/components/broadcast/desk/DeskMatch.vue b/website/src/components/broadcast/desk/DeskMatch.vue
@@ -1,7 +1,7 @@
 <template>
     <transition name="fade" mode="out-in">
         <div class="desk-match" v-if="match">
-            <div class="teams d-flex">
+            <div class="teams d-flex" v-if="!match.special_event">
                 <DeskTeam class="team" v-for="(team, i) in match.teams" v-bind:key="team.id" :team="team" :style="{order: i * 2}" />
                 <div class="match-center flex-center">
                     <div class="match-score flex-center" v-if="show.score">
@@ -14,6 +14,11 @@
                     </div>
                 </div>
             </div>
+            <div class="desk-match-text flex-center" v-if="match.special_event" :style="textBackground">
+                <transition name="fade" mode="out-in">
+                    <span :key="match.custom_name">{{ match.custom_name }}</span>
+                </transition>
+            </div>
         </div>
     </transition>
 </template>
@@ -26,11 +31,11 @@ export default {
     props: ["_match", "themeColor"],
     computed: {
         match() {
-            if (!this._match?.teams) return null;
-            if (this._match.teams.length !== 2) return null;
-
-            if (this._match.teams.some(t => !t.theme || t.theme.__loading)) return null;
-
+            if (!this._match?.special_event) {
+                if (!this._match?.teams) return null;
+                if (this._match.teams.length !== 2) return null;
+                if (this._match.teams.some(t => !t.theme || t.theme.__loading)) return null;
+            }
             return this._match;
         },
         show() {
@@ -52,6 +57,12 @@ export default {
             return {
                 borderColor: this.themeColor.backgroundColor
             };
+        },
+        textBackground() {
+            console.log(this.themeColor);
+            return {
+                ...this.themeColor
+            };
         }
     }
 };
@@ -91,4 +102,10 @@ export default {
         white-space: nowrap;
         min-width: 180px;
     }
+
+    .desk-match-text {
+        font-size: 4em;
+        border-bottom: 6px solid transparent;
+        height: 110px;
+    }
 </style>
diff --git a/website/src/components/website/match/MatchHero.vue b/website/src/components/website/match/MatchHero.vue
@@ -1,10 +1,13 @@
 <template>
-    <div class="match-hero">
-        <div class="match-hero-event flex-center default-thing-border-bg" v-if="match.event && !$root.minisiteEvent" :style="eventStyle"></div>
-        <div class="match-hero-teams">
+    <div class="match-hero" v-bind:class="{'special-event': match.special_event}">
+        <div class="match-hero-event flex-center default-thing-border-bg" v-if="match.event && !$root.minisiteEvent && !match.special_event" :style="eventStyle"></div>
+        <div class="match-hero-teams" v-if="!match.special_event">
             <MatchHeroTeam class="team" v-for="team in match.teams" v-bind:key="team.id" :team="team" />
             <div class="match-hero-event-logo" v-if="match.event" :style="eventLogo"></div>
         </div>
+        <div class="match-hero-text flex-grow-1 flex-center" v-if="match.special_event" :style="eventStyle">
+            {{ match.custom_name }}
+        </div>
     </div>
 </template>
 
@@ -21,7 +24,8 @@ export default {
             if (!this.match.event || !this.match.event.theme) return {};
             return {
                 backgroundColor: this.match.event.theme.color_logo_background || this.match.event.theme.color_theme,
-                color: this.match.event.theme.color_text_on_logo_background || this.match.event.theme.color_text_on_theme
+                color: this.match.event.theme.color_text_on_logo_background || this.match.event.theme.color_text_on_theme,
+                borderColor: this.match.event.theme.color_logo_accent || this.match.event.theme.color_accent
             };
         },
         eventLogo() {
@@ -58,4 +62,23 @@ export default {
         position: absolute;
         z-index: 1;
     }
+
+    .match-hero.special-event .match-hero-text {
+        width: 100%;
+        height: 100%;
+        font-size: 4em;
+        font-weight: bold;
+        border-bottom: 8px solid transparent;
+    }
+
+    .match-hero.special-event {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    /*.match-hero.special-event .match-hero-event {*/
+    /*    width: 100%;*/
+    /*}*/
 </style>
diff --git a/website/src/components/website/schedule/ScheduleMatch.vue b/website/src/components/website/schedule/ScheduleMatch.vue
@@ -1,9 +1,14 @@
 <template>
-    <div class="match my-2" v-if="loaded" v-bind:class="{ 'bg-danger' : !loaded }">
+    <div class="match my-2" v-if="loaded" v-bind:class="{ 'bg-danger' : !loaded, 'special-event': match.special_event }">
         <div class="match-left match-details flex-center flex-column text-center">
             <div class="match-detail" v-for="detail in details" v-bind:key="detail">{{ detail }}</div>
         </div>
 
+        <router-link :to="url('match', this.match)" v-if="match.special_event"
+                     class="match-special-event-name flex-center text-center ct-passive link-text">
+            {{ match.custom_name }}
+        </router-link>
+
         <div v-for="(team, i) in teams"
              v-bind:key="team.id" :style="{order: i*2}"
              class="match-team flex-grow-1 d-flex align-items-center justify-content-end"
@@ -21,15 +26,15 @@
             <div class="team-logo team-logo--spacer" v-else></div>
         </div>
 
-        <router-link :to="url('match', this.match)" class="match-center match-vs flex-center text-center ct-passive">
+        <router-link :to="url('match', this.match)" class="match-center match-vs flex-center text-center ct-passive" v-if="!match.special_event">
             <div class="scores-wrap" v-if="scores.some(s => s)">
                 <div class="scores">{{ match.score_1 }} - {{ match.score_2 }}</div>
                 <div class="scores-forfeit" v-if="match.forfeit">Forfeit</div>
             </div>
             <div class="vs ct-passive" v-else>vs</div>
         </router-link>
         <div class="match-right match-time flex-center">
-            <ScheduleTime :time="match.start" :custom-text="match.custom_name"/>
+            <ScheduleTime :time="match.start" :custom-text="match.special_event ? null : match.custom_name"/>
         </div>
     </div>
 </template>
@@ -55,6 +60,7 @@ export default {
             return [this.match.score_1, this.match.score_2];
         },
         teams() {
+            if (this.match?.special_event) return [];
             const dummy = { text: "TBD", dummy: true, id: null };
             if (!this.match) return [{ ...dummy, _empty: true }, { ...dummy, _empty: true }];
 
@@ -133,15 +139,24 @@ export default {
         gap: 0px 0px;
         min-height: 3em;
     }
+    .match.special-event {
+        grid-template-columns: 0.75fr 4.25fr 0.75fr;
+    }
     @media (max-width: 957px) {
         .match {
             grid-template-columns: 0.75fr 1fr 0.2fr 1fr 0.75fr;
         }
+        .match.special-event {
+            grid-template-columns: 0.75fr 2.2fr 0.75fr;
+        }
     }
     @media (max-width: 767px) {
         .match {
             grid-template-columns: 0.5fr 1fr 0.2fr 1fr 0.75fr;
         }
+        .match.special-event {
+            grid-template-columns: 0.5fr 2.2fr 0.5fr;
+        }
     }
     @media (max-width: 575px) {
         .match-left.match-details, .match-time {
@@ -150,6 +165,13 @@ export default {
         .match {
             grid-template-columns: 1fr 0.2fr 1fr;
         }
+        .match.special-event {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .match-special-event-name {
+        font-size: 1.2em;
     }
 
     .match-vs {

diff --git a/website/src/utils/theme-styles.js b/website/src/utils/theme-styles.js
@@ -15,7 +15,8 @@ export function themeBackground(theme) {
     if (!theme) return {};
     return {
         backgroundColor: theme.color_theme || theme.color_logo_background,
-        color: theme.color_text_on_theme || theme.color_alt || theme.color_text_on_logo_background
+        color: theme.color_text_on_theme || theme.color_alt || theme.color_text_on_logo_background,
+        borderColor: theme.color_accent
     };
 }
 export function themeBackground1(item) {

diff --git a/website/src/views/DetailedMatch.vue b/website/src/views/DetailedMatch.vue
@@ -5,6 +5,12 @@
                 <div class="maps-holder mt-1" v-if="match.maps && showMatchMaps">
                     <MapDisplay v-for="(map, i) in match.maps" :i="i" :map="map" :match="match" :theme="_theme" v-bind:key="map.id"/>
                 </div>
+
+                <div class="special-event-notice" v-if="match.special_event">
+                    <h2>Special event</h2>
+                    This is a special event and doesn't have team information.
+                </div>
+
                 <div class="team-holder f-row mb-2">
                     <div class="team f-col w-50 mt-2" v-for="team in match.teams" v-bind:key="team.id">
                         <div :style="theme(team)" class="team-header flex-center f-col default-thing">

diff --git a/website/src/views/Match.vue b/website/src/views/Match.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="match" v-if="match">
         <MatchHero :match="match" />
-        <div class="container mt-3 text-center">
+        <div class="container mt-3 text-center" v-if="match.special_event ? [match.score_1, match.score_2].some(x => x) : true">
             <MatchScore :match="match" />
         </div>
         <div class="container mt-3 large-container">
@@ -160,6 +160,7 @@ export default {
             return this.match?.event?.theme;
         },
         showHeadToHead() {
+            if (this.match?.special_event) return false;
             return this.match?.event?.map_pool;
         }
     },