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",
|
||||||
|
|
|
@ -1,22 +1,41 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Alert, Button } from 'flowbite-svelte'
|
import { Alert, Button } from 'flowbite-svelte'
|
||||||
import { createEventDispatcher } from 'svelte'
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
let state: 'granded' | 'not-granded' = 'not-granded'
|
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
let state: 'granted' | 'not-granted' | 'unknown' = 'unknown'; //state variable is used to determine whether the user has granted or denied location access.
|
||||||
|
|
||||||
|
// checks if the navigator.permissions API is available
|
||||||
|
onMount(() => {
|
||||||
|
if (navigator.permissions) {
|
||||||
|
//navigator.permissions.query method to check if the permission has already been granted.
|
||||||
|
navigator.permissions.query({ name: 'geolocation' }).then((result) => {
|
||||||
|
if (result.state === 'granted') {
|
||||||
|
state = 'granted';
|
||||||
|
} else if (result.state === 'prompt') {
|
||||||
|
state = 'unknown'; //If the permission status is prompt, it means the user has not yet made a decision, so the state is set to unknown
|
||||||
|
} else {
|
||||||
|
state = 'not-granted';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (navigator.geolocation) {
|
||||||
navigator.geolocation.getCurrentPosition(
|
navigator.geolocation.getCurrentPosition(
|
||||||
() => {
|
() => {
|
||||||
state = 'granded'
|
state = 'granted';
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
state = 'not-granded'
|
state = 'not-granted';
|
||||||
},
|
}
|
||||||
)
|
);
|
||||||
|
} else {
|
||||||
|
state = 'not-granted';
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if state === 'not-granded'}
|
{#if state === 'not-granted'}
|
||||||
<Alert class="absolute w-full max-w-[400px] h-24" color="green">
|
<Alert class="absolute w-full max-w-[400px] h-24" color="green">
|
||||||
<span class="text-lg font-medium">This is a info alert</span>
|
<span class="text-lg font-medium">This is an info alert</span>
|
||||||
<div slot="extra">
|
<div slot="extra">
|
||||||
<div class="mt-2 mb-4 text-sm">Please provide Erant your location</div>
|
<div class="mt-2 mb-4 text-sm">Please provide Erant your location</div>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
|
@ -25,3 +44,14 @@
|
||||||
</div>
|
</div>
|
||||||
</Alert>
|
</Alert>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
{#if state === 'granted'}
|
||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const event = new CustomEvent('locationGranted', { detail: { granted: true } });
|
||||||
|
window.dispatchEvent(event);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{/if}
|
|
@ -49,7 +49,7 @@
|
||||||
|
|
||||||
{#if view === 'game-loading'}
|
{#if view === 'game-loading'}
|
||||||
<h1 class="flex items-center justify-center flex-col">
|
<h1 class="flex items-center justify-center flex-col">
|
||||||
<span>Hra se načítá...</span>
|
<span>Experience is loading...</span>
|
||||||
<Loading />
|
<Loading />
|
||||||
</h1>
|
</h1>
|
||||||
{:else if view === 'game-preview'}
|
{:else if view === 'game-preview'}
|
||||||
|
|
|
@ -1,16 +1,32 @@
|
||||||
<script lang="ts">
|
<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'
|
||||||
import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
|
import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
|
||||||
|
import { onMount } from 'svelte'
|
||||||
|
|
||||||
let user = { lat: 50.073658, lng: 14.41854 }
|
let user = { lat: 50.073658, lng: 14.41854 }
|
||||||
|
let granted = false
|
||||||
|
|
||||||
/*const lastGame = localStorage.getItem('lastGame')
|
onMount(() => {
|
||||||
if (lastGame) {
|
navigator.permissions.query({ name: 'geolocation' })
|
||||||
location.href = lastGame
|
.then(permissionStatus => {
|
||||||
}*/
|
if (permissionStatus.state === 'granted') {
|
||||||
|
granted = true
|
||||||
|
} else {
|
||||||
|
granted = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error(error)
|
||||||
|
granted = false
|
||||||
|
})
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<NavigationBarLayout>
|
<NavigationBarLayout>
|
||||||
<Erantmap on:locationFailed={() => (locationGranded = false)} class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
|
{#if granted}
|
||||||
|
<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
|
||||||
|
{:else}
|
||||||
|
<LocationRequest on:locationGranted={() => (granted = true)} />
|
||||||
|
{/if}
|
||||||
</NavigationBarLayout>
|
</NavigationBarLayout>
|
||||||
|
|
Loading…
Reference in New Issue