Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-03-21 17:54:13 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Increase linting level and re-run linter

Browse Source
This commit is contained in:
Matt Isenhower 2023-06-25 21:14:27 -07:00
parent e4e6051999
commit b629bbf189
49 changed files with 346 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.cjs
View File

@ -2,7 +2,7 @@
module.exports = {
"root": true,
"extends": [
"plugin:vue/vue3-essential",
"plugin:vue/vue3-recommended",
"eslint:recommended",
],
"rules": {
@ -12,6 +12,9 @@ module.exports = {
// Vue
"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" } }],
},
"globals": {
"__dirname": "readonly",

6
src/components/Debug/TimeOffsetSelector.vue
View File

@ -1,10 +1,12 @@
<template>
<div class="flex justify-center text-xs">
<div class="flex space-x-2 bg-zinc-700 p-1 rounded">
<div class="bg-zinc-500 rounded font-semibold px-1">Time Offset</div>
<div class="bg-zinc-500 rounded font-semibold px-1">
Time Offset
</div>
<div v-for="part of ['d', 'h', 'm']" :key="part">
<select class="bg-zinc-800 text-right" v-model="values[part]">
<select v-model="values[part]" class="bg-zinc-800 text-right">
<option v-for="i of range(limits[part])" :key="i">
{{ i }}
</option>

4
src/components/LanguageButton.vue
View File

@ -1,7 +1,9 @@
<template>
<select v-model="currentLanguage" class="bg-transparent text-zinc-300 cursor-pointer">
<template v-for="locale in locales" :key="locale.code">
<option :value="locale.code">{{ locale.flag }} {{ locale.name }}</option>
<option :value="locale.code">
{{ locale.flag }} {{ locale.name }}
</option>
</template>
</select>
</template>

23
src/components/ModalDialog.vue
View File

@ -1,18 +1,29 @@
<template>
<TransitionRoot as="template" :show="show" >
<TransitionRoot as="template" :show="show">
<Dialog as="div" class="relative z-20">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-zinc-900/80 transition-opacity backdrop-blur-sm" />
</TransitionChild>
<div class="fixed inset-0 z-20" :class="noScroll ? 'overflow-hidden' : 'overflow-y-auto'">
<div class="flex justify-center p-4 text-center" :class="noScroll ? 'h-full overflow-hidden' : 'min-h-full items-center'">
<TransitionChild as="template" enter="ease-out duration-300"
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0 translate-y-0 scale-95"
enter-to="opacity-100 translate-y-0 scale-100" leave="ease-in duration-200"
enter-to="opacity-100 translate-y-0 scale-100"
leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 scale-100"
leave-to="opacity-0 translate-y-0 scale-95">
leave-to="opacity-0 translate-y-0 scale-95"
>
<DialogPanel :class="innerClass">
<slot />
</DialogPanel>

2
src/components/ProductContainer.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="relative">
<div class="absolute inset-0 product-mask rounded-2xl -z-10" :class="props.bg" :style="bgStyle"></div>
<div class="absolute inset-0 product-mask rounded-2xl -z-10" :class="props.bg" :style="bgStyle" />
<slot />
</div>
</template>

4
src/components/SalmonRunGearBox.vue
View File

@ -1,11 +1,11 @@
<template>
<ProductContainer class="pt-10 pb-4 px-10" bg="bg-zinc-500 bg-monsters" v-if="gear">
<ProductContainer v-if="gear" class="pt-10 pb-4 px-10" bg="bg-zinc-500 bg-monsters">
<div class="flex flex-col items-center space-y-4">
<div>
<img :src="gear.image.url" />
</div>
<div>
<SquidTape class="font-splatoon2 text-2xl bg-splatoon-salmonRun -rotate-2" squidSize="16px">
<SquidTape class="font-splatoon2 text-2xl bg-splatoon-salmonRun -rotate-2" squid-size="16px">
<div class="px-2">
{{ $t(`splatnet.gear.${gear.__splatoon3ink_id}.name`, gear.name) }}
</div>

32
src/components/ScheduleBox.vue
View File

@ -18,15 +18,19 @@
<div>
<RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
</div>
<div class="text-shadow">{{ $t(`splatnet.rules.${store.activeSchedule.settings.vsRule.id}.name`, store.activeSchedule.settings.vsRule.name) }}</div>
<div class="text-shadow">
{{ $t(`splatnet.rules.${store.activeSchedule.settings.vsRule.id}.name`, store.activeSchedule.settings.vsRule.name) }}
</div>
</template>
<template v-else>
<div class="w-32 bg-zinc-600 rounded animate-pulse">&nbsp;</div>
<div class="w-32 bg-zinc-600 rounded animate-pulse">
&nbsp;
</div>
</template>
</div>
<div class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2" v-if="store.activeSchedule">
<div v-if="store.activeSchedule" class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2">
{{ $d(store.activeSchedule.startTime, 'time') }}
&ndash;
{{ $d(store.activeSchedule.endTime, 'time') }}
@ -36,19 +40,19 @@
<div class="flex space-x-1">
<StageImage
class="flex-1"
imgClass="rounded-l-xl"
img-class="rounded-l-xl"
:stage="store.activeSchedule?.settings?.vsStages[0]"
/>
/>
<StageImage
class="flex-1"
imgClass="rounded-r-xl"
img-class="rounded-r-xl"
:stage="store.activeSchedule?.settings?.vsStages[1]"
/>
<div class="flex-1 relative" v-if="tricolor?.isTricolorActive">
/>
<div v-if="tricolor?.isTricolorActive" class="flex-1 relative">
<StageImage
imgClass="rounded-xl"
img-class="rounded-xl"
:stage="tricolor?.tricolorStage"
/>
/>
<div class="absolute top-0 right-0 rounded-full bg-black p-1">
<TricolorIcon
@ -56,15 +60,17 @@
:a="tricolor?.teams[0]?.color"
:b="tricolor?.teams[1]?.color"
:c="tricolor?.teams[2]?.color"
/>
/>
</div>
</div>
</div>
</div>
<div class="mx-2 space-y-2" v-if="nextSchedule && nextSchedule.settings">
<div v-if="nextSchedule && nextSchedule.settings" class="mx-2 space-y-2">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<div class="px-2">{{ $t('times.next') }}</div>
<div class="px-2">
{{ $t('times.next') }}
</div>
</SquidTape>
<ScheduleRow :schedule="nextSchedule" />

4
src/components/ScheduleDialog.vue
View File

@ -23,7 +23,9 @@
<template v-for="{ title, schedules } in sections" :key="title">
<div class="mt-6 mx-2 space-y-2 text-left">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<div class="px-2">{{ $t(title) }}</div>
<div class="px-2">
{{ $t(title) }}
</div>
</SquidTape>
<ScheduleRow v-for="schedule in schedules" :key="schedule.startTime" :schedule="schedule" />

22
src/components/ScheduleRow.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="space-y-2">
<div class="font-splatoon2 sm:hidden" v-if="props.schedule">
<div v-if="props.schedule" class="font-splatoon2 sm:hidden">
<div class="flex items-center space-x-2">
<div>
<RuleIcon :rule="props.schedule.settings.vsRule" class="h-5 drop-shadow-ruleIcon" />
@ -9,7 +9,7 @@
{{ $t(`splatnet.rules.${props.schedule.settings.vsRule.id}.name`, props.schedule.settings.vsRule.name) }}
</div>
<div class="text-shadow text-right flex-1">
<div class="text-sm" v-if="time.isUpcoming(props.schedule.startTime)">
<div v-if="time.isUpcoming(props.schedule.startTime)" class="text-sm">
{{ $t('time.in', { time: formatDurationFromNow(props.schedule.startTime) }) }}
</div>
@ -21,7 +21,7 @@
</div>
</div>
</div>
<div class="sm:hidden bg-zinc-500 rounded animate-pulse w-32" v-else>
<div v-else class="sm:hidden bg-zinc-500 rounded animate-pulse w-32">
&nbsp;
</div>
@ -55,19 +55,25 @@
</template>
<template v-else>
<div class="text-xs lg:text-lg bg-zinc-500 rounded animate-pulse">&nbsp;</div>
<div class="text-sm mx-8 bg-zinc-500 rounded animate-pulse">&nbsp;</div>
<div class="text-sm mx-4 bg-zinc-500 rounded animate-pulse">&nbsp;</div>
<div class="text-xs lg:text-lg bg-zinc-500 rounded animate-pulse">
&nbsp;
</div>
<div class="text-sm mx-8 bg-zinc-500 rounded animate-pulse">
&nbsp;
</div>
<div class="text-sm mx-4 bg-zinc-500 rounded animate-pulse">
&nbsp;
</div>
</template>
</div>
</div>
<div class="flex-1">
<StageImage class="flex-1" imgClass="rounded-l-xl" textSize="text-xs" :stage="props.schedule?.settings.vsStages[0]" />
<StageImage class="flex-1" img-class="rounded-l-xl" text-size="text-xs" :stage="props.schedule?.settings.vsStages[0]" />
</div>
<div class="flex-1">
<StageImage class="flex-1" imgClass="rounded-r-xl" textSize="text-xs" :stage="props.schedule?.settings.vsStages[1]" />
<StageImage class="flex-1" img-class="rounded-r-xl" text-size="text-xs" :stage="props.schedule?.settings.vsStages[1]" />
</div>
</div>
</div>

6
src/components/SplatfestResultsBox.vue
View File

@ -1,5 +1,5 @@
<template>
<ProductContainer class="pt-10 pb-4" bg="bg-camo-purple" :bgStyle="`background-color: ${toRgba(winner.color)};`">
<ProductContainer class="pt-10 pb-4" bg="bg-camo-purple" :bg-style="`background-color: ${toRgba(winner.color)};`">
<div class="space-y-2">
<div class="font-splatoon1 text-2xl lg:text-3xl text-shadow mx-2">
{{ $t('festival.results.title') }}
@ -7,7 +7,7 @@
<div class="mx-2 px-1 bg-zinc-700 bg-opacity-50 backdrop-blur-sm rounded-lg">
<div class="flex justify-center md:justify-center py-2">
<div class="w-36 sm:mx-4 lg:-mx-1"></div>
<div class="w-36 sm:mx-4 lg:-mx-1" />
<template v-for="team in festival.teams" :key="team.id">
<div class="w-12 mx-2 sm:w-20 flex justify-center py-1 rounded" :style="`background-color: ${toRgba(team.color)};`">
<img :src="team.image.url" class="w-6 h-6" />
@ -22,7 +22,7 @@
</div>
<div class="flex bg-zinc-700 bg-opacity-70 rounded-full py-1">
<div class="w-16 lg:w-20 sm:mx-2" v-for="(result, i) in row.results" :key="i">
<div v-for="(result, i) in row.results" :key="i" class="w-16 lg:w-20 sm:mx-2">
<div :class="result.isTop ? 'text-splatoon-yellow' : 'text-zinc-300'">
{{ (result.ratio * 100).toFixed(2) }}%
</div>

14
src/components/Splatoon3Countdown.vue
View File

@ -3,15 +3,21 @@
<div class="mt-6 font-splatoon2" aria-hidden="true">
<div class="font-splatoon2 text-center space-y-2">
<div v-if="isReleased">
<div class="text-zinc-100 text-2xl ss:text-5xl">is out now!</div>
<div class="text-zinc-100 text-2xl ss:text-5xl">
is out now!
</div>
</div>
<div v-else>
<div class="text-zinc-300 ss:text-3xl ss:mb-2">releases in</div>
<div class="text-zinc-100 text-2xl ss:text-5xl">{{ days(remainingTime) }}!</div>
<div class="text-zinc-300 ss:text-3xl ss:mb-2">
releases in
</div>
<div class="text-zinc-100 text-2xl ss:text-5xl">
{{ days(remainingTime) }}!
</div>
</div>
</div>
<div class="bg-blue-pattern rounded-full overflow-hidden my-4">
<div class="h-10 bg-yellow-pattern bg-animated rounded-full" :style="`width: ${percent}%`"></div>
<div class="h-10 bg-yellow-pattern bg-animated rounded-full" :style="`width: ${percent}%`" />
</div>
<div class="flex justify-between text-sm font-medium">
<div class="text-splatoon-yellow ss:text-3xl -rotate-3" :title="formatDate(announceDate)">

4
src/components/SquidTape.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="inline-block text-center px-2 py-1" :class="bg">
<div class="relative">
<div class="absolute squid-tl top-0 left-0" :class="squidBg" :style="squidStyles"></div>
<div class="absolute squid-br bottom-0 right-0" :class="squidBg" :style="squidStyles"></div>
<div class="absolute squid-tl top-0 left-0" :class="squidBg" :style="squidStyles" />
<div class="absolute squid-br bottom-0 right-0" :class="squidBg" :style="squidStyles" />
<div class="label border" :class="props.border" :style="labelStyles">
<slot />
</div>

2
src/components/StageDialog.vue
View File

@ -5,7 +5,7 @@
<span class="sr-only">Close</span>
<XMarkIcon class="h-4 w-4" aria-hidden="true" />
</button>
<img :src="imgUrl" v-if="imgUrl" />
<img v-if="imgUrl" :src="imgUrl" />
</div>
<div class="absolute -top-8 w-full text-center">

16
src/components/StageImage.vue
View File

@ -1,11 +1,15 @@
<template>
<button class="block relative" @click.prevent="open = true">
<div class="bg-zinc-700 aspect-[2/1] overflow-hidden" :class="imgClass">
<img :src="lowRes" v-if="lowRes" />
<div class="bg-zinc-500 animate-pulse h-full" :class="imgClass" v-else>&nbsp;</div>
<img v-if="lowRes" :src="lowRes" />
<div v-else class="bg-zinc-500 animate-pulse h-full" :class="imgClass">
&nbsp;
</div>
</div>
<div class="
<div
v-if="!hideLabel && stage"
class="
absolute
bg-zinc-900
rounded
@ -19,7 +23,11 @@
whitespace-nowrap
font-splatoon2
px-2
" :class="textSize" v-if="!hideLabel && stage">{{ $t(`splatnet.stages.${stage.id}.name`, stage.name) }}</div>
"
:class="textSize"
>
{{ $t(`splatnet.stages.${stage.id}.name`, stage.name) }}
</div>
<StageDialog :stage="stage" :show="open" @close="open = false" />
</button>

20
src/components/TricolorIcon.vue
View File

@ -1,13 +1,19 @@
<template>
<svg viewBox="0 0 36 36" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 36C8.058 36 0 27.942 0 18S8.058 0 18 0s18 8.058 18 18-8.058 18-18 18Zm14.72-18c0-8.13-6.59-14.72-14.72-14.72S3.28 9.87 3.28 18 9.87 32.72 18 32.72 32.72 26.13 32.72 18Z" :fill="a_css"></path>
<path d="m14.706 18.056 2.842 1.214.048-.1c-.848-1.114-1.186-2.598-1.186-2.598l-1.348-.786-2.69-1.57c-.912 1.482-.628 3.384-.628 3.384.986.172 2.522 1.04 2.874 1.246l.032-.028c-.48-.86-.582-1.986-.582-1.986l.37.154c-.03.392.262 1.07.262 1.07h.006ZM17.588 24.908l-.276-.008.016-3.468c-.738-.912-1.808-1.736-3.454-2.598-1.71-.896-3.354-1.194-4.68-1.196-1.03 0-1.868.18-2.394.398-1.258.524-3.31 2.23-2.102 6.26 1.198 3.998 4.38 4.92 4.428 4.934 2.69-1.248 3.106-4.864 3.106-4.864l-.148-.102c-.146.342-.636.904-1.124.914a.59.59 0 0 1-.27-.056c-.854-.392-1.14-1.84-.64-2.432.226-.268.524-.594 1.398-.59.524.002 1.256.126 2.306.452 1.368.426 2.116.984 2.534 1.442.43.472.6 1.084.254 1.076-.136 0-.35-.098-.658-.338-.488-.376-.764-.9-.846-1.328-.35-.39-2.168-.792-2.208-.802 1.37 3.926 3.538 5.43 4.648 5.422a.957.957 0 0 0 .206-.022c.916-.196 1.528-1.296 1.136-3.244a4.5 4.5 0 0 1-1.234.144l.002.006Z" :fill="a_css"></path>
<svg
viewBox="0 0 36 36"
width="36"
height="36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M18 36C8.058 36 0 27.942 0 18S8.058 0 18 0s18 8.058 18 18-8.058 18-18 18Zm14.72-18c0-8.13-6.59-14.72-14.72-14.72S3.28 9.87 3.28 18 9.87 32.72 18 32.72 32.72 26.13 32.72 18Z" :fill="a_css" />
<path d="m14.706 18.056 2.842 1.214.048-.1c-.848-1.114-1.186-2.598-1.186-2.598l-1.348-.786-2.69-1.57c-.912 1.482-.628 3.384-.628 3.384.986.172 2.522 1.04 2.874 1.246l.032-.028c-.48-.86-.582-1.986-.582-1.986l.37.154c-.03.392.262 1.07.262 1.07h.006ZM17.588 24.908l-.276-.008.016-3.468c-.738-.912-1.808-1.736-3.454-2.598-1.71-.896-3.354-1.194-4.68-1.196-1.03 0-1.868.18-2.394.398-1.258.524-3.31 2.23-2.102 6.26 1.198 3.998 4.38 4.92 4.428 4.934 2.69-1.248 3.106-4.864 3.106-4.864l-.148-.102c-.146.342-.636.904-1.124.914a.59.59 0 0 1-.27-.056c-.854-.392-1.14-1.84-.64-2.432.226-.268.524-.594 1.398-.59.524.002 1.256.126 2.306.452 1.368.426 2.116.984 2.534 1.442.43.472.6 1.084.254 1.076-.136 0-.35-.098-.658-.338-.488-.376-.764-.9-.846-1.328-.35-.39-2.168-.792-2.208-.802 1.37 3.926 3.538 5.43 4.648 5.422a.957.957 0 0 0 .206-.022c.916-.196 1.528-1.296 1.136-3.244a4.5 4.5 0 0 1-1.234.144l.002.006Z" :fill="a_css" />
<path d="m19.714 15.148-2.474 1.856.064.092c1.39-.176 2.842.272 2.842.272l.876-.5c.384-1.128.982-1.966 1.738-2.768.116-.124.234-.24.352-.352-.758-.634-1.52-.934-1.52-.934-.642.768-2.164 1.666-2.516 1.868l.008.042c.986.014 2.01.49 2.01.49l-.318.244c-.324-.222-1.058-.308-1.058-.308l-.004-.002ZM11.624 15.282a4.51 4.51 0 0 1 .512-1.214l.144-.234 3.244 1.894c1.146-.19 2.382-.704 3.93-1.684 2.9-1.838 4.062-4.438 4.228-5.73.174-1.352-.276-3.982-4.37-4.95s-6.488 1.37-6.488 1.37c-.264 2.954 2.66 5.122 2.66 5.122l.164-.078c-.264-.352-.556-1.276-.048-1.636.766-.544 2.164-.068 2.426.662.19.528.42 1.288-1.732 3.274-1.052.972-1.91 1.34-2.516 1.474-.866.192-1.718-.192-.438-.718.568-.234 1.162-.212 1.574-.068.52-.11 1.8-1.514 1.8-1.514-4.358-.828-6.784.508-7.106 1.506-.276.854.308 1.886 2.02 2.526l-.004-.002Z" :fill="b_css"></path>
<path d="M18 0C11.124 0 5.15 3.856 2.118 9.522l2.464 2.424c2.31-5.108 7.446-8.666 13.416-8.666 4.914 0 9.262 2.41 11.936 6.11l3.352-.894C30.11 3.396 24.452 0 18 0Z" :fill="b_css"></path>
<path d="m19.714 15.148-2.474 1.856.064.092c1.39-.176 2.842.272 2.842.272l.876-.5c.384-1.128.982-1.966 1.738-2.768.116-.124.234-.24.352-.352-.758-.634-1.52-.934-1.52-.934-.642.768-2.164 1.666-2.516 1.868l.008.042c.986.014 2.01.49 2.01.49l-.318.244c-.324-.222-1.058-.308-1.058-.308l-.004-.002ZM11.624 15.282a4.51 4.51 0 0 1 .512-1.214l.144-.234 3.244 1.894c1.146-.19 2.382-.704 3.93-1.684 2.9-1.838 4.062-4.438 4.228-5.73.174-1.352-.276-3.982-4.37-4.95s-6.488 1.37-6.488 1.37c-.264 2.954 2.66 5.122 2.66 5.122l.164-.078c-.264-.352-.556-1.276-.048-1.636.766-.544 2.164-.068 2.426.662.19.528.42 1.288-1.732 3.274-1.052.972-1.91 1.34-2.516 1.474-.866.192-1.718-.192-.438-.718.568-.234 1.162-.212 1.574-.068.52-.11 1.8-1.514 1.8-1.514-4.358-.828-6.784.508-7.106 1.506-.276.854.308 1.886 2.02 2.526l-.004-.002Z" :fill="b_css" />
<path d="M18 0C11.124 0 5.15 3.856 2.118 9.522l2.464 2.424c2.31-5.108 7.446-8.666 13.416-8.666 4.914 0 9.262 2.41 11.936 6.11l3.352-.894C30.11 3.396 24.452 0 18 0Z" :fill="b_css" />
<path d="M20.84 23.48a3.97 3.97 0 0 1-.136-.488c-.21-.958-.222-2.256-.222-2.614l-.038-.012c-.504.846-1.428 1.496-1.428 1.496v-.012h-.002l-.052-.398c.354-.17.796-.762.796-.762l-.37-3.058-.11.008c-.542 1.292-1.656 2.326-1.656 2.326l-.008 1.846v-.004l-.016 2.82c1.724.048 3.218-1.126 3.244-1.146l-.002-.002ZM23.694 27.544c1.082.826 3.586 1.752 6.472-1.308 2.688-2.852 2.154-5.86 2.068-6.258-.004-.022-.008-.034-.008-.034-2.426-1.706-5.766-.258-5.766-.258l-.014.168c.426-.05 1.324.146 1.43.722.004.022.008.044.01.066.088.936-1.022 1.908-1.786 1.77-.552-.1-1.326-.28-1.97-3.138v-.012c-.318-1.398-.208-2.324-.022-2.916.21-.666.724-1.144.844-.652.036.134.04.342 0 .642-.082.61-.398 1.112-.728 1.396-.072.22-.004.686.096 1.142.13.59.312 1.162.312 1.162 2.308-2.678 2.812-4.98 2.566-6.198-.064-.304-.174-.542-.314-.698-.652-.722-1.99-.674-3.558.802l-.008-.006a8.63 8.63 0 0 0-.358.358c-.686.728-1.208 1.462-1.566 2.36l.01-.006c-.446 1.112-.636 2.472-.558 4.378.026.642.106 1.244.226 1.804.52 2.43 1.78 4.068 2.62 4.71l.002.004Z" :fill="c_css"></path>
<path d="m33.288 8.496-3.352.892a14.653 14.653 0 0 1 2.784 8.61c0 7.626-5.8 13.898-13.232 14.646l-.884 3.342h.006c9.658-.322 17.388-8.252 17.388-17.988 0-3.488-.994-6.744-2.712-9.504l.002.002Z" :fill="c_css"></path>
<path d="M20.84 23.48a3.97 3.97 0 0 1-.136-.488c-.21-.958-.222-2.256-.222-2.614l-.038-.012c-.504.846-1.428 1.496-1.428 1.496v-.012h-.002l-.052-.398c.354-.17.796-.762.796-.762l-.37-3.058-.11.008c-.542 1.292-1.656 2.326-1.656 2.326l-.008 1.846v-.004l-.016 2.82c1.724.048 3.218-1.126 3.244-1.146l-.002-.002ZM23.694 27.544c1.082.826 3.586 1.752 6.472-1.308 2.688-2.852 2.154-5.86 2.068-6.258-.004-.022-.008-.034-.008-.034-2.426-1.706-5.766-.258-5.766-.258l-.014.168c.426-.05 1.324.146 1.43.722.004.022.008.044.01.066.088.936-1.022 1.908-1.786 1.77-.552-.1-1.326-.28-1.97-3.138v-.012c-.318-1.398-.208-2.324-.022-2.916.21-.666.724-1.144.844-.652.036.134.04.342 0 .642-.082.61-.398 1.112-.728 1.396-.072.22-.004.686.096 1.142.13.59.312 1.162.312 1.162 2.308-2.678 2.812-4.98 2.566-6.198-.064-.304-.174-.542-.314-.698-.652-.722-1.99-.674-3.558.802l-.008-.006a8.63 8.63 0 0 0-.358.358c-.686.728-1.208 1.462-1.566 2.36l.01-.006c-.446 1.112-.636 2.472-.558 4.378.026.642.106 1.244.226 1.804.52 2.43 1.78 4.068 2.62 4.71l.002.004Z" :fill="c_css" />
<path d="m33.288 8.496-3.352.892a14.653 14.653 0 0 1 2.784 8.61c0 7.626-5.8 13.898-13.232 14.646l-.884 3.342h.006c9.658-.322 17.388-8.252 17.388-17.988 0-3.488-.994-6.744-2.712-9.504l.002.002Z" :fill="c_css" />
</svg>
</template>

30
src/components/challenge/ChallengeScheduleBox.vue
View File

@ -20,17 +20,23 @@
<div>
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
</div>
<div class="text-shadow">{{ $t(`splatnet.rules.${event.settings.vsRule.id}.name`, event.settings.vsRule.name) }}</div>
<div class="text-shadow">
{{ $t(`splatnet.rules.${event.settings.vsRule.id}.name`, event.settings.vsRule.name) }}
</div>
</template>
<template v-else>
<div class="w-32 bg-zinc-600 rounded animate-pulse">&nbsp;</div>
<div class="w-32 bg-zinc-600 rounded animate-pulse">
&nbsp;
</div>
</template>
</div>
<div v-if="event.activeTimePeriod">
<SquidTape class="font-splatoon2 text-sm drop-shadow rotate-6">
<div class="px-2">{{ $t('events.now_open') }}</div>
<div class="px-2">
{{ $t('events.now_open') }}
</div>
</SquidTape>
</div>
</div>
@ -38,14 +44,14 @@
<div class="flex space-x-1">
<StageImage
class="flex-1"
imgClass="rounded-l-xl"
img-class="rounded-l-xl"
:stage="event.settings?.vsStages[0]"
/>
/>
<StageImage
class="flex-1"
imgClass="rounded-r-xl"
img-class="rounded-r-xl"
:stage="event.settings?.vsStages[1]"
/>
/>
</div>
<div class="mx-2 space-y-2 ss:hidden">
@ -53,7 +59,7 @@
<template v-if="event.pastTimePeriods?.length">
<div class="divide-y-2 divide-dashed divide-zinc-600 font-splatoon">
<div v-for="timePeriod in event.pastTimePeriods" :key="timePeriod.startTime" class="flex flex-row justify-center">
<ChallengeScheduleRow :event="event" :timePeriod="timePeriod" class="my-2"/>
<ChallengeScheduleRow :event="event" :time-period="timePeriod" class="my-2" />
</div>
</div>
</template>
@ -61,12 +67,14 @@
<!-- Current/future time periods -->
<template v-if="event.currentTimePeriods?.length">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2 mt-4">
<div class="px-2">{{ event.activeTimePeriod ? $t('events.now') : $t('events.available') }}</div>
<div class="px-2">
{{ event.activeTimePeriod ? $t('events.now') : $t('events.available') }}
</div>
</SquidTape>
<div class="divide-y-2 divide-dashed divide-zinc-400 font-splatoon">
<div v-for="timePeriod in event.currentTimePeriods" :key="timePeriod.startTime" class="flex flex-row justify-center">
<ChallengeScheduleRow :event="event" :timePeriod="timePeriod" class="my-2"/>
<ChallengeScheduleRow :event="event" :time-period="timePeriod" class="my-2" />
</div>
</div>
</template>
@ -76,7 +84,7 @@
<div
class="font-splatoon2 mx-2 p-2 text-zinc-200 bg-zinc-900 bg-opacity-50 backdrop-blur-sm rounded-lg"
v-html="$t(`splatnet.events.${event.settings.leagueMatchEvent.id}.regulation`, event.settings.leagueMatchEvent.regulation)"
/>
/>
</div>
</ProductContainer>
</template>

30
src/components/challenge/ChallengeScheduleRow.vue
View File

@ -1,23 +1,23 @@
<template>
<template v-if="event && timePeriod">
<div class="flex items-center w-full font-splatoon2" :class="isCurrent ? 'text-zinc-100' : 'text-zinc-300 opacity-60'">
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
<div class="px-2 text-shadow whitespace-pre">
{{ $d(timePeriod.startTime, 'dateTimeShortWeekday') }}
&ndash;
{{ $d(timePeriod.endTime, 'dateTimeShort') }}
</div>
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6 drop-shadow-ruleIcon" />
<div class="px-2 text-shadow whitespace-pre">
{{ $d(timePeriod.startTime, 'dateTimeShortWeekday') }}
&ndash;
{{ $d(timePeriod.endTime, 'dateTimeShort') }}
</div>
<div class="flex justify-end w-full" v-if="isCurrent">
<div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
<template v-if="isActive">
{{ $t('time.remaining', { time: formatDurationFromNow(event.activeTimePeriod.endTime) }) }}
</template>
<template v-else>
{{ $t('time.in', { time: formatDurationFromNow(timePeriod.startTime, true) }) }}
</template>
</div>
<div v-if="isCurrent" class="flex justify-end w-full">
<div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
<template v-if="isActive">
{{ $t('time.remaining', { time: formatDurationFromNow(event.activeTimePeriod.endTime) }) }}
</template>
<template v-else>
{{ $t('time.in', { time: formatDurationFromNow(timePeriod.startTime, true) }) }}
</template>
</div>
</div>
</div>
</template>
</template>

14
src/components/gear/DailyDropGear.vue
View File

@ -6,14 +6,18 @@
<img :src="brand.image.url" />
</div>
<div class="flex flex-col items-center -space-y-2">
<SquidTape class="font-splatoon2 text-sm text-black rounded-sm -rotate-2 z-10" bg="bg-splatoon-green" squidBg="bg-black"
border="border border-black">
<SquidTape
class="font-splatoon2 text-sm text-black rounded-sm -rotate-2 z-10"
bg="bg-splatoon-green"
squid-bg="bg-black"
border="border border-black"
>
<div class="px-1">
{{ $t('gear.dailydrop') }}
</div>
</SquidTape>
<div class="relative -rotate-2" v-if="brand">
<div v-if="brand" class="relative -rotate-2">
<img src="@/assets/img/gesotown-daily-drop-bg.png" class="w-64" />
<div class="absolute inset-0 flex items-center ml-4">
<div class="font-splatoon2 text-lg">
@ -30,11 +34,11 @@
</div>
<div class="space-y-4 px-4">
<GearCardHorizontal
class="bg-zinc-100 bg-opacity-20 backdrop-blur-sm border border-zinc-50 border-opacity-20 rounded-lg"
v-for="gear in gears"
:key="gear.id"
class="bg-zinc-100 bg-opacity-20 backdrop-blur-sm border border-zinc-50 border-opacity-20 rounded-lg"
:gear="gear"
/>
/>
</div>
</template>

10
src/components/gear/GearCard.vue
View File

@ -56,10 +56,14 @@
<!-- Time left/Order button -->
<div class="absolute top-1 left-6 space-y-2">
<div class="hidden mobile:block -ml-4" v-if="false">
<div v-if="false" class="hidden mobile:block -ml-4">
<a :href="shopUrl">
<SquidTape class="font-splatoon2 text-sm text-black rounded-sm -rotate-3" bg="bg-splatoon-yellow" squidBg="bg-black"
border="border border-black">
<SquidTape
class="font-splatoon2 text-sm text-black rounded-sm -rotate-3"
bg="bg-splatoon-yellow"
squid-bg="bg-black"
border="border border-black"
>
<div class="px-1">
{{ $t('gear.order') }}
</div>

18
src/components/gear/GearCardHorizontal.vue
View File

@ -46,10 +46,14 @@
</div>
<!-- Order button -->
<div class="absolute top-0 right-0 hidden mobile:block" v-if="false">
<div v-if="false" class="absolute top-0 right-0 hidden mobile:block">
<a :href="shopUrl">
<SquidTape class="font-splatoon2 text-sm text-black rounded-sm -rotate-2" bg="bg-splatoon-yellow" squidBg="bg-black"
border="border border-black">
<SquidTape
class="font-splatoon2 text-sm text-black rounded-sm -rotate-2"
bg="bg-splatoon-yellow"
squid-bg="bg-black"
border="border border-black"
>
<div class="px-1">
{{ $t('gear.order') }}
</div>
@ -58,16 +62,16 @@
</div>
<!-- Price/Order button -->
<div class="flex-none flex flex-col self-stretch items-end" v-if="false">
<div v-if="false" class="flex-none flex flex-col self-stretch items-end">
<div class="flex-1">
<div class="hidden mobile:block" v-if="false">
<div v-if="false" class="hidden mobile:block">
<a :href="shopUrl">
<SquidTape
class="font-splatoon2 text-sm text-black rounded-sm -rotate-2"
bg="bg-splatoon-yellow"
squidBg="bg-black"
squid-bg="bg-black"
border="border border-black"
>
>
<div class="px-1">
{{ $t('gear.order') }}
</div>

12
src/components/gear/RegularGear.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="relative">
<div class="bg-paper absolute inset-0 -z-50"></div>
<div class="bg-paper absolute inset-0 -z-50" />
<div class="absolute bottom-0 inset-x-0 -mb-px">
<img src="@/assets/img/paper-tear-overlay-w.png" />
</div>
@ -17,10 +17,10 @@
<SquidTape
class="font-splatoon1 text-2xl text-black rounded-sm -rotate-2 z-10"
bg="bg-splatoon-orange"
squidBg="bg-black"
squid-bg="bg-black"
border="border border-black"
squidSize="15px"
>
squid-size="15px"
>
<div class="px-1">
{{ $t("gear.sale") }}
</div>
@ -29,14 +29,14 @@
<template v-if="gears && gears.length">
<div class="md:hidden px-2">
<div class="bg-horiz-card" v-for="gear in gears" :key="gear.id">
<div v-for="gear in gears" :key="gear.id" class="bg-horiz-card">
<GearCardHorizontal :gear="gear" />
</div>
</div>
<div class="hidden md:block px-2">
<div class="flex flex-wrap justify-center max-w-3xl">
<div class="my-6 w-1/3 flex justify-center" v-for="gear in gears" :key="gear.id">
<div v-for="gear in gears" :key="gear.id" class="my-6 w-1/3 flex justify-center">
<GearCard :gear="gear" />
</div>
</div>

23
src/components/salmonrun/ExpandedSalmonRunRow.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="font-splatoon2 space-y-1" v-if="schedule">
<div v-if="schedule" class="font-splatoon2 space-y-1">
<div class="flex gap-2">
<img src="@/assets/img/modes/coop.eggstra.svg" :title="$t('salmonrun.bigrun')" class="w-6 -mr-1" v-if="eggstra" />
<img v-if="eggstra" src="@/assets/img/modes/coop.eggstra.svg" :title="$t('salmonrun.bigrun')" class="w-6 -mr-1" />
<div class="text-lg text-shadow text-zinc-200 ss:hidden">
{{ $d(schedule.startTime, 'dateTimeShort') }}
@ -10,33 +10,34 @@
</div>
<div class="hidden ss:block text-shadow text-white text-xl">
<KingSalmonid :schedule="schedule" class="inline-block -mb-1 mr-2" v-if="!eggstra"/>
<KingSalmonid v-if="!eggstra" :schedule="schedule" class="inline-block -mb-1 mr-2" />
<div class="inline-block" v-if="time.isUpcoming(schedule.startTime)">
<div v-if="time.isUpcoming(schedule.startTime)" class="inline-block">
Shift opens
{{ $t('time.in', { time: formatDurationHoursFromNow(schedule.startTime, true) }) }}
</div>
<div class="inline-block" v-else>
<div v-else class="inline-block">
{{ $t('time.remaining', { time: formatDurationHoursFromNow(schedule.endTime) }) }}
</div>
</div>
<div
v-if="schedule.isBigRun"
class="bg-zinc-800 bg-opacity-80 text-sm text-white rounded-lg px-2 border-2 border-splatoon-bigRun"
v-if="schedule.isBigRun">
>
<img src="@/assets/img/modes/coop.bigrun.svg" :title="$t('salmonrun.bigrun')" class="w-4 inline-block" />
{{ $t('salmonrun.bigrun') }}
</div>
</div>
<div class="text-shadow text-zinc-300 ss:hidden" v-if="!time.isUpcoming(schedule.startTime)">
<KingSalmonid :schedule="schedule" class="inline-block align-middle" v-if="!eggstra" />
<div v-if="!time.isUpcoming(schedule.startTime)" class="text-shadow text-zinc-300 ss:hidden">
<KingSalmonid v-if="!eggstra" :schedule="schedule" class="inline-block align-middle" />
{{ $t('time.remaining', { time: formatDurationFromNow(schedule.endTime) }) }}
</div>
<div class="flex items-center space-x-2">
<StageImage class="flex-1" imgClass="rounded-lg" :stage="schedule.settings.coopStage" />
<StageImage class="flex-1" img-class="rounded-lg" :stage="schedule.settings.coopStage" />
<div class="flex flex-col items-center space-y-1">
<div class="text-sm text-center text-shadow text-zinc-200">
@ -46,8 +47,8 @@
<div class="bg-zinc-900 bg-opacity-30 rounded-full backdrop-blur-sm px-2">
<SalmonRunWeapons
:weapons="schedule.settings.weapons"
weaponClass="w-10 sm:w-14"
/>
weapon-class="w-10 sm:w-14"
/>
</div>
</div>
</div>

8
src/components/salmonrun/KingSalmonid.vue
View File

@ -1,17 +1,17 @@
<template>
<div>
<img
v-if="schedule.__splatoon3ink_king_salmonid_guess === 'Cohozuna'"
src="@/assets/img/king-cohozuna.png"
:class="size"
:title="$t('salmonrun.kings.maybe-cohozuna')"
v-if="schedule.__splatoon3ink_king_salmonid_guess === 'Cohozuna'"
/>
/>
<img
v-if="schedule.__splatoon3ink_king_salmonid_guess === 'Horrorboros'"
src="@/assets/img/king-horrorboros.png"
:class="size"
:title="$t('salmonrun.kings.maybe-horrorboros')"
v-if="schedule.__splatoon3ink_king_salmonid_guess === 'Horrorboros'"
/>
/>
</div>
</template>

26
src/components/salmonrun/SalmonRunBox.vue
View File

@ -1,37 +1,41 @@
<template>
<ProductContainer :bg="eggstra ? 'bg-splatoon-eggstraWork bg-monsters' : 'bg-splatoon-salmonRun bg-monsters'" class="pt-8 overflow-hidden rounded-2xl">
<div class="space-y-2">
<div class="font-splatoon1 text-3xl mx-4 text-shadow" v-if="eggstra">
<div v-if="eggstra" class="font-splatoon1 text-3xl mx-4 text-shadow">
{{ $t('salmonrun.eggstrawork') }}
</div>
<div class="font-splatoon1 text-3xl mx-4 text-shadow" v-else>
<div v-else class="font-splatoon1 text-3xl mx-4 text-shadow">
{{ $t('salmonrun.title') }}
</div>
<div class="flex">
<!-- Character graphic -->
<div class="flex-1 bg-eggstra hidden md:block" v-if="eggstra"></div>
<div class="flex-1 bg-character hidden md:block" v-else></div>
<div v-if="eggstra" class="flex-1 bg-eggstra hidden md:block" />
<div v-else class="flex-1 bg-character hidden md:block" />
<!-- Main content -->
<div class="md:w-2/3 mx-2 pb-2">
<div class="mb-6 space-y-2" v-if="activeSchedule">
<div v-if="activeSchedule" class="mb-6 space-y-2">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<div class="px-2">{{ $t('times.now') }}</div>
<div class="px-2">
{{ $t('times.now') }}
</div>
</SquidTape>
<ExpandedSalmonRunRow :schedule="activeSchedule" :eggstra="eggstra"/>
<ExpandedSalmonRunRow :schedule="activeSchedule" :eggstra="eggstra" />
</div>
<div class="py-1 bg-zinc-900 bg-opacity-70 rounded-lg backdrop-blur-sm" v-if="upcomingSchedules.length">
<div v-if="upcomingSchedules.length" class="py-1 bg-zinc-900 bg-opacity-70 rounded-lg backdrop-blur-sm">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2">
<div class="px-2">{{ $t('times.future') }}</div>
<div class="px-2">
{{ $t('times.future') }}
</div>
</SquidTape>
<div class="mx-2 divide-y-2 divide-dashed divide-zinc-400">
<div v-for="schedule in upcomingSchedules" :key="schedule.startTime">
<ExpandedSalmonRunRow class="my-3" :schedule="schedule" v-if="isScreenshot || eggstra" :eggstra="eggstra"/>
<SalmonRunRow class="my-2" :schedule="schedule" v-else />
<ExpandedSalmonRunRow v-if="isScreenshot || eggstra" class="my-3" :schedule="schedule" :eggstra="eggstra" />
<SalmonRunRow v-else class="my-2" :schedule="schedule" />
</div>
</div>
</div>

12
src/components/salmonrun/SalmonRunRow.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="font-splatoon2 space-y-1" v-if="schedule">
<div v-if="schedule" class="font-splatoon2 space-y-1">
<div class="flex items-center">
<div>
<img src="@/assets/img/modes/coop.bigrun.svg" :title="$t('salmonrun.bigrun')" class="w-6 mr-1" v-if="schedule.isBigRun" />
<img src="@/assets/img/modes/coop.svg" :title="$t('salmonrun.title')" class="w-6 mr-1" v-else />
<img v-if="schedule.isBigRun" src="@/assets/img/modes/coop.bigrun.svg" :title="$t('salmonrun.bigrun')" class="w-6 mr-1" />
<img v-else src="@/assets/img/modes/coop.svg" :title="$t('salmonrun.title')" class="w-6 mr-1" />
</div>
<div class="flex-1 text-shadow text-zinc-200">
@ -18,20 +18,20 @@
</div>
<div class="flex items-center space-x-2">
<StageImage class="w-1/5" imgClass="rounded" :stage="schedule.settings.coopStage" hide-label />
<StageImage class="w-1/5" img-class="rounded" :stage="schedule.settings.coopStage" hide-label />
<div class="flex-1 text-sm text-zinc-300 text-shadow">
<KingSalmonid :schedule="schedule" class="inline-block align-middle" size="w-5" />
{{ $t(`splatnet.stages.${schedule.settings.coopStage.id}.name`, schedule.settings.coopStage.name) }}
<span class="text-xs inline-block bg-splatoon-bigRun bg-opacity-80 text-white rounded px-2" v-if="schedule.isBigRun">
<span v-if="schedule.isBigRun" class="text-xs inline-block bg-splatoon-bigRun bg-opacity-80 text-white rounded px-2">
{{ $t('salmonrun.bigrun') }}
</span>
</div>
<div class="flex flex-col items-center space-y-1">
<SalmonRunWeapons :weapons="schedule.settings.weapons" weaponClass="w-8 sm:w-10" />
<SalmonRunWeapons :weapons="schedule.settings.weapons" weapon-class="w-8 sm:w-10" />
</div>
</div>
</div>

2
src/components/salmonrun/SalmonRunWeapons.vue
View File

@ -6,7 +6,7 @@
:title="$t(`splatnet.weapons.${weapon.__splatoon3ink_id}.name`, weapon.name)"
class="aspect-square hover:scale-[1.15] hover:z-10 transition-transform"
:class="weaponClass"
/>
/>
</div>
</div>
</template>

9
src/components/screenshots/DailyDropGear.vue
View File

@ -3,8 +3,13 @@
<div class="space-y-4">
<div>
<div class="flex flex-col items-center -mt-10 -space-y-2">
<SquidTape class="font-splatoon2 text-2xl text-black rounded-sm -rotate-2 z-10" bg="bg-splatoon-green"
squidBg="bg-black" border="border-2 border-black" squidSize="20px">
<SquidTape
class="font-splatoon2 text-2xl text-black rounded-sm -rotate-2 z-10"
bg="bg-splatoon-green"
squid-bg="bg-black"
border="border-2 border-black"
squid-size="20px"
>
<div class="px-3 py-1">
The Daily Drop
</div>

15
src/components/screenshots/RegularGear.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="relative">
<div class="bg-paper absolute inset-0 -z-50"></div>
<div class="bg-paper absolute inset-0 -z-50" />
<div class="absolute bottom-0 inset-x-0 -mb-px">
<img src="@/assets/img/paper-tear-overlay-w.png" />
</div>
@ -14,8 +14,13 @@
<div class="pb-24 lg:pb-36">
<div class="text-center pt-4">
<SquidTape class="font-splatoon1 text-4xl text-black rounded-sm -rotate-2 z-10" bg="bg-splatoon-orange"
squidBg="bg-black" border="border-2 border-black" squidSize="25px">
<SquidTape
class="font-splatoon1 text-4xl text-black rounded-sm -rotate-2 z-10"
bg="bg-splatoon-orange"
squid-bg="bg-black"
border="border-2 border-black"
squid-size="25px"
>
<div class="px-3 py-1">
Gear on Sale Now
</div>
@ -25,12 +30,12 @@
<div class="mx-8 space-x-6 flex">
<div class="w-96 flex justify-center items-center">
<div class="scale-[1.85]">
<GearCard class="w-56" :gear="latestGear" v-if="latestGear" />
<GearCard v-if="latestGear" class="w-56" :gear="latestGear" />
</div>
</div>
<div class="flex flex-wrap justify-center max-w-2xl">
<div class="my-4 w-1/3 flex justify-center" v-for="gear in gears" :key="gear.id">
<div v-for="gear in gears" :key="gear.id" class="my-4 w-1/3 flex justify-center">
<GearCard :gear="gear" />
</div>
</div>

31
src/components/screenshots/ScreenshotScheduleBox.vue
View File

@ -7,46 +7,47 @@
</div>
</div>
<div class="pt-2 pb-6 px-2 space-y-2" v-if="store.activeSchedule">
<div v-if="store.activeSchedule" class="pt-2 pb-6 px-2 space-y-2">
<div class="flex items-center justify-between font-splatoon2">
<div class="flex items-center space-x-2 text-xl">
<div>
<RuleIcon :rule="store.activeSchedule.settings.vsRule" class="h-8 drop-shadow-ruleIcon" />
</div>
<div class="text-shadow">{{ store.activeSchedule.settings.vsRule.name }}</div>
<div class="text-shadow">
{{ store.activeSchedule.settings.vsRule.name }}
</div>
</div>
<div>
<div class="flex items-center" v-if="type.badge">
<div v-if="type.badge" class="flex items-center">
<img :src="type.img" class="h-8" />
<div v-if="type.badge" class="font-splatoon2 text-xl bg-splatoon-blue px-2 drop-shadow rounded">
{{ $t(type.badge) }}
</div>
</div>
</div>
</div>
<div class="space-y-8">
<StageImage
class="flex-1"
imgClass="rounded-2xl"
img-class="rounded-2xl"
:stage="store.activeSchedule.settings.vsStages[0]"
textSize="text-xl"
/>
text-size="text-xl"
/>
<StageImage
class="flex-1"
imgClass="rounded-2xl"
img-class="rounded-2xl"
:stage="store.activeSchedule.settings.vsStages[1]"
textSize="text-xl"
/>
text-size="text-xl"
/>
<div class="flex-1 relative" v-if="tricolor?.isTricolorActive">
<div v-if="tricolor?.isTricolorActive" class="flex-1 relative">
<StageImage
imgClass="rounded-2xl"
img-class="rounded-2xl"
:stage="tricolor?.tricolorStage"
textSize="text-xl"
/>
text-size="text-xl"
/>
<div class="absolute top-0 right-0 rounded-full bg-black p-1">
<TricolorIcon
@ -54,7 +55,7 @@
:a="tricolor?.teams[0]?.color"
:b="tricolor?.teams[1]?.color"
:c="tricolor?.teams[2]?.color"
/>
/>
</div>
</div>
</div>

7
src/components/splats/Splat1.vue
View File

File diff suppressed because one or more lines are too long

7
src/components/splats/Splat2.vue
View File

File diff suppressed because one or more lines are too long

7
src/components/splats/Splat3.vue
View File

File diff suppressed because one or more lines are too long

7
src/components/splats/Splat4.vue
View File

File diff suppressed because one or more lines are too long

7
src/components/splats/Splat5.vue
View File

File diff suppressed because one or more lines are too long

7
src/components/splats/Splat6.vue
View File

File diff suppressed because one or more lines are too long

6
src/layouts/MainLayout.vue
View File

@ -2,10 +2,12 @@
<main class="min-h-screen flex flex-col overflow-hidden">
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 justify-between items-center mx-4 my-4 md:mx-12 z-10">
<div class="font-splatoon1 text-5xl text-shadow-lg">
<router-link to="/">Splatoon 3</router-link>
<router-link to="/">
Splatoon 3
</router-link>
</div>
<div class="justify-end font-splatoon2 text-3xl text-zinc-200" v-if="props.title">
<div v-if="props.title" class="justify-end font-splatoon2 text-3xl text-zinc-200">
{{ props.title }}
</div>
</div>

2
src/layouts/ScreenshotLayout.vue
View File

@ -2,7 +2,7 @@
<main class="min-h-screen flex flex-col overflow-hidden">
<slot />
<div class="h-16"></div>
<div class="h-16" />
<div class="h-12 m-4 bg-black bg-opacity-50 backdrop-blur-sm rounded-full absolute bottom-0 inset-x-0">
<div class="flex justify-between h-full font-splatoon2 text-sm text-zinc-300">

8
src/views/AboutView.vue
View File

@ -10,7 +10,9 @@
<ProductContainer class="py-12 bg-octoarrow">
<div class="faq text-zinc-300 px-10">
<div class="space-y-6">
<h1 class="font-splatoon2">{{ $t('about.title') }}</h1>
<h1 class="font-splatoon2">
{{ $t('about.title') }}
</h1>
<div>
<h2>{{ $t('about.subtitle-1') }}</h2>
@ -67,7 +69,9 @@
</div>
<div>
<router-link to="/">&laquo; {{ $t('about.schedules') }}</router-link>
<router-link to="/">
&laquo; {{ $t('about.schedules') }}
</router-link>
</div>
</div>
</div>

14
src/views/ChallengesView.vue
View File

@ -4,13 +4,13 @@
<div class="mx-4 md:mx-12 max-w-screen-2xl w-full my-6">
<div v-if="store.currentSchedules?.length" class="flex flex-col lg:flex-row items-center justify-center gap-10">
<div v-for="(event, i) in store.currentSchedules" :key="i" class="max-w-xl">
<ChallengeScheduleBox
:event="event"
type="challenge"
class="w-full"
:class="(i % 2) ? 'md:rotate-1' : 'md:-rotate-1'"
/>
</div>
<ChallengeScheduleBox
:event="event"
type="challenge"
class="w-full"
:class="(i % 2) ? 'md:rotate-1' : 'md:-rotate-1'"
/>
</div>
</div>
<!-- No events -->

10
src/views/HomeView.vue
View File

@ -16,24 +16,24 @@
</template>
</div>
<div class="flex justify-center" v-if="usSplatfests.upcomingFestival">
<div v-if="usSplatfests.upcomingFestival" class="flex justify-center">
<SplatfestBox
:festival="usSplatfests.upcomingFestival"
class="flex-1 max-w-md md:-rotate-1"
/>
/>
</div>
<div class="flex flex-wrap items-center justify-center gap-y-6 md:gap-x-6" v-if="usSplatfests.recentFestival">
<div v-if="usSplatfests.recentFestival" class="flex flex-wrap items-center justify-center gap-y-6 md:gap-x-6">
<SplatfestBox
:festival="usSplatfests.recentFestival"
class="max-w-md md:-rotate-1"
/>
/>
<SplatfestResultsBox
v-if="usSplatfests.recentFestival.hasResults"
:festival="usSplatfests.recentFestival"
class="w-full sm:max-w-md md:rotate-1"
/>
/>
</div>
</div>
</div>

4
src/views/SalmonRunView.vue
View File

@ -6,8 +6,8 @@
<div class="w-full max-w-2xl">
<SalmonRunBox class="md:-rotate-1" />
</div>
<div class="w-full max-w-2xl" v-if="eggstraWork.currentSchedules.length">
<SalmonRunBox class="md:rotate-1" eggstra/>
<div v-if="eggstraWork.currentSchedules.length" class="w-full max-w-2xl">
<SalmonRunBox class="md:rotate-1" eggstra />
</div>
</div>
</div>

4
src/views/SplatfestsView.vue
View File

@ -7,12 +7,12 @@
:festival="festival"
class="max-w-md md:-rotate-1"
history-mode
/>
/>
<SplatfestResultsBox
:festival="festival"
class="w-full sm:max-w-md md:rotate-1"
/>
/>
</div>
</div>
</div>

9
src/views/screenshots/ChallengesView.vue
View File

@ -3,12 +3,11 @@
<div class="grow flex items-center justify-center scale-[1.1]">
<ChallengeScheduleBox
v-if="store.activeSchedule"
:event="store.activeSchedule"
type="challenge"
class="w-full max-w-xl -rotate-1"
/>
:event="store.activeSchedule"
type="challenge"
class="w-full max-w-xl -rotate-1"
/>
</div>
</ScreenshotLayout>
</template>

4
src/views/screenshots/CountdownView.vue
View File

@ -8,7 +8,9 @@
<Splat1 class="absolute hidden sm:block w-48 -bottom-36 right-20" fill="fill-splatoon-green" />
<div class="relative">
<div class="font-splatoon1 text-6xl text-center">Splatoon 3</div>
<div class="font-splatoon1 text-6xl text-center">
Splatoon 3
</div>
<Splatoon3Countdown />
</div>

2
src/views/screenshots/DailyDropGearView.vue
View File

@ -9,7 +9,7 @@
<div class="absolute right-8 top-12 max-w-sm rotate-6">
<div class="bg-zinc-100 p-2">
<img :src="brand.image.url" v-if="brand" />
<img v-if="brand" :src="brand.image.url" />
</div>
<img class="absolute -top-8 left-28 w-48 -rotate-3" src="@/assets/img/tape/tape-5.png" />

2
src/views/screenshots/SalmonRunView.vue
View File

@ -2,7 +2,7 @@
<ScreenshotLayout header="Salmon Run">
<div class="grow flex items-center justify-center">
<div class="max-w-2xl scale-[1.6]">
<SalmonRunBox class="-rotate-1" is-screenshot :startTime="route.query.startTime" :eggstra="route.query.eggstra=='true'"/>
<SalmonRunBox class="-rotate-1" is-screenshot :start-time="route.query.startTime" :eggstra="route.query.eggstra=='true'" />
</div>
</div>
</ScreenshotLayout>

6
src/views/screenshots/SchedulesView.vue
View File

@ -1,17 +1,17 @@
<template>
<ScreenshotLayout header="Map Schedules">
<div class="grow flex items-center justify-center">
<div class="flex space-x-12 items-center mx-6" v-if="usSplatfests.activeFestival">
<div v-if="usSplatfests.activeFestival" class="flex space-x-12 items-center mx-6">
<div class="mx-10">
<SplatfestBox
:festival="usSplatfests.activeFestival"
class="flex-1 max-w-md md:-rotate-1 scale-[1.2]"
/>
/>
</div>
<ScreenshotScheduleBox type="splatfest" class="flex-1 rotate-1" />
</div>
<div class="flex space-x-6 mx-6" v-else>
<div v-else class="flex space-x-6 mx-6">
<ScreenshotScheduleBox type="regular" class="flex-1 -rotate-1" />
<ScreenshotScheduleBox type="anarchySeries" class="flex-1 rotate-1" />
<ScreenshotScheduleBox type="anarchyOpen" class="flex-1 -rotate-1" />

32
src/views/screenshots/ScreenshotsHomeView.vue
View File

@ -4,25 +4,41 @@
<div><strong>Screenshots</strong></div>
<div>
<router-link to="/countdown">Countdown</router-link>
<router-link to="/countdown">
Countdown
</router-link>
</div>
<div>
<router-link to="/schedules">Schedules</router-link>
<router-link to="/schedules">
Schedules
</router-link>
</div>
<div>
<router-link to="/challenges">Challenges</router-link>
<router-link to="/challenges">
Challenges
</router-link>
</div>
<div>
<router-link to="/salmonrun">Salmon Run</router-link>
<router-link to="/salmonrun">
Salmon Run
</router-link>
</div>
<div>
Gear:
<router-link to="/gear/regular">Regular</router-link>&nbsp;
<router-link to="/gear/dailydrop">Daily Drop</router-link>&nbsp;
<router-link to="/gear/salmonrun">Salmon Run</router-link>
<router-link to="/gear/regular">
Regular
</router-link>&nbsp;
<router-link to="/gear/dailydrop">
Daily Drop
</router-link>&nbsp;
<router-link to="/gear/salmonrun">
Salmon Run
</router-link>
</div>
<div>
<router-link to="/splatfest">Splatfest</router-link>
<router-link to="/splatfest">
Splatfest
</router-link>
</div>
</div>
</div>

11
src/views/screenshots/SplatfestView.vue
View File

@ -1,14 +1,17 @@
<template>
<ScreenshotLayout header="Splatfest">
<div class="grow flex items-center justify-center" v-if="festival">
<div v-if="festival" class="grow flex items-center justify-center">
<div class="flex space-x-32 items-center mx-6">
<SplatfestBox
:festival="festival"
class="flex-1 max-w-md md:-rotate-1 scale-[1.2]"
/>
/>
<SplatfestResultsBox v-if="festival.hasResults" :festival="festival"
class="max-w-md md:rotate-1 scale-[1.2]" />
<SplatfestResultsBox
v-if="festival.hasResults"
:festival="festival"
class="max-w-md md:rotate-1 scale-[1.2]"
/>
</div>
</div>
</ScreenshotLayout>