Update timeline
parent
858856e7f2
commit
b04261be7a
|
@ -17,6 +17,7 @@ export const eventsData = [
|
||||||
color: '#79D2EB',
|
color: '#79D2EB',
|
||||||
zoom: '120%',
|
zoom: '120%',
|
||||||
startOnly: true,
|
startOnly: true,
|
||||||
|
description: 'https://genshin.mihoyo.com/en/news/detail/9254',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
|
@ -29,21 +30,63 @@ export const eventsData = [
|
||||||
startOnly: true,
|
startOnly: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Moment of Bloom - Hu Tao Banner',
|
name: 'Outland Gastronomy - Daily Login Event',
|
||||||
pos: '50% 20%',
|
pos: '0% 50%',
|
||||||
image: 'moment_of_bloom.jpg',
|
image: 'outland_gastronomy.jpg',
|
||||||
start: '2021-03-02 18:00:00',
|
start: '2021-03-17 11:00:00',
|
||||||
end: '2021-03-16 15:00:00',
|
end: '2021-04-01 04:00:00',
|
||||||
color: '#FC8181',
|
color: '#DDD7E8',
|
||||||
|
zoom: '180%',
|
||||||
|
description: 'https://genshin.mihoyo.com/en/news/detail/9262',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Epitome Invocation - Weapon Banner',
|
name: 'Invitation of Windblume - 1.4 Event',
|
||||||
image: 'epitome_invocation.jpg',
|
pos: '0% 20%',
|
||||||
pos: '50% 20%',
|
image: 'update14.png',
|
||||||
start: '2021-02-23 18:00:00',
|
start: '2021-03-19 10:00:00',
|
||||||
end: '2021-03-16 15:00:00',
|
end: '2021-04-05 04:00:00',
|
||||||
color: '#F56565',
|
color: '#79D2EB',
|
||||||
|
zoom: '120%',
|
||||||
|
description: 'https://genshin.mihoyo.com/en/news/detail/9299',
|
||||||
},
|
},
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: 'Moment of Bloom - Hu Tao Banner',
|
||||||
|
pos: '50% 20%',
|
||||||
|
image: 'moment_of_bloom.jpg',
|
||||||
|
start: '2021-03-02 18:00:00',
|
||||||
|
end: '2021-03-16 15:00:00',
|
||||||
|
color: '#FC8181',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Ballad in Goblets - Venti Banner',
|
||||||
|
pos: '20% 20%',
|
||||||
|
image: 'ballad_in_goblets.jpg',
|
||||||
|
start: '2021-03-17 11:00:00',
|
||||||
|
end: '2021-04-06 16:00:00',
|
||||||
|
color: '#6EDDCA',
|
||||||
|
description: 'https://genshin.mihoyo.com/en/news/detail/9269',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
name: 'Epitome Invocation - Weapon Banner',
|
||||||
|
image: 'epitome_invocation.jpg',
|
||||||
|
pos: '50% 20%',
|
||||||
|
start: '2021-02-23 18:00:00',
|
||||||
|
end: '2021-03-16 15:00:00',
|
||||||
|
color: '#F56565',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Epitome Invocation - Weapon Banner',
|
||||||
|
image: 'epitome_invocation_2.jpg',
|
||||||
|
pos: '50% 20%',
|
||||||
|
start: '2021-03-17 11:00:00',
|
||||||
|
end: '2021-04-06 16:00:00',
|
||||||
|
color: '#FFAA4B',
|
||||||
|
description: 'https://genshin.mihoyo.com/en/news/detail/9278',
|
||||||
|
},
|
||||||
|
],
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: 'Spiral Abyss',
|
name: 'Spiral Abyss',
|
||||||
|
@ -62,12 +105,23 @@ export const eventsData = [
|
||||||
color: '#4299E1',
|
color: '#4299E1',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
{
|
[
|
||||||
name: 'Battle Pass',
|
{
|
||||||
image: 'lantern-lit_sky.jpg',
|
name: 'Battle Pass',
|
||||||
pos: '0% 12%',
|
image: 'lantern-lit_sky.jpg',
|
||||||
start: '2021-02-03 11:00:00',
|
pos: '0% 12%',
|
||||||
end: '2021-03-15 04:00:00',
|
start: '2021-02-03 11:00:00',
|
||||||
color: '#68D391',
|
end: '2021-03-15 04:00:00',
|
||||||
},
|
color: '#68D391',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Battle Pass',
|
||||||
|
image: 'windborne_blossoms.jpg',
|
||||||
|
pos: '0% 12%',
|
||||||
|
start: '2021-03-17 11:00:00',
|
||||||
|
end: '2021-04-26 04:00:00',
|
||||||
|
color: '#68D391',
|
||||||
|
description: 'https://genshin.mihoyo.com/en/news/detail/9289',
|
||||||
|
},
|
||||||
|
],
|
||||||
];
|
];
|
||||||
|
|
|
@ -36,11 +36,16 @@
|
||||||
<span>{event.end.format('ddd, D MMM YYYY HH:mm')}</span>
|
<span>{event.end.format('ddd, D MMM YYYY HH:mm')}</span>
|
||||||
{/if}
|
{/if}
|
||||||
</p>
|
</p>
|
||||||
|
{#if event.description}
|
||||||
|
<p class="my-2">
|
||||||
|
<a class="text-primary hover:underline" target="__blank" href={event.description}>{event.description}</a>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
<p class="text-gray-400 px-4 py-1 bg-black bg-opacity-50 rounded-xl mt-2 inline-block">
|
<p class="text-gray-400 px-4 py-1 bg-black bg-opacity-50 rounded-xl mt-2 inline-block">
|
||||||
{#if !started}
|
{#if !started}
|
||||||
{$t('timeline.starting')} {dayjs.duration(diffStart).format(diffStart > 86400000 ? 'D[d] HH:mm:ss' : '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}
|
{:else if started && !ended && !event.startOnly}
|
||||||
{$t('timeline.ending')} {dayjs.duration(diffEnd).format(diffEnd > 86400000 ? 'D[d] HH:mm:ss' : '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}
|
{:else if event.startOnly}
|
||||||
{$t('timeline.live')}
|
{$t('timeline.live')}
|
||||||
{:else}
|
{:else}
|
||||||
|
|
|
@ -12,17 +12,22 @@
|
||||||
export let now;
|
export let now;
|
||||||
export let i;
|
export let i;
|
||||||
|
|
||||||
$: prevNearby = prev !== null && event.start.diff(prev.end, 'hour') < 12;
|
$: prevDiff = prev !== null ? event.start.diff(prev.end, 'hour') : Number.MAX_VALUE;
|
||||||
$: nextNearby = next !== null && next.start.diff(event.end, 'hour') < 12;
|
$: nextDiff = next !== null ? next.start.diff(event.end, 'hour') : Number.MAX_VALUE;
|
||||||
|
$: prevNearby = prev !== null && prevDiff < 24;
|
||||||
|
$: nextNearby = next !== null && nextDiff < 24;
|
||||||
$: started = now.isAfter(event.start);
|
$: started = now.isAfter(event.start);
|
||||||
$: ended = now.isAfter(event.end);
|
$: ended = now.isAfter(event.end);
|
||||||
$: diffStart = event.start.diff(now);
|
$: diffStart = event.start.diff(now);
|
||||||
$: diffEnd = event.end.diff(now);
|
$: diffEnd = event.end.diff(now);
|
||||||
|
$: attachedNext = next !== null && next.start.diff(event.end, 'hour') < 1;
|
||||||
|
$: attachedPrev = prev !== null && event.start.diff(prev.end, 'hour') < 1;
|
||||||
|
$: prevEnded = prev !== null && now.isAfter(prev.end);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
on:click={openDetail}
|
on:click={openDetail}
|
||||||
class="flex items-center z-10 text-white cursor-pointer absolute {prevNearby ? '' : 'rounded-l-xl'} {nextNearby
|
class="flex items-center z-10 text-white cursor-pointer absolute {prevDiff < 1 ? '' : 'rounded-l-xl'} {nextDiff < 1
|
||||||
? 'border-r-4 border-white'
|
? 'border-r-4 border-white'
|
||||||
: 'rounded-r-xl'}"
|
: 'rounded-r-xl'}"
|
||||||
style="width: {dayWidth * event.duration}px; left: {dayWidth *
|
style="width: {dayWidth * event.duration}px; left: {dayWidth *
|
||||||
|
@ -30,26 +35,30 @@
|
||||||
top: {marginTop +
|
top: {marginTop +
|
||||||
i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px;
|
i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px;
|
||||||
{prevNearby &&
|
{prevNearby &&
|
||||||
diffStart > 86400000
|
!started && (attachedPrev || prevEnded) && prevNearby
|
||||||
? 'padding-left: 50px;'
|
? 'padding-left: 50px;'
|
||||||
: 'padding-left: 10px;'}
|
: 'padding-left: 10px;'}
|
||||||
--image: url(/images/events/{event.image}); --pos: {event.pos}; --color: {event.color};
|
--image: url(/images/events/{event.image}); --pos: {event.pos}; --color: {event.color};
|
||||||
--zoom: {event.zoom ? event.zoom : '200%'};"
|
--zoom: {event.zoom
|
||||||
|
? event.zoom
|
||||||
|
: '200%'};"
|
||||||
>
|
>
|
||||||
<div class="event-item {nextNearby ? '' : 'rounded-xl'}" />
|
<div class="event-item {nextDiff < 1 ? '' : 'rounded-xl'}" />
|
||||||
<span class="event-name text sticky left-0 font-display text-base md:text-lg text-black font-bold whitespace-no-wrap">
|
<span class="event-name text sticky left-0 font-display text-base md:text-lg text-black font-bold whitespace-no-wrap">
|
||||||
{event.name}
|
{event.name}
|
||||||
</span>
|
</span>
|
||||||
{#if started && !ended && !event.startOnly}
|
<!-- Ending timer-->
|
||||||
<div class="absolute pl-3" style="top: 6px; right: -120px; width: 120px;">
|
{#if started && !ended && !event.startOnly && !attachedNext}
|
||||||
|
<div class="absolute pl-3" style="top: 6px; right: {nextNearby ? '-55px' : '-120px'}; width: 120px;">
|
||||||
<span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
|
<span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
|
||||||
{dayjs.duration(diffEnd).format(diffEnd > 86400000 ? 'D[d] HH:mm:ss' : 'HH:mm:ss')}
|
{`${diffEnd > 86400000 ? `${Math.trunc(dayjs.duration(diffEnd).asDays())}d` : ''} ${dayjs.duration(diffEnd).format('HH:mm:ss')}`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{:else if !started && !ended}
|
<!-- Starting timer-->
|
||||||
|
{:else if (prevNearby && !attachedPrev ? prevEnded : true) && !started && !ended}
|
||||||
<div class="absolute pr-3 text-right" style="top: 6px; left: {prevNearby ? '-80px' : '-120px'}; width: 120px;">
|
<div class="absolute pr-3 text-right" style="top: 6px; left: {prevNearby ? '-80px' : '-120px'}; width: 120px;">
|
||||||
<span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
|
<span class="text-sm rounded-xl text-black font-semibold bg-white bg-opacity-75 px-1">
|
||||||
{dayjs.duration(diffStart).format(diffStart > 86400000 ? 'D[d] HH:mm:ss' : 'HH:mm:ss')}
|
{`${diffStart > 86400000 ? `${Math.trunc(dayjs.duration(diffStart).asDays())}d` : ''} ${dayjs.duration(diffStart).format('HH:mm:ss')}`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -181,7 +181,8 @@
|
||||||
|
|
||||||
const delta = Math.abs(event.deltaY);
|
const delta = Math.abs(event.deltaY);
|
||||||
const dir = event.deltaY > 0 ? 1 : -1;
|
const dir = event.deltaY > 0 ? 1 : -1;
|
||||||
event.currentTarget.scrollLeft += Math.max(delta, 100) * dir;
|
event.currentTarget.scrollLeft += Math.max(delta, 100) * dir + event.deltaX;
|
||||||
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
$: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
|
$: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
After Width: | Height: | Size: 84 KiB |
Loading…
Reference in New Issue