From 4ca493da1ca0569c2cc92234cd6994dd185d8963 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Thu, 3 Aug 2017 16:28:11 -0700
Subject: [PATCH] Add Salmon Run box

---
 src/css/main.scss                  |  64 ++++++++++++++++++++++++-----
 src/img/bkg-dots.png               | Bin 0 -> 251 bytes
 src/img/bkg-mask-hook.png          | Bin 0 -> 762 bytes
 src/img/bkg-spots.png              | Bin 0 -> 7259 bytes
 src/js/components/App.vue          |  20 ++++++++-
 src/js/components/SalmonRunBox.vue |  46 +++++++++++++++++++++
 6 files changed, 118 insertions(+), 12 deletions(-)
 create mode 100644 src/img/bkg-dots.png
 create mode 100644 src/img/bkg-mask-hook.png
 create mode 100644 src/img/bkg-spots.png
 create mode 100644 src/js/components/SalmonRunBox.vue

diff --git a/src/css/main.scss b/src/css/main.scss
index 8174a55..4e21022 100644
--- a/src/css/main.scss
+++ b/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;
diff --git a/src/img/bkg-dots.png b/src/img/bkg-dots.png
new file mode 100644
index 0000000000000000000000000000000000000000..6deaf5bb8ed81a12b700937d2a8b6d81aa36967f
GIT binary patch
literal 251
zcmeAS@N?(olHy`uVBq!ia0vp^0U*r63?ysp-_HY5Ea{HEjtmSN`?>!lvI6;x#X;^)
z4C~IxyaaM20(?ST-3xsFV*|3@q5FVpI7)*2f*I6QCHaKJd6$M9F9(X{db&7<cpOg_
zNMvAkbuw{gXgTQ9ktU(k5ZGuj%Q0Yv#jFAer_4i%5(Xhm6HgeVq$n8iuu8gJew<My
z<J-UZWub{}U(Xi}mnAlf6PWH9w465P6nntyyu+rMv#}(z>D{!2v-#YCs()H2T~cPS
X=+bz;Sw~tDXfcDQtDnm{r-UW|0p(i9

literal 0
HcmV?d00001

diff --git a/src/img/bkg-mask-hook.png b/src/img/bkg-mask-hook.png
new file mode 100644
index 0000000000000000000000000000000000000000..15f983118fb359035760d9eb3cf7c80ec8749b13
GIT binary patch
literal 762
zcmeAS@N?(olHy`uVBq!ia0vp^bwHfP!3-p=Dz5qfDVB6cUq=Rpjs4tz5?O(K#^NA%
zCx&(BWL^R}#sNMduI>dObtHk?j(S=^4FV-We!&a^4hkO*ENDo0P++hj;KGF8B7q+m
z7??agT^vI)?j4<Vv+uA1kE`%E-Nyg_Z@mneHF4D>hPb5t;mei8^~LjVhd&9(&3T;|
zd&4|MgI)2zJEug2!^Zo9%?f|a&+#;7-(I1#_A>wF7l(A^Ym|A_z2cw9_u7c<+i&*e
zhuQl7lN;}yi>%7hF|7Qv`{BXaJGmZ62mjEld2&d4q4#%j<EzI%K0M8G@595{a+i#i
zYahK+^{bik=gay4<vpoKtv#RmrtCW=?I>1%>XCcueChWoADKTEK4yQEd^|exPwm}@
z$HOD{OgwtO>pf!)km`KTxo7%O_sAOSl#i}r_sh6y)~vr~sD2=18pj7YyD4rqb_r_~
zT94Mp-1EBn<v?G4zsn=$YrOs{b`SQ)&-3vY*|*@c>#+y6Qtu6n=Q%z8E&KgRi}!>z
z%r*P||N7FEap&`fY~};yv*lQSs~%}wAMkdrN?6AB$9f7^8|K_#s6O%Hj^qT@l*D=K
zmKQBCarwQsh4J&kYT54_DylY#88X?t-Ep~e#ofN$degO52**sDdo^!Wn8Tl=JD!Uz
zPyQf%<mis+zfPW)Ir82<Tz30AS%-^H&ihZ7+rDnT`Gp;45)R+L+4JkexqXM#kER@6
z{N1|XhfBlrk5cmvZ0}k2zDMr+nKJ&x$ItfWGj<=h{Wmwl=F?f*(~nliT$8N2^QU6X
zj}6@XVR|on<s*K44ApzR;As2t`xSTk-)tA%xu#iEp7q}8RN0iv&YRvdip!te*FO2Q
z)r!9A<p<S)vV!u0b$c!y*?sRt%EtqJy9FLL`tskLCb{PEvfH|6iz3;z?0nnJ?L}5{
U)J^vj{sl^*p00i_>zopr01F*i(EtDd

literal 0
HcmV?d00001

diff --git a/src/img/bkg-spots.png b/src/img/bkg-spots.png
new file mode 100644
index 0000000000000000000000000000000000000000..eee2250b15aa204b301fd5a99a941aab702457de
GIT binary patch
literal 7259
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

literal 0
HcmV?d00001

diff --git a/src/js/components/App.vue b/src/js/components/App.vue
index ee6f0b6..95f7647 100644
--- a/src/js/components/App.vue
+++ b/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);
diff --git a/src/js/components/SalmonRunBox.vue b/src/js/components/SalmonRunBox.vue
new file mode 100644
index 0000000..aa72446
--- /dev/null
+++ b/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>