znovu pushovani, hotovy forms

src/App.svelte

@@ -3,6 +3,7 @@
 	import './main.scss'
 
 	import Game from './routes/game.svelte'
+	import Finish from './lib/Components/Forms/Finish.svelte'
 	import Renderer from './lib/Components/Forms/Renderer.svelte'
 	//import Try from './routes/try.svelte'
 	let gameData
@@ -10,11 +11,11 @@
 
 <main>
 	<Router>
-		<Route path="/">
+		<Route path="/play">
-			<Renderer />
+			<Renderer {gameData} />
 		</Route>
 		<Route path="/game/:gameurl" let:params>
-			<Game gameurl={params.gameurl} />
+			<Game gameurl={params.gameurl} bind:gameData />
 		</Route>
 	</Router>
 </main>

src/lib/Components/Forms/Finish.svelte

@@ -0,0 +1,14 @@
+<script>
+	import Overlay from '$lib/Components/Overlay.svelte'
+	export let img
+</script>
+
+<Overlay {img}>
+	<div class="h-full w-full flex justify-self-center justify-center relative top-20"><slot /></div>
+</Overlay>
+
+<style>
+	div {
+		font-size: var(--fontSize);
+	}
+</style>

src/lib/Components/Forms/IntervalForm.svelte

@@ -4,7 +4,7 @@
 	let title = 'title' //exportovat ze zhora
 
 	export let params // { type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
-	let myAnswer
+	let myAnswer = ''
 	export let control = null
 	export let nextQuestion
 
@@ -13,7 +13,15 @@
 	}
 </script>
 
-<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? between(myAnswer, params.correct[0], params.correct[1]) : null)}>
+<Layout
+	imgSrc={gameData.question.thumbnail}
+	{control}
+	nextQuestion={() => {
+		nextQuestion()
+		myAnswer = ''
+	}}
+	on:submit={() => (control = myAnswer !== '' ? between(myAnswer, params.correct[0], params.correct[1]) : null)}
+>
 	<span slot="title">{title}</span>
 	<span slot="about">{params.quesion}</span>
 	<div slot="answers">

src/lib/Components/Forms/MultiChoiceForm.svelte

@@ -1,11 +1,11 @@
 <script>
 	import Layout from '../Quiz/Layout.svelte'
 	import CheckBox from '../Quiz/answers/Checkbox.svelte'
-	let title = 'title' //exportovat ze zhora
+	import parseQuestion from '$lib/utils/parseQuestion'
 
-	export let params //{ type: 'multichoice', correct: ['banan', 'cokolada'], quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
+	export let gameData
-	let myAnswers = new Array(params.options.length).fill(false)
+	let answers = parseQuestion(gameData.question.answer, gameData.question.type)
-	$: console.log(myAnswers)
+	let myAnswers = new Array(answers.length).fill(false)
 
 	export let control = null
 	export let nextQuestion
@@ -13,12 +13,10 @@
 	const controlMultiForm = () => {
 		for (let i = 0; i < myAnswers.length; i++) {
 			const answer = myAnswers[i]
-			const option = params.options[i]
+			const option = answers[i].label
-			const correct = params.correct
+			const rightValue = answers[i].value
 
-			if (answer && correct.indexOf(option) >= 0) control = null
+			if (rightValue !== answer) {
-			else if (!answer && !(correct.indexOf(option) >= 0)) control = null
-			else {
 				control = false
 				return ''
 			}
@@ -27,20 +25,22 @@
 	}
 </script>
 
-<Layout {nextQuestion} {control} on:submit={controlMultiForm}>
+<Layout
-	<span slot="title">{title}</span>
+	imgSrc={gameData.question.thumbnail}
-	<span slot="about">{params.quesion}</span>
+	nextQuestion={() => {
+		nextQuestion()
+		myAnswers = new Array(answers.length).fill(false)
+	}}
+	{control}
+	on:submit={controlMultiForm}
+>
+	<span slot="title">{gameData.name}</span>
+	<span slot="about">{@html gameData.question.question}</span>
 	<div slot="answers">
-		{#each params.options as option, i}
+		{#each answers as { label }, i}
 			<span class="self-baseline">
-				<CheckBox bind:checked={myAnswers[i]}>{option}</CheckBox>
+				<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
 			</span>
 		{/each}
 	</div>
 </Layout>
-
-<!--<Input bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
-						<Input type="number" bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
-					-->
-<style lang="scss">
-</style>

src/lib/Components/Forms/NumberForm.svelte

@@ -1,18 +1,27 @@
 <script>
 	import Layout from '../Quiz/Layout.svelte'
 	import Input from '../Quiz/answers/Input.svelte'
-	let title = 'title' //exportovat ze zhora
+	import parseQuestion from '$lib/utils/parseQuestion'
 
-	export let params //{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
+	export let gameData
-	let myAnswer
+	let answers = parseQuestion(gameData.question.answer, gameData.question.type)
+	let myAnswer = ''
 
 	export let nextQuestion
 	export let control = null
 </script>
 
-<Layout {nextQuestion} {control} on:submit={() => (control = myAnswer !== '' ? myAnswer === params.correct : null)}>
+<Layout
-	<span slot="title">{title}</span>
+	imgSrc={gameData.question.thumbnail}
-	<span slot="about">{params.about}</span>
+	nextQuestion={() => {
+		nextQuestion()
+		myAnswer = ''
+	}}
+	{control}
+	on:submit={() => (control = myAnswer !== '' ? myAnswer === answers.answer : null)}
+>
+	<span slot="title">{gameData.name}</span>
+	<span slot="about">{@html gameData.question.question}</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" />
@@ -20,9 +29,6 @@
 	</div>
 </Layout>
 
-<!--<Input bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
-						<Input type="number" bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
-					-->
 <style lang="scss">
 	/*.input::-webkit-inner-spin-button {
 		background: blue;

src/lib/Components/Forms/Renderer.svelte

@@ -5,46 +5,69 @@
 	import MultiplyForm from './MultiChoiceForm.svelte'
 	import IntervalForm from './IntervalForm.svelte'
 	import QrCode from './QrCode.svelte'
-	import { navigate } from 'svelte-routing'
 	import Finish from './Finish.svelte'
+	import parseQuestion from '$lib/utils/parseQuestion'
 
 	const components = {
-		text: TextForm,
+		TEXT: TextForm,
-		number: NumberForm,
+		NUMBER: NumberForm,
-		singlechoice: SingleForm,
+		SINGLECHOICE: SingleForm,
-		multichoice: MultiplyForm,
+		MULTICHOICE: MultiplyForm,
 		interval: IntervalForm,
 		qrcode: QrCode,
-
-		finish: Finish,
 	}
 
 	let control = null // if true => spravne if false spatne
-	$: console.log(control ? 'správně' : !control ? 'špatně' : null)
+	$: console.log(`kontrola: ${control}`)
+
+	$: if (control === true) clientAnswers.points += 2 //body bodování
 
 	const nextQuestion = () => {
-		if (clientAnswers.pos + 1 === clientAnswers.end) {
+		//další otázka
-			page = components.finish
+		if (control !== null) {
-			return ''
-		}
 			control = null
 			clientAnswers.pos++
 		}
+	}
 
-	/*let questions = [
+	export let gameData = {} //data
-		{ type: 'singlechoice', correct: 'banan', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
+
-		{ type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
+	$: answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
-		{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
-		{ type: 'multichoice', correct: ['banan', 'cokolada'], quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
-	]*/
-	export let gameData
-	let page
-	$: page = components[questions[clientAnswers.pos].type]
 
 	let clientAnswers = {
 		pos: 0,
-		end: questions.length,
+		end: gameData.questions.length, //kolik otázek
+		points: 0, //body
 	}
+	let page
+	$: page = components[gameData.questions[clientAnswers.pos].type]
+
+	/*jen pro tedkon, pozdeji vymazat az bude singlechoise a multichoise oddelene*/
+	$: page = gameData.questions[clientAnswers.pos].type === 'CHOICE' ? components[vals()] : page
+
+	const vals = () => {
+		console.log(answers)
+		let con = false
+		let result
+		answers.forEach((q) => {
+			if (q.value && con) {
+				result = 'MULTICHOICE'
+				return ''
+			}
+			if (q.value && !con) con = true
+		})
+		if (result === undefined) result = 'SINGLECHOICE'
+		return result
+	}
+	/*--------------- -----------------------------------------------------------*/
 </script>
 
-<svelte:component this={page} params={questions[clientAnswers.pos]} {nextQuestion} bind:control />
+{#if page}
+	{#if clientAnswers.pos + 1 !== clientAnswers.end}
+		<svelte:component this={page} gameData={{ question: gameData.questions[clientAnswers.pos], name: gameData.name }} {nextQuestion} bind:control />
+	{:else}
+		<Finish img={gameData.thumbnail}>
+			<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
+		</Finish>
+	{/if}
+{/if}

src/lib/Components/Forms/SingleChoiceForm.svelte

@@ -1,22 +1,36 @@
 <script>
 	import Radio from '../Quiz/answers/Radio.svelte'
 	import Layout from '../Quiz/Layout.svelte'
-	let title = 'title' //exportovat ze zhora
+	import parseQuestion from '$lib/utils/parseQuestion'
 
-	export let params //{ type: 'singlechoice', correct: 'banan', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
+	export let gameData
-	let myAnswer
+	let answers = parseQuestion(gameData.question.answer, gameData.question.type)
+	let myAnswer = ''
 
 	export let control = null
 	export let nextQuestion
+
+	const rightAnswer = () =>
+		answers.map((item) => {
+			if (item.value) return item.label
+		})
 </script>
 
-<Layout {control} {nextQuestion} on:submit={() => (control = typeof myAnswer === 'string' ? myAnswer === params.correct : null)}>
+<Layout
-	<span slot="title">{title}</span>
+	imgSrc={gameData.question.thumbnail}
-	<span slot="about">{params.quesion}</span>
+	{control}
+	nextQuestion={() => {
+		nextQuestion()
+		myAnswer = ''
+	}}
+	on:submit={() => (control = typeof myAnswer === 'string' && myAnswer !== '' ? myAnswer === rightAnswer() : null)}
+>
+	<span slot="title">{gameData.name}</span>
+	<span slot="about">{@html gameData.question.question}</span>
 	<div slot="answers">
-		{#each params.options as option}
+		{#each answers as { label }}
 			<span class="self-baseline">
-				<Radio value={option} bind:group={myAnswer}>{option}</Radio>
+				<Radio value={label} bind:group={myAnswer}>{label}</Radio>
 			</span>
 		{/each}
 	</div>

src/lib/Components/Forms/TextForm.svelte

@@ -1,10 +1,11 @@
 <script>
 	import Layout from '../Quiz/Layout.svelte'
 	import Input from '../Quiz/answers/Input.svelte'
-	let title = 'title' //exportovat ze zhora
+	import parseQuestion from '$lib/utils/parseQuestion'
 
-	export let params //{ type: 'text', correct: 'jablko', quesion: 'text otazky', description: '', options: null },
+	export let gameData
-	let myAnswer
+	let answers = parseQuestion(gameData.question.answer, gameData.question.type)
+	let myAnswer = ''
 
 	export let control = null
 	export let nextQuestion
@@ -14,9 +15,17 @@
 	}
 </script>
 
-<Layout {control} {nextQuestion} on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, params.correct) : null)}>
+<Layout
-	<span slot="title">{title}</span>
+	imgSrc={gameData.question.thumbnail}
-	<span slot="about">{params.quesion}</span>
+	{control}
+	nextQuestion={() => {
+		nextQuestion()
+		myAnswer = ''
+	}}
+	on:submit={() => (control = myAnswer !== '' ? compare(myAnswer, answers.answer) : null)}
+>
+	<span slot="title">{gameData.name}</span>
+	<span slot="about">{@html gameData.question.question}</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/lib/Components/Image.svelte

@@ -1,8 +1,10 @@
 <script>
 	export let src
+	let className
+	export { className as class }
 </script>
 
-<section style="--bg: url({src});" />
+<section class={className} style="--bg: url({src});" />
 
 <style lang="scss">
 	section {
@@ -11,7 +13,5 @@
 		background-position: center center;
 		background-repeat: no-repeat;
 		background-size: cover;
-		height: 94px;
-		width: 94px;
 	}
 </style>

src/lib/Components/ImageSlider.svelte

@@ -15,7 +15,7 @@
 	{#each images as image, i}
 		{#if Math.floor(windowsize / (94 + 10)) >= i + 1}
 			<div>
-				<Image src={image} />
+				<Image src={image} class="w-24 h-24" />
 				{#if Math.floor(windowsize / (94 + 10)) === i + 1 && images.length !== i + 1}
 					<span on:click={nextImages} class="imageCounter">{`+${images.length - Math.floor(windowsize / (94 + 10))}`}</span>
 				{/if}

src/lib/Components/Overlay.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let img
+	export let img = null
 	export let shareData = null
 	export let alt = 'background image'
 	import Tab from './game/Tab.svelte'
@@ -8,7 +8,9 @@
 
 <Layout>
 	<section class="wraper">
+		{#if img}
 			<img src={img} {alt} />
+		{/if}
 		{#if shareData !== null && shareData !== false}
 			<Tab {shareData} />
 		{/if}

src/lib/Components/Quiz/Layout.svelte

@@ -4,9 +4,10 @@
 	import Section from '../Section.svelte'
 	import Map from '../game/Map.svelte'
 	import Button from '../Button.svelte'
+	import Image from '../Image.svelte'
 
 	export let control, nextQuestion
-	$: console.log(control)
+	export let imgSrc
 </script>
 
 <Layout>
@@ -14,14 +15,14 @@
 		<Heading>
 			<div class="flex justify-center items-center flex-col flex-wrap gap-3">
 				<span class="title"><slot name="title" /></span>
-				<span style="width: 85%"><Map /></span>
+				<span style="width: 100%"><Image class="w-full h-[200px]" src={imgSrc} /></span>
 			</div>
 		</Heading>
 		<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>
+					<span> <slot name="about" /></span>
 				</div>
 				<div class="flex items-center justify-center flex-col w-full gap-6">
 					<span class="relative"> <slot name="answers" /> </span>

src/lib/utils/parseQuestion.js

@@ -1,4 +1,3 @@
-
 export default (question, questionType) => {
 	switch (questionType.toLowerCase()) {
 		case 'text':
@@ -6,9 +5,9 @@ export default (question, questionType) => {
 		case 'number':
 			return Number.parseFloat(question)
 		case 'choice':
-			return question.split(/;\s*/).map(item => ({
+			return question.split(/;\s*/).map((item) => ({
 				label: item.startsWith('*') ? item.substring(1) : item,
-				value: item.startsWith('*') ? true : false
+				value: item.startsWith('*') ? true : false,
 			}))
 		default:
 			return null

src/routes/game.svelte

@@ -8,29 +8,24 @@
 	import IconPoint from '../lib/Components/Icons/Point.svelte'
 	import Map from '../lib/Components/game/Map.svelte'
 	import ImageSlider from '../lib/Components/ImageSlider.svelte'
-
 	import * as api from '$lib/utils/api'
-	import parseQuestion from '$lib/utils/parseQuestion'
-	import yallist from 'yallist'
 
 	export let gameurl
 
-	let background = '/assets/temp/kar1.png'
 	let assets = Array.from(Array(6).keys()).map((_, i) => `/assets/temp/kar${i + 1}.png`)
 
+	export let gameData = null
 	;(async () => {
-		const gameData = await api.post(`${api.hostName}/game/details`, {
+		gameData = await api.post(`${api.hostName}/game/details`, {
-			gameurl: gameurl,
+			gameurl,
 		})
 
-		const questions = yallist(gameData.questions)
+		//console.log(gameData)
-		console.log(gameData)
-
-		console.log(parseQuestion(gameData.questions[0].answer, gameData.questions[0].type))
 	})()
 </script>
 
-<Overlay {shareData} img={gameData.thumbnail}>
+<Overlay shareData={{}} img={gameData?.thumbnail}>
+	{#if gameData}
 		<Heading>
 			<span>{gameData.name}</span>
 			<div class="bubbles" slot="bubbles">
@@ -55,7 +50,8 @@
 		</Section>
 		<Map />
 
-	<Button href="/game" primary>Hrát</Button>
+		<Button href="/play" primary>Hrát</Button>
+	{/if}
 </Overlay>
 
 <!---->