mapa, auto center,wrontRightfix, games - fix

2023-03-03 18:25:24 +01:00 · 2023-03-03 18:25:24 +01:00 · acc5a91405
parent be3bb2b3a0
commit acc5a91405
7 changed files with 95 additions and 74 deletions
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "vite --host 0.0.0.0",
+		"dev": "vite",
 		"build": "vite build",
 		"preview": "vite preview",
 		"appwrite": "docker compose -f ./appwrite/docker-compose.yml up"
--- a/src/lib/components/Map/Erantmap.svelte
+++ b/src/lib/components/Map/Erantmap.svelte
@ -2,9 +2,10 @@
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 	import Map from './Map.svelte'
 	import { navigate } from 'svelte-routing'
+	import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
+	import { onMount } from 'svelte'

-	export let center
-	$: console.log(center)
+	export let center = null

 	export let mapComponent = null
 	export let user = { lat: null, lng: null }
@ -20,42 +21,47 @@
 	function showPosition(position) {
 		user.lat = position.coords.latitude
 		user.lng = position.coords.longitude
+		if (!center) center = user
 	}
+
+	const userCenter = () => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
 </script>

-<Map {center} bind:mapComponent class={className} on:move>
-	<slot />
-	<GeolocateControl
-		on:geolocate={(e) => {
-			const { latitude, longitude } = e.detail.coords
-			user = { lat: latitude, lng: longitude }
-			//console.log(user)
-		}}
-	/>
-</Map>
-
-<div class="on">
-	<button on:click={() => navigate('/scanner')}>
-		<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-				d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z"
-				fill="#4263EB"
+<NavigationBarLayout>
+	{#if center}
+		<Map on:ready={() => setTimeout(() => userCenter(), 40)} {center} bind:mapComponent class={className} on:move>
+			<slot />
+			<GeolocateControl
+				on:geolocate={(e) => {
+					const { latitude, longitude } = e.detail.coords
+					user = { lat: latitude, lng: longitude }
+				}}
 			/>
-		</svg>
-	</button>
-	<button on:click={() => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()}>
-		<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-				d="M0.758179 14.1551C0.758179 6.53234 6.92333 0.367188 14.5461 0.367188C22.1688 0.367188 28.3339 6.53234 28.3339 14.1551C28.3339 22.3687 19.6279 33.6945 16.0627 38.0081C15.2748 38.9536 13.837 38.9536 13.0491 38.0081C9.46424 33.6945 0.758179 22.3687 0.758179 14.1551ZM9.62182 14.1551C9.62182 16.8733 11.8279 19.0793 14.5461 19.0793C17.2642 19.0793 19.4703 16.8733 19.4703 14.1551C19.4703 11.4369 17.2642 9.23083 14.5461 9.23083C11.8279 9.23083 9.62182 11.4369 9.62182 14.1551Z"
-				fill="#4263EB"
-			/>
-		</svg>
-	</button>
-</div>
+		</Map>
+		<div class="on">
+			<button on:click={() => navigate('/scanner')}>
+				<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z"
+						fill="#4263EB"
+					/>
+				</svg>
+			</button>
+			<button on:click={() => userCenter()}>
+				<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						d="M0.758179 14.1551C0.758179 6.53234 6.92333 0.367188 14.5461 0.367188C22.1688 0.367188 28.3339 6.53234 28.3339 14.1551C28.3339 22.3687 19.6279 33.6945 16.0627 38.0081C15.2748 38.9536 13.837 38.9536 13.0491 38.0081C9.46424 33.6945 0.758179 22.3687 0.758179 14.1551ZM9.62182 14.1551C9.62182 16.8733 11.8279 19.0793 14.5461 19.0793C17.2642 19.0793 19.4703 16.8733 19.4703 14.1551C19.4703 11.4369 17.2642 9.23083 14.5461 9.23083C11.8279 9.23083 9.62182 11.4369 9.62182 14.1551Z"
+						fill="#4263EB"
+					/>
+				</svg>
+			</button>
+		</div>
+	{/if}
+</NavigationBarLayout>

 <style>
 	.on {
--- a/src/lib/components/Map/Map.svelte
+++ b/src/lib/components/Map/Map.svelte
@ -2,6 +2,7 @@
 	import { Map, controls } from '@beyonk/svelte-mapbox'
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 	import { createEventDispatcher, onMount } from 'svelte'
+	const dispatch = createEventDispatcher()
 	export let mapComponent = null
 	let geolocateControl
 	let className = ''
@ -21,7 +22,6 @@
 			alert("Can't load your location!")
 		}
 	}*/
-	$: console.log([center.lat, center.lng])
 </script>

 <div class={className} class:radius>
@ -33,6 +33,7 @@
 		on:ready={() => {
 			mapComponent.resize()
 			mapComponent.setCenter([center.lng, center.lat], 14)
+			dispatch('ready')
 		}}
 		zoom={14}
 	>
--- a/src/routes/game/Components/Layout.svelte
+++ b/src/routes/game/Components/Layout.svelte
@ -34,9 +34,9 @@
 			<div class="w-full relative bottom-[170px] flex justify-center h-fit size">
 				{#if control === 'not-control' || control === null}
 					<span />
-				{:else if control}
+				{:else if control === true}
 					<span style="color:greenyellow">správně</span>
-				{:else}
+				{:else if control === false}
 					<span style="color:red">špatně</span>
 				{/if}
 			</div>
--- a/src/routes/game/Forms/Renderer.svelte
+++ b/src/routes/game/Forms/Renderer.svelte
@ -23,7 +23,7 @@
 	}

 	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
 	$: console.log(gameData)
@ -31,32 +31,37 @@
 	let clientAnswers = {
 		//user data about game
 		pos: 0,
-		end: gameData.checkPoints.length, //kolik otázek
+		end: gameData.checkPoints.length - 1, //kolik otázek
 		points: 0, //body
 	}

+	$: console.log(clientAnswers.pos === clientAnswers.end + 1)
+
 	$: if (control === true) clientAnswers.points += 2 //body bodování

 	const nextQuestion = () => {
 		//další otázka
 		if (control !== null) {
 			control = null
-			clientAnswers.pos++
-			view = 'map'
+			if (clientAnswers.pos === clientAnswers.end) view = 'end'
+			else {
+				clientAnswers.pos++
+				view = 'map'
+			}
 		}
 	}

 	//let answers
 	//$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
 	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]
 	$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation

 	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
 	$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
@ -76,18 +81,20 @@
 	}*/
 </script>

-{#if page && view === 'map'}
-	<Erantmap center={{ lat, lng }} bind:user class="w-full h-full">
+<input type="number" bind:value={clientAnswers.pos} />
+<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} />
 	</Erantmap>
 {/if}

 {#if view === 'question'}
-	{#if clientAnswers.pos !== clientAnswers.end}
-		<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
-	{:else}
-		<Finish img={gameData.thumbnail}>
-			<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
-		</Finish>
-	{/if}
+	<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
+{/if}
+{#if view === 'end'}
+	<Finish img={gameData.thumbnail}>
+		<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
+	</Finish>
 {/if}
--- a/src/routes/register/emailVerification.svelte
+++ b/src/routes/register/emailVerification.svelte
@ -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>
--- a/src/routes/register/register.svelte
+++ b/src/routes/register/register.svelte
@ -1,33 +1,26 @@
 <script>
-	import { account } from '$lib/appwrite'
+	import { account, user } from '$lib/appwrite'
+	import Error from '$root/src/__error.svelte'
 	import { ID } from 'appwrite'
 	import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
 	import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
 	import TopImage from '../../lib/svg/Top-Image.svelte'

-	let email = ''
-	let password = ''
-	let repeatPassword = ''
-	let name = ''
+	let email = 'otaprokopec@gmail.com'
+	let password = 'aaaaaaaa'
+	let repeatPassword = 'aaaaaaaa'
+	let name = 'test'

 	const register = async () => {
 		//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 {
-			await account.updateVerification(userId, secret)
-			navigate('/')
-		} catch (err) {
-			console.log(err)
+			await account.create(ID.unique(), email, password, name)
+			await account.createEmailSession(email, password)
+			await account.createVerification(`${location.origin}/`)
+		} catch (error) {
+			console.log(error)
 		}
-	})()*/
+	}
 </script>

 <div class="main">
@ -43,7 +36,7 @@
 			<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
 			<HiddenInput bind:value={password} placeholder="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>
 	</div>

@ -193,7 +186,7 @@
 					line-height: 28px;
 				}

-				input[type='submit'] {
+				input[type='button'] {
 					background-color: #4263eb;
 					color: white;