Display the current Shifty Stations

This commit is contained in:
Matt Isenhower 2019-07-17 17:16:54 -07:00
parent 353558f9d3
commit fdeabe535a
6 changed files with 74 additions and 13 deletions

View File

@ -57,7 +57,7 @@ async function captureScreenshot(options) {
function captureScheduleScreenshot(now, splatfestBattle = false) {
let hash = `/schedules/${now}`;
let viewport = (splatfestBattle) ? { height: 780 } : undefined;
let viewport = (splatfestBattle) ? { height: 800 } : undefined;
return captureScreenshot({ hash, viewport });
}

View File

@ -795,6 +795,21 @@ body.has-modal #main {
}
}
.shifty-box {
@extend .product-box;
@extend .bg-wavy;
@extend .text-shadow;
max-width: 400px;
margin-left: auto;
margin-right: auto;
background-color: #999;
border-radius: 20px;
padding: 38px 10px 0 10px;
}
.hero-foot .dropdown-trigger .icon {
margin-left: -5px;
line-height: 0.45rem;

View File

@ -94,6 +94,22 @@
</div>
</div>
<div class="column" v-if="shiftySchedule">
<div class="shifty-box font-splatoon2 tilt-right">
<h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
Current Shifty Stations
</h3>
<div class="columns">
<div class="column">
<Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
</div>
<div class="column" v-if="shiftySchedule.stages[1]">
<Stage :stage="shiftySchedule.stages[1]" />
</div>
</div>
</div>
</div>
<div class="column" v-if="hasSalmonRun">
<div class="salmon-run tilt-left">
<div class="hook-box">
@ -154,9 +170,10 @@ import ScheduleBox from './splatoon/ScheduleBox.vue';
import SalmonRunBox from './splatoon/SalmonRunBox.vue';
import SplatfestBox from './splatoon/SplatfestBox.vue';
import NewWeaponsContainer from './splatoon/NewWeaponsContainer.vue';
import Stage from '@/web/components/splatoon/Stage.vue';
export default {
components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponsContainer },
components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponsContainer, Stage },
computed: {
...mapGetters('splatoon/regions', ['selectedRegion']),
...mapGetters('splatoon/languages', ['selectedLanguage']),
@ -166,6 +183,7 @@ export default {
'selectedRegionHasActiveSplatfest',
]),
...mapGetters('splatoon/newWeapons', ['weapons']),
...mapGetters('splatoon/finalFest', { shiftySchedule: 'activeSchedule' }),
loading() { return !this.$store.state.splatoon.data.schedules },

View File

@ -15,10 +15,28 @@
</div>
<div class="columns is-gapless font-splatoon2" v-else>
<div class="column" style="display: flex">
<div class="splatfest tilt-left">
<div class="splatfest">
<div class="hook-box">
<SplatfestBox :festival="currentSplatfestNA" global-splatfest-mode />
</div>
<template v-if="shiftySchedule">
<br />
<div class="shifty-box">
<h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
Current Shifty Stations
</h3>
<div class="columns">
<div class="column">
<Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
</div>
<div class="column" v-if="shiftySchedule.stages[1]">
<Stage :stage="shiftySchedule.stages[1]" />
</div>
</div>
</div>
</template>
</div>
</div>
<div class="column is-5">
@ -33,15 +51,17 @@ import { mapGetters } from 'vuex';
import Wrapper from '@/web/components/screenshots/Wrapper.vue';
import ScheduleBox from './ScheduleBox.vue';
import SplatfestBox from '@/web/components/splatoon/SplatfestBox.vue';
import Stage from '@/web/components/splatoon/Stage.vue';
export default {
components: { Wrapper, ScheduleBox, SplatfestBox },
components: { Wrapper, ScheduleBox, SplatfestBox, Stage },
computed: {
...mapGetters('splatoon/splatfests', {
'currentSplatfestNA': 'na/currentSplatfest',
'currentSplatfestEU': 'eu/currentSplatfest',
'currentSplatfestJP': 'jp/currentSplatfest',
}),
...mapGetters('splatoon/finalFest', { shiftySchedule: 'activeSchedule' }),
globalSplatfestIsActiveInAllRegions() {
// Do we have a Splatfest in each region?
if (!this.currentSplatfestNA || !this.currentSplatfestEU || !this.currentSplatfestJP)

View File

@ -71,7 +71,7 @@ export default {
props: ['region'],
computed: {
...mapGetters('splatoon', ['now']),
...mapGetters('splatoon/finalFest', ['schedules']),
...mapGetters('splatoon/finalFest', { schedules: 'currentSchedules' }),
allSchedules() {
return this.schedules.map(schedule => ({
@ -81,14 +81,9 @@ export default {
}));
},
currentSchedules() {
if (this.now && this.allSchedules)
return this.allSchedules.filter(s => s.end_time > this.now);
},
first() { return this.currentSchedules && this.currentSchedules[0]; },
second() { return this.currentSchedules && this.currentSchedules[1]; },
others() { return this.currentSchedules && this.currentSchedules.slice(2); },
first() { return this.allSchedules && this.allSchedules[0]; },
second() { return this.allSchedules && this.allSchedules[1]; },
others() { return this.allSchedules && this.allSchedules.slice(2); },
},
};
</script>

View File

@ -31,4 +31,17 @@ export const getters = {
schedules(state) {
return state.schedules;
},
currentSchedules(state, getters, { splatoon }) {
let now = splatoon.now
let schedules = state.schedules;
if (now && schedules)
return schedules.filter(s => s.end_time > now);
},
activeSchedule(state, getters, { splatoon }) {
let now = splatoon.now;
if (now && getters.currentSchedules)
return getters.currentSchedules.find(s => s.start_time <= now);
},
}