Update Navbar component to display visit count

src/lib/components/Navbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getNumberOfAdventures } from "../../services/adventureService";
+  import { visitCount } from '$lib/utils/stores/visitCountStore';
   import { goto } from '$app/navigation';
 
     async function goHome() {
@@ -11,6 +11,23 @@
     async function goToFeatured() {
         goto('/featured');
     }
+
+
+    let count = 0;
+    visitCount.subscribe((value) => {
+        count = value;
+    });
+
+    // Set the visit count to the number of adventures stored in local storage
+    const isBrowser = typeof window !== 'undefined';
+    if (isBrowser) {
+        const storedAdventures = localStorage.getItem('adventures');
+        if (storedAdventures) {
+            let parsed = JSON.parse(storedAdventures);
+            visitCount.set (parsed.length);
+        }
+}
+
 </script>
 <div class="navbar bg-base-100 flex flex-col md:flex-row">
     <div class="navbar-start flex justify-around md:justify-start">
@@ -22,6 +39,6 @@
       <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
     </div>
     <div class="navbar-end flex justify-around md:justify-end mr-4">
-      <p>Adventures: {getNumberOfAdventures()} </p>
+      <p>Adventures: {count} </p>
     </div>
 </div>

src/lib/utils/stores/visitCountStore.ts

@@ -0,0 +1,4 @@
+import { onMount } from "svelte";
+import { writable } from "svelte/store";
+
+export const visitCount = writable(0);

src/services/adventureService.ts

@@ -2,9 +2,12 @@ import type { Adventure } from '$lib/utils/types';
 
 let adventures: Adventure[] = [];
 
+import { visitCount } from '$lib/utils/stores/visitCountStore';
+
 // Check if localStorage is available (browser environment)
 const isBrowser = typeof window !== 'undefined';
 
+
 // Load adventures from localStorage on startup (only in the browser)
 if (isBrowser) {
     const storedAdventures = localStorage.getItem('adventures');
@@ -28,6 +31,7 @@ export function addAdventure(adventure: Adventure) {
         localStorage.setItem('adventures', JSON.stringify(adventures));
     }
     console.log(adventures);
+    visitCount.update((n) => n + 1);
 }
 
 export function getAdventures(): Adventure[] {
@@ -39,6 +43,7 @@ export function removeAdventure(event: { detail: number; }) {
     if (isBrowser) {
         localStorage.setItem('adventures', JSON.stringify(adventures));
     }
+    visitCount.update((n) => n - 1);
 }
 
 export function saveEdit(adventure:Adventure) {
@@ -61,10 +66,6 @@ export function saveEdit(adventure:Adventure) {
     }
 }
 
-export function getNumberOfAdventures() {
-    return adventures.length;
-}
-
 export function clearAdventures() {
     adventures = [];
     if (isBrowser) {