diff --git a/src/data/timeline.js b/src/data/timeline.js index 6a9db292..4d8aebb8 100644 --- a/src/data/timeline.js +++ b/src/data/timeline.js @@ -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', + }, + ], ]; diff --git a/src/routes/timeline/_detail.svelte b/src/routes/timeline/_detail.svelte index e9210dde..be88ae30 100644 --- a/src/routes/timeline/_detail.svelte +++ b/src/routes/timeline/_detail.svelte @@ -36,11 +36,16 @@ {event.end.format('ddd, D MMM YYYY HH:mm')} {/if}

+ {#if event.description} +

+ {event.description} +

+ {/if}

{#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} diff --git a/src/routes/timeline/_item.svelte b/src/routes/timeline/_item.svelte index adf60464..53ffa072 100644 --- a/src/routes/timeline/_item.svelte +++ b/src/routes/timeline/_item.svelte @@ -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);

-
+
{event.name} - {#if started && !ended && !event.startOnly} -
+ + {#if started && !ended && !event.startOnly && !attachedNext} +
- {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')}`}
- {:else if !started && !ended} + + {:else if (prevNearby && !attachedPrev ? prevEnded : true) && !started && !ended}
- {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')}`}
{/if} diff --git a/src/routes/timeline/index.svelte b/src/routes/timeline/index.svelte index 847a6139..5f72e5db 100644 --- a/src/routes/timeline/index.svelte +++ b/src/routes/timeline/index.svelte @@ -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)); diff --git a/static/images/events/ballad_in_goblets.jpg b/static/images/events/ballad_in_goblets.jpg new file mode 100644 index 00000000..4c3d437b Binary files /dev/null and b/static/images/events/ballad_in_goblets.jpg differ diff --git a/static/images/events/epitome_invocation_2.jpg b/static/images/events/epitome_invocation_2.jpg new file mode 100644 index 00000000..817a070f Binary files /dev/null and b/static/images/events/epitome_invocation_2.jpg differ diff --git a/static/images/events/outland_gastronomy.jpg b/static/images/events/outland_gastronomy.jpg new file mode 100644 index 00000000..adc72c69 Binary files /dev/null and b/static/images/events/outland_gastronomy.jpg differ diff --git a/static/images/events/windborne_blossoms.jpg b/static/images/events/windborne_blossoms.jpg new file mode 100644 index 00000000..b114f5c6 Binary files /dev/null and b/static/images/events/windborne_blossoms.jpg differ