Use runes and save config in localStorage

src/routes/timer/+page.svelte

@@ -1,48 +1,54 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte"
-  import { writable } from "svelte/store"
+  import { browser } from "$app/environment"
-  import type { Writable } from "svelte/store"
 
-  const BREAK_INTERVAL_STORE: Writable<number> = writable(20)
+  let BREAK_INTERVAL_STORE = $state(browser ? (localStorage.getItem('breakInterval') || 20) : 20)
-  const MINI_BREAK_DURATION_STORE: Writable<number> = writable(20)
+  let MINI_BREAK_DURATION_STORE = $state(browser ? (localStorage.getItem('miniBreakDuration') || 20) : 20)
-  const LONG_BREAK_DURATION_STORE: Writable<number> = writable(5)
+  let LONG_BREAK_DURATION_STORE = $state(browser ? (localStorage.getItem('longBreakDuration') || 5) : 5)
-  const SOUND_ENABLED: Writable<boolean> = writable(true)
+  let SOUND_ENABLED = $state(browser ? ((localStorage.getItem('soundEnabled') || 'true') === 'true') : true)
-  const NOTIFICATIONS_ENABLED: Writable<boolean> = writable(true)
+  let NOTIFICATIONS_ENABLED = $state(browser ? ((localStorage.getItem('notificationsEnabled') || 'true') === 'true') : true)
 
   let BREAK_INTERVAL: number
   let MINI_BREAK_DURATION: number
   let LONG_BREAK_DURATION: number
-  let SOUND_ENABLED_STATE: boolean
-  let NOTIFICATIONS_ENABLED_STATE: boolean
 
   let timer: number | null = null
 
-  const state: Writable<string> = writable("Ready")
+  let timerState = $state("Ready")
-  const timeLeftDisplay: Writable<string> = writable("")
+  let timeLeftDisplay = $state("")
-  const timeLeft: Writable<number> = writable($BREAK_INTERVAL_STORE)
+  let timeLeft = $state(BREAK_INTERVAL_STORE)
 
-  BREAK_INTERVAL_STORE.subscribe((value) => {
+  $effect(() => {
-    BREAK_INTERVAL = value * 60 * 1000
+    BREAK_INTERVAL = BREAK_INTERVAL_STORE * 60 * 1000
-    timeLeft.set(BREAK_INTERVAL)
+    timeLeft = BREAK_INTERVAL
-    timeLeftDisplay.set(formatTime(BREAK_INTERVAL))
+    timeLeftDisplay = formatTime(BREAK_INTERVAL)
+    localStorage.setItem("breakInterval", BREAK_INTERVAL_STORE)
+  })
+
+  $effect(() => {
+    MINI_BREAK_DURATION = MINI_BREAK_DURATION_STORE * 1000
+    localStorage.setItem('miniBreakDuration', MINI_BREAK_DURATION_STORE)
+  })
+
+  $effect(() => {
+    LONG_BREAK_DURATION = LONG_BREAK_DURATION_STORE * 60 * 1000
+    localStorage.setItem('longBreakDuration', LONG_BREAK_DURATION_STORE)
+  })
+
+  $effect(() => {
+    localStorage.setItem('soundEnabled', SOUND_ENABLED)
+  })
+
+  $effect(() => {
+    localStorage.setItem('notificationsEnabled', NOTIFICATIONS_ENABLED)
   })
-  MINI_BREAK_DURATION_STORE.subscribe(
-    (value) => (MINI_BREAK_DURATION = value * 1000)
-  )
-  LONG_BREAK_DURATION_STORE.subscribe(
-    (value) => (LONG_BREAK_DURATION = value * 60 * 1000)
-  )
-  SOUND_ENABLED.subscribe((value) => (SOUND_ENABLED_STATE = value))
-  NOTIFICATIONS_ENABLED.subscribe(
-    (value) => (NOTIFICATIONS_ENABLED_STATE = value)
-  )
 
   let miniBreakCount = 0
 
   let audio: HTMLAudioElement | null = null
 
   const playSound = () => {
-    if (SOUND_ENABLED_STATE && audio) {
+    if (SOUND_ENABLED && audio) {
       audio.pause()
       audio.src = "/sounds/Bells.mp3"
       audio.volume = 0.4
@@ -51,7 +57,7 @@
   }
 
   const showNotification = (title: string, options: NotificationOptions) => {
-    if (NOTIFICATIONS_ENABLED_STATE) {
+    if (NOTIFICATIONS_ENABLED) {
       if (Notification.permission === "granted") {
         new Notification(title, options)
       } else if (Notification.permission !== "denied") {
@@ -68,39 +74,42 @@
     if (timer) clearInterval(timer)
 
     timer = setInterval(() => {
-      timeLeft.update((currentTimeLeft) => {
+      const newTimeLeft = timeLeft - 1000
-        const newTimeLeft = currentTimeLeft - 1000
+      if (newTimeLeft <= 0) {
-        if (newTimeLeft <= 0) {
+        console.log(timerState)
-          if ($state !== "Ready") {
+        if (timerState !== "Ready") {
-            state.set("Ready")
+          timerState = "Ready"
-            miniBreakCount++
+          miniBreakCount++
-            timeLeftDisplay.set(formatTime(BREAK_INTERVAL))
+          timeLeftDisplay = formatTime(BREAK_INTERVAL)
-            showNotification("Ready", { body: "Continue working!" })
+          showNotification("Ready", { body: "Continue working!" })
-            playSound()
+          playSound()
-            return BREAK_INTERVAL
+          timeLeft = BREAK_INTERVAL
-          }
+          return
-          if (miniBreakCount === 3) {
-            state.set("Long Break")
-            miniBreakCount = 0
-            timeLeftDisplay.set(formatTime(LONG_BREAK_DURATION))
-            showNotification("Long Break", {
-              body: `Take a ${LONG_BREAK_DURATION / (60 * 1000)}-second break now!`,
-            })
-            playSound()
-            return LONG_BREAK_DURATION
-          } else {
-            state.set("Mini Break")
-            timeLeftDisplay.set(formatTime(MINI_BREAK_DURATION))
-            showNotification("Mini Break", {
-              body: `Take a ${MINI_BREAK_DURATION / 1000}-second break now!`,
-            })
-            playSound()
-            return MINI_BREAK_DURATION
-          }
         }
-        timeLeftDisplay.set(formatTime(newTimeLeft))
+        if (miniBreakCount === 3) {
-        return newTimeLeft
+          timerState = "Long Break"
-      })
+          miniBreakCount = 0
+          timeLeftDisplay = formatTime(LONG_BREAK_DURATION)
+          showNotification("Long Break", {
+            body: `Take a ${LONG_BREAK_DURATION / (60 * 1000)}-second break now!`,
+          })
+          playSound()
+          timeLeft = LONG_BREAK_DURATION
+          return
+        } else {
+          timerState = "Mini Break"
+          timeLeftDisplay = formatTime(MINI_BREAK_DURATION)
+          showNotification("Mini Break", {
+            body: `Take a ${MINI_BREAK_DURATION / 1000}-second break now!`,
+          })
+          playSound()
+          timeLeft = MINI_BREAK_DURATION
+          return
+        }
+      }
+      timeLeftDisplay = formatTime(newTimeLeft)
+      timeLeft = newTimeLeft
+      console.log(timeLeft)
     }, 1000)
   }
 
@@ -115,12 +124,12 @@
   })
 
   const skipBreak = () => {
-    if ($state === "Ready") {
+    if (timerState === "Ready") {
       return
     }
-    state.set("Ready")
+    timerState = "Ready"
-    timeLeft.set(BREAK_INTERVAL)
+    timeLeft = BREAK_INTERVAL
-    timeLeftDisplay.set(formatTime(BREAK_INTERVAL))
+    timeLeftDisplay = formatTime(BREAK_INTERVAL)
   }
 
   function formatTime(milliseconds: number) {
@@ -133,59 +142,64 @@
 </script>
 
 <main>
+
+{#if !browser}
+  <div class="loading-spinner"/>
+{:else}
+
+
   <div class="container">
     <div class="settings">
-      <h1>Prevent CVS</h1>
 
       <div class="setting">
         <label for="break-interval"
-          >Break interval: {BREAK_INTERVAL / (60 * 1000)} minutes</label
+          >Break interval: {BREAK_INTERVAL_STORE} minutes</label
         >
         <input
           type="range"
           min="1"
           max="60"
           step="1"
-          bind:value={$BREAK_INTERVAL_STORE}
+          bind:value={BREAK_INTERVAL_STORE}
         />
       </div>
 
       <div class="setting">
         <label for="mini-break-duration"
-          >Mini break duration: {MINI_BREAK_DURATION / 1000} seconds</label
+          >Mini break duration: {MINI_BREAK_DURATION_STORE} seconds</label
         >
         <input
           type="range"
           min="5"
           max="60"
           step="1"
-          bind:value={$MINI_BREAK_DURATION_STORE}
+          bind:value={MINI_BREAK_DURATION_STORE}
         />
       </div>
 
       <div class="setting">
         <label for="long-break-duration"
-          >Long break duration: {LONG_BREAK_DURATION / (60 * 1000)} minutes</label
+          >Long break duration: {LONG_BREAK_DURATION_STORE} minutes</label
         >
         <input
           type="range"
           min="1"
           max="30"
           step="1"
-          bind:value={$LONG_BREAK_DURATION_STORE}
+          bind:value={LONG_BREAK_DURATION_STORE}
         />
       </div>
 
       <div class="setting">
         <label>
-          <input type="checkbox" bind:checked={$SOUND_ENABLED} />
+          <input type="checkbox" bind:checked={SOUND_ENABLED} />
           Sound
         </label>
       </div>
 
       <div class="setting">
         <label>
-          <input type="checkbox" bind:checked={$NOTIFICATIONS_ENABLED} />
+          <input type="checkbox" bind:checked={NOTIFICATIONS_ENABLED} />
           Notifications
         </label>
       </div>
@@ -193,18 +207,22 @@
   </div>
 
   <div class="container">
+    <h1>Prevent CVS</h1>
+
     <div class="timer">
-      {#if $state !== "Ready"}
+      {#if timerState !== "Ready"}
         <div class="timer-content">
-          <p class="state">{$state}</p>
+          <p class="state">{timerState}</p>
-          <p>Time left until end of break: {$timeLeftDisplay}</p>
+          <p>Time left until end of break: {timeLeftDisplay}</p>
           <button on:click={skipBreak}>Skip break</button>
         </div>
       {:else}
-        <p>Time left until break: {$timeLeftDisplay}</p>
+        <p>Time left until break: {timeLeftDisplay}</p>
       {/if}
     </div>
   </div>
+  
+{/if}
 </main>
 
 <style lang="postcss">
@@ -255,4 +273,26 @@
   .state {
     @apply text-2xl font-semibold text-red-500;
   }
+
+  .loading-spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #3498db;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    animation: spin 1s linear infinite;
+    @apply max-w-xl;
+    @apply mx-auto;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+
 </style>