Update timeline

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',
+    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',
@@ -62,12 +105,23 @@ export const eventsData = [
       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',
+    },
+  ],
 ];

src/routes/timeline/_detail.svelte

@@ -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}

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;
+  $: 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);
   $: 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}
+  <!-- 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">
-        {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}

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));