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

Merge branch 'master' of https://github.com/erant-s-r-o/erant into Matt/preferenceUPD

This commit is contained in:
matthieu42morin 2023-03-20 08:50:03 +01:00
parent 5e5c9eee93 bf65e8508f
commit 261895a38e
23 changed files with 257 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
index.html
View File

@ -1,66 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<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>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Erant</title>
<!-- Serviceworker registration -->
<script>
if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('servicewworker.js')
}
</script>
<!-- Serviceworker registration -->
<script>
// if (typeof navigator.serviceWorker !== 'undefined') {
// navigator.serviceWorker.register('serviceworker.js')
// }
</script>
<!-- Meta Pixel Code -->
<script>
!(function (f, b, e, v, n, t, s) {
if (f.fbq) return
n = f.fbq = function () {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
}
if (!f._fbq) f._fbq = n
n.push = n
n.loaded = !0
n.version = '2.0'
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>
<noscript><img height="1" width="1" style="display: none" src="https://www.facebook.com/tr?id=541491674547104&ev=PageView&noscript=1" /></noscript>
<!-- End Meta Pixel Code -->
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
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>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=541491674547104&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8RCL0H1Q7V"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8RCL0H1Q7V"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-8RCL0H1Q7V')
</script>
gtag('config', 'G-8RCL0H1Q7V');
</script>
<!-- Google Tag Manager -->
<script>
;(function (w, d, s, l, i) {
w[l] = w[l] || []
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
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 -->
</head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});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 -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLHVPKW"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLHVPKW" height="0" width="0" style="display: none; visibility: hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2
src/lib/TStypes/experiences.ts
View File

@ -25,7 +25,7 @@ export type Experience = {
$permissions: string
$updatedAt: string
ExpApproved: boolean
ExpCpsID: string[]
ExpCPsID: string[]
ExpCategory?: string
ExpEnd0: string
ExpEnd60: string

5
src/lib/components/Buttons/Button.svelte
View File

@ -41,6 +41,11 @@
color: white;
background-color: rgb(66, 99, 235);
&.disabled {
&:hover {
background-color: rgb(107 114 128);
}
}
&:hover {
background-color: rgba(66, 99, 235, 0.8);
}

6
src/lib/components/Layouts/LayoutImg.svelte
View File

@ -34,8 +34,8 @@
height: auto;
width: 100%;
overflow-y: auto;
position: absolute;
top: 25%;
position: relative;
top: -10%;
border-radius: 70px 70px 0 0;
padding: 52px;
display: flex;
@ -49,7 +49,7 @@
z-index: 4;
width: 100%;
height: auto;
position: absolute;
position: relative;
}
.shareButton {
width: 100%;

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

@ -1,15 +1,18 @@
<script>
<script lang="ts">
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
import Map from './Map.svelte'
import { navigate } from 'svelte-routing'
import NavigationBarLayout from '../Layouts/NavigationBarLayout.svelte'
import { createEventDispatcher, onMount } from 'svelte'
import LocationRequest from './LocationRequest.svelte'
const dispatch = createEventDispatcher()
export let center = 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 = ''
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) {
navigator.geolocation.watchPosition(showPosition, () => dispatch('locationFailed'))
} else {
@ -34,16 +42,22 @@
}*/
const userCenter = () => {
// @ts-ignore
document.getElementsByClassName('mapboxgl-ctrl-geolocate')[0].click()
}
</script>
<LocationRequest />
<NavigationBarLayout>
{#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 />
<GeolocateControl
options={{ trackUserLocation: true }}
on:trackuserlocationstart={() => {}}
on:geolocate={(e) => {
// @ts-ignore
const { latitude, longitude } = e.detail.coords
user = { lat: latitude, lng: longitude }
}}

18
src/lib/components/Map/LocationRequest.svelte
View File

@ -13,15 +13,17 @@
</script>
{#if granted === false}
<Alert class="absolute w-[95%] max-w-[400px] z-50 mt-4" color="green">
<span class="text-lg font-medium">This is a info alert</span>
<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="flex gap-2">
<Button color="green" on:click={() => (granted = true)} size="xs">ok</Button>
<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>
<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="flex gap-2">
<Button color="green" on:click={() => (granted = true)} size="xs">ok</Button>
</div>
</div>
</div>
</Alert>
</Alert>
</div>
{/if}
<!--{#if state === 'granted'}
<script>

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

@ -10,7 +10,6 @@
export let radius = false
export let center: { lng: number; lat: number } = { lng: 0, lat: 0 }
$: console.log(center)
/*export const geo = (e) => {
geolocateControl.dispatchEvent('geolocate')
@ -37,6 +36,7 @@
mapComponent.setCenter([center.lng, center.lat], 14)
dispatch('ready')
}}
on:recentre={(e) => {}}
zoom={14}
>
<slot />

2
src/lib/utils/database/experience.ts
View File

@ -11,7 +11,7 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
// @ts-ignore
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)
for (const checkPointId of checkPointsIds) {

7
src/routes/authorization/login/log_in.svelte
View File

@ -7,6 +7,7 @@
import TopImage from '$lib/svg/Top-Image.svelte'
import { Helper } from 'flowbite-svelte'
import { getErrorMessage } from '../utils/authorizationErrors'
import Button from '$lib/components/Buttons/Button.svelte'
export let purpose = 'login' //possible values login, register
@ -58,13 +59,13 @@
<div class="forgot_password">
<a href="/forgot-password">Forgot password?</a>
</div>
<button class="loginButton" on:click={() => emailLogin()}>
<Button class="w-full text-2xl" primary disabled={password.length < 8} on:click={() => emailLogin()}>
{#if state === 'loading'}
<Loading class="text-white" />
{:else}
Sign in
Log in
{/if}
</button>
</Button>
</div>
</div>

3
src/routes/authorization/register/register.svelte
View File

@ -30,11 +30,14 @@
err['code'] = 1001
throw err
}
await account.create(ID.unique(), email, password, name)
await account.createEmailSession(email, password)
await account.createVerification(`${location.origin}/register/emailverification/${erantId}`)
state = 'email-sent'
} catch (err) {
console.log(err)
error = getErrorMessage(err.code)
state = 'register'
}

2
src/routes/authorization/utils/authorizationErrors.ts
View File

@ -2,7 +2,7 @@ export const errors = {
1001: 'Nickname is already taken',
409: 'A user with the same email already is in Erant',
401: 'Invalid credentials.',
400: 'Password must be at least 8 characters.',
400: 'Email musts be valid.',
}
export const getErrorMessage = (code: number) => {

6
src/routes/explore/explore.svelte
View File

@ -4,8 +4,10 @@
import Top from './Components/Top.svelte'
import { getExperiences } from '$lib/utils/database/experience'
import Loading from '$lib/components/Common/Loading.svelte'
import Comparment from '../homepage/Components/Comparment.svelte'
let Search: string
//
</script>
<div class="content">
@ -17,9 +19,7 @@
<Loading />
</div>
{:then expiriences}
{#each expiriences as result}
<Result name={result.name} location={result.location} link={result.link} />
{/each}
<Comparment direction="col" items={expiriences} />
{/await}
<div class="end" />

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

@ -1,10 +1,11 @@
<script lang="ts">
import Section from '../../../lib/components/Common/Section.svelte'
import Button from '../../../lib/components/Buttons/Button.svelte'
import Image from '../../../lib/components/Common/Image.svelte'
import Section from '$lib/components/Common/Section.svelte'
import Button from '$lib/components/Buttons/Button.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 nextQuestion
export let imgSrc
</script>
@ -19,36 +20,33 @@
<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="popis">
<span> Popis úkolu: </span>
<span> <slot name="about" /></span>
</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">
<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'}
<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}
<Button on:submit primary class="w-3/4 max-w-sm min-w-[400px] h-16 bottom-0 m-10 relative">Vyhodnotit</Button>
{/if}
</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>
</div>
</div>

28
src/routes/game/Forms/Finish.svelte
View File

@ -1,12 +1,28 @@
<script>
<script lang="ts">
import LayoutImg from '../../../lib/components/Layouts/LayoutImg.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>
<LayoutImg {img}>
<div class="w-full h-full 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>
<Button class="w-80 absolute bottom-0 mb-6" href="/">ukončit hru</Button>
<LayoutImg img={gameData.ExpImage}>
<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] flex-wrap flex-col gap-4 items-center">
<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>
</LayoutImg>

22
src/routes/game/Forms/Info.svelte
View File

@ -1,24 +1,4 @@
<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>
<Layout
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>
<div />

51
src/routes/game/Forms/MultiChoiceForm.svelte
View File

@ -4,43 +4,20 @@
import { CheckPoint } from '$lib/TStypes/experiences'
import { answer } from '$lib/utils/database/experience'
export let data: { name: string; checkPoint: CheckPoint }
const { checkPoint, name } = data
export let checkPoint: CheckPoint
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)
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
})
const res = await answer(checkPoint.$id, arr)
if (res) control = 'correct'
else if (attempt === 1) control = 'wrong-firstTime'
else control = 'wrong-secondTime'
attempt++
}
$: myAnswer = checkPoint.CPOptions.filter((item, i) => {
if (myAnswers[i] === true) return item
})
</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}
<span class="self-baseline">
<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
</span>
{/each}
</div>
</Layout>
{#each checkPoint.CPOptions as label, i}
<span class="self-baseline">
<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
</span>
{/each}

44
src/routes/game/Forms/NumberForm.svelte
View File

@ -1,47 +1,11 @@
<script lang="ts">
import Layout from '../Components/Layout.svelte'
import Input from '../../../lib/components/Inputs/Input.svelte'
import { CheckPoint } from '$lib/TStypes/experiences'
import { answer } from '$lib/utils/database/experience'
export let data: { name: string; checkPoint: CheckPoint }
const { checkPoint, name } = data
let 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++
}
export let myAnswer = ''
export let clear: false | true = false
$: if (clear) myAnswer = ''
</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" />
</span>
</div>
</Layout>
<style lang="scss">
/*.input::-webkit-inner-spin-button {
background: blue;
}*/
</style>
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

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

@ -1,5 +1,4 @@
<script lang="ts">
import parseQuestion from '../../../lib/utils/parseQuestion'
import Marker from '../../../lib/components/Map/Marker.svelte'
import TextForm from './TextForm.svelte'
import NumberForm from './NumberForm.svelte'
@ -11,6 +10,9 @@
import { data } from '$lib/stores/stores'
import Erantmap from '$lib/components/Map/Erantmap.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 = {
TEXT: TextForm,
@ -23,79 +25,90 @@
}
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
$: console.log(gameData)
let clientAnswers = {
let client = {
//user data about game
pos: 0,
end: gameData.checkPoints.length - 1, //kolik otázek
points: 0, //body
possiblePointsToSeize: gameData.checkPoints.length * 2,
}
$: console.log(clientAnswers.pos === clientAnswers.end + 1)
$: if (control === 'correct') clientAnswers.points += 2 //body bodování
$: if (gameData.checkPoints[client.pos].CPType === 'INFO') control = 'not-control'
const nextQuestion = () => {
//další otázka
console.log({ control })
control = null
if (clientAnswers.pos === clientAnswers.end) view = 'end'
if (client.pos === client.end) view = 'end'
else {
clientAnswers.pos++
client.pos++
view = 'map'
}
}
//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
$: 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]
$: 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
$: if (clientAnswers.pos !== clientAnswers.end && clientAnswers.pos !== 0) {
//nastaví
localStorage.setItem(`/${gameData.url}`, JSON.stringify(clientAnswers.pos))
localStorage.setItem('lastGame', `/${gameData.url}`)
} else {
//vymaže když jsi dohrál
localStorage.removeItem(`/${gameData.url}`)
localStorage.removeItem('lastGame')
const checkAnswer = async () => {
const res = await answer(checkPoint.$id, myAnswer)
if (res) {
control = 'correct'
client.points += 2
} else if (control === null) {
control = 'wrong-firstTime'
clear = true
} else control = 'wrong-secondTime'
setTimeout(() => (clear = false), 400)
}
//is user already in game
const userInGame = JSON.parse(localStorage.getItem(location.pathname))
if (userInGame) {
clientAnswers.pos = userInGame
}*/
let clear: boolean = false
</script>
<input type="number" bind:value={clientAnswers.pos} />
<button on:click={() => (view = 'question')}>disappear map</button>
<input type="number" bind:value={client.pos} />
<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">
<Marker on:enter={() => (view = 'question')} {lat} {lng} {user} />
<Marker on:enter={() => (view = view === 'start-map' ? 'map' : 'question')} {lat} {lng} {user} />
</Erantmap>
{/if}
{#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 view === 'end'}
<Finish img={gameData.thumbnail}>
<span> Získali jste {clientAnswers.points} / {clientAnswers.end * 2} bodů</span>
<Finish {client} {gameData}>
<span> Získali jste {client.points} / {client.possiblePointsToSeize} bodů</span>
<span />
</Finish>
{/if}

45
src/routes/game/Forms/SingleChoiceForm.svelte
View File

@ -4,42 +4,15 @@
import { CheckPoint } from '$lib/TStypes/experiences'
import { answer } from '$lib/utils/database/experience'
export let data: { name: string; checkPoint: CheckPoint }
const { checkPoint, name } = data
let myAnswer = ''
export let checkPoint: CheckPoint
export let 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++
}
export let clear: false | true = false
$: if (clear) myAnswer = ''
</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}
<span class="self-baseline">
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
</span>
{/each}
</div>
</Layout>
<style lang="scss">
</style>
{#each checkPoint.CPOptions as label}
<span class="self-baseline">
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
</span>
{/each}

40
src/routes/game/Forms/TextForm.svelte
View File

@ -4,41 +4,9 @@
import { CheckPoint } from '$lib/TStypes/experiences'
import { answer } from '$lib/utils/database/experience'
export let data: { name: string; checkPoint: CheckPoint }
const { checkPoint, name } = data
let 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++
}
export let myAnswer = ''
export let clear: false | true = false
$: if (clear) myAnswer = ''
</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" />
</span>
</div>
</Layout>
<style lang="scss">
</style>
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />

8
src/routes/game/experience.svelte
View File

@ -10,11 +10,7 @@
import GeolocateControl from '@beyonk/svelte-mapbox/src/lib/map/controls/GeolocateControl.svelte'
import Map from '../../lib/components/Map/Map.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 collections from '$lib/collections'
import { Query } from 'appwrite'
import { onMount } from 'svelte'
import { load } from '$lib/utils/database/experience'
import { getLocationDataFromLatAndLong } from '$lib/utils/locations'
@ -24,7 +20,7 @@
onMount(async () => {
try {
$data = await load(params.gameurl, 5, (preview) => {
$data = await load(params.gameurl, 10, (preview) => {
$data = preview
view = 'experience-preview'
})
@ -112,4 +108,4 @@
justify-content: flex-start;
gap: 15px;
}
</style>
</style>

10
src/routes/homepage/Components/Comparment.svelte
View File

@ -1,19 +1,18 @@
<script>
<script lang="ts">
import { navigate } from '$lib/router'
import CompartmentItem from './Compartment_Item.svelte'
import Headline from './Headline.svelte'
export let items = []
console.log(items)
export let direction: 'col' | 'row' = 'row'
</script>
<div class="section">
<Headline content="Inspiration on your trip" />
<div class="options">
<div class={`options ${direction === 'row' ? 'flex-row' : 'flex-col'}`}>
{#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}
</div>
</div>
@ -36,7 +35,6 @@
.section > .options {
display: flex;
flex-direction: row;
gap: 12px;
align-items: flex-start;

4
src/routes/homepage/Components/Compartment_Item.svelte
View File

@ -1,5 +1,5 @@
<script>
export let location = 'Home'
export let city = 'Home'
export let name = 'Kawa Ijen'
export let image = ''
</script>
@ -49,7 +49,7 @@
</g>
</svg>
{location}
{city}
</div>
</div>
</button>