Fix frontend
This commit is contained in:
Ludvík Prokopec
parent
e2a3391338
commit
95b0d7c0ff
|
|
@ -6,6 +6,6 @@
|
|||
div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/*border: 1px solid grey;*/
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
clip-path: inset(0);
|
||||
overflow: auto;
|
||||
|
||||
.overlay {
|
||||
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 Redirect from '$lib/Components/Redirect.svelte'
|
||||
import Loading from '../lib/Components/Loading.svelte'
|
||||
|
||||
import * as api from '$lib/utils/api'
|
||||
import { data } from '$lib/stores/game'
|
||||
import { loadable } from '../lib/utils/stores'
|
||||
import * as api from '../lib/utils/api'
|
||||
import { data } from '../lib/stores/game'
|
||||
|
||||
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)
|
||||
?.slice(0, 8)
|
||||
?.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>
|
||||
|
||||
{#if loading}
|
||||
{#if $loading}
|
||||
<h1 class="flex items-center justify-center flex-col">
|
||||
<span>Hra se načítá...</span>
|
||||
<Loading />
|
||||
</h1>
|
||||
{:else if success === true}
|
||||
<Overlay shareData={{ url: window.location.href }} img={$data?.thumbnail}>
|
||||
{#if $data}
|
||||
<Heading>
|
||||
<span>{$data.name}</span>
|
||||
<div class="bubbles" slot="bubbles">
|
||||
<Bubble background="blue">
|
||||
<span slot="icon"><IconStar /></span>
|
||||
<span> {'4.5'} </span>
|
||||
</Bubble>
|
||||
<Bubble background="white">
|
||||
<span slot="icon"><IconPoint /></span>
|
||||
<span> {$data.district} </span>
|
||||
</Bubble>
|
||||
</div>
|
||||
</Heading>
|
||||
{:else if $gameData?.success === true}
|
||||
<Overlay shareData={{ url: window.location.href }} img={$gameData.data.thumbnail}>
|
||||
<Heading>
|
||||
<span>{$gameData.data.name}</span>
|
||||
<div class="bubbles" slot="bubbles">
|
||||
<Bubble background="blue">
|
||||
<span slot="icon"><IconStar /></span>
|
||||
<span> {'5.0'} </span>
|
||||
</Bubble>
|
||||
<Bubble background="white">
|
||||
<span slot="icon"><IconPoint /></span>
|
||||
<span>{$gameData.data.district}</span>
|
||||
</Bubble>
|
||||
</div>
|
||||
</Heading>
|
||||
|
||||
<Section title="Popis">
|
||||
<span>
|
||||
{@html $data.start}
|
||||
</span>
|
||||
</Section>
|
||||
<Section title="Popis">
|
||||
<span>
|
||||
{@html $gameData.data.start}
|
||||
</span>
|
||||
</Section>
|
||||
|
||||
<Section title="Fotky">
|
||||
<ImageSlider images={assets} />
|
||||
</Section>
|
||||
{#if $data}
|
||||
<Map class="w-full h-44" center={{ lng: $data.lng, lat: $data.lat }}>
|
||||
{#each $data.questions as { lat, lng }}
|
||||
<Circle {lat} {lng} />
|
||||
{/each}
|
||||
</Map>
|
||||
{/if}
|
||||
<Button href="/play" primary>Hrát</Button>
|
||||
{/if}
|
||||
<Section title="Fotky">
|
||||
<ImageSlider images={assets} />
|
||||
</Section>
|
||||
|
||||
<Map class="w-full h-44" center={{ lng: $gameData.data.lng, lat: $gameData.data.lat }}>
|
||||
{#each $gameData.data.questions as { lat, lng }}
|
||||
<Circle {lat} {lng} />
|
||||
{/each}
|
||||
</Map>
|
||||
|
||||
<Button href="/play" primary>Hrát</Button>
|
||||
</Overlay>
|
||||
{:else}
|
||||
<Redirect replace to="/error" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue