better experiece
This commit is contained in:
parent
86f95a52a4
commit
bf65e8508f
|
@ -2,9 +2,10 @@
|
||||||
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>
|
||||||
|
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</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}
|
||||||
|
|
|
@ -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,44 +4,20 @@
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/game'
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
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
|
if (myAnswers[i] === true) return item
|
||||||
export let nextQuestion
|
})
|
||||||
|
|
||||||
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 (control === null) {
|
|
||||||
control = 'wrong-firstTime'
|
|
||||||
myAnswers = new Array(checkPoint.CPOptions.length).fill(false) //nulling answers
|
|
||||||
} else control = 'wrong-secondTime'
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
{#each checkPoint.CPOptions as label, i}
|
||||||
imgSrc={'gameData.question.thumbnail'}
|
<span class="self-baseline">
|
||||||
nextQuestion={() => {
|
<CheckBox bind:checked={myAnswers[i]}>{label}</CheckBox>
|
||||||
nextQuestion()
|
</span>
|
||||||
myAnswers = new Array(checkPoint.CPOptions.length).fill(false)
|
{/each}
|
||||||
}}
|
|
||||||
{control}
|
|
||||||
on:submit={async () => answerCheckBox()}
|
|
||||||
>
|
|
||||||
<span slot="title">{name}</span>
|
|
||||||
<span slot="about">{@html checkPoint.CPText}</span>
|
|
||||||
<span slot="hint"> {@html checkPoint.CPHint} </span>
|
|
||||||
<span slot="after"> {@html checkPoint.CPAfter} </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>
|
|
||||||
|
|
|
@ -1,49 +1,9 @@
|
||||||
<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 { answer } from '$lib/utils/database/game'
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
const answer_ = async () => {
|
|
||||||
const res = await answer(checkPoint.$id, myAnswer)
|
|
||||||
if (res) control = 'correct'
|
|
||||||
else if (control === null) {
|
|
||||||
control = 'wrong-firstTime'
|
|
||||||
myAnswer = '' //nulling answer
|
|
||||||
} else control = 'wrong-secondTime'
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
<Input type="number" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
||||||
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>
|
|
||||||
<span slot="after"> {@html checkPoint.CPAfter} </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>
|
|
||||||
|
|
|
@ -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'
|
||||||
|
@ -12,6 +11,8 @@
|
||||||
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 { 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,
|
||||||
|
@ -24,19 +25,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
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' = 'question'
|
let view: 'question' | 'map' | 'end' | 'start-map' = 'start-map'
|
||||||
|
|
||||||
export let gameData: Experience //data
|
export let gameData: Experience //data
|
||||||
|
|
||||||
let client = {
|
let client = {
|
||||||
//user data about game
|
//user data about game
|
||||||
pos: 1,
|
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,
|
possiblePointsToSeize: gameData.checkPoints.length * 2,
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (control === 'correct' && gameData.checkPoints[client.pos].CPType !== 'INFO') client.points += 2 //only for now
|
$: if (gameData.checkPoints[client.pos].CPType === 'INFO') control = 'not-control'
|
||||||
|
|
||||||
const nextQuestion = () => {
|
const nextQuestion = () => {
|
||||||
//další otázka
|
//další otázka
|
||||||
|
@ -54,39 +54,57 @@
|
||||||
$: page = view === 'question' ? components[gameData.checkPoints[client.pos].CPType] : null
|
$: page = view === 'question' ? components[gameData.checkPoints[client.pos].CPType] : null
|
||||||
|
|
||||||
let [lat, lng] = [null, null]
|
let [lat, lng] = [null, null]
|
||||||
$: if (client.pos < client.end) [lat, lng] = $data.checkPoints[client.pos].CPLocation
|
$: if (client.pos < client.end) [lat, lng] = view === 'map' ? gameData.checkPoints[client.pos].CPLocation : gameData.ExpLocation
|
||||||
|
|
||||||
let user = { lat: 0, lng: 0 }
|
let user = { lat: 0, lng: 0 }
|
||||||
|
|
||||||
/* //set user to localstorage
|
$: checkPoint = gameData.checkPoints[client.pos]
|
||||||
$: if (client.pos !== client.end && client.pos !== 0) {
|
let myAnswer: string | string[]
|
||||||
//nastaví
|
|
||||||
localStorage.setItem(`/${gameData.url}`, JSON.stringify(client.pos))
|
|
||||||
localStorage.setItem('lastGame', `/${gameData.url}`)
|
|
||||||
} else {
|
|
||||||
//vymaže když jsi dohrál
|
|
||||||
localStorage.removeItem(`/${gameData.url}`)
|
|
||||||
localStorage.removeItem('lastGame')
|
|
||||||
}
|
|
||||||
|
|
||||||
//is user already in game
|
const checkAnswer = async () => {
|
||||||
const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
const res = await answer(checkPoint.$id, myAnswer)
|
||||||
if (userInGame) {
|
if (res) {
|
||||||
client.pos = userInGame
|
control = 'correct'
|
||||||
}*/
|
client.points += 2
|
||||||
|
} else if (control === null) {
|
||||||
|
control = 'wrong-firstTime'
|
||||||
|
clear = true
|
||||||
|
} else control = 'wrong-secondTime'
|
||||||
|
setTimeout(() => (clear = false), 400)
|
||||||
|
}
|
||||||
|
let clear: boolean = false
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input type="number" bind:value={client.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[client.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 {client} {gameData}>
|
<Finish {client} {gameData}>
|
||||||
|
|
|
@ -4,45 +4,15 @@
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/game'
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
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 = ''
|
||||||
|
|
||||||
const answer_ = async () => {
|
|
||||||
const res = await answer(checkPoint.$id, myAnswer)
|
|
||||||
if (res) control = 'correct'
|
|
||||||
else if (control === null) {
|
|
||||||
control = 'wrong-firstTime'
|
|
||||||
myAnswer = ''
|
|
||||||
} else control = 'wrong-secondTime'
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
{#each checkPoint.CPOptions as label}
|
||||||
imgSrc={'gameData.question.thumbnail'}
|
<span class="self-baseline">
|
||||||
{control}
|
<Radio value={label} bind:group={myAnswer}>{label}</Radio>
|
||||||
nextQuestion={() => {
|
</span>
|
||||||
nextQuestion()
|
{/each}
|
||||||
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>
|
|
||||||
<span slot="after"> {@html checkPoint.CPAfter} </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>
|
|
||||||
|
|
|
@ -4,40 +4,9 @@
|
||||||
import { CheckPoint } from '$lib/TStypes/experiences'
|
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||||
import { answer } from '$lib/utils/database/game'
|
import { answer } from '$lib/utils/database/game'
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
const answer_ = async () => {
|
|
||||||
const res = await answer(checkPoint.$id, myAnswer)
|
|
||||||
if (res) control = 'correct'
|
|
||||||
else if (control === null) control = 'wrong-firstTime'
|
|
||||||
else control = 'wrong-secondTime'
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Layout
|
<Input type="text" bind:value={myAnswer} class="w-full min-w-[400px] max-w-[500px] h-12" />
|
||||||
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>
|
|
||||||
<span slot="after"> {@html checkPoint.CPAfter} </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>
|
|
||||||
|
|
|
@ -19,10 +19,10 @@
|
||||||
|
|
||||||
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 = 'game-preview'
|
||||||
})
|
})
|
||||||
view = 'game-preview'
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
navigate('/error')
|
navigate('/error')
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue