Add update popup

src/components/ServiceWorker.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { getContext, onMount } from 'svelte';
+  import { page } from '$app/stores';
+
+  import UpdateModal from './UpdateModal.svelte';
+
+  const { open, close } = getContext('simple-modal');
+  let broadcastChannel;
+
+  page.subscribe((p) => {
+    if (broadcastChannel) {
+      broadcastChannel.postMessage({
+        type: 'fetch-doc',
+        path: p.url.pathname,
+      });
+    }
+  });
+
+  async function refreshUpdate() {
+    open(
+      UpdateModal,
+      {
+        close,
+      },
+      {
+        closeButton: false,
+        styleWindow: { background: '#25294A', width: '500px' },
+      },
+    );
+  }
+
+  onMount(() => {
+    if ('serviceWorker' in navigator) {
+      broadcastChannel = new BroadcastChannel('paimonmoe-sw');
+      broadcastChannel.addEventListener('message', (event) => {
+        if (event.data.type === 'update') refreshUpdate();
+      });
+
+      navigator.serviceWorker.register('/service-worker.js').then(
+        function () {
+          console.log('service worker registration succeeded');
+        },
+        function (error) {
+          console.log('service worker registration failed:', error);
+        },
+      );
+    } else {
+      console.log('service workers are not supported');
+    }
+  });
+</script>

src/components/UpdateModal.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { t } from 'svelte-i18n';
+
+  import Button from '../components/Button.svelte';
+
+  export let close;
+
+  function reload() {
+    window.location.reload();
+  }
+</script>
+
+<div>
+  <p class="text-white font-bold mb-1 text-lg">{$t('update.newUpdate')}</p>
+  <p class="text-gray-400 mb-4">{$t('update.updateRefresh')}</p>
+  <div class="rounded-xl bg-background p-4 mb-4">
+    <p class="text-gray-200">{$t('update.whatsNew')}</p>
+    <ul class="list-disc text-white list-inside">
+      <li>Bug Fixes</li>
+    </ul>
+  </div>
+  <div class="flex justify-end space-x-2">
+    <Button on:click={close}>{$t('update.later')}</Button>
+    <Button on:click={reload} color="green">{$t('update.refresh')}</Button>
+  </div>
+</div>

src/locales/en.json

@@ -23,9 +23,6 @@
     "message": "Your best Genshin Impact companion! Paimon.moe helps you plan what to farm with an ascension calculator, and it also tracks your progress with a todo list and a wish counter.",
     "visitor": "{count} visitors in the last 7 days",
     "banner": {
-      "featured": [
-        "Eula"
-      ],
       "summoned": "Summoned",
       "percentage": "from all {rarity}",
       "avg": "Pity average",
@@ -143,10 +140,7 @@
     "manualButton": "Enable Manual Input",
     "errorBanner": "Banner time mismatch! Please adjust your server on the settings page. Still not working? Please leave a message on Discord 😅",
     "globalWishTally": "Global Wish Stats",
-    "pityTooltip": [
-      "Shows your current {rarity} pity",
-      "{count} pulls to guaranteed {rarity}"
-    ],
+    "pityTooltip": ["Shows your current {rarity} pity", "{count} pulls to guaranteed {rarity}"],
     "import": {
       "title": "Import Wish History",
       "faqsButton": "FAQ - READ FIRST",
@@ -182,11 +176,7 @@
       "server": "Select your server:",
       "wishTallyCheck": "Submit pity for global wish stats",
       "wishTally": "We are doing a global wish stats! You can submit your wish stats to participate. All pity data will be aggregated to know what is the average pity of paimon.moe users.",
-      "wishTallyCollected": [
-        "What will be collected:",
-        "and",
-        "pity from your wish history"
-      ],
+      "wishTallyCollected": ["What will be collected:", "and", "pity from your wish history"],
       "forceUpdateCheck": "Force update wish history (enable only if your wish history is not updating)",
       "header": [
         "Import and backup your Genshin Impact wish history to keep it for more than 6 months. It also automatically tracks your pity and statistics about your wishes!",
@@ -364,11 +354,7 @@
       "exportFinish": "Export success, please wait until your browser downloads the file!",
       "wishTallyTitle": "Submit Wish Stats",
       "wishTally": "We are doing a global wish stats! You can submit your wish stats to participate. All pity data will be aggregated to know what is the average pity of paimon.moe users.",
-      "wishTallyCollected": [
-        "What will be collected:",
-        "and",
-        "pity from your wish history"
-      ],
+      "wishTallyCollected": ["What will be collected:", "and", "pity from your wish history"],
       "wishTallySubmit": "Submit Wish Stats",
       "wishTallyThankyou": "Thank you for participating!",
       "manualTitle": "Manual Input Settings",
@@ -380,22 +366,13 @@
         "subtitle": "After a 1x Wish:",
         "pressWhenYouGet": "Press {button} when you get {rarity}★",
         "p1": "It will automatically add the lifetime pulls, 5★, and 4★ pity",
-        "p2": [
-          "When the",
-          "pity reaches 10, it will automatically be reset to 0"
-        ],
-        "p3": [
-          "When the",
-          "pity reaches 90, it will automatically be reset to 0"
-        ],
+        "p2": ["When the", "pity reaches 10, it will automatically be reset to 0"],
+        "p3": ["When the", "pity reaches 90, it will automatically be reset to 0"],
         "p4": [
           "After a 10x Wish, press",
           "but keep in mind that the pity counter might not be accurate, because there is no way to tell when the drop occured (maybe you got it on the 1st or even the 10th pull). To ensure that the counter is still accurate, you need to check the history table and add it one-by-one like you do 1x Wishes."
         ],
-        "p5": [
-          "You can also press the",
-          "button to edit the values manually!"
-        ],
+        "p5": ["You can also press the", "button to edit the values manually!"],
         "p6": "Press the arrow on the bottom to see your pulls' details. A popup will show up when you get a 5★ or 4★. You can also add or edit the table manually."
       }
     },
@@ -535,11 +512,7 @@
       "calculateTalent": "Calculate Talent Material?",
       "inputTalentLevel": "Input the 1st, 2nd & 3rd current talent level",
       "inputTalentNotice": "If it has a different color, subtract it by 3",
-      "inputTalent": [
-        "1st talent lvl",
-        "2nd talent lvl",
-        "3rd talent lvl"
-      ],
+      "inputTalent": ["1st talent lvl", "2nd talent lvl", "3rd talent lvl"],
       "talentToLevel": "to level",
       "calculate": "Calculate",
       "unknownInformation": "There are some unknown information",
@@ -548,11 +521,7 @@
       "expWasted": "EXP Wasted",
       "addToTodo": "Add to Todo List",
       "addedToTodo": "Added to Todo List",
-      "talent": [
-        "Attack",
-        "Skill",
-        "Burst"
-      ]
+      "talent": ["Attack", "Skill", "Burst"]
     },
     "expTable": {
       "level": "Level",
@@ -644,10 +613,7 @@
   "todo": {
     "title": "Todo List",
     "summary": "Summary",
-    "empty": [
-      "Nothing to do yet 😀",
-      "Add some from the Items page or the Calculator!"
-    ],
+    "empty": ["Nothing to do yet 😀", "Add some from the Items page or the Calculator!"],
     "farmableToday": "Farmable Today",
     "resin": "Resin needed",
     "based": "Based on AR:{ar} and WL:{wl}",
@@ -962,5 +928,12 @@
   "common": {
     "dataSynced": "Data has been synced!",
     "driveError": "Drive sync not available right now 😔"
+  },
+  "update": {
+    "newUpdate": "Paimon.moe has a new update!",
+    "updateRefresh": "Click refresh to get the new update",
+    "whatsNew": "What's new",
+    "later": "Later",
+    "refresh": "Refresh"
   }
 }

src/routes/__layout.svelte

@@ -10,6 +10,7 @@
   import { navigating, page } from '$app/stores';
 
   import Modal from 'svelte-simple-modal';
+  import { mdiDiscord, mdiFacebook, mdiGithub, mdiReddit, mdiTwitter } from '@mdi/js';
 
   import Sidebar from '../components/Sidebar/Sidebar.svelte';
   import Header from '../components/Header.svelte';
@@ -21,7 +22,7 @@
   import SettingData from '../components/SettingData.svelte';
   import Toast from '../components/Toast.svelte';
   import Icon from '../components/Icon.svelte';
-  import { mdiDiscord, mdiFacebook, mdiGithub, mdiReddit, mdiTwitter } from '@mdi/js';
+  import ServiceWorker from '../components/ServiceWorker.svelte';
 
   const delayedPreloading = derived(navigating, (_, set) => {
     set(true);
@@ -30,14 +31,9 @@
 
   startClient();
 
-  let broadcastChannel;
-  page.subscribe((p) => {
+  page.subscribe(() => {
     try {
       window.reloadAdSlots();
-      broadcastChannel.postMessage({
-        type: 'fetch-doc',
-        path: p.url.pathname,
-      });
     } catch (error) {}
   });
 
@@ -51,24 +47,6 @@
     });
     window.localforage = localforage;
     await checkLocalSave();
-
-    if ('serviceWorker' in navigator) {
-      broadcastChannel = new BroadcastChannel('paimonmoe-sw');
-      broadcastChannel.addEventListener('message', (event) => {
-        if (event.data.type === 'update') window.location.reload();
-      });
-
-      navigator.serviceWorker.register('/service-worker.js').then(
-        function () {
-          console.log('service worker registration succeeded');
-        },
-        function (error) {
-          console.log('service worker registration failed:', error);
-        },
-      );
-    } else {
-      console.log('service workers are not supported');
-    }
   });
 
   $: segment = $page.url.pathname.substring(1).split('/')[0];
@@ -88,6 +66,7 @@
       <slot />
     </main>
   </DataSync>
+  <ServiceWorker />
 </Modal>
 {#if $navigating && $delayedPreloading}
   <div transition:fade class="loading-bar" />