game data - maps
This commit is contained in:
parent
6b6a3bc7e5
commit
802b705b73
2
.env
2
.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
|
||||
|
|
|
@ -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 = ''
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'}
|
||||
{#if !loading}
|
||||
<Renderer gameData={$data} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
Loading…
Reference in New Issue