Location permission update

Changes to be committed:
	modified:   package-lock.json
	modified:   package.json
	modified:   src/lib/components/Map/LocationRequest.svelte
	modified:   src/routes/game/game.svelte
	modified:   src/routes/map.svelte

package-lock.json

@@ -8,7 +8,7 @@
       "name": "appwrite-svelte-rocket-start",
       "version": "0.0.0",
       "dependencies": {
-        "@beyonk/svelte-mapbox": "^8.1.4",
+        "@beyonk/svelte-mapbox": "^8.2.0",
         "@bytemd/plugin-gfm": "^1.17.4",
         "@lottiefiles/svelte-lottie-player": "^0.3.0",
         "@popperjs/core": "^2.11.6",

package.json

@@ -29,7 +29,7 @@
     "vite": "^3.2.3"
   },
   "dependencies": {
-    "@beyonk/svelte-mapbox": "^8.1.4",
+    "@beyonk/svelte-mapbox": "^8.2.0",
     "@bytemd/plugin-gfm": "^1.17.4",
     "@lottiefiles/svelte-lottie-player": "^0.3.0",
     "@popperjs/core": "^2.11.6",

src/lib/components/Map/LocationRequest.svelte

@@ -1,27 +1,57 @@
 <script lang="ts">
 	import { Alert, Button } from 'flowbite-svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, onMount } from 'svelte'
-	const dispatch = createEventDispatcher()
-	let state: 'granded' | 'not-granded' = 'not-granded'
 
-	navigator.geolocation.getCurrentPosition(
+	const dispatch = createEventDispatcher()
-		() => {
+	let state: 'granted' | 'not-granted' | 'unknown' = 'unknown'; //state variable is used to determine whether the user has granted or denied location access.
-			state = 'granded'
+  	
-		},
+// checks if the navigator.permissions API is available
-		() => {
+  onMount(() => {
-			state = 'not-granded'
+    if (navigator.permissions) {
-		},
+	//navigator.permissions.query method to check if the permission has already been granted.
-	)
+      navigator.permissions.query({ name: 'geolocation' }).then((result) => {
+        if (result.state === 'granted') {
+          state = 'granted';
+        } else if (result.state === 'prompt') {
+          state = 'unknown'; //If the permission status is prompt, it means the user has not yet made a decision, so the state is set to unknown
+        } else {
+          state = 'not-granted';
+        }
+      });
+    } else if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        () => {
+          state = 'granted';
+        },
+        () => {
+          state = 'not-granted';
+        }
+      );
+    } else {
+      state = 'not-granted';
+    }
+  });
 </script>
 
-{#if state === 'not-granded'}
+{#if state === 'not-granted'}
-	<Alert class="absolute w-full max-w-[400px] h-24" color="green">
+  <Alert class="absolute w-full max-w-[400px] h-24" color="green">
-		<span class="text-lg font-medium">This is a info alert</span>
+    <span class="text-lg font-medium">This is an info alert</span>
-		<div slot="extra">
+    <div slot="extra">
-			<div class="mt-2 mb-4 text-sm">Please provide Erant your location</div>
+      <div class="mt-2 mb-4 text-sm">Please provide Erant your location</div>
-			<div class="flex gap-2">
+      <div class="flex gap-2">
-				<Button on:click={() => dispatch('ok')} size="xs">ok</Button>
+        <Button on:click={() => dispatch('ok')} size="xs">ok</Button>
-			</div>
+      </div>
-		</div>
+    </div>
-	</Alert>
+  </Alert>
+{/if}
+
+{#if state === 'granted'}
+  <script>
+    import { onMount } from 'svelte';
+
+    onMount(() => {
+      const event = new CustomEvent('locationGranted', { detail: { granted: true } });
+      window.dispatchEvent(event);
+    });
+  </script>
 {/if}

src/routes/game/game.svelte

@@ -49,7 +49,7 @@
 
 {#if view === 'game-loading'}
 	<h1 class="flex items-center justify-center flex-col">
-		<span>Hra se načítá...</span>
+		<span>Experience is loading...</span>
 		<Loading />
 	</h1>
 {:else if view === 'game-preview'}

src/routes/map.svelte

@@ -1,16 +1,32 @@
 <script lang="ts">
-	import Erantmap from '$lib/components/Map/Erantmap.svelte'
 	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
+	import Erantmap from '$lib/components/Map/Erantmap.svelte'
 	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
+	import { onMount } from 'svelte'
   
 	let user = { lat: 50.073658, lng: 14.41854 }
+	let granted = false
   
-	/*const lastGame = localStorage.getItem('lastGame')
+	onMount(() => {
-	if (lastGame) {
+	  navigator.permissions.query({ name: 'geolocation' })
-		location.href = lastGame
+		.then(permissionStatus => {
-	}*/
+		  if (permissionStatus.state === 'granted') {
-</script>
+			granted = true
+		  } else {
+			granted = false
+		  }
+		})
+		.catch(error => {
+		  console.error(error)
+		  granted = false
+		})
+	})
+  </script>
   
-<NavigationBarLayout>
+  <NavigationBarLayout>
-	<Erantmap on:locationFailed={() => (locationGranded = false)} class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
+	{#if granted}
-</NavigationBarLayout>
+	  <Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
+	{:else}
+	  <LocationRequest on:locationGranted={() => (granted = true)} />
+	{/if}
+  </NavigationBarLayout>