Add Salmon Run box

src/css/main.scss

@@ -55,16 +55,6 @@ html {
     -webkit-mask-position: center top;
     mask-position: center top;
 
-    &.tilt-right {
-        -webkit-transform: rotate(1.4deg);
-        transform: rotate(1.4deg);
-    }
-
-    &.tilt-left {
-        -webkit-transform: rotate(-1.4deg);
-        transform: rotate(-1.4deg);
-    }
-
     .schedule-icon {
         display: inline-block;
         width: 42px;
@@ -97,6 +87,60 @@ html {
     }
 }
 
+.hook-box-wrapper {
+    position: relative;
+    margin: 40px auto 20px;
+}
+
+.hook-box {
+    border-radius: 32px;
+    padding: 10px;
+    text-shadow: 1px 1px 0 #000;
+    overflow: hidden;
+
+    &, &:before {
+        background: url(../img/bkg-spots.png) 50%, url(../img/bkg-dots.png) 50%;
+        background-size: 189px 189px, 40px 40px;
+    }
+
+    &:before {
+        content: "";
+        position: absolute;
+
+        width: 100%;
+        height: 29px;
+        top: -28px;
+        left: 0;
+
+        -webkit-mask-image: url(../img/bkg-mask-hook.png);
+        mask-image: url(../img/bkg-mask-hook.png);
+        -webkit-mask-size: 36px 29px;
+        mask-size: 36px 29px;
+        -webkit-mask-position: center top;
+        mask-position: center top;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+    }
+}
+
+.salmon-run {
+    .hook-box, .hook-box:before {
+        background-color: darken(#ff5600, 10%);
+    }
+
+    max-width: 600px;
+}
+
+.tilt-right {
+    -webkit-transform: rotate(1.4deg);
+    transform: rotate(1.4deg);
+}
+
+.tilt-left {
+    -webkit-transform: rotate(-1.4deg);
+    transform: rotate(-1.4deg);
+}
+
 .main-schedule {
     background: rgba(0,0,0,0.7);
     padding: 5px 10px 10px;

src/js/components/App.vue

@@ -34,6 +34,15 @@
                             <ScheduleBox class="schedule-box tilt-left league" :schedules="league" :now="now"></ScheduleBox>
                         </div>
                     </div>
+
+                    <div v-if="coop">
+                        <div class="hook-box-wrapper salmon-run tilt-left">
+                            <div class="hook-box">
+                                <SalmonRunBox :coop="coop" :now="now"></SalmonRunBox>
+                            </div>
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>
@@ -50,22 +59,28 @@
 <script>
 import axios from 'axios';
 import ScheduleBox from './ScheduleBox.vue';
+import SalmonRunBox from './SalmonRunBox.vue';
 
 export default {
-    components: { ScheduleBox },
+    components: { ScheduleBox, SalmonRunBox },
     data() {
         return {
             now: null,
             splatnet: {
                 schedules: null,
+                timeline: null,
             },
         };
     },
     computed: {
-        loading() { return !this.splatnet.schedules; },
+        loading() { return !this.splatnet.schedules || !this.splatnet.timeline; },
         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) },
+        coop() {
+            if (!this.loading && this.splatnet.timeline.coop.schedule.end_time >= this.now)
+                return this.splatnet.timeline.coop;
+        },
     },
     created() {
         this.updateNow();
@@ -80,6 +95,7 @@ export default {
     methods: {
         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);
         },
         updateNow() {
             this.now = Math.trunc((new Date).getTime() / 1000);

src/js/components/SalmonRunBox.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <h2 class="title is-3 is-size-2-fullhd alt-font">
+            Salmon Run
+        </h2>
+        <div class="is-size-5 title-effect alt-font">
+            <span v-if="isOpen">Now open!</span>
+            <span v-else>Soon!</span>
+        </div>
+        <div>
+            {{ coop.schedule.start_time | time }} &ndash;
+            {{ coop.schedule.end_time | time }}
+        </div>
+        <div v-if="isOpen">
+            {{ coop.schedule.end_time - now | duration }} remaining
+        </div>
+        <div v-else>
+            in {{ coop.schedule.start_time - now | duration }}
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+    props: ['coop', 'now'],
+    computed: {
+        isOpen() { return this.coop.schedule.start_time <= this.now; },
+    },
+    filters: {
+        time(value) {
+            return moment.unix(value).local().format('ha');
+        },
+        duration(value) {
+            let duration = moment.duration(value, 'seconds');
+            let hours = Math.floor(duration.asHours());
+            let minutes = ('0' + duration.minutes()).substr(-2);
+            let seconds = ('0' + duration.seconds()).substr(-2);
+            if (hours)
+                return `${hours}h ${minutes}m ${seconds}s`;
+            return `${minutes}m ${seconds}s`;
+        },
+    },
+}
+</script>