Init back project

front/src/lib/assets/github-mark-white.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>

front/src/lib/assets/twitter-mark-white.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"/></svg>

front/src/lib/components/LeaderBoard.svelte

@@ -0,0 +1,72 @@
+<script>
+
+    export let scores = []
+
+</script>
+
+<ul class="leaderboard">
+
+    {#each scores as score, i}
+        <li class="item">
+            <div class="name"><img src="" alt=""/> {score.playerName} </div><div class="score"> {score.value} pts.</div>
+        </li>
+    {/each}
+
+</ul>
+
+<style>
+
+    .leaderboard
+    {
+        display: flex;
+        flex-direction: column;
+
+        width: 60vw;
+        height: 65vh;
+
+        padding: 0 2vw 2vw 2vw;
+        overflow: scroll;
+        overflow-x: hidden;
+    }
+
+    .leaderboard::-webkit-scrollbar {
+        display: none;
+    }
+
+    li
+    {
+        display: flex;
+        justify-content: space-around;
+        padding: 1.25vh;
+        margin: 1.5vh;
+        border: 2px solid #A1674A;
+        border-radius: 10px;
+        background-color: #f1ecec;
+        box-shadow: 0 0 10px #343232;
+    }
+
+    li:hover
+    {
+        transform: scale(1.075);
+        background-color: #F5F5F5;
+    }
+
+    .name, .score
+    {
+        color: black;
+        margin-left: 3vh;
+    }
+
+    .name
+    {
+        flex-grow: 100;
+        border-right: 1px solid #A1674A;
+    }
+
+    .score
+    {
+        flex-grow: 20;
+        text-align: center;
+    }
+
+</style>

front/src/lib/components/ListItem.svelte

@@ -0,0 +1,3 @@
+<li class="item">
+    <slot></slot>
+</li>

front/src/lib/components/NavLink.svelte

@@ -0,0 +1,36 @@
+<script>
+
+    export let link = ""
+
+</script>
+
+<a class="bordered" href={link}>
+    <slot/>
+</a>
+
+<style>
+
+    a
+    {
+        color: #f1ecec;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        padding: 1vh 2vh;
+
+        width: var(--width, fit-content);
+        height: var(--height, 3vh);
+
+        text-decoration: var(--text-decoration, none);
+        margin-top: var(--margin-top, 0vh);
+
+    }
+
+    a:hover
+    {
+        transform: scale(1.1);
+        color: #303633;
+    }
+
+</style>

front/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

front/src/lib/models/score.ts

@@ -0,0 +1,11 @@
+export class Score {
+
+    readonly playerName : string;
+    readonly value: number;
+
+    constructor({playerName = "", value = 0}) {
+        this.playerName = playerName;
+        this.value = value;
+    }
+
+}

front/src/lib/stores/scoreStore.ts

@@ -0,0 +1,34 @@
+import {writable} from "svelte/store";
+import {Score} from "../models/score";
+import {browser} from "$app/environment"
+
+let localStorageKey = "scores"
+
+function isBrowser() {
+    return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
+}
+
+function createStore(){
+
+    const storedValue = isBrowser() ? localStorage.getItem(localStorageKey) : null;
+
+    const { set, update, subscribe } = writable<Score[]>(!storedValue ? [] : JSON.parse(storedValue));
+
+    if (isBrowser()) subscribe(value => localStorage.setItem(localStorageKey, JSON.stringify(value)));
+
+    return {
+        update,
+        subscribe,
+        set : (value : Score[]) => set(!value ? [] : value),
+        reset : () => set([]),
+        add : (playerName : string, value : number) =>  {
+            update(scores => {
+                let s = [...scores, new Score({playerName : playerName, value : value})];
+                if(s.length >= 2) s.sort((s1 : Score, s2 : Score) =>  s1.value - s2.value)
+                return s;
+            });
+        }
+    };
+}
+
+export const scoreStore = createStore();