Update timeline

pull/1/head
Made Baruna 2021-03-20 01:56:34 +08:00
parent 2210526222
commit a31ef20bf0
4 changed files with 117 additions and 49 deletions

View File

@ -1,4 +1,34 @@
export const eventsData = [
{
name: 'A Wanmin Welcome - Web Event',
pos: '0% 45%',
image: 'a_wanmin_welcome.png',
start: '2021-03-16 13:00:00',
end: '2021-03-25 23:59:00',
color: '#FAE2B4',
url:
'https://webstatic-sea.mihoyo.com/ys/event/e20210316cooking-sea/index.html?lang=en-us?utm_source=hoyolab&utm_medium=banner',
},
{
name: 'Outland Gastronomy - Daily Login Event',
pos: '0% 50%',
image: 'outland_gastronomy.jpg',
start: '2021-03-17 06:00:00',
end: '2021-04-01 04:00:00',
color: '#DDD7E8',
zoom: '180%',
url: 'https://genshin.mihoyo.com/en/news/detail/9262',
},
{
name: 'Invitation of Windblume - 1.4 Event',
pos: '0% 20%',
image: 'update14.png',
start: '2021-03-19 10:00:00',
end: '2021-04-05 04:00:00',
color: '#79D2EB',
zoom: '120%',
url: 'https://genshin.mihoyo.com/en/news/detail/9407',
},
[
{
name: 'Vishaps and Where to Find Them',
@ -9,46 +39,49 @@ export const eventsData = [
color: '#F6AD55',
},
{
name: 'Update 1.4!',
image: 'update14.png',
pos: '0% 23%',
start: '2021-03-17 11:00:00',
end: '2021-03-24 04:00:00',
name: 'Act I',
pos: '0% 20%',
start: '2021-03-19 10:00:00',
end: '2021-03-22 04:00:00',
color: '#79D2EB',
zoom: '120%',
url: 'https://genshin.mihoyo.com/en/news/detail/9407',
startOnly: true,
},
{
name: 'Act II',
pos: '0% 20%',
image: '',
start: '2021-03-22 04:00:00',
end: '2021-03-25 04:00:00',
color: '#79D2EB',
zoom: '120%',
url: 'https://genshin.mihoyo.com/en/news/detail/9407',
startOnly: true,
},
{
name: 'Act III',
pos: '0% 20%',
image: '',
start: '2021-03-25 04:00:00',
end: '2021-03-28 04:00:00',
color: '#79D2EB',
zoom: '120%',
url: 'https://genshin.mihoyo.com/en/news/detail/9407',
startOnly: true,
},
{
name: 'Act IV',
pos: '0% 20%',
image: 'update14.png',
start: '2021-03-28 04:00:00',
end: '2021-04-05 04:00:00',
color: '#79D2EB',
zoom: '120%',
url: 'https://genshin.mihoyo.com/en/news/detail/9407',
startOnly: true,
description: 'https://genshin.mihoyo.com/en/news/detail/9254',
},
],
{
name: 'A Wanmin Welcome - Web Event',
pos: '0% 45%',
image: 'a_wanmin_welcome.png',
start: '2021-03-16 13:00:00',
end: '2021-03-25 23:59:00',
color: '#FAE2B4',
description: 'https://webstatic-sea.mihoyo.com/ys/event/e20210316cooking-sea/index.html?lang=en-us?utm_source=hoyolab&utm_medium=banner',
},
{
name: 'Outland Gastronomy - Daily Login Event',
pos: '0% 50%',
image: 'outland_gastronomy.jpg',
start: '2021-03-17 11:00:00',
end: '2021-04-01 04:00:00',
color: '#DDD7E8',
zoom: '180%',
description: 'https://genshin.mihoyo.com/en/news/detail/9262',
},
{
name: 'Invitation of Windblume - 1.4 Event',
pos: '0% 20%',
image: 'update14.png',
start: '2021-03-19 10:00:00',
end: '2021-04-05 04:00:00',
color: '#79D2EB',
zoom: '120%',
description: 'https://genshin.mihoyo.com/en/news/detail/9299',
},
[
{
name: 'Moment of Bloom - Hu Tao Banner',
@ -62,10 +95,10 @@ export const eventsData = [
name: 'Ballad in Goblets - Venti Banner',
pos: '20% 20%',
image: 'ballad_in_goblets.jpg',
start: '2021-03-17 11:00:00',
start: '2021-03-17 06:00:00',
end: '2021-04-06 16:00:00',
color: '#6EDDCA',
description: 'https://genshin.mihoyo.com/en/news/detail/9269',
url: 'https://genshin.mihoyo.com/en/news/detail/9269',
},
],
[
@ -81,10 +114,10 @@ export const eventsData = [
name: 'Epitome Invocation - Weapon Banner',
image: 'epitome_invocation_2.jpg',
pos: '50% 20%',
start: '2021-03-17 11:00:00',
start: '2021-03-17 06:00:00',
end: '2021-04-06 16:00:00',
color: '#FFAA4B',
description: 'https://genshin.mihoyo.com/en/news/detail/9278',
url: 'https://genshin.mihoyo.com/en/news/detail/9278',
},
],
[
@ -103,8 +136,30 @@ export const eventsData = [
start: '2021-03-16 04:00:00',
end: '2021-04-01 04:00:00',
color: '#4299E1',
description:
"When the active character's HP is less than 50%, they gain a 2% DMG Bonus for 10s after hitting an opponent. This effect can stack up to 10 times, and each character in the party will have their own independent stacks and durations. Each time the stack count or duration of this effect resets, there is a 50% chance to release an Energy Blast. An Energy Blast can be triggered once every 10s.",
},
{
name: 'Spiral Abyss',
image: 'spiral_abyss.jpg',
pos: '50% 20%',
start: '2021-04-01 04:00:00',
end: '2021-04-16 04:00:00',
color: '#4299E1',
description:
"Characters possess an ATK-increasing Windward Aura that can increase their ATK by a maximum of 60%. For every opponent who steps within the Aura, the Aura's effect is decreased by 25%. When 4 or more opponents are within the Aura, this effect will not provide an ATK increase.",
},
],
{
name: "Paimon's Bargain - Ningguang, Xingqiu, Blackcliff",
pos: '0% 50%',
zoom: '150%',
start: '2021-03-01 04:00:00',
end: '2021-04-01 04:00:00',
color: '#B6A1EA',
image: 'paimon_bargain.png',
description: 'Now selling: Ningguang, Xingqiu, and Blackcliff Weapons.'
},
[
{
name: 'Battle Pass',
@ -118,10 +173,10 @@ export const eventsData = [
name: 'Battle Pass',
image: 'windborne_blossoms.jpg',
pos: '0% 12%',
start: '2021-03-17 11:00:00',
start: '2021-03-17 06:00:00',
end: '2021-04-26 04:00:00',
color: '#68D391',
description: 'https://genshin.mihoyo.com/en/news/detail/9289',
url: 'https://genshin.mihoyo.com/en/news/detail/9289',
},
],
];

View File

@ -1,6 +1,6 @@
<script>
import { t } from 'svelte-i18n';
import dayjs from 'dayjs';
import { onMount } from 'svelte';
@ -25,8 +25,10 @@
</script>
<div>
<img src="/images/events/{event.image}" class="w-full rounded-lg" alt={event.name} />
<h1 class="mt-4 text-white font-display font-semibold text-xl">{event.name}</h1>
{#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>
@ -36,16 +38,27 @@
<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">
<a class="text-primary hover:underline" target="__blank" href={event.description}>{event.description}</a>
<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')}`}
{$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')}`}
{$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}

View File

@ -36,7 +36,7 @@
i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px;
{prevNearby &&
!started && (attachedPrev || prevEnded) && prevNearby
? 'padding-left: 50px;'
? 'padding-left: 35px;'
: 'padding-left: 10px;'}
--image: url(/images/events/{event.image}); --pos: {event.pos}; --color: {event.color};
--zoom: {event.zoom

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB