Update and fix timeline timezone

src/data/timeline.js

@@ -11,6 +11,17 @@ export const eventsData = [
       url: 'https://genshin.mihoyo.com/en/news/detail/12368',
       showOnHome: true,
     },
+    {
+      name: 'Legend of the Vagabond Sword',
+      pos: '0% 45%',
+      image: 'legend_of_the_vagabond.jpg',
+      start: '2021-06-25 10:00:00',
+      end: '2021-07-08 03:59:59',
+      color: '#7A92FF',
+      zoom: '180%',
+      url: 'https://genshin.mihoyo.com/en/news/detail/12368',
+      showOnHome: true,
+    },
   ],
   [
     {
@@ -39,12 +50,13 @@ export const eventsData = [
       name: 'Echoing Tales',
       pos: '0% 15%',
       image: 'echoing_tales.png',
-      start: '2021-06-09 10:00:00',
+      start: '2021-06-09 11:00:00',
       end: '2021-07-21 15:00:00',
       color: '#90CEF5',
       zoom: '230%',
       url: 'https://www.hoyolab.com/genshin/article/415684',
       showOnHome: true,
+      timezoneDependent: true,
     },
   ],
   [
@@ -85,12 +97,13 @@ export const eventsData = [
       name: 'Midsummer Island Adventure',
       pos: '50% 35%',
       image: 'midsummer_island_adventure.png',
-      start: '2021-06-09 10:00:00',
+      start: '2021-06-09 11:00:00',
       end: '2021-06-28 04:00:00',
       color: '#63A3F6',
       zoom: '200%',
       url: 'https://www.hoyolab.com/genshin/article/415687',
       showOnHome: true,
+      timezoneDependent: true,
     },
   ],
   [
@@ -123,11 +136,12 @@ export const eventsData = [
     },
     {
       name: 'Act I',
-      start: '2021-06-09 10:00:00',
+      start: '2021-06-09 11:00:00',
       end: '2021-06-11 04:00:00',
       color: '#63A3F6',
       url: 'https://www.hoyolab.com/genshin/article/415687',
       startOnly: true,
+      timezoneDependent: true,
     },
     {
       name: 'Act II',
@@ -168,6 +182,7 @@ export const eventsData = [
       color: '#FDFB80',
       url: 'https://genshin.mihoyo.com/en/news/detail/12265',
       showOnHome: true,
+      timezoneDependent: true,
     },
     {
       name: 'Born of Ocean Swell - Eula Banner',
@@ -178,16 +193,18 @@ export const eventsData = [
       color: '#A6D6E0',
       url: 'https://genshin.mihoyo.com/en/news/detail/12736',
       showOnHome: true,
+      timezoneDependent: true,
     },
     {
       name: 'Sparkling Steps - Klee Banner',
       pos: '30% 22%',
       image: 'sparkling_steps_2.png',
-      start: '2021-06-09 10:00:00',
+      start: '2021-06-09 11:00:00',
       end: '2021-06-29 17:59:59',
       color: '#FF7357',
       url: 'https://genshin.mihoyo.com/en/news/detail/13294',
       showOnHome: true,
+      timezoneDependent: true,
     },
   ],
   [
@@ -201,6 +218,7 @@ export const eventsData = [
       zoom: '170%',
       url: 'https://genshin.mihoyo.com/en/news/detail/12270',
       showOnHome: true,
+      timezoneDependent: true,
     },
     {
       name: 'Epitome Invocation - Weapon Banner',
@@ -212,17 +230,19 @@ export const eventsData = [
       zoom: '170%',
       url: 'https://genshin.mihoyo.com/en/news/detail/12749',
       showOnHome: true,
+      timezoneDependent: true,
     },
     {
       name: 'Epitome Invocation - Weapon Banner',
       image: 'epitome_invocation_13.png',
       pos: '30% 30%',
-      start: '2021-06-09 10:00:00',
+      start: '2021-06-09 11:00:00',
       end: '2021-06-29 17:59:59',
       color: '#FFAA4B',
       zoom: '170%',
       url: 'https://genshin.mihoyo.com/en/news/detail/13295',
       showOnHome: true,
+      timezoneDependent: true,
     },
   ],
   [
@@ -336,14 +356,16 @@ export const eventsData = [
       start: '2021-04-28 06:00:00',
       end: '2021-06-07 04:00:00',
       color: '#68D391',
+      timezoneDependent: true,
     },
     {
       name: 'Battle Pass',
       image: 'marine_hues.png',
       pos: '0% 12%',
-      start: '2021-06-09 10:00:00',
+      start: '2021-06-09 11:00:00',
       end: '2021-07-19 04:00:00',
       color: '#4EB3D6',
+      timezoneDependent: true,
     },
   ],
 ];

src/routes/_index/event.svelte

@@ -8,18 +8,31 @@
 
   import Icon from '../../components/Icon.svelte';
   import { eventsData } from '../../data/timeline';
+  import { getTimeDifference, getTimeDifferenceAsia, server } from '../../stores/server';
+  import { getAccountPrefix } from '../../stores/account';
+  import { readSave } from '../../stores/saveManager';
 
   const dispatch = createEventDispatcher();
 
-  const now = dayjs();
+  let now;
   let upcoming = [];
   let current = [];
 
+  let timeDifferenceEvent;
+  let timeDifferenceAsia;
+
   function checkEvent(event) {
     if (!event.showOnHome) return;
 
-    const start = dayjs(event.start);
-    const end = dayjs(event.end);
+    let start;
+    if (event.timezoneDependent) {
+      start = dayjs(event.start, 'YYYY-MM-DD HH:mm:ss').subtract(timeDifferenceAsia, 'minute');
+    } else {
+      start = dayjs(event.start, 'YYYY-MM-DD HH:mm:ss').subtract(timeDifferenceEvent, 'minute');
+    }
+
+    const end = dayjs(event.end).subtract(timeDifferenceEvent, 'minute');
+
     if (start.isBefore(now) && end.isAfter(now)) {
       const diff = end.diff(now);
       const timeLeft = dayjs.duration(diff);
@@ -46,10 +59,21 @@
   }
 
   onMount(async () => {
+    const prefix = getAccountPrefix();
+    const serverSave = await readSave(`${prefix}server`);
+    if (serverSave !== null) {
+      server.set(serverSave);
+    }
+
+    timeDifferenceEvent = getTimeDifference();
+    timeDifferenceAsia = getTimeDifferenceAsia();
+    now = dayjs();
+
     parseEvents();
     await tick();
     dispatch('done');
   });
+
 </script>
 
 <div class="bg-item rounded-xl p-4 flex flex-col">

src/routes/timeline/index.svelte

@@ -8,12 +8,14 @@
   dayjs.extend(duration);
   dayjs.extend(timezone);
 
-  import { getTimeDifference, server } from '../../stores/server';
+  import { getTimeDifference, getTimeDifferenceAsia, getTimeOffset, server } from '../../stores/server';
   import { eventsData } from '../../data/timeline';
 
   import Checkbox from '../../components/Checkbox.svelte';
   import EventItem from './_item.svelte';
   import DetailModal from './_detail.svelte';
+  import { getAccountPrefix } from '../../stores/account';
+  import { readSave } from '../../stores/saveManager';
 
   const { open: openModal } = getContext('simple-modal');
 
@@ -24,6 +26,7 @@
   let showAsLocalTime = true;
   let timeDifference = 0;
   let timeDifferenceEvent = 0;
+  let timeDifferenceAsia = 0;
 
   let dayWidth = 50;
   const eventHeight = 36;
@@ -41,6 +44,8 @@
 
   let browserTimeZone = '';
 
+  let firstLoad = true;
+
   function openDetail(event) {
     openModal(
       DetailModal,
@@ -56,7 +61,12 @@
   }
 
   function convertToDate(e, i) {
-    const start = dayjs(e.start, 'YYYY-MM-DD HH:mm:ss').subtract(timeDifferenceEvent, 'minute');
+    let start;
+    if (e.timezoneDependent) {
+      start = dayjs(e.start, 'YYYY-MM-DD HH:mm:ss').subtract(timeDifferenceAsia, 'minute');
+    } else {
+      start = dayjs(e.start, 'YYYY-MM-DD HH:mm:ss').subtract(timeDifferenceEvent, 'minute');
+    }
     const end = dayjs(e.end, 'YYYY-MM-DD HH:mm:ss').subtract(timeDifferenceEvent, 'minute');
     const duration = end.diff(start, 'day', true);
 
@@ -140,13 +150,16 @@
 
   async function toggleLocalTime() {
     const diff = getTimeDifference();
+    console.log('toggle local time', showAsLocalTime);
 
     if (showAsLocalTime) {
       timeDifferenceEvent = diff;
       timeDifference = 0;
+      timeDifferenceAsia = getTimeDifferenceAsia();
     } else {
       timeDifferenceEvent = 0;
       timeDifference = diff;
+      timeDifferenceAsia = (8 - getTimeOffset()) * 60;
     }
 
     today = dayjs().add(timeDifference, 'minute');
@@ -167,22 +180,36 @@
       top: 0,
       behavior: 'smooth',
     });
+
+    firstLoad = false;
   }
 
   onMount(async () => {
-    await toggleLocalTime();
+    const prefix = getAccountPrefix();
+    const serverSave = await readSave(`${prefix}server`);
+    if (serverSave !== null) {
+      console.log(serverSave);
+      server.set(serverSave);
+    }
+
+    browserTimeZone = dayjs.tz.guess();
+    toggleLocalTime();
 
     const interval = setInterval(() => {
       today = dayjs().add(timeDifference, 'minute');
     }, 1000);
 
-    browserTimeZone = dayjs.tz.guess();
-
     return () => {
       clearInterval(interval);
     };
   });
 
+  function onCheckLocalTime() {
+    if (!firstLoad) {
+      toggleLocalTime();
+    }
+  }
+
   function transformScroll(event) {
     if (!event.deltaY) {
       return;
@@ -195,7 +222,8 @@
   }
 
   $: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
-  $: showAsLocalTime, toggleLocalTime();
+  $: showAsLocalTime, onCheckLocalTime();
+
 </script>
 
 <svelte:head>
@@ -214,7 +242,9 @@
   <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')} ({browserTimeZone} - {$server} Server)</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
@@ -307,4 +337,5 @@
     background: rgba(0, 0, 0, 0.35);
     @apply rounded-xl;
   }
+
 </style>

src/stores/server.js

@@ -21,14 +21,21 @@ const weekdays = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'frida
 
 export const getTimeOffset = () => {
   return timeOffset[get(server)];
-}
+};
 
 export const getTimeDifference = () => {
   const now = dayjs();
   const local = now.utcOffset();
   const serverTime = now.utcOffset(timeOffset[get(server)]).utcOffset();
   return serverTime - local;
-}
+};
+
+export const getTimeDifferenceAsia = () => {
+  const now = dayjs();
+  const local = now.utcOffset();
+  const serverTime = now.utcOffset(timeOffset.Asia).utcOffset();
+  return serverTime - local;
+};
 
 export const getCurrentDay = () => {
   const time = dayjs().utcOffset(timeOffset[get(server)]);