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

Ota/fix #37

Merged
Ota-Prokopec merged 3 commits from ota/fix into master 2022-12-10 17:58:44 +00:00
Conversation 0 Commits 3 Files Changed 9 +65 -71
6 changed files with 65 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4b1bd3c5dd - Show all commits

14
src/lib/Components/Layouts/NavigationBarLayout.svelte
View File

@ -40,24 +40,14 @@
"data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ", "data:image/svg+xml,%3Csvg width='19' height='24' viewBox='0 0 19 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='19' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.166626 14.9121H18.6465V23.5151H0.166626V14.9121Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40767 16.6621C4.4365 16.6621 1.9165 17.5161 1.9165 19.2019C1.9165 20.9029 4.4365 21.7651 9.40767 21.7651C14.3777 21.7651 16.8965 20.9111 16.8965 19.2253C16.8965 17.5243 14.3777 16.6621 9.40767 16.6621ZM9.40767 23.5151C7.12217 23.5151 0.166504 23.5151 0.166504 19.2019C0.166504 15.3566 5.441 14.9121 9.40767 14.9121C11.6932 14.9121 18.6465 14.9121 18.6465 19.2253C18.6465 23.0706 13.3732 23.5151 9.40767 23.5151Z' fill='%2361646B'/%3E%3C/g%3E%3Cmask id='mask1_1515_2027' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='0' width='13' height='13'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21143 0.333008H15.6015V12.7214H3.21143V0.333008Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_1515_2027)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.40763 1.99901C6.9098 1.99901 4.87746 4.03017 4.87746 6.52801C4.8693 9.01767 6.88646 11.0477 9.3738 11.057L9.40763 11.89V11.057C11.9043 11.057 13.9355 9.02467 13.9355 6.52801C13.9355 4.03017 11.9043 1.99901 9.40763 1.99901ZM9.40763 12.7218H9.3703C5.9613 12.7113 3.1998 9.93117 3.21146 6.52451C3.21146 3.11201 5.99046 0.333008 9.40763 0.333008C12.8236 0.333008 15.6015 3.11201 15.6015 6.52801C15.6015 9.94401 12.8236 12.7218 9.40763 12.7218Z' fill='%2361646B'/%3E%3C/g%3E%3C/svg%3E ",
}, },
] ]
$: console.log(items)
</script> </script>
<div class="h-full w-full absolute"> <div class="h-full w-full absolute">
<div class="section w-full h-[calc(100%-100px)] overflow-auto"><slot /></div> <div class="section w-full h-[calc(100%-100px)] overflow-auto"><slot /></div>
<div class="footer"> <div class="footer">
{#each items as { active, name, url, image_url }} {#each items as { active, name, url, image_url }}
<FooterItem <FooterItem on:click={() => navigate(url)} {active} {name} {url}>
on:click={() => { {#if location.pathname === url}
navigate(url)
items.forEach((i) => (i.active = false))
active = true
}}
{active}
{name}
{url}
>
{#if active}
<img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} /> <img alt="" style="filter: invert(44%) sepia(66%) saturate(6619%) hue-rotate(222deg) brightness(98%) contrast(88%);" src={image_url} />
{:else} {:else}
<img alt="" src={image_url} /> <img alt="" src={image_url} />

69
src/lib/Components/Map/Erantmap.svelte
View File

@ -1,42 +1,51 @@
<script> <script>
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'
export let center = { lat: null, lng: null } export let center = { lat: null, lng: null }
export let mapComponent export let mapComponent
export let user export let user = { lat: null, lng: null }
let className = ''
export { className as class }
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition)
} else {
alert("Can't load your location!")
}
function showPosition(position) {
user.lat = position.coords.latitude
user.lng = position.coords.longitude
}
</script> </script>
<NavigationBarLayout> <Map {center} bind:mapComponent class={className} on:move>
<Map {center} bind:mapComponent bind:user class="w-full h-full" on:move={console.log}> <slot />
<slot name="mapslot" /> </Map>
</Map>
<div class="on"> <div class="on">
<button on:click={() => navigate('/scanner')}> <button on:click={() => navigate('/scanner')}>
<svg viewBox="0 0 52 52" 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="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" 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>
<button on:click={() => mapComponent.flyTo({ center: [center.lng, center.lat] })}> <button on:click={() => mapComponent.setCenter([user.lng, user.lat], 14)}>
<svg viewBox="0 0 29 39" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 29 39" 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="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" fill="#4263EB"
/> />
</svg> </svg>
</button> </button>
</div> </div>
</NavigationBarLayout>
<style> <style>
.on { .on {

10
src/lib/Components/Map/Map.svelte
View File

@ -6,13 +6,9 @@
let className = '' let className = ''
export { className as class } export { className as class }
export let user = { lat: 0, lng: 0 }
const dispatch = createEventDispatcher()
export let radius = false export let radius = false
export let center = { lng: 0, lat: 0 } export let center = { lng: 0, lat: 0 }
export const geo = (e) => { /*export const geo = (e) => {
geolocateControl.dispatchEvent('geolocate') geolocateControl.dispatchEvent('geolocate')
if (navigator.geolocation) { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => { navigator.geolocation.getCurrentPosition((position) => {
@ -23,7 +19,7 @@
} else { } else {
alert("Can't load your location!") alert("Can't load your location!")
} }
} }*/
</script> </script>
<div class={className} class:radius> <div class={className} class:radius>
@ -38,7 +34,7 @@
}} }}
zoom={14} zoom={14}
> >
<slot {user} /> <slot />
</Map> </Map>
</div> </div>

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

@ -9,8 +9,7 @@
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 GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte' import Erantmap from '$src/lib/Components/Map/Erantmap.svelte'
import Map from '$lib/Components/Map/Map.svelte'
const components = { const components = {
TEXT: TextForm, TEXT: TextForm,
@ -67,19 +66,14 @@
let lat = Number.parseFloat($data.questions[clientAnswers.pos].lat) let lat = Number.parseFloat($data.questions[clientAnswers.pos].lat)
let lng = Number.parseFloat($data.questions[clientAnswers.pos].lng) let lng = Number.parseFloat($data.questions[clientAnswers.pos].lng)
export let user = { lat: 0, lng: 0 }
</script> </script>
{#if !startQuestion} {#if !startQuestion}
<Map center={{ lat, lng }} class="w-full h-full" let:user> <Erantmap center={{ lat, lng }} bind:user class="w-full h-full">
<Circle on:enter={() => (startQuestion = true)} {lat} {lng} {user} /> <Circle on:enter={() => (startQuestion = true)} {lat} {lng} {user} />
<GeolocateControl </Erantmap>
on:geolocate={(e) => {
const { latitude, longitude } = e.detail.coords
const user = { lat: latitude, lng: longitude }
console.log(user)
}}
/>
</Map>
{/if} {/if}
{#if page && startQuestion} {#if page && startQuestion}

10
src/routes/game/game.svelte
View File

@ -10,7 +10,7 @@
import * as api from '../../lib/utils/api' import * as api from '../../lib/utils/api'
import { data } from '../../lib/stores/game' import { data } from '../../lib/stores/game'
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 '../../lib/Components/Map/Erantmap.svelte' import Map from '../../lib/Components/Map/Map.svelte'
import FullWidthRow from '../../lib/Components/common/FullWidthRow.svelte' import FullWidthRow from '../../lib/Components/common/FullWidthRow.svelte'
import Renderer from './Forms/Renderer.svelte' import Renderer from './Forms/Renderer.svelte'
import Redirect from '../../lib/Components/common/Redirect.svelte' import Redirect from '../../lib/Components/common/Redirect.svelte'
@ -59,14 +59,14 @@
</Section> </Section>
<Section title="Fotky"> <Section title="Fotky">
<FullWidthRow> <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>
</FullWidthRow> </div>
</Section> </Section>
<FullWidthRow> <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: $gameData.data.lng, lat: $gameData.data.lat }}>
{#each $gameData.data.questions as { lat, lng }} {#each $gameData.data.questions as { lat, lng }}
@ -81,7 +81,7 @@
/> />
</Map> </Map>
</div> </div>
</FullWidthRow> </div>
<Button on:click={() => (view = 'game-play')} primary>Hrát</Button> <Button on:click={() => (view = 'game-play')} primary>Hrát</Button>
</Overlay> </Overlay>

17
src/routes/map.svelte
View File

@ -1,17 +1,22 @@
<script> <script>
import Erantmap from '$lib/Components/Map/Erantmap.svelte' import Erantmap from '$lib/Components/Map/Erantmap.svelte'
import NavigationBarLayout from '$lib/Components/Layouts/NavigationBarLayout.svelte'
let center = { lat: null, lng: null }
if (navigator.geolocation) { if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition) navigator.geolocation.getCurrentPosition(showPosition)
} else { } else {
alert("Can't load your location!") alert("Can't load your location!")
} }
let lat = null
let lng = null
function showPosition(position) { function showPosition(position) {
lat = position.coords.latitude center.lat = position.coords.latitude
lng = position.coords.longitude center.lng = position.coords.longitude
} }
</script> </script>
<Erantmap center={{ lat, lng }} /> <NavigationBarLayout>
{#if center}
<Erantmap {center} />
{/if}
</NavigationBarLayout>