Remove the old Splatfest premiere page

This commit is contained in:
Matt Isenhower
2022-09-14 20:50:47 -07:00
parent fc5a26f0d9
commit 39bb1de317
2 changed files with 0 additions and 155 deletions

View File

@@ -1,7 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import FaqView from '../views/FaqView.vue'
import PremiereView from '../views/PremiereView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -16,11 +15,6 @@ const router = createRouter({
name: 'faq',
component: FaqView
},
{
path: '/premiere',
name: 'premiere',
component: PremiereView
},
]
})

View File

@@ -1,149 +0,0 @@
<template>
<MainLayout>
<div class="grow flex items-center justify-center">
<div class="w-full max-w-2xl mt-36 mb-20 mx-4">
<div class="relative">
<Splat2 class="absolute -top-32 -left-24 w-64" />
<Splat5 class="absolute -right-28 -bottom-24 w-64" />
<ProductContainer class="relative md:rotate-1">
<div class="relative">
<div class="text-gray-300 px-10">
<div class="text-3xl font-splatoon1 text-white mb-4">
Splatfest World Premiere
</div>
<div class="mb-4">All times shown in your local timezone.</div>
<div class="space-y-6">
<div v-for="date in dates" :key="date.name" class="font-splatoon2">
<h1 class="text-2xl text-gray-100">{{ date.name }}</h1>
<div class="text-lg text-gray-50">
{{ formatDate(date.start) }}
&ndash;
{{ formatTime(date.end) }}
</div>
<div v-if="isPast(date.end)">
Splatfest is now closed!
</div>
<div v-else-if="isPast(date.start)">
Splatfest ends in {{ duration(date.end) }}
</div>
<div v-else>
Splatfest starts in {{ duration(date.start) }}
</div>
</div>
<div class="font-splatoon2">
<div class="text-3xl font-splatoon1 text-white">Results</div>
<div v-if="isPast(results)">
Results are now available in game!
</div>
<div v-else>
Results will be available in-game
at {{ formatTime(results) }}
(in {{ duration(results) }})
</div>
</div>
</div>
<img class="absolute hidden sm:block -top-16 right-14 w-48 -rotate-3"
src="@/assets/img/tape/tape-1.png" />
<img class="absolute -bottom-20 left-8 w-44 rotate-6" src="@/assets/img/tape/tape-3.png" />
<img class="absolute top-20 -right-24 w-32 rotate-6" src="@/assets/img/stickers/sticker-4.png" />
<img class="absolute hidden sm:block -bottom-14 right-32 w-44 -rotate-3"
src="@/assets/img/stickers/sticker-10.png" />
</div>
</div>
</ProductContainer>
</div>
</div>
</div>
</MainLayout>
</template>
<script setup>
import MainLayout from '@/layouts/MainLayout.vue'
import ProductContainer from '@/components/ProductContainer.vue'
import Splat2 from '../components/splats/Splat2.vue';
import Splat5 from '../components/splats/Splat5.vue';
import { onMounted, onUnmounted } from 'vue';
import { useTimeStore } from '../stores/time';
const time = useTimeStore();
onMounted(() => time.startUpdatingNow());
onUnmounted(() => time.stopUpdatingNow());
const dates = [
{
name: 'Europe',
start: new Date('27 Aug 2022 08:00:00 +0000'),
end: new Date('27 Aug 2022 20:00:00 +0000'),
},
{
name: 'The Americas',
start: new Date('27 Aug 2022 16:00:00 +0000'),
end: new Date('28 Aug 2022 04:00:00 +0000'),
},
{
name: 'Japan/Australia/New Zealand/Hong Kong/S. Korea',
start: new Date('28 Aug 2022 00:00:00 +0000'),
end: new Date('28 Aug 2022 12:00:00 +0000'),
},
];
const results = new Date('28 Aug 2022 14:00:00 +0000');
function isPast(date) {
return time.now >= date;
}
function getDurationParts(value) {
value = Math.round(value / 1000);
let negative = (value < 0) ? '-' : '';
value = Math.abs(value);
let days = Math.floor(value / 86400);
value -= days * 86400;
let hours = Math.floor(value / 3600) % 24;
value -= hours * 3600;
let minutes = Math.floor(value / 60) % 60;
value -= minutes * 60;
let seconds = value % 60;
return { negative, days, hours, minutes, seconds };
}
function duration(value) {
value = value - time.now;
let { days, hours, minutes, seconds } = getDurationParts(value);
hours += days * 24;
if (hours) {
return `${hours}h ${minutes}m ${seconds}s`;
}
return `${minutes}m ${seconds}s`;
}
function formatDate(date) {
return date.toLocaleString(undefined, {
dateStyle: 'long',
timeStyle: 'short',
})
}
function formatTime(date) {
return date.toLocaleTimeString(undefined, {
timeStyle: 'short',
})
}
</script>