Add tweets for Splatfest results and initial announcement

src/css/main.scss

@@ -239,43 +239,11 @@ body.has-modal #main {
             }
         }
 
-        .results {
+        .splatfest-results {
             position: absolute;
             top: 25px;
             left: 15%;
             right: 15%;
-
-            background: rgba($white-ter, 0.75);
-            border-radius: 15px;
-            padding: 10px;
-
-            .result {
-                background: rgba($black-ter, 0.65);
-                border-radius: 200px;
-
-                margin: 10px 0 0 0;
-
-                .level-item {
-                    padding: 8px 0;
-                    position: relative;
-
-                    .winner-mark {
-                        @extend .bg-mask-ink-splat;
-                        position: absolute;
-                        top: 0;
-                        right: 0;
-                        bottom: 0;
-                        left: 0;
-
-                        z-index: 0;
-                        margin: -5px;
-                    }
-
-                    .title {
-                        z-index: 1;
-                    }
-                }
-            }
         }
     }
 
@@ -291,6 +259,42 @@ body.has-modal #main {
     }
 }
 
+.splatfest-results {
+    @extend .text-shadow;
+
+    background: rgba($white-ter, 0.75);
+    border-radius: 15px;
+    padding: 10px;
+
+    .result {
+        background: rgba($black-ter, 0.65);
+        border-radius: 200px;
+
+        margin: 10px 0 0 0;
+
+        .level-item {
+            padding: 8px 0;
+            position: relative;
+
+            .winner-mark {
+                @extend .bg-mask-ink-splat;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+
+                z-index: 0;
+                margin: -5px;
+            }
+
+            .title {
+                z-index: 1;
+            }
+        }
+    }
+}
+
 .about-box {
     position: relative;
     margin-top: 50px;

src/css/screenshots.scss

@@ -50,7 +50,12 @@
     }
 
     .splatfest {
-        transform: scale(1.2) rotate(-1.4deg);
+        transform: scale(1.1) rotate(-1.4deg);
+    }
+
+    .splatfest-results {
+        width: 250px;
+        transform: scale(1.35);
     }
 
     .twitter-logo {

src/js/components/screenshots/splatfest/Splatfest.vue

@@ -1,8 +1,16 @@
 <template>
     <Wrapper :title="title" :time="now">
-        <div class="splatfest tilt-left" v-if="festival">
-            <div class="hook-box">
-                <SplatfestBox :festival="festival" :now="now" :screenshotMode="true" />
+        <div class="level">
+            <div class="level-item">
+                <div class="splatfest tilt-left" v-if="festival">
+                    <div class="hook-box">
+                        <SplatfestBox :festival="festival" :now="now" :screenshotMode="true" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="level-item" v-if="results">
+                <SplatfestResultsBox :festival="festival" :results="results" />
             </div>
         </div>
     </Wrapper>
@@ -12,10 +20,11 @@
 import axios from 'axios';
 import Wrapper from '@/js/components/screenshots/Wrapper.vue';
 import SplatfestBox from '@/js/components/splatoon/SplatfestBox.vue';
+import SplatfestResultsBox from '@/js/components/splatoon/SplatfestResultsBox.vue';
 import regions from '@/js/regions';
 
 export default {
-    components: { Wrapper, SplatfestBox },
+    components: { Wrapper, SplatfestBox, SplatfestResultsBox },
     props: ['region', 'startTime'],
     data() {
         return {
@@ -26,13 +35,21 @@ export default {
         now() {
             return this.startTime;
         },
+        regionInfo() {
+            return regions.splatoonRegions.find(r => r.key == this.region);
+        },
         title() {
-            let region = regions.splatoonRegions.find(r => r.key == this.region);
-            return `Splatfest: ${region.name}`;
+            if (this.results)
+                return `${this.regionInfo.demonym} Splatfest Results`;
+            return `${this.regionInfo.demonym} Splatfest`;
         },
         festival() {
             if (this.festivals)
-                return this.festivals[this.region].festivals.find(f => f.times.start == this.startTime);
+                return this.festivals[this.region].festivals.find(f => f.times.announce <= this.now && f.times.result >= this.now);
+        },
+        results() {
+            if (this.festival)
+                return this.festivals[this.region].results.find(r => r.festival_id == this.festival.festival_id);
         },
     },
     created() {

src/js/components/splatoon/SplatfestBox.vue

@@ -52,7 +52,10 @@
         </div>
 
         <div class="has-text-centered is-size-5 title-color festival-period-container" v-if="screenshotMode">
-            <span class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
+            <span class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }" v-if="state == 'upcoming'">
+                in {{ festival.times.start - now | shortDuration }}
+            </span>
+            <span class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }" v-if="state == 'active'">
                 {{ festival.times.end - now | durationHours }} remaining
             </span>
         </div>
@@ -75,11 +78,11 @@ export default {
             return 'past';
         },
         title() {
-            switch (this.state) {
-                case 'upcoming': return 'Upcoming Splatfest';
-                case 'active':   return 'Splatfest';
-                case 'past':     return 'Recent Splatfest';
-            }
+            if (this.state == 'upcoming')
+                return 'Upcoming Splatfest';
+            if (this.state == 'past' && !this.screenshotMode)
+                return 'Recent Splatfest';
+            return 'Splatfest';
         },
         image() {
             if (this.festival)

src/js/components/splatoon/SplatfestResultsBox.vue

@@ -1,7 +1,5 @@
 <template>
-    <div class="results">
-
-
+    <div class="splatfest-results">
         <div class="level is-marginless">
             <div class="level-item">
                 <div class="image is-48x48" :title="festival.names.alpha_short">

src/updater/twitter/SplatfestTweet.js

@@ -27,19 +27,39 @@ class SplatfestTweet extends TwitterPostBase {
     }
 
     getData() {
-        return this.getFestivals().find(f => f.times.start == this.getDataTime());
+        // Festival announced
+        let festival = this.getFestivals().find(f => f.times.announce == this.getDataTime());
+        if (festival)
+            return { festival, type: 'announce' };
+
+        // Festival started
+        festival = this.getFestivals().find(f => f.times.start == this.getDataTime());
+        if (festival)
+            return { festival, type: 'start' };
+
+        // Festival results
+        festival = this.getFestivals().find(f => f.times.result == this.getDataTime());
+        if (festival)
+            return { festival, type: 'result' };
     }
 
     getTestData() {
-        return this.getFestivals()[0];
+        return { festival: this.getFestivals()[0], type: 'start' };
     }
 
     getImage(data) {
-        return captureSplatfestScreenshot(this.region, data.times.start);
+        return captureSplatfestScreenshot(this.region, data.festival.times[data.type]);
     }
 
     getText(data) {
-        return `The ${this.regionDemonym} Splatfest is now open! #splatfest #splatoon2`;
+        switch (data.type) {
+            case 'announce':
+                return `You can now vote in the ${this.regionDemonym} Splatfest! #splatfest #splatoon2`;
+            case 'start':
+                return `The ${this.regionDemonym} Splatfest is now open! #splatfest #splatoon2`;
+            case 'result':
+                return `Results are in for the ${this.regionDemonym} Splatfest! #splatfest #splatoon2`;
+        }
     }
 }