Leahnaya/splatoon2.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon2.ink.git synced 2026-08-23 02:44:19 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Splatfest history dialog

Browse Source 
Closes #11.
This commit is contained in:
Matt Isenhower
2018-02-03 10:44:40 -08:00
parent 4fe925752f
commit 8a22193bda
19 changed files with 236 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/css/_boxes.scss
View File

@@ -5,19 +5,13 @@
padding-top: 35px;
}
.modal-card-product-box {
.modal-rounded-box {
.modal-card-head {
@extend .bg-mask-product;
mask-size: 730px 1168px;
background-position-y: bottom;
border: none;
border-top-left-radius: 32px;
border-top-right-radius: 32px;
padding-top: 45px;
display: block; // Fixes issues with .level
}
.modal-card-body {
@@ -44,6 +38,17 @@
}
}
.modal-card-product-box {
@extend .modal-rounded-box;
.modal-card-head {
@extend .bg-mask-product;
mask-size: 730px 1168px;
background-position-y: bottom;
padding-top: 45px;
}
}
.hook-box {
border-radius: 32px;
padding: 10px;

15
src/css/_modifiers.scss
View File

@@ -184,3 +184,18 @@
padding-right: 0.2rem;
}
}
@include tablet {
.modal {
&.is-wide {
.modal-content, .modal-card {
width: 1000px;
}
}
&.is-xwide {
.modal-content, .modal-card {
width: 1200px;
}
}
}
}

42
src/css/main.scss
View File

@@ -290,18 +290,18 @@ body.has-modal #main {
border-radius: 0;
}
}
}
.festival-period-container {
margin-top: -5px;
}
.festival-period-container {
margin-top: -5px;
}
.festival-period {
@extend .bg-mask-banner;
@extend .bg-stripes;
display: inline-block;
background-size: 53px 53px;
padding: 4px 20px;
}
.festival-period {
@extend .bg-mask-banner;
@extend .bg-stripes;
display: inline-block;
background-size: 53px 53px;
padding: 4px 20px;
}
.splatfest-results {
@@ -466,6 +466,28 @@ body.has-modal #main {
padding: 15px;
}
.splatfest-history-dialog {
.modal-card-head, .modal-card-body {
background: rgba($grey-light, 0.25);
}
.splatfest-history-row:first-child {
margin-top: 25px;
}
.splatfest-history-row:not(:last-child) {
margin-bottom: 50px;
}
.splatfest-results-container {
width: 325px;
.splatfest-results {
position: relative;
}
}
}
.merchandise-box {
@extend .product-box;
@extend .bg-circles;

15
src/js/components/App.vue
View File

@@ -141,6 +141,10 @@
<a href="#" @click.prevent="aboutOpen = true">{{ $t('ui.about') }}</a>
&ndash;
<a href="https://twitter.com/Splatoon2inkbot" target="_blank">Twitter</a>
<template v-if="splatnet.festivals">
&ndash;
<a href="#" @click.prevent="splatfestHistoryOpen = true">{{ $t('splatfest.previous') }}</a>
</template>
&ndash;
<Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-right is-up" />
</div>
@@ -153,6 +157,13 @@
:now="now"
@close="splatNetGearOpen = false"
></SplatNetGearDialog>
<SplatfestHistoryDialog
v-if="splatfestHistoryOpen"
:allFestivals="splatnet.festivals"
:now="now"
:initialRegion="selectedRegionKey"
@close="splatfestHistoryOpen = false"
/>
</div>
</template>
@@ -175,11 +186,12 @@ import SplatfestBox from './splatoon/SplatfestBox.vue';
import NewWeaponBox from './splatoon/NewWeaponBox.vue';
import AboutDialog from './AboutDialog.vue';
import SplatNetGearDialog from './splatoon/SplatNetGearDialog.vue';
import SplatfestHistoryDialog from './splatoon/SplatfestHistoryDialog.vue';
const localStorage = window.localStorage;
export default {
components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponBox, AboutDialog, SplatNetGearDialog },
components: { Dropdown, ScheduleBox, SalmonRunBox, SplatfestBox, NewWeaponBox, AboutDialog, SplatNetGearDialog, SplatfestHistoryDialog },
data() {
return {
actualSelectedRegionKey: null,
@@ -194,6 +206,7 @@ export default {
},
aboutOpen: false,
splatNetGearOpen: false,
splatfestHistoryOpen: false,
language: null,
};
},

28
src/js/components/splatoon/SplatfestBox.vue
View File

@@ -32,7 +32,7 @@
<div v-if="!results" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
<template v-if="!screenshotMode">
<span class="nowrap">
{{ festival.times.start | date({ weekday: 'short' }) }}
{{ festival.times.start | date(dateOptions) }}
{{ festival.times.start | time }}
</span>
&ndash;
@@ -51,7 +51,11 @@
</template>
</div>
<div v-else class="festival-period" style="background-color: #333" v-html="teamWins"></div>
<SplatfestWinnerBar
v-else
:festival="festival"
:results="results"
/>
</div>
<div class="splatfest-content has-text-centered" v-if="!screenshotMode">
@@ -73,11 +77,11 @@
<script>
import Vue from 'vue';
import SplatfestResultsBox from './SplatfestResultsBox.vue';
import { getSplatfestWinner } from '@/js/splatoon';
import SplatfestWinnerBar from './SplatfestWinnerBar.vue';
export default {
components: { SplatfestResultsBox },
props: ['festival', 'results', 'now', 'screenshotMode'],
components: { SplatfestResultsBox, SplatfestWinnerBar },
props: ['festival', 'results', 'now', 'screenshotMode', 'historyMode'],
filters: {
resultsIn(time) {
return Vue.i18n.translate('splatfest.results_in', { time });
@@ -91,6 +95,11 @@ export default {
return 'active';
return 'past';
},
dateOptions() {
if (this.historyMode)
return { year: 'numeric' };
return { weekday: 'short' };
},
title() {
if (this.state == 'upcoming')
return this.$t('splatfest.upcoming');
@@ -108,15 +117,6 @@ export default {
bravo: this.$t(`splatnet.festivals.${this.festival.festival_id}.names.bravo_short`, this.festival.names.bravo_short),
};
},
teamWins() {
if (!this.results)
return;
let winner = this.results.summary.total ? 'bravo' : 'alpha';
let team = `<span style="color: ${this.festival.colors[winner].css_rgb}">${this.teamNames[winner]}</span>`;
return this.$t('splatfest.team_name_wins', { team });
},
},
}
</script>

92
src/js/components/splatoon/SplatfestHistoryDialog.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box">
<div class="modal-card">
<div class="modal-card-head">
<div class="level">
<div class="level-left">
<h3 class="title is-3 font-splatoon1 text-shadow">{{ $t('splatfest.previous') }}</h3>
</div>
<div class="level-right">
<Dropdown
:options="regions"
v-model="region"
style="margin: 0 -12px" class="font-splatoon2 is-right-tablet"
/>
</div>
</div>
</div>
<div class="modal-card-body">
<div v-for="(info, index) in festivals" class="splatfest-history-row" :key="info.festival.festival_id">
<div class="level">
<div class="level-item">
<div class="splatfest" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
<div class="hook-box">
<SplatfestBox
:festival="info.festival"
:now="now"
:historyMode="true"
/>
</div>
</div>
</div>
<div class="level-item">
<div class="splatfest-results-container">
<SplatfestResultsBox
v-if="info.results"
:festival="info.festival"
:results="info.results"
:historyMode="true"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</Modal>
</template>
<script>
import analytics from '@/js/analytics';
import regions from '@/js/regions';
import Modal from '@/js/components/Modal.vue';
import Dropdown from '@/js/components/Dropdown.vue';
import SplatfestBox from './SplatfestBox.vue';
import SplatfestResultsBox from './SplatfestResultsBox.vue';
export default {
components: { Modal, Dropdown, SplatfestBox, SplatfestResultsBox },
props: ['allFestivals', 'now', 'initialRegion'],
data() {
return {
region: 'na',
};
},
computed: {
regions() {
return regions.splatoonRegions.filter(({ key }) => key).map(({ key }) => {
let name = (key) ? this.$t(`regions.${key}.name`) : this.$t('regions.global.name');
return { key, name };
});
},
festivals() {
let data = this.allFestivals[this.region];
return data.festivals.map(festival => {
let results = data.results.find(r => r.festival_id == festival.festival_id);
return { festival, results };
});
},
},
created() {
if (this.initialRegion)
this.region = this.initialRegion;
},
mounted() {
analytics.event('Splatfest History', 'Open');
},
}
</script>

9
src/js/components/splatoon/SplatfestResultsBox.vue
View File

@@ -27,14 +27,19 @@
<SplatfestResultsRow :festival="festival" :results="results" type="vote" />
<SplatfestResultsRow :festival="festival" :results="results" type="solo" />
<SplatfestResultsRow :festival="festival" :results="results" type="team" />
<div class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;" v-if="historyMode">
<SplatfestWinnerBar :festival="festival" :results="results" />
</div>
</div>
</template>
<script>
import SplatfestResultsRow from './SplatfestResultsRow.vue';
import SplatfestWinnerBar from './SplatfestWinnerBar.vue';
export default {
components: { SplatfestResultsRow },
props: ['festival', 'results'],
components: { SplatfestResultsRow, SplatfestWinnerBar },
props: ['festival', 'results', 'historyMode'],
}
</script>

28
src/js/components/splatoon/SplatfestWinnerBar.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="festival-period" style="background-color: #333" v-html="teamWins"></div>
</template>
<script>
export default {
props: ['festival', 'results'],
computed: {
teamNames() {
return {
alpha: this.$t(`splatnet.festivals.${this.festival.festival_id}.names.alpha_short`, this.festival.names.alpha_short),
bravo: this.$t(`splatnet.festivals.${this.festival.festival_id}.names.bravo_short`, this.festival.names.bravo_short),
};
},
teamWins() {
if (!this.festival || !this.results)
return;
console.log(this.festival,this.results)
let winner = this.results.summary.total ? 'bravo' : 'alpha';
let team = `<span style="color: ${this.festival.colors[winner].css_rgb}">${this.teamNames[winner]}</span>`;
return this.$t('splatfest.team_name_wins', { team });
},
},
}
</script>

10
src/js/components/splatoon/Stage.vue
View File

@@ -3,8 +3,8 @@
<figure class="image is-16by9"></figure>
<span class="stage-title" v-if="showTitle">{{ name }}</span>
<Modal v-if="isOpen" @close="isOpen = false">
<div class="modal-content tilt-right-slight is-wide">
<Modal v-if="isOpen" @close="isOpen = false" class="is-xwide">
<div class="modal-content tilt-right-slight">
<p class="image is-16by9" @click="isOpen = false">
<img :src="largeImage" />
</p>
@@ -18,12 +18,6 @@
</div>
</template>
<style>
.modal-content.is-wide {
width: 1200px;
}
</style>
<script>
import Vue from 'vue';
import Modal from '@/js/components/Modal.vue';

3
src/locale/de.json
View File

@@ -33,7 +33,8 @@
"team": "Team",
"%": " %"
},
"team_name_wins": "Team {team} hat gewonnen!"
"team_name_wins": "Team {team} hat gewonnen!",
"previous": "Bisherige Splatfeste"
},
"splatnet_gear": {
"button": "TentaWorld",

3
src/locale/en.json
View File

@@ -33,7 +33,8 @@
"team": "Team",
"%": "%"
},
"team_name_wins": "Team {team} wins!"
"team_name_wins": "Team {team} wins!",
"previous": "Previous Splatfests"
},
"splatnet_gear": {
"button": "SplatNet Gear",

3
src/locale/es-MX.json
View File

@@ -33,7 +33,8 @@
"team": "En equipo",
"%": " %"
},
"team_name_wins": "¡Gana el Equipo {team}!"
"team_name_wins": "¡Gana el Equipo {team}!",
"previous": "Festivales"
},
"splatnet_gear": {
"button": "Tienda SplatNet",

3
src/locale/es.json
View File

@@ -33,7 +33,8 @@
"team": "En equipo",
"%": " %"
},
"team_name_wins": "¡Gana el equipo {team}!"
"team_name_wins": "¡Gana el equipo {team}!",
"previous": "Festivales anteriores"
},
"splatnet_gear": {
"button": "Tentatienda",

3
src/locale/fr-CA.json
View File

@@ -33,7 +33,8 @@
"team": "Équipes",
"%": " %"
},
"team_name_wins": "Victoire de l'équipe {team}!"
"team_name_wins": "Victoire de l'équipe {team}!",
"previous": "Festivals terminés"
},
"splatnet_gear": {
"button": "Boutique SplatNet",

3
src/locale/fr.json
View File

@@ -33,7 +33,8 @@
"team": "Équipes",
"%": " %"
},
"team_name_wins": "Victoire de l'équipe {team} !"
"team_name_wins": "Victoire de l'équipe {team} !",
"previous": "Festivals terminés"
},
"splatnet_gear": {
"button": "Céphalochic",

3
src/locale/it.json
View File

@@ -33,7 +33,8 @@
"team": "In squadra",
"%": "%"
},
"team_name_wins": "Vince la squadra {team}!"
"team_name_wins": "Vince la squadra {team}!",
"previous": "Festival terminati"
},
"splatnet_gear": {
"button": "Calama-zone",

3
src/locale/ja.json
View File

@@ -33,7 +33,8 @@
"team": "チーム",
"%": "%"
},
"team_name_wins": "{team}チームの勝利！"
"team_name_wins": "{team}チームの勝利！",
"previous": "これまでのフェス"
},
"splatnet_gear": {
"button": "ゲソタウン",

3
src/locale/nl.json
View File

@@ -33,7 +33,8 @@
"team": "Team",
"%": "%"
},
"team_name_wins": "Overwinning voor team {team}!"
"team_name_wins": "Overwinning voor team {team}!",
"previous": "Vorige Splatfests"
},
"splatnet_gear": {
"button": "Tentashop",

3
src/locale/ru.json
View File

@@ -33,7 +33,8 @@
"team": "«Команда»",
"%": "%"
},
"team_name_wins": "Победа — {team}!"
"team_name_wins": "Победа — {team}!",
"previous": "История"
},
"splatnet_gear": {
"button": "«Щупозон»",