mapa, auto center,wrontRightfix, games - fix
This commit is contained in:
parent
be3bb2b3a0
commit
acc5a91405
|
@ -4,7 +4,7 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --host 0.0.0.0",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"appwrite": "docker compose -f ./appwrite/docker-compose.yml up"
|
"appwrite": "docker compose -f ./appwrite/docker-compose.yml up"
|
||||||
|
|
|
@ -2,9 +2,10 @@
|
||||||
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
||||||
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 { onMount } from 'svelte'
|
||||||
|
|
||||||
export let center
|
export let center = null
|
||||||
$: console.log(center)
|
|
||||||
|
|
||||||
export let mapComponent = null
|
export let mapComponent = null
|
||||||
export let user = { lat: null, lng: null }
|
export let user = { lat: null, lng: null }
|
||||||
|
@ -20,21 +21,24 @@
|
||||||
function showPosition(position) {
|
function showPosition(position) {
|
||||||
user.lat = position.coords.latitude
|
user.lat = position.coords.latitude
|
||||||
user.lng = position.coords.longitude
|
user.lng = position.coords.longitude
|
||||||
|
if (!center) center = user
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const userCenter = () => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Map {center} bind:mapComponent class={className} on:move>
|
<NavigationBarLayout>
|
||||||
|
{#if center}
|
||||||
|
<Map on:ready={() => setTimeout(() => userCenter(), 40)} {center} bind:mapComponent class={className} on:move>
|
||||||
<slot />
|
<slot />
|
||||||
<GeolocateControl
|
<GeolocateControl
|
||||||
on:geolocate={(e) => {
|
on:geolocate={(e) => {
|
||||||
const { latitude, longitude } = e.detail.coords
|
const { latitude, longitude } = e.detail.coords
|
||||||
user = { lat: latitude, lng: longitude }
|
user = { lat: latitude, lng: longitude }
|
||||||
//console.log(user)
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Map>
|
</Map>
|
||||||
|
<div class="on">
|
||||||
<div class="on">
|
|
||||||
<button on:click={() => navigate('/scanner')}>
|
<button on:click={() => navigate('/scanner')}>
|
||||||
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
|
@ -45,7 +49,7 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button on:click={() => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()}>
|
<button on:click={() => userCenter()}>
|
||||||
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
|
@ -55,7 +59,9 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
</NavigationBarLayout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.on {
|
.on {
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import { Map, controls } from '@beyonk/svelte-mapbox'
|
import { Map, controls } from '@beyonk/svelte-mapbox'
|
||||||
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
||||||
import { createEventDispatcher, onMount } from 'svelte'
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
export let mapComponent = null
|
export let mapComponent = null
|
||||||
let geolocateControl
|
let geolocateControl
|
||||||
let className = ''
|
let className = ''
|
||||||
|
@ -21,7 +22,6 @@
|
||||||
alert("Can't load your location!")
|
alert("Can't load your location!")
|
||||||
}
|
}
|
||||||
}*/
|
}*/
|
||||||
$: console.log([center.lat, center.lng])
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={className} class:radius>
|
<div class={className} class:radius>
|
||||||
|
@ -33,6 +33,7 @@
|
||||||
on:ready={() => {
|
on:ready={() => {
|
||||||
mapComponent.resize()
|
mapComponent.resize()
|
||||||
mapComponent.setCenter([center.lng, center.lat], 14)
|
mapComponent.setCenter([center.lng, center.lat], 14)
|
||||||
|
dispatch('ready')
|
||||||
}}
|
}}
|
||||||
zoom={14}
|
zoom={14}
|
||||||
>
|
>
|
||||||
|
|
|
@ -34,9 +34,9 @@
|
||||||
<div class="w-full relative bottom-[170px] flex justify-center h-fit size">
|
<div class="w-full relative bottom-[170px] flex justify-center h-fit size">
|
||||||
{#if control === 'not-control' || control === null}
|
{#if control === 'not-control' || control === null}
|
||||||
<span />
|
<span />
|
||||||
{:else if control}
|
{:else if control === true}
|
||||||
<span style="color:greenyellow">správně</span>
|
<span style="color:greenyellow">správně</span>
|
||||||
{:else}
|
{:else if control === false}
|
||||||
<span style="color:red">špatně</span>
|
<span style="color:red">špatně</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
let control = null // if true => spravne if false spatne
|
let control = null // if true => spravne if false spatne
|
||||||
let view: 'question' | 'map' = 'map'
|
let view: 'question' | 'map' | 'end' = 'map'
|
||||||
|
|
||||||
export let gameData: any = {} //data
|
export let gameData: any = {} //data
|
||||||
$: console.log(gameData)
|
$: console.log(gameData)
|
||||||
|
@ -31,32 +31,37 @@
|
||||||
let clientAnswers = {
|
let clientAnswers = {
|
||||||
//user data about game
|
//user data about game
|
||||||
pos: 0,
|
pos: 0,
|
||||||
end: gameData.checkPoints.length, //kolik otázek
|
end: gameData.checkPoints.length - 1, //kolik otázek
|
||||||
points: 0, //body
|
points: 0, //body
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: console.log(clientAnswers.pos === clientAnswers.end + 1)
|
||||||
|
|
||||||
$: if (control === true) clientAnswers.points += 2 //body bodování
|
$: if (control === true) clientAnswers.points += 2 //body bodování
|
||||||
|
|
||||||
const nextQuestion = () => {
|
const nextQuestion = () => {
|
||||||
//další otázka
|
//další otázka
|
||||||
if (control !== null) {
|
if (control !== null) {
|
||||||
control = null
|
control = null
|
||||||
|
if (clientAnswers.pos === clientAnswers.end) view = 'end'
|
||||||
|
else {
|
||||||
clientAnswers.pos++
|
clientAnswers.pos++
|
||||||
view = 'map'
|
view = 'map'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//let answers
|
//let answers
|
||||||
//$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
|
//$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
|
||||||
let page = null
|
let page = null
|
||||||
$: if (clientAnswers.pos < clientAnswers.end) page = components[gameData.checkPoints[clientAnswers.pos].CPType]
|
$: page = view === 'question' ? components[gameData.checkPoints[clientAnswers.pos].CPType] : null
|
||||||
|
|
||||||
let [lat, lng] = [null, null]
|
let [lat, lng] = [null, null]
|
||||||
$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation
|
$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation
|
||||||
|
|
||||||
let user = { lat: null, lng: null }
|
let user = { lat: null, lng: null }
|
||||||
|
|
||||||
$: console.log(page, gameData.checkPoints[clientAnswers.pos].CPType)
|
$: console.log(gameData.checkPoints[clientAnswers.pos].CPType, clientAnswers.pos, view)
|
||||||
|
|
||||||
/* //set user to localstorage
|
/* //set user to localstorage
|
||||||
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
|
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
|
||||||
|
@ -76,18 +81,20 @@
|
||||||
}*/
|
}*/
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if page && view === 'map'}
|
<input type="number" bind:value={clientAnswers.pos} />
|
||||||
<Erantmap center={{ lat, lng }} bind:user class="w-full h-full">
|
<button on:click={() => (view = 'question')}>disappear map</button>
|
||||||
|
|
||||||
|
{#if view === 'map'}
|
||||||
|
<Erantmap bind:user class="w-full h-full">
|
||||||
<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
|
<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
|
||||||
</Erantmap>
|
</Erantmap>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if view === 'question'}
|
{#if view === 'question'}
|
||||||
{#if clientAnswers.pos !== clientAnswers.end}
|
|
||||||
<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
|
<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
|
||||||
{:else}
|
{/if}
|
||||||
|
{#if view === 'end'}
|
||||||
<Finish img={gameData.thumbnail}>
|
<Finish img={gameData.thumbnail}>
|
||||||
<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
|
<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
|
||||||
</Finish>
|
</Finish>
|
||||||
{/if}
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
<script>
|
||||||
|
//register email verification
|
||||||
|
const urlParams = new URLSearchParams(location.search)
|
||||||
|
const userId = urlParams.get('userId')
|
||||||
|
const secret = urlParams.get('secret')
|
||||||
|
;(async () => {
|
||||||
|
try {
|
||||||
|
await account.updateVerification(userId, secret)
|
||||||
|
navigate('/')
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
</script>
|
|
@ -1,33 +1,26 @@
|
||||||
<script>
|
<script>
|
||||||
import { account } from '$lib/appwrite'
|
import { account, user } from '$lib/appwrite'
|
||||||
|
import Error from '$root/src/__error.svelte'
|
||||||
import { ID } from 'appwrite'
|
import { ID } from 'appwrite'
|
||||||
import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
|
import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
|
||||||
import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
|
import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
|
||||||
import TopImage from '../../lib/svg/Top-Image.svelte'
|
import TopImage from '../../lib/svg/Top-Image.svelte'
|
||||||
|
|
||||||
let email = ''
|
let email = 'otaprokopec@gmail.com'
|
||||||
let password = ''
|
let password = 'aaaaaaaa'
|
||||||
let repeatPassword = ''
|
let repeatPassword = 'aaaaaaaa'
|
||||||
let name = ''
|
let name = 'test'
|
||||||
|
|
||||||
const register = async () => {
|
const register = async () => {
|
||||||
//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
|
//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
|
||||||
await account.create(ID.unique(), email, password, name)
|
|
||||||
await account.createEmailSession(email, password, name)
|
|
||||||
await account.createVerification(`${location.origin}/`)
|
|
||||||
}
|
|
||||||
//register email verification
|
|
||||||
/*const urlParams = new URLSearchParams(location.search)
|
|
||||||
const userId = urlParams.get('userId')
|
|
||||||
const secret = urlParams.get('secret')
|
|
||||||
;(async () => {
|
|
||||||
try {
|
try {
|
||||||
await account.updateVerification(userId, secret)
|
await account.create(ID.unique(), email, password, name)
|
||||||
navigate('/')
|
await account.createEmailSession(email, password)
|
||||||
} catch (err) {
|
await account.createVerification(`${location.origin}/`)
|
||||||
console.log(err)
|
} catch (error) {
|
||||||
|
console.log(error)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})()*/
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
@ -43,7 +36,7 @@
|
||||||
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
|
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
|
||||||
<HiddenInput bind:value={password} placeholder="Password" />
|
<HiddenInput bind:value={password} placeholder="Password" />
|
||||||
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
|
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
|
||||||
<input class="cursor-pointer" on:click={() => register()} type="submit" value="Sign up" />
|
<input class="cursor-pointer" on:click={() => register()} type="button" value="Sign up" />
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -193,7 +186,7 @@
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='submit'] {
|
input[type='button'] {
|
||||||
background-color: #4263eb;
|
background-color: #4263eb;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue