Naaturel/unluckiest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle data loading during SSR

Browse Source
This commit is contained in:
Laurent
2024-10-27 18:02:59 +01:00
parent 29ed897de5
commit 7ae4bb346d
11 changed files with 46 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/.gitignore vendored
View File

@@ -131,3 +131,4 @@ dist
/build/ /build/
/.svelte-kit/ /.svelte-kit/
/.svelte-kit/ /.svelte-kit/
/.svelte-kit/

4
front/.svelte-kit/ambient.d.ts vendored
View File

@@ -42,7 +42,7 @@ declare module '$env/static/private' {
export const DB_USER: string; export const DB_USER: string;
export const DriverData: string; export const DriverData: string;
export const EDITOR: string; export const EDITOR: string;
export const EFC_10816: string; export const EFC_10388: string;
export const ffmpeg: string; export const ffmpeg: string;
export const FPS_BROWSER_APP_PROFILE_STRING: string; export const FPS_BROWSER_APP_PROFILE_STRING: string;
export const FPS_BROWSER_USER_PROFILE_STRING: string; export const FPS_BROWSER_USER_PROFILE_STRING: string;
@@ -150,7 +150,7 @@ declare module '$env/dynamic/private' {
DB_USER: string; DB_USER: string;
DriverData: string; DriverData: string;
EDITOR: string; EDITOR: string;
EFC_10816: string; EFC_10388: string;
ffmpeg: string; ffmpeg: string;
FPS_BROWSER_APP_PROFILE_STRING: string; FPS_BROWSER_APP_PROFILE_STRING: string;
FPS_BROWSER_USER_PROFILE_STRING: string; FPS_BROWSER_USER_PROFILE_STRING: string;

2
front/.svelte-kit/generated/client/app.js
View File

@@ -11,7 +11,7 @@ export const nodes = [
export const server_loads = []; export const server_loads = [];
export const dictionary = { export const dictionary = {
"/": [2], "/": [~2],
"/about": [3], "/about": [3],
"/play": [4] "/play": [4]
}; };

2
front/.svelte-kit/generated/server/internal.js
View File

@@ -21,7 +21,7 @@ export const options = {
app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Unluckiest</title>\n\n\t\t<link rel=\"stylesheet\"\n\t\t\t href=\"https://fonts.googleapis.com/css?family=Afacad+Flux\">\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: 'Afacad Flux', serif;\n\t\t\t\tfont-size: 48px;\n\t\t\t}\n\t\t</style>\n\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/app.css\" />\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/menu.css\" />\n\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">" + body + "</div>\n\t</body>\n</html>\n", app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<title>Unluckiest</title>\n\n\t\t<link rel=\"stylesheet\"\n\t\t\t href=\"https://fonts.googleapis.com/css?family=Afacad+Flux\">\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tfont-family: 'Afacad Flux', serif;\n\t\t\t\tfont-size: 48px;\n\t\t\t}\n\t\t</style>\n\n\t\t<meta charset=\"utf-8\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/app.css\" />\n\t\t<link rel=\"stylesheet\" href=\"" + assets + "/style/menu.css\" />\n\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div style=\"display: contents\">" + body + "</div>\n\t</body>\n</html>\n",
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n" error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
}, },
version_hash: "1itsftj" version_hash: "3iwm3b"
}; };
export async function get_hooks() { export async function get_hooks() {

4
front/.svelte-kit/types/route_meta_data.json
View File

@@ -1,5 +1,7 @@
{ {
"/": [], "/": [
"src/routes/+page.server.ts"
],
"/about": [], "/about": [],
"/play": [] "/play": []
} }

13
front/.svelte-kit/types/src/routes/$types.d.ts vendored
View File

@@ -11,12 +11,19 @@ type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Pa
type EnsureDefined<T> = T extends null | undefined ? {} : T; type EnsureDefined<T> = T extends null | undefined ? {} : T;
type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never; type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
export type Snapshot<T = any> = Kit.Snapshot<T>; export type Snapshot<T = any> = Kit.Snapshot<T>;
type PageServerParentData = EnsureDefined<LayoutServerData>;
type PageParentData = EnsureDefined<LayoutData>; type PageParentData = EnsureDefined<LayoutData>;
type LayoutRouteId = RouteId | "/" | "/about" | "/play" | null type LayoutRouteId = RouteId | "/" | "/about" | "/play" | null
type LayoutParams = RouteParams & { } type LayoutParams = RouteParams & { }
type LayoutParentData = EnsureDefined<{}>; type LayoutParentData = EnsureDefined<{}>;
export type PageServerData = null; export type PageServerLoad<OutputData extends OutputDataShape<PageServerParentData> = OutputDataShape<PageServerParentData>> = Kit.ServerLoad<RouteParams, PageServerParentData, OutputData, RouteId>;
export type PageData = Expand<PageParentData>; export type PageServerLoadEvent = Parameters<PageServerLoad>[0];
export type ActionData = unknown;
export type PageServerData = Expand<OptionalUnion<EnsureDefined<Kit.LoadProperties<Awaited<ReturnType<typeof import('../../../../src/routes/+page.server.js').load>>>>>>;
export type PageData = Expand<Omit<PageParentData, keyof PageServerData> & EnsureDefined<PageServerData>>;
export type Action<OutputData extends Record<string, any> | void = Record<string, any> | void> = Kit.Action<RouteParams, OutputData, RouteId>
export type Actions<OutputData extends Record<string, any> | void = Record<string, any> | void> = Kit.Actions<RouteParams, OutputData, RouteId>
export type LayoutServerData = null; export type LayoutServerData = null;
export type LayoutData = Expand<LayoutParentData>; export type LayoutData = Expand<LayoutParentData>;
export type RequestEvent = Kit.RequestEvent<RouteParams, RouteId>;

5
front/src/lib/stores/scoreStore.ts
View File

@@ -26,9 +26,8 @@ function createStore(){
}); });
}, },
loadData: async () => { load: (data : Score[]) => {
if(scores.length !== 0) return; let res = sort(data);
let res = sort(await getLeaderboard());
set(res); set(res);
}, },
}; };

10
front/src/routes/+page.server.ts Normal file
View File

@@ -0,0 +1,10 @@
const api_url = import.meta.env.VITE_SERVER_API_URL
// @ts-ignore
export const load = async ( {fetch} ) => {
const res = await fetch(`${api_url}/leaderboard`)
const leaderboard = await res.json()
return { leaderboard };
}

10
front/src/routes/+page.svelte
View File

@@ -1,11 +1,13 @@
<script> <script>
import { onMount } from 'svelte';
import { scoreStore } from "$lib/stores/scoreStore.ts";
import LeaderBoard from "$lib/components/LeaderBoard.svelte"; import LeaderBoard from "$lib/components/LeaderBoard.svelte";
import {scoreStore} from "$lib/stores/scoreStore.ts";
import {onMount} from "svelte";
let { data } = $props()
onMount(async () => { onMount(async () => {
await scoreStore.loadData(); scoreStore.load(data.leaderboard)
}); } )
</script> </script>

3
front/src/routes/play/+page.svelte
View File

@@ -98,11 +98,12 @@
button button
{ {
background-color: #f1ecec;
color: black; color: black;
width: 18vw; width: 18vw;
height: 15vh; height: 15vh;
border-radius: 10px; border-radius: 10px;
background-color: #f1ecec;
border: 2px solid #A1674A; border: 2px solid #A1674A;
box-shadow: 0 0 10px #343232; box-shadow: 0 0 10px #343232;
} }

9
front/static/style/app.css
View File

@@ -18,7 +18,14 @@ h1
html html
{ {
background: linear-gradient(45deg, #b9b9c9, #d2379b); background-image: url("../images/background.png");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
/*background: linear-gradient(45deg, #b9b9c9, #d2379b);*/
} }
body body