Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

loading experience as store => better

This commit is contained in:
Ota Prokopec 2023-03-30 22:33:56 +02:00
parent 9c6f720684
commit b2721a9c37
2 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/utils/database/experience.ts
View File

@ -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'
@ -154,12 +154,12 @@ export const getUserProgressAsStore = (experienceId: string) => {
return [store, loading] as const
}
export const getExperienceByURL = async(url: string) => {
return (await databases.listDocuments("63cef30d6da945dd4250", "63cef4bd210fdf2e58880", [Query.equal("ExpURL", url)])).documents[0]
export const getExperienceIdByUrl = async(url: string) => {
return (await databases.listDocuments("63cef30d6da945dd4250", "63cef4bd210fdf2e5888", [Query.equal("ExpURL", url)])).documents[0].$id
}
export const getExperienceByURLAsStore = (url: string) => {
const store = writable<Models.Document>(null)
getExperienceByURL(url).then(exp => store.set(exp))
return [store] as const
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) => {}

49
src/routes/game/experience.svelte
View File

@ -12,7 +12,7 @@
import Renderer from './Forms/Renderer.svelte'
import Marker from '../../lib/components/Map/Marker.svelte'
import { onMount } from 'svelte'
import { getExperienceByURLAsStore, getUserProgress, getUserProgressAsStore, load, loadAsStore } 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'
@ -21,29 +21,26 @@
export let params: { gameurl: string }
let gameData = writable<Experience>(null)
let [exp] = getExperienceByURLAsStore(params.gameurl)
$: [userProgress] = gameData ? getUserProgressAsStore($exp?.$id) : []
$gameData = loadAsStore(params.gameurl, $userProgress.length+4 || 8, (preview) => {
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 () => {
onMount(async () => {
try {
console.log($userProgress?.length || 8)
gameData = await load(params.gameurl, (await getUserProgress(gameData?.$id)) || 8, (preview) => {
gameData = preview
$gameData = await load(params.gameurl, (await getUserProgress(await getExperienceIdByUrl(params.gameurl))).length || 8, (preview) => {
$gameData = preview
view = 'experience-preview'
})
} catch (error) {
navigate('/error')
}
})*/
})
/*$: assets = gameData?.questions
/*$: assets = $gameData?.questions
?.filter((q) => q.thumbnail !== null)
?.slice(0, 8)
?.map((q) => q.thumbnail)*/
@ -52,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'}
@ -61,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}
@ -94,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>