Update timeline
parent
858856e7f2
commit
b04261be7a
|
@ -17,6 +17,7 @@ export const eventsData = [
|
|||
color: '#79D2EB',
|
||||
zoom: '120%',
|
||||
startOnly: true,
|
||||
description: 'https://genshin.mihoyo.com/en/news/detail/9254',
|
||||
},
|
||||
],
|
||||
{
|
||||
|
@ -29,21 +30,63 @@ export const eventsData = [
|
|||
startOnly: true,
|
||||
},
|
||||
{
|
||||
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: '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: '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: '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',
|
||||
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',
|
||||
|
@ -62,12 +105,23 @@ export const eventsData = [
|
|||
color: '#4299E1',
|
||||
},
|
||||
],
|
||||
{
|
||||
name: 'Battle Pass',
|
||||
image: 'lantern-lit_sky.jpg',
|
||||
pos: '0% 12%',
|
||||
start: '2021-02-03 11:00:00',
|
||||
end: '2021-03-15 04:00:00',
|
||||
color: '#68D391',
|
||||
},
|
||||
[
|
||||
{
|
||||
name: 'Battle Pass',
|
||||
image: 'lantern-lit_sky.jpg',
|
||||
pos: '0% 12%',
|
||||
start: '2021-02-03 11:00:00',
|
||||
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>
|
||||
{/if}
|
||||
</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">
|
||||
{#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}
|
||||
{$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}
|
||||
{$t('timeline.live')}
|
||||
{:else}
|
||||
|
|
|
@ -12,17 +12,22 @@
|
|||
export let now;
|
||||
export let i;
|
||||
|
||||
$: prevNearby = prev !== null && event.start.diff(prev.end, 'hour') < 12;
|
||||
$: nextNearby = next !== null && next.start.diff(event.end, 'hour') < 12;
|
||||
$: prevDiff = prev !== null ? event.start.diff(prev.end, 'hour') : Number.MAX_VALUE;
|
||||
$: 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);
|
||||
$: ended = now.isAfter(event.end);
|
||||
$: diffStart = event.start.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>
|
||||
|
||||
<div
|
||||
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'
|
||||
: 'rounded-r-xl'}"
|
||||
style="width: {dayWidth * event.duration}px; left: {dayWidth *
|
||||
|
@ -30,26 +35,30 @@
|
|||
top: {marginTop +
|
||||
i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px;
|
||||
{prevNearby &&
|
||||
diffStart > 86400000
|
||||
!started && (attachedPrev || prevEnded) && prevNearby
|
||||
? 'padding-left: 50px;'
|
||||
: 'padding-left: 10px;'}
|
||||
--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">
|
||||
{event.name}
|
||||
</span>
|
||||
{#if started && !ended && !event.startOnly}
|
||||
<div class="absolute pl-3" style="top: 6px; right: -120px; width: 120px;">
|
||||
<!-- Ending timer-->
|
||||
{#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">
|
||||
{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>
|
||||
</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;">
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
@ -181,7 +181,8 @@
|
|||
|
||||
const delta = Math.abs(event.deltaY);
|
||||
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));
|
||||
|
|
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