Add Splatfest tweets

Closes #2.

src/css/screenshots.scss

@@ -49,6 +49,10 @@
         transform: scale(1.25);
     }
 
+    .splatfest {
+        transform: scale(1.2) rotate(-1.4deg);
+    }
+
     .twitter-logo {
         display: inline-block;
         line-height: 1.4rem;

src/js/components/screenshots/ScreenshotHelper.vue

@@ -33,6 +33,18 @@
                         </router-link>
                     </strong>
                 </div>
+
+                <div v-if="splatfests">
+                    Splatfest:
+                    <strong>
+                        <router-link
+                            v-for="splatfest in splatfests"
+                            :key="splatfest.region"
+                            :to="`/splatfest/${splatfest.region}/${splatfest.festival.times.start}`">
+                            {{ splatfest.region }}
+                        </router-link>
+                    </strong>
+                </div>
             </div>
         </div>
     </div>
@@ -48,6 +60,7 @@ export default {
             merchandises: null,
             timeline: null,
             salmonruncalendar: null,
+            festivals: null,
         };
     },
     computed: {
@@ -77,6 +90,20 @@ export default {
                 return this.timeline.weapon_availability.availabilities[0];
             }
         },
+        splatfests() {
+            if (this.festivals) {
+                let splatfests = [];
+
+                for (let region in this.festivals) {
+                    let festival = this.festivals[region].festivals[0];
+                    if (festival)
+                        splatfests.push({ region, festival });
+                }
+
+                if (splatfests.length)
+                    return splatfests;
+            }
+        },
     },
     created() {
         axios.get('data/schedules.json')
@@ -87,6 +114,8 @@ export default {
             .then(response => this.timeline = response.data);
         axios.get('data/salmonruncalendar.json')
             .then(response => this.salmonruncalendar = response.data);
+        axios.get('data/festivals.json')
+            .then(response => this.festivals = response.data);
     },
 }
 </script>

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

@@ -0,0 +1,43 @@
+<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>
+        </div>
+    </Wrapper>
+</template>
+
+<script>
+import axios from 'axios';
+import Wrapper from '@/js/components/screenshots/Wrapper.vue';
+import SplatfestBox from '@/js/components/splatoon/SplatfestBox.vue';
+import regions from '@/js/regions';
+
+export default {
+    components: { Wrapper, SplatfestBox },
+    props: ['region', 'startTime'],
+    data() {
+        return {
+            festivals: null,
+        };
+    },
+    computed: {
+        now() {
+            return this.startTime;
+        },
+        title() {
+            let region = regions.splatoonRegions.find(r => r.key == this.region);
+            return `Splatfest: ${region.name}`;
+        },
+        festival() {
+            if (this.festivals)
+                return this.festivals[this.region].festivals.find(f => f.times.start == this.startTime);
+        },
+    },
+    created() {
+        axios.get('data/festivals.json')
+            .then(response => this.festivals = response.data)
+    },
+}
+</script>

src/js/components/splatoon/SplatfestBox.vue

@@ -18,7 +18,7 @@
             </div>
         </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="!screenshotMode">
             <span class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
                 {{ festival.times.start | date }}
                 {{ festival.times.start | time }}
@@ -28,7 +28,7 @@
             </span>
         </div>
 
-        <div class="splatfest-content has-text-centered">
+        <div class="splatfest-content has-text-centered" v-if="!screenshotMode">
             <template v-if="festival.times.start <= now">
                 {{ festival.times.end - now | duration }}
                 remaining
@@ -38,6 +38,12 @@
                 {{ festival.times.start - now | duration }}
             </template>
         </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 }">
+                {{ festival.times.end - now | durationHours }} remaining
+            </span>
+        </div>
     </div>
 </template>
 
@@ -45,7 +51,7 @@
 import Vue from 'vue';
 
 export default {
-    props: ['festival', 'now'],
+    props: ['festival', 'now', 'screenshotMode'],
     computed: {
         title() {
             if (this.festival.times.start > this.now)

src/js/regions.js

@@ -1,8 +1,8 @@
 const splatoonRegions = [
-    { key: null, name: 'Global' },
-    { key: 'na', name: 'North America & Oceania' },
-    { key: 'eu', name: 'Europe' },
-    { key: 'jp', name: 'Japan' },
+    { key: null, name: 'Global', demonym: 'Global' },
+    { key: 'na', name: 'North America & Oceania', demonym: 'North American & Oceanian' },
+    { key: 'eu', name: 'Europe', demonym: 'European' },
+    { key: 'jp', name: 'Japan', demonym: 'Japanese' },
 ];
 
 function getRegionByKey(key) {
@@ -62,7 +62,7 @@ function detectSplatoonRegionFromLanguage(language) {
     return null;
 }
 
-export default {
+module.exports = {
     splatoonRegions,
     getRegionByKey,
     detectSplatoonRegion,

src/js/screenshots.js

@@ -12,12 +12,14 @@ import Schedules from './components/screenshots/schedules/Schedules.vue';
 import SplatNetGear from './components/screenshots/splatnetgear/SplatNetGear.vue';
 import SalmonRun from './components/screenshots/salmonrun/SalmonRun.vue';
 import NewWeapon from './components/screenshots/newweapon/NewWeapon.vue';
+import Splatfest from './components/screenshots/splatfest/Splatfest.vue';
 const routes = [
     { path: '/', component: ScreenshotHelper },
     { path: '/schedules/:startTime', component: Schedules, props: true },
     { path: '/splatNetGear/:startTime/:endTime', component: SplatNetGear, props: true },
     { path: '/salmonRun/:startTime', component: SalmonRun, props: true },
     { path: '/newWeapon/:releaseTime', component: NewWeapon, props: true },
+    { path: '/splatfest/:region/:startTime', component: Splatfest, props: true },
 ];
 const router = new VueRouter({ routes });
 

src/updater/screenshots.js

@@ -68,9 +68,17 @@ function captureNewWeaponScreenshot(releaseTime) {
     return captureScreenshot({ url });
 }
 
+function captureSplatfestScreenshot(region, startTime) {
+    let url = new URL(htmlUrl);
+    url.hash = `/splatfest/${region}/${startTime}`;
+
+    return captureScreenshot({ url });
+}
+
 module.exports = {
     captureScheduleScreenshot,
     captureGearScreenshot,
     captureSalmonRunScreenshot,
     captureNewWeaponScreenshot,
+    captureSplatfestScreenshot,
 }

src/updater/twitter.js

@@ -4,12 +4,16 @@ const ScheduleTweet = require('./twitter/ScheduleTweet');
 const GearTweet = require('./twitter/GearTweet');
 const SalmonRunTweet = require('./twitter/SalmonRunTweet');
 const NewWeaponTweet = require('./twitter/NewWeaponTweet');
+const SplatfestTweet = require('./twitter/SplatfestTweet');
 
 let tweets = [
     new ScheduleTweet,
     new GearTweet,
     new SalmonRunTweet,
     new NewWeaponTweet,
+    new SplatfestTweet('na'),
+    new SplatfestTweet('eu'),
+    new SplatfestTweet('jp'),
 ];
 
 async function maybePostTweets() {

src/updater/twitter/SplatfestTweet.js

@@ -0,0 +1,46 @@
+const TwitterPostBase = require('./TwitterPostBase');
+const { captureSplatfestScreenshot } = require('../screenshots');
+const { readData } = require('./utilities');
+const regions = require('../../js/regions');
+
+class SplatfestTweet extends TwitterPostBase {
+    constructor(region) {
+        super();
+
+        this.region = region;
+
+        let regionInfo = this.getRegionInfo();
+        this.regionName = regionInfo.name;
+        this.regionDemonym = regionInfo.demonym;
+    }
+
+    getRegionInfo() {
+        return regions.splatoonRegions.find(r => r.key == this.region);
+    }
+
+    getKey() { return `splatfest-${this.region}`; }
+    getName() { return `Splatfest: ${this.regionName}`; }
+
+    getFestivals() {
+        let festivals = readData('festivals.json');
+        return festivals[this.region].festivals;
+    }
+
+    getData() {
+        return this.getFestivals().find(f => f.times.start == this.getDataTime());
+    }
+
+    getTestData() {
+        return this.getFestivals()[0];
+    }
+
+    getImage(data) {
+        return captureSplatfestScreenshot(this.region, data.times.start);
+    }
+
+    getText(data) {
+        return `The ${this.regionDemonym} Splatfest is now open! #splatfest #splatoon2`;
+    }
+}
+
+module.exports = SplatfestTweet;