Data is retrieved from API

front/src/lib/components/LeaderBoard.svelte

@@ -8,7 +8,7 @@
 
     {#each scores as score, i}
         <li class="item">
-            <div class="name"><img src="" alt=""/> {score.playerName} </div><div class="score"> {score.value} pts.</div>
+            <div class="name"><img src="" alt=""/> {score.owner} </div><div class="score"> {score.value} pts.</div>
         </li>
     {/each}
 

front/src/lib/stores/requests.ts

@@ -0,0 +1,31 @@
+import {scoreStore} from "./scoreStore";
+import {Score} from "../models/score";
+
+export async function submitScore(owner: string, value : number){
+    return await handleRequest("http://localhost:8080/api/submit/",
+        {
+            method:"POST",
+            body : JSON.stringify({owner:owner, value:value}),
+            headers: new Headers({'content-type': 'application/json'})
+        });
+}
+
+export async function getLeaderboard(){
+    return await handleRequest("http://localhost:8080/api/leaderboard",
+        { method:"GET" });
+}
+
+async function handleRequest(url : string, init : object){
+    return await fetch(url, init)
+        .then(response => {
+            if(response.status === 500) throw new Error(`${response.text()}`);
+            if(!response.ok) throw new Error(`${response.status} : ${response.body}`);
+            return response
+        })
+        .then(response => {
+            return response.json();
+        })
+        .catch(error => {
+            return `Exception: ${error.message}`;
+        });
+}

front/src/lib/stores/scoreStore.ts

@@ -1,6 +1,7 @@
 import {writable} from "svelte/store";
 import {Score} from "../models/score";
 import {browser} from "$app/environment"
+import {getLeaderboard} from "./requests";
 
 let localStorageKey = "scores"
 
@@ -8,13 +9,12 @@ function isBrowser() {
     return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
 }
 
-function createStore(){
+function createStore(scores : Score[]){
+    //const storedValue = isBrowser() ? localStorage.getItem(localStorageKey) : null;
 
-    const storedValue = isBrowser() ? localStorage.getItem(localStorageKey) : null;
+    const { set, update, subscribe } = writable<Score[]>(scores);
 
-    const { set, update, subscribe } = writable<Score[]>(!storedValue ? [] : JSON.parse(storedValue));
-
-    if (isBrowser()) subscribe(value => localStorage.setItem(localStorageKey, JSON.stringify(value)));
+    //if (isBrowser()) subscribe(value => localStorage.setItem(localStorageKey, JSON.stringify(value)));
 
     return {
         update,
@@ -31,4 +31,9 @@ function createStore(){
     };
 }
 
-export const scoreStore = createStore();
+async function createStoreFromAPI(){
+    let scores = await getLeaderboard();
+    return createStore(scores)
+}
+
+export const scoreStore= createStoreFromAPI();

front/src/routes/+page.svelte

@@ -1,7 +1,18 @@
 <script>
-    import {scoreStore} from "$lib/stores/scoreStore.ts"
+    import { onMount } from 'svelte';
+    import { scoreStore } from "$lib/stores/scoreStore.ts";
     import LeaderBoard from "$lib/components/LeaderBoard.svelte";
 
+    let scores;
+
+    onMount(async () => {
+        scores = await scoreStore;
+    });
+
 </script>
 
-<LeaderBoard bind:scores={$scoreStore}></LeaderBoard>
+{#if scores}
+    <LeaderBoard bind:scores={$scores}></LeaderBoard>
+{:else}
+    <p>Loading leaderboard...</p>
+{/if}