Modify the schedule tweet when a global Splatfest is open in all regions

It would have been better to check this on the back end by using the same Vuex data store as on the front end, but there are currently some complications with bringing that in to Node (because of issues with ES modules) so we have to perform the check twice.

src/app/screenshots/screenshots.js

@@ -53,10 +53,12 @@ async function captureScreenshot(options) {
     return result;
 }
 
-function captureScheduleScreenshot(now) {
+function captureScheduleScreenshot(now, splatfestBattle = false) {
     let hash = `/schedules/${now}`;
 
-    return captureScreenshot({ hash });
+    let viewport = (splatfestBattle) ? { height: 780 } : undefined;
+
+    return captureScreenshot({ hash, viewport });
 }
 
 function captureGearScreenshot(now) {

src/app/twitter/tweets/ScheduleTweet.js

@@ -36,7 +36,31 @@ class ScheduleTweet extends TwitterPostBase {
     }
 
     getImage(data) {
-        return captureScheduleScreenshot(data.regular.start_time);
+        return captureScheduleScreenshot(data.regular.start_time, this.globalSplatfestOpenInAllRegions());
+    }
+
+    globalSplatfestOpenInAllRegions() {
+        let festivals = readData('festivals.json');
+        let time = this.getDataTime();
+
+        let festival;
+        let ids = [];
+
+        // Is there an open Splatfest in each region?
+        // (Checking NA last so we can return that one more easily)
+        for (let region of ['eu', 'jp', 'na']) {
+            festival = festivals[region].festivals.find(f => f.times.start <= time && f.times.end > time);
+            if (!festival)
+                return false;
+            ids.push(festival.festival_id);
+        }
+
+        console.log(ids);
+
+        // Only return the Splatfest if the festival IDs match across all regions
+        if (ids[0] === ids[1] && ids[0] === ids[2])
+            return festival;
+        return false;
     }
 
     getText(data) {
@@ -51,6 +75,11 @@ class ScheduleTweet extends TwitterPostBase {
                 return `NEW STAGE: ${stage.name} is now open! #maprotation #splatoon2`;
         }
 
+        let festival = this.globalSplatfestOpenInAllRegions();
+
+        if (festival)
+            return `The global Splatfest is open in all regions! Join the Splatfest Battle on ${data.regular.stage_a.name}, ${data.regular.stage_b.name}, and ${festival.special_stage.name}. #splatfest #maprotation`;
+
         return `Splatoon 2 map rotation: Ranked game mode: ${data.gachi.rule.name}, League game mode: ${data.league.rule.name} #maprotation`;
     }
 }

src/web/components/screenshots/schedules/ScheduleBox.vue

@@ -1,10 +1,11 @@
 <template>
     <div v-if="schedule" :class="mode">
         <h3 class="title is-3 font-splatoon1 has-text-centered">
-            {{ schedule.game_mode.name }}
+            <template v-if="splatfestBattle">{{ $t('splatfest.battle') }}</template>
+            <template v-else>{{ schedule.game_mode.name }}</template>
         </h3>
 
-        <h5 class="subtitle is-4 font-splatoon2 has-text-centered" style="margin-top: -1rem">
+        <h5 class="subtitle is-4 font-splatoon2 has-text-centered" style="margin-top: -1rem" v-if="!splatfestBattle">
             <div class="image is-32x32" style="margin-bottom: -8px; display: inline-block">
                 <img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
                 <img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
@@ -14,18 +15,24 @@
             {{ schedule.rule.name }}
         </h5>
 
-        <Stage :stage="schedule.stage_a"></Stage>
-        <Stage :stage="schedule.stage_b"></Stage>
+        <Stage :stage="schedule.stage_a" />
+        <Stage :stage="schedule.stage_b" />
+        <Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
     </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import Stage from '@/web/components/splatoon/Stage.vue';
 
 export default {
     components: { Stage },
-    props: ['mode'],
+    props: {
+        mode: null,
+        splatfestBattle: Boolean,
+    },
     computed: {
+        ...mapGetters('splatoon/splatfests/na', ['currentSplatfest']),
         schedule() {
             return this.$store.getters[`splatoon/schedules/${this.mode}/activeSchedule`];
         },

src/web/components/screenshots/schedules/Schedules.vue

@@ -1,6 +1,6 @@
 <template>
     <Wrapper title="Map Schedules">
-        <div class="columns font-splatoon2">
+        <div class="columns font-splatoon2" v-if="!globalSplatfestIsActiveInAllRegions">
             <div class="column">
                 <ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
             </div>
@@ -13,14 +13,54 @@
                 <ScheduleBox class="main-schedule-box tilt-left" mode="league" />
             </div>
         </div>
+        <div class="columns is-gapless font-splatoon2" v-else>
+            <div class="column" style="display: flex">
+                <div class="splatfest tilt-left">
+                    <div class="hook-box">
+                        <SplatfestBox :festival="currentSplatfestNA" global-splatfest-mode />
+                    </div>
+                </div>
+            </div>
+            <div class="column is-5">
+                <ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: 335px; margin-right: 20px" />
+            </div>
+        </div>
     </Wrapper>
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import Wrapper from '@/web/components/screenshots/Wrapper.vue';
 import ScheduleBox from './ScheduleBox.vue';
+import SplatfestBox from '@/web/components/splatoon/SplatfestBox.vue';
 
 export default {
-    components: { Wrapper, ScheduleBox },
+    components: { Wrapper, ScheduleBox, SplatfestBox },
+    computed: {
+        ...mapGetters('splatoon/splatfests', {
+            'currentSplatfestNA': 'na/currentSplatfest',
+            'currentSplatfestEU': 'eu/currentSplatfest',
+            'currentSplatfestJP': 'jp/currentSplatfest',
+        }),
+        globalSplatfestIsActiveInAllRegions() {
+            // Do we have a Splatfest in each region?
+            if (!this.currentSplatfestNA || !this.currentSplatfestEU || !this.currentSplatfestJP)
+                return false;
+
+            // Is it the same Splatfest in each region?
+            if (this.currentSplatfestNA.festival_id !== this.currentSplatfestEU.festival_id
+                || this.currentSplatfestNA.festival_id !== this.currentSplatfestJP.festival_id)
+                return false;
+
+            // Is the Splatfest currently active in every region?
+            if (this.currentSplatfestNA.state !== 'active'
+                || this.currentSplatfestEU.state !== 'active'
+                || this.currentSplatfestJP.state !== 'active')
+                return false;
+
+            // All checks passed, we have a global Splatfest active in all regions!
+            return true;
+        },
+    },
 };
 </script>

src/web/components/splatoon/SplatfestBox.vue

@@ -38,7 +38,7 @@
             <SplatfestResultsBox :festival="festival" />
         </div>
 
-        <div class="has-text-centered is-size-5 title-color festival-period-container">
+        <div class="has-text-centered is-size-5 title-color festival-period-container" v-if="!globalSplatfestMode">
             <div v-if="!showingResultsBar" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
                 <template v-if="!screenshotMode">
                     <span class="nowrap">
@@ -72,7 +72,7 @@
             <SplatfestWinnerBar :festival="festival" v-else />
         </div>
 
-        <div class="splatfest-content has-text-centered" v-if="!screenshotMode">
+        <div class="splatfest-content has-text-centered" v-if="!screenshotMode && !globalSplatfestMode">
             <template v-if="festival.state == 'upcoming'">
                 {{ festival.times.start - now | duration | time.in }}
             </template>
@@ -85,6 +85,9 @@
                 {{ festival.times.result - now | duration | resultsIn }}
             </template>
         </div>
+
+        <!-- Spacer at the bottom -->
+        <div v-if="globalSplatfestMode">&nbsp;</div>
     </div>
 </template>
 
@@ -100,6 +103,7 @@ export default {
         festival: null,
         screenshotMode: Boolean,
         historyMode: Boolean,
+        globalSplatfestMode: Boolean,
     },
     filters: {
         resultsIn(time) {
@@ -120,6 +124,8 @@ export default {
             return { weekday: 'short' };
         },
         title() {
+            if (this.globalSplatfestMode)
+                return this.$t('splatfest.global');
             if (this.festival.state == 'upcoming')
                 return this.$t('splatfest.upcoming');
             if (this.festival.state == 'past' && !this.screenshotMode)

src/web/locale/en.json

@@ -25,6 +25,7 @@
         "recent": "Recent Splatfest",
         "title": "Splatfest",
         "upcoming": "Upcoming Splatfest",
+        "global": "Global Splatfest",
         "results_in": "results in {time}",
         "results": {
             "title": "Results!",