From 95b0d7c0ff5551e0321b19859db225f04092027f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ludv=C3=ADk=20Prokopec?= <prokolud@fit.cvut.cz>
Date: Sat, 22 Oct 2022 10:39:43 +0200
Subject: [PATCH] Fix frontend

---
 src/lib/Components/Layout.svelte  |  2 +-
 src/lib/Components/Overlay.svelte |  1 +
 src/lib/utils/stores.js           | 83 ++++++++++++++++++++++++++++
 src/routes/game.svelte            | 91 +++++++++++++------------------
 4 files changed, 124 insertions(+), 53 deletions(-)
 create mode 100644 src/lib/utils/stores.js

diff --git a/src/lib/Components/Layout.svelte b/src/lib/Components/Layout.svelte
index 1fb1a35..a55ce2c 100644
--- a/src/lib/Components/Layout.svelte
+++ b/src/lib/Components/Layout.svelte
@@ -6,6 +6,6 @@
 	div {
 		height: 100%;
 		width: 100%;
-		/*border: 1px solid grey;*/
+		overflow: auto;
 	}
 </style>
diff --git a/src/lib/Components/Overlay.svelte b/src/lib/Components/Overlay.svelte
index ba7fdf2..ac10656 100644
--- a/src/lib/Components/Overlay.svelte
+++ b/src/lib/Components/Overlay.svelte
@@ -26,6 +26,7 @@
 		height: 100%;
 		width: 100%;
 		clip-path: inset(0);
+		overflow: auto;
 
 		.overlay {
 			min-height: 75vh;
diff --git a/src/lib/utils/stores.js b/src/lib/utils/stores.js
new file mode 100644
index 0000000..45df570
--- /dev/null
+++ b/src/lib/utils/stores.js
@@ -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
+	]
+}
diff --git a/src/routes/game.svelte b/src/routes/game.svelte
index 6f9cc08..38cfca4 100644
--- a/src/routes/game.svelte
+++ b/src/routes/game.svelte
@@ -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" />