database connection init

src/App.svelte

@@ -5,15 +5,16 @@
 	import Game from './routes/game.svelte'
 	import Renderer from './lib/Components/Forms/Renderer.svelte'
 	//import Try from './routes/try.svelte'
+	let gameData
 </script>
 
 <main>
 	<Router>
 		<Route path="/game">
-			<Renderer />
+			<Renderer {gameData} />
 		</Route>
-		<Route path="/">
-			<Game />
+		<Route path="*">
+			<Game bind:gameData />
 		</Route>
 	</Router>
 </main>

src/lib/Components/Forms/Renderer.svelte

@@ -31,12 +31,13 @@
 		clientAnswers.pos++
 	}
 
-	let questions = [
+	/*let questions = [
 		{ type: 'singlechoice', correct: 'banan', quesion: 'text otazky', description: '', options: ['banan', 'cokolada', 'mleko'] },
 		{ type: 'interval', correct: [0, 3], quesion: 'text otazky', description: '', options: null },
 		{ 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]
 

src/lib/Components/Overlay.svelte

@@ -36,7 +36,7 @@
 			display: flex;
 			flex-direction: column;
 			row-gap: 35px;
-			z-index: 5;
+			z-index: 7;
 			background-color: white;
 		}
 

src/routes/game.svelte

@@ -21,22 +21,27 @@
 		url: location.origin,
 	}
 
+	export let gameData = {}
+
+	const readUrlHash = () => {
+		return location.pathname.slice(6, location.pathname.length)
+	}
+
 	;(async () => {
-		const gameData = await api.post(`${api.hostName}/game/details`, {
-			gameurl: 'pisek-mesto-kralovske',
+		gameData = await api.post(`${api.hostName}/game/details`, {
+			gameurl: 'pisek-mesto-kralovske', //readUrlHash(),
 		})
 
 		const questions = yallist(gameData.questions)
-
-		console.log(questions)
+		console.log(gameData)
 
 		console.log(parseQuestion(gameData.questions[0].answer, gameData.questions[0].type))
 	})()
 </script>
 
-<Overlay {shareData} img={background}>
+<Overlay {shareData} img={gameData.thumbnail}>
 	<Heading>
-		<span>Tůra po Karláku</span>
+		<span>{gameData.name}</span>
 		<div class="bubbles" slot="bubbles">
 			<Bubble background="blue">
 				<span slot="icon"><IconStar /></span>
@@ -44,12 +49,16 @@
 			</Bubble>
 			<Bubble background="white">
 				<span slot="icon"><IconPoint /></span>
-				<span> Praha </span>
+				<span> {gameData.district} </span>
 			</Bubble>
 		</div>
 	</Heading>
 
-	<Section title="Popis"><span>{'text'}</span></Section>
+	<Section title="Popis">
+		<span>
+			{@html gameData.start}
+		</span></Section
+	>
 	<Section title="Fotky">
 		<ImageSlider images={assets} />
 	</Section>