Fix frontend
This commit is contained in:
parent
e2a3391338
commit
95b0d7c0ff
|
@ -6,6 +6,6 @@
|
||||||
div {
|
div {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/*border: 1px solid grey;*/
|
overflow: auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -26,6 +26,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
clip-path: inset(0);
|
clip-path: inset(0);
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
min-height: 75vh;
|
min-height: 75vh;
|
||||||
|
|
|
@ -0,0 +1,83 @@
|
||||||
|
import { readable, writable } from 'svelte/store'
|
||||||
|
import * as api from './api'
|
||||||
|
|
||||||
|
class FetchArray extends Array {
|
||||||
|
constructor(items, caller = () => null) {
|
||||||
|
super()
|
||||||
|
this.push(...items)
|
||||||
|
this.caller = caller
|
||||||
|
}
|
||||||
|
|
||||||
|
setFetch(caller) {
|
||||||
|
this.caller = caller
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(fetchBody = {}, then = () => null) {
|
||||||
|
return this.caller(fetchBody, then)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fetchable(path, initBody = {}) {
|
||||||
|
const { subscribe, set } = writable(null)
|
||||||
|
|
||||||
|
return {
|
||||||
|
subscribe,
|
||||||
|
fetch(fetchBody = {}, then = () => null) {
|
||||||
|
const body = Object.assign(initBody, fetchBody)
|
||||||
|
|
||||||
|
api.post(path, body).then((result) => {
|
||||||
|
set(result)
|
||||||
|
then(result)
|
||||||
|
})
|
||||||
|
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function loadable(path, initBody = {}) {
|
||||||
|
const fetcher = fetchable(path, initBody)
|
||||||
|
const fetchCaller = fetcher.fetch
|
||||||
|
|
||||||
|
const isFetching = writable(false)
|
||||||
|
|
||||||
|
fetcher.fetch = (fetchBody = {}, then = () => null) => {
|
||||||
|
isFetching.set(true)
|
||||||
|
|
||||||
|
fetchCaller(fetchBody, (result) => {
|
||||||
|
isFetching.set(false)
|
||||||
|
then(result)
|
||||||
|
})
|
||||||
|
|
||||||
|
return new FetchArray([fetcher, isFetching], fetcher.fetch)
|
||||||
|
}
|
||||||
|
|
||||||
|
return new FetchArray([fetcher, isFetching], fetcher.fetch)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function mutable(path, callback = () => null) {
|
||||||
|
const isFetching = writable(false)
|
||||||
|
const { subscribe, set } = writable(null)
|
||||||
|
|
||||||
|
const mutateCall = async (fetchBody = {}) => {
|
||||||
|
isFetching.set(true)
|
||||||
|
|
||||||
|
const result = await api.post(path, fetchBody)
|
||||||
|
set(result)
|
||||||
|
isFetching.set(false)
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
subscribe,
|
||||||
|
mutate(fetchBody = {}) {
|
||||||
|
callback(mutateCall, fetchBody)
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isFetching
|
||||||
|
]
|
||||||
|
}
|
|
@ -11,72 +11,59 @@
|
||||||
import ImageSlider from '$lib/Components/ImageSlider.svelte'
|
import ImageSlider from '$lib/Components/ImageSlider.svelte'
|
||||||
import Redirect from '$lib/Components/Redirect.svelte'
|
import Redirect from '$lib/Components/Redirect.svelte'
|
||||||
import Loading from '../lib/Components/Loading.svelte'
|
import Loading from '../lib/Components/Loading.svelte'
|
||||||
|
import { loadable } from '../lib/utils/stores'
|
||||||
import * as api from '$lib/utils/api'
|
import * as api from '../lib/utils/api'
|
||||||
import { data } from '$lib/stores/game'
|
import { data } from '../lib/stores/game'
|
||||||
|
|
||||||
export let gameurl
|
export let gameurl
|
||||||
|
|
||||||
$: assets = $data?.questions
|
const [gameData, loading] = loadable(`${api.hostName}/game/details`).fetch({ gameurl })
|
||||||
|
$data = $gameData?.success === true ? $gameData.data : null
|
||||||
|
|
||||||
|
$: assets = $gameData?.data?.questions
|
||||||
?.filter((q) => q.thumbnail !== null)
|
?.filter((q) => q.thumbnail !== null)
|
||||||
?.slice(0, 8)
|
?.slice(0, 8)
|
||||||
?.map((q) => q.thumbnail)
|
?.map((q) => q.thumbnail)
|
||||||
|
|
||||||
let success = false
|
|
||||||
let loading = true
|
|
||||||
|
|
||||||
;(async () => {
|
|
||||||
const { data: d, success: s } = await api.post(`${api.hostName}/game/details`, {
|
|
||||||
gameurl,
|
|
||||||
})
|
|
||||||
|
|
||||||
success = s
|
|
||||||
$data = d
|
|
||||||
|
|
||||||
loading = false
|
|
||||||
})()
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if loading}
|
{#if $loading}
|
||||||
<h1 class="flex items-center justify-center flex-col">
|
<h1 class="flex items-center justify-center flex-col">
|
||||||
<span>Hra se načítá...</span>
|
<span>Hra se načítá...</span>
|
||||||
<Loading />
|
<Loading />
|
||||||
</h1>
|
</h1>
|
||||||
{:else if success === true}
|
{:else if $gameData?.success === true}
|
||||||
<Overlay shareData={{ url: window.location.href }} img={$data?.thumbnail}>
|
<Overlay shareData={{ url: window.location.href }} img={$gameData.data.thumbnail}>
|
||||||
{#if $data}
|
<Heading>
|
||||||
<Heading>
|
<span>{$gameData.data.name}</span>
|
||||||
<span>{$data.name}</span>
|
<div class="bubbles" slot="bubbles">
|
||||||
<div class="bubbles" slot="bubbles">
|
<Bubble background="blue">
|
||||||
<Bubble background="blue">
|
<span slot="icon"><IconStar /></span>
|
||||||
<span slot="icon"><IconStar /></span>
|
<span> {'5.0'} </span>
|
||||||
<span> {'4.5'} </span>
|
</Bubble>
|
||||||
</Bubble>
|
<Bubble background="white">
|
||||||
<Bubble background="white">
|
<span slot="icon"><IconPoint /></span>
|
||||||
<span slot="icon"><IconPoint /></span>
|
<span>{$gameData.data.district}</span>
|
||||||
<span> {$data.district} </span>
|
</Bubble>
|
||||||
</Bubble>
|
</div>
|
||||||
</div>
|
</Heading>
|
||||||
</Heading>
|
|
||||||
|
|
||||||
<Section title="Popis">
|
<Section title="Popis">
|
||||||
<span>
|
<span>
|
||||||
{@html $data.start}
|
{@html $gameData.data.start}
|
||||||
</span>
|
</span>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section title="Fotky">
|
<Section title="Fotky">
|
||||||
<ImageSlider images={assets} />
|
<ImageSlider images={assets} />
|
||||||
</Section>
|
</Section>
|
||||||
{#if $data}
|
|
||||||
<Map class="w-full h-44" center={{ lng: $data.lng, lat: $data.lat }}>
|
<Map class="w-full h-44" center={{ lng: $gameData.data.lng, lat: $gameData.data.lat }}>
|
||||||
{#each $data.questions as { lat, lng }}
|
{#each $gameData.data.questions as { lat, lng }}
|
||||||
<Circle {lat} {lng} />
|
<Circle {lat} {lng} />
|
||||||
{/each}
|
{/each}
|
||||||
</Map>
|
</Map>
|
||||||
{/if}
|
|
||||||
<Button href="/play" primary>Hrát</Button>
|
<Button href="/play" primary>Hrát</Button>
|
||||||
{/if}
|
|
||||||
</Overlay>
|
</Overlay>
|
||||||
{:else}
|
{:else}
|
||||||
<Redirect replace to="/error" />
|
<Redirect replace to="/error" />
|
||||||
|
|
Loading…
Reference in New Issue