Update timeline

src/data/timeline.js

@@ -44,6 +44,17 @@ export const eventsData = [
       url: 'https://genshin.mihoyo.com/en/news/detail/12368',
       showOnHome: true,
     },
+    {
+      name: 'Update 1.6!',
+      pos: '0% 40%',
+      image: 'update16.jpg',
+      start: '2021-06-09 10:00:00',
+      end: '2021-06-16 10:00:00',
+      color: '#3B8AFF',
+      zoom: '140%',
+      url: 'https://www.youtube.com/watch?v=OrZ8RbXwoK4',
+      showOnHome: true,
+    },
   ],
   [
     {
@@ -96,7 +107,7 @@ export const eventsData = [
       image: 'mimi_tomo_update.jpg',
       start: '2021-05-27 10:00:00',
       end: '2021-06-08 04:00:00',
-      color: '#B89BCB',
+      color: '#E5C18B',
       zoom: '200%',
       url: 'https://www.hoyolab.com/genshin/article/387817',
       showOnHome: true,
@@ -149,12 +160,13 @@ export const eventsData = [
     },
     {
       name: 'Overflowing Mastery',
-      pos: '0% 85%',
+      pos: '0% 50%',
       image: 'overflowing_mastery.jpg',
-      start: '2021-05-31 10:00:00',
+      start: '2021-05-31 04:00:00',
       end: '2021-06-07 04:00:00',
       color: '#FFF76C',
-      zoom: '150%',
+      zoom: '200%',
+      url: 'https://www.hoyolab.com/genshin/article/394841',
       showOnHome: true,
     },
   ],
@@ -365,7 +377,7 @@ export const eventsData = [
       end: '2021-06-01 04:00:00',
       color: '#4299E1',
       description:
-        "A backlash will occur when opponents hit a character protected by a shield, unleashing a shockwave that deals AoE DMG. Can occur once every 6s.",
+        'A backlash will occur when opponents hit a character protected by a shield, unleashing a shockwave that deals AoE DMG. Can occur once every 6s.',
     },
     {
       name: 'Spiral Abyss',
@@ -409,6 +421,16 @@ export const eventsData = [
       image: 'paimon_bargain.png',
       description: 'Now selling: Bennett, Lisa, and Blackcliff Weapons.',
     },
+    {
+      name: "Paimon's Bargain - Barbara, Kaeya, and Royal",
+      pos: '0% 50%',
+      zoom: '150%',
+      start: '2021-06-01 04:00:00',
+      end: '2021-07-01 04:00:00',
+      color: '#B6A1EA',
+      image: 'paimon_bargain.png',
+      description: 'Now selling: Barbara, Kaeya, and Royal Weapons.',
+    },
   ],
   [
     {

src/routes/timeline/_item.svelte

@@ -23,8 +23,9 @@
   $: attachedNext = next !== null && next.start.diff(event.end, 'hour') < 3;
   $: attachedPrev = prev !== null && event.start.diff(prev.end, 'hour') < 3;
   $: prevEnded = prev !== null && now.isAfter(prev.end);
-  $: shouldShowHourStart = diffStart <= 86400000 || event.duration > 8 || !prevNearby;
-  $: shouldShowHourEnd = diffEnd <= 86400000 || event.duration > 8 || !prevNearby;
+  $: shouldShowHourStart = diffStart <= 86400000 || event.duration > 6.5 || !prevNearby;
+  $: shouldShowHourEnd = diffEnd <= 86400000 || event.duration > 6.5 || !prevNearby;
+
 </script>
 
 <div
@@ -32,23 +33,18 @@
   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 *
-    event.offset}px; background-color: {event.color};
-   top: {marginTop +
-    i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px; 
-        {prevNearby &&
-  !started &&
-  (attachedPrev || prevEnded) &&
-  prevNearby
+  style="width: {dayWidth * event.duration}px; left: {dayWidth * event.offset}px; background-color: {event.color};
+   top: {marginTop + i * (eventHeight + eventMargin)}px; height: {eventHeight}px; padding-right: 10px; 
+        {prevNearby && !started && (attachedPrev || prevEnded) && prevNearby
     ? 'padding-left: 35px;'
     : '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 {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 overflow-hidden">
+  <span
+    class="event-name text sticky left-0 font-display text-base md:text-lg text-black font-bold whitespace-no-wrap overflow-hidden"
+  >
     {event.name}
   </span>
   <!-- Ending timer-->
@@ -106,4 +102,5 @@
     text-shadow: var(--color) -1px -1px 4px, var(--color) 1px -1px 4px, var(--color) -1px 1px 4px,
       var(--color) 1px 1px 4px, var(--color) 0 0 10px;
   }
+
 </style>