mirror of
https://github.com/misenhower/splatoon2.ink.git
synced 2026-09-29 20:56:35 -05:00
Preserve original Vue component formatting
This commit is contained in:
Matt Isenhower
@@ -28,10 +28,16 @@ export default [
|
||||
'object-curly-spacing': ['warn', 'always'],
|
||||
|
||||
// Vue
|
||||
// Preserve this site's existing template layout instead of reformatting it on lint.
|
||||
'vue/html-indent': ['warn', 4],
|
||||
'vue/attributes-order': 'off',
|
||||
'vue/max-attributes-per-line': 'off',
|
||||
'vue/html-self-closing': 'off',
|
||||
'vue/singleline-html-element-content-newline': 'off',
|
||||
'vue/multiline-html-element-content-newline': 'off',
|
||||
'vue/block-order': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/require-default-prop': 'off',
|
||||
'vue/max-attributes-per-line': ['warn', { singleline: { max: 4 } }],
|
||||
'vue/html-self-closing': ['warn', { html: { void: 'always' } }],
|
||||
'vue/no-deprecated-filter': 'off',
|
||||
'vue/require-toggle-inside-transition': 'off',
|
||||
'vue/no-deprecated-destroyed-lifecycle': 'off',
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<div class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<!-- 404! -->
|
||||
<div class="error404 tilt-left">
|
||||
<div class="hook-box">
|
||||
<div class="box-header">
|
||||
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
|
||||
404 Not Found
|
||||
</h2>
|
||||
</div>
|
||||
<div class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<!-- 404! -->
|
||||
<div class="error404 tilt-left">
|
||||
<div class="hook-box">
|
||||
<div class="box-header">
|
||||
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
|
||||
404 Not Found
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<img src="~@/web/assets/img/404.jpg" />
|
||||
<img src="~@/web/assets/img/404.jpg" />
|
||||
|
||||
<div class="box-footer">
|
||||
<p class="has-text-centered">
|
||||
<router-link to="/" class="button is-translucent is-rounded">
|
||||
<span class="icon squid-icon-tilt">
|
||||
<span class="fa squid-squid" />
|
||||
</span>
|
||||
<span class="font-splatoon2">
|
||||
Return to Splatoon2.ink
|
||||
</span>
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<p class="has-text-centered">
|
||||
<router-link to="/" class="button is-translucent is-rounded">
|
||||
<span class="icon squid-icon-tilt">
|
||||
<span class="fa squid-squid"></span>
|
||||
</span>
|
||||
<span class="font-splatoon2">
|
||||
Return to Splatoon2.ink
|
||||
</span>
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,60 +1,52 @@
|
||||
<template>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content tilt-left-slight">
|
||||
<div class="about-box">
|
||||
<div class="hook-box">
|
||||
<div class="content">
|
||||
<h3 class="font-splatoon2 title is-3">
|
||||
<div class="image is-pulled-right hero-image is-hidden-touch">
|
||||
<img src="~@/web/assets/img/hero-char.png" />
|
||||
</div>
|
||||
Hello!
|
||||
</h3>
|
||||
<div class="inner-content">
|
||||
<p>
|
||||
Splatoon2.ink shows the current and upcoming map schedules for Splatoon 2.
|
||||
</p>
|
||||
<p>
|
||||
This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
|
||||
and <a href="http://bulma.io/" target="_blank">Bulma</a>.
|
||||
Data comes from the SplatNet 2 API and other manually-maintained sources.
|
||||
</p>
|
||||
<p>
|
||||
Original SplatNet gear ability/price data comes from
|
||||
<a href="https://splatoonwiki.org/wiki/Gear#In_Splatoon_2" target="_blank">Inkipedia</a>.
|
||||
</p>
|
||||
<p>
|
||||
Regional flag icons are from
|
||||
<a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>.
|
||||
</p>
|
||||
<p>
|
||||
Source code for this site is available on
|
||||
<a href="https://github.com/misenhower/splatoon2.ink" target="_blank">GitHub</a>.
|
||||
</p>
|
||||
<p>
|
||||
If you'd like to use this site's data in your own site/bot/app, please review the data access policy
|
||||
<a href="https://github.com/misenhower/splatoon2.ink/wiki/Data-access-policy" target="_blank">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
|
||||
or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
|
||||
</p>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content tilt-left-slight">
|
||||
<div class="about-box">
|
||||
<div class="hook-box">
|
||||
<div class="content">
|
||||
<h3 class="font-splatoon2 title is-3">
|
||||
<div class="image is-pulled-right hero-image is-hidden-touch">
|
||||
<img src="~@/web/assets/img/hero-char.png" />
|
||||
</div>
|
||||
Hello!
|
||||
</h3>
|
||||
<div class="inner-content">
|
||||
<p>
|
||||
Splatoon2.ink shows the current and upcoming map schedules for Splatoon 2.
|
||||
</p>
|
||||
<p>
|
||||
This site was built with <a href="https://vuejs.org/" target="_blank">Vue.js</a>
|
||||
and <a href="http://bulma.io/" target="_blank">Bulma</a>.
|
||||
Data comes from the SplatNet 2 API and other manually-maintained sources.
|
||||
</p>
|
||||
<p>
|
||||
Original SplatNet gear ability/price data comes from
|
||||
<a href="https://splatoonwiki.org/wiki/Gear#In_Splatoon_2" target="_blank">Inkipedia</a>.
|
||||
</p>
|
||||
<p>
|
||||
Regional flag icons are from
|
||||
<a href="https://twemoji.twitter.com/" target="_blank">Twemoji</a>.
|
||||
</p>
|
||||
<p>
|
||||
Source code for this site is available on
|
||||
<a href="https://github.com/misenhower/splatoon2.ink" target="_blank">GitHub</a>.
|
||||
</p>
|
||||
<p>
|
||||
If you'd like to use this site's data in your own site/bot/app, please review the data access policy
|
||||
<a href="https://github.com/misenhower/splatoon2.ink/wiki/Data-access-policy" target="_blank">here</a>.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/mattisenhower" target="_blank">Follow me on Twitter</a>
|
||||
or <a href="mailto:matt@isenhower.com" target="_blank">email me</a> with any questions!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
export default {
|
||||
components: { Modal },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-content {
|
||||
max-height: 100vh;
|
||||
@@ -69,3 +61,11 @@ export default {
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
export default {
|
||||
components: { Modal },
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,68 +1,59 @@
|
||||
<template>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content tilt-left-slight">
|
||||
<div class="calendar-box">
|
||||
<div class="hook-box">
|
||||
<div class="content">
|
||||
<h3 class="font-splatoon2 title is-3">
|
||||
<div class="image is-pulled-right hero-image is-hidden-touch">
|
||||
<img src="~@/web/assets/img/hero-char-2.png" />
|
||||
</div>
|
||||
Calendar Feeds
|
||||
</h3>
|
||||
<div class="inner-content">
|
||||
<p>
|
||||
Add data from Splatoon2.ink to your calendar!
|
||||
</p>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content tilt-left-slight">
|
||||
<div class="calendar-box">
|
||||
<div class="hook-box">
|
||||
<div class="content">
|
||||
<h3 class="font-splatoon2 title is-3">
|
||||
<div class="image is-pulled-right hero-image is-hidden-touch">
|
||||
<img src="~@/web/assets/img/hero-char-2.png" />
|
||||
</div>
|
||||
Calendar Feeds
|
||||
</h3>
|
||||
<div class="inner-content">
|
||||
<p>
|
||||
Add data from Splatoon2.ink to your calendar!
|
||||
</p>
|
||||
|
||||
<h4 class="font-splatoon2 title is-4">
|
||||
Salmon Run
|
||||
</h4>
|
||||
<p>
|
||||
<CalendarLink
|
||||
title="Salmon Run Schedules"
|
||||
link="data/coop-schedules.ics"
|
||||
google-id="etra8dks4oo93ofli399hc9f3s1ia97o@import.calendar.google.com"
|
||||
/>
|
||||
</p>
|
||||
<h4 class="font-splatoon2 title is-4">
|
||||
Salmon Run
|
||||
</h4>
|
||||
<p>
|
||||
<CalendarLink
|
||||
title="Salmon Run Schedules"
|
||||
link="data/coop-schedules.ics"
|
||||
google-id="etra8dks4oo93ofli399hc9f3s1ia97o@import.calendar.google.com"
|
||||
/>
|
||||
</p>
|
||||
|
||||
<h4 class="font-splatoon2 title is-4">
|
||||
Splatfests
|
||||
</h4>
|
||||
<p>
|
||||
<CalendarLink
|
||||
:title="$t('regions.na.name')"
|
||||
link="data/festivals-na.ics"
|
||||
google-id="5k2jla6mq8nvuprmdbveruolc985hni2@import.calendar.google.com"
|
||||
/>
|
||||
<CalendarLink
|
||||
:title="$t('regions.eu.name')"
|
||||
link="data/festivals-eu.ics"
|
||||
google-id="bihts170jqmilbr1c7c0t52h6qloiutj@import.calendar.google.com"
|
||||
/>
|
||||
<CalendarLink
|
||||
:title="$t('regions.jp.name')"
|
||||
link="data/festivals-jp.ics"
|
||||
google-id="0ue3s3181oo0jakogio082vsa5nu3s99@import.calendar.google.com"
|
||||
/>
|
||||
</p>
|
||||
<h4 class="font-splatoon2 title is-4">
|
||||
Splatfests
|
||||
</h4>
|
||||
<p>
|
||||
<CalendarLink
|
||||
:title="$t('regions.na.name')"
|
||||
link="data/festivals-na.ics"
|
||||
google-id="5k2jla6mq8nvuprmdbveruolc985hni2@import.calendar.google.com"
|
||||
/>
|
||||
<CalendarLink
|
||||
:title="$t('regions.eu.name')"
|
||||
link="data/festivals-eu.ics"
|
||||
google-id="bihts170jqmilbr1c7c0t52h6qloiutj@import.calendar.google.com"
|
||||
/>
|
||||
<CalendarLink
|
||||
:title="$t('regions.jp.name')"
|
||||
link="data/festivals-jp.ics"
|
||||
google-id="0ue3s3181oo0jakogio082vsa5nu3s99@import.calendar.google.com"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.vue';
|
||||
import CalendarLink from './CalendarLink.vue';
|
||||
|
||||
export default {
|
||||
components: { Modal, CalendarLink },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-content {
|
||||
max-height: 100vh;
|
||||
@@ -77,3 +68,12 @@ export default {
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.vue';
|
||||
import CalendarLink from './CalendarLink.vue';
|
||||
|
||||
export default {
|
||||
components: { Modal, CalendarLink },
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,55 +1,27 @@
|
||||
<template>
|
||||
<div class="dropdown" :class="{ 'is-active': isOpen }">
|
||||
<div class="dropdown-trigger">
|
||||
<a
|
||||
v-click-outside="hide"
|
||||
:href="directLink"
|
||||
class="button is-link is-rounded"
|
||||
:class="{ 'tooltip is-tooltip-right is-tooltip-active': showTooltip }"
|
||||
data-tooltip="Copied!"
|
||||
@click.prevent="isOpen = !isOpen"
|
||||
>
|
||||
<span class="font-splatoon2">{{ title }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron bottom" />
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown" :class="{ 'is-active': isOpen }">
|
||||
<div class="dropdown-trigger">
|
||||
<a :href="directLink" class="button is-link is-rounded" :class="{ 'tooltip is-tooltip-right is-tooltip-active': showTooltip }" data-tooltip="Copied!" @click.prevent="isOpen = !isOpen" v-click-outside="hide">
|
||||
<span class="font-splatoon2">{{ title }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron bottom"></span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content font-splatoon2 has-text-left">
|
||||
<a :href="googleLink" target="_blank" class="dropdown-item" @touchstart.stop @touchend.stop>
|
||||
Google Calendar
|
||||
</a>
|
||||
<a :href="webcalLink" target="_blank" class="dropdown-item" @touchstart.stop @touchend.stop>
|
||||
Apple/Android/Outlook Calendar
|
||||
</a>
|
||||
<a :href="directLink" target="_blank" class="dropdown-item" @click.prevent.stop="hide" v-clipboard:copy="directLink" v-clipboard:success="onCopy" @touchstart.stop @touchend.stop>
|
||||
Copy ICS Link
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content font-splatoon2 has-text-left">
|
||||
<a
|
||||
:href="googleLink"
|
||||
target="_blank"
|
||||
class="dropdown-item"
|
||||
@touchstart.stop
|
||||
@touchend.stop
|
||||
>
|
||||
Google Calendar
|
||||
</a>
|
||||
<a
|
||||
:href="webcalLink"
|
||||
target="_blank"
|
||||
class="dropdown-item"
|
||||
@touchstart.stop
|
||||
@touchend.stop
|
||||
>
|
||||
Apple/Android/Outlook Calendar
|
||||
</a>
|
||||
<a
|
||||
v-clipboard:copy="directLink"
|
||||
v-clipboard:success="onCopy"
|
||||
:href="directLink"
|
||||
target="_blank"
|
||||
class="dropdown-item"
|
||||
@click.prevent.stop="hide"
|
||||
@touchstart.stop
|
||||
@touchend.stop
|
||||
>
|
||||
Copy ICS Link
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,36 +1,27 @@
|
||||
<template>
|
||||
<div class="dropdown" :class="{ 'is-active': isOpen }">
|
||||
<div class="dropdown-trigger">
|
||||
<button v-if="tag == 'button'" v-click-outside="hide" class="button is-clear font-splatoon2" @click="isOpen = !isOpen">
|
||||
<span v-if="selectedOption">{{ selectedOption.name }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron bottom" />
|
||||
</span>
|
||||
</button>
|
||||
<a v-if="tag == 'a'" v-click-outside="hide" @click="isOpen = !isOpen">
|
||||
<span v-if="selectedOption">{{ selectedOption.name }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron top" />
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown" :class="{ 'is-active': isOpen }">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-clear font-splatoon2" @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'button'">
|
||||
<span v-if="selectedOption">{{ selectedOption.name }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron bottom"></span>
|
||||
</span>
|
||||
</button>
|
||||
<a @click="isOpen = !isOpen" v-click-outside="hide" v-if="tag == 'a'">
|
||||
<span v-if="selectedOption">{{ selectedOption.name }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron top"></span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content font-splatoon2 has-text-left">
|
||||
<a href="#" class="dropdown-item" v-for="option in options" :key="option.key" :class="{ 'is-active': option.key == value }" @click.prevent="select(option)" @touchstart.stop @touchend.prevent="select(option)">
|
||||
{{ option.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content font-splatoon2 has-text-left">
|
||||
<a
|
||||
v-for="option in options"
|
||||
:key="option.key"
|
||||
href="#"
|
||||
class="dropdown-item"
|
||||
:class="{ 'is-active': option.key == value }"
|
||||
@click.prevent="select(option)"
|
||||
@touchstart.stop
|
||||
@touchend.prevent="select(option)"
|
||||
>
|
||||
{{ option.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="dropdown" :class="{ 'is-active': isActive }">
|
||||
<div class="dropdown-trigger">
|
||||
<a v-click-outside="hide" :class="triggerClass" @click="isActive = !isActive">
|
||||
<slot name="trigger">
|
||||
<span>{{ label }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron bottom" />
|
||||
</span>
|
||||
</slot>
|
||||
</a>
|
||||
<div class="dropdown" :class="{ 'is-active': isActive }">
|
||||
<div class="dropdown-trigger">
|
||||
<a :class="triggerClass" @click="isActive = !isActive" v-click-outside="hide">
|
||||
<slot name="trigger">
|
||||
<span>{{ label }}</span>
|
||||
<span class="icon is-small">
|
||||
<span class="chevron bottom"></span>
|
||||
</span>
|
||||
</slot>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,183 +1,182 @@
|
||||
<template>
|
||||
<div id="main" class="hero is-fullheight">
|
||||
<!-- Site header -->
|
||||
<div class="hero-head">
|
||||
<!-- <VoteBanner /> -->
|
||||
<div class="hero is-fullheight" id="main">
|
||||
|
||||
<div class="container is-fluid">
|
||||
<div class="level is-marginless">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<h1 class="title is-1 font-splatoon1 is-inline">
|
||||
Splatoon 2
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Site header -->
|
||||
<div class="hero-head">
|
||||
<!-- <VoteBanner /> -->
|
||||
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<h3 class="subtitle is-3 font-splatoon2 is-inline">
|
||||
{{ $t('ui.map_schedules') }}
|
||||
</h3>
|
||||
<div class="container is-fluid">
|
||||
<div class="level is-marginless">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<h1 class="title is-1 font-splatoon1 is-inline">Splatoon 2</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<h3 class="subtitle is-3 font-splatoon2 is-inline">{{ $t('ui.map_schedules') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a href="https://bsky.app/profile/splatoon2.ink" target="_blank" class="button is-translucent-dark is-rounded">
|
||||
<span class="font-splatoon2">{{ $t('ui.get_updates_via_bluesky') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<a href="https://splatoon3.ink" target="_blank" class="button is-translucent-dark is-rounded">
|
||||
<span class="font-splatoon2">Splatoon 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item" v-if="showFestivalRegionDropdown">
|
||||
<Dropdown :options="regions" v-model="selectedRegionKey" style="margin: 0 -12px" class="font-splatoon2 is-right-tablet" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="level-item" v-if="showFestivalRegionDropdown">
|
||||
<!-- Empty spacer to add some room when festivals are active -->
|
||||
</div>
|
||||
|
||||
<div class="level-item" v-if="hasMerchandises">
|
||||
<router-link to="/splatnet" class="button is-translucent-dark is-rounded">
|
||||
<span class="font-splatoon2">{{ $t('splatnet_gear.button') }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a href="https://bsky.app/profile/splatoon2.ink" target="_blank" class="button is-translucent-dark is-rounded">
|
||||
<span class="font-splatoon2">{{ $t('ui.get_updates_via_bluesky') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<a href="https://splatoon3.ink" target="_blank" class="button is-translucent-dark is-rounded">
|
||||
<span class="font-splatoon2">Splatoon 3</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div v-if="showFestivalRegionDropdown" class="level-item">
|
||||
<Dropdown v-model="selectedRegionKey" :options="regions" style="margin: 0 -12px" class="font-splatoon2 is-right-tablet" />
|
||||
</div>
|
||||
<!-- Main body area -->
|
||||
<div class="hero-body">
|
||||
<div class="container is-fluid">
|
||||
<!-- Loading spinner -->
|
||||
<div v-if="loading" class="has-text-centered">
|
||||
<span class="icon is-large">
|
||||
<span class="fa fa-3x fa-spin squid-refresh"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- Active Splatfest: Show the Splatfest box and the Splatfest Battle box -->
|
||||
<div v-if="selectedRegionHasActiveSplatfest" class="columns is-desktop limited-width">
|
||||
<div class="column">
|
||||
<div class="splatfest tilt-left">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="selectedRegionCurrentSplatfest" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box splatfest-schedule-box tilt-right" mode="regular" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showFestivalRegionDropdown" class="level-item">
|
||||
<!-- Empty spacer to add some room when festivals are active -->
|
||||
</div>
|
||||
<!-- No active Splatfest: Show the Regular, Ranked, and League Battle boxes -->
|
||||
<div v-else class="columns is-desktop">
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="league" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="hasMerchandises" class="level-item">
|
||||
<router-link to="/splatnet" class="button is-translucent-dark is-rounded">
|
||||
<span class="font-splatoon2">{{ $t('splatnet_gear.button') }}</span>
|
||||
</router-link>
|
||||
<!-- Upcoming Splatfest and Salmon Run boxes -->
|
||||
<div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
|
||||
<div class="column" v-if="showSplatfestOnBottomRow">
|
||||
<div class="splatfest tilt-right" style="margin-top: 40px">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="selectedRegionCurrentSplatfest" />
|
||||
</div>
|
||||
</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">
|
||||
<template v-if="shiftySchedule.stages.length === 1">
|
||||
Current Shifty Station
|
||||
</template>
|
||||
<template v-else>
|
||||
Current Shifty Stations
|
||||
</template>
|
||||
</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">
|
||||
<SalmonRunBox />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column" style="margin-top: 40px" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }" v-if="hasWeapons && showWeaponsNextToSalmonRun">
|
||||
<NewWeaponsContainer :max-weapons-per-row="3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px" :class="{ 'is-hidden-fullhd': bottomRowHasThreeColumns }" v-if="showExtraWeaponsAtBottom">
|
||||
<NewWeaponsContainer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="hero-foot has-text-centered has-text-grey is-size-7" style="margin-bottom: 0.5rem">
|
||||
<div class="container is-fluid">
|
||||
{{ $t('ui.disclaimer') }}
|
||||
–
|
||||
<router-link to="/about">{{ $t('ui.about') }}</router-link>
|
||||
–
|
||||
<a href="https://splatoon3.ink" target="_blank">Splatoon 3</a>
|
||||
<!-- – -->
|
||||
<!-- <router-link to="/finalfest">FinalFest</router-link> -->
|
||||
–
|
||||
<router-link to="/calendars">Calendar Feeds</router-link>
|
||||
–
|
||||
<a href="https://bsky.app/profile/splatoon2.ink" target="_blank">Bluesky</a>
|
||||
<template v-if="hasSplatfests">
|
||||
–
|
||||
<router-link to="/splatfests">{{ $t('splatfest.previous') }}</router-link>
|
||||
</template>
|
||||
–
|
||||
<Dropdown :options="languages" v-model="selectedLanguageKey" tag="a" class="is-right is-up" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-view @close="$router.push('/')" />
|
||||
</div>
|
||||
|
||||
<!-- Main body area -->
|
||||
<div class="hero-body">
|
||||
<div class="container is-fluid">
|
||||
<!-- Loading spinner -->
|
||||
<div v-if="loading" class="has-text-centered">
|
||||
<span class="icon is-large">
|
||||
<span class="fa fa-3x fa-spin squid-refresh" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<!-- Active Splatfest: Show the Splatfest box and the Splatfest Battle box -->
|
||||
<div v-if="selectedRegionHasActiveSplatfest" class="columns is-desktop limited-width">
|
||||
<div class="column">
|
||||
<div class="splatfest tilt-left">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="selectedRegionCurrentSplatfest" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box splatfest-schedule-box tilt-right" mode="regular" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No active Splatfest: Show the Regular, Ranked, and League Battle boxes -->
|
||||
<div v-else class="columns is-desktop">
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="league" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Splatfest and Salmon Run boxes -->
|
||||
<div class="columns is-desktop" :class="{'limited-width': !bottomRowHasThreeColumns}">
|
||||
<div v-if="showSplatfestOnBottomRow" class="column">
|
||||
<div class="splatfest tilt-right" style="margin-top: 40px">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="selectedRegionCurrentSplatfest" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="shiftySchedule" class="column">
|
||||
<div class="shifty-box font-splatoon2 tilt-right">
|
||||
<h3 class="title is-4 font-splatoon1 has-text-centered" style="margin-bottom: 0.5rem">
|
||||
<template v-if="shiftySchedule.stages.length === 1">
|
||||
Current Shifty Station
|
||||
</template>
|
||||
<template v-else>
|
||||
Current Shifty Stations
|
||||
</template>
|
||||
</h3>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
|
||||
</div>
|
||||
<div v-if="shiftySchedule.stages[1]" class="column">
|
||||
<Stage :stage="shiftySchedule.stages[1]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="hasSalmonRun" class="column">
|
||||
<div class="salmon-run tilt-left">
|
||||
<div class="hook-box">
|
||||
<SalmonRunBox />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="hasWeapons && showWeaponsNextToSalmonRun" class="column" style="margin-top: 40px" :class="{'is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only': bottomRowHasThreeColumns }">
|
||||
<NewWeaponsContainer :max-weapons-per-row="3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showExtraWeaponsAtBottom" style="margin-top: 40px" :class="{ 'is-hidden-fullhd': bottomRowHasThreeColumns }">
|
||||
<NewWeaponsContainer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="hero-foot has-text-centered has-text-grey is-size-7" style="margin-bottom: 0.5rem">
|
||||
<div class="container is-fluid">
|
||||
{{ $t('ui.disclaimer') }}
|
||||
–
|
||||
<router-link to="/about">
|
||||
{{ $t('ui.about') }}
|
||||
</router-link>
|
||||
–
|
||||
<a href="https://splatoon3.ink" target="_blank">Splatoon 3</a>
|
||||
<!-- – -->
|
||||
<!-- <router-link to="/finalfest">FinalFest</router-link> -->
|
||||
–
|
||||
<router-link to="/calendars">
|
||||
Calendar Feeds
|
||||
</router-link>
|
||||
–
|
||||
<a href="https://bsky.app/profile/splatoon2.ink" target="_blank">Bluesky</a>
|
||||
<template v-if="hasSplatfests">
|
||||
–
|
||||
<router-link to="/splatfests">
|
||||
{{ $t('splatfest.previous') }}
|
||||
</router-link>
|
||||
</template>
|
||||
–
|
||||
<Dropdown v-model="selectedLanguageKey" :options="languages" tag="a" class="is-right is-up" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-view @close="$router.push('/')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#main .limited-width {
|
||||
max-width: 1392px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex';
|
||||
import Dropdown from './Dropdown.vue';
|
||||
@@ -292,11 +291,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#main .limited-width {
|
||||
max-width: 1392px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,35 @@
|
||||
<template>
|
||||
<transition name="modal">
|
||||
<div v-portal class="modal is-active">
|
||||
<div class="modal-background" @click="close" />
|
||||
<slot />
|
||||
<button class="modal-close is-large" @click="close" />
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="modal">
|
||||
<div class="modal is-active" v-portal>
|
||||
<div class="modal-background" @click="close"></div>
|
||||
<slot></slot>
|
||||
<button class="modal-close is-large" @click="close"></button>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.modal-enter-active, .modal-leave-active {
|
||||
&, &>.modal-content, &>.modal-card {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-enter, .modal-leave-active {
|
||||
opacity: 0;
|
||||
|
||||
&>.modal-content, &>.modal-card {
|
||||
&.tilt-left-slight {
|
||||
transform: rotate(-1.0deg) scale(0.98);
|
||||
}
|
||||
&.tilt-right-slight {
|
||||
transform: rotate(1.0deg) scale(0.98);
|
||||
}
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// This tracks open modals in order to add/remove the "has-modal" class to the body
|
||||
|
||||
@@ -54,25 +76,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.modal-enter-active, .modal-leave-active {
|
||||
&, &>.modal-content, &>.modal-card {
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-enter, .modal-leave-active {
|
||||
opacity: 0;
|
||||
|
||||
&>.modal-content, &>.modal-card {
|
||||
&.tilt-left-slight {
|
||||
transform: rotate(-1.0deg) scale(0.98);
|
||||
}
|
||||
&.tilt-right-slight {
|
||||
transform: rotate(1.0deg) scale(0.98);
|
||||
}
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="screenshots">
|
||||
<router-view />
|
||||
</div>
|
||||
<div id="screenshots">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div v-if="shouldShow" class="bg-stripes" style="background-color: #f54910; margin-bottom: 5px">
|
||||
<div class="container is-fluid">
|
||||
<div style="width: 100%; display: flex; align-items: center">
|
||||
<div class="has-text-centered" style="flex: 1; margin: 10px">
|
||||
<div>
|
||||
🗳️
|
||||
<strong>VOTE 2020!</strong>
|
||||
Make your voice heard this year!
|
||||
<div class="bg-stripes" style="background-color: #f54910; margin-bottom: 5px" v-if="shouldShow">
|
||||
<div class="container is-fluid">
|
||||
<div style="width: 100%; display: flex; align-items: center">
|
||||
<div class="has-text-centered" style="flex: 1; margin: 10px">
|
||||
<div>
|
||||
🗳️
|
||||
<strong>VOTE 2020!</strong>
|
||||
Make your voice heard this year!
|
||||
|
||||
Check
|
||||
<a href="https://vote.gov" target="_blank" style="color: #fff; font-weight: bold">vote.gov</a>
|
||||
and
|
||||
<a href="https://vote.org" target="_blank" style="color: #fff; font-weight: bold">vote.org</a>
|
||||
to get information for your state.
|
||||
</div>
|
||||
Check
|
||||
<a href="https://vote.gov" target="_blank" style="color: #fff; font-weight: bold">vote.gov</a>
|
||||
and
|
||||
<a href="https://vote.org" target="_blank" style="color: #fff; font-weight: bold">vote.org</a>
|
||||
to get information for your state.
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 5px">
|
||||
<a class="delete" @click.prevent="hide"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 5px">
|
||||
<a class="delete" @click.prevent="hide" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
<template>
|
||||
<div class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<div v-if="latestSchedule">
|
||||
<strong>
|
||||
<router-link :to="`/schedules/${latestSchedule.start_time}`">
|
||||
Map Schedules
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
<div class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<div v-if="latestSchedule">
|
||||
<strong>
|
||||
<router-link :to="`/schedules/${latestSchedule.start_time}`">
|
||||
Map Schedules
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<div v-if="latestGear">
|
||||
<strong>
|
||||
<router-link :to="`/splatNetGear/${latestGearTime}`">
|
||||
SplatNet Gear
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
<div v-if="latestGear">
|
||||
<strong>
|
||||
<router-link :to="`/splatNetGear/${latestGearTime}`">
|
||||
SplatNet Gear
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<div v-if="latestSalmonRun">
|
||||
<strong>
|
||||
<router-link :to="`/salmonRun/${latestSalmonRun.start_time}`">
|
||||
Salmon Run
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
<div v-if="latestSalmonRun">
|
||||
<strong>
|
||||
<router-link :to="`/salmonRun/${latestSalmonRun.start_time}`">
|
||||
Salmon Run
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<div v-if="salmonRunGear">
|
||||
<strong>
|
||||
<router-link :to="`/salmonRunGear/${salmonRunGear.available_time}`">
|
||||
Salmon Run Gear
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
<div v-if="salmonRunGear">
|
||||
<strong>
|
||||
<router-link :to="`/salmonRunGear/${salmonRunGear.available_time}`">
|
||||
Salmon Run Gear
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<div v-if="newWeaponAvailability">
|
||||
<strong>
|
||||
<router-link :to="`/newWeapon/${newWeaponAvailability.release_time}`">
|
||||
New Weapon
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
<div v-if="newWeaponAvailability">
|
||||
<strong>
|
||||
<router-link :to="`/newWeapon/${newWeaponAvailability.release_time}`">
|
||||
New Weapon
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
|
||||
<div v-if="splatfests">
|
||||
Splatfest:
|
||||
<strong>
|
||||
<router-link
|
||||
v-for="splatfest in splatfests"
|
||||
:key="splatfest.region"
|
||||
:to="`/splatfest/${splatfest.region}/${splatfest.time}`"
|
||||
>
|
||||
{{ splatfest.region }}
|
||||
</router-link>
|
||||
</strong>
|
||||
<div v-if="splatfests">
|
||||
Splatfest:
|
||||
<strong>
|
||||
<router-link
|
||||
v-for="splatfest in splatfests"
|
||||
:key="splatfest.region"
|
||||
:to="`/splatfest/${splatfest.region}/${splatfest.time}`"
|
||||
>
|
||||
{{ splatfest.region }}
|
||||
</router-link>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,69 +1,65 @@
|
||||
<template>
|
||||
<div id="main" class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero is-fullheight" id="main">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="image is-32x32">
|
||||
<img src="~@/web/assets/img/favicon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<h1 class="title is-4 font-splatoon2">
|
||||
{{ title }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="font-splatoon2 is-size-7 has-text-grey-light">
|
||||
<div class="image is-16x16 bluesky-logo">
|
||||
<img src="~@/web/assets/img/bluesky-white.svg" />
|
||||
</div>
|
||||
@splatoon2.ink
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="level-item"> </div>
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="image is-32x32">
|
||||
<img src="~@/web/assets/img/favicon.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<h1 class="title is-4 font-splatoon2">{{ title }}</h1>
|
||||
</div>
|
||||
<div class="level-item"> </div>
|
||||
<div class="level-item">
|
||||
<div class="font-splatoon2 is-size-7 has-text-grey-light">
|
||||
<div class="image is-16x16 bluesky-logo">
|
||||
<img src="~@/web/assets/img/bluesky-white.svg" />
|
||||
</div>
|
||||
@splatoon2.ink
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="level-item"> </div>
|
||||
<div class="level-item">
|
||||
<div class="font-splatoon2 is-size-7 has-text-grey-light">
|
||||
splatoon2.ink
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<div class="font-splatoon2 is-size-6 has-text-white">
|
||||
{{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<div class="font-splatoon2 is-size-6 has-text-white">
|
||||
{{ now | dateTime('en', 'UTC', 'MMMM D, YYYY HH:mm z') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item" v-if="!hideLocalTimes">
|
||||
<div class="font-splatoon2 is-size-7 has-text-grey-light time-table">
|
||||
<table>
|
||||
<tr>
|
||||
<td>{{ now | dateTime('en-us', 'America/Los_Angeles') }}</td>
|
||||
<td>{{ now | dateTime('en-gb', 'Europe/London') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ now | dateTime('en-us', 'America/New_York') }}</td>
|
||||
<td>{{ now | dateTime('ja-jp', 'Asia/Tokyo') }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!hideLocalTimes" class="level-item">
|
||||
<div class="font-splatoon2 is-size-7 has-text-grey-light time-table">
|
||||
<table>
|
||||
<tr>
|
||||
<td>{{ now | dateTime('en-us', 'America/Los_Angeles') }}</td>
|
||||
<td>{{ now | dateTime('en-gb', 'Europe/London') }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ now | dateTime('en-us', 'America/New_York') }}</td>
|
||||
<td>{{ now | dateTime('ja-jp', 'Asia/Tokyo') }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<Wrapper :title="title">
|
||||
<div v-if="weapons" :class="{ 'new-weapons-large': weapons.length <= 3 }">
|
||||
<NewWeaponsContainer title="Now Available" />
|
||||
</div>
|
||||
</Wrapper>
|
||||
<Wrapper :title="title">
|
||||
<div :class="{ 'new-weapons-large': weapons.length <= 3 }" v-if="weapons">
|
||||
<NewWeaponsContainer title="Now Available" />
|
||||
</div>
|
||||
</Wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<Wrapper title="Salmon Run">
|
||||
<div class="salmon-run tilt-left">
|
||||
<div class="hook-box">
|
||||
<SalmonRunBox
|
||||
:use-relative-time="true"
|
||||
:show-current="showCurrent"
|
||||
:show-upcoming="showUpcoming"
|
||||
:show-reward-gear="showRewardGear"
|
||||
:hide-upcoming-schedules-without-details="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
<Wrapper title="Salmon Run">
|
||||
<div class="salmon-run tilt-left">
|
||||
<div class="hook-box">
|
||||
<SalmonRunBox
|
||||
:use-relative-time="true"
|
||||
:show-current="showCurrent"
|
||||
:show-upcoming="showUpcoming"
|
||||
:show-reward-gear="showRewardGear"
|
||||
:hide-upcoming-schedules-without-details="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<Wrapper title="Salmon Run Gear">
|
||||
<div v-if="rewardGear" class="tilt-left salmon-run-gear" style="display: flex; align-items: center; justify-content: center;">
|
||||
<MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
|
||||
</div>
|
||||
</Wrapper>
|
||||
<Wrapper title="Salmon Run Gear">
|
||||
<div class="tilt-left salmon-run-gear" style="display: flex; align-items: center; justify-content: center;" v-if="rewardGear">
|
||||
<MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
|
||||
</div>
|
||||
</Wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,45 +1,41 @@
|
||||
<template>
|
||||
<div v-if="schedule" :class="mode">
|
||||
<h3 class="title is-2 font-splatoon1 has-text-centered">
|
||||
<template v-if="splatfestBattle">
|
||||
{{ $t('splatfest.battle') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ schedule.game_mode.name }}
|
||||
</template>
|
||||
</h3>
|
||||
<div v-if="schedule" :class="mode">
|
||||
<h3 class="title is-2 font-splatoon1 has-text-centered">
|
||||
<template v-if="splatfestBattle">{{ $t('splatfest.battle') }}</template>
|
||||
<template v-else>{{ schedule.game_mode.name }}</template>
|
||||
</h3>
|
||||
|
||||
<h5 v-if="!splatfestBattle" class="subtitle is-3 font-splatoon2 has-text-centered" style="margin-top: -1rem">
|
||||
<div class="image is-48x48" style="margin-bottom: -12px; display: inline-block">
|
||||
<img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
|
||||
<img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
|
||||
<img v-if="schedule.game_mode.key == 'league'" src="~@/web/assets/img/battle-league.png" />
|
||||
</div>
|
||||
<h5 class="subtitle is-3 font-splatoon2 has-text-centered" style="margin-top: -1rem" v-if="!splatfestBattle">
|
||||
<div class="image is-48x48" style="margin-bottom: -12px; display: inline-block">
|
||||
<img v-if="schedule.game_mode.key == 'regular'" src="~@/web/assets/img/battle-regular.png" />
|
||||
<img v-if="schedule.game_mode.key == 'gachi'" src="~@/web/assets/img/battle-ranked.png" />
|
||||
<img v-if="schedule.game_mode.key == 'league'" src="~@/web/assets/img/battle-league.png" />
|
||||
</div>
|
||||
|
||||
{{ schedule.rule.name }}
|
||||
</h5>
|
||||
{{ schedule.rule.name }}
|
||||
</h5>
|
||||
|
||||
<div v-if="splatfestBattle && currentSplatfest">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<Stage :stage="schedule.stage_a" />
|
||||
<div v-if="splatfestBattle && currentSplatfest">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<Stage :stage="schedule.stage_a" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<Stage :stage="schedule.stage_b" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half is-offset-one-quarter">
|
||||
<Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<Stage :stage="schedule.stage_b" />
|
||||
<div v-else>
|
||||
<Stage :stage="schedule.stage_a" />
|
||||
<Stage :stage="schedule.stage_b" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half is-offset-one-quarter">
|
||||
<Stage v-if="splatfestBattle && currentSplatfest" :stage="currentSplatfest.special_stage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Stage :stage="schedule.stage_a" />
|
||||
<Stage :stage="schedule.stage_b" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,54 +1,54 @@
|
||||
<template>
|
||||
<Wrapper title="Map Schedules">
|
||||
<div v-if="!globalSplatfestIsActiveInAllRegions" class="columns font-splatoon2">
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="league" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="columns font-splatoon2">
|
||||
<div class="column" style="display: flex">
|
||||
<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">
|
||||
<template v-if="shiftySchedule.stages.length === 1">
|
||||
Current Shifty Station
|
||||
</template>
|
||||
<template v-else>
|
||||
Current Shifty Stations
|
||||
</template>
|
||||
</h3>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<Stage :stage="shiftySchedule.stages[0]" style="max-width: 215px; margin: auto" />
|
||||
</div>
|
||||
<div v-if="shiftySchedule.stages[1]" class="column">
|
||||
<Stage :stage="shiftySchedule.stages[1]" />
|
||||
</div>
|
||||
</div>
|
||||
<Wrapper title="Map Schedules">
|
||||
<div class="columns font-splatoon2" v-if="!globalSplatfestIsActiveInAllRegions">
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="regular" />
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-right" mode="ranked" />
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-left" mode="league" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: initial" />
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
<div class="columns font-splatoon2" v-else>
|
||||
<div class="column" style="display: flex">
|
||||
<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">
|
||||
<template v-if="shiftySchedule.stages.length === 1">
|
||||
Current Shifty Station
|
||||
</template>
|
||||
<template v-else>
|
||||
Current Shifty Stations
|
||||
</template>
|
||||
</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">
|
||||
<ScheduleBox class="main-schedule-box tilt-right" mode="regular" splatfest-battle style="max-width: initial" />
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<Wrapper v-if="festival" :title="title" class="splatfest-screenshot" hide-local-times>
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="splatfest tilt-left">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="festival" screenshot-mode />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Wrapper :title="title" class="splatfest-screenshot" v-if="festival" hide-local-times>
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="splatfest tilt-left">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="festival" screenshot-mode />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="festival.results" class="level-item">
|
||||
<SplatfestResultsBox :festival="festival" />
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
<div class="level-item" v-if="festival.results">
|
||||
<SplatfestResultsBox :festival="festival" />
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<Wrapper v-if="merchandises" title="SplatNet Gear">
|
||||
<div class="columns">
|
||||
<div class="column is-5" style="min-height: 560px; display: flex; align-items: center; justify-content: center;">
|
||||
<MerchandiseBox
|
||||
:merchandise="featuredMerchandise"
|
||||
class="featured-merchandise"
|
||||
/>
|
||||
</div>
|
||||
<Wrapper title="SplatNet Gear" v-if="merchandises">
|
||||
<div class="columns">
|
||||
<div class="column is-5" style="min-height: 560px; display: flex; align-items: center; justify-content: center;">
|
||||
<MerchandiseBox
|
||||
:merchandise="featuredMerchandise"
|
||||
class="featured-merchandise"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="column" style="display: flex; align-items: center; justify-content: center;">
|
||||
<div class="still-available-merchandise columns is-multiline is-centered">
|
||||
<div v-for="(merchandise, index) in otherMerchandises" :key="index" class="column is-one-third">
|
||||
<MerchandiseBox
|
||||
:merchandise="merchandise"
|
||||
:class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
|
||||
/>
|
||||
</div>
|
||||
<div class="column" style="display: flex; align-items: center; justify-content: center;">
|
||||
<div class="still-available-merchandise columns is-multiline is-centered">
|
||||
<div class="column is-one-third" v-for="(merchandise, index) in otherMerchandises" :key="index">
|
||||
<MerchandiseBox
|
||||
:merchandise="merchandise"
|
||||
:class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Wrapper>
|
||||
</Wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,68 +1,66 @@
|
||||
<template>
|
||||
<Modal v-if="allSchedules" class="is-wide splatfest-history-dialog modal-rounded-box" @close="$emit('close')">
|
||||
<div class="modal-card">
|
||||
<div class="modal-card-head">
|
||||
<h3 class="title is-3 font-splatoon1 text-shadow">
|
||||
FinalFest Shifty Station Schedule
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div ref="body" class="modal-card-body">
|
||||
<div class="has-text-right" style="margin-bottom: 1em">
|
||||
<p>
|
||||
Schedules:
|
||||
<a href="https://twitter.com/SplatoonJP/status/1151426565387051009" target="_blank">
|
||||
@SplatoonJP
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Stage images and names:
|
||||
<a href="https://leanny.github.io/feststages/" target="_blank">
|
||||
LeanYoshi
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="font-splatoon2">
|
||||
<div v-if="first">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
<span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
|
||||
<span v-else>{{ $t('times.soon') }}</span>
|
||||
<Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box" v-if="allSchedules">
|
||||
<div class="modal-card">
|
||||
<div class="modal-card-head">
|
||||
<h3 class="title is-3 font-splatoon1 text-shadow">FinalFest Shifty Station Schedule</h3>
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="first" />
|
||||
</div>
|
||||
<div v-if="second">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.next') }}
|
||||
<div class="modal-card-body" ref="body">
|
||||
<div class="has-text-right" style="margin-bottom: 1em">
|
||||
<p>
|
||||
Schedules:
|
||||
<a href="https://twitter.com/SplatoonJP/status/1151426565387051009" target="_blank">
|
||||
@SplatoonJP
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Stage images and names:
|
||||
<a href="https://leanny.github.io/feststages/" target="_blank">
|
||||
LeanYoshi
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="font-splatoon2">
|
||||
<div v-if="first">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
<span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
|
||||
<span v-else>{{ $t('times.soon') }}</span>
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="first" />
|
||||
</div>
|
||||
<div v-if="second">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.next') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="second" />
|
||||
</div>
|
||||
|
||||
<div v-if="others && others.length">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.future') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow
|
||||
v-for="schedule in others"
|
||||
:key="schedule.start_time"
|
||||
:schedule="schedule"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="font-splatoon2" v-if="currentSchedules.length === 0">
|
||||
<ScheduleRow
|
||||
v-for="schedule in allSchedules"
|
||||
:key="schedule.start_time"
|
||||
:schedule="schedule"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="second" />
|
||||
</div>
|
||||
|
||||
<div v-if="others && others.length">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.future') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow
|
||||
v-for="schedule in others"
|
||||
:key="schedule.start_time"
|
||||
:schedule="schedule"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="currentSchedules.length === 0" class="font-splatoon2">
|
||||
<ScheduleRow
|
||||
v-for="schedule in allSchedules"
|
||||
:key="schedule.start_time"
|
||||
:schedule="schedule"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="image is-48x48" style="margin-bottom: -6px">
|
||||
<img v-if="mode === 'regular'" src="~@/web/assets/img/battle-regular.png" />
|
||||
<img v-if="mode === 'ranked'" src="~@/web/assets/img/battle-ranked.png" />
|
||||
<img v-if="mode === 'league'" src="~@/web/assets/img/battle-league.png" />
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="image is-48x48" style="margin-bottom: -6px">
|
||||
<img v-if="mode === 'regular'" src="~@/web/assets/img/battle-regular.png" />
|
||||
<img v-if="mode === 'ranked'" src="~@/web/assets/img/battle-ranked.png" />
|
||||
<img v-if="mode === 'league'" src="~@/web/assets/img/battle-league.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<h2 class="title is-3 is-size-2-fullhd is-size-4-mobile font-splatoon1">
|
||||
{{ name }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<h2 class="title is-3 is-size-2-fullhd is-size-4-mobile font-splatoon1">
|
||||
{{ name }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<div class="splatfest-results">
|
||||
<div class="background" />
|
||||
<div class="splatfest-results">
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header is-hidden-mobile">
|
||||
{{ $t('splatfest.results.title') }}
|
||||
</div>
|
||||
|
||||
<div class="columns is-marginless is-gapless is-mobile results-header is-hidden-tablet">
|
||||
<div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
|
||||
{{ $t('splatfest.results.title') }}
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="image is-48x48">
|
||||
<img src="~@/web/assets/img/pearl.png" style="margin: auto; width: 29px; height: 48px;" />
|
||||
<div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header is-hidden-mobile">
|
||||
{{ $t('splatfest.results.title') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-5">
|
||||
<!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
|
||||
</div>
|
||||
<div class="columns is-marginless is-gapless is-mobile results-header is-hidden-tablet">
|
||||
<div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
|
||||
{{ $t('splatfest.results.title') }}
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="image is-48x48">
|
||||
<img src="~@/web/assets/img/marina.png" style="margin: auto; width: 24px; height: 48px;" />
|
||||
<div class="column">
|
||||
<div class="image is-48x48">
|
||||
<img src="~@/web/assets/img/pearl.png" style="margin: auto; width: 29px; height: 48px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-5">
|
||||
<!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="image is-48x48">
|
||||
<img src="~@/web/assets/img/marina.png" style="margin: auto; width: 24px; height: 48px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<IdolResultsRow region="na" />
|
||||
<IdolResultsRow region="eu" />
|
||||
<IdolResultsRow region="jp" />
|
||||
</div>
|
||||
<IdolResultsRow region="na" />
|
||||
<IdolResultsRow region="eu" />
|
||||
<IdolResultsRow region="jp" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<div class="columns is-mobile result">
|
||||
<div class="column">
|
||||
<div v-if="winner == 'alpha'" class="winner-mark-shadow" />
|
||||
<div v-if="winner == 'alpha'" class="winner-mark" style="background: #f2327b" />
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4">
|
||||
<div>{{ heroWins.alpha }}</div>
|
||||
<div class="columns is-mobile result">
|
||||
<div class="column">
|
||||
<div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
|
||||
<div class="winner-mark" style="background: #f2327b" v-if="winner == 'alpha'"></div>
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4">
|
||||
<div>{{ heroWins.alpha }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-5 has-text-centered font-splatoon2">
|
||||
<div style="margin: 0 -100px">
|
||||
{{ $t(`regions.${region}.name`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div v-if="winner == 'bravo'" class="winner-mark-shadow" />
|
||||
<div v-if="winner == 'bravo'" class="winner-mark" style="background: #10dc85" />
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4">
|
||||
<div>{{ heroWins.bravo }}</div>
|
||||
<div class="column is-5 has-text-centered font-splatoon2">
|
||||
<div style="margin: 0 -100px">
|
||||
{{ $t(`regions.${region}.name`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
|
||||
<div class="winner-mark" style="background: #10dc85" v-if="winner == 'bravo'"></div>
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4">
|
||||
<div>{{ heroWins.bravo }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,80 +1,76 @@
|
||||
<template>
|
||||
<div class="merchandise-box font-splatoon2" :class="merchandise.kind">
|
||||
<div class="brand">
|
||||
<div class="image is-32x32">
|
||||
<img :src="merchandise.gear.brand.image | localSplatNetImageUrl" :title="brandName" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skills">
|
||||
<div v-if="merchandise.skill" class="main skill-img-bg">
|
||||
<img :src="merchandise.skill.image | localSplatNetImageUrl" :title="skillName" />
|
||||
</div>
|
||||
<div v-for="i in merchandise.gear.rarity + 1" :key="i" class="sub">
|
||||
<img src="~@/web/assets/img/blank-skill-slot.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="merchandise.end_time" class="is-size-6 title-squid remaining-time">
|
||||
{{ merchandise.end_time - now | shortDuration }}
|
||||
</div>
|
||||
|
||||
<div class="gear-image">
|
||||
<div class="image is-square">
|
||||
<img :src="merchandise.gear.image | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gear-name has-text-centered">
|
||||
{{ gearName }}
|
||||
|
||||
<div class="info-overlay">
|
||||
<div v-if="merchandise.original_gear" class="info-overlay-container original-gear">
|
||||
<div class="is-size-7">
|
||||
{{ $t('splatnet_gear.original_gear') }}
|
||||
</div>
|
||||
|
||||
<div class="level" style="margin: 0 3px">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="skill-img-bg strikethrough">
|
||||
<img :src="merchandise.original_gear.skill.image | localSplatNetImageUrl" :title="originalSkillName" />
|
||||
</div>
|
||||
<div v-for="i in merchandise.original_gear.rarity + 1" :key="i" class="sub">
|
||||
<img src="~@/web/assets/img/blank-skill-slot.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="merchandise-box font-splatoon2" :class="merchandise.kind">
|
||||
<div class="brand">
|
||||
<div class="image is-32x32">
|
||||
<img :src="merchandise.gear.brand.image | localSplatNetImageUrl" :title="brandName" />
|
||||
</div>
|
||||
<div v-if="merchandise.original_gear.price" class="level-right">
|
||||
<div class="level-item">
|
||||
<div>
|
||||
<img class="cash" src="~@/web/assets/img/cash.png" />
|
||||
<span class="strikethrough">{{ merchandise.original_gear.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="merchandise.gear.brand.frequent_skill" class="info-overlay-container common-ability">
|
||||
<div class="is-size-7">
|
||||
{{ $t('gear.frequent_ability') }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="skill-img-bg">
|
||||
<img :src="merchandise.gear.brand.frequent_skill.image | localSplatNetImageUrl" :title="frequentSkillName" />
|
||||
<div class="skills">
|
||||
<div class="main skill-img-bg" v-if="merchandise.skill">
|
||||
<img :src="merchandise.skill.image | localSplatNetImageUrl" :title="skillName" />
|
||||
</div>
|
||||
<div class="sub" v-for="i in merchandise.gear.rarity + 1" :key="i">
|
||||
<img src="~@/web/assets/img/blank-skill-slot.png" />
|
||||
</div>
|
||||
{{ brandName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="merchandise.price" class="bottom-bar has-text-centered">
|
||||
<img class="cash" src="~@/web/assets/img/cash.png" />
|
||||
{{ merchandise.price }}
|
||||
<div class="is-size-6 title-squid remaining-time" v-if="merchandise.end_time">
|
||||
{{ merchandise.end_time - now | shortDuration }}
|
||||
</div>
|
||||
|
||||
<div class="gear-image">
|
||||
<div class="image is-square">
|
||||
<img :src="merchandise.gear.image | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gear-name has-text-centered">
|
||||
{{ gearName }}
|
||||
|
||||
<div class="info-overlay">
|
||||
<div class="info-overlay-container original-gear" v-if="merchandise.original_gear">
|
||||
<div class="is-size-7">{{ $t('splatnet_gear.original_gear') }}</div>
|
||||
|
||||
<div class="level" style="margin: 0 3px">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="skill-img-bg strikethrough">
|
||||
<img :src="merchandise.original_gear.skill.image | localSplatNetImageUrl" :title="originalSkillName" />
|
||||
</div>
|
||||
<div class="sub" v-for="i in merchandise.original_gear.rarity + 1" :key="i">
|
||||
<img src="~@/web/assets/img/blank-skill-slot.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right" v-if="merchandise.original_gear.price">
|
||||
<div class="level-item">
|
||||
<div>
|
||||
<img class="cash" src="~@/web/assets/img/cash.png" />
|
||||
<span class="strikethrough">{{ merchandise.original_gear.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-overlay-container common-ability" v-if="merchandise.gear.brand.frequent_skill">
|
||||
<div class="is-size-7">{{ $t('gear.frequent_ability') }}</div>
|
||||
<div>
|
||||
<div class="skill-img-bg">
|
||||
<img :src="merchandise.gear.brand.frequent_skill.image | localSplatNetImageUrl" :title="frequentSkillName" />
|
||||
</div>
|
||||
{{ brandName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-bar has-text-centered" v-if="merchandise.price">
|
||||
<img class="cash" src="~@/web/assets/img/cash.png" />
|
||||
{{ merchandise.price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,33 +1,35 @@
|
||||
<template>
|
||||
<div class="new-weapon-box font-splatoon2">
|
||||
<div class="font-splatoon1 is-size-5 title-squid">
|
||||
{{ displayTitle }}
|
||||
</div>
|
||||
<div class="new-weapon-box font-splatoon2">
|
||||
|
||||
<div class="main-content-wrapper">
|
||||
<div class="weapon-special-sub">
|
||||
<div class="image-wrapper" :title="specialName">
|
||||
<div class="image is-24x24">
|
||||
<img :src="weapon.special.image_a | localSplatNetImageUrl" />
|
||||
</div>
|
||||
<div class="font-splatoon1 is-size-5 title-squid">
|
||||
{{ displayTitle }}
|
||||
</div>
|
||||
|
||||
<div class="image-wrapper" :title="subName">
|
||||
<div class="image is-24x24">
|
||||
<img :src="weapon.sub.image_a | localSplatNetImageUrl" />
|
||||
</div>
|
||||
<div class="main-content-wrapper">
|
||||
<div class="weapon-special-sub">
|
||||
<div class="image-wrapper" :title="specialName">
|
||||
<div class="image is-24x24">
|
||||
<img :src="weapon.special.image_a | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-wrapper" :title="subName">
|
||||
<div class="image is-24x24">
|
||||
<img :src="weapon.sub.image_a | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image is-square">
|
||||
<img :src="weapon.image | localSplatNetImageUrl" />
|
||||
</div>
|
||||
|
||||
<div class="weapon-name has-text-centered is-size-5">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image is-square">
|
||||
<img :src="weapon.image | localSplatNetImageUrl" />
|
||||
</div>
|
||||
|
||||
<div class="weapon-name has-text-centered is-size-5">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="columns is-multiline is-centered">
|
||||
<div v-for="(weapon, index) in weapons" :key="weapon.id" class="column" :class="columnClass">
|
||||
<NewWeaponBox
|
||||
:weapon="weapon"
|
||||
:title="title"
|
||||
:class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
|
||||
/>
|
||||
<div class="columns is-multiline is-centered">
|
||||
<div class="column" :class="columnClass" v-for="(weapon, index) in weapons" :key="weapon.id">
|
||||
<NewWeaponBox
|
||||
:weapon="weapon"
|
||||
:title="title"
|
||||
:class="(index % 2 == 0) ? 'tilt-right' : 'tilt-left'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,118 +1,118 @@
|
||||
<template>
|
||||
<div class="font-splatoon2">
|
||||
<div class="salmon-run-header">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="image is-48x48">
|
||||
<img src="~@/web/assets/img/mr-grizz.png" style="margin-top: -5px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
|
||||
{{ $t('coop.title') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-gapless">
|
||||
<div class="column is-4 salmon-run-ad-img">
|
||||
<div class="image is-16by9 is-hidden-desktop" />
|
||||
|
||||
<template v-if="showRewardGear && rewardGear">
|
||||
<div class="salmon-run-gear-text">
|
||||
{{ $t('coop.current_gear') }}
|
||||
</div>
|
||||
<div class="salmon-run-gear-image hand" :title="rewardGearName" @click="gearDialogOpen = true">
|
||||
<div class="image is-32x32">
|
||||
<img :src="rewardGear.image | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="salmon-run-content">
|
||||
<div v-if="showCurrent && activeSchedule" class="salmon-run-open">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
{{ $t('times.open') }}
|
||||
</div>
|
||||
<template v-if="useRelativeTime">
|
||||
<div class="title-color is-size-5">
|
||||
{{ activeSchedule.end_time - now | durationHours | time.remaining }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="title-color is-size-5">
|
||||
{{ activeSchedule.start_time | date }}
|
||||
{{ activeSchedule.start_time | time }}
|
||||
–
|
||||
{{ activeSchedule.end_time | date }}
|
||||
{{ activeSchedule.end_time | time }}
|
||||
</div>
|
||||
<div>
|
||||
{{ activeSchedule.end_time - now | duration | time.remaining }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="salmon-run-details">
|
||||
<SalmonRunDetailsBar :schedule="activeSchedule" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showUpcoming && upcomingSchedulesForDisplay.length > 0">
|
||||
<div class="salmon-run-future">
|
||||
<div class="is-size-6 title-squid font-splatoon1">
|
||||
{{ $t('times.soon') }}
|
||||
</div>
|
||||
<div v-for="event in upcomingSchedulesForDisplay" :key="event.key" class="event">
|
||||
<div class="columns is-marginless is-gapless is-mobile">
|
||||
<div class="column is-narrow" style="margin-right: 5px">
|
||||
<div class="image is-4by3" style="width: 23px">
|
||||
<img src="~@/web/assets/img/salmon-run-mini.png" />
|
||||
<div class="font-splatoon2">
|
||||
<div class="salmon-run-header">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="image is-48x48">
|
||||
<img src="~@/web/assets/img/mr-grizz.png" style="margin-top: -5px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
|
||||
{{ $t('coop.title') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="useRelativeTime" class="column">
|
||||
<span class="title-color is-size-6">
|
||||
Shift opens
|
||||
{{ event.start_time - now | durationHours | time.in }}
|
||||
</span>
|
||||
<span class="is-size-7 is-pulled-right">
|
||||
{{ event.end_time - event.start_time | durationHours }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="column">
|
||||
<span class="title-color is-size-6">
|
||||
<span class="nowrap">
|
||||
{{ event.start_time | date({ weekday: 'short' }) }}
|
||||
{{ event.start_time | time }}
|
||||
</span>
|
||||
–
|
||||
<span class="nowrap">
|
||||
{{ event.end_time | date }}
|
||||
{{ event.end_time | time }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="is-size-7 is-hidden-touch is-pulled-right">
|
||||
{{ event.start_time - now | duration(true) | time.in }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SalmonRunDetailsBar :schedule="event" mini />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SalmonRunGearDialog
|
||||
v-if="gearDialogOpen && rewardGear"
|
||||
@close="gearDialogOpen = false"
|
||||
/>
|
||||
</div>
|
||||
<div class="columns is-gapless">
|
||||
<div class="column is-4 salmon-run-ad-img">
|
||||
<div class="image is-16by9 is-hidden-desktop"></div>
|
||||
|
||||
<template v-if="showRewardGear && rewardGear">
|
||||
<div class="salmon-run-gear-text">
|
||||
{{ $t('coop.current_gear') }}
|
||||
</div>
|
||||
<div class="salmon-run-gear-image hand" @click="gearDialogOpen = true" :title="rewardGearName">
|
||||
<div class="image is-32x32">
|
||||
<img :src="rewardGear.image | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="salmon-run-content">
|
||||
<div class="salmon-run-open" v-if="showCurrent && activeSchedule">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
{{ $t('times.open') }}
|
||||
</div>
|
||||
<template v-if="useRelativeTime">
|
||||
<div class="title-color is-size-5">
|
||||
{{ activeSchedule.end_time - now | durationHours | time.remaining }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="title-color is-size-5">
|
||||
{{ activeSchedule.start_time | date }}
|
||||
{{ activeSchedule.start_time | time }}
|
||||
–
|
||||
{{ activeSchedule.end_time | date }}
|
||||
{{ activeSchedule.end_time | time }}
|
||||
</div>
|
||||
<div>
|
||||
{{ activeSchedule.end_time - now | duration | time.remaining }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="salmon-run-details">
|
||||
<SalmonRunDetailsBar :schedule="activeSchedule" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showUpcoming && upcomingSchedulesForDisplay.length > 0">
|
||||
<div class="salmon-run-future">
|
||||
<div class="is-size-6 title-squid font-splatoon1">
|
||||
{{ $t('times.soon') }}
|
||||
</div>
|
||||
<div v-for="event in upcomingSchedulesForDisplay" :key="event.key" class="event">
|
||||
<div class="columns is-marginless is-gapless is-mobile">
|
||||
<div class="column is-narrow" style="margin-right: 5px">
|
||||
<div class="image is-4by3" style="width: 23px">
|
||||
<img src="~@/web/assets/img/salmon-run-mini.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" v-if="useRelativeTime">
|
||||
<span class="title-color is-size-6">
|
||||
Shift opens
|
||||
{{ event.start_time - now | durationHours | time.in }}
|
||||
</span>
|
||||
<span class="is-size-7 is-pulled-right">
|
||||
{{ event.end_time - event.start_time | durationHours }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="column" v-else>
|
||||
<span class="title-color is-size-6">
|
||||
<span class="nowrap">
|
||||
{{ event.start_time | date({ weekday: 'short' }) }}
|
||||
{{ event.start_time | time }}
|
||||
</span>
|
||||
–
|
||||
<span class="nowrap">
|
||||
{{ event.end_time | date }}
|
||||
{{ event.end_time | time }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="is-size-7 is-hidden-touch is-pulled-right">
|
||||
{{ event.start_time - now | duration(true) | time.in }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SalmonRunDetailsBar :schedule="event" mini />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SalmonRunGearDialog
|
||||
v-if="gearDialogOpen && rewardGear"
|
||||
@close="gearDialogOpen = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,45 +1,43 @@
|
||||
<template>
|
||||
<div v-if="schedule.stage || schedule.weapons" class="columns is-mobile is-slimmer salmon-run-details" style="padding: 0.5rem 0">
|
||||
<div v-if="schedule.stage" class="column" :class="mini ? 'is-3' : 'is-5'">
|
||||
<Stage :stage="schedule.stage" is-salmon-run :show-title="!mini" />
|
||||
</div>
|
||||
|
||||
<div v-if="mini && schedule.stage" class="column" style="display: flex; align-items: center;">
|
||||
{{ stageName }}
|
||||
</div>
|
||||
|
||||
<div v-if="schedule.weapons" class="column" :class="{ 'is-5': mini }" style="display: flex; align-items: center;">
|
||||
<div style="width: 100%">
|
||||
<div v-if="!mini" class="has-text-centered">
|
||||
{{ $t('coop.supplied_weapons') }}
|
||||
<div class="columns is-mobile is-slimmer salmon-run-details" style="padding: 0.5rem 0" v-if="schedule.stage || schedule.weapons">
|
||||
<div class="column" :class="mini ? 'is-3' : 'is-5'" v-if="schedule.stage">
|
||||
<Stage :stage="schedule.stage" is-salmon-run :show-title="!mini"></Stage>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile is-slimmer">
|
||||
<div v-for="(weapon, i) in schedule.weapons" :key="i" class="column">
|
||||
<div class="image is-square weapon">
|
||||
<template v-if="weapon.weapon">
|
||||
<img
|
||||
:src="weapon.weapon.image | localSplatNetImageUrl"
|
||||
:title="$t(`splatnet.weapons.${weapon.weapon.id}.name`, weapon.weapon.name)"
|
||||
/>
|
||||
</template>
|
||||
<div class="column" style="display: flex; align-items: center;" v-if="mini && schedule.stage">
|
||||
{{ stageName }}
|
||||
</div>
|
||||
|
||||
<template v-else-if="weapon.coop_special_weapon">
|
||||
<img
|
||||
:src="weapon.coop_special_weapon.image | localSplatNetImageUrl"
|
||||
:title="$t(`splatnet.coop_special_weapons.${weapon.coop_special_weapon.image}.name`, weapon.coop_special_weapon.name)"
|
||||
/>
|
||||
</template>
|
||||
<div class="column" :class="{ 'is-5': mini }" style="display: flex; align-items: center;" v-if="schedule.weapons">
|
||||
<div style="width: 100%">
|
||||
<div class="has-text-centered" v-if="!mini">{{ $t('coop.supplied_weapons') }}</div>
|
||||
|
||||
<template v-else>
|
||||
<img src="~@/web/assets/img/salmon-run-random-weapon.png" :title="$t('coop.random_weapon')" style="padding: 8px" />
|
||||
</template>
|
||||
<div class="columns is-mobile is-slimmer">
|
||||
<div class="column" v-for="(weapon, i) in schedule.weapons" :key="i">
|
||||
<div class="image is-square weapon">
|
||||
<template v-if="weapon.weapon">
|
||||
<img
|
||||
:src="weapon.weapon.image | localSplatNetImageUrl"
|
||||
:title="$t(`splatnet.weapons.${weapon.weapon.id}.name`, weapon.weapon.name)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="weapon.coop_special_weapon">
|
||||
<img
|
||||
:src="weapon.coop_special_weapon.image | localSplatNetImageUrl"
|
||||
:title="$t(`splatnet.coop_special_weapons.${weapon.coop_special_weapon.image}.name`, weapon.coop_special_weapon.name)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<img src="~@/web/assets/img/salmon-run-random-weapon.png" :title="$t('coop.random_weapon')" style="padding: 8px" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content" style="max-width: 300px; overflow: visible">
|
||||
<div class="tilt-right" style="overflow: hidden">
|
||||
<MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content" style="max-width: 300px; overflow: visible">
|
||||
<div class="tilt-right" style="overflow: hidden">
|
||||
<MerchandiseBox :merchandise="merchandise" class="salmon-run-gear" />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,54 +1,46 @@
|
||||
<template>
|
||||
<div class="font-splatoon2" :class="mode">
|
||||
<GameModeHeader :mode="mode" />
|
||||
<div class="font-splatoon2" :class="mode">
|
||||
<GameModeHeader :mode="mode" />
|
||||
|
||||
<div v-if="activeSchedule" class="main-schedule">
|
||||
<div class="level is-mobile top-bar">
|
||||
<div class="level-left">
|
||||
<div class="level-item title-color is-size-5">
|
||||
{{ activeRuleName }}
|
||||
</div>
|
||||
<div class="main-schedule" v-if="activeSchedule">
|
||||
<div class="level is-mobile top-bar">
|
||||
<div class="level-left">
|
||||
<div class="level-item title-color is-size-5">{{ activeRuleName }}</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{ activeSchedule.start_time | time }} –
|
||||
{{ activeSchedule.end_time | time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-clearfix"></div>
|
||||
<div class="columns is-mobile is-slim">
|
||||
<div class="column"><Stage :stage="activeSchedule.stage_a"></Stage></div>
|
||||
<div class="column"><Stage :stage="activeSchedule.stage_b"></Stage></div>
|
||||
<template v-if="selectedRegionHasActiveSplatfest">
|
||||
<div class="column"><Stage :stage="selectedRegionCurrentSplatfest.special_stage"></Stage></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
{{ activeSchedule.start_time | time }} –
|
||||
{{ activeSchedule.end_time | time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-clearfix" />
|
||||
<div class="columns is-mobile is-slim">
|
||||
<div class="column">
|
||||
<Stage :stage="activeSchedule.stage_a" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<Stage :stage="activeSchedule.stage_b" />
|
||||
</div>
|
||||
<template v-if="selectedRegionHasActiveSplatfest">
|
||||
<div class="column">
|
||||
<Stage :stage="selectedRegionCurrentSplatfest.special_stage" />
|
||||
</div>
|
||||
|
||||
<template v-if="upcomingSchedules && upcomingSchedules[0]">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
{{ $t('times.next') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="upcomingSchedules[0]" is-small />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<p class="has-text-centered" style="margin-top: 10px">
|
||||
<router-link :to="`/schedules/${mode}`" class="button is-translucent is-rounded">
|
||||
<span class="icon squid-icon-tilt">
|
||||
<span class="fa squid-squid"></span>
|
||||
</span>
|
||||
<span class="font-splatoon2">{{ $t('ui.all_upcoming_stages') }}</span>
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<template v-if="upcomingSchedules && upcomingSchedules[0]">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
{{ $t('times.next') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="upcomingSchedules[0]" is-small />
|
||||
</template>
|
||||
|
||||
<p class="has-text-centered" style="margin-top: 10px">
|
||||
<router-link :to="`/schedules/${mode}`" class="button is-translucent is-rounded">
|
||||
<span class="icon squid-icon-tilt">
|
||||
<span class="fa squid-squid" />
|
||||
</span>
|
||||
<span class="font-splatoon2">{{ $t('ui.all_upcoming_stages') }}</span>
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<Modal class="font-splatoon2" @close="$emit('close')">
|
||||
<div class="modal-card schedule-box tilt-left-slight" :class="mode">
|
||||
<header class="modal-card-head">
|
||||
<GameModeHeader :mode="mode" />
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<ScheduleList :mode="mode" />
|
||||
</section>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal @close="$emit('close')" class="font-splatoon2">
|
||||
<div class="modal-card schedule-box tilt-left-slight" :class="mode">
|
||||
<header class="modal-card-head">
|
||||
<GameModeHeader :mode="mode" />
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<ScheduleList :mode="mode" />
|
||||
</section>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="first">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
<span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
|
||||
<span v-else>{{ $t('times.soon') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="first">
|
||||
<div class="is-size-5 title-squid font-splatoon1">
|
||||
<span v-if="first.start_time <= now">{{ $t('times.now') }}</span>
|
||||
<span v-else>{{ $t('times.soon') }}</span>
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="first" />
|
||||
<ScheduleRow :schedule="first" />
|
||||
</div>
|
||||
<div v-if="second">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.next') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="second" />
|
||||
</div>
|
||||
|
||||
<div v-if="others && others.length">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.future') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow
|
||||
v-for="schedule in others"
|
||||
:key="schedule.start_time"
|
||||
:schedule="schedule"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="second">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.next') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow :schedule="second" />
|
||||
</div>
|
||||
|
||||
<div v-if="others && others.length">
|
||||
<div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
|
||||
{{ $t('times.future') }}
|
||||
</div>
|
||||
|
||||
<ScheduleRow
|
||||
v-for="schedule in others"
|
||||
:key="schedule.start_time"
|
||||
:schedule="schedule"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,70 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="level is-mobile is-marginless is-hidden-tablet">
|
||||
<div class="level-left">
|
||||
<template v-if="ruleName">
|
||||
<div class="level-item title-color is-size-5">
|
||||
{{ ruleName }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ timeFromNow }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item has-text-right">
|
||||
<div>
|
||||
<template v-if="ruleName && schedule.start_time > now">
|
||||
{{ timeFromNow }}<span class="is-hidden-mobile">, </span>
|
||||
</template>
|
||||
<div class="is-size-7">
|
||||
<template v-if="showStartDate">
|
||||
{{ schedule.start_time | date }}
|
||||
</template>
|
||||
{{ schedule.start_time | time }} –
|
||||
<template v-if="showEndDate">
|
||||
{{ schedule.end_time | date }}
|
||||
</template>
|
||||
{{ schedule.end_time | time }}
|
||||
<div>
|
||||
<div class="level is-mobile is-marginless is-hidden-tablet">
|
||||
<div class="level-left">
|
||||
<template v-if="ruleName">
|
||||
<div class="level-item title-color is-size-5">{{ ruleName }}</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ timeFromNow }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item has-text-right">
|
||||
<div>
|
||||
<template v-if="ruleName && schedule.start_time > now">
|
||||
{{ timeFromNow }}<span class="is-hidden-mobile">, </span>
|
||||
</template>
|
||||
<div class="is-size-7">
|
||||
<template v-if="showStartDate">
|
||||
{{ schedule.start_time | date }}
|
||||
</template>
|
||||
{{ schedule.start_time | time }} –
|
||||
<template v-if="showEndDate">
|
||||
{{ schedule.end_time | date }}
|
||||
</template>
|
||||
{{ schedule.end_time | time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="schedule" class="columns is-slim">
|
||||
<div class="column has-text-centered is-hidden-mobile" style="margin-top: auto; margin-bottom: auto;">
|
||||
<div class="title is-size-5-fullhd is-size-5-touch" :class="ruleNameClass">
|
||||
{{ ruleName }}
|
||||
<div class="columns is-slim" v-if="schedule">
|
||||
<div class="column has-text-centered is-hidden-mobile" style="margin-top: auto; margin-bottom: auto;">
|
||||
<div class="title is-size-5-fullhd is-size-5-touch" :class="ruleNameClass">{{ ruleName }}</div>
|
||||
<div class="subtitle is-size-6-fullhd is-size-6-touch" :class="scheduleClass">
|
||||
<template v-if="schedule.start_time > now">
|
||||
{{ timeFromNow }}
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="showStartDate">
|
||||
{{ schedule.start_time | date }}
|
||||
</template>
|
||||
<span class="nowrap">{{ schedule.start_time | time }}</span>
|
||||
–
|
||||
<template v-if="showEndDate">
|
||||
{{ schedule.end_time | date }}
|
||||
</template>
|
||||
<span class="nowrap">{{ schedule.end_time | time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<div class="columns is-mobile is-slim">
|
||||
<div class="column"><Stage :stage="schedule.stage_a" v-if="schedule.stage_a" /></div>
|
||||
<div class="column"><Stage :stage="schedule.stage_b" v-if="schedule.stage_b" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtitle is-size-6-fullhd is-size-6-touch" :class="scheduleClass">
|
||||
<template v-if="schedule.start_time > now">
|
||||
{{ timeFromNow }}
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="showStartDate">
|
||||
{{ schedule.start_time | date }}
|
||||
</template>
|
||||
<span class="nowrap">{{ schedule.start_time | time }}</span>
|
||||
–
|
||||
<template v-if="showEndDate">
|
||||
{{ schedule.end_time | date }}
|
||||
</template>
|
||||
<span class="nowrap">{{ schedule.end_time | time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<div class="columns is-mobile is-slim">
|
||||
<div class="column">
|
||||
<Stage v-if="schedule.stage_a" :stage="schedule.stage_a" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<Stage v-if="schedule.stage_b" :stage="schedule.stage_b" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
<template>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content">
|
||||
<div class="splatnet-gear-dialog">
|
||||
<h3 class="title is-3 has-text-centered font-splatoon1 text-shadow">
|
||||
{{ $t('splatnet_gear.title') }}
|
||||
</h3>
|
||||
<div class="columns is-marginless is-multiline is-mobile is-centered">
|
||||
<div v-for="(merchandise, index) in merchandises" :key="merchandise.end_time" class="column is-half-mobile is-one-third-tablet">
|
||||
<MerchandiseBox
|
||||
:merchandise="merchandise"
|
||||
:class="(index % 2 === 0) ? 'tilt-left' : 'tilt-right'"
|
||||
/>
|
||||
</div>
|
||||
<Modal @close="$emit('close')">
|
||||
<div class="modal-content">
|
||||
<div class="splatnet-gear-dialog">
|
||||
<h3 class="title is-3 has-text-centered font-splatoon1 text-shadow">{{ $t('splatnet_gear.title') }}</h3>
|
||||
<div class="columns is-marginless is-multiline is-mobile is-centered">
|
||||
<div class="column is-half-mobile is-one-third-tablet" v-for="(merchandise, index) in merchandises" :key="merchandise.end_time">
|
||||
<MerchandiseBox
|
||||
:merchandise="merchandise"
|
||||
:class="(index % 2 === 0) ? 'tilt-left' : 'tilt-right'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,96 +1,94 @@
|
||||
<template>
|
||||
<div class="font-splatoon2" :class="{ 'has-results': showingResults }">
|
||||
<div class="splatfest-header">
|
||||
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="font-splatoon2" :class="{ 'has-results': showingResults }">
|
||||
<div class="splatfest-header">
|
||||
<h2 class="title is-3 is-size-2-fullhd font-splatoon1">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="panel-container" :class="{ 'is-hidden-mobile' : showingResults }">
|
||||
<div class="image panel-image">
|
||||
<img :src="image" />
|
||||
</div>
|
||||
<div class="panel-container" :class="{ 'is-hidden-mobile' : showingResults }">
|
||||
<div class="image panel-image">
|
||||
<img :src="image" />
|
||||
</div>
|
||||
|
||||
<div class="regions">
|
||||
<span v-for="(data, region) in festival.regions" :key="region" class="region">
|
||||
<span class="icon is-small">
|
||||
<img :src="require(`@/web/assets/img/region-${region}.svg`)" />
|
||||
</span>
|
||||
<span>{{ region | upperCase }}</span>
|
||||
<div class="regions">
|
||||
<span class="region" v-for="(data, region) in festival.regions" :key="region">
|
||||
<span class="icon is-small">
|
||||
<img :src="require(`@/web/assets/img/region-${region}.svg`)" />
|
||||
</span>
|
||||
<span>{{ region | upperCase }}</span>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="columns is-gapless labels is-hidden-mobile">
|
||||
<div class="column" v-text="teamNames.long.alpha" />
|
||||
<div class="column has-text-right" v-text="teamNames.long.bravo" />
|
||||
</div>
|
||||
<div class="columns is-gapless labels is-hidden-mobile">
|
||||
<div class="column" v-text="teamNames.long.alpha"></div>
|
||||
<div class="column has-text-right" v-text="teamNames.long.bravo"></div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-gapless labels is-mobile is-hidden-tablet">
|
||||
<div class="column" v-text="teamNames.short.alpha" />
|
||||
<div class="column has-text-right" v-text="teamNames.short.bravo" />
|
||||
</div>
|
||||
<div class="columns is-gapless labels is-mobile is-hidden-tablet">
|
||||
<div class="column" v-text="teamNames.short.alpha"></div>
|
||||
<div class="column has-text-right" v-text="teamNames.short.bravo"></div>
|
||||
</div>
|
||||
|
||||
<SplatfestResultsBox v-if="showingResults" :festival="festival" />
|
||||
</div>
|
||||
<SplatfestResultsBox :festival="festival" v-if="showingResults" />
|
||||
</div>
|
||||
|
||||
<div v-if="showingResults" class="mobile-results is-hidden-tablet">
|
||||
<SplatfestResultsBox :festival="festival" />
|
||||
</div>
|
||||
<div class="mobile-results is-hidden-tablet" v-if="showingResults">
|
||||
<SplatfestResultsBox :festival="festival" />
|
||||
</div>
|
||||
|
||||
<div v-if="!globalSplatfestMode" class="has-text-centered is-size-5 title-color festival-period-container">
|
||||
<div v-if="!showingResultsBar" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
|
||||
<template v-if="!screenshotMode">
|
||||
<span class="nowrap">
|
||||
{{ festival.times.start | date(dateOptions) }}
|
||||
{{ festival.times.start | time }}
|
||||
</span>
|
||||
–
|
||||
<span class="nowrap">
|
||||
{{ festival.times.end | date }}
|
||||
{{ festival.times.end | time }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="festival.state == 'upcoming'">
|
||||
<template v-if="festival.times.start - now > 24 * 60 * 60">
|
||||
{{ festival.times.start - now | shortDuration | time.in }}
|
||||
<div class="has-text-centered is-size-5 title-color festival-period-container" v-if="!globalSplatfestMode">
|
||||
<div v-if="!showingResultsBar" class="festival-period" :style="{ 'background-color': festival.colors.middle.css_rgb }">
|
||||
<template v-if="!screenshotMode">
|
||||
<span class="nowrap">
|
||||
{{ festival.times.start | date(dateOptions) }}
|
||||
{{ festival.times.start | time }}
|
||||
</span>
|
||||
–
|
||||
<span class="nowrap">
|
||||
{{ festival.times.end | date }}
|
||||
{{ festival.times.end | time }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="festival.state == 'upcoming'">
|
||||
<template v-if="festival.times.start - now > 24 * 60 * 60">
|
||||
{{ festival.times.start - now | shortDuration | time.in }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ festival.times.start - now | durationHours | time.in }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="festival.state == 'past' && !results && festival.times.result > now">
|
||||
{{ festival.times.result - now | durationHours | resultsIn }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ festival.times.end - now | durationHours | time.remaining }}
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<SplatfestWinnerBar :festival="festival" v-else />
|
||||
</div>
|
||||
|
||||
<div class="splatfest-content has-text-centered" v-if="!screenshotMode && !globalSplatfestMode">
|
||||
<template v-if="festival.state == 'upcoming'">
|
||||
{{ festival.times.start - now | duration | time.in }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ festival.times.start - now | durationHours | time.in }}
|
||||
|
||||
<template v-else-if="festival.state == 'active'">
|
||||
{{ festival.times.end - now | duration | time.remaining }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="festival.state == 'past' && !results && festival.times.result > now">
|
||||
{{ festival.times.result - now | durationHours | resultsIn }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ festival.times.end - now | durationHours | time.remaining }}
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<SplatfestWinnerBar v-else :festival="festival" />
|
||||
<template v-else-if="festival.state == 'past' && !festival.results && festival.times.result > now">
|
||||
{{ festival.times.result - now | duration | resultsIn }}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Spacer at the bottom -->
|
||||
<div v-if="globalSplatfestMode"> </div>
|
||||
</div>
|
||||
|
||||
<div v-if="!screenshotMode && !globalSplatfestMode" class="splatfest-content has-text-centered">
|
||||
<template v-if="festival.state == 'upcoming'">
|
||||
{{ festival.times.start - now | duration | time.in }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="festival.state == 'active'">
|
||||
{{ festival.times.end - now | duration | time.remaining }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="festival.state == 'past' && !festival.results && festival.times.result > now">
|
||||
{{ festival.times.result - now | duration | resultsIn }}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Spacer at the bottom -->
|
||||
<div v-if="globalSplatfestMode">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,84 +1,76 @@
|
||||
<template>
|
||||
<Modal v-if="festivals" class="is-wide splatfest-history-dialog modal-rounded-box" @close="$emit('close')">
|
||||
<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>
|
||||
<Modal @close="$emit('close')" class="is-wide splatfest-history-dialog modal-rounded-box" v-if="festivals">
|
||||
<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">
|
||||
<DropdownBase
|
||||
:label="selectedRegion.name"
|
||||
style="margin: 0 -12px"
|
||||
class="font-splatoon2 is-right-tablet"
|
||||
trigger-class="button is-clear font-splatoon2"
|
||||
>
|
||||
<router-link
|
||||
v-for="regionOption in regions"
|
||||
:key="regionOption.key"
|
||||
class="dropdown-item"
|
||||
:to="regionOption.route"
|
||||
exact
|
||||
>
|
||||
{{ regionOption.name }}
|
||||
</router-link>
|
||||
</DropdownBase>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ref="body" class="modal-card-body">
|
||||
<div v-if="!region" class="columns idol-results">
|
||||
<div class="column has-text-right is-hidden-mobile has-idol">
|
||||
<img src="~@/web/assets/img/pearl.png" width="173" height="290" />
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div class="is-hidden-mobile" style="height: 85px" />
|
||||
<div class="idol-results-container">
|
||||
<IdolResultsBox />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column has-text-left is-hidden-mobile has-idol">
|
||||
<img src="~@/web/assets/img/marina.png" width="172" height="339" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(festival, index) in festivals" :key="festival.festival_id" class="splatfest-history-row">
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="splatfest show-regions" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="festival" history-mode show-regions />
|
||||
<div class="level-right">
|
||||
<DropdownBase
|
||||
:label="selectedRegion.name"
|
||||
style="margin: 0 -12px"
|
||||
class="font-splatoon2 is-right-tablet"
|
||||
trigger-class="button is-clear font-splatoon2"
|
||||
>
|
||||
<router-link v-for="regionOption in regions" class="dropdown-item" :key="regionOption.key" :to="regionOption.route" exact>
|
||||
{{ regionOption.name }}
|
||||
</router-link>
|
||||
</DropdownBase>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<div class="splatfest-results-container">
|
||||
<SplatfestResultsBox
|
||||
v-if="festival.results"
|
||||
:festival="festival"
|
||||
:results="festival.results"
|
||||
history-mode
|
||||
/>
|
||||
|
||||
<div v-else-if="festival.times.result > now" class="has-text-centered font-splatoon2 is-size-5">
|
||||
<div>{{ festival.times.result - now | duration | resultsIn }}</div>
|
||||
<div>
|
||||
{{ festival.times.result | date }}
|
||||
{{ festival.times.result | time }}
|
||||
</div>
|
||||
<div class="modal-card-body" ref="body">
|
||||
<div class="columns idol-results" v-if="!region">
|
||||
<div class="column has-text-right is-hidden-mobile has-idol">
|
||||
<img src="~@/web/assets/img/pearl.png" width="173" height="290" />
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
<div class="is-hidden-mobile" style="height: 85px"></div>
|
||||
<div class="idol-results-container">
|
||||
<IdolResultsBox />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column has-text-left is-hidden-mobile has-idol">
|
||||
<img src="~@/web/assets/img/marina.png" width="172" height="339" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(festival, index) in festivals" class="splatfest-history-row" :key="festival.festival_id">
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="splatfest show-regions" :class="(index % 2 == 0) ? 'tilt-left' : 'tilt-right'">
|
||||
<div class="hook-box">
|
||||
<SplatfestBox :festival="festival" history-mode show-regions />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="level-item">
|
||||
<div class="splatfest-results-container">
|
||||
<SplatfestResultsBox
|
||||
v-if="festival.results"
|
||||
:festival="festival"
|
||||
:results="festival.results"
|
||||
history-mode
|
||||
/>
|
||||
|
||||
<div v-else-if="festival.times.result > now" class="has-text-centered font-splatoon2 is-size-5">
|
||||
<div>{{ festival.times.result - now | duration | resultsIn }}</div>
|
||||
<div>
|
||||
{{ festival.times.result | date }}
|
||||
{{ festival.times.result | time }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
<template>
|
||||
<div class="splatfest-results">
|
||||
<div class="background" />
|
||||
<div class="splatfest-results">
|
||||
<div class="background"></div>
|
||||
|
||||
<div class="columns is-marginless is-gapless is-mobile results-header">
|
||||
<div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
|
||||
{{ $t('splatfest.results.title') }}
|
||||
</div>
|
||||
<div class="columns is-marginless is-gapless is-mobile results-header">
|
||||
<div class="title is-4 font-splatoon1 has-text-centered is-marginless results-header-text">
|
||||
{{ $t('splatfest.results.title') }}
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.alpha_short`, festival.names.alpha_short)">
|
||||
<img :src="festival.images.alpha | localSplatNetImageUrl" />
|
||||
<div class="column">
|
||||
<div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.alpha_short`, festival.names.alpha_short)">
|
||||
<img :src="festival.images.alpha | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-3">
|
||||
<!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.bravo_short`, festival.names.bravo_short)">
|
||||
<img :src="festival.images.bravo | localSplatNetImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-3">
|
||||
<!-- Intentionally left blank since "Results" doesn't quite fit the horizontal space -->
|
||||
</div>
|
||||
<SplatfestResultsRow :festival="festival" type="vote" />
|
||||
|
||||
<div class="column">
|
||||
<div class="image is-48x48" :title="$t(`splatnet.festivals.${festival.festival_id}.names.bravo_short`, festival.names.bravo_short)">
|
||||
<img :src="festival.images.bravo | localSplatNetImageUrl" />
|
||||
<template v-if="!isResultsV4">
|
||||
<SplatfestResultsRow :festival="festival" type="solo" />
|
||||
<SplatfestResultsRow :festival="festival" type="team" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<SplatfestResultsRow :festival="festival" type="regular" />
|
||||
<SplatfestResultsRow :festival="festival" type="challenge" />
|
||||
</template>
|
||||
|
||||
<div class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;" v-if="historyMode">
|
||||
<SplatfestWinnerBar :festival="festival" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SplatfestResultsRow :festival="festival" type="vote" />
|
||||
|
||||
<template v-if="!isResultsV4">
|
||||
<SplatfestResultsRow :festival="festival" type="solo" />
|
||||
<SplatfestResultsRow :festival="festival" type="team" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<SplatfestResultsRow :festival="festival" type="regular" />
|
||||
<SplatfestResultsRow :festival="festival" type="challenge" />
|
||||
</template>
|
||||
|
||||
<div v-if="historyMode" class="has-text-centered is-size-5 title-color font-splatoon2" style="margin-top: 10px;">
|
||||
<SplatfestWinnerBar :festival="festival" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<div class="columns is-mobile result">
|
||||
<div class="column">
|
||||
<div v-if="winner == 'alpha'" class="winner-mark-shadow" />
|
||||
<div v-if="winner == 'alpha'" class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" />
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4" :title="alphaTitle | numberFormat">
|
||||
<div>{{ rates.alpha | wholePercent }}<span class="percent">.{{ rates.alpha | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
|
||||
<div class="columns is-mobile result">
|
||||
<div class="column">
|
||||
<div class="winner-mark-shadow" v-if="winner == 'alpha'"></div>
|
||||
<div class="winner-mark" :style="{ background: festival.colors.alpha.css_rgb }" v-if="winner == 'alpha'"></div>
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4" :title="alphaTitle | numberFormat">
|
||||
<div>{{ rates.alpha | wholePercent }}<span class="percent">.{{ rates.alpha | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
|
||||
</div>
|
||||
<div class="font-splatoon2 title is-7" v-if="showAverage">
|
||||
{{ $t('splatfest.results.average') }}
|
||||
{{ averages.alpha | numberFormat(0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAverage" class="font-splatoon2 title is-7">
|
||||
{{ $t('splatfest.results.average') }}
|
||||
{{ averages.alpha | numberFormat(0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-3 has-text-centered font-splatoon2">
|
||||
{{ $t(`splatfest.results.${type}`) }}
|
||||
</div>
|
||||
<div class="column is-3 has-text-centered font-splatoon2">
|
||||
{{ $t(`splatfest.results.${type}`) }}
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div v-if="winner == 'bravo'" class="winner-mark-shadow" />
|
||||
<div v-if="winner == 'bravo'" class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" />
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4" :title="bravoTitle | numberFormat">
|
||||
<div>{{ rates.bravo | wholePercent }}<span class="percent">.{{ rates.bravo | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
|
||||
<div class="column">
|
||||
<div class="winner-mark-shadow" v-if="winner == 'bravo'"></div>
|
||||
<div class="winner-mark" :style="{ background: festival.colors.bravo.css_rgb }" v-if="winner == 'bravo'"></div>
|
||||
<div class="result-container">
|
||||
<div class="font-splatoon2 title is-4" :title="bravoTitle | numberFormat">
|
||||
<div>{{ rates.bravo | wholePercent }}<span class="percent">.{{ rates.bravo | partialPercent }}{{ $t('splatfest.results.%') }}</span></div>
|
||||
</div>
|
||||
<div class="font-splatoon2 title is-7" v-if="showAverage">
|
||||
{{ $t('splatfest.results.average') }}
|
||||
{{ averages.bravo | numberFormat(0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showAverage" class="font-splatoon2 title is-7">
|
||||
{{ $t('splatfest.results.average') }}
|
||||
{{ averages.bravo | numberFormat(0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="festival-period" style="background-color: #333">
|
||||
<span v-if="winner">{{ winnerText.before }}<span :style="{ color: winnerColor }">{{ teamNames[winner] }}</span>{{ winnerText.after }}</span>
|
||||
</div>
|
||||
<div class="festival-period" style="background-color: #333">
|
||||
<span v-if="winner">{{ winnerText.before }}<span :style="{ color: winnerColor }">{{ teamNames[winner] }}</span>{{ winnerText.after }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,27 +1,21 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="stageDetails"
|
||||
class="stage-image"
|
||||
:class="{ hand: clickable }"
|
||||
:style="style"
|
||||
@click="click"
|
||||
>
|
||||
<figure class="image is-16by9" />
|
||||
<span v-if="showTitle" class="stage-title">{{ name }}</span>
|
||||
<div class="stage-image" :class="{ hand: clickable }" :style="style" @click="click" v-if="stageDetails">
|
||||
<figure class="image is-16by9"></figure>
|
||||
<span class="stage-title" v-if="showTitle">{{ name }}</span>
|
||||
|
||||
<Modal v-if="isOpen" class="is-xwide" @close="isOpen = false">
|
||||
<div class="modal-content tilt-right-slight">
|
||||
<p class="image is-16by9" @click="isOpen = false">
|
||||
<img :src="largeImage" />
|
||||
</p>
|
||||
<p class="has-text-centered">
|
||||
<span class="font-splatoon2">
|
||||
{{ name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
<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>
|
||||
<p class="has-text-centered">
|
||||
<span class="font-splatoon2">
|
||||
{{ name }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user