src/routes/game/Forms/Finish.svelte

@@ -1,12 +1,28 @@
-<script>
+<script lang="ts">
 	import LayoutImg from '../../../lib/components/Layouts/LayoutImg.svelte'
 	import Button from '../../../lib/components/Buttons/Button.svelte'
-	export let img
+	import { Experience } from '$lib/TStypes/experiences'
+	import { navigate } from '$lib/router'
+	export let gameData: Experience
+	export let client
+	let score = (client.points / client.possiblePointsToSeize) * 100
+	console.log(score)
 </script>
 
-<LayoutImg {img}>
+<LayoutImg img={gameData.ExpImage}>
-	<div class="w-full h-full flex flex-wrap flex-row gap-4 justify-center">
+	<div class="w-full h-auto flex flex-wrap flex-row gap-4 justify-center">
-		<div class="h-full w-full flex justify-self-center justify-center text-[32px]"><slot /></div>
+		<div class="h-full w-full flex justify-self-center justify-center text-[32px]  flex-wrap flex-col gap-4 items-center">
-		<Button class="w-80 absolute bottom-0 mb-6" href="/">ukončit hru</Button>
+			<span> Získali jste {client.points} / {client.possiblePointsToSeize} bodů</span>
+			<span>
+				{#if score > 90}
+					{@html gameData.ExpEnd100}
+				{:else if score > 50}
+					{@html gameData.ExpEnd60}
+				{:else}
+					{@html gameData.ExpEnd0}
+				{/if}
+			</span>
+		</div>
+		<Button class="w-80 mt-8 " on:click={() => navigate(-1)}>ukončit hru</Button>
 	</div>
 </LayoutImg>

src/routes/game/Forms/Renderer.svelte

@@ -11,6 +11,7 @@
 	import { data } from '$lib/stores/game'
 	import Erantmap from '$lib/components/Map/Erantmap.svelte'
 	import Info from './Info.svelte'
+	import { Experience } from '$lib/TStypes/experiences'
 
 	const components = {
 		TEXT: TextForm,
@@ -25,47 +26,43 @@
 	export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null = null
 	let view: 'question' | 'map' | 'end' = 'map'
 
-	export let gameData: any = {} //data
+	export let gameData: Experience //data
-	$: console.log(gameData)
+	$: console.log(client)
 
-	let clientAnswers = {
+	let client = {
 		//user data about game
 		pos: 0,
 		end: gameData.checkPoints.length - 1, //kolik otázek
 		points: 0, //body
+		possiblePointsToSeize: gameData.checkPoints.length * 2,
 	}
 
-	$: console.log(clientAnswers.pos === clientAnswers.end + 1)
+	$: if (control === 'correct' && gameData.checkPoints[client.pos].CPType !== 'INFO') client.points += 2 //only for now
-
-	$: if (control === 'correct') clientAnswers.points += 2 //body bodování
 
 	const nextQuestion = () => {
 		//další otázka
-
-		console.log({ control })
-
 		control = null
-		if (clientAnswers.pos === clientAnswers.end) view = 'end'
+		if (client.pos === client.end) view = 'end'
 		else {
-			clientAnswers.pos++
+			client.pos++
 			view = 'map'
 		}
 	}
 
 	//let answers
-	//$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
+	//$: if (client.pos < client.end) answers = parseQuestion(gameData.questions[client.pos].answer, gameData.questions[client.pos].type) //delete
 	let page = null
-	$: page = view === 'question' ? components[gameData.checkPoints[clientAnswers.pos].CPType] : null
+	$: page = view === 'question' ? components[gameData.checkPoints[client.pos].CPType] : null
 
 	let [lat, lng] = [null, null]
-	$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation
+	$: if (client.pos < client.end) [lat, lng] = $data.checkPoints[client.pos].CPLocation
 
 	let user = { lat: 0, lng: 0 }
 
 	/*	//set user to localstorage
-	$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
+	$: if (client.pos !== client.end && client.pos !== 0) {
 		//nastaví
-		localStorage.setItem(`/${gameData.url}`, JSON.stringify(clientAnswers.pos))
+		localStorage.setItem(`/${gameData.url}`, JSON.stringify(client.pos))
 		localStorage.setItem('lastGame', `/${gameData.url}`)
 	} else {
 		//vymaže když jsi dohrál
@@ -76,11 +73,11 @@
 	//is user already in game
 	const userInGame = JSON.parse(localStorage.getItem(location.pathname))
 	if (userInGame) {
-		clientAnswers.pos = userInGame
+		client.pos = userInGame
 	}*/
 </script>
 
-<input type="number" bind:value={clientAnswers.pos} />
+<input type="number" bind:value={client.pos} />
 <button on:click={() => (view = 'question')}>disappear map</button>
 
 {#if view === 'map'}
@@ -90,10 +87,11 @@
 {/if}
 
 {#if view === 'question'}
-	<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
+	<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[client.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
 {/if}
 {#if view === 'end'}
-	<Finish img={gameData.thumbnail}>
+	<Finish {client} {gameData}>
-		<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
+		<span> Získali jste {client.points} / {client.possiblePointsToSeize} bodů</span>
+		<span />
 	</Finish>
 {/if}