Update timeline

src/data/timeline.js

@@ -1,4 +1,52 @@
 export const eventsData = [
+  [
+    {
+      name: 'Mesmerizing Dream at Sea',
+      pos: '20% 23%',
+      image: 'mesmerizing_dream_at_sea.jpg',
+      start: '2022-07-22 10:00:00',
+      end: '2022-07-31 23:59:59',
+      color: '#8cd8f1',
+      zoom: '300%',
+      url: 'https://www.hoyolab.com/article/6129641',
+      showOnHome: true,
+    },
+    {
+      name: 'A Journey Through Pages',
+      pos: '20% 23%',
+      image: 'a_journey_through_pages.jpg',
+      start: '2022-08-17 12:00:00',
+      end: '2022-08-23 23:59:59',
+      color: '#f0ece1',
+      zoom: '300%',
+      url: 'https://www.hoyolab.com/article/7018436',
+      showOnHome: true,
+    },
+  ],
+  [
+    {
+      name: 'Go Go, Forest Rangers!',
+      pos: '0% 30%',
+      image: 'go_go_forest_rangers.jpg',
+      start: '2022-08-19 12:00:00',
+      end: '2022-08-24 23:59:59',
+      color: '#2dd378',
+      zoom: '200%',
+      url: 'https://www.hoyolab.com/article/7056771',
+      showOnHome: true,
+    },
+    {
+      name: 'Fayz Trials',
+      pos: '0% 40%',
+      image: 'fayz_trials.jpg',
+      start: '2022-09-08 10:00:00',
+      end: '2022-09-26 03:59:59',
+      color: '#ff9486',
+      zoom: '100%',
+      url: 'https://www.hoyolab.com/article/7113923',
+      showOnHome: true,
+    },
+  ],
   [
     {
       name: 'A Muddy Bizzare Adventure',
@@ -22,17 +70,6 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/5444663',
       showOnHome: true,
     },
-    {
-      name: 'Mesmerizing Dream at Sea',
-      pos: '20% 23%',
-      image: 'mesmerizing_dream_at_sea.jpg',
-      start: '2022-07-22 10:00:00',
-      end: '2022-07-31 23:59:59',
-      color: '#8cd8f1',
-      zoom: '300%',
-      url: 'https://www.hoyolab.com/article/6129641',
-      showOnHome: true,
-    },
     {
       name: 'Reminiscent Regimen',
       pos: '0% 35%',
@@ -44,6 +81,17 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/6533766',
       showOnHome: true,
     },
+    {
+      name: 'Lost Riches',
+      pos: '0% 50%',
+      image: 'lost_riches_2.jpg',
+      start: '2022-09-02 10:00:00',
+      end: '2022-09-19 03:59:59',
+      color: '#FFF2DC',
+      zoom: '250%',
+      url: 'https://www.hoyolab.com/article/7113923',
+      showOnHome: true,
+    },
   ],
   [
     {
@@ -79,6 +127,17 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/6171423',
       showOnHome: true,
     },
+    {
+      name: 'Graven Innocence',
+      pos: '0% 20%',
+      zoom: '200%',
+      image: 'graven_innocence.jpg',
+      start: '2022-08-24 06:00:00',
+      end: '2022-09-28 06:00:00',
+      color: '#c4e6f8',
+      url: 'https://www.hoyolab.com/article/7113808',
+      showOnHome: true,
+    },
   ],
   [
     {
@@ -115,6 +174,34 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/5958494',
       showOnHome: true,
     },
+    {
+      name: 'I',
+      start: '2022-08-24 06:00:00',
+      end: '2022-08-27 03:59:59',
+      color: '#c4e6f8',
+    },
+    {
+      name: 'II',
+      start: '2022-08-27 04:00:00',
+      end: '2022-08-30 03:59:59',
+      color: '#c4e6f8',
+    },
+    {
+      name: 'III',
+      start: '2022-08-30 04:00:00',
+      end: '2022-09-02 03:59:59',
+      color: '#c4e6f8',
+    },
+    {
+      name: 'Stage IV',
+      pos: '0% 20%',
+      zoom: '200%',
+      image: 'graven_innocence.jpg',
+      start: '2022-09-02 04:00:00',
+      end: '2022-09-28 06:00:00',
+      color: '#c4e6f8',
+      url: 'https://www.hoyolab.com/article/7113808',
+    },
   ],
   [
     {
@@ -152,6 +239,18 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/6857289',
       showOnHome: true,
     },
+    {
+      name: 'Viridescent Vigil - Tighnari Banner',
+      pos: '30% 15%',
+      zoom: '200%',
+      image: 'viridescent_vigil_1.jpg',
+      start: '2022-08-24 06:00:00',
+      end: '2022-09-09 17:59:59',
+      color: '#76df81',
+      url: 'https://www.hoyolab.com/article/7113809',
+      showOnHome: true,
+      timezoneDependent: true,
+    },
   ],
   [
     {
@@ -200,6 +299,18 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/6197311',
       showOnHome: true,
     },
+    {
+      name: 'Gentry of Hermitage - Zhongli Banner',
+      pos: '30% 15%',
+      zoom: '200%',
+      image: 'gentry_of_hermitage_4.jpg',
+      start: '2022-08-24 06:00:00',
+      end: '2022-09-09 17:59:59',
+      color: '#D1A55C',
+      url: 'https://www.hoyolab.com/article/7113810',
+      showOnHome: true,
+      timezoneDependent: true,
+    },
   ],
   [
     {
@@ -248,6 +359,18 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/6197314',
       showOnHome: true,
     },
+    {
+      name: 'Epitome Invocation - Weapon Banner',
+      pos: '30% 30%',
+      zoom: '150%',
+      image: 'epitome_invocation_33.jpg',
+      start: '2022-08-24 06:00:00',
+      end: '2022-09-09 17:59:59',
+      color: '#FFAA4B',
+      url: 'https://www.hoyolab.com/article/7113811',
+      showOnHome: true,
+      timezoneDependent: true,
+    },
   ],
   [
     {
@@ -374,5 +497,15 @@ export const eventsData = [
       url: 'https://www.hoyolab.com/article/5916190',
       timezoneDependent: true,
     },
+    {
+      name: 'Battle Pass - Luxuriant Woodlands',
+      pos: '0% 12%',
+      image: 'luxuriant_woodlands.jpg',
+      start: '2022-08-24 06:00:00',
+      end: '2022-09-26 03:59:59',
+      color: '#7bc9af',
+      url: 'https://www.hoyolab.com/article/7113923',
+      timezoneDependent: true,
+    },
   ],
 ];

src/routes/timeline/_detail.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { t } from 'svelte-i18n';
+
+  import dayjs from 'dayjs';
+  import { onMount } from 'svelte';
+
+  export let event;
+  export let timeDifference;
+
+  let now = dayjs().add(timeDifference, 'minute');
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      now = dayjs().add(timeDifference, 'minute');
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  $: started = now.isAfter(event.start);
+  $: ended = now.isAfter(event.end);
+  $: diffStart = event.start.diff(now);
+  $: diffEnd = event.end.diff(now);
+</script>
+
+<div>
+  {#if event.image}
+    <img src="/images/events/{event.image}" class="w-full rounded-lg mb-4" alt={event.name} />
+  {/if}
+  <h1 class="text-white font-display font-semibold text-xl">{event.name}</h1>
+  <p class="text-gray-400 font-body flex flex-col md:flex-row">
+    <span class="flex">
+      <span>{event.start.format('ddd, D MMM YYYY HH:mm')}</span>
+      {#if !event.startOnly}<span class="mx-2">-</span>{/if}
+    </span>
+    {#if !event.startOnly}
+      <span>{event.end.format('ddd, D MMM YYYY HH:mm')}</span>
+    {/if}
+  </p>
+  {#if event.url}
+    <p class="my-2 overflow-auto mt-4">
+      <a class="text-primary hover:underline" target="_blank" href={event.url}>{event.url}</a>
+    </p>
+  {/if}
+  {#if event.description}
+    <p class="my-2 overflow-auto mt-4 text-gray-200">
+      {event.description}
+    </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')}
+      {`${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')}
+      {`${diffEnd > 86400000 ? `${Math.trunc(dayjs.duration(diffEnd).asDays())}d` : ''} ${dayjs
+        .duration(diffEnd)
+        .format('HH:mm:ss')}`}
+    {:else if event.startOnly}
+      {$t('timeline.live')}
+    {:else}
+      {$t('timeline.finished')}
+    {/if}
+  </p>
+</div>

src/routes/timeline/index.svelte

@@ -13,7 +13,7 @@
 
   import Checkbox from '../../components/Checkbox.svelte';
   import EventItem from './_item.svelte';
-  import DetailModal from '../calendar/_detail.svelte';
+  import DetailModal from './_detail.svelte';
   import { getAccountPrefix } from '../../stores/account';
   import { readSave } from '../../stores/saveManager';
   import Ad from '../../components/Ad.svelte';

src/service-worker.js

@@ -7,7 +7,7 @@ const IMAGE_CACHE = `cacheimg${IMAGE_CACHE_VER}`;
 
 const IMAGE_URL = `${self.location.origin}/images/`;
 
-const changelog = ['Added calendar (database > calendar)', 'Minor fixes'];
+const changelog = ['Update Timeline'];
 
 const channel = new BroadcastChannel('paimonmoe-sw');