merge develop, add animated tiles

.github/workflows/continuous_integration.yml

@@ -49,7 +49,7 @@ jobs:
       - name: "Build"
         run: yarn run build
         env:
-          API_URL: "localhost:8080"
+          PUSHER_URL: "//localhost:8080"
         working-directory: "front"
 
       - name: "Lint"

front/.eslintrc.json

@@ -25,6 +25,15 @@
     ],
     "rules": {
         "no-unused-vars": "off",
-        "@typescript-eslint/no-explicit-any": "error"
+        "@typescript-eslint/no-explicit-any": "error",
+
+        // TODO: remove those ignored rules and write a stronger code!
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/restrict-plus-operands": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/restrict-template-expressions": "off"
     }
 }

front/package.json

@@ -7,25 +7,25 @@
         "@types/google-protobuf": "^3.7.3",
         "@types/jasmine": "^3.5.10",
         "@types/quill": "^1.3.7",
-        "@typescript-eslint/eslint-plugin": "^2.26.0",
+        "@types/webpack-dev-server": "^3.11.4",
-        "@typescript-eslint/parser": "^2.26.0",
+        "@typescript-eslint/eslint-plugin": "^4.23.0",
-        "css-loader": "^5.1.3",
+        "@typescript-eslint/parser": "^4.23.0",
-        "eslint": "^6.8.0",
+        "css-loader": "^5.2.4",
-        "html-webpack-plugin": "^4.3.0",
+        "eslint": "^7.26.0",
+        "html-webpack-plugin": "^5.3.1",
         "jasmine": "^3.5.0",
-        "mini-css-extract-plugin": "^1.3.9",
+        "mini-css-extract-plugin": "^1.6.0",
-        "sass": "^1.32.8",
+        "sass": "^1.32.12",
-        "sass-loader": "10.1.1",
+        "sass-loader": "^11.1.0",
-        "ts-loader": "^6.2.2",
+        "ts-loader": "^9.1.2",
-        "ts-node": "^8.10.2",
+        "ts-node": "^9.1.1",
-        "typescript": "^3.8.3",
+        "typescript": "^4.2.4",
-        "webpack": "^4.42.1",
+        "webpack": "^5.37.0",
-        "webpack-cli": "^3.3.11",
+        "webpack-cli": "^4.7.0",
-        "webpack-dev-server": "^3.10.3",
+        "webpack-dev-server": "^3.11.2"
-        "webpack-merge": "^4.2.2"
     },
     "dependencies": {
-        "@fontsource/press-start-2p": "^4.2.2",
+        "@fontsource/press-start-2p": "^4.3.0",
         "@types/simple-peer": "^9.6.0",
         "@types/socket.io-client": "^1.4.32",
         "axios": "^0.21.1",
@@ -33,17 +33,17 @@
         "google-protobuf": "^3.13.0",
         "nes.css": "^2.3.0",
         "phaser": "^3.54.0",
+        "phaser-animated-tiles": "Informatic/phaser-animated-tiles#2d5c66a9bc426dd4cb2d856c1d599494a74f8067",
         "phaser3-rex-plugins": "^1.1.42",
         "queue-typescript": "^1.0.1",
         "quill": "1.3.6",
         "rxjs": "^6.6.3",
         "simple-peer": "^9.6.2",
-        "socket.io-client": "^2.3.0",
+        "socket.io-client": "^2.3.0"
-        "webpack-require-http": "^0.4.3"
     },
     "scripts": {
-        "start": "webpack-dev-server --open",
+        "start": "webpack serve --open",
-        "build": "webpack --config webpack.prod.js",
+        "build": "NODE_ENV=production webpack",
         "test": "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/Api/IframeListener.ts

@@ -1,6 +1,5 @@
 import { Subject } from "rxjs";
 import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
-import * as crypto from "crypto";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
 import { EnterLeaveEvent } from "./Events/EnterLeaveEvent";
 import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent";
@@ -180,7 +179,7 @@ class IframeListener {
     }
 
     private getIFrameId(scriptUrl: string): string {
-        return 'script' + crypto.createHash('md5').update(scriptUrl).digest("hex");
+        return 'script' + btoa(scriptUrl);
     }
 
     unregisterScript(scriptUrl: string): void {

front/src/Enum/EnvironmentVariable.ts

@@ -1,7 +1,6 @@
 const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true";
 const START_ROOM_URL : string = process.env.START_ROOM_URL || '/_/global/maps.workadventure.localhost/Floor0/floor0.json';
-// For compatibility reasons with older versions, API_URL is the old host name of PUSHER_URL
+const PUSHER_URL = process.env.PUSHER_URL || '//pusher.workadventure.localhost';
-const PUSHER_URL = process.env.PUSHER_URL || (process.env.API_URL ? '//'+process.env.API_URL : "//pusher.workadventure.localhost");
 const UPLOADER_URL = process.env.UPLOADER_URL || '//uploader.workadventure.localhost';
 const ADMIN_URL = process.env.ADMIN_URL || "//workadventure.localhost";
 const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302";

front/src/Phaser/Game/GameScene.ts

@@ -91,6 +91,7 @@ import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
 import {waScaleManager} from "../Services/WaScaleManager";
+import AnimatedTiles from "phaser-animated-tiles";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -138,6 +139,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     Layers!: Array<Phaser.Tilemaps.TilemapLayer>;
     Objects!: Array<Phaser.Physics.Arcade.Sprite>;
     mapFile!: ITiledMap;
+    animatedTiles!: AnimatedTiles;
     groups: Map<number, Sprite>;
     startX!: number;
     startY!: number;
@@ -151,7 +153,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private GlobalMessageManager!: GlobalMessageManager;
     public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
     private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
-    private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
+    private connectionAnswerPromiseResolve!: (value: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
     // A promise that will resolve when the "create" method is called (signaling loading is ended)
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
@@ -257,6 +259,7 @@ export class GameScene extends DirtyScene implements CenterListener {
                 message: this.originalMapUrl ?? file.src
             });
         });
+        this.load.scenePlugin('AnimatedTiles', AnimatedTiles, 'animatedTiles', 'animatedTiles');
         this.load.on('filecomplete-tilemapJSON-'+this.MapUrlFile, (key: string, type: string, data: unknown) => {
             this.onMapLoad(data);
         });
@@ -457,6 +460,7 @@ export class GameScene extends DirtyScene implements CenterListener {
 
         this.initCamera();
 
+        this.animatedTiles.init(this.Map);
         this.initCirclesCanvas();
 
         // Let's pause the scene if the connection is not established yet

front/src/WebRtc/CoWebsiteManager.ts

@@ -137,14 +137,14 @@ class CoWebsiteManager {
         if (allowPolicy) {
             iframe.allow = allowPolicy;
         }
-        const onloadPromise = new Promise((resolve) => {
+        const onloadPromise = new Promise<void>((resolve) => {
             iframe.onload = () => resolve();
         });
         if (allowApi) {
             iframeListener.registerIframe(iframe);
         }
         this.cowebsiteMainDom.appendChild(iframe);
-        const onTimeoutPromise = new Promise((resolve) => {
+        const onTimeoutPromise = new Promise<void>((resolve) => {
             setTimeout(() => resolve(), 2000);
         });
         this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => {

front/tsconfig.json

@@ -4,7 +4,7 @@
     "sourceMap": true,
     "moduleResolution": "node",
     "module": "CommonJS",
-    "target": "ES2015",
+    "target": "ES2017",
     "declaration": false,
     "downlevelIteration": true,
     "jsx": "react",

front/webpack.config.ts

@@ -1,14 +1,22 @@
+import {Configuration} from "webpack";
+import 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');
 
+const mode = process.env.NODE_ENV ?? 'development';
+const isProduction = mode === 'production';
+const isDevelopment = !isProduction;
+
 module.exports = {
     entry: {
         'main': './src/index.ts',
         'iframe_api': './src/iframe_api.ts'
     },
-    devtool: 'inline-source-map',
+    mode: mode,
+    devtool: isDevelopment ? 'inline-source-map' : 'source-map',
     devServer: {
         contentBase: './dist',
         host: '0.0.0.0',
@@ -41,14 +49,14 @@ module.exports = {
         filename: (pathData) => {
             // Add a content hash only for the main bundle.
             // We want the iframe_api.js file to keep its name as it will be referenced from outside iframes.
-            return pathData.chunk.name === 'main' ? 'js/[name].[contenthash].js': '[name].js';
+            return pathData.chunk?.name === 'main' ? 'js/[name].[contenthash].js': '[name].js';
         },
         path: path.resolve(__dirname, 'dist'),
         publicPath: '/'
     },
-    externals:[
+    /*externals:[
         require('webpack-require-http')
-    ],
+    ],*/
     plugins: [
         new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
         new HtmlWebpackPlugin(
@@ -81,8 +89,10 @@ module.exports = {
             'TURN_PASSWORD': null,
             'JITSI_URL': null,
             'JITSI_PRIVATE_MODE': null,
-            'START_ROOM_URL': null
+            'START_ROOM_URL': null,
+            'MAX_USERNAME_LENGTH': 8,
+            'MAX_PER_GROUP': 4
         })
     ],
 
-};
+} as Configuration & WebpackDevServer.Configuration;

front/webpack.prod.js

@@ -1,7 +0,0 @@
-const merge = require('webpack-merge');
-const common = require('./webpack.config.js');
-
-module.exports = merge(common, {
-  mode: 'production',
-  devtool: 'source-map'
-});