From 2404ba73d5c9d18994cbbf3db9d7d2d5532c300f Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sat, 5 Aug 2017 16:21:19 -0700
Subject: [PATCH] Add Splatfest info for NA

---
 package.json                         |   1 +
 src/css/_backgrounds.scss            |  12 ++++++
 src/css/_modifiers.scss              |  47 +++++++++++++++++++++-
 src/css/_variables.scss              |   8 ++++
 src/css/main.scss                    |  58 ++++++++++++++++++++++++++-
 src/img/bg-mask-banner.png           | Bin 0 -> 567 bytes
 src/js/components/App.vue            |  49 ++++++++++++++++++++--
 src/js/components/Dropdown.vue       |  41 +++++++++++++++++++
 src/js/components/GameModeHeader.vue |  10 ++++-
 src/js/components/ScheduleBox.vue    |   9 +++--
 src/js/components/SplatfestBox.vue   |  54 +++++++++++++++++++++++++
 src/js/main.js                       |   3 ++
 src/splatoon/splatnet.js             |  13 ++++++
 yarn.lock                            |   4 ++
 14 files changed, 299 insertions(+), 10 deletions(-)
 create mode 100644 src/img/bg-mask-banner.png
 create mode 100644 src/js/components/Dropdown.vue
 create mode 100644 src/js/components/SplatfestBox.vue

diff --git a/package.json b/package.json
index 7f91668..db5ee33 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "purifycss-webpack": "^0.7.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
+    "v-click-outside": "^0.0.8",
     "vue": "^2.4.2",
     "vue-loader": "^13.0.2",
     "vue-template-compiler": "^2.4.2",
diff --git a/src/css/_backgrounds.scss b/src/css/_backgrounds.scss
index 0c8f84f..78291ad 100644
--- a/src/css/_backgrounds.scss
+++ b/src/css/_backgrounds.scss
@@ -6,6 +6,7 @@ $bg-spots: url(../img/bg-spots.png);
 $bg-mask-product: url(../img/bg-mask-product.png);
 $bg-mask-title-squid: url(../img/bg-mask-title-squid.png);
 $bg-mask-hook: url(../img/bg-mask-hook.png);
+$bg-mask-banner: url(../img/bg-mask-banner.png);
 
 // Colors
 $bg-battle-regular: #19d719;
@@ -64,3 +65,14 @@ $bg-battle-league: #f02d7d;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
 }
+
+.bg-mask-banner {
+    -webkit-mask-image: $bg-mask-banner;
+    mask-image: $bg-mask-banner;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
diff --git a/src/css/_modifiers.scss b/src/css/_modifiers.scss
index 62946b1..c0c5912 100644
--- a/src/css/_modifiers.scss
+++ b/src/css/_modifiers.scss
@@ -38,7 +38,7 @@
     }
 }
 
-.button.is-clear {
+.button.is-translucent {
     @extend .text-shadow;
 
     background: rgba($white-ter, 0.4);
@@ -52,12 +52,57 @@
     }
 }
 
+.button.is-clear {
+    @extend .text-shadow;
+
+    background: transparent;
+    border: rgba($white-ter, 0.9);
+    color: $grey-lighter;
+
+    &:hover {
+        background: rgba($white, 0.2);
+        border: rgba($white, 1.0);
+        color: $white;
+    }
+}
+
 .button.is-rounded {
     border-radius: 100px;
     padding-left: 12px;
     padding-right: 12px;
 }
 
+.chevron::before {
+    border-style: solid;
+    border-width: 0.1em 0.1em 0 0;
+    content: '';
+    display: inline-block;
+    height: 0.45em;
+    left: 0.15em;
+    position: relative;
+    top: 0.15em;
+    transform: rotate(-45deg);
+    vertical-align: top;
+    width: 0.45em;
+}
+
+.chevron.right:before {
+    left: 0;
+    transform: rotate(45deg);
+}
+
+.chevron.bottom:before {
+    // top: 0;
+    top: 0.45em;
+    left: 0;
+    transform: rotate(135deg);
+}
+
+.chevron.left:before {
+    left: 0.1em;
+    transform: rotate(-135deg);
+}
+
 .hand {
     cursor: pointer;
 }
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index e85f525..4ede497 100644
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@@ -1,5 +1,8 @@
 @import '~bulma/sass/utilities/initial-variables';
 
+$background: $black-ter;
+$body-background-color: #191919;
+
 $text: $grey-lighter;
 $text-strong: $white-ter;
 $title-color: $white-ter;
@@ -9,3 +12,8 @@ $purple: #460fc8;
 
 // Temp: This can be removed after Bulma 0.5.1
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7;
+
+$dropdown-content-background-color: rgba($grey-dark, 0.9);
+$dropdown-item-color: $grey-lighter;
+$dropdown-item-hover-color: $white;
+$dropdown-item-active-background-color: $orange;
diff --git a/src/css/main.scss b/src/css/main.scss
index 05d2fd1..fd3510c 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -7,7 +7,6 @@
 
 html {
     @extend .bg-squids;
-    background-color: #191919;
 }
 
 .fa {
@@ -46,6 +45,13 @@ html {
     padding: 35px 10px 10px 10px;
     margin: auto;
 
+    &.splatfest-schedule-box {
+        // Provide a little more room for the third Splatfest stage
+        max-width: 720px;
+        -webkit-mask-size: 730px 1168px;
+        mask-size: 730px 1168px;
+    }
+
     &.regular {
         background-color: $bg-battle-regular;
     }
@@ -123,6 +129,56 @@ html {
     }
 }
 
+.splatfest {
+    @extend .text-shadow;
+    max-width: 500px;
+    margin: auto;
+
+    .hook-box, .hook-box:before {
+        background-color: #888;
+        @extend .bg-stripes;
+
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: 0;
+    }
+
+    .splatfest-header, .splatfest-content {
+        padding: 5px 15px 10px;
+    }
+
+    .panel-container {
+        position: relative;
+
+        .alpha, .bravo {
+            @extend .font-splatoon1;
+            @extend .title-color;
+            @extend .is-size-5;
+            position: absolute;
+            bottom: 0.25rem;
+        }
+
+        .alpha {
+            left: 0.25rem;
+        }
+
+        .bravo {
+            right: 0.25rem;
+        }
+    }
+
+    .festival-period-container {
+        margin-bottom: 10px;
+    }
+
+    .festival-period {
+        @extend .bg-mask-banner;
+        @extend .bg-stripes;
+        background-size: 53px 53px;
+        padding: 4px 20px;
+    }
+}
+
 .main-schedule {
     background: rgba(0,0,0,0.7);
     padding: 5px 10px 10px;
diff --git a/src/img/bg-mask-banner.png b/src/img/bg-mask-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..25973c065d09eefb14a63cb16a55532019cc0cb9
GIT binary patch
literal 567
zcmeAS@N?(olHy`uVBq!ia0y~yU^)S0hj1_h$rXNvp+Jfy-O<;Pfnj4m_n$;oAfK@~
z$lZxy-8q?;K#p;MPl&5~fe(;L61eTCrv=m?P!i-9%&@^B;DNw|gbxY}3=UjqDA;as
zZ2{1lHcuDFkcwMxZ=cL<VGwXVc<{i6vyc8PF6AgV;vcG5^Yx|Y--<cWbr0`d<1YU*
z<IRz?Z^hsJIPP=jZsEfT?8b$~ms_pxojG#1R$u1RWuRzT-SN*^YI%7V?rBJDHD?NY
z+uOAKo7=&Kdj&sSyQdMc#hfecZEr(t_2Psp_c&$%xpudtS!aK9JKzlzx_FNxA{`?A
z-~vQ?A5?n5-avz_e3mspu0POB=W68#Yxf3j$jBEtb4!|WH_(a|dj$<L^F?ZaW|{%b
zm<|+Lv{$g;;meTf$N$P8dJ-<()A*5<FOmb)(+ttG0m!x4YR<(6)UzF|C(s}}pXCkE
zqQyXGE!i9R;o?1w8(Yko;($WkK%t+PSAIKYzacwcL<VTgWT2jKpxZCs<B$Ma?FKX^
zw0iM_m3spVGV)pW08JJH+8tS~oNyfyBx*ozKTy*$pyPg(tlIlgeva!Cd*S0R{eH5{
QegKMIPgg&ebxsLQ01-m&r~m)}

literal 0
HcmV?d00001

diff --git a/src/js/components/App.vue b/src/js/components/App.vue
index df68dfe..af40150 100644
--- a/src/js/components/App.vue
+++ b/src/js/components/App.vue
@@ -2,7 +2,7 @@
     <div class="hero is-fullheight">
         <div class="hero-head">
             <div class="container is-fluid">
-                <div class="level">
+                <div class="level is-marginless">
                     <div class="level-left">
                         <div class="level-item">
                             <h1 class="title is-1 font-splatoon1 is-inline">Splatoon 2</h1>
@@ -14,6 +14,15 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="level">
+                    <div class="level-left"></div>
+                    <div class="level-right">
+                        <div class="level-item">
+                            <Dropdown :options="regions" v-model="selectedRegionKey" style="margin: 0 -12px"></Dropdown>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -24,8 +33,21 @@
                         <span class="fa fa-spin squid-refresh"></span>
                     </span>
                 </div>
+
                 <div v-else>
-                    <div class="columns is-desktop">
+                    <div v-if="isFestivalActive" class="columns is-desktop" style="max-width: 1392px; margin: auto">
+                        <div class="column">
+                            <div class="splatfest tilt-left">
+                                <div class="hook-box">
+                                    <SplatfestBox :festival="festival" :now="now"></SplatfestBox>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <ScheduleBox class="main-schedule-box splatfest-schedule-box tilt-right" cssClass="regular" :schedules="regular" :festival="festival" :now="now"></ScheduleBox>
+                        </div>
+                    </div>
+                    <div v-else class="columns is-desktop">
                         <div class="column">
                             <ScheduleBox class="main-schedule-box tilt-left" cssClass="regular" :schedules="regular" :now="now"></ScheduleBox>
                         </div>
@@ -59,17 +81,27 @@
 
 <script>
 import axios from 'axios';
+import Dropdown from './Dropdown.vue';
 import ScheduleBox from './ScheduleBox.vue';
 import SalmonRunBox from './SalmonRunBox.vue';
+import SplatfestBox from './SplatfestBox.vue';
 
 export default {
-    components: { ScheduleBox, SalmonRunBox },
+    components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox },
     data() {
         return {
+            regions: [
+                { key: null, name: 'Global' },
+                { key: 'na', name: 'North America' },
+            ],
+            selectedRegionKey: null,
             now: null,
             splatnet: {
                 schedules: null,
                 timeline: null,
+                festivals: {
+                    na: null,
+                },
             },
         };
     },
@@ -78,6 +110,16 @@ export default {
         regular() { return !this.loading && this.splatnet.schedules.regular.filter(this.filterSchedule) },
         ranked() { return !this.loading && this.splatnet.schedules.gachi.filter(this.filterSchedule) },
         league() { return !this.loading && this.splatnet.schedules.league.filter(this.filterSchedule) },
+        festival() {
+            if (this.loading || !this.selectedRegionKey)
+                return;
+
+            let festivals = this.splatnet.festivals[this.selectedRegionKey];
+            return festivals && festivals.festivals && festivals.festivals[0];
+        },
+        isFestivalActive() {
+            return this.festival && this.festival.times.start <= this.now && this.festival.times.end > this.now;
+        },
         coop() {
             if (!this.loading && this.splatnet.timeline.coop && this.splatnet.timeline.coop.schedule.end_time >= this.now)
                 return this.splatnet.timeline.coop;
@@ -97,6 +139,7 @@ export default {
         updateData() {
             axios.get('/data/schedules.json').then(response => this.splatnet.schedules = response.data);
             axios.get('/data/timeline.json').then(response => this.splatnet.timeline = response.data);
+            axios.get('/data/festivals-na.json').then(response => this.splatnet.festivals.na = response.data);
         },
         updateNow() {
             this.now = Math.trunc((new Date).getTime() / 1000);
diff --git a/src/js/components/Dropdown.vue b/src/js/components/Dropdown.vue
new file mode 100644
index 0000000..5169459
--- /dev/null
+++ b/src/js/components/Dropdown.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="dropdown is-right font-splatoon2" :class="{ 'is-active': isOpen }">
+        <div class="dropdown-trigger">
+            <button class="button is-clear font-splatoon2" @click="isOpen = !isOpen" v-click-outside="hide">
+                <span v-if="selectedOption">{{ selectedOption.name }}</span>
+                <span class="icon is-small">
+                    <span class="chevron bottom"></span>
+                </span>
+            </button>
+        </div>
+        <div class="dropdown-menu" role="menu">
+            <div class="dropdown-content">
+                <a href="#" class="dropdown-item" v-for="option in options" :class="{ 'is-active': option.key == value }" @click="$emit('input', option.key)">
+                    {{ option.name }}
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['options', 'value'],
+    data() {
+        return {
+            isOpen: false,
+        };
+    },
+    computed: {
+        selectedOption() {
+            if (this.options)
+                return this.options.find(option => option.key == this.value);
+        },
+    },
+    methods: {
+        hide() {
+            this.isOpen = false;
+        },
+    },
+}
+</script>
diff --git a/src/js/components/GameModeHeader.vue b/src/js/components/GameModeHeader.vue
index a7e96c0..e251d04 100644
--- a/src/js/components/GameModeHeader.vue
+++ b/src/js/components/GameModeHeader.vue
@@ -10,7 +10,8 @@
             </div>
             <div class="level-item">
                 <h2 class="title is-3 is-size-2-fullhd is-size-4-mobile font-splatoon1">
-                    {{ gameMode.name }}
+                    <template v-if="isFestival">Splatfest Battle</template>
+                    <template v-else>{{ gameMode.name }}</template>
                 </h2>
             </div>
         </div>
@@ -19,6 +20,11 @@
 
 <script>
 export default {
-    props: ['gameMode'],
+    props: ['gameMode', 'festival', 'now'],
+    computed: {
+        isFestival() {
+            return this.festival && this.festival.times.start <= this.now && this.festival.times.end > this.now;
+        },
+    },
 }
 </script>
diff --git a/src/js/components/ScheduleBox.vue b/src/js/components/ScheduleBox.vue
index 47579ab..a854e07 100644
--- a/src/js/components/ScheduleBox.vue
+++ b/src/js/components/ScheduleBox.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="font-splatoon2" :class="cssClass" v-if="gameMode">
-        <GameModeHeader :gameMode="gameMode"></GameModeHeader>
+        <GameModeHeader :gameMode="gameMode" :festival="festival" :now="now"></GameModeHeader>
 
         <div class="main-schedule" v-if="currentSchedule">
             <div class="level is-mobile top-bar">
@@ -18,13 +18,16 @@
             <div class="columns is-mobile is-slim">
                 <div class="column"><Stage :stage="currentSchedule.stage_a"></Stage></div>
                 <div class="column"><Stage :stage="currentSchedule.stage_b"></Stage></div>
+                <template v-if="festival">
+                    <div class="column"><Stage :stage="festival.special_stage"></Stage></div>
+                </template>
             </div>
         </div>
 
         <ScheduleList :schedules="upcomingSchedules" :now="now" :onlyFirst="true"></ScheduleList>
 
         <p class="has-text-centered" style="margin-top: 10px">
-            <button class="button is-clear is-rounded" @click="isOpen=true">
+            <button class="button is-translucent is-rounded" @click="isOpen=true">
                 <span class="icon squid-icon-tilt">
                     <span class="fa squid-squid"></span>
                 </span>
@@ -55,7 +58,7 @@ import ScheduleList from './ScheduleList.vue';
 
 export default {
     components: { GameModeHeader, Stage, ScheduleList },
-    props: ['schedules', 'cssClass', 'now'],
+    props: ['schedules', 'cssClass', 'festival', 'now'],
     data() {
         return {
             isOpen: false,
diff --git a/src/js/components/SplatfestBox.vue b/src/js/components/SplatfestBox.vue
new file mode 100644
index 0000000..157b099
--- /dev/null
+++ b/src/js/components/SplatfestBox.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="font-splatoon2">
+        <div class="splatfest-header">
+            <h2 class="title is-3 is-size-2-fullhd font-splatoon1">
+                Splatfest
+            </h2>
+        </div>
+
+        <div class="panel-container">
+            <div class="image">
+                <img :src="image" />
+            </div>
+            <div class="alpha">
+                {{ festival.names.alpha_short }}
+            </div>
+            <div class="bravo">
+                {{ festival.names.bravo_short }}
+            </div>
+        </div>
+
+        <div class="has-text-centered is-size-5 title-color festival-period-container">
+            <span class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
+                {{ festival.times.start | date }}
+                {{ festival.times.start | time }}
+                &ndash;
+                {{ festival.times.end | date }}
+                {{ festival.times.end | time }}
+            </span>
+        </div>
+
+        <div class="splatfest-content has-text-centered">
+            <template v-if="festival.times.start <= now">
+                {{ festival.times.end - now | duration }}
+                remaining
+            </template>
+            <template v-else>
+                in
+                {{ festival.times.start - now | duration }}
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['festival', 'now'],
+    computed: {
+        image() {
+            if (this.festival)
+                return `https://app.splatoon2.nintendo.net${this.festival.images.panel}`;
+        }
+    }
+}
+</script>
diff --git a/src/js/main.js b/src/js/main.js
index 65370d1..1d3ab54 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,5 +1,8 @@
 import Vue from 'vue';
 import App from './components/App.vue';
+import vClickOutside from 'v-click-outside';
+
+Vue.use(vClickOutside);
 
 Vue.directive('portal', {
     inserted(el) {
diff --git a/src/splatoon/splatnet.js b/src/splatoon/splatnet.js
index 3cee2ee..ed602a6 100644
--- a/src/splatoon/splatnet.js
+++ b/src/splatoon/splatnet.js
@@ -42,7 +42,20 @@ const updateTimeline = function() {
     });
 }
 
+const updateFestivals = function() {
+    console.info('Updating festivals...');
+
+    api.get('festivals/active').then(response => {
+        // Make sure the data path exists
+        mkdirp(dataPath);
+
+        fs.writeFile(`${dataPath}/festivals-na.json`, JSON.stringify(response.data));
+        console.info('Updated festivals.');
+    });
+}
+
 module.exports.update = function() {
     updateSchedules();
     updateTimeline();
+    updateFestivals();
 }
diff --git a/yarn.lock b/yarn.lock
index 4107f8d..eb9f50a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5366,6 +5366,10 @@ uuid@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
 
+v-click-outside@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-0.0.8.tgz#1f3033b8c4ace431c3233a4080127fc088d52093"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"