game fix / loading empty games / locatinRe(fail)

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,27 @@
+<script lang="ts">
+	import { Alert, Button } from 'flowbite-svelte'
+	import { createEventDispatcher } from 'svelte'
+	const dispatch = createEventDispatcher()
+	let state: 'granded' | 'not-granded' = 'not-granded'
+
+	navigator.geolocation.getCurrentPosition(
+		() => {
+			state = 'granded'
+		},
+		() => {
+			state = 'not-granded'
+		},
+	)
+</script>
+
+{#if state === 'not-granded'}
+	<Alert class="absolute w-full max-w-[400px] h-24" color="green">
+		<span class="text-lg font-medium">This is a 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}

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) {
+		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 () => {
+		try {
 			$data = await load(params.gameurl, 5, (preview) => {
 				$data = preview
-			loading = false
+				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,12 +48,11 @@
 </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}
+{:else if view === 'game-preview'}
 	<Overlay shareData={{ url: window.location.href }} img={$data.ExpImage}>
 		<div>
 			<span class="text-[36px]">{$data.ExpName}</span>
@@ -71,11 +70,13 @@
 			</div>
 		</div>
 
+		{#if $data.ExpIntroduction}
 			<Section title="Popis">
 				<span>
 					{@html $data.ExpIntroduction}
 				</span>
 			</Section>
+		{/if}
 
 		<Section title="Fotky">
 			<div class="w-full relative">
@@ -95,15 +96,12 @@
 			</div>
 		</div>
 
+		{#if $data.checkPoints.length}
 			<Button on:click={() => (view = 'game-play')} primary>Hrát</Button>
+		{/if}
 	</Overlay>
-	{:else}
-		<Redirect replace to="/error" />
-	{/if}
 {:else if view === 'game-play'}
-	{#if !loading}
 	<Renderer gameData={$data} />
-	{/if}
 {/if}
 
 <style>

src/routes/map.svelte

@@ -1,15 +1,16 @@
-<script>
+<script lang="ts">
 	import Erantmap from '$lib/components/Map/Erantmap.svelte'
 	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
+	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
 
 	let user = { lat: 50.073658, lng: 14.41854 }
 
-	const lastGame = localStorage.getItem('lastGame')
+	/*const lastGame = localStorage.getItem('lastGame')
 	if (lastGame) {
 		location.href = lastGame
-	}
+	}*/
 </script>
 
 <NavigationBarLayout>
-	<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
+	<Erantmap on:locationFailed={() => (locationGranded = false)} class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
 </NavigationBarLayout>