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]
|
# 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]
|
# project id (required) [example: 638871b363904655d784]
|
||||||
VITE_APPWRITE_PROJECT_ID=63af924ab3995db64755
|
VITE_APPWRITE_PROJECT_ID=63af924ab3995db64755
|
||||||
|
|
|
@ -4,9 +4,9 @@
|
||||||
import { navigate } from 'svelte-routing'
|
import { navigate } from 'svelte-routing'
|
||||||
|
|
||||||
export let center
|
export let center
|
||||||
//$: console.log(center)
|
$: console.log(center)
|
||||||
|
|
||||||
export let mapComponent
|
export let mapComponent = null
|
||||||
export let user = { lat: null, lng: null }
|
export let user = { lat: null, lng: null }
|
||||||
|
|
||||||
let className = ''
|
let className = ''
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { Map, controls } from '@beyonk/svelte-mapbox'
|
import { Map, controls } from '@beyonk/svelte-mapbox'
|
||||||
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
|
||||||
import { createEventDispatcher, onMount } from 'svelte'
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
export let mapComponent
|
export let mapComponent = null
|
||||||
let geolocateControl
|
let geolocateControl
|
||||||
let className = ''
|
let className = ''
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
|
||||||
export let radius = false
|
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) => {
|
/*export const geo = (e) => {
|
||||||
geolocateControl.dispatchEvent('geolocate')
|
geolocateControl.dispatchEvent('geolocate')
|
||||||
if (navigator.geolocation) {
|
if (navigator.geolocation) {
|
||||||
|
@ -21,11 +21,12 @@
|
||||||
alert("Can't load your location!")
|
alert("Can't load your location!")
|
||||||
}
|
}
|
||||||
}*/
|
}*/
|
||||||
|
$: console.log([center.lat, center.lng])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={className} class:radius>
|
<div class={className} class:radius>
|
||||||
<Map
|
<Map
|
||||||
class="h-full"
|
center={[center.lng, center.lat]}
|
||||||
accessToken="pk.eyJ1IjoiZXJhbnQ0MiIsImEiOiJjbDdybXo4dmswZ3E5M3FwMnFsazdpb3VoIn0.wXblbreOUt3e8N81CAH0Wg"
|
accessToken="pk.eyJ1IjoiZXJhbnQ0MiIsImEiOiJjbDdybXo4dmswZ3E5M3FwMnFsazdpb3VoIn0.wXblbreOUt3e8N81CAH0Wg"
|
||||||
style="mapbox://styles/mapbox/outdoors-v11"
|
style="mapbox://styles/mapbox/outdoors-v11"
|
||||||
bind:this={mapComponent}
|
bind:this={mapComponent}
|
||||||
|
|
|
@ -4,10 +4,12 @@ import database from 'svelte-appwrite-client/src/lib/database'
|
||||||
|
|
||||||
export const load = async (pathName: string) => {
|
export const load = async (pathName: string) => {
|
||||||
const checkPoints = []
|
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
|
const checkPointsIds = game.ExpCPsID
|
||||||
|
|
||||||
for (const checkPointId of checkPointsIds) {
|
for (const checkPointId of checkPointsIds) {
|
||||||
checkPoints.push(await databases.getDocument('63cef30d6da945dd4250', '63cef84d908acf805758', checkPointId))
|
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 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 TextForm from './TextForm.svelte'
|
||||||
import NumberForm from './NumberForm.svelte'
|
import NumberForm from './NumberForm.svelte'
|
||||||
import SingleForm from './SingleChoiceForm.svelte'
|
import SingleForm from './SingleChoiceForm.svelte'
|
||||||
|
@ -9,26 +9,27 @@
|
||||||
import QrCode from './QrCode.svelte'
|
import QrCode from './QrCode.svelte'
|
||||||
import Finish from './Finish.svelte'
|
import Finish from './Finish.svelte'
|
||||||
import { data } from '$lib/stores/game'
|
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 = {
|
const components = {
|
||||||
TEXT: TextForm,
|
TEXT: TextForm,
|
||||||
NUMBER: NumberForm,
|
NUMBER: NumberForm,
|
||||||
SINGLECHOICE: SingleForm,
|
RADIO: SingleForm,
|
||||||
MULTICHOICE: MultiplyForm,
|
CHECKBOX: MultiplyForm,
|
||||||
interval: IntervalForm,
|
interval: IntervalForm,
|
||||||
qrcode: QrCode,
|
qrcode: QrCode,
|
||||||
}
|
}
|
||||||
|
|
||||||
let startQuestion = false
|
|
||||||
let control = null // if true => spravne if false spatne
|
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 = {
|
let clientAnswers = {
|
||||||
//user data about game
|
//user data about game
|
||||||
pos: 0,
|
pos: 1,
|
||||||
end: gameData.questions.length, //kolik otázek
|
end: gameData.checkPoints.length, //kolik otázek
|
||||||
points: 0, //body
|
points: 0, //body
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -39,41 +40,21 @@
|
||||||
if (control !== null) {
|
if (control !== null) {
|
||||||
control = null
|
control = null
|
||||||
clientAnswers.pos++
|
clientAnswers.pos++
|
||||||
startQuestion = false
|
view = 'map'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let answers
|
//let answers
|
||||||
$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
|
//$: if (clientAnswers.pos < clientAnswers.end) answers = parseQuestion(gameData.questions[clientAnswers.pos].answer, gameData.questions[clientAnswers.pos].type) //delete
|
||||||
let page
|
let page = null
|
||||||
$: if (clientAnswers.pos < clientAnswers.end) page = components[gameData.questions[clientAnswers.pos].type]
|
$: if (clientAnswers.pos < clientAnswers.end) page = components[gameData.checkPoints[clientAnswers.pos].CPType]
|
||||||
|
|
||||||
/*jen pro tedkon, pozdeji vymazat az bude singlechoise a multichoise oddelene*/
|
let [lat, lng] = [null, null]
|
||||||
$: if (clientAnswers.pos < clientAnswers.end) page = gameData.questions[clientAnswers.pos].type === 'CHOICE' ? components[vals()] : page
|
$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation
|
||||||
|
|
||||||
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 user = { lat: null, lng: null }
|
let user = { lat: null, lng: null }
|
||||||
|
|
||||||
//set user to localstorage
|
/* //set user to localstorage
|
||||||
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
|
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
|
||||||
//nastaví
|
//nastaví
|
||||||
localStorage.setItem(`/${gameData.url}`, JSON.stringify(clientAnswers.pos))
|
localStorage.setItem(`/${gameData.url}`, JSON.stringify(clientAnswers.pos))
|
||||||
|
@ -88,18 +69,18 @@
|
||||||
const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
||||||
if (userInGame) {
|
if (userInGame) {
|
||||||
clientAnswers.pos = userInGame
|
clientAnswers.pos = userInGame
|
||||||
}
|
}*/
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if page && startQuestion}
|
{#if page && view === 'map'}
|
||||||
<Erantmap center={{ lat, lng }} bind:user class="w-full h-full">
|
<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>
|
</Erantmap>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if !startQuestion}
|
{#if view === 'question'}
|
||||||
{#if clientAnswers.pos !== clientAnswers.end}
|
{#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}
|
{:else}
|
||||||
<Finish img={gameData.thumbnail}>
|
<Finish img={gameData.thumbnail}>
|
||||||
<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
|
<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 Overlay from '../../lib/Components/Layouts/LayoutImg.svelte'
|
||||||
import Section from '../../lib/Components/common/Section.svelte'
|
import Section from '../../lib/Components/common/Section.svelte'
|
||||||
import Button from '../../lib/Components/Buttons/Button.svelte'
|
import Button from '../../lib/Components/Buttons/Button.svelte'
|
||||||
|
@ -15,76 +15,76 @@
|
||||||
import Marker from '../../lib/Components/Map/Marker.svelte'
|
import Marker from '../../lib/Components/Map/Marker.svelte'
|
||||||
import collections from '$lib/collections'
|
import collections from '$lib/collections'
|
||||||
import { Query } from 'appwrite'
|
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)
|
?.filter((q) => q.thumbnail !== null)
|
||||||
?.slice(0, 8)
|
?.slice(0, 8)
|
||||||
?.map((q) => q.thumbnail)
|
?.map((q) => q.thumbnail)
|
||||||
|
|
||||||
let view = 'game-loading'
|
let view: 'game-play' | 'game-loading' = 'game-play'
|
||||||
|
|
||||||
//is user already in game
|
//is user already in game
|
||||||
const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
//const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
||||||
$: if ($gameData && userInGame) view = 'game-play'
|
//$: if ($data && userInGame) view = 'game-play'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if view === 'game-loading'}
|
{#if view === 'game-loading'}
|
||||||
{#if $loading}
|
{#if loading}
|
||||||
<h1 class="flex items-center justify-center flex-col">
|
<h1 class="flex items-center justify-center flex-col">
|
||||||
<span>Hra se načítá...</span>
|
<span>Hra se načítá...</span>
|
||||||
<Loading />
|
<Loading />
|
||||||
</h1>
|
</h1>
|
||||||
{:else if $gameData?.success === true}
|
{:else if $data}
|
||||||
<Overlay shareData={{ url: window.location.href }} img={$gameData.data.thumbnail}>
|
<Overlay shareData={{ url: window.location.href }} img={$data.expimage_dontCare}>
|
||||||
<div>
|
<div>
|
||||||
<span class="text-[36px]">{$gameData.data.name}</span>
|
<span class="text-[36px]">{$data.ExpName}</span>
|
||||||
<div class="bubbles">
|
<div class="bubbles">
|
||||||
<Bubble background="blue">
|
<Bubble background="blue">
|
||||||
<span slot="icon"><IconStar /></span>
|
<span slot="icon"><IconStar /></span>
|
||||||
<span> {'5.0'} </span>
|
<span> {$data.ExpRating} </span>
|
||||||
</Bubble>
|
</Bubble>
|
||||||
<Bubble background="white">
|
<Bubble background="white">
|
||||||
<span slot="icon"><IconPoint /></span>
|
<span slot="icon"><IconPoint /></span>
|
||||||
<span>{$gameData.data.district}</span>
|
<span>{'$data.district'}</span>
|
||||||
</Bubble>
|
</Bubble>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Section title="Popis">
|
<Section title="Popis">
|
||||||
<span>
|
<span>
|
||||||
{@html $gameData.data.start}
|
{@html $data.ExpIntroduction}
|
||||||
</span>
|
</span>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section title="Fotky">
|
<Section title="Fotky">
|
||||||
<div class="w-full relative">
|
<div class="w-full relative">
|
||||||
<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
|
<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
|
||||||
<ImageSlider images={assets} />
|
<!--<ImageSlider images={assets} />-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<div class="w-full relative">
|
<div class="w-full relative">
|
||||||
<div class="px-4 m-auto" style="max-width: var(--max-viewport-width);">
|
<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 }}>
|
<Map radius class="w-full h-44" center={{ lng: $data.ExpLocation[0], lat: $data.ExpLocation[1] }}>
|
||||||
{#each $gameData.data.questions as { lat, lng }}
|
{#each $data.checkPoints as { CPLocation: [lat, lng] }}
|
||||||
<Marker {lat} {lng} />
|
<Marker {lat} {lng} />
|
||||||
{/each}
|
{/each}
|
||||||
<GeolocateControl
|
|
||||||
on:geolocate={(e) => {
|
|
||||||
const { latitude, longitude } = e.detail.coords
|
|
||||||
const user = { lat: latitude, lng: longitude }
|
|
||||||
console.log(user)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Map>
|
</Map>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -95,7 +95,9 @@
|
||||||
<Redirect replace to="/error" />
|
<Redirect replace to="/error" />
|
||||||
{/if}
|
{/if}
|
||||||
{:else if view === 'game-play'}
|
{:else if view === 'game-play'}
|
||||||
<Renderer gameData={$data} />
|
{#if !loading}
|
||||||
|
<Renderer gameData={$data} />
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
Loading…
Reference in New Issue