Merge branch 'develop' of github.com:thecodingmachine/workadventure into develop

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/package.json

@@ -4,21 +4,30 @@
   "main": "index.js",
   "license": "SEE LICENSE IN LICENSE.txt",
   "devDependencies": {
+    "@tsconfig/svelte": "^1.0.10",
     "@types/google-protobuf": "^3.7.3",
     "@types/jasmine": "^3.5.10",
+    "@types/mini-css-extract-plugin": "^1.4.3",
+    "@types/node": "^15.3.0",
     "@types/quill": "^1.3.7",
     "@types/webpack-dev-server": "^3.11.4",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
     "css-loader": "^5.2.4",
     "eslint": "^7.26.0",
+    "fork-ts-checker-webpack-plugin": "^6.2.9",
     "html-webpack-plugin": "^5.3.1",
     "jasmine": "^3.5.0",
     "mini-css-extract-plugin": "^1.6.0",
+    "node-polyfill-webpack-plugin": "^1.1.2",
     "sass": "^1.32.12",
     "sass-loader": "^11.1.0",
+    "svelte": "^3.38.2",
+    "svelte-loader": "^3.1.1",
+    "svelte-preprocess": "^4.7.3",
     "ts-loader": "^9.1.2",
     "ts-node": "^9.1.1",
+    "tsconfig-paths": "^3.9.0",
     "typescript": "^4.2.4",
     "webpack": "^5.37.0",
     "webpack-cli": "^4.7.0",
@@ -39,9 +48,9 @@
     "socket.io-client": "^2.3.0"
   },
   "scripts": {
-    "start": "webpack serve --open",
-    "build": "NODE_ENV=production webpack",
-    "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
+    "start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
+    "build": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
+    "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",
     "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"
   }

front/src/Components/App.svelte

@@ -0,0 +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 lang="scss">
+    .menuIcon button {
+        background-color: black;
+        color: white;
+        border-radius: 7px;
+        padding: 2px 8px;
+        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/Enum/EnvironmentVariable.ts

@@ -4,8 +4,8 @@ const PUSHER_URL = process.env.PUSHER_URL || '//pusher.workadventure.localhost';
 const UPLOADER_URL = process.env.UPLOADER_URL || '//uploader.workadventure.localhost';
 const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302";
 const TURN_SERVER: string = process.env.TURN_SERVER || "";
-const SKIP_RENDER_OPTIMIZATIONS: boolean = !!(process.env.SKIP_RENDER_OPTIMIZATIONS);
-const DISABLE_NOTIFICATIONS: boolean = !!(process.env.DISABLE_NOTIFICATIONS);
+const SKIP_RENDER_OPTIMIZATIONS: boolean = process.env.SKIP_RENDER_OPTIMIZATIONS == "true";
+const DISABLE_NOTIFICATIONS: boolean = process.env.DISABLE_NOTIFICATIONS == "true";
 const TURN_USER: string = process.env.TURN_USER || '';
 const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
 const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;

front/src/Phaser/Game/Game.ts

@@ -1,4 +1,7 @@
 import {SKIP_RENDER_OPTIMIZATIONS} from "../../Enum/EnvironmentVariable";
+import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {ResizableScene} from "../Login/ResizableScene";
 
 const Events = Phaser.Core.Events;
 
@@ -7,8 +10,27 @@ const Events = Phaser.Core.Events;
  * It comes with an optimization to skip rendering.
  *
  * Beware, the "step" function might vary in future versions of Phaser.
+ *
+ * It also automatically calls "onResize" on any scenes extending ResizableScene.
  */
 export class Game extends Phaser.Game {
+
+    private _isDirty = false;
+
+
+    constructor(GameConfig: Phaser.Types.Core.GameConfig) {
+        super(GameConfig);
+
+        window.addEventListener('resize', (event) => {
+            // Let's trigger the onResize method of any active scene that is a ResizableScene
+            for (const scene of this.scene.getScenes(true)) {
+                if (scene instanceof ResizableScene) {
+                    scene.onResize(event);
+                }
+            }
+        });
+    }
+
     public step(time: number, delta: number)
     {
         // @ts-ignore
@@ -64,6 +86,11 @@ export class Game extends Phaser.Game {
     }
 
     private isDirty(): boolean {
+        if (this._isDirty) {
+            this._isDirty = false;
+            return true;
+        }
+
         //  Loop through the scenes in forward order
         for (let i = 0; i < this.scene.scenes.length; i++)
         {
@@ -87,4 +114,11 @@ export class Game extends Phaser.Game {
 
         return false;
     }
+
+    /**
+     * Marks the game as needing to be redrawn.
+     */
+    public markDirty(): void {
+        this._isDirty = true;
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -186,6 +186,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
     private originalMapUrl: string|undefined;
     private pinchManager: PinchManager|undefined;
+    private physicsEnabled: boolean = true;
     private mapTransitioning: boolean = false; //used to prevent transitions happenning at the same time.
     private onVisibilityChangeCallback: () => void;
 
@@ -1042,10 +1043,10 @@ ${escapedMessage}
     }
 
     //todo: push that into the gameManager
-    private async loadNextGame(exitSceneIdentifier: string){
+    private loadNextGame(exitSceneIdentifier: string): void {
         const {roomId, hash} = Room.getIdFromIdentifier(exitSceneIdentifier, this.MapUrlFile, this.instance);
         const room = new Room(roomId);
-        await gameManager.loadMap(room, this.scene);
+        gameManager.loadMap(room, this.scene).catch(() => {});
     }
 
     private startUser(layer: ITiledMapTileLayer): PositionInterface {
@@ -1088,6 +1089,7 @@ ${escapedMessage}
 
     createCollisionWithPlayer() {
         this.physics.disableUpdate();
+        this.physicsEnabled = false;
         //add collision layer
         this.Layers.forEach((Layer: Phaser.Tilemaps.TilemapLayer) => {
             this.physics.add.collider(this.CurrentPlayer, Layer, (object1: GameObject, object2: GameObject) => {
@@ -1227,12 +1229,15 @@ ${escapedMessage}
         this.CurrentPlayer.moveUser(delta);
         if (this.CurrentPlayer.isMoving()) {
             this.dirty = true;
-            this.physics.enableUpdate();
-        } else {
+            if (!this.physicsEnabled) {
+                this.physics.enableUpdate();
+                this.physicsEnabled = true;
+            }
+        } else if (this.physicsEnabled) {
             this.physics.disableUpdate();
+            this.physicsEnabled = false;
         }
 
-
         // Let's handle all events
         while (this.pendingEvents.length !== 0) {
             this.dirty = true;

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/Phaser/Services/HdpiManager.ts

@@ -1,4 +1,3 @@
-import ScaleManager = Phaser.Scale.ScaleManager;
 
 interface Size {
     width: number;
@@ -13,8 +12,7 @@ export class HdpiManager {
      * @param minRecommendedGamePixelsNumber The minimum number of pixels we want to display "by default" to the user
      * @param absoluteMinPixelNumber The very minimum of game pixels to display. Below, we forbid zooming more
      */
-    public constructor(private minRecommendedGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
-    }
+    public constructor(private minRecommendedGamePixelsNumber: number, private absoluteMinPixelNumber: number) {}
 
     /**
      * Returns the optimal size in "game pixels" based on the screen size in "real pixels".
@@ -36,16 +34,12 @@ export class HdpiManager {
             };
         }
 
-        let i = 1;
-
-        while (realPixelNumber > this.minRecommendedGamePixelsNumber * i * i) {
-            i++;
-        }
+        const optimalZoomLevel = this.getOptimalZoomLevel(realPixelNumber);
 
         // Has the canvas more pixels than the screen? This is forbidden
-        if ((i - 1) * this._zoomModifier < 1) {
+        if (optimalZoomLevel * this._zoomModifier < 1) {
             // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
-            this._zoomModifier = 1 / (i - 1);
+            this._zoomModifier = 1 / optimalZoomLevel;
 
             return {
                 game: {
@@ -59,8 +53,8 @@ export class HdpiManager {
             }
         }
 
-        const gameWidth = Math.ceil(realPixelScreenSize.width / (i - 1) / this._zoomModifier);
-        const gameHeight = Math.ceil(realPixelScreenSize.height / (i - 1) / this._zoomModifier);
+        const gameWidth = Math.ceil(realPixelScreenSize.width / optimalZoomLevel / this._zoomModifier);
+        const gameHeight = Math.ceil(realPixelScreenSize.height / optimalZoomLevel / this._zoomModifier);
 
         // Let's ensure we display a minimum of pixels, even if crazily zoomed in.
         if (gameWidth * gameHeight < this.absoluteMinPixelNumber) {
@@ -68,7 +62,7 @@ export class HdpiManager {
             const minGameWidth = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.width / realPixelScreenSize.height);
 
             // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
-            this._zoomModifier = realPixelScreenSize.width / minGameWidth / (i - 1);
+            this._zoomModifier = realPixelScreenSize.width / minGameWidth / optimalZoomLevel;
 
             return {
                 game: {
@@ -89,12 +83,24 @@ export class HdpiManager {
                 height: gameHeight,
             },
             real: {
-                width: Math.ceil(realPixelScreenSize.width / (i - 1)) * (i - 1),
-                height: Math.ceil(realPixelScreenSize.height / (i - 1)) * (i - 1),
+                width: Math.ceil(realPixelScreenSize.width / optimalZoomLevel) * optimalZoomLevel,
+                height: Math.ceil(realPixelScreenSize.height / optimalZoomLevel) * optimalZoomLevel,
             }
         }
     }
 
+    /**
+     * We only accept integer but we make an exception for 1.5
+     */
+    private getOptimalZoomLevel(realPixelNumber: number): number {
+        const result = Math.sqrt(realPixelNumber / this.minRecommendedGamePixelsNumber);
+        if (1.5 <= result && result < 2) {
+            return 1.5
+        } else {
+            return Math.floor(result);
+        }
+    }
+
     public get zoomModifier(): number {
         return this._zoomModifier;
     }

front/src/Phaser/Services/WaScaleManager.ts

@@ -1,18 +1,21 @@
 import {HdpiManager} from "./HdpiManager";
 import ScaleManager = Phaser.Scale.ScaleManager;
 import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
+import type {Game} from "../Game/Game";
 
 
 class WaScaleManager {
     private hdpiManager: HdpiManager;
     private scaleManager!: ScaleManager;
+    private game!: Game;
 
     public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
         this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
     }
 
-    public setScaleManager(scaleManager: ScaleManager) {
-        this.scaleManager = scaleManager;
+    public setGame(game: Game): void {
+        this.scaleManager = game.scale;
+        this.game = game;
     }
 
     public applyNewSize() {
@@ -32,6 +35,8 @@ class WaScaleManager {
         const style = this.scaleManager.canvas.style;
         style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
         style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
+
+        this.game.markDirty();
     }
 
     public get zoomModifier(): number {
@@ -42,6 +47,7 @@ class WaScaleManager {
         this.hdpiManager.zoomModifier = zoomModifier;
         this.applyNewSize();
     }
+
 }
 
 export const waScaleManager = new WaScaleManager(640*480, 196*196);

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

@@ -1,6 +1,6 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
-import "../dist/resources/style/index.scss";
+import "../style/index.scss";
 
 import {DEBUG_MODE, isMobile} from "./Enum/EnvironmentVariable";
 import {LoginScene} from "./Phaser/Login/LoginScene";
@@ -21,6 +21,8 @@ import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobile
 import {HdpiManager} from "./Phaser/Services/HdpiManager";
 import {waScaleManager} from "./Phaser/Services/WaScaleManager";
 import {Game} from "./Phaser/Game/Game";
+import App from './Components/App.svelte';
+import {HtmlUtils} from "./WebRtc/HtmlUtils";
 
 const {width, height} = coWebsiteManager.getGameSize();
 
@@ -127,19 +129,12 @@ const config: GameConfig = {
 //const game = new Phaser.Game(config);
 const game = new Game(config);
 
-waScaleManager.setScaleManager(game.scale);
+waScaleManager.setGame(game);
 
 window.addEventListener('resize', function (event) {
     coWebsiteManager.resetStyle();
 
     waScaleManager.applyNewSize();
-
-    // Let's trigger the onResize method of any active scene that is a ResizableScene
-    for (const scene of game.scene.getScenes(true)) {
-        if (scene instanceof ResizableScene) {
-            scene.onResize(event);
-        }
-    }
 });
 
 coWebsiteManager.onResize.subscribe(() => {
@@ -147,3 +142,10 @@ coWebsiteManager.onResize.subscribe(() => {
 });
 
 iframeListener.init();
+
+const app = new App({
+    target: HtmlUtils.getElementByIdOrFail('svelte-overlay'),
+    props: { },
+})
+
+export default app

front/style/cowebsite.scss

@@ -4,7 +4,7 @@
   position: fixed;
   transition: transform 0.5s;
   background-color: white;
-  
+
   &.loading {
     background-color: gray;
   }
@@ -15,7 +15,7 @@
       height: 100%;
     }
   }
-  
+
   aside {
     background: gray;
     align-items: center;
@@ -32,7 +32,7 @@
     position: absolute;
     background: none;
     border: none;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 
     img {
       height: 25px;

front/style/style.css

@@ -1,9 +1,9 @@
 *{
     font-family: 'Open Sans', sans-serif;
-    cursor: url('/resources/logos/cursor_normal.png'), auto;
+    cursor: url('./images/cursor_normal.png'), auto;
 }
 * a, button, select{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 body{
     overflow: hidden;
@@ -39,7 +39,7 @@ body .message-info.warning{
     position: relative;
     transition: all 0.2s ease;
     background-color: #00000099;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 .video-container i{
     position: absolute;
@@ -75,7 +75,7 @@ body .message-info.warning{
 
 .video-container button.report{
     display: block;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     background: none;
     background-color: rgba(0, 0, 0, 0);
     border: none;
@@ -108,7 +108,7 @@ body .message-info.warning{
     left: 5px;
     margin: 0;
     padding: 0;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     width: 25px;
     height: 25px;
 }
@@ -118,7 +118,7 @@ body .message-info.warning{
     left: 36px;
     color: white;
     font-size: 16px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 .video-container img.active {
     display: block !important;
@@ -126,7 +126,7 @@ body .message-info.warning{
 
 .video-container video{
     height: 100%;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 
 .video-container video:focus{
@@ -206,7 +206,7 @@ video#myCamVideo{
 }
 /*btn animation*/
 .btn-cam-action div{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     /*position: absolute;*/
     border: solid 0px black;
     width: 44px;
@@ -260,7 +260,7 @@ video#myCamVideo{
     top: calc(48px - 37px);
     left: calc(48px - 41px);
     position: relative;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 
 /* Spinner */
@@ -572,7 +572,7 @@ input[type=range]:focus::-ms-fill-upper {
     margin: 2%;
     flex-basis: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     pointer-events: auto;
     /*flex-shrink: 2;*/
 }
@@ -590,7 +590,7 @@ input[type=range]:focus::-ms-fill-upper {
 .sidebar > div {
     margin: 2%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     border-radius: 15px 15px 15px 15px;
     pointer-events: auto;
 }
@@ -600,7 +600,7 @@ input[type=range]:focus::-ms-fill-upper {
 }
 
 .sidebar > div video {
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 
 /* Let's make sure videos are vertically centered if they need to be cropped */
@@ -625,7 +625,7 @@ input[type=range]:focus::-ms-fill-upper {
     margin: 1%;
     max-height: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 
 .chat-mode > div:hover {
@@ -715,7 +715,7 @@ input[type=range]:focus::-ms-fill-upper {
     margin-top: 6px;
     width: 30px;
     height: 30px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     padding: 0 5px;
     transition: all .5s ease;
     transform: rotateY(0);
@@ -739,7 +739,7 @@ input[type=range]:focus::-ms-fill-upper {
 
 .main-console div.console:hover,
 .message-container div.clear:hover {
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     top: calc(100% + 5px);
     transform: scale(1.2) translateY(3px);
 }
@@ -772,7 +772,7 @@ input[type=range]:focus::-ms-fill-upper {
     transition: all .2s ease;
 }
 .main-console .btn-action .btn:hover{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
     border: 1px solid black;
@@ -787,7 +787,7 @@ input[type=range]:focus::-ms-fill-upper {
 
 .main-console .menu span {
     margin: 20px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 
 .main-console .menu span.active {
@@ -821,10 +821,10 @@ input[type=range]:focus::-ms-fill-upper {
 }
 .main-console section div.upload label img{
     height: 150px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 .main-console section div.upload label img{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 
 
@@ -917,7 +917,7 @@ div.modal-report-user{
     right: 0;
     left: auto;
     top: 0;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     width: 15px;
     height: 15px;
     margin: 10px;
@@ -936,7 +936,7 @@ div.modal-report-user{
     transition: all .2s ease;
 }
 .modal-report-user button:hover{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     background-color: #ffda01;
     color: black;
     border: 1px solid black;
@@ -979,7 +979,7 @@ div.modal-report-user{
 }
 .discussion .active-btn{
     display: none;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     height: 50px;
     width: 50px;
     background-color: #2d2d2dba;
@@ -1008,7 +1008,7 @@ div.modal-report-user{
     right: 10px;
     background: none;
     border: none;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 .discussion .close-btn img{
     height: 15px;
@@ -1033,7 +1033,7 @@ div.modal-report-user{
     background-color: #ffffff69;
     padding: 5px;
     border-radius: 15px;
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
 }
 
 .discussion .participants .participant:hover{
@@ -1066,7 +1066,7 @@ div.modal-report-user{
 }
 
 .discussion .participants .participant button.report-btn{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     position: absolute;
     background-color: #2d2d2dba;
     right: 34px;
@@ -1176,7 +1176,7 @@ div.action.danger{
     animation-timing-function: ease-in-out;
 }
 div.action p.action-body{
-    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    cursor: url('./images/cursor_pointer.png'), pointer;
     padding: 10px;
     background-color: #2d2d2dba;
     color: #fff;
@@ -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/tests/Phaser/Services/HdpiManagerTest.ts

@@ -50,6 +50,6 @@ describe("Test HdpiManager", () => {
         const result = hdpiManager.getOptimalGameSize({ width: 1280, height: 768 });
         expect(result.game.width).toEqual(1280);
         expect(result.game.height).toEqual(768);
-        expect(hdpiManager.zoomModifier).toEqual(1);
+        expect(hdpiManager.zoomModifier).toEqual(2 / 3);
     });
 });

front/tsconfig-for-jasmine.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./src/**/*", "./tests/**/*"],
+  "compilerOptions": {
+    "module": "CommonJS",
+    "lib": ["es2015","dom"],
+    "types": ["svelte", "node"]
+  },
+}

front/tsconfig-for-webpack.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true
+  }
+}

front/tsconfig.json

@@ -1,9 +1,13 @@
 {
+//  "include": ["src/**/*", "webpack.config.ts"],
+
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist/",
     "sourceMap": true,
     "moduleResolution": "node",
-    "module": "CommonJS",
+    //"module": "CommonJS",
+    "module": "ESNext",
     "target": "ES2017",
     "declaration": false,
     "downlevelIteration": true,

front/webpack.config.ts

@@ -1,10 +1,12 @@
 import type {Configuration} from "webpack";
 import type WebpackDevServer from "webpack-dev-server";
-
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+import path from 'path';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import sveltePreprocess from 'svelte-preprocess';
+import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
+import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
 
 const mode = process.env.NODE_ENV ?? 'development';
 const isProduction = mode === 'production';
@@ -33,17 +35,85 @@ module.exports = {
         rules: [
             {
                 test: /\.tsx?$/,
-                use: 'ts-loader',
+                //use: 'ts-loader',
                 exclude: /node_modules/,
+                loader: 'ts-loader',
+                options: {
+                    transpileOnly: true,
+                },
             },
             {
                 test: /\.scss$/,
-                use: [MiniCssExtractPlugin.loader, 'css-loader?url=false', 'sass-loader'],
+                exclude: /node_modules/,
+                use: [
+                    MiniCssExtractPlugin.loader, {
+                        loader: 'css-loader',
+                        options: {
+                            //url: false,
+                            sourceMap: true
+                        }
+                    }, 'sass-loader'],
             },
+            {
+                test: /\.css$/,
+                exclude: /node_modules/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            //url: false,
+                            sourceMap: true
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.(html|svelte)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'svelte-loader',
+                    options: {
+                        compilerOptions: {
+                            // Dev mode must be enabled for HMR to work!
+                            dev: isDevelopment
+                        },
+                        emitCss: isProduction,
+                        hotReload: isDevelopment,
+                        hotOptions: {
+                            // List of options and defaults: https://www.npmjs.com/package/svelte-loader-hot#usage
+                            noPreserveState: false,
+                            optimistic: true,
+                        },
+                        preprocess: sveltePreprocess({
+                            scss: true,
+                            sass: true,
+                        })
+                    }
+                }
+            },
+
+            // Required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
+            // See: https://github.com/sveltejs/svelte-loader#usage
+            {
+                test: /node_modules\/svelte\/.*\.mjs$/,
+                resolve: {
+                    fullySpecified: false
+                }
+            },
+            {
+                test: /\.(ttf|eot|svg|png|gif|jpg)$/,
+                exclude: /node_modules/,
+                type: 'asset'
+            }
         ],
     },
     resolve: {
-        extensions: [ '.tsx', '.ts', '.js' ],
+        alias: {
+            svelte: path.resolve('node_modules', 'svelte')
+        },
+        extensions: [ '.tsx', '.ts', '.js', '.svelte' ],
+        mainFields: ['svelte', 'browser', 'module', 'main']
     },
     output: {
         filename: (pathData) => {
@@ -54,11 +124,14 @@ module.exports = {
         path: path.resolve(__dirname, 'dist'),
         publicPath: '/'
     },
-    /*externals:[
-        require('webpack-require-http')
-    ],*/
     plugins: [
-        new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
+        new webpack.HotModuleReplacementPlugin(),
+        new ForkTsCheckerWebpackPlugin({
+            eslint: {
+                files: './src/**/*.ts'
+            }
+        }),
+        new MiniCssExtractPlugin({filename: '[name].[contenthash].css'}),
         new HtmlWebpackPlugin(
             {
                 template: './dist/index.tmpl.html.tmp',
@@ -77,6 +150,7 @@ module.exports = {
         new webpack.ProvidePlugin({
             Phaser: 'phaser'
         }),
+        new NodePolyfillPlugin(),
         new webpack.EnvironmentPlugin({
             'API_URL': null,
             'SKIP_RENDER_OPTIMIZATIONS': false,