MVP #5.1 #69
|
@ -8,7 +8,7 @@
|
||||||
"name": "appwrite-svelte-rocket-start",
|
"name": "appwrite-svelte-rocket-start",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@beyonk/svelte-mapbox": "^8.1.4",
|
"@beyonk/svelte-mapbox": "^8.2.0",
|
||||||
"@bytemd/plugin-gfm": "^1.17.4",
|
"@bytemd/plugin-gfm": "^1.17.4",
|
||||||
"@lottiefiles/svelte-lottie-player": "^0.3.0",
|
"@lottiefiles/svelte-lottie-player": "^0.3.0",
|
||||||
"@popperjs/core": "^2.11.6",
|
"@popperjs/core": "^2.11.6",
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
"vite": "^3.2.3"
|
"vite": "^3.2.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@beyonk/svelte-mapbox": "^8.1.4",
|
"@beyonk/svelte-mapbox": "^8.2.0",
|
||||||
"@bytemd/plugin-gfm": "^1.17.4",
|
"@bytemd/plugin-gfm": "^1.17.4",
|
||||||
"@lottiefiles/svelte-lottie-player": "^0.3.0",
|
"@lottiefiles/svelte-lottie-player": "^0.3.0",
|
||||||
"@popperjs/core": "^2.11.6",
|
"@popperjs/core": "^2.11.6",
|
||||||
|
|
|
@ -7,12 +7,11 @@
|
||||||
import Routes from './__routes.svelte'
|
import Routes from './__routes.svelte'
|
||||||
/** import CookiesPopUp from '$lib/components/Cookies/CookiesPopUp.svelte' */
|
/** import CookiesPopUp from '$lib/components/Cookies/CookiesPopUp.svelte' */
|
||||||
import { navigate } from '$lib/router'
|
import { navigate } from '$lib/router'
|
||||||
|
import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
|
||||||
|
|
||||||
let isMounted = false
|
let isMounted = false
|
||||||
$: isReady = $localeLoading === false && $authLoading === false && isMounted
|
$: isReady = $localeLoading === false && $authLoading === false && isMounted
|
||||||
|
|
||||||
$: console.log($user)
|
|
||||||
|
|
||||||
$: if (isReady && !$user) {
|
$: if (isReady && !$user) {
|
||||||
console.log('change')
|
console.log('change')
|
||||||
|
|
||||||
|
@ -37,7 +36,9 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<!-- <CookiesPopUp /> -->
|
<LocationRequest />
|
||||||
|
|
||||||
|
<!-- <CookiesPopUp /> -->
|
||||||
|
|
||||||
<!-- you can display loading while app is not ready (waiting for user and i18n) -->
|
<!-- you can display loading while app is not ready (waiting for user and i18n) -->
|
||||||
{#if isReady}
|
{#if isReady}
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
import Map from './Map.svelte'
|
import Map from './Map.svelte'
|
||||||
import { navigate } from 'svelte-routing'
|
import { navigate } from 'svelte-routing'
|
||||||
import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
|
import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
|
||||||
import { onMount } from 'svelte'
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
export let center = null
|
export let center = null
|
||||||
|
|
||||||
|
@ -14,7 +15,7 @@
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
|
||||||
if (navigator.geolocation) {
|
if (navigator.geolocation) {
|
||||||
navigator.geolocation.getCurrentPosition(showPosition)
|
navigator.geolocation.getCurrentPosition(showPosition, () => dispatch('locationFailed'))
|
||||||
} else {
|
} else {
|
||||||
alert("Can't load your location!")
|
alert("Can't load your location!")
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}
|
|
@ -11,12 +11,14 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
|
||||||
const rating = await getRating(game.$id)
|
const rating = await getRating(game.$id)
|
||||||
|
|
||||||
for (const checkPointId of checkPointsIds) {
|
for (const checkPointId of checkPointsIds) {
|
||||||
checkPoints.push(await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId))
|
try {
|
||||||
if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
|
checkPoints.push(await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId))
|
||||||
game['rating'] = rating
|
if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
|
||||||
game['checkPoints'] = checkPoints
|
game['rating'] = rating
|
||||||
preview(game)
|
game['checkPoints'] = checkPoints
|
||||||
}
|
preview(game)
|
||||||
|
}
|
||||||
|
} catch (error) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
game['rating'] = rating
|
game['rating'] = rating
|
||||||
|
@ -25,9 +27,9 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
|
||||||
}
|
}
|
||||||
|
|
||||||
const getRating = async (expId: string) => {
|
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)
|
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) => {
|
export const answer = async (checkPointId: string, answer: any) => {
|
||||||
|
|
|
@ -18,18 +18,20 @@
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import { load } from '$lib/utils/database/game'
|
import { load } from '$lib/utils/database/game'
|
||||||
import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
|
import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
|
||||||
|
import { navigate } from '$lib/router'
|
||||||
|
|
||||||
export let params: { gameurl: string }
|
export let params: { gameurl: string }
|
||||||
|
|
||||||
//const [gameData] = collections.expiriences.getDocument([Query.equal('ExpURL', params.gameurl)])
|
|
||||||
|
|
||||||
let loading: boolean = true
|
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
$data = await load(params.gameurl, 5, (preview) => {
|
try {
|
||||||
$data = preview
|
$data = await load(params.gameurl, 5, (preview) => {
|
||||||
loading = false
|
$data = preview
|
||||||
})
|
view = 'game-preview'
|
||||||
|
})
|
||||||
|
view = 'game-preview'
|
||||||
|
} catch (error) {
|
||||||
|
navigate('/error')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
$: console.log($data)
|
$: console.log($data)
|
||||||
|
|
||||||
|
@ -38,9 +40,7 @@
|
||||||
?.slice(0, 8)
|
?.slice(0, 8)
|
||||||
?.map((q) => q.thumbnail)
|
?.map((q) => q.thumbnail)
|
||||||
|
|
||||||
let view: 'game-play' | 'game-loading' = 'game-loading'
|
let view: 'game-play' | 'game-loading' | 'game-preview' = 'game-loading'
|
||||||
|
|
||||||
$: console.log($data?.ExpImage)
|
|
||||||
|
|
||||||
//is user already in game
|
//is user already in game
|
||||||
//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
||||||
|
@ -48,62 +48,60 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if view === 'game-loading'}
|
{#if view === 'game-loading'}
|
||||||
{#if loading}
|
<h1 class="flex items-center justify-center flex-col">
|
||||||
<h1 class="flex items-center justify-center flex-col">
|
<span>Experience is loading...</span>
|
||||||
<span>Hra se načítá...</span>
|
<Loading />
|
||||||
<Loading />
|
</h1>
|
||||||
</h1>
|
{:else if view === 'game-preview'}
|
||||||
{:else if $data}
|
<Overlay shareData={{ url: window.location.href }} img={$data.ExpImage}>
|
||||||
<Overlay shareData={{ url: window.location.href }} img={$data.ExpImage}>
|
<div>
|
||||||
<div>
|
<span class="text-[36px]">{$data.ExpName}</span>
|
||||||
<span class="text-[36px]">{$data.ExpName}</span>
|
<div class="bubbles">
|
||||||
<div class="bubbles">
|
<Bubble background="blue">
|
||||||
<Bubble background="blue">
|
<span slot="icon"><IconStar /></span>
|
||||||
<span slot="icon"><IconStar /></span>
|
<span> {$data.rating} </span>
|
||||||
<span> {$data.rating} </span>
|
</Bubble>
|
||||||
</Bubble>
|
<Bubble background="white">
|
||||||
<Bubble background="white">
|
<span slot="icon"><IconPoint /></span>
|
||||||
<span slot="icon"><IconPoint /></span>
|
{#await getLocationDataFromLatAndLong($data.ExpLocation[0], $data.ExpLocation[1]) then { city }}
|
||||||
{#await getLocationDataFromLatAndLong($data.ExpLocation[0], $data.ExpLocation[1]) then { city }}
|
<span>{city}</span>
|
||||||
<span>{city}</span>
|
{/await}
|
||||||
{/await}
|
</Bubble>
|
||||||
</Bubble>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if $data.ExpIntroduction}
|
||||||
<Section title="Popis">
|
<Section title="Popis">
|
||||||
<span>
|
<span>
|
||||||
{@html $data.ExpIntroduction}
|
{@html $data.ExpIntroduction}
|
||||||
</span>
|
</span>
|
||||||
</Section>
|
</Section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<Section title="Fotky">
|
<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>
|
|
||||||
|
|
||||||
<div class="w-full relative">
|
<div class="w-full relative">
|
||||||
<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
|
<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] }}>
|
<!--<ImageSlider images={assets} />-->
|
||||||
{#each $data.checkPoints as { CPLocation: [lat, lng] }}
|
|
||||||
<Marker {lat} {lng} />
|
|
||||||
{/each}
|
|
||||||
</Map>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<Button on:click={() => (view = 'game-play')} primary>Hrát</Button>
|
||||||
</Overlay>
|
{/if}
|
||||||
{:else}
|
</Overlay>
|
||||||
<Redirect replace to="/error" />
|
|
||||||
{/if}
|
|
||||||
{:else if view === 'game-play'}
|
{:else if view === 'game-play'}
|
||||||
{#if !loading}
|
<Renderer gameData={$data} />
|
||||||
<Renderer gameData={$data} />
|
|
||||||
{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -1,15 +1,36 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import Erantmap from '$lib/components/Map/Erantmap.svelte'
|
|
||||||
import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
|
import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
|
||||||
|
import Erantmap from '$lib/components/Map/Erantmap.svelte'
|
||||||
let user = { lat: 50.073658, lng: 14.41854 }
|
import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
|
||||||
|
import { onMount } from 'svelte'
|
||||||
const lastGame = localStorage.getItem('lastGame')
|
|
||||||
if (lastGame) {
|
let granted = false
|
||||||
location.href = lastGame
|
let user = null
|
||||||
|
|
||||||
|
const handleLocationGranted = (position: GeolocationPosition) => {
|
||||||
|
user = { lat: position.coords.latitude, lng: position.coords.longitude }
|
||||||
|
granted = true
|
||||||
}
|
}
|
||||||
</script>
|
|
||||||
|
onMount(() => {
|
||||||
<NavigationBarLayout>
|
const storedPermission = localStorage.getItem('locationPermission')
|
||||||
<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
|
if (storedPermission === 'granted') {
|
||||||
</NavigationBarLayout>
|
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>
|
Loading…
Reference in New Issue