better experiece
This commit is contained in:
parent
86f95a52a4
commit
bf65e8508f
|
@ -2,9 +2,10 @@
|
|||
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>
|
||||
|
||||
|
@ -40,7 +41,7 @@
|
|||
{/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}
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -4,44 +4,20 @@
|
|||
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||
import { answer } from '$lib/utils/database/game'
|
||||
|
||||
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
|
||||
|
||||
const answerCheckBox = async () => {
|
||||
const arr = checkPoint.CPOptions.filter((item, i) => {
|
||||
$: myAnswer = 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>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
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/game'
|
||||
|
||||
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
|
||||
|
||||
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'
|
||||
}
|
||||
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>
|
||||
<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">
|
||||
import parseQuestion from '../../../lib/utils/parseQuestion'
|
||||
import Marker from '../../../lib/components/Map/Marker.svelte'
|
||||
import TextForm from './TextForm.svelte'
|
||||
import NumberForm from './NumberForm.svelte'
|
||||
|
@ -12,6 +11,8 @@
|
|||
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,
|
||||
|
@ -24,19 +25,18 @@
|
|||
}
|
||||
|
||||
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
|
||||
|
||||
let client = {
|
||||
//user data about game
|
||||
pos: 1,
|
||||
pos: 0,
|
||||
end: gameData.checkPoints.length - 1, //kolik otázek
|
||||
points: 0, //body
|
||||
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 = () => {
|
||||
//další otázka
|
||||
|
@ -54,39 +54,57 @@
|
|||
$: page = view === 'question' ? components[gameData.checkPoints[client.pos].CPType] : 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 }
|
||||
|
||||
/* //set user to localstorage
|
||||
$: if (client.pos !== client.end && client.pos !== 0) {
|
||||
//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')
|
||||
}
|
||||
$: checkPoint = gameData.checkPoints[client.pos]
|
||||
let myAnswer: string | string[]
|
||||
|
||||
//is user already in game
|
||||
const userInGame = JSON.parse(localStorage.getItem(location.pathname))
|
||||
if (userInGame) {
|
||||
client.pos = userInGame
|
||||
}*/
|
||||
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)
|
||||
}
|
||||
let clear: boolean = false
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<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[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 view === 'end'}
|
||||
<Finish {client} {gameData}>
|
||||
|
|
|
@ -4,45 +4,15 @@
|
|||
import { CheckPoint } from '$lib/TStypes/experiences'
|
||||
import { answer } from '$lib/utils/database/game'
|
||||
|
||||
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
|
||||
|
||||
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'
|
||||
}
|
||||
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>
|
||||
<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 { answer } from '$lib/utils/database/game'
|
||||
|
||||
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
|
||||
|
||||
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'
|
||||
}
|
||||
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>
|
||||
<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 () => {
|
||||
try {
|
||||
$data = await load(params.gameurl, 5, (preview) => {
|
||||
$data = await load(params.gameurl, 10, (preview) => {
|
||||
$data = preview
|
||||
})
|
||||
view = 'game-preview'
|
||||
})
|
||||
} catch (error) {
|
||||
navigate('/error')
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue