Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

mapa, auto center,wrontRightfix, games - fix

This commit is contained in:
Ota Prokopec 2023-03-03 18:25:24 +01:00
parent be3bb2b3a0
commit acc5a91405
7 changed files with 95 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -4,7 +4,7 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --host 0.0.0.0", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
"appwrite": "docker compose -f ./appwrite/docker-compose.yml up" "appwrite": "docker compose -f ./appwrite/docker-compose.yml up"

74
src/lib/components/Map/Erantmap.svelte
View File

@ -2,9 +2,10 @@
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 Map from './Map.svelte' import Map from './Map.svelte'
import { navigate } from 'svelte-routing' import { navigate } from 'svelte-routing'
import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
import { onMount } from 'svelte'
export let center export let center = null
$: console.log(center)
export let mapComponent = null export let mapComponent = null
export let user = { lat: null, lng: null } export let user = { lat: null, lng: null }
@ -20,42 +21,47 @@
function showPosition(position) { function showPosition(position) {
user.lat = position.coords.latitude user.lat = position.coords.latitude
user.lng = position.coords.longitude user.lng = position.coords.longitude
if (!center) center = user
} }
const userCenter = () => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
</script> </script>
<Map {center} bind:mapComponent class={className} on:move> <NavigationBarLayout>
<slot /> {#if center}
<GeolocateControl <Map on:ready={() => setTimeout(() => userCenter(), 40)} {center} bind:mapComponent class={className} on:move>
on:geolocate={(e) => { <slot />
const { latitude, longitude } = e.detail.coords <GeolocateControl
user = { lat: latitude, lng: longitude } on:geolocate={(e) => {
//console.log(user) const { latitude, longitude } = e.detail.coords
}} user = { lat: latitude, lng: longitude }
/> }}
</Map>
<div class="on">
<button on:click={() => navigate('/scanner')}>
<svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z"
fill="#4263EB"
/> />
</svg> </Map>
</button> <div class="on">
<button on:click={() => document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()}> <button on:click={() => navigate('/scanner')}>
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
fill-rule="evenodd" fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M0.758179 14.1551C0.758179 6.53234 6.92333 0.367188 14.5461 0.367188C22.1688 0.367188 28.3339 6.53234 28.3339 14.1551C28.3339 22.3687 19.6279 33.6945 16.0627 38.0081C15.2748 38.9536 13.837 38.9536 13.0491 38.0081C9.46424 33.6945 0.758179 22.3687 0.758179 14.1551ZM9.62182 14.1551C9.62182 16.8733 11.8279 19.0793 14.5461 19.0793C17.2642 19.0793 19.4703 16.8733 19.4703 14.1551C19.4703 11.4369 17.2642 9.23083 14.5461 9.23083C11.8279 9.23083 9.62182 11.4369 9.62182 14.1551Z" d="M5.77778 8.66765C5.77778 7.07876 7.07778 5.77876 8.66667 5.77876H14.4445C16.0333 5.77876 17.3333 4.47876 17.3333 2.88987C17.3333 1.30098 16.0333 0.000976562 14.4445 0.000976562H5.77778C2.6 0.000976562 0 2.60098 0 5.77876V14.4454C0 16.0343 1.3 17.3343 2.88889 17.3343C4.47778 17.3343 5.77778 16.0343 5.77778 14.4454V8.66765ZM2.88889 34.666C1.3 34.666 0 35.966 0 37.5549V46.2216C0 49.3994 2.6 51.9994 5.77778 51.9994H14.4445C16.0333 51.9994 17.3333 50.6994 17.3333 49.1105C17.3333 47.5216 16.0333 46.2216 14.4445 46.2216H8.66667C7.07778 46.2216 5.77778 44.9216 5.77778 43.3327V37.5549C5.77778 35.966 4.47778 34.666 2.88889 34.666ZM37.5553 0.000976562H46.222C49.3998 0.000976562 51.9998 2.60098 51.9998 5.77876V14.4454C51.9998 16.0343 50.6998 17.3343 49.1109 17.3343C47.522 17.3343 46.222 16.0343 46.222 14.4454V8.66765C46.222 7.07876 44.922 5.77876 43.3331 5.77876H37.5553C35.9664 5.77876 34.6664 4.47876 34.6664 2.88987C34.6664 1.30098 35.9664 0.000976562 37.5553 0.000976562ZM46.2221 43.3327C46.2221 44.9216 44.9221 46.2216 43.3332 46.2216H37.5554C35.9665 46.2216 34.6665 47.5216 34.6665 49.1105C34.6665 50.6994 35.9665 51.9994 37.5554 51.9994H46.2221C49.3998 51.9994 51.9998 49.3994 51.9998 46.2216V37.5549C51.9998 35.966 50.6998 34.666 49.111 34.666C47.5221 34.666 46.2221 35.966 46.2221 37.5549V43.3327ZM28.8881 23.1085H23.1104V28.8838H17.3345V34.6616H23.1123V28.8862H28.8881V23.1085ZM23.1123 28.8862V28.8838H23.1104V28.8862H23.1123ZM28.8912 28.8838H34.6689V34.6616H28.8912V28.8838ZM34.669 17.3302H28.8913V23.108H34.669V17.3302ZM17.3345 17.3301H23.1123V23.1079H17.3345V17.3301Z"
fill="#4263EB" fill="#4263EB"
/> />
</svg> </svg>
</button> </button>
</div> <button on:click={() => userCenter()}>
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.758179 14.1551C0.758179 6.53234 6.92333 0.367188 14.5461 0.367188C22.1688 0.367188 28.3339 6.53234 28.3339 14.1551C28.3339 22.3687 19.6279 33.6945 16.0627 38.0081C15.2748 38.9536 13.837 38.9536 13.0491 38.0081C9.46424 33.6945 0.758179 22.3687 0.758179 14.1551ZM9.62182 14.1551C9.62182 16.8733 11.8279 19.0793 14.5461 19.0793C17.2642 19.0793 19.4703 16.8733 19.4703 14.1551C19.4703 11.4369 17.2642 9.23083 14.5461 9.23083C11.8279 9.23083 9.62182 11.4369 9.62182 14.1551Z"
fill="#4263EB"
/>
</svg>
</button>
</div>
{/if}
</NavigationBarLayout>
<style> <style>
.on { .on {

3
src/lib/components/Map/Map.svelte
View File

@ -2,6 +2,7 @@
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'
const dispatch = createEventDispatcher()
export let mapComponent = null export let mapComponent = null
let geolocateControl let geolocateControl
let className = '' let className = ''
@ -21,7 +22,6 @@
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>
@ -33,6 +33,7 @@
on:ready={() => { on:ready={() => {
mapComponent.resize() mapComponent.resize()
mapComponent.setCenter([center.lng, center.lat], 14) mapComponent.setCenter([center.lng, center.lat], 14)
dispatch('ready')
}} }}
zoom={14} zoom={14}
> >

4
src/routes/game/Components/Layout.svelte
View File

@ -34,9 +34,9 @@
<div class="w-full relative bottom-[170px] flex justify-center h-fit size"> <div class="w-full relative bottom-[170px] flex justify-center h-fit size">
{#if control === 'not-control' || control === null} {#if control === 'not-control' || control === null}
<span /> <span />
{:else if control} {:else if control === true}
<span style="color:greenyellow">správně</span> <span style="color:greenyellow">správně</span>
{:else} {:else if control === false}
<span style="color:red">špatně</span> <span style="color:red">špatně</span>
{/if} {/if}
</div> </div>

37
src/routes/game/Forms/Renderer.svelte
View File

@ -23,7 +23,7 @@
} }
let control = null // if true => spravne if false spatne let control = null // if true => spravne if false spatne
let view: 'question' | 'map' = 'map' let view: 'question' | 'map' | 'end' = 'map'
export let gameData: any = {} //data export let gameData: any = {} //data
$: console.log(gameData) $: console.log(gameData)
@ -31,32 +31,37 @@
let clientAnswers = { let clientAnswers = {
//user data about game //user data about game
pos: 0, pos: 0,
end: gameData.checkPoints.length, //kolik otázek end: gameData.checkPoints.length - 1, //kolik otázek
points: 0, //body points: 0, //body
} }
$: console.log(clientAnswers.pos === clientAnswers.end + 1)
$: if (control === true) clientAnswers.points += 2 //body bodování $: if (control === true) clientAnswers.points += 2 //body bodování
const nextQuestion = () => { const nextQuestion = () => {
//další otázka //další otázka
if (control !== null) { if (control !== null) {
control = null control = null
clientAnswers.pos++ if (clientAnswers.pos === clientAnswers.end) view = 'end'
view = 'map' else {
clientAnswers.pos++
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 = null let page = null
$: if (clientAnswers.pos < clientAnswers.end) page = components[gameData.checkPoints[clientAnswers.pos].CPType] $: page = view === 'question' ? components[gameData.checkPoints[clientAnswers.pos].CPType] : null
let [lat, lng] = [null, null] let [lat, lng] = [null, null]
$: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation $: if (clientAnswers.pos < clientAnswers.end) [lat, lng] = $data.checkPoints[clientAnswers.pos].CPLocation
let user = { lat: null, lng: null } let user = { lat: null, lng: null }
$: console.log(page, gameData.checkPoints[clientAnswers.pos].CPType) $: console.log(gameData.checkPoints[clientAnswers.pos].CPType, clientAnswers.pos, view)
/* //set user to localstorage /* //set user to localstorage
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) { $: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
@ -76,18 +81,20 @@
}*/ }*/
</script> </script>
{#if page && view === 'map'} <input type="number" bind:value={clientAnswers.pos} />
<Erantmap center={{ lat, lng }} bind:user class="w-full h-full"> <button on:click={() => (view = 'question')}>disappear map</button>
{#if view === 'map'}
<Erantmap bind:user class="w-full h-full">
<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} /> <Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
</Erantmap> </Erantmap>
{/if} {/if}
{#if view === 'question'} {#if view === 'question'}
{#if clientAnswers.pos !== clientAnswers.end} <svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control /> {/if}
{:else} {#if view === 'end'}
<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>
</Finish> </Finish>
{/if}
{/if} {/if}

14
src/routes/register/emailVerification.svelte Normal file
View File

@ -0,0 +1,14 @@
<script>
//register email verification
const urlParams = new URLSearchParams(location.search)
const userId = urlParams.get('userId')
const secret = urlParams.get('secret')
;(async () => {
try {
await account.updateVerification(userId, secret)
navigate('/')
} catch (err) {
console.log(err)
}
})()
</script>

35
src/routes/register/register.svelte
View File

@ -1,33 +1,26 @@
<script> <script>
import { account } from '$lib/appwrite' import { account, user } from '$lib/appwrite'
import Error from '$root/src/__error.svelte'
import { ID } from 'appwrite' import { ID } from 'appwrite'
import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte' import HiddenInput from '../../lib/components/Inputs/Hidden_Input.svelte'
import GoogleLogo from '../../lib/svg/GoogleLogo.svelte' import GoogleLogo from '../../lib/svg/GoogleLogo.svelte'
import TopImage from '../../lib/svg/Top-Image.svelte' import TopImage from '../../lib/svg/Top-Image.svelte'
let email = '' let email = 'otaprokopec@gmail.com'
let password = '' let password = 'aaaaaaaa'
let repeatPassword = '' let repeatPassword = 'aaaaaaaa'
let name = '' let name = 'test'
const register = async () => { const register = async () => {
//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine') //if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
await account.create(ID.unique(), email, password, name)
await account.createEmailSession(email, password, name)
await account.createVerification(`${location.origin}/`)
}
//register email verification
/*const urlParams = new URLSearchParams(location.search)
const userId = urlParams.get('userId')
const secret = urlParams.get('secret')
;(async () => {
try { try {
await account.updateVerification(userId, secret) await account.create(ID.unique(), email, password, name)
navigate('/') await account.createEmailSession(email, password)
} catch (err) { await account.createVerification(`${location.origin}/`)
console.log(err) } catch (error) {
console.log(error)
} }
})()*/ }
</script> </script>
<div class="main"> <div class="main">
@ -43,7 +36,7 @@
<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required /> <input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
<HiddenInput bind:value={password} placeholder="Password" /> <HiddenInput bind:value={password} placeholder="Password" />
<HiddenInput bind:value={repeatPassword} placeholder="Re-type password" /> <HiddenInput bind:value={repeatPassword} placeholder="Re-type password" />
<input class="cursor-pointer" on:click={() => register()} type="submit" value="Sign up" /> <input class="cursor-pointer" on:click={() => register()} type="button" value="Sign up" />
</form> </form>
</div> </div>
@ -193,7 +186,7 @@
line-height: 28px; line-height: 28px;
} }
input[type='submit'] { input[type='button'] {
background-color: #4263eb; background-color: #4263eb;
color: white; color: white;