Update timeline

src/data/timeline.js

@@ -90,6 +90,16 @@ export const eventsData = [
       url: 'https://genshin.mihoyo.com/en/news/detail/12281',
       showOnHome: true,
     },
+    {
+      name: 'Mimi Tomo',
+      pos: '0% 35%',
+      image: 'mimi_tomo.jpg',
+      start: '2021-05-27 10:00:00',
+      end: '2021-06-08 04:00:00',
+      color: '#B89BCB',
+      zoom: '200%',
+      showOnHome: true,
+    },
   ],
   [
     {
@@ -125,6 +135,26 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/genshin/article/329821',
       showOnHome: true,
     },
+    {
+      name: 'Battlefront: Misty Dungeon',
+      pos: '0% 85%',
+      image: 'battlefront_misty_dungeon.jpg',
+      start: '2021-05-21 10:00:00',
+      end: '2021-05-31 04:00:00',
+      color: '#95C9B9',
+      zoom: '150%',
+      showOnHome: true,
+    },
+    {
+      name: 'Overflowing Mastery',
+      pos: '0% 85%',
+      image: 'overflowing_mastery.jpg',
+      start: '2021-05-31 10:00:00',
+      end: '2021-06-07 04:00:00',
+      color: '#FFF76C',
+      zoom: '150%',
+      showOnHome: true,
+    },
   ],
   [
     {

src/routes/timeline/index.svelte

@@ -4,9 +4,11 @@
   import { getContext, onMount, tick } from 'svelte';
   import dayjs from 'dayjs';
   import duration from 'dayjs/plugin/duration';
+  import timezone from 'dayjs/plugin/timezone';
   dayjs.extend(duration);
+  dayjs.extend(timezone);
 
-  import { getTimeDifference } from '../../stores/server';
+  import { getTimeDifference, server } from '../../stores/server';
   import { eventsData } from '../../data/timeline';
 
   import Checkbox from '../../components/Checkbox.svelte';
@@ -37,6 +39,8 @@
   let events = [];
   let today = dayjs();
 
+  let browserTimeZone = '';
+
   function openDetail(event) {
     openModal(
       DetailModal,
@@ -172,6 +176,8 @@
       today = dayjs().add(timeDifference, 'minute');
     }, 1000);
 
+    browserTimeZone = dayjs.tz.guess();
+
     return () => {
       clearInterval(interval);
     };
@@ -208,7 +214,7 @@
   <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('timeline.title')}</h1>
   {#if !loading}
     <div class="px-4 md:px-8 text-white select-none">
-      <Checkbox bind:checked={showAsLocalTime}>{$t('timeline.localTime')}</Checkbox>
+      <Checkbox bind:checked={showAsLocalTime}>{$t('timeline.localTime')} ({browserTimeZone} - {$server} Server)</Checkbox>
     </div>
     <div class="w-full overflow-x-auto px-4 md:px-8" bind:this={timelineContainer} on:wheel={transformScroll}>
       <div