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/App.svelte

@@ -7,12 +7,11 @@
 	import Routes from './__routes.svelte'
 	/** import CookiesPopUp from '$lib/components/Cookies/CookiesPopUp.svelte' */
 	import { navigate } from '$lib/router'
+	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
 
 	let isMounted = false
 	$: isReady = $localeLoading === false && $authLoading === false && isMounted
 
-	$: console.log($user)
-
 	$: if (isReady && !$user) {
 		console.log('change')
 
@@ -37,7 +36,9 @@
 </script>
 
 <main>
-<!-- <CookiesPopUp /> -->
+	<LocationRequest />
+
+	<!-- <CookiesPopUp /> -->
 
 	<!-- you can display loading while app is not ready (waiting for user and i18n) -->
 	{#if isReady}

src/lib/components/Map/Erantmap.svelte

@@ -3,7 +3,8 @@
 	import Map from './Map.svelte'
 	import { navigate } from 'svelte-routing'
 	import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
-	import { onMount } from 'svelte'
+	import { createEventDispatcher, onMount } from 'svelte'
+	const dispatch = createEventDispatcher()
 
 	export let center = null
 
@@ -14,7 +15,7 @@
 	export { className as class }
 
 	if (navigator.geolocation) {
-		navigator.geolocation.getCurrentPosition(showPosition)
+		navigator.geolocation.getCurrentPosition(showPosition, () => dispatch('locationFailed'))
 	} else {
 		alert("Can't load your location!")
 	}

src/lib/components/Map/LocationRequest.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { Alert, Button } from 'flowbite-svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
+  
+	const dispatch = createEventDispatcher();
+	let state: 'granted' | 'not-granted' | 'unknown' = 'unknown'; //state variable is used to determine whether the user has granted, denied or hasn't decided location access.
+  
+	const handlePermission = (status: PermissionState) => {
+	  if (status === 'granted') {
+		state = 'granted';
+		localStorage.setItem('locationPermission', 'granted');
+		document.cookie = 'locationPermission=granted; path=/';
+	  } else if (status === 'denied') {
+		state = 'not-granted';
+		localStorage.setItem('locationPermission', 'not-granted');
+		document.cookie = 'locationPermission=not-granted; path=/';
+	  }
+	};
+  
+	onMount(() => {
+	  if (navigator.permissions) {
+		navigator.permissions
+		  .query({ name: 'geolocation' })
+		  .then((permissionStatus) => {
+			handlePermission(permissionStatus.state);
+			permissionStatus.onchange = () => {
+			  handlePermission(permissionStatus.state);
+			};
+		  });
+	  } else if (navigator.geolocation) {
+		navigator.geolocation.getCurrentPosition(
+		  () => {
+			state = 'granted';
+			localStorage.setItem('locationPermission', 'granted');
+			document.cookie = 'locationPermission=granted; path=/';
+		  },
+		  () => {
+			state = 'not-granted';
+			localStorage.setItem('locationPermission', 'not-granted');
+			document.cookie = 'locationPermission=not-granted; path=/';
+		  }
+		);
+	  } else {
+		state = 'not-granted';
+		localStorage.setItem('locationPermission', 'not-granted');
+		document.cookie = 'locationPermission=not-granted; path=/';
+	  }
+	});
+  </script>
+  
+  {#if state === 'not-granted'}
+	<Alert class="absolute w-full max-w-[400px] h-24" color="green">
+	  <span class="text-lg font-medium">This is an info alert</span>
+	  <div slot="extra">
+		<div class="mt-2 mb-4 text-sm">Please provide Erant your location</div>
+		<div class="flex gap-2">
+		  <Button on:click={() => dispatch('ok')} size="xs">ok</Button>
+		</div>
+	  </div>
+	</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/lib/utils/database/game.ts

@@ -11,12 +11,14 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
 	const rating = await getRating(game.$id)
 
 	for (const checkPointId of checkPointsIds) {
-		checkPoints.push(await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId))
-		if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
-			game['rating'] = rating
-			game['checkPoints'] = checkPoints
-			preview(game)
-		}
+		try {
+			checkPoints.push(await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId))
+			if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
+				game['rating'] = rating
+				game['checkPoints'] = checkPoints
+				preview(game)
+			}
+		} catch (error) {}
 	}
 
 	game['rating'] = rating
@@ -25,9 +27,9 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
 }
 
 const getRating = async (expId: string) => {
-	const { documents } = await databases.listDocuments('63cef30d6da945dd4250', '63ee6353ebb174cf815d', [Query.equal('ExpID', expId)])
+	const { documents, total } = await databases.listDocuments('63cef30d6da945dd4250', '63ee6353ebb174cf815d', [Query.equal('ExpID', expId)])
 	const sum = documents.reduce((accumulator, rating) => accumulator + rating.ExpUserRating, 0)
-	return sum / documents.length
+	return sum / total || 0
 }
 
 export const answer = async (checkPointId: string, answer: any) => {

src/routes/game/game.svelte

@@ -18,18 +18,20 @@
 	import { onMount } from 'svelte'
 	import { load } from '$lib/utils/database/game'
 	import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
+	import { navigate } from '$lib/router'
 
 	export let params: { gameurl: string }
 
-	//const [gameData] = collections.expiriences.getDocument([Query.equal('ExpURL', params.gameurl)])
-
-	let loading: boolean = true
-
 	onMount(async () => {
-		$data = await load(params.gameurl, 5, (preview) => {
-			$data = preview
-			loading = false
-		})
+		try {
+			$data = await load(params.gameurl, 5, (preview) => {
+				$data = preview
+				view = 'game-preview'
+			})
+			view = 'game-preview'
+		} catch (error) {
+			navigate('/error')
+		}
 	})
 	$: console.log($data)
 
@@ -38,9 +40,7 @@
 		?.slice(0, 8)
 		?.map((q) => q.thumbnail)
 
-	let view: 'game-play' | 'game-loading' = 'game-loading'
-
-	$: console.log($data?.ExpImage)
+	let view: 'game-play' | 'game-loading' | 'game-preview' = 'game-loading'
 
 	//is user already in game
 	//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
@@ -48,62 +48,60 @@
 </script>
 
 {#if view === 'game-loading'}
-	{#if loading}
-		<h1 class="flex items-center justify-center flex-col">
-			<span>Hra se načítá...</span>
-			<Loading />
-		</h1>
-	{:else if $data}
-		<Overlay shareData={{ url: window.location.href }} img={$data.ExpImage}>
-			<div>
-				<span class="text-[36px]">{$data.ExpName}</span>
-				<div class="bubbles">
-					<Bubble background="blue">
-						<span slot="icon"><IconStar /></span>
-						<span> {$data.rating} </span>
-					</Bubble>
-					<Bubble background="white">
-						<span slot="icon"><IconPoint /></span>
-						{#await getLocationDataFromLatAndLong($data.ExpLocation[0], $data.ExpLocation[1]) then { city }}
-							<span>{city}</span>
-						{/await}
-					</Bubble>
-				</div>
+	<h1 class="flex items-center justify-center flex-col">
+		<span>Experience is loading...</span>
+		<Loading />
+	</h1>
+{:else if view === 'game-preview'}
+	<Overlay shareData={{ url: window.location.href }} img={$data.ExpImage}>
+		<div>
+			<span class="text-[36px]">{$data.ExpName}</span>
+			<div class="bubbles">
+				<Bubble background="blue">
+					<span slot="icon"><IconStar /></span>
+					<span> {$data.rating} </span>
+				</Bubble>
+				<Bubble background="white">
+					<span slot="icon"><IconPoint /></span>
+					{#await getLocationDataFromLatAndLong($data.ExpLocation[0], $data.ExpLocation[1]) then { city }}
+						<span>{city}</span>
+					{/await}
+				</Bubble>
 			</div>
+		</div>
 
+		{#if $data.ExpIntroduction}
 			<Section title="Popis">
 				<span>
 					{@html $data.ExpIntroduction}
 				</span>
 			</Section>
+		{/if}
 
-			<Section title="Fotky">
-				<div class="w-full relative">
-					<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
-						<!--<ImageSlider images={assets} />-->
-					</div>
-				</div>
-			</Section>
-
+		<Section title="Fotky">
 			<div class="w-full relative">
 				<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
-					<Map radius class="w-full h-44" center={{ lng: $data.ExpLocation[1], lat: $data.ExpLocation[0] }}>
-						{#each $data.checkPoints as { CPLocation: [lat, lng] }}
-							<Marker {lat} {lng} />
-						{/each}
-					</Map>
+					<!--<ImageSlider images={assets} />-->
 				</div>
 			</div>
+		</Section>
 
+		<div class="w-full relative">
+			<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
+				<Map radius class="w-full h-44" center={{ lng: $data.ExpLocation[1], lat: $data.ExpLocation[0] }}>
+					{#each $data.checkPoints as { CPLocation: [lat, lng] }}
+						<Marker {lat} {lng} />
+					{/each}
+				</Map>
+			</div>
+		</div>
+
+		{#if $data.checkPoints.length}
 			<Button on:click={() => (view = 'game-play')} primary>Hrát</Button>
-		</Overlay>
-	{:else}
-		<Redirect replace to="/error" />
-	{/if}
+		{/if}
+	</Overlay>
 {:else if view === 'game-play'}
-	{#if !loading}
-		<Renderer gameData={$data} />
-	{/if}
+	<Renderer gameData={$data} />
 {/if}
 
 <style>

src/routes/map.svelte

@@ -1,15 +1,36 @@
-<script>
-	import Erantmap from '$lib/components/Map/Erantmap.svelte'
+<script lang="ts">
 	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
-
-	let user = { lat: 50.073658, lng: 14.41854 }
-
-	const lastGame = localStorage.getItem('lastGame')
-	if (lastGame) {
-		location.href = lastGame
+	import Erantmap from '$lib/components/Map/Erantmap.svelte'
+	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
+	import { onMount } from 'svelte'
+  
+	let granted = false
+	let user = null
+  
+	const handleLocationGranted = (position: GeolocationPosition) => {
+	  user = { lat: position.coords.latitude, lng: position.coords.longitude }
+	  granted = true
 	}
-</script>
-
-<NavigationBarLayout>
-	<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
-</NavigationBarLayout>
+  
+	onMount(() => {
+	  const storedPermission = localStorage.getItem('locationPermission')
+	  if (storedPermission === 'granted') {
+		navigator.geolocation.getCurrentPosition(
+		  (position) => {
+			handleLocationGranted(position)
+		  },
+		  (error) => {
+			console.log(error)
+		  }
+		)
+	  }
+	})
+  </script>
+  
+  <NavigationBarLayout>
+	{#if granted}
+	  <Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
+	{:else}
+	  <LocationRequest on:locationGranted={handleLocationGranted} />
+	{/if}
+  </NavigationBarLayout>