mirror of
https://github.com/misenhower/splatoon2.ink.git
synced 2026-09-29 20:56:35 -05:00
Add Splatfest results box
Styling on this still needs to be improved a bit.
This commit is contained in:
Unknown
@@ -9,6 +9,7 @@ $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);
|
||||
$bg-mask-ink-splat: url(../img/bg-mask-ink-splat.svg);
|
||||
|
||||
// Colors
|
||||
$bg-battle-regular: #19d719;
|
||||
@@ -80,3 +81,10 @@ $bg-battle-league: #f02d7d;
|
||||
mask-size: 100% 100%;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
.bg-mask-ink-splat {
|
||||
mask-image: $bg-mask-ink-splat;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
@@ -221,20 +221,61 @@ body.has-modal #main {
|
||||
.panel-container {
|
||||
position: relative;
|
||||
|
||||
.alpha, .bravo {
|
||||
@extend .font-splatoon1;
|
||||
@extend .title-color;
|
||||
@extend .is-size-5;
|
||||
.labels {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
position: absolute;
|
||||
bottom: 0.25rem;
|
||||
}
|
||||
top: 25px;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
|
||||
.alpha {
|
||||
left: 0.25rem;
|
||||
}
|
||||
background: rgba($white-ter, 0.75);
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
|
||||
.bravo {
|
||||
right: 0.25rem;
|
||||
.result {
|
||||
background: rgba($black-ter, 0.65);
|
||||
border-radius: 200px;
|
||||
|
||||
margin: 10px 0 0 0;
|
||||
|
||||
.level-item {
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
|
||||
.winner-mark {
|
||||
@extend .bg-mask-ink-splat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 0;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
1
src/img/bg-mask-ink-splat.svg
Normal file
1
src/img/bg-mask-ink-splat.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.9 206.23"><title>ink_1</title><g><path d="M54.45 28.76c8.91-5.77 1.43-20.47-7.89-14-3.68 2.59-5.38 7.46-2.56 11.24 2.26 3 7 5 10.45 2.76zM219.23 96.92c-6.19 7.33 6.76 14.87 10.13 7.36 2.72-6.1-5.36-13.05-10.13-7.36zM49 6.6c4-1 3.23-7.32-1-6.53s-2.94 7.51 1 6.53zM66.13 14.91c6-1.49 4.72-11.11-1.72-9.72-6.03 1.29-4.12 11.16 1.72 9.72zM213.57 150.85c-3.18-1.82-6.75.24-8 3.53-2.69 7 8.33 12.08 11.34 5.37 1.69-3.83.09-6.96-3.34-8.9zM213.43 167.56c-4.6-1.87-7.57 5.61-3.06 7.1s7.77-5.19 3.06-7.1zM9.28 88.17c-8.09-3.17-13.28 9.94-5.28 12.55s13.66-9.24 5.28-12.55zM44.23 182.31c-3.41-1-5.75.95-6.8 3.41a4.54 4.54 0 0 0 2.57 6.28 5 5 0 0 0 6.83-2.58c.85-2 .82-6.15-2.6-7.11zM173.22 145.76c4.22-3.84 6.77-6.78 8.11-14.45 1.23-7 11.23-4 13.54-2.1a21.15 21.15 0 0 0 14.13 4.69c4.12-.31 7.65-3.11 8-6.73.49-5-4.63-8.65-9-9.75-4.56-1.14-9.84.37-14.78.2-4.29-.15-8.92-2.09-8.35-9.32.21-2.59 3.27-5.89 7.8-5.09 9.77 1.71 13.33-1.86 12.5-6s-4.93-6.13-12.67-2.81c-4.54 2-8.65-.08-9.76-1.9-3-4.83-2.43-7.33-.55-9.91a13.69 13.69 0 0 1 10.06-5.59c8.57-.44 12.09-1.48 16-7 4.53-6.42.53-14.25-6.77-15.85-6.44-1.41-12.33 1.78-16.3 6.64-3.42 4.18-11 13.14-21.63 4.94-12.15-9.4 8.52-23.68 12.29-29.42 8.56-13-4.16-27.92-18.37-20.74-6.71 3.43-8.2 10.55-9.14 17.43-.75 5.43.67 12.47-4.72 15.29-8 4.2-27 .54-28-8.08-.78-6.55 1.28-10.86 2.6-17 1.46-6.81-.48-13.68-8-15.48a12.25 12.25 0 0 0-14.55 8.21c-3 9.84 14.76 28.69 1.37 34.3-3.77 1.58-8 1.51-10.14-.36-3.54-3.14-4.66-5.64-4.64-8.84 0-4.71-5.09-6.87-7.89-5.93-3.7 1.24-6.66 5.73-1.85 10.75 3.17 3.3 5.34 5.28 5.35 9.1 0 6.91-3.46 8.35-5.52 9-11.04 3.04-15.48-16.36-21.34-22.12-7.84-7.66-20.87-4.72-23.86 6.06-3.75 13.53 8.65 23.45 20.15 25.15 7.13 1.06 11.08 5.06 9.93 11.1-1 5.38-6.84 8.52-13 4s-13.34-4.53-15.22 1.13 4.66 10.5 12.32 9.31c6.37-1 11.75 1.73 11 8-.59 5-3.83 7.41-10.36 6.42s-12.43-5.66-20.21-3.1a9.73 9.73 0 0 0-5 15.23c4.57 6.42 13.59 5.62 20.46 3.25 4.09-1.41 11.41-5.56 16.42-1 4.52 4.14.76 14.64-3.76 18.87-4.34 4.07-15.06 4-17.05 10.42a8.57 8.57 0 0 0 6.46 11.07c6.86.84 8.57-4.64 11.73-10 2.3-3.87 9-9.15 13.77-1.93 2.07 3.16 4 11.84 10.49 12.75 9.84 1.37 11.63 9.69 7.66 14.45-3.39 4.08-6.53 8.62-6.51 13.89a9.11 9.11 0 0 0 8.66 9.19c6.06.29 9.52-4.88 9.33-10.1-.17-4.52-1.21-10.9 1.23-15.09 3.16-5.44 17.91-4.31 17 4-.41 3.68 1.12 7.49 6.11 7.43 3.27 0 6.19-3.49 5-9-.71-3.25 1.57-5.47 4.41-7.09s7.94-.93 9.43-.21c11.91 5.77 1.3 16.87 10.63 24.87a9.75 9.75 0 0 0 10.18 1.23c2.85-1.51 4.24-3.73 4-7.55-.36-6.66-6.31-8-9.1-14.82-2.47-6.06-2.65-12.27 4.27-15.28 7.16-3.11 12.79 3.7 15.09 7.92 2.16 4 4.33 6.17 9.23 7.08 7.06 1.31 10.94-7.21 5.65-12.09s-7.59-4.36-12.33-7.22c-3.69-2.13-7.01-9.85-1.99-14.42z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -83,7 +83,7 @@
|
||||
<div class="column" v-if="selectedFestival && !isSelectedFestivalActive">
|
||||
<div class="splatfest tilt-right" style="margin-top: 40px">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="selectedFestival" :now="now"></SplatfestBox>
|
||||
<SplatfestBox :festival="selectedFestival" :results="selectedFestivalResults" :now="now"></SplatfestBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -213,15 +213,17 @@ export default {
|
||||
showFestivalRegionDropdown() {
|
||||
if (this.festivals)
|
||||
return Object.values(this.festivals).some(arr => arr.length > 0);
|
||||
// return this.festivals.na.length > 0 || this.festivals.eu.length > 0 || this.festivals.jp.length > 0;
|
||||
},
|
||||
selectedFestival() {
|
||||
if (this.festivals && this.selectedRegionKey)
|
||||
return this.festivals[this.selectedRegionKey][0];
|
||||
},
|
||||
selectedFestivalResults() {
|
||||
if (this.selectedFestival)
|
||||
return this.splatnet.festivals[this.selectedRegionKey].results.find(r => r.festival_id == this.selectedFestival.festival_id);
|
||||
},
|
||||
isSelectedFestivalActive() {
|
||||
return this.selectedFestival && this.selectedFestival.times.start <= this.now;
|
||||
// return this.festival && this.festival.times.start <= this.now && this.festival.times.end > this.now;
|
||||
return this.selectedFestival && this.selectedFestival.times.start <= this.now && this.selectedFestival.times.end > this.now;
|
||||
},
|
||||
|
||||
// Salmon Run
|
||||
@@ -333,7 +335,10 @@ export default {
|
||||
return item.end_time > this.now;
|
||||
},
|
||||
filterFestivals(item) {
|
||||
return item.times.end > this.now;
|
||||
// We want to show future/current festivals and festivals that ended recently (so we can show their results)
|
||||
// Filter based on the result time and show festival results for 2 days
|
||||
let cutoff = item.times.result + 172800; // 2 days
|
||||
return cutoff > this.now;
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -10,12 +10,18 @@
|
||||
<div class="image">
|
||||
<img :src="image" />
|
||||
</div>
|
||||
<div class="alpha">
|
||||
{{ festival.names.alpha_short }}
|
||||
</div>
|
||||
<div class="bravo">
|
||||
{{ festival.names.bravo_short }}
|
||||
|
||||
<div class="labels">
|
||||
<div class="alpha">
|
||||
{{ festival.names.alpha_short }}
|
||||
</div>
|
||||
|
||||
<div class="bravo">
|
||||
{{ festival.names.bravo_short }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SplatfestResultsBox :festival="festival" :results="results" v-if="results && !screenshotMode" />
|
||||
</div>
|
||||
|
||||
<div class="has-text-centered is-size-5 title-color festival-period-container" v-if="!screenshotMode">
|
||||
@@ -29,13 +35,19 @@
|
||||
</div>
|
||||
|
||||
<div class="splatfest-content has-text-centered" v-if="!screenshotMode">
|
||||
<template v-if="festival.times.start <= now">
|
||||
<template v-if="state == 'upcoming'">
|
||||
in
|
||||
{{ festival.times.start - now | duration }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="state == 'active'">
|
||||
{{ festival.times.end - now | duration }}
|
||||
remaining
|
||||
</template>
|
||||
<template v-else>
|
||||
in
|
||||
{{ festival.times.start - now | duration }}
|
||||
|
||||
<template v-else-if="state == 'past' && !results && festival.times.result > now">
|
||||
results in
|
||||
{{ festival.times.result - now | duration }}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -49,19 +61,30 @@
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import SplatfestResultsBox from './SplatfestResultsBox.vue';
|
||||
|
||||
export default {
|
||||
props: ['festival', 'now', 'screenshotMode'],
|
||||
components: { SplatfestResultsBox },
|
||||
props: ['festival', 'results', 'now', 'screenshotMode'],
|
||||
computed: {
|
||||
title() {
|
||||
state() {
|
||||
if (this.festival.times.start > this.now)
|
||||
return 'Upcoming Splatfest';
|
||||
return 'Splatfest';
|
||||
return 'upcoming';
|
||||
if (this.festival.times.end > this.now)
|
||||
return 'active';
|
||||
return 'past';
|
||||
},
|
||||
title() {
|
||||
switch (this.state) {
|
||||
case 'upcoming': return 'Upcoming Splatfest';
|
||||
case 'active': return 'Splatfest';
|
||||
case 'past': return 'Recent Splatfest';
|
||||
}
|
||||
},
|
||||
image() {
|
||||
if (this.festival)
|
||||
return Vue.filter('localSplatNetImageUrl')(this.festival.images.panel);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
36
src/js/components/splatoon/SplatfestResultsBox.vue
Normal file
36
src/js/components/splatoon/SplatfestResultsBox.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="results">
|
||||
|
||||
|
||||
<div class="level is-marginless">
|
||||
<div class="level-item">
|
||||
<div class="image is-48x48" :title="festival.names.alpha_short">
|
||||
<img :src="festival.images.alpha | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<div class="title is-4 font-splatoon1 has-text-centered is-marginless">Results</div>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<div class="image is-48x48" :title="festival.names.bravo_short">
|
||||
<img :src="festival.images.bravo | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SplatfestResultsRow title="Votes" :festival="festival" :rates="results.rates.vote" />
|
||||
<SplatfestResultsRow title="Solo" :festival="festival" :rates="results.rates.solo" />
|
||||
<SplatfestResultsRow title="Team" :festival="festival" :rates="results.rates.team" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SplatfestResultsRow from './SplatfestResultsRow.vue';
|
||||
|
||||
export default {
|
||||
components: { SplatfestResultsRow },
|
||||
props: ['festival', 'results'],
|
||||
}
|
||||
</script>
|
||||
31
src/js/components/splatoon/SplatfestResultsRow.vue
Normal file
31
src/js/components/splatoon/SplatfestResultsRow.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="level result">
|
||||
<div class="level-item">
|
||||
<div class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" v-if="winner == 'alpha'"></div>
|
||||
<div class="font-splatoon1 title is-4">{{ rates.alpha }}%</div>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<div class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" v-if="winner == 'bravo'"></div>
|
||||
<div class="font-splatoon1 title is-4">{{ rates.bravo }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['festival', 'rates', 'title'],
|
||||
computed: {
|
||||
winner() {
|
||||
return (this.rates.alpha > this.rates.bravo) ? 'alpha' : 'bravo';
|
||||
},
|
||||
alphaStyle() {
|
||||
return { background: this.festival.colors.alpha };
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user