mapa, auto center,wrontRightfix, games - fix

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"

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,21 +21,24 @@
 	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>
+<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 }
-			//console.log(user)
 				}}
 			/>
-</Map>
-
-<div class="on">
+		</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
@@ -45,7 +49,7 @@
 					/>
 				</svg>
 			</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">
 					<path
 						fill-rule="evenodd"
@@ -55,7 +59,9 @@
 					/>
 				</svg>
 			</button>
-</div>
+		</div>
+	{/if}
+</NavigationBarLayout>
 
 <style>
 	.on {

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}
 	>

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>

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
+			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}
+{/if}
+{#if view === 'end'}
 	<Finish img={gameData.thumbnail}>
 		<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
 	</Finish>
-	{/if}
 {/if}

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>

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;