MVP #6.1 #82
76
index.html
76
index.html
|
@ -1,66 +1,80 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
|
||||||
|
/>
|
||||||
<title>Erant</title>
|
<title>Erant</title>
|
||||||
|
|
||||||
<!-- Serviceworker registration -->
|
<!-- Serviceworker registration -->
|
||||||
<script>
|
<script>
|
||||||
// if (typeof navigator.serviceWorker !== 'undefined') {
|
if (typeof navigator.serviceWorker !== 'undefined') {
|
||||||
// navigator.serviceWorker.register('serviceworker.js')
|
navigator.serviceWorker.register('servicewworker.js')
|
||||||
// }
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Meta Pixel Code -->
|
<!-- Meta Pixel Code -->
|
||||||
<script>
|
<script>
|
||||||
!function(f,b,e,v,n,t,s)
|
!(function (f, b, e, v, n, t, s) {
|
||||||
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
|
if (f.fbq) return
|
||||||
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
|
n = f.fbq = function () {
|
||||||
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
|
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
||||||
n.queue=[];t=b.createElement(e);t.async=!0;
|
}
|
||||||
t.src=v;s=b.getElementsByTagName(e)[0];
|
if (!f._fbq) f._fbq = n
|
||||||
s.parentNode.insertBefore(t,s)}(window, document,'script',
|
n.push = n
|
||||||
'https://connect.facebook.net/en_US/fbevents.js');
|
n.loaded = !0
|
||||||
fbq('init', '541491674547104');
|
n.version = '2.0'
|
||||||
fbq('track', 'PageView');
|
n.queue = []
|
||||||
|
t = b.createElement(e)
|
||||||
|
t.async = !0
|
||||||
|
t.src = v
|
||||||
|
s = b.getElementsByTagName(e)[0]
|
||||||
|
s.parentNode.insertBefore(t, s)
|
||||||
|
})(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js')
|
||||||
|
fbq('init', '541491674547104')
|
||||||
|
fbq('track', 'PageView')
|
||||||
</script>
|
</script>
|
||||||
<noscript><img height="1" width="1" style="display:none"
|
<noscript><img height="1" width="1" style="display: none" src="https://www.facebook.com/tr?id=541491674547104&ev=PageView&noscript=1" /></noscript>
|
||||||
src="https://www.facebook.com/tr?id=541491674547104&ev=PageView&noscript=1"
|
|
||||||
/></noscript>
|
|
||||||
<!-- End Meta Pixel Code -->
|
<!-- End Meta Pixel Code -->
|
||||||
|
|
||||||
<!-- Google tag (gtag.js) -->
|
<!-- Google tag (gtag.js) -->
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8RCL0H1Q7V"></script>
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8RCL0H1Q7V"></script>
|
||||||
<script>
|
<script>
|
||||||
window.dataLayer = window.dataLayer || [];
|
window.dataLayer = window.dataLayer || []
|
||||||
function gtag(){dataLayer.push(arguments);}
|
function gtag() {
|
||||||
gtag('js', new Date());
|
dataLayer.push(arguments)
|
||||||
|
}
|
||||||
|
gtag('js', new Date())
|
||||||
|
|
||||||
gtag('config', 'G-8RCL0H1Q7V');
|
gtag('config', 'G-8RCL0H1Q7V')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Google Tag Manager -->
|
<!-- Google Tag Manager -->
|
||||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
<script>
|
||||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
;(function (w, d, s, l, i) {
|
||||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
w[l] = w[l] || []
|
||||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
|
||||||
})(window,document,'script','dataLayer','GTM-WLHVPKW');</script>
|
var f = d.getElementsByTagName(s)[0],
|
||||||
|
j = d.createElement(s),
|
||||||
|
dl = l != 'dataLayer' ? '&l=' + l : ''
|
||||||
|
j.async = true
|
||||||
|
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
|
||||||
|
f.parentNode.insertBefore(j, f)
|
||||||
|
})(window, document, 'script', 'dataLayer', 'GTM-WLHVPKW')
|
||||||
|
</script>
|
||||||
<!-- End Google Tag Manager -->
|
<!-- End Google Tag Manager -->
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Google Tag Manager (noscript) -->
|
<!-- Google Tag Manager (noscript) -->
|
||||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLHVPKW"
|
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLHVPKW" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
|
||||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
||||||
<!-- End Google Tag Manager (noscript) -->
|
<!-- End Google Tag Manager (noscript) -->
|
||||||
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -25,7 +25,7 @@ export type Experience = {
|
||||||
$permissions: string
|
$permissions: string
|
||||||
$updatedAt: string
|
$updatedAt: string
|
||||||
ExpApproved: boolean
|
ExpApproved: boolean
|
||||||
ExpCpsID: string[]
|
ExpCPsID: string[]
|
||||||
ExpCategory?: string
|
ExpCategory?: string
|
||||||
ExpEnd0: string
|
ExpEnd0: string
|
||||||
ExpEnd60: string
|
ExpEnd60: string
|
||||||
|
|
|
@ -41,6 +41,11 @@
|
||||||
color: white;
|
color: white;
|
||||||
background-color: rgb(66, 99, 235);
|
background-color: rgb(66, 99, 235);
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
&:hover {
|
||||||
|
background-color: rgb(107 114 128);
|
||||||
|
}
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(66, 99, 235, 0.8);
|
background-color: rgba(66, 99, 235, 0.8);
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,8 +34,8 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: 25%;
|
top: -10%;
|
||||||
border-radius: 70px 70px 0 0;
|
border-radius: 70px 70px 0 0;
|
||||||
padding: 52px;
|
padding: 52px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -49,7 +49,7 @@
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
position: absolute;
|
position: relative;
|
||||||
}
|
}
|
||||||
.shareButton {
|
.shareButton {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -1,15 +1,18 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
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 NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
|
||||||
import { createEventDispatcher, onMount } from 'svelte'
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
|
import LocationRequest from './LocationRequest.svelte'
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
export let center = null
|
export let center = null
|
||||||
|
|
||||||
export let mapComponent = null
|
export let mapComponent = null
|
||||||
export let user = { lat: null, lng: null }
|
export let user = { lat: 0, lng: 0 }
|
||||||
|
|
||||||
|
$: console.log(user, center)
|
||||||
|
|
||||||
let className = ''
|
let className = ''
|
||||||
export { className as class }
|
export { className as class }
|
||||||
|
@ -20,8 +23,13 @@
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})()*/
|
})()*/
|
||||||
navigator.geolocation.getCurrentPosition((e) => {})
|
|
||||||
|
|
||||||
|
navigator.geolocation.getCurrentPosition((position: GeolocationPosition) => {
|
||||||
|
if (!user) user = { lat: position.coords.latitude, lng: position.coords.longitude }
|
||||||
|
if (!center) center = { lat: position.coords.latitude, lng: position.coords.longitude }
|
||||||
|
}) //at mapbox this is required dont know why
|
||||||
|
|
||||||
|
$: if (!center) center = user
|
||||||
/* if (navigator.geolocation) {
|
/* if (navigator.geolocation) {
|
||||||
navigator.geolocation.watchPosition(showPosition, () => dispatch('locationFailed'))
|
navigator.geolocation.watchPosition(showPosition, () => dispatch('locationFailed'))
|
||||||
} else {
|
} else {
|
||||||
|
@ -34,16 +42,22 @@
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
const userCenter = () => {
|
const userCenter = () => {
|
||||||
|
// @ts-ignore
|
||||||
document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
|
document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<LocationRequest />
|
||||||
|
|
||||||
<NavigationBarLayout>
|
<NavigationBarLayout>
|
||||||
{#if center}
|
{#if center}
|
||||||
<Map on:ready={() => setTimeout(() => setInterval(() => userCenter(), 1000), 100)} {center} bind:mapComponent class={className} on:move>
|
<Map on:ready={() => setTimeout(() => userCenter(), 100)} {center} bind:mapComponent class={className} on:move>
|
||||||
<slot />
|
<slot />
|
||||||
<GeolocateControl
|
<GeolocateControl
|
||||||
|
options={{ trackUserLocation: true }}
|
||||||
|
on:trackuserlocationstart={() => {}}
|
||||||
on:geolocate={(e) => {
|
on:geolocate={(e) => {
|
||||||
|
// @ts-ignore
|
||||||
const { latitude, longitude } = e.detail.coords
|
const { latitude, longitude } = e.detail.coords
|
||||||
user = { lat: latitude, lng: longitude }
|
user = { lat: latitude, lng: longitude }
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -13,7 +13,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if granted === false}
|
{#if granted === false}
|
||||||
<Alert class="absolute w-[95%] max-w-[400px] z-50 mt-4" color="green">
|
<div class="w-full justify-center flex absolute">
|
||||||
|
<Alert class="w-[95%] max-w-[400px] z-50 mt-4" color="green">
|
||||||
<span class="text-lg font-medium">This is a info alert</span>
|
<span class="text-lg font-medium">This is a info alert</span>
|
||||||
<div slot="extra">
|
<div slot="extra">
|
||||||
<div class="mt-2 mb-4 text-sm">To advance through your experience you need to enable the location access, without it the app won't work.</div>
|
<div class="mt-2 mb-4 text-sm">To advance through your experience you need to enable the location access, without it the app won't work.</div>
|
||||||
|
@ -22,6 +23,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Alert>
|
</Alert>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<!--{#if state === 'granted'}
|
<!--{#if state === 'granted'}
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
|
|
||||||
export let radius = false
|
export let radius = false
|
||||||
export let center: { lng: number; lat: number } = { lng: 0, lat: 0 }
|
export let center: { lng: number; lat: number } = { lng: 0, lat: 0 }
|
||||||
$: console.log(center)
|
|
||||||
|
|
||||||
/*export const geo = (e) => {
|
/*export const geo = (e) => {
|
||||||
geolocateControl.dispatchEvent('geolocate')
|
geolocateControl.dispatchEvent('geolocate')
|
||||||
|
@ -37,6 +36,7 @@
|
||||||
mapComponent.setCenter([center.lng, center.lat], 14)
|
mapComponent.setCenter([center.lng, center.lat], 14)
|
||||||
dispatch('ready')
|
dispatch('ready')
|
||||||
}}
|
}}
|
||||||
|
on:recentre={(e) => {}}
|
||||||
zoom={14}
|
zoom={14}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
@ -11,7 +11,7 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const experience: Experience = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
|
const experience: Experience = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
|
||||||
|
|
||||||
const checkPointsIds = experience.ExpCpsID
|
const checkPointsIds = experience.ExpCPsID
|
||||||
const rating = await getRating(experience.$id)
|
const rating = await getRating(experience.$id)
|
||||||
|
|
||||||
for (const checkPointId of checkPointsIds) {
|
for (const checkPointId of checkPointsIds) {
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
import TopImage from '$lib/svg/Top-Image.svelte'
|
import TopImage from '$lib/svg/Top-Image.svelte'
|
||||||
import { Helper } from 'flowbite-svelte'
|
import { Helper } from 'flowbite-svelte'
|
||||||
import { getErrorMessage } from '../utils/authorizationErrors'
|
import { getErrorMessage } from '../utils/authorizationErrors'
|
||||||
|
import Button from '$lib/components/Buttons/Button.svelte'
|
||||||
|
|
||||||
export let purpose = 'login' //possible values login, register
|
export let purpose = 'login' //possible values login, register
|
||||||
|
|
||||||
|
@ -58,13 +59,13 @@
|
||||||
<div class="forgot_password">
|
<div class="forgot_password">
|
||||||
<a href="/forgot-password">Forgot password?</a>
|
<a href="/forgot-password">Forgot password?</a>
|
||||||
</div>
|
</div>
|
||||||
<button class="loginButton" on:click={() => emailLogin()}>
|
<Button class="w-full text-2xl" primary disabled={password.length < 8} on:click={() => emailLogin()}>
|
||||||
{#if state === 'loading'}
|
{#if state === 'loading'}
|
||||||
<Loading class="text-white" />
|
<Loading class="text-white" />
|
||||||
{:else}
|
{:else}
|
||||||
Sign in
|
Log in
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -30,11 +30,14 @@
|
||||||
err['code'] = 1001
|
err['code'] = 1001
|
||||||
throw err
|
throw err
|
||||||
}
|
}
|
||||||
|
|
||||||
await account.create(ID.unique(), email, password, name)
|
await account.create(ID.unique(), email, password, name)
|
||||||
await account.createEmailSession(email, password)
|
await account.createEmailSession(email, password)
|
||||||
await account.createVerification(`${location.origin}/register/emailverification/${erantId}`)
|
await account.createVerification(`${location.origin}/register/emailverification/${erantId}`)
|
||||||
state = 'email-sent'
|
state = 'email-sent'
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
console.log(err)
|
||||||
|
|
||||||
error = getErrorMessage(err.code)
|
error = getErrorMessage(err.code)
|
||||||
state = 'register'
|
state = 'register'
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ export const errors = {
|
||||||
1001: 'Nickname is already taken',
|
1001: 'Nickname is already taken',
|
||||||
409: 'A user with the same email already is in Erant',
|
409: 'A user with the same email already is in Erant',
|
||||||
401: 'Invalid credentials.',
|
401: 'Invalid credentials.',
|
||||||
400: 'Password must be at least 8 characters.',
|
400: 'Email musts be valid.',
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getErrorMessage = (code: number) => {
|
export const getErrorMessage = (code: number) => {
|
||||||
|
|
|
@ -4,8 +4,10 @@
|
||||||
import Top from './Components/Top.svelte'
|
import Top from './Components/Top.svelte'
|
||||||
import { getExperiences } from '$lib/utils/database/experience'
|
import { getExperiences } from '$lib/utils/database/experience'
|
||||||
import Loading from '$lib/components/Common/Loading.svelte'
|
import Loading from '$lib/components/Common/Loading.svelte'
|
||||||
|
import Comparment from '../homepage/Components/Comparment.svelte'
|
||||||
|
|
||||||
let Search: string
|
let Search: string
|
||||||
|
//
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
@ -17,9 +19,7 @@
|
||||||
<Loading />
|
<Loading />
|
||||||
</div>
|
</div>
|
||||||
{:then expiriences}
|
{:then expiriences}
|
||||||
{#each expiriences as result}
|
<Comparment direction="col" items={expiriences} />
|
||||||
<Result name={result.name} location={result.location} link={result.link} />
|
|
||||||
{/each}
|
|
||||||
{/await}
|
{/await}
|
||||||
|
|
||||||
<div class="end" />
|
<div class="end" />
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
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'
|
||||||
import Image from '../../../lib/components/Common/Image.svelte'
|
import Image from '$lib/components/Common/Image.svelte'
|
||||||
|
import { createEventDispatcher } from 'svelte'
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
|
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
|
||||||
export let nextQuestion
|
|
||||||
export let imgSrc
|
export let imgSrc
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -19,36 +20,33 @@
|
||||||
<Section style="height: calc(100% - var(--quizHeader)); position: relative">
|
<Section style="height: calc(100% - var(--quizHeader)); position: relative">
|
||||||
<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
|
<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
|
||||||
<div class="popis">
|
<div class="popis">
|
||||||
<span> Popis úkolu: </span>
|
|
||||||
<span> <slot name="about" /></span>
|
<span> <slot name="about" /></span>
|
||||||
</div>
|
</div>
|
||||||
{#if control === 'wrong-firstTime' || control === 'wrong-secondTime'}
|
|
||||||
<div class="popis">
|
|
||||||
<span> Nápověda: </span>
|
|
||||||
<span> <slot name="hint" /></span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="flex items-center justify-center flex-col w-full gap-6">
|
<div class="flex items-center justify-center flex-col w-full gap-6">
|
||||||
<span class="relative"> <slot name="answers" /> </span>
|
<span class="relative"> <slot name="answers" /> </span>
|
||||||
|
<div class="w-full relative flex justify-center h-fit size">
|
||||||
|
{#if control === 'not-control' || control === null}
|
||||||
|
<span />
|
||||||
|
{:else if control === 'wrong-secondTime' || control === 'correct'}
|
||||||
|
<div class="flex w-auto h-auto flex-wrap flex-col items-center gap-2">
|
||||||
|
<span class={`${control === 'correct' ? 'text-green-500' : 'text-red-500'}`}>{control === 'correct' ? 'správně' : 'špatně'}</span>
|
||||||
|
<span> <slot name="after" /></span>
|
||||||
|
</div>
|
||||||
|
{:else if control === 'wrong-firstTime'}
|
||||||
|
<div class="flex w-auto h-auto flex-wrap flex-col items-center gap-2">
|
||||||
|
<span class="text-red-500">To není správně, zkus to znovu</span>
|
||||||
|
<span> <slot name="hint" /></span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{#if control === 'not-control' || control === 'correct' || control === 'wrong-secondTime'}
|
{#if control === 'not-control' || control === 'correct' || control === 'wrong-secondTime'}
|
||||||
<Button on:submit={nextQuestion} primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Na další otázku</Button>
|
<Button on:submit={() => dispatch('nextQuestion')} primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Na další otázku</Button>
|
||||||
{:else if control === 'wrong-firstTime' || control === null}
|
{:else if control === 'wrong-firstTime' || control === null}
|
||||||
<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Vyhodnotit</Button>
|
<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Vyhodnotit</Button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full relative bottom-[170px] flex justify-center h-fit size">
|
|
||||||
{#if control === 'not-control' || control === null}
|
|
||||||
<span />
|
|
||||||
{:else if control === 'correct'}
|
|
||||||
<span style="color:greenyellow">správně</span>
|
|
||||||
{:else if control === 'wrong-firstTime'}
|
|
||||||
<span style="color:red">druhypokus</span>
|
|
||||||
{:else if control === 'wrong-secondTime'}
|
|
||||||
<span style="color:red">špatně</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</Section>
|
</Section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,12 +1,28 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import LayoutImg from '../../../lib/components/Layouts/LayoutImg.svelte'
|
import LayoutImg from '../../../lib/components/Layouts/LayoutImg.svelte'
|
||||||
import Button from '../../../lib/components/Buttons/Button.svelte'
|
import Button from '../../../lib/components/Buttons/Button.svelte'
|
||||||
export let img
|
import { Experience } from '$lib/TStypes/experiences'
|
||||||
|
import { navigate } from '$lib/router'
|
||||||
|
export let gameData: Experience
|
||||||
|
export let client
|
||||||
|
let score = (client.points / client.possiblePointsToSeize) * 100
|
||||||
|
console.log(score)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LayoutImg {img}>
|
<LayoutImg img={gameData.ExpImage}>
|
||||||
<div class="w-full h-full flex flex-wrap flex-row gap-4 justify-center">
|
<div class="w-full h-auto flex flex-wrap flex-row gap-4 justify-center">
|
||||||
<div class="h-full w-full flex justify-self-center justify-center text-[32px]"><slot /></div>
|
<div class="h-full w-full flex justify-self-center justify-center text-[32px] flex-wrap flex-col gap-4 items-center">
|
||||||
<Button class="w-80 absolute bottom-0 mb-6" href="/">ukončit hru</Button>
|
<span> Získali jste {client.points} / {client.possiblePointsToSeize} bodů</span>
|
||||||
|
<span>
|
||||||
|
{#if score > 90}
|
||||||
|
{@html gameData.ExpEnd100}
|
||||||
|
{:else if score > 50}
|
||||||
|
{@html gameData.ExpEnd60}
|
||||||
|
{:else}
|
||||||
|
{@html gameData.ExpEnd0}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button class="w-80 mt-8 " on:click={() => navigate(-1)}>ukončit hru</Button>
|
||||||
</div>
|
</div>
|
||||||
</LayoutImg>
|
</LayoutImg>
|
||||||
|
|
|
@ -1,24 +1,4 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Layout from '../Components/Layout.svelte'
|
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: CheckPoint }
|
|
||||||
const { checkPoint, name } = data
|
|
||||||
|
|
||||||
export let nextQuestion
|
|
||||||
export const control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null = 'not-control'
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
<div />
|
||||||
imgSrc={'gameData.question.thumbnail'}
|
|
||||||
control={'not-control'}
|
|
||||||
nextQuestion={() => {
|
|
||||||
nextQuestion()
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span slot="title">{name}</span>
|
|
||||||
<span slot="about">{@html checkPoint.CPText}</span>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -4,43 +4,20 @@
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/experience'
|
import { answer } from '$lib/utils/database/experience'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: CheckPoint }
|
export let checkPoint: CheckPoint
|
||||||
const { checkPoint, name } = data
|
export let myAnswer
|
||||||
|
|
||||||
|
export let clear: false | true = false
|
||||||
|
$: if (clear) myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
|
||||||
|
|
||||||
let myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
|
let myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
|
||||||
|
$: myAnswer = checkPoint.CPOptions.filter((item, i) => {
|
||||||
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
|
|
||||||
export let nextQuestion
|
|
||||||
export let attempt: 1 | 2 = 1
|
|
||||||
|
|
||||||
const answerCheckBox = async () => {
|
|
||||||
const arr = checkPoint.CPOptions.filter((item, i) => {
|
|
||||||
if (myAnswers[i] === true) return item
|
if (myAnswers[i] === true) return item
|
||||||
})
|
})
|
||||||
const res = await answer(checkPoint.$id, arr)
|
|
||||||
if (res) control = 'correct'
|
|
||||||
else if (attempt === 1) control = 'wrong-firstTime'
|
|
||||||
else control = 'wrong-secondTime'
|
|
||||||
attempt++
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
|
||||||
imgSrc={'gameData.question.thumbnail'}
|
|
||||||
nextQuestion={() => {
|
|
||||||
nextQuestion()
|
|
||||||
myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
|
|
||||||
}}
|
|
||||||
{control}
|
|
||||||
on:submit={async () => answerCheckBox()}
|
|
||||||
>
|
|
||||||
<span slot="title">{name}</span>
|
|
||||||
<span slot="about">{@html checkPoint.CPText}</span>
|
|
||||||
<span slot="hint"> {@html checkPoint.CPHint} </span>
|
|
||||||
<div slot="answers">
|
|
||||||
{#each checkPoint.CPOptions as label, i}
|
{#each checkPoint.CPOptions as label, i}
|
||||||
<span class="self-baseline">
|
<span class="self-baseline">
|
||||||
<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
|
<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
|
@ -1,47 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Layout from '../Components/Layout.svelte'
|
|
||||||
import Input from '../../../lib/components/Inputs/Input.svelte'
|
import Input from '../../../lib/components/Inputs/Input.svelte'
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/experience'
|
import { answer } from '$lib/utils/database/experience'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: CheckPoint }
|
export let myAnswer = ''
|
||||||
const { checkPoint, name } = data
|
export let clear: false | true = false
|
||||||
let myAnswer = ''
|
$: if (clear) myAnswer = ''
|
||||||
|
|
||||||
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
|
|
||||||
export let nextQuestion
|
|
||||||
export let attempt: 1 | 2 = 1
|
|
||||||
|
|
||||||
const answer_ = async () => {
|
|
||||||
const res = await answer(checkPoint.$id, myAnswer)
|
|
||||||
if (res) control = 'correct'
|
|
||||||
else if (attempt === 1) control = 'wrong-firstTime'
|
|
||||||
else control = 'wrong-secondTime'
|
|
||||||
attempt++
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
|
||||||
imgSrc={'gameData.question.thumbnail'}
|
|
||||||
nextQuestion={() => {
|
|
||||||
nextQuestion()
|
|
||||||
myAnswer = ''
|
|
||||||
}}
|
|
||||||
{control}
|
|
||||||
on:submit={() => (myAnswer !== '' ? answer_() : null)}
|
|
||||||
>
|
|
||||||
<span slot="title">{name}</span>
|
|
||||||
<span slot="about">{@html checkPoint.CPText}</span>
|
|
||||||
<span slot="hint"> {@html checkPoint.CPHint} </span>
|
|
||||||
<div slot="answers">
|
|
||||||
<span class="self-baseline">
|
|
||||||
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
/*.input::-webkit-inner-spin-button {
|
|
||||||
background: blue;
|
|
||||||
}*/
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<script lang="ts">
|
<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 TextForm from './TextForm.svelte'
|
||||||
import NumberForm from './NumberForm.svelte'
|
import NumberForm from './NumberForm.svelte'
|
||||||
|
@ -11,6 +10,9 @@
|
||||||
import { data } from '$lib/stores/stores'
|
import { data } from '$lib/stores/stores'
|
||||||
import Erantmap from '$lib/components/Map/Erantmap.svelte'
|
import Erantmap from '$lib/components/Map/Erantmap.svelte'
|
||||||
import Info from './Info.svelte'
|
import Info from './Info.svelte'
|
||||||
|
import { Experience } from '$lib/TStypes/experiences'
|
||||||
|
import Layout from '../Components/Layout.svelte'
|
||||||
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
const components = {
|
const components = {
|
||||||
TEXT: TextForm,
|
TEXT: TextForm,
|
||||||
|
@ -23,79 +25,90 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null = null
|
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null = null
|
||||||
let view: 'question' | 'map' | 'end' = 'map'
|
let view: 'question' | 'map' | 'end' | 'start-map' = 'start-map'
|
||||||
|
export let gameData: Experience //data
|
||||||
|
|
||||||
export let gameData: any = {} //data
|
let client = {
|
||||||
$: console.log(gameData)
|
|
||||||
|
|
||||||
let clientAnswers = {
|
|
||||||
//user data about game
|
//user data about game
|
||||||
pos: 0,
|
pos: 0,
|
||||||
end: gameData.checkPoints.length - 1, //kolik otázek
|
end: gameData.checkPoints.length - 1, //kolik otázek
|
||||||
points: 0, //body
|
points: 0, //body
|
||||||
|
possiblePointsToSeize: gameData.checkPoints.length * 2,
|
||||||
}
|
}
|
||||||
|
|
||||||
$: console.log(clientAnswers.pos === clientAnswers.end + 1)
|
$: if (gameData.checkPoints[client.pos].CPType === 'INFO') control = 'not-control'
|
||||||
|
|
||||||
$: if (control === 'correct') clientAnswers.points += 2 //body bodování
|
|
||||||
|
|
||||||
const nextQuestion = () => {
|
const nextQuestion = () => {
|
||||||
//další otázka
|
//další otázka
|
||||||
|
|
||||||
console.log({ control })
|
|
||||||
|
|
||||||
control = null
|
control = null
|
||||||
if (clientAnswers.pos === clientAnswers.end) view = 'end'
|
if (client.pos === client.end) view = 'end'
|
||||||
else {
|
else {
|
||||||
clientAnswers.pos++
|
client.pos++
|
||||||
view = 'map'
|
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 (client.pos < client.end) answers = parseQuestion(gameData.questions[client.pos].answer, gameData.questions[client.pos].type) //delete
|
||||||
let page = null
|
let page = null
|
||||||
$: page = view === 'question' ? components[gameData.checkPoints[clientAnswers.pos].CPType] : null
|
$: page = view === 'question' ? components[gameData.checkPoints[client.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 (client.pos < client.end) [lat, lng] = view === 'map' ? gameData.checkPoints[client.pos].CPLocation : gameData.ExpLocation
|
||||||
|
|
||||||
let user = { lat: null, lng: null }
|
let user = { lat: 0, lng: 0 }
|
||||||
|
|
||||||
$: console.log(gameData.checkPoints[clientAnswers.pos].CPType, clientAnswers.pos, view)
|
$: checkPoint = gameData.checkPoints[client.pos]
|
||||||
|
let myAnswer: string | string[]
|
||||||
|
|
||||||
/* //set user to localstorage
|
const checkAnswer = async () => {
|
||||||
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
|
const res = await answer(checkPoint.$id, myAnswer)
|
||||||
//nastaví
|
if (res) {
|
||||||
localStorage.setItem(`/${gameData.url}`, JSON.stringify(clientAnswers.pos))
|
control = 'correct'
|
||||||
localStorage.setItem('lastGame', `/${gameData.url}`)
|
client.points += 2
|
||||||
} else {
|
} else if (control === null) {
|
||||||
//vymaže když jsi dohrál
|
control = 'wrong-firstTime'
|
||||||
localStorage.removeItem(`/${gameData.url}`)
|
clear = true
|
||||||
localStorage.removeItem('lastGame')
|
} else control = 'wrong-secondTime'
|
||||||
|
setTimeout(() => (clear = false), 400)
|
||||||
}
|
}
|
||||||
|
let clear: boolean = false
|
||||||
//is user already in game
|
|
||||||
const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
|
||||||
if (userInGame) {
|
|
||||||
clientAnswers.pos = userInGame
|
|
||||||
}*/
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input type="number" bind:value={clientAnswers.pos} />
|
<input type="number" bind:value={client.pos} />
|
||||||
<button on:click={() => (view = 'question')}>disappear map</button>
|
<button on:click={() => (view = view === 'start-map' ? 'map' : 'question')}>disappear map</button>
|
||||||
|
|
||||||
{#if view === 'map'}
|
{#if view === 'map' || view === 'start-map'}
|
||||||
<Erantmap bind:user class="w-full h-full">
|
<Erantmap bind:user class="w-full h-full">
|
||||||
<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
|
<Marker on:enter={() => (view = view === 'start-map' ? 'map' : 'question')} {lat} {lng} {user} />
|
||||||
</Erantmap>
|
</Erantmap>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if view === 'question'}
|
{#if view === 'question'}
|
||||||
<svelte:component this={page} data={{ checkPoint: gameData.checkPoints[clientAnswers.pos], name: gameData.ExpName }} {nextQuestion} bind:control />
|
<Layout imgSrc={'gameData.question.thumbnail'} on:submit={() => checkAnswer()} on:nextQuestion={nextQuestion} {control}>
|
||||||
|
<span slot="title">{checkPoint.CPName}</span>
|
||||||
|
<span slot="about">{@html checkPoint.CPText}</span>
|
||||||
|
|
||||||
|
<span slot="hint">
|
||||||
|
{#if checkPoint.CPHint}
|
||||||
|
{@html checkPoint.CPHint}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
<span slot="after">
|
||||||
|
{#if checkPoint.CPAfter}
|
||||||
|
{@html checkPoint.CPAfter}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
<div slot="answers">
|
||||||
|
<span class="self-baseline">
|
||||||
|
<svelte:component this={page} {clear} {checkPoint} bind:myAnswer />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
{/if}
|
{/if}
|
||||||
{#if view === 'end'}
|
{#if view === 'end'}
|
||||||
<Finish img={gameData.thumbnail}>
|
<Finish {client} {gameData}>
|
||||||
<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
|
<span> Získali jste {client.points} / {client.possiblePointsToSeize} bodů</span>
|
||||||
|
<span />
|
||||||
</Finish>
|
</Finish>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -4,42 +4,15 @@
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/experience'
|
import { answer } from '$lib/utils/database/experience'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: CheckPoint }
|
export let checkPoint: CheckPoint
|
||||||
const { checkPoint, name } = data
|
export let myAnswer = ''
|
||||||
let myAnswer = ''
|
|
||||||
|
|
||||||
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
|
export let clear: false | true = false
|
||||||
export let nextQuestion
|
$: if (clear) myAnswer = ''
|
||||||
export let attempt: 1 | 2 = 1
|
|
||||||
|
|
||||||
const answer_ = async () => {
|
|
||||||
const res = await answer(checkPoint.$id, myAnswer)
|
|
||||||
if (res) control = 'correct'
|
|
||||||
else if (attempt === 1) control = 'wrong-firstTime'
|
|
||||||
else control = 'wrong-secondTime'
|
|
||||||
attempt++
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
|
||||||
imgSrc={'gameData.question.thumbnail'}
|
|
||||||
{control}
|
|
||||||
nextQuestion={() => {
|
|
||||||
nextQuestion()
|
|
||||||
myAnswer = ''
|
|
||||||
}}
|
|
||||||
on:submit={() => (myAnswer !== '' ? answer_() : null)}
|
|
||||||
>
|
|
||||||
<span slot="title">{name}</span>
|
|
||||||
<span slot="about">{@html checkPoint.CPText}</span>
|
|
||||||
<div slot="answers">
|
|
||||||
{#each checkPoint.CPOptions as label}
|
{#each checkPoint.CPOptions as label}
|
||||||
<span class="self-baseline">
|
<span class="self-baseline">
|
||||||
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
|
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -4,41 +4,9 @@
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/experience'
|
import { answer } from '$lib/utils/database/experience'
|
||||||
|
|
||||||
export let data: { name: string; checkPoint: CheckPoint }
|
export let myAnswer = ''
|
||||||
const { checkPoint, name } = data
|
export let clear: false | true = false
|
||||||
let myAnswer = ''
|
$: if (clear) myAnswer = ''
|
||||||
|
|
||||||
export let control: 'wrong-firstTime' | 'wrong-secondTime' | 'correct' | 'not-control' | null
|
|
||||||
export let nextQuestion
|
|
||||||
export let attempt: 1 | 2 = 1
|
|
||||||
|
|
||||||
const answer_ = async () => {
|
|
||||||
const res = await answer(checkPoint.$id, myAnswer)
|
|
||||||
if (res) control = 'correct'
|
|
||||||
else if (attempt === 1) control = 'wrong-firstTime'
|
|
||||||
else control = 'wrong-secondTime'
|
|
||||||
attempt++
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
|
||||||
imgSrc={'gameData.question.thumbnail'}
|
|
||||||
{control}
|
|
||||||
nextQuestion={() => {
|
|
||||||
nextQuestion()
|
|
||||||
myAnswer = ''
|
|
||||||
}}
|
|
||||||
on:submit={() => (myAnswer !== '' ? answer_() : null)}
|
|
||||||
>
|
|
||||||
<span slot="title">{name}</span>
|
|
||||||
<span slot="about">{@html checkPoint.CPText}</span>
|
|
||||||
<span slot="hint"> {@html checkPoint.CPHint} </span>
|
|
||||||
<div slot="answers">
|
|
||||||
<span class="self-baseline">
|
|
||||||
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -10,11 +10,7 @@
|
||||||
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/Map.svelte'
|
import Map from '../../lib/components/Map/Map.svelte'
|
||||||
import Renderer from './Forms/Renderer.svelte'
|
import Renderer from './Forms/Renderer.svelte'
|
||||||
import Redirect from '../../lib/components/Common/Redirect.svelte'
|
|
||||||
import ImageSlider from '../../lib/components/Common/ImageSlider.svelte'
|
|
||||||
import Marker from '../../lib/components/Map/Marker.svelte'
|
import Marker from '../../lib/components/Map/Marker.svelte'
|
||||||
import collections from '$lib/collections'
|
|
||||||
import { Query } from 'appwrite'
|
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import { load } from '$lib/utils/database/experience'
|
import { load } from '$lib/utils/database/experience'
|
||||||
import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
|
import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
|
||||||
|
@ -24,7 +20,7 @@
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
try {
|
try {
|
||||||
$data = await load(params.gameurl, 5, (preview) => {
|
$data = await load(params.gameurl, 10, (preview) => {
|
||||||
$data = preview
|
$data = preview
|
||||||
view = 'experience-preview'
|
view = 'experience-preview'
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,19 +1,18 @@
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { navigate } from '$lib/router'
|
import { navigate } from '$lib/router'
|
||||||
import CompartmentItem from './Compartment_Item.svelte'
|
import CompartmentItem from './Compartment_Item.svelte'
|
||||||
import Headline from './Headline.svelte'
|
import Headline from './Headline.svelte'
|
||||||
|
|
||||||
export let items = []
|
export let items = []
|
||||||
|
export let direction: 'col' | 'row' = 'row'
|
||||||
console.log(items)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<Headline content="Inspiration on your trip" />
|
<Headline content="Inspiration on your trip" />
|
||||||
|
|
||||||
<div class="options">
|
<div class={`options ${direction === 'row' ? 'flex-row' : 'flex-col'}`}>
|
||||||
{#each items as item}
|
{#each items as item}
|
||||||
<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} price={item.price} location={item.location} name={item.ExpName} image={item.ExpImage} />
|
<CompartmentItem on:click={() => navigate(`${item.ExpURL}`)} city={item.city} name={item.ExpName} image={item.ExpImage} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,7 +35,6 @@
|
||||||
|
|
||||||
.section > .options {
|
.section > .options {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
export let location = 'Home'
|
export let city = 'Home'
|
||||||
export let name = 'Kawa Ijen'
|
export let name = 'Kawa Ijen'
|
||||||
export let image = ''
|
export let image = ''
|
||||||
</script>
|
</script>
|
||||||
|
@ -49,7 +49,7 @@
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
{location}
|
{city}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
Loading…
Reference in New Issue