better experiece

src/routes/game/Components/Layout.svelte

@@ -2,9 +2,10 @@
 	import Section from '$lib/components/Common/Section.svelte'
 	import Button from '$lib/components/Buttons/Button.svelte'
 	import Image from '$lib/components/Common/Image.svelte'
+	import { createEventDispatcher } from 'svelte'
+	const dispatch = createEventDispatcher()
 
 	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
-	export let nextQuestion
 	export let imgSrc
 </script>
 
@@ -40,7 +41,7 @@
 						{/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>
+						<Button on:submit={() => dispatch('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}
 						<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Vyhodnotit</Button>
 					{/if}

src/routes/game/Forms/Info.svelte

@@ -1,24 +1,4 @@
 <script lang="ts">
-	import Layout from '../Components/Layout.svelte'
-	import { CheckPoint } from '$lib/TStypes/experiences'
-
-	export let data: { name: string; checkPoint: CheckPoint }
-	const { checkPoint, name } = data
-
-	export let nextQuestion
-	export const control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null = 'not-control'
 </script>
 
-<Layout
+<div />
-	imgSrc={'gameData.question.thumbnail'}
-	control={'not-control'}
-	nextQuestion={() => {
-		nextQuestion()
-	}}
->
-	<span slot="title">{name}</span>
-	<span slot="about">{@html checkPoint.CPText}</span>
-</Layout>
-
-<style lang="scss">
-</style>

src/routes/game/Forms/MultiChoiceForm.svelte

@@ -4,44 +4,20 @@
 	import { CheckPoint } from '$lib/TStypes/experiences'
 	import { answer } from '$lib/utils/database/game'
 
-	export let data: { name: string; checkPoint: CheckPoint }
+	export let checkPoint: CheckPoint
-	const { checkPoint, name } = data
+	export let myAnswer
+
+	export let clear: false | true = false
+	$: if (clear) myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
+
 	let myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
-
+	$: myAnswer = checkPoint.CPOptions.filter((item, i) => {
-	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
+		if (myAnswers[i] === true) return item
-	export let nextQuestion
+	})
-
-	const answerCheckBox = async () => {
-		const arr = checkPoint.CPOptions.filter((item, i) => {
-			if (myAnswers[i] === true) return item
-		})
-		const res = await answer(checkPoint.$id, arr)
-		if (res) control = 'correct'
-		else if (control === null) {
-			control = 'wrong-firstTime'
-			myAnswers = new Array(checkPoint.CPOptions.length).fill(false) //nulling answers
-		} else control = 'wrong-secondTime'
-	}
 </script>
 
-<Layout
+{#each checkPoint.CPOptions as label, i}
-	imgSrc={'gameData.question.thumbnail'}
+	<span class="self-baseline">
-	nextQuestion={() => {
+		<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
-		nextQuestion()
+	</span>
-		myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
+{/each}
-	}}
-	{control}
-	on:submit={async () => answerCheckBox()}
->
-	<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">
-				<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
-			</span>
-		{/each}
-	</div>
-</Layout>

src/routes/game/Forms/NumberForm.svelte

@@ -1,49 +1,9 @@
 <script lang="ts">
-	import Layout from '../Components/Layout.svelte'
 	import Input from '../../../lib/components/Inputs/Input.svelte'
-	import { CheckPoint } from '$lib/TStypes/experiences'
-	import { answer } from '$lib/utils/database/game'
 
-	export let data: { name: string; checkPoint: CheckPoint }
+	export let myAnswer = ''
-	const { checkPoint, name } = data
+	export let clear: false | true = false
-	let myAnswer = ''
+	$: if (clear) myAnswer = ''
-
-	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
-	export let nextQuestion
-
-	const answer_ = async () => {
-		const res = await answer(checkPoint.$id, myAnswer)
-		if (res) control = 'correct'
-		else if (control === null) {
-			control = 'wrong-firstTime'
-			myAnswer = '' //nulling answer
-		} else control = 'wrong-secondTime'
-	}
 </script>
 
-<Layout
+<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
-	imgSrc={'gameData.question.thumbnail'}
-	nextQuestion={() => {
-		nextQuestion()
-		myAnswer = ''
-	}}
-	{control}
-	on:submit={() => (myAnswer !== '' ? answer_() : null)}
->
-	<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" />
-		</span>
-	</div>
-</Layout>
-
-<style lang="scss">
-	/*.input::-webkit-inner-spin-button {
-		background: blue;
-	}*/
-</style>

src/routes/game/Forms/Renderer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import parseQuestion from '../../../lib/utils/parseQuestion'
 	import Marker from '../../../lib/components/Map/Marker.svelte'
 	import TextForm from './TextForm.svelte'
 	import NumberForm from './NumberForm.svelte'
@@ -12,6 +11,8 @@
 	import Erantmap from '$lib/components/Map/Erantmap.svelte'
 	import Info from './Info.svelte'
 	import { Experience } from '$lib/TStypes/experiences'
+	import Layout from '../Components/Layout.svelte'
+	import { answer } from '$lib/utils/database/game'
 
 	const components = {
 		TEXT: TextForm,
@@ -24,19 +25,18 @@
 	}
 
 	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null = null
-	let view: 'question' | 'map' | 'end' = 'question'
+	let view: 'question' | 'map' | 'end' | 'start-map' = 'start-map'
-
 	export let gameData: Experience //data
 
 	let client = {
 		//user data about game
-		pos: 1,
+		pos: 0,
 		end: gameData.checkPoints.length - 1, //kolik otázek
 		points: 0, //body
 		possiblePointsToSeize: gameData.checkPoints.length * 2,
 	}
 
-	$: if (control === 'correct' && gameData.checkPoints[client.pos].CPType !== 'INFO') client.points += 2 //only for now
+	$: if (gameData.checkPoints[client.pos].CPType === 'INFO') control = 'not-control'
 
 	const nextQuestion = () => {
 		//další otázka
@@ -54,39 +54,57 @@
 	$: page = view === 'question' ? components[gameData.checkPoints[client.pos].CPType] : null
 
 	let [lat, lng] = [null, null]
-	$: if (client.pos < client.end) [lat, lng] = $data.checkPoints[client.pos].CPLocation
+	$: if (client.pos < client.end) [lat, lng] = view === 'map' ? gameData.checkPoints[client.pos].CPLocation : gameData.ExpLocation
 
 	let user = { lat: 0, lng: 0 }
 
-	/*	//set user to localstorage
+	$: checkPoint = gameData.checkPoints[client.pos]
-	$: if (client.pos !== client.end && client.pos !== 0) {
+	let myAnswer: string | string[]
-		//nastaví
-		localStorage.setItem(`/${gameData.url}`, JSON.stringify(client.pos))
-		localStorage.setItem('lastGame', `/${gameData.url}`)
-	} else {
-		//vymaže když jsi dohrál
-		localStorage.removeItem(`/${gameData.url}`)
-		localStorage.removeItem('lastGame')
-	}
 
-	//is user already in game
+	const checkAnswer = async () => {
-	const userInGame = JSON.parse(localStorage.getItem(location.pathname))
+		const res = await answer(checkPoint.$id, myAnswer)
-	if (userInGame) {
+		if (res) {
-		client.pos = userInGame
+			control = 'correct'
-	}*/
+			client.points += 2
+		} else if (control === null) {
+			control = 'wrong-firstTime'
+			clear = true
+		} else control = 'wrong-secondTime'
+		setTimeout(() => (clear = false), 400)
+	}
+	let clear: boolean = false
 </script>
 
 <input type="number" bind:value={client.pos} />
-<button on:click={() => (view = 'question')}>disappear map</button>
+<button on:click={() => (view = view === 'start-map' ? 'map' : 'question')}>disappear map</button>
 
-{#if view === 'map'}
+{#if view === 'map' || view === 'start-map'}
 	<Erantmap bind:user class="w-full h-full">
-		<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
+		<Marker on:enter={() => (view = view === 'start-map' ? 'map' : 'question')} {lat} {lng} {user} />
 	</Erantmap>
 {/if}
 
 {#if view === 'question'}
-	<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[client.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
+	<Layout imgSrc={'gameData.question.thumbnail'} on:submit={() => checkAnswer()} on:nextQuestion={nextQuestion} {control}>
+		<span slot="title">{checkPoint.CPName}</span>
+		<span slot="about">{@html checkPoint.CPText}</span>
+
+		<span slot="hint">
+			{#if checkPoint.CPHint}
+				{@html checkPoint.CPHint}
+			{/if}
+		</span>
+		<span slot="after">
+			{#if checkPoint.CPAfter}
+				{@html checkPoint.CPAfter}
+			{/if}
+		</span>
+		<div slot="answers">
+			<span class="self-baseline">
+				<svelte:component this={page} {clear} {checkPoint} bind:myAnswer />
+			</span>
+		</div>
+	</Layout>
 {/if}
 {#if view === 'end'}
 	<Finish {client} {gameData}>

src/routes/game/Forms/SingleChoiceForm.svelte

@@ -4,45 +4,15 @@
 	import { CheckPoint } from '$lib/TStypes/experiences'
 	import { answer } from '$lib/utils/database/game'
 
-	export let data: { name: string; checkPoint: CheckPoint }
+	export let checkPoint: CheckPoint
-	const { checkPoint, name } = data
+	export let myAnswer = ''
-	let myAnswer = ''
 
-	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
+	export let clear: false | true = false
-	export let nextQuestion
+	$: if (clear) myAnswer = ''
-
-	const answer_ = async () => {
-		const res = await answer(checkPoint.$id, myAnswer)
-		if (res) control = 'correct'
-		else if (control === null) {
-			control = 'wrong-firstTime'
-			myAnswer = ''
-		} else control = 'wrong-secondTime'
-	}
 </script>
 
-<Layout
+{#each checkPoint.CPOptions as label}
-	imgSrc={'gameData.question.thumbnail'}
+	<span class="self-baseline">
-	{control}
+		<Radio value={label} bind:group={myAnswer}>{label}</Radio>
-	nextQuestion={() => {
+	</span>
-		nextQuestion()
+{/each}
-		myAnswer = ''
-	}}
-	on:submit={() => (myAnswer !== '' ? answer_() : null)}
->
-	<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">
-				<Radio value={label} bind:group={myAnswer}>{label}</Radio>
-			</span>
-		{/each}
-	</div>
-</Layout>
-
-<style lang="scss">
-</style>

src/routes/game/Forms/TextForm.svelte

@@ -4,40 +4,9 @@
 	import { CheckPoint } from '$lib/TStypes/experiences'
 	import { answer } from '$lib/utils/database/game'
 
-	export let data: { name: string; checkPoint: CheckPoint }
+	export let myAnswer = ''
-	const { checkPoint, name } = data
+	export let clear: false | true = false
-	let myAnswer = ''
+	$: if (clear) myAnswer = ''
-
-	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
-	export let nextQuestion
-
-	const answer_ = async () => {
-		const res = await answer(checkPoint.$id, myAnswer)
-		if (res) control = 'correct'
-		else if (control === null) control = 'wrong-firstTime'
-		else control = 'wrong-secondTime'
-	}
 </script>
 
-<Layout
+<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
-	imgSrc={'gameData.question.thumbnail'}
-	{control}
-	nextQuestion={() => {
-		nextQuestion()
-		myAnswer = ''
-	}}
-	on:submit={() => (myAnswer !== '' ? answer_() : null)}
->
-	<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" />
-		</span>
-	</div>
-</Layout>
-
-<style lang="scss">
-</style>

src/routes/game/game.svelte

@@ -19,10 +19,10 @@
 
 	onMount(async () => {
 		try {
-			$data = await load(params.gameurl, 5, (preview) => {
+			$data = await load(params.gameurl, 10, (preview) => {
 				$data = preview
+				view = 'game-preview'
 			})
-			view = 'game-preview'
 		} catch (error) {
 			navigate('/error')
 		}