Update timeline
|
@ -1,4 +1,52 @@
|
|||
export const eventsData = [
|
||||
[
|
||||
{
|
||||
name: 'Mesmerizing Dream at Sea',
|
||||
pos: '20% 23%',
|
||||
image: 'mesmerizing_dream_at_sea.jpg',
|
||||
start: '2022-07-22 10:00:00',
|
||||
end: '2022-07-31 23:59:59',
|
||||
color: '#8cd8f1',
|
||||
zoom: '300%',
|
||||
url: 'https://www.hoyolab.com/article/6129641',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'A Journey Through Pages',
|
||||
pos: '20% 23%',
|
||||
image: 'a_journey_through_pages.jpg',
|
||||
start: '2022-08-17 12:00:00',
|
||||
end: '2022-08-23 23:59:59',
|
||||
color: '#f0ece1',
|
||||
zoom: '300%',
|
||||
url: 'https://www.hoyolab.com/article/7018436',
|
||||
showOnHome: true,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'Go Go, Forest Rangers!',
|
||||
pos: '0% 30%',
|
||||
image: 'go_go_forest_rangers.jpg',
|
||||
start: '2022-08-19 12:00:00',
|
||||
end: '2022-08-24 23:59:59',
|
||||
color: '#2dd378',
|
||||
zoom: '200%',
|
||||
url: 'https://www.hoyolab.com/article/7056771',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Fayz Trials',
|
||||
pos: '0% 40%',
|
||||
image: 'fayz_trials.jpg',
|
||||
start: '2022-09-08 10:00:00',
|
||||
end: '2022-09-26 03:59:59',
|
||||
color: '#ff9486',
|
||||
zoom: '100%',
|
||||
url: 'https://www.hoyolab.com/article/7113923',
|
||||
showOnHome: true,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'A Muddy Bizzare Adventure',
|
||||
|
@ -22,17 +70,6 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/5444663',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Mesmerizing Dream at Sea',
|
||||
pos: '20% 23%',
|
||||
image: 'mesmerizing_dream_at_sea.jpg',
|
||||
start: '2022-07-22 10:00:00',
|
||||
end: '2022-07-31 23:59:59',
|
||||
color: '#8cd8f1',
|
||||
zoom: '300%',
|
||||
url: 'https://www.hoyolab.com/article/6129641',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Reminiscent Regimen',
|
||||
pos: '0% 35%',
|
||||
|
@ -44,6 +81,17 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/6533766',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Lost Riches',
|
||||
pos: '0% 50%',
|
||||
image: 'lost_riches_2.jpg',
|
||||
start: '2022-09-02 10:00:00',
|
||||
end: '2022-09-19 03:59:59',
|
||||
color: '#FFF2DC',
|
||||
zoom: '250%',
|
||||
url: 'https://www.hoyolab.com/article/7113923',
|
||||
showOnHome: true,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
|
@ -79,6 +127,17 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/6171423',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Graven Innocence',
|
||||
pos: '0% 20%',
|
||||
zoom: '200%',
|
||||
image: 'graven_innocence.jpg',
|
||||
start: '2022-08-24 06:00:00',
|
||||
end: '2022-09-28 06:00:00',
|
||||
color: '#c4e6f8',
|
||||
url: 'https://www.hoyolab.com/article/7113808',
|
||||
showOnHome: true,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
|
@ -115,6 +174,34 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/5958494',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'I',
|
||||
start: '2022-08-24 06:00:00',
|
||||
end: '2022-08-27 03:59:59',
|
||||
color: '#c4e6f8',
|
||||
},
|
||||
{
|
||||
name: 'II',
|
||||
start: '2022-08-27 04:00:00',
|
||||
end: '2022-08-30 03:59:59',
|
||||
color: '#c4e6f8',
|
||||
},
|
||||
{
|
||||
name: 'III',
|
||||
start: '2022-08-30 04:00:00',
|
||||
end: '2022-09-02 03:59:59',
|
||||
color: '#c4e6f8',
|
||||
},
|
||||
{
|
||||
name: 'Stage IV',
|
||||
pos: '0% 20%',
|
||||
zoom: '200%',
|
||||
image: 'graven_innocence.jpg',
|
||||
start: '2022-09-02 04:00:00',
|
||||
end: '2022-09-28 06:00:00',
|
||||
color: '#c4e6f8',
|
||||
url: 'https://www.hoyolab.com/article/7113808',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
|
@ -152,6 +239,18 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/6857289',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Viridescent Vigil - Tighnari Banner',
|
||||
pos: '30% 15%',
|
||||
zoom: '200%',
|
||||
image: 'viridescent_vigil_1.jpg',
|
||||
start: '2022-08-24 06:00:00',
|
||||
end: '2022-09-09 17:59:59',
|
||||
color: '#76df81',
|
||||
url: 'https://www.hoyolab.com/article/7113809',
|
||||
showOnHome: true,
|
||||
timezoneDependent: true,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
|
@ -200,6 +299,18 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/6197311',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Gentry of Hermitage - Zhongli Banner',
|
||||
pos: '30% 15%',
|
||||
zoom: '200%',
|
||||
image: 'gentry_of_hermitage_4.jpg',
|
||||
start: '2022-08-24 06:00:00',
|
||||
end: '2022-09-09 17:59:59',
|
||||
color: '#D1A55C',
|
||||
url: 'https://www.hoyolab.com/article/7113810',
|
||||
showOnHome: true,
|
||||
timezoneDependent: true,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
|
@ -248,6 +359,18 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/6197314',
|
||||
showOnHome: true,
|
||||
},
|
||||
{
|
||||
name: 'Epitome Invocation - Weapon Banner',
|
||||
pos: '30% 30%',
|
||||
zoom: '150%',
|
||||
image: 'epitome_invocation_33.jpg',
|
||||
start: '2022-08-24 06:00:00',
|
||||
end: '2022-09-09 17:59:59',
|
||||
color: '#FFAA4B',
|
||||
url: 'https://www.hoyolab.com/article/7113811',
|
||||
showOnHome: true,
|
||||
timezoneDependent: true,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
|
@ -374,5 +497,15 @@ export const eventsData = [
|
|||
url: 'https://www.hoyolab.com/article/5916190',
|
||||
timezoneDependent: true,
|
||||
},
|
||||
{
|
||||
name: 'Battle Pass - Luxuriant Woodlands',
|
||||
pos: '0% 12%',
|
||||
image: 'luxuriant_woodlands.jpg',
|
||||
start: '2022-08-24 06:00:00',
|
||||
end: '2022-09-26 03:59:59',
|
||||
color: '#7bc9af',
|
||||
url: 'https://www.hoyolab.com/article/7113923',
|
||||
timezoneDependent: true,
|
||||
},
|
||||
],
|
||||
];
|
||||
|
|
|
@ -0,0 +1,69 @@
|
|||
<script>
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
import dayjs from 'dayjs';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let event;
|
||||
export let timeDifference;
|
||||
|
||||
let now = dayjs().add(timeDifference, 'minute');
|
||||
|
||||
onMount(() => {
|
||||
const interval = setInterval(() => {
|
||||
now = dayjs().add(timeDifference, 'minute');
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
};
|
||||
});
|
||||
|
||||
$: started = now.isAfter(event.start);
|
||||
$: ended = now.isAfter(event.end);
|
||||
$: diffStart = event.start.diff(now);
|
||||
$: diffEnd = event.end.diff(now);
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if event.image}
|
||||
<img src="/images/events/{event.image}" class="w-full rounded-lg mb-4" alt={event.name} />
|
||||
{/if}
|
||||
<h1 class="text-white font-display font-semibold text-xl">{event.name}</h1>
|
||||
<p class="text-gray-400 font-body flex flex-col md:flex-row">
|
||||
<span class="flex">
|
||||
<span>{event.start.format('ddd, D MMM YYYY HH:mm')}</span>
|
||||
{#if !event.startOnly}<span class="mx-2">-</span>{/if}
|
||||
</span>
|
||||
{#if !event.startOnly}
|
||||
<span>{event.end.format('ddd, D MMM YYYY HH:mm')}</span>
|
||||
{/if}
|
||||
</p>
|
||||
{#if event.url}
|
||||
<p class="my-2 overflow-auto mt-4">
|
||||
<a class="text-primary hover:underline" target="_blank" href={event.url}>{event.url}</a>
|
||||
</p>
|
||||
{/if}
|
||||
{#if event.description}
|
||||
<p class="my-2 overflow-auto mt-4 text-gray-200">
|
||||
{event.description}
|
||||
</p>
|
||||
{/if}
|
||||
<p class="text-gray-400 px-4 py-1 bg-black bg-opacity-50 rounded-xl mt-2 inline-block">
|
||||
{#if !started}
|
||||
{$t('timeline.starting')}
|
||||
{`${diffStart > 86400000 ? `${Math.trunc(dayjs.duration(diffStart).asDays())}d` : ''} ${dayjs
|
||||
.duration(diffStart)
|
||||
.format('HH:mm:ss')}`}
|
||||
{:else if started && !ended && !event.startOnly}
|
||||
{$t('timeline.ending')}
|
||||
{`${diffEnd > 86400000 ? `${Math.trunc(dayjs.duration(diffEnd).asDays())}d` : ''} ${dayjs
|
||||
.duration(diffEnd)
|
||||
.format('HH:mm:ss')}`}
|
||||
{:else if event.startOnly}
|
||||
{$t('timeline.live')}
|
||||
{:else}
|
||||
{$t('timeline.finished')}
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
import Checkbox from '../../components/Checkbox.svelte';
|
||||
import EventItem from './_item.svelte';
|
||||
import DetailModal from '../calendar/_detail.svelte';
|
||||
import DetailModal from './_detail.svelte';
|
||||
import { getAccountPrefix } from '../../stores/account';
|
||||
import { readSave } from '../../stores/saveManager';
|
||||
import Ad from '../../components/Ad.svelte';
|
||||
|
|
|
@ -7,7 +7,7 @@ const IMAGE_CACHE = `cacheimg${IMAGE_CACHE_VER}`;
|
|||
|
||||
const IMAGE_URL = `${self.location.origin}/images/`;
|
||||
|
||||
const changelog = ['Added calendar (database > calendar)', 'Minor fixes'];
|
||||
const changelog = ['Update Timeline'];
|
||||
|
||||
const channel = new BroadcastChannel('paimonmoe-sw');
|
||||
|
||||
|
|
After Width: | Height: | Size: 349 KiB |
After Width: | Height: | Size: 468 KiB |
After Width: | Height: | Size: 500 KiB |
After Width: | Height: | Size: 61 KiB |
After Width: | Height: | Size: 188 KiB |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 243 KiB |
After Width: | Height: | Size: 154 KiB |
After Width: | Height: | Size: 531 KiB |
After Width: | Height: | Size: 116 KiB |
After Width: | Height: | Size: 266 KiB |