Merge pull request #83 from Erant-s-r-o/experiences

Experiences into wriable/normal (better and faster)

src/lib/utils/database/experience.ts

@@ -2,7 +2,7 @@ import { databases, user as userStore } from '$lib/appwrite'
 import { Account, Models, Permission, Query, Role } from 'appwrite'
 import database from 'svelte-appwrite-client/src/lib/database'
 import { getLocationDataFromLatAndLong } from '../locations'
-import { writable } from 'svelte/store'
+import { Writable, writable } from 'svelte/store'
 import { CheckPoint, Experience } from '$lib/TStypes/experiences'
 import collections from '$lib/collections'
 
@@ -37,6 +37,15 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
 
 	return experience
 }
+
+export const loadAsStore = (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
+	const store = writable<Experience>(null)
+	load(pathName, previewQuestionsCount, preview).then(experience => {
+		store.set(experience)
+	})
+	return [store] 
+}
+
 //Fetch of Rating
 const getRating = async (expId: string) => {
 	const { documents, total } = await databases.listDocuments('63cef30d6da945dd4250', '63ee6353ebb174cf815d', [Query.equal('ExpID', expId)])
@@ -145,4 +154,12 @@ export const getUserProgressAsStore = (experienceId: string) => {
 	return [store, loading] as const
 }
 
+export const getExperienceIdByUrl = async(url: string) => {
+	return (await databases.listDocuments("63cef30d6da945dd4250", "63cef4bd210fdf2e5888", [Query.equal("ExpURL", url)])).documents[0].$id
+}
+export const getExperienceIdByUrlAsStore = (url: string): [Writable<string>] => {
+	const store = writable<string>(null)
+	getExperienceIdByUrl(url).then(exp => store.set(exp))
+	return [store] 
+}
 // !pridat trideni podle kategorie! export const getExperiencesByCategory = async (category: string) => {}

src/routes/game/experience.svelte

@@ -12,20 +12,27 @@
 	import Renderer from './Forms/Renderer.svelte'
 	import Marker from '../../lib/components/Map/Marker.svelte'
 	import { onMount } from 'svelte'
-	import { getUserProgressAsStore, load } from '$lib/utils/database/experience'
+	import { getExperienceIdByUrl, getExperienceIdByUrlAsStore, getUserProgress, getUserProgressAsStore, load, loadAsStore } from '$lib/utils/database/experience'
 	import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
 	import { navigate } from '$lib/router'
 	import { Experience } from '$lib/TStypes/experiences'
 	import Progressbar from '$lib/components/erant/Progressbar.svelte'
+	import { writable } from 'svelte/store'
 
 	export let params: { gameurl: string }
-	let gameData: Experience //
+	let gameData = writable<Experience>(null)
-	$: [userProgress] = gameData ? getUserProgressAsStore(gameData?.$id) : []
+	let [id] = getExperienceIdByUrlAsStore(params.gameurl)
+	$: [userProgress] = $gameData ? getUserProgressAsStore($id) : []
+	/*
+	$: [gameData] = loadAsStore(params.gameurl, $userProgress?.length + 4 || 8, (preview) => {
+		$gameData = preview
+		view = 'experience-preview'
+	})*/
 
 	onMount(async () => {
 		try {
-			gameData = await load(params.gameurl, 2, (preview) => {
+			$gameData = await load(params.gameurl, (await getUserProgress(await getExperienceIdByUrl(params.gameurl))).length || 8, (preview) => {
-				gameData = preview
+				$gameData = preview
 				view = 'experience-preview'
 			})
 		} catch (error) {
@@ -33,7 +40,7 @@
 		}
 	})
 
-	/*$: assets = gameData?.questions
+	/*$: assets = $gameData?.questions
 		?.filter((q) => q.thumbnail !== null)
 		?.slice(0, 8)
 		?.map((q) => q.thumbnail)*/
@@ -42,7 +49,7 @@
 
 	//is user already in game
 	//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
-	//$: if (gameData && userInGame) view = 'game-play'
+	//$: if ($gameData && userInGame) view = 'game-play'
 </script>
 
 {#if view === 'experience-loading'}
@@ -51,27 +58,27 @@
 		<Loading />
 	</h1>
 {:else if view === 'experience-preview'}
-	<Overlay shareData={{ url: window.location.href }} img={gameData.ExpImage}>
+	<Overlay shareData={{ url: window.location.href }} img={$gameData.ExpImage}>
 		<div>
-			<span class="text-[36px]">{gameData.ExpName}</span>
+			<span class="text-[36px]">{$gameData.ExpName}</span>
 			<div class="bubbles">
 				<Bubble background="blue">
 					<span slot="icon"><IconStar /></span>
-					<span> {gameData.rating} </span>
+					<span> {$gameData.rating} </span>
 				</Bubble>
 				<Bubble background="white">
 					<span slot="icon"><IconPoint /></span>
-					{#await getLocationDataFromLatAndLong(gameData.ExpLocation[0], gameData.ExpLocation[1]) then { city }}
+					{#await getLocationDataFromLatAndLong($gameData.ExpLocation[0], $gameData.ExpLocation[1]) then { city }}
 						<span>{city}</span>
 					{/await}
 				</Bubble>
 			</div>
 		</div>
 
-		{#if gameData.ExpIntroduction}
+		{#if $gameData.ExpIntroduction}
 			<Section title="Popis">
 				<span>
-					{@html gameData.ExpIntroduction}
+					{@html $gameData.ExpIntroduction}
 				</span>
 			</Section>
 		{/if}
@@ -84,25 +91,25 @@
 			</div>
 		</Section>
 		<Section title="Progress">
-			<Progressbar max={gameData.ExpCPsID.length} progress={$userProgress.length} showWrittenProgress />
+			<Progressbar max={$gameData.ExpCPsID.length} progress={$userProgress.length} showWrittenProgress />
 		</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: gameData.ExpLocation[1], lat: gameData.ExpLocation[0] }}>
+				<Map radius class="w-full h-44" center={{ lng: $gameData.ExpLocation[1], lat: $gameData.ExpLocation[0] }}>
-					{#each gameData.checkPoints as { CPLocation: [lat, lng] }}
+					{#each $gameData.checkPoints as { CPLocation: [lat, lng] }}
 						<Marker {lat} {lng} />
 					{/each}
 				</Map>
 			</div>
 		</div>
 
-		{#if gameData.checkPoints.length}
+		{#if $gameData.checkPoints.length}
 			<Button on:click={() => (view = 'experience-play')} primary>{$userProgress ? 'Pokračovat' : 'Hrát'}</Button>
 		{/if}
 	</Overlay>
 {:else if view === 'experience-play'}
-	<Renderer {gameData} />
+	<Renderer gameData={$gameData} />
 {/if}
 
 <style>