First working example with Svelte (the menu icon shows up on entering the game)

front/dist/index.tmpl.html

@@ -38,6 +38,8 @@
         <div class="main-container" id="main-container">
             <!-- Create the editor container -->
             <div id="game" class="game">
+                <div id="svelte-overlay">
+                </div>
                 <div id="game-overlay" class="game-overlay">
                     <div id="main-section" class="main-section">
                     </div>

front/dist/resources/style/style.css

@@ -1225,3 +1225,11 @@ div.action.danger p.action-body{
     50% {bottom: 30px;}
     100% {bottom: 40px;}
 }
+
+
+#svelte-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}

front/src/Components/App.svelte

@@ -1,6 +1,11 @@
 <script lang="typescript">
+    import MenuIcon from "./Menu/MenuIcon.svelte";
+    import {menuIconVisible} from "../Stores/MenuStore";
 
 </script>
 
 <div>
+    {#if $menuIconVisible}
+    <MenuIcon  />
+    {/if}
 </div>

front/src/Components/Menu/MenuIcon.svelte

@@ -0,0 +1,33 @@
+<script lang="typescript">
+
+</script>
+
+<main class="menuIcon">
+    <section>
+        <button>
+            <img src="/static/images/menu.svg" alt="Open menu">
+        </button>
+    </section>
+</main>
+
+<style>
+    .menuIcon button {
+        background-color: black;
+        color: white;
+        border-radius: 7px;
+        padding: 2px 8px;
+    }
+    .menuIcon button img{
+        width: 14px;
+        padding-top: 0;
+        /*cursor: url('/resources/logos/cursor_pointer.png'), pointer;*/
+    }
+    .menuIcon section {
+        margin: 10px;
+    }
+    @media only screen and (max-height: 700px) {
+        .menuIcon section {
+            margin: 2px;
+        }
+    }
+</style>

front/src/Phaser/Menu/MenuScene.ts

@@ -9,6 +9,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager";
 import {GameConnexionTypes} from "../../Url/UrlManager";
 import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Components/WarningContainer";
 import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
+import {menuIconVisible} from "../../Stores/MenuStore";
 
 export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
@@ -53,6 +54,7 @@ export class MenuScene extends Phaser.Scene {
     }
 
     create() {
+        menuIconVisible.set(true);
         this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
         this.menuElement.setOrigin(0);
         MenuScene.revealMenusAfterInit(this.menuElement, 'gameMenu');

front/src/Stores/MenuStore.ts

@@ -0,0 +1,3 @@
+import { derived, writable, Writable } from "svelte/store";
+
+export const menuIconVisible = writable(false);

front/src/index.ts

@@ -151,7 +151,7 @@ coWebsiteManager.onResize.subscribe(() => {
 iframeListener.init();
 
 const app = new App({
-    target: document.body,
+    target: HtmlUtils.getElementByIdOrFail('svelte-overlay'),
     props: { },
 })
 

front/webpack.config.ts

@@ -60,7 +60,8 @@ module.exports = {
                             noPreserveState: false,
                             optimistic: true,
                         },
-                        preprocess: SveltePreprocess({
+                        // FIXME: SveltePreprocess does not work here
+                        /*preprocess: SveltePreprocess({
                             scss: true,
                             sass: true,
                             postcss: {
@@ -68,7 +69,7 @@ module.exports = {
                                     Autoprefixer
                                 ]
                             }
-                        })
+                        })*/
                     }
                 }
             },