game fix, home page fix

src/lib/components/Layouts/LayoutImg.svelte

@@ -34,8 +34,8 @@
 			height: auto;
 			width: 100%;
 			overflow-y: auto;
-			position: absolute;
+			position: relative;
-			top: 25%;
+			top: -10%;
 			border-radius: 70px 70px 0 0;
 			padding: 52px;
 			display: flex;
@@ -49,7 +49,7 @@
 			z-index: 4;
 			width: 100%;
 			height: auto;
-			position: absolute;
+			position: relative;
 		}
 		.shareButton {
 			width: 100%;

src/lib/components/Map/Erantmap.svelte

@@ -10,9 +10,9 @@
 	export let center = null
 
 	export let mapComponent = null
-	export let user = { lat: null, lng: null }
+	export let user = { lat: 0, lng: 0 }
 
-	$: console.log(user)
+	$: console.log(user, center)
 
 	let className = ''
 	export { className as class }
@@ -23,8 +23,13 @@
 			})
 		})
 	})()*/
-	navigator.geolocation.getCurrentPosition((e) => {}) //at mapbox this is required dont know why
 
+	navigator.geolocation.getCurrentPosition((position: GeolocationPosition) => {
+		if (!user) user = { lat: position.coords.latitude, lng: position.coords.longitude }
+		if (!center) center = { lat: position.coords.latitude, lng: position.coords.longitude }
+	}) //at mapbox this is required dont know why
+
+	$: if (!center) center = user
 	/*	if (navigator.geolocation) {
 		navigator.geolocation.watchPosition(showPosition, () => dispatch('locationFailed'))
 	} else {

src/routes/game/Components/Layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Section from '../../../lib/components/Common/Section.svelte'
+	import Section from '$lib/components/Common/Section.svelte'
-	import Button from '../../../lib/components/Buttons/Button.svelte'
+	import Button from '$lib/components/Buttons/Button.svelte'
-	import Image from '../../../lib/components/Common/Image.svelte'
+	import Image from '$lib/components/Common/Image.svelte'
 
 	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
 	export let nextQuestion
@@ -19,18 +19,26 @@
 		<Section style="height: calc(100% - var(--quizHeader)); position: relative">
 			<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
 				<div class="popis">
-					<span> Popis úkolu: </span>
 					<span> <slot name="about" /></span>
 				</div>
-				{#if control === 'wrong-firstTime' || control === 'wrong-secondTime'}
-					<div class="popis">
-						<span> Nápověda: </span>
-						<span> <slot name="hint" /></span>
-					</div>
-				{/if}
 
 				<div class="flex items-center justify-center flex-col w-full gap-6">
 					<span class="relative"> <slot name="answers" /> </span>
+					<div class="w-full relative  flex justify-center h-fit size">
+						{#if control === 'not-control' || control === null}
+							<span />
+						{:else if control === 'wrong-secondTime' || control === 'correct'}
+							<div class="flex w-auto h-auto flex-wrap flex-col items-center gap-2">
+								<span class={`${control === 'correct' ? 'text-green-500' : 'text-red-500'}`}>{control === 'correct' ? 'správně' : 'špatně'}</span>
+								<span> <slot name="after" /></span>
+							</div>
+						{:else if control === 'wrong-firstTime'}
+							<div class="flex w-auto h-auto flex-wrap flex-col items-center gap-2">
+								<span class="text-red-500">To není správně, zkus to znovu</span>
+								<span> <slot name="hint" /></span>
+							</div>
+						{/if}
+					</div>
 					{#if control === 'not-control' || control === 'correct' || control === 'wrong-secondTime'}
 						<Button on:submit={nextQuestion} primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Na další otázku</Button>
 					{:else if control === 'wrong-firstTime' || control === null}
@@ -38,17 +46,6 @@
 					{/if}
 				</div>
 			</div>
-			<div class="w-full relative bottom-[170px] flex justify-center h-fit size">
-				{#if control === 'not-control' || control === null}
-					<span />
-				{:else if control === 'correct'}
-					<span style="color:greenyellow">správně</span>
-				{:else if control === 'wrong-firstTime'}
-					<span style="color:red">druhypokus</span>
-				{:else if control === 'wrong-secondTime'}
-					<span style="color:red">špatně</span>
-				{/if}
-			</div>
 		</Section>
 	</div>
 </div>

src/routes/game/Forms/MultiChoiceForm.svelte

@@ -36,6 +36,7 @@
 	<span slot="title">{name}</span>
 	<span slot="about">{@html checkPoint.CPText}</span>
 	<span slot="hint"> {@html checkPoint.CPHint} </span>
+	<span slot="after"> {@html checkPoint.CPAfter} </span>
 	<div slot="answers">
 		{#each checkPoint.CPOptions as label, i}
 			<span class="self-baseline">

src/routes/game/Forms/NumberForm.svelte

@@ -33,6 +33,8 @@
 	<span slot="title">{name}</span>
 	<span slot="about">{@html checkPoint.CPText}</span>
 	<span slot="hint"> {@html checkPoint.CPHint} </span>
+	<span slot="after"> {@html checkPoint.CPAfter} </span>
+
 	<div slot="answers">
 		<span class="self-baseline">
 			<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

src/routes/game/Forms/Renderer.svelte

@@ -60,9 +60,7 @@
 	let [lat, lng] = [null, null]
 	$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation
 
-	let user = { lat: null, lng: null }
+	let user = { lat: 0, lng: 0 }
-
-	$: console.log(gameData.checkPoints[clientAnswers.pos].CPType, clientAnswers.pos, view)
 
 	/*	//set user to localstorage
 	$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {

src/routes/game/Forms/SingleChoiceForm.svelte

@@ -32,6 +32,9 @@
 >
 	<span slot="title">{name}</span>
 	<span slot="about">{@html checkPoint.CPText}</span>
+	<span slot="hint"> {@html checkPoint.CPHint} </span>
+	<span slot="after"> {@html checkPoint.CPAfter} </span>
+
 	<div slot="answers">
 		{#each checkPoint.CPOptions as label}
 			<span class="self-baseline">

src/routes/game/Forms/TextForm.svelte

@@ -33,6 +33,7 @@
 	<span slot="title">{name}</span>
 	<span slot="about">{@html checkPoint.CPText}</span>
 	<span slot="hint"> {@html checkPoint.CPHint} </span>
+	<span slot="after"> {@html checkPoint.CPAfter} </span>
 	<div slot="answers">
 		<span class="self-baseline">
 			<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

src/routes/game/game.svelte

@@ -7,14 +7,9 @@
 	import IconPoint from '../../lib/svg/Point.svelte'
 	import Loading from '../../lib/components/Common/Loading.svelte'
 	import { data } from '../../lib/stores/game'
-	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 	import Map from '../../lib/components/Map/Map.svelte'
 	import Renderer from './Forms/Renderer.svelte'
-	import Redirect from '../../lib/components/Common/Redirect.svelte'
-	import ImageSlider from '../../lib/components/Common/ImageSlider.svelte'
 	import Marker from '../../lib/components/Map/Marker.svelte'
-	import collections from '$lib/collections'
-	import { Query } from 'appwrite'
 	import { onMount } from 'svelte'
 	import { load } from '$lib/utils/database/game'
 	import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
@@ -26,7 +21,6 @@
 		try {
 			$data = await load(params.gameurl, 5, (preview) => {
 				$data = preview
-				view = 'game-preview'
 			})
 			view = 'game-preview'
 		} catch (error) {

src/routes/homepage/Components/Comparment.svelte

@@ -4,8 +4,6 @@
 	import Headline from './Headline.svelte'
 
 	export let items = []
-
-	console.log(items)
 </script>
 
 <div class="section">
@@ -13,7 +11,7 @@
 
 	<div class="options">
 		{#each items as item}
-			<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} price={item.price} location={item.location} name={item.ExpName} image={item.ExpImage} />
+			<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} price={item.price} city={item.city} name={item.ExpName} image={item.ExpImage} />
 		{/each}
 	</div>
 </div>

src/routes/homepage/Components/Compartment_Item.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let location = 'Home'
+	export let city = 'Home'
 	export let name = 'Kawa Ijen'
 	export let image = ''
 </script>
@@ -49,7 +49,7 @@
 				</g>
 			</svg>
 
-			{location}
+			{city}
 		</div>
 	</div>
 </button>