game data - maps

2023-02-14 11:31:54 +01:00 · 2023-02-14 11:31:54 +01:00 · 802b705b73
parent 6b6a3bc7e5
commit 802b705b73
6 changed files with 63 additions and 77 deletions
--- a/.env
+++ b/.env
@ -1,5 +1,5 @@
 # project endpoint (required) [example: http://localhost/v1]
-VITE_APPWRITE_ENDPOINT=http://erant-deploy.erant.cz/v1
+VITE_APPWRITE_ENDPOINT=https://erant-deploy.erant.cz/v1

 # project id (required) [example: 638871b363904655d784]
 VITE_APPWRITE_PROJECT_ID=63af924ab3995db64755
--- a/src/lib/components/Map/Erantmap.svelte
+++ b/src/lib/components/Map/Erantmap.svelte
@ -4,9 +4,9 @@
 	import { navigate } from 'svelte-routing'

 	export let center
-	//$: console.log(center)
+	$: console.log(center)

-	export let mapComponent
+	export let mapComponent = null
 	export let user = { lat: null, lng: null }

 	let className = ''
--- a/src/lib/components/Map/Map.svelte
+++ b/src/lib/components/Map/Map.svelte
@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
 	import { Map, controls } from '@beyonk/svelte-mapbox'
 	import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
 	import { createEventDispatcher, onMount } from 'svelte'
-	export let mapComponent
+	export let mapComponent = null
 	let geolocateControl
 	let className = ''
 	export { className as class }

 	export let radius = false
-	export let center = { lng: 0, lat: 0 }
+	export let center: { lng: number; lat: number } = { lng: 0, lat: 0 }
 	/*export const geo = (e) => {
 		geolocateControl.dispatchEvent('geolocate')
 		if (navigator.geolocation) {
@ -21,11 +21,12 @@
 			alert("Can't load your location!")
 		}
 	}*/
+	$: console.log([center.lat, center.lng])
 </script>

 <div class={className} class:radius>
 	<Map
-		class="h-full"
+		center={[center.lng, center.lat]}
 		accessToken="pk.eyJ1IjoiZXJhbnQ0MiIsImEiOiJjbDdybXo4dmswZ3E5M3FwMnFsazdpb3VoIn0.wXblbreOUt3e8N81CAH0Wg"
 		style="mapbox://styles/mapbox/outdoors-v11"
 		bind:this={mapComponent}
--- a/src/lib/utils/game.ts
+++ b/src/lib/utils/game.ts
@ -4,10 +4,12 @@ import database from 'svelte-appwrite-client/src/lib/database'

 export const load = async (pathName: string) => {
 	const checkPoints = []
-	const game = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName.slice(1, pathName.length))])).documents[0]
+	const game = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
 	const checkPointsIds = game.ExpCPsID

 	for (const checkPointId of checkPointsIds) {
 		checkPoints.push(await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId))
 	}
+	game['checkPoints'] = checkPoints
+	return game
 }
--- a/src/routes/game/Forms/Renderer.svelte
+++ b/src/routes/game/Forms/Renderer.svelte
@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
 	import parseQuestion from '../../../lib/utils/parseQuestion'
-	import Marker from '../../../lib/Components/Map/Marker.svelte'
+	import Marker from '../../../lib/components/Map/Marker.svelte'
 	import TextForm from './TextForm.svelte'
 	import NumberForm from './NumberForm.svelte'
 	import SingleForm from './SingleChoiceForm.svelte'
@ -9,26 +9,27 @@
 	import QrCode from './QrCode.svelte'
 	import Finish from './Finish.svelte'
 	import { data } from '$lib/stores/game'
-	import Erantmap from '$src/lib/Components/Map/Erantmap.svelte'
+	import Erantmap from '$lib/components/Map/Erantmap.svelte'

 	const components = {
 		TEXT: TextForm,
 		NUMBER: NumberForm,
-		SINGLECHOICE: SingleForm,
-		MULTICHOICE: MultiplyForm,
+		RADIO: SingleForm,
+		CHECKBOX: MultiplyForm,
 		interval: IntervalForm,
 		qrcode: QrCode,
 	}

-	let startQuestion = false
 	let control = null // if true => spravne if false spatne
+	let view: 'question' | 'map' = 'map'

-	export let gameData = {} //data
+	export let gameData: any = {} //data
+	$: console.log(gameData)

 	let clientAnswers = {
 		//user data about game
-		pos: 0,
-		end: gameData.questions.length, //kolik otázek
+		pos: 1,
+		end: gameData.checkPoints.length, //kolik otázek
 		points: 0, //body
 	}

@ -39,41 +40,21 @@
 		if (control !== null) {
 			control = null
 			clientAnswers.pos++
-			startQuestion = false
+			view = 'map'
 		}
 	}

-	let answers
-	$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
-	let page
-	$: if (clientAnswers.pos < clientAnswers.end) page = components[gameData.questions[clientAnswers.pos].type]
+	//let answers
+	//$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
+	let page = null
+	$: if (clientAnswers.pos < clientAnswers.end) page = components[gameData.checkPoints[clientAnswers.pos].CPType]

-	/*jen pro tedkon, pozdeji vymazat az bude singlechoise a multichoise oddelene*/
-	$: if (clientAnswers.pos < clientAnswers.end) page = gameData.questions[clientAnswers.pos].type === 'CHOICE' ? components[vals()] : page
-
-	const vals = () => {
-		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
-	}
-	/*--------------- -----------------------------------------------------------*/
-
-	let lat
-	let lng
-	$: if (clientAnswers.pos < clientAnswers.end) lat = Number.parseFloat($data.questions[clientAnswers.pos].lat)
-	$: if (clientAnswers.pos < clientAnswers.end) lng = Number.parseFloat($data.questions[clientAnswers.pos].lng)
+	let [lat, lng] = [null, null]
+	$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation

 	let user = { lat: null, lng: null }

-	//set user to localstorage
+	/*	//set user to localstorage
 	$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
 		//nastaví
 		localStorage.setItem(`/${gameData.url}`, JSON.stringify(clientAnswers.pos))
@ -88,18 +69,18 @@
 	const userInGame = JSON.parse(localStorage.getItem(location.pathname))
 	if (userInGame) {
 		clientAnswers.pos = userInGame
-	}
+	}*/
 </script>

-{#if page && startQuestion}
+{#if page && view === 'map'}
 	<Erantmap center={{ lat, lng }} bind:user class="w-full h-full">
-		<Marker on:enter={() => (startQuestion = true)} {lat} {lng} {user} />
+		<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
 	</Erantmap>
 {/if}

-{#if !startQuestion}
+{#if view === 'question'}
 	{#if clientAnswers.pos !== clientAnswers.end}
-		<svelte:component this={page} gameData={{ question: gameData.questions[clientAnswers.pos], name: gameData.name }} {nextQuestion} bind:control />
+		<svelte:component this={page} gameData={{ question: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
 	{:else}
 		<Finish img={gameData.thumbnail}>
 			<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
--- a/src/routes/game/game.svelte
+++ b/src/routes/game/game.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Overlay from '../../lib/Components/Layouts/LayoutImg.svelte'
 	import Section from '../../lib/Components/common/Section.svelte'
 	import Button from '../../lib/Components/Buttons/Button.svelte'
@ -15,76 +15,76 @@
 	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/game'

-	export let params
+	export let params: { gameurl: string }

-	const [gameData, loading] = collections.expiriences.getDocument([Query.equal('ExpURL', params.gameurl)])
+	//const [gameData] = collections.expiriences.getDocument([Query.equal('ExpURL', params.gameurl)])

-	$: console.log($gameData)
+	$: console.log($data)

-	$: $data = $loading ? $gameData : null
+	let loading: boolean = true

-	$: assets = $gameData?.data?.questions
+	onMount(async () => {
+		$data = await load(params.gameurl)
+		loading = false
+	})
+
+	$: assets = $data?.questions
 		?.filter((q) => q.thumbnail !== null)
 		?.slice(0, 8)
 		?.map((q) => q.thumbnail)

-	let view = 'game-loading'
+	let view: 'game-play' | 'game-loading' = 'game-play'

 	//is user already in game
-	const userInGame = JSON.parse(localStorage.getItem(location.pathname))
-	$: if ($gameData && userInGame) view = 'game-play'
+	//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
+	//$: if ($data && userInGame) view = 'game-play'
 </script>

 {#if view === 'game-loading'}
-	{#if $loading}
+	{#if loading}
 		<h1 class="flex items-center justify-center flex-col">
 			<span>Hra se načítá...</span>
 			<Loading />
 		</h1>
-	{:else if $gameData?.success === true}
-		<Overlay shareData={{ url: window.location.href }} img={$gameData.data.thumbnail}>
+	{:else if $data}
+		<Overlay shareData={{ url: window.location.href }} img={$data.expimage_dontCare}>
 			<div>
-				<span class="text-[36px]">{$gameData.data.name}</span>
+				<span class="text-[36px]">{$data.ExpName}</span>
 				<div class="bubbles">
 					<Bubble background="blue">
 						<span slot="icon"><IconStar /></span>
-						<span> {'5.0'} </span>
+						<span> {$data.ExpRating} </span>
 					</Bubble>
 					<Bubble background="white">
 						<span slot="icon"><IconPoint /></span>
-						<span>{$gameData.data.district}</span>
+						<span>{'$data.district'}</span>
 					</Bubble>
 				</div>
 			</div>

 			<Section title="Popis">
 				<span>
-					{@html $gameData.data.start}
+					{@html $data.ExpIntroduction}
 				</span>
 			</Section>

 			<Section title="Fotky">
 				<div class="w-full relative">
 					<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
-						<ImageSlider images={assets} />
+						<!--<ImageSlider images={assets} />-->
 					</div>
 				</div>
 			</Section>

 			<div class="w-full relative">
 				<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
-					<Map radius class="w-full h-44" center={{ lng: $gameData.data.lng, lat: $gameData.data.lat }}>
-						{#each $gameData.data.questions as { lat, lng }}
+					<Map radius class="w-full h-44" center={{ lng: $data.ExpLocation[0], lat: $data.ExpLocation[1] }}>
+						{#each $data.checkPoints as { CPLocation: [lat, lng] }}
 							<Marker {lat} {lng} />
 						{/each}
-						<GeolocateControl
-							on:geolocate={(e) => {
-								const { latitude, longitude } = e.detail.coords
-								const user = { lat: latitude, lng: longitude }
-								console.log(user)
-							}}
-						/>
 					</Map>
 				</div>
 			</div>
@ -95,7 +95,9 @@
 		<Redirect replace to="/error" />
 	{/if}
 {:else if view === 'game-play'}
-	<Renderer gameData={$data} />
+	{#if !loading}
+		<Renderer gameData={$data} />
+	{/if}
 {/if}

 <style>