add svelte local-app

desktop/local-app/src/App.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { Router, Route } from "svelte-navigator";
+
+    import Sidebar from "./lib/Sidebar.svelte";
+
+    import LazyRoute from "./lib/LazyRoute.svelte";
+
+    const Home = () => import("./views/Home.svelte");
+    const AddServer = () => import("./views/AddServer.svelte");
+
+    let insideElectron = window?.WorkAdventureDesktopApi?.desktop;
+</script>
+
+{#if insideElectron}
+    <Router>
+        <Sidebar />
+        <main class="flex flex-grow">
+            <LazyRoute path="/" component={Home} delayMs={500}>Loading ...</LazyRoute>
+            <LazyRoute path="/server/add" component={AddServer} delayMs={500}>Loading ...</LazyRoute>
+            <Route>
+                <h3>404</h3>
+                <p>No Route could be matched.</p>
+            </Route>
+        </main>
+    </Router>
+{:else}
+    <main class="flex flex-grow justify-center items-center">Please open the app inside of Electron.</main>
+{/if}
+
+<style>
+    :root {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+            "Helvetica Neue", sans-serif;
+    }
+
+    main {
+        background-color: #30343d;
+    }
+</style>

desktop/local-app/src/lib/Lazy.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { onMount } from "svelte";
+
+	export let component;
+	export let delayMs = null;
+
+	let loadedComponent = null;
+	let timeout;
+	let showFallback = !delayMs;
+
+	let props;
+	$: {
+		// eslint-disable-next-line no-shadow
+		const { component, delayMs, ...restProps } = $$props;
+		props = restProps;
+	}
+
+	onMount(() => {
+		if (delayMs) {
+			timeout = setTimeout(() => {
+				showFallback = true;
+			}, delayMs);
+		}
+		component().then(module => {
+			loadedComponent = module.default;
+		});
+		return () => clearTimeout(timeout);
+	});
+</script>
+
+{#if loadedComponent}
+	<svelte:component this={loadedComponent} {...props} />
+{:else if showFallback}
+	<slot />
+{/if}

desktop/local-app/src/lib/LazyRoute.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { Route } from "svelte-navigator";
+	import Lazy from "./Lazy.svelte";
+
+	export let component;
+	export let delayMs = null;
+
+	let props;
+	$: {
+		// eslint-disable-next-line no-shadow
+		const { component, ...restProps } = $$props;
+		props = restProps;
+	}
+</script>
+
+<Route {...props}>
+	<Lazy {component} {delayMs}>
+		<slot />
+	</Lazy>
+</Route>

desktop/local-app/src/lib/Link.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { navigate } from "svelte-navigator";
+
+	let to = '/';
+	let clazz = '';
+
+	export { clazz as class, to };
+
+
+  async function click() {
+    await window?.WorkAdventureDesktopApi?.showLocalApp();
+    navigate(to);
+  }
+</script>
+
+<div on:click="{ click }" class="{`${clazz}`}">
+  <slot />
+</div>

desktop/local-app/src/lib/Sidebar.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import Link from "./Link.svelte";
+    import { servers, selectedServer, selectServer, loadServers } from "../store";
+
+    let isDevelopment = false;
+
+    onMount(async () => {
+        await loadServers();
+        isDevelopment = await window?.WorkAdventureDesktopApi?.isDevelopment();
+    });
+</script>
+
+<aside class="flex flex-col bg-gray-700 items-center">
+    <div class="flex flex-col mt-4 space-y-4">
+        {#each $servers as server}
+            <div class="flex flex-col items-center justify-center text-gray-400">
+                <div
+                    class={`w-12 h-12 rounded-lg flex cursor-pointer text-center items-center justify-center bg-yellow-500 text-light-50 ${
+                        $selectedServer === server._id ? "" : ""
+                    }`}
+                    on:click={() => selectServer(server)}
+                >
+                    {server.name.slice(0, 2)}
+                </div>
+            </div>
+        {/each}
+        <Link
+            to="/server/add"
+            class="flex justify-center items-center text-4xl no-underline text-gray-400 cursor-pointer">+</Link
+        >
+    </div>
+    {#if isDevelopment}
+        <button class="mt-auto" on:click={() => location.reload()}>Refresh</button>
+    {/if}
+</aside>
+
+<style>
+    aside {
+        width: 70px;
+        /* background-color: #2b2f37; */
+
+        /* color: #62727c;
+        border: 1px solid #62727c; */
+
+        /* border-color: #e1e4e8;
+        color: #e1e4e8; */
+    }
+</style>

desktop/local-app/src/main.ts

@@ -0,0 +1,8 @@
+import "virtual:windi.css";
+import App from "./App.svelte";
+
+const app = new App({
+    target: document.getElementById("app"),
+});
+
+export default app;

desktop/local-app/src/store.ts

@@ -0,0 +1,30 @@
+import { writable, get } from "svelte/store";
+
+type Server = {
+    _id: string;
+    name: string;
+    url: string;
+};
+
+export const newServer = writable<Omit<Server, "_id">>({
+    name: "",
+    url: "",
+});
+export const servers = writable<Server[]>([]);
+export const selectedServer = writable<string | undefined>(undefined);
+
+export async function selectServer(server: Server) {
+    await window.WorkAdventureDesktopApi.selectServer(server._id);
+    selectedServer.set(server._id);
+}
+
+export async function addServer(event: Event) {
+    const addedServer = await window?.WorkAdventureDesktopApi?.addServer(get(newServer));
+    newServer.set({ name: "", url: "" });
+    servers.update((s) => [...s, addedServer]);
+    await selectServer(addedServer);
+}
+
+export async function loadServers() {
+    servers.set(await window.WorkAdventureDesktopApi.getServers());
+}

desktop/local-app/src/views/AddServer.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+import { newServer, addServer } from '../store';
+</script>
+
+<div class="flex w-full h-full justify-center items-center">
+
+  <form class="flex flex-col justify-center space-y-2" on:submit|preventDefault={addServer}>
+    <input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Name" required bind:value={$newServer.name}>
+    <input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Url" required bind:value={$newServer.url}>
+    <input type="submit" value="Add server" />
+  </form>
+</div>

desktop/local-app/src/views/Home.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+    import logo from "../../../assets/icons/logo-text.png";
+</script>
+
+<div class="flex w-full h-full justify-center items-center">
+  <img src={logo} alt="WorkAdeventure logo" />
+</div>

desktop/local-app/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />