added world menu

front/src/Components/Menu/Menu.svelte

@@ -2,6 +2,7 @@
     import {fly} from "svelte/transition";
     import SettingsSubMenu from "./SettingsSubMenu.svelte";
     import ProfileSubMenu from "./ProfileSubMenu.svelte";
+    import WorldsSubMenu from "./WorldsSubMenu.svelte";
     import CreateMapSubMenu from "./CreateMapSubMenu.svelte";
     import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
     import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
@@ -52,6 +53,9 @@
                 case SubMenusInterface.profile:
                     activeComponent = ProfileSubMenu;
                     break;
+                case SubMenusInterface.worlds:
+                    activeComponent = WorldsSubMenu;
+                    break;
                 case SubMenusInterface.createMap:
                     activeComponent = CreateMapSubMenu;
                     break;

front/src/Components/Menu/ProfileSubMenu.svelte

@@ -48,6 +48,13 @@
 </script>
 
 <div class="customize-main">
+    <section>
+        <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
+        <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
+    </section>
+    <section>
+        <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>Setup camera</button>
+    </section>
     {#if $userIsConnected}
     <section>
         {#if PROFILE_URL != undefined}
@@ -58,27 +65,23 @@
         <button type="button" class="nes-btn" on:click|preventDefault={logOut}>Log out</button>
     </section>
     {:else}
-        <section>
-            <a type="button" class="nes-btn" href="/login">Sign in</a>
-        </section>
+    <section>
+        <a type="button" class="nes-btn" href="/login">Sign in</a>
+    </section>
     {/if}
-    <section>
-        <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>Edit Skin</button>
-        <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>Edit Companion</button>
-    </section>
-    <section>
-        <button type="button" class="nes-btn" on:click|preventDefault={openEnableCameraScene}>Setup camera</button>
-    </section>
 </div>
 
 <style lang="scss">
-    div.customize-main{
-      section {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: wrap;
-        margin-bottom: 20px;
+    div.customize-main {
+        overflow-y: auto;
+        height: 90%;
+
+        section {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-bottom: 20px;
 
             iframe {
                 width: 100%;

front/src/Components/Menu/WorldsSubMenu.svelte

@@ -0,0 +1,42 @@
+<script lang="typescript">
+    import { connectionManager } from "../../Connexion/ConnectionManager";
+    import type { World } from "../../Connexion/World";
+
+
+    let worlds = connectionManager.getWorlds();
+
+
+    function worldRoomId(world: World) {
+        return world.roomId;
+    }    
+    
+    function worldRoomName(world: World) {
+        return world.roomId.replace(window.location.origin + "/", "");
+    }
+
+    function worldPlayer(world: World) {
+        return world.player;
+    }
+
+</script>
+
+<div class="customize-main">
+    {#await worlds then data}
+    <table class="nes-table is-bordered is-dark">
+        {#each data as world}
+        <tr>
+            <td><a href="{worldRoomId(world)}">{worldRoomName(world)}</a></td>
+            <td>{worldPlayer(world)}</td>
+        </tr>
+        {/each}
+    </table>
+    {/await}
+</div>
+
+<style lang="scss">
+    div.customize-main {
+        table.nes-table {
+            width: 100%;
+        }
+    }
+</style>