Experiences #83
|
@ -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) => {}
|
||||
|
|
|
@ -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 //
|
||||
$: [userProgress] = gameData ? getUserProgressAsStore(gameData?.$id) : []
|
||||
let gameData = writable<Experience>(null)
|
||||
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 = preview
|
||||
$gameData = await load(params.gameurl, (await getUserProgress(await getExperienceIdByUrl(params.gameurl))).length || 8, (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] }}>
|
||||
{#each gameData.checkPoints as { CPLocation: [lat, lng] }}
|
||||
<Map radius class="w-full h-44" center={{ lng: $gameData.ExpLocation[1], lat: $gameData.ExpLocation[0] }}>
|
||||
{#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>
|
||||
|
|
Loading…
Reference in New Issue