=> response.json();
-
- return fetch(url.toString(), init).then(checkStatus).then(parseJson);
-}
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
new file mode 100644
index 00000000..9fc1ce70
--- /dev/null
+++ b/src/routes/__error.svelte
@@ -0,0 +1,52 @@
+
+
+
+
+{#if status === 404}
+ Pagina bestaat niet
+ De pagina die jij probeert te bereiken, bestaat niet.
+
+ Probeer het nogmaals en neem anders contact op met de administrator. Deze gaat het proberen op
+ te lossen.
+
+
+
+ Terug naar home
+
+
+{:else}
+ {status}
+
+ {error.message}
+
+ {#if error.stack}
+ {error.stack}
+ {/if}
+{/if}
+
+
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 7f4895fa..e5ff0798 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -6,19 +6,3 @@
-
-
diff --git a/src/routes/games/[game].json.ts b/src/routes/games/[game].json.ts
new file mode 100644
index 00000000..b366e10d
--- /dev/null
+++ b/src/routes/games/[game].json.ts
@@ -0,0 +1,7 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { api } from './_api';
+
+export const get: RequestHandler = async (request) => {
+ const response = await api(request, `games/${request.params.game}`);
+ return response;
+};
diff --git a/src/routes/games/[game].svelte b/src/routes/games/[game].svelte
new file mode 100644
index 00000000..2c6240f3
--- /dev/null
+++ b/src/routes/games/[game].svelte
@@ -0,0 +1,224 @@
+
+
+
+
+
+
+
+
+
+
+ {game.category} | {game.name}
+ {game.minimumPlayers} | {game.name}
+
+
+ {game.description}
+
+ {#if isModalOpen}
+
+ {/if}
+
+ Materialen
+
+ {#each game.materials as material}
+ -
+ {material.name}
+
+ {/each}
+
+
+ Spelregels
+
+ {#each game.rules as rule}
+ - {rule}
+ {/each}
+
+
+ Variaties
+
+ {#each game.variation as variation}
+ {variation.description}
+
+ {#each variation.actions as action}
+ -
+ {action}
+
+ {/each}
+
+ {/each}
+
+
+
+ 
+
+
+{#if game.offline}
+ Offline beschikbaar uit
+{:else}
+ Offline beschikbaar aan
+{/if}
+
+
diff --git a/src/routes/games/_api.ts b/src/routes/games/_api.ts
new file mode 100644
index 00000000..3c66fb9d
--- /dev/null
+++ b/src/routes/games/_api.ts
@@ -0,0 +1,22 @@
+import type { JSONValue, ServerRequest } from '@sveltejs/kit/types/endpoint';
+
+import { BASE_API_URL } from '$lib/Env';
+
+export async function api(
+ request: Request | ServerRequest,
+ resource: string,
+ data?: Record
+): Promise<{ status: number; body: JSONValue }> {
+ const res = await fetch(`${BASE_API_URL}/${resource}`, {
+ method: request.method,
+ headers: {
+ 'content-type': 'application/json'
+ },
+ body: data && JSON.stringify(data)
+ });
+
+ return {
+ status: res.status,
+ body: await res.json()
+ };
+}
diff --git a/src/routes/games/index.json.ts b/src/routes/games/index.json.ts
new file mode 100644
index 00000000..ea7e28da
--- /dev/null
+++ b/src/routes/games/index.json.ts
@@ -0,0 +1,7 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { api } from './_api';
+
+export const get: RequestHandler = async (request) => {
+ const response = await api(request, 'games');
+ return response;
+};
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 977b61f3..75b4a94a 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,47 +1,74 @@
-
@@ -49,9 +76,23 @@
Goedemorgen!
-
+{#if !offline}
+
+{/if}
-
+
diff --git a/src/routes/spel/fopbal.svelte b/src/routes/spel/fopbal.svelte
deleted file mode 100644
index a0672efd..00000000
--- a/src/routes/spel/fopbal.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
diff --git a/src/routes/spel/kat-en-muis.svelte b/src/routes/spel/kat-en-muis.svelte
deleted file mode 100644
index d45e5762..00000000
--- a/src/routes/spel/kat-en-muis.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
diff --git a/src/routes/spel/leeuwenkooi.svelte b/src/routes/spel/leeuwenkooi.svelte
deleted file mode 100644
index 014e8acd..00000000
--- a/src/routes/spel/leeuwenkooi.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
diff --git a/src/routes/spel/pionnenroof.svelte b/src/routes/spel/pionnenroof.svelte
deleted file mode 100644
index 2f8d6226..00000000
--- a/src/routes/spel/pionnenroof.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-
-
-
diff --git a/src/service-worker.ts b/src/service-worker.ts
new file mode 100644
index 00000000..77123544
--- /dev/null
+++ b/src/service-worker.ts
@@ -0,0 +1,72 @@
+import type { Game } from '$lib/games';
+import { build, timestamp, files } from '$service-worker';
+
+declare const self;
+
+const applicationCache = `applicationCache-v${timestamp}`;
+const staticCache = `staticCache-v${timestamp}`;
+
+// Caches the svelte app (not the data)
+self.addEventListener('install', (event) => {
+ event.waitUntil(
+ Promise.all([
+ caches.open('gameCacheSSR').then((cache) => cache.add('/')),
+ caches.open(applicationCache).then((cache) => cache.addAll(build)),
+ caches.open(staticCache).then((cache) => cache.addAll(files))
+ ])
+ .then(self.skipWaiting())
+ .then(() => console.log('installed'))
+ );
+});
+
+// Removes old caches
+self.addEventListener('activate', (event) => {
+ event.waitUntil(
+ clients.claim(),
+ caches
+ .keys()
+ .then((keys) => {
+ return Promise.all(
+ keys
+ .filter(
+ (key) =>
+ key !== applicationCache &&
+ key !== staticCache &&
+ key !== 'gameCache' &&
+ key !== 'gameCacheSSR'
+ )
+ .map((key) => caches.delete(key))
+ );
+ })
+ .then(self.skipWaiting())
+ .then(() => console.log('activated'))
+ );
+});
+
+self.addEventListener('fetch', (event) => {
+ const request: Request = event.request;
+ const requestURL = new URL(request.url);
+
+ if (/(games\.json)/.test(requestURL.pathname)) {
+ const returnOfflineGames = () => {
+ return fetch(event.request).catch((error) => {
+ return caches
+ .open('gamesCache')
+ .then((cache) => {
+ return cache.keys().then((cacheKeys) => {
+ return Promise.all(cacheKeys.map((cacheKey) => cache.match(cacheKey)));
+ });
+ })
+ .then((cachesResponses) => {
+ return Promise.all(cachesResponses.map((response) => response.json()));
+ })
+ .then((games) => {
+ const response = new Response(JSON.stringify(games), { statusText: 'offline' });
+ return response;
+ });
+ });
+ };
+
+ event.respondWith(returnOfflineGames());
+ } else event.respondWith(caches.match(request).then((cacheRes) => cacheRes || fetch(request)));
+});
diff --git a/static/icons/edit.svg b/static/icons/edit.svg
new file mode 100644
index 00000000..c8a9710b
--- /dev/null
+++ b/static/icons/edit.svg
@@ -0,0 +1,53 @@
+
+
+
diff --git a/static/logo-192.png b/static/logo-192.png
new file mode 100644
index 00000000..92c87e59
Binary files /dev/null and b/static/logo-192.png differ
diff --git a/static/logo-512.png b/static/logo-512.png
new file mode 100644
index 00000000..20229e04
Binary files /dev/null and b/static/logo-512.png differ
diff --git a/static/manifest.json b/static/manifest.json
new file mode 100644
index 00000000..2e500c72
--- /dev/null
+++ b/static/manifest.json
@@ -0,0 +1,20 @@
+{
+ "background_color": "#ffffff",
+ "theme_color": "#ffbfad",
+ "name": "Jungle Gym",
+ "short_name": "Jungle Gym",
+ "display": "minimal-ui",
+ "start_url": "/",
+ "icons": [
+ {
+ "src": "logo-192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "logo-512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 26bd54ce..2f08b539 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -10,7 +10,10 @@ const config = {
kit: {
// hydrate the element in src/app.html
target: '#svelte',
- adapter: netlify()
+ adapter: netlify(),
+ files: {
+ serviceWorker: 'src/service-worker'
+ }
}
};