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

front/src/index.ts

@@ -1,35 +1,34 @@
-import 'phaser';
+import "phaser";
 import GameConfig = Phaser.Types.Core.GameConfig;
 import "../style/index.scss";
 
-import {DEBUG_MODE, isMobile} from "./Enum/EnvironmentVariable";
-import {LoginScene} from "./Phaser/Login/LoginScene";
-import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
-import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
-import {SelectCompanionScene} from "./Phaser/Login/SelectCompanionScene";
-import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
-import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
-import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugin.js';
-import OutlinePipelinePlugin from 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js';
-import {EntryScene} from "./Phaser/Login/EntryScene";
-import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
-import {MenuScene} from "./Phaser/Menu/MenuScene";
-import {localUserStore} from "./Connexion/LocalUserStore";
-import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
-import {iframeListener} from "./Api/IframeListener";
-import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobileScene';
-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";
+import { DEBUG_MODE, isMobile } from "./Enum/EnvironmentVariable";
+import { LoginScene } from "./Phaser/Login/LoginScene";
+import { ReconnectingScene } from "./Phaser/Reconnecting/ReconnectingScene";
+import { SelectCharacterScene } from "./Phaser/Login/SelectCharacterScene";
+import { SelectCompanionScene } from "./Phaser/Login/SelectCompanionScene";
+import { EnableCameraScene } from "./Phaser/Login/EnableCameraScene";
+import { CustomizeScene } from "./Phaser/Login/CustomizeScene";
+import WebFontLoaderPlugin from "phaser3-rex-plugins/plugins/webfontloader-plugin.js";
+import OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
+import { EntryScene } from "./Phaser/Login/EntryScene";
+import { coWebsiteManager } from "./WebRtc/CoWebsiteManager";
+import { MenuScene } from "./Phaser/Menu/MenuScene";
+import { localUserStore } from "./Connexion/LocalUserStore";
+import { ErrorScene } from "./Phaser/Reconnecting/ErrorScene";
+import { iframeListener } from "./Api/IframeListener";
+import { SelectCharacterMobileScene } from "./Phaser/Login/SelectCharacterMobileScene";
+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";
 import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer;
 
-
-const {width, height} = coWebsiteManager.getGameSize();
+const { width, height } = coWebsiteManager.getGameSize();
 
 const valueGameQuality = localUserStore.getGameQualityValue();
-const fps : Phaser.Types.Core.FPSConfig = {
+const fps: Phaser.Types.Core.FPSConfig = {
     /**
      * The minimum acceptable rendering rate, in frames per second.
      */
@@ -53,30 +52,30 @@ const fps : Phaser.Types.Core.FPSConfig = {
     /**
      * Apply delta smoothing during the game update to help avoid spikes?
      */
-    smoothStep: false
-}
+    smoothStep: false,
+};
 
 // the ?phaserMode=canvas parameter can be used to force Canvas usage
 const params = new URLSearchParams(document.location.search.substring(1));
 const phaserMode = params.get("phaserMode");
 let mode: number;
 switch (phaserMode) {
-    case 'auto':
+    case "auto":
     case null:
         mode = Phaser.AUTO;
         break;
-    case 'canvas':
+    case "canvas":
         mode = Phaser.CANVAS;
         break;
-    case 'webgl':
+    case "webgl":
         mode = Phaser.WEBGL;
         break;
     default:
         throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"');
 }
 
-const hdpiManager = new HdpiManager(640*480, 196*196);
-const { game: gameSize, real: realSize } = hdpiManager.getOptimalGameSize({width, height});
+const hdpiManager = new HdpiManager(640 * 480, 196 * 196);
+const { game: gameSize, real: realSize } = hdpiManager.getOptimalGameSize({ width, height });
 
 const config: GameConfig = {
     type: mode,
@@ -87,9 +86,10 @@ const config: GameConfig = {
         height: gameSize.height,
         zoom: realSize.width / gameSize.width,
         autoRound: true,
-        resizeInterval: 999999999999
+        resizeInterval: 999999999999,
     },
-    scene: [EntryScene,
+    scene: [
+        EntryScene,
         LoginScene,
         isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
         SelectCompanionScene,
@@ -102,37 +102,39 @@ const config: GameConfig = {
     //resolution: window.devicePixelRatio / 2,
     fps: fps,
     dom: {
-        createContainer: true
+        createContainer: true,
     },
     render: {
         pixelArt: true,
         roundPixels: true,
-        antialias: false
+        antialias: false,
     },
     plugins: {
-        global: [{
-            key: 'rexWebFontLoader',
-            plugin: WebFontLoaderPlugin,
-            start: true
-        }]
+        global: [
+            {
+                key: "rexWebFontLoader",
+                plugin: WebFontLoaderPlugin,
+                start: true,
+            },
+        ],
     },
     physics: {
         default: "arcade",
         arcade: {
             debug: DEBUG_MODE,
-        }
+        },
     },
     // Instruct systems with 2 GPU to choose the low power one. We don't need that extra power and we want to save battery
     powerPreference: "low-power",
     callbacks: {
-        postBoot: game => {
+        postBoot: (game) => {
             // Install rexOutlinePipeline only if the renderer is WebGL.
             const renderer = game.renderer;
             if (renderer instanceof WebGLRenderer) {
-                game.plugins.install('rexOutlinePipeline', OutlinePipelinePlugin, true);
+                game.plugins.install("rexOutlinePipeline", OutlinePipelinePlugin, true);
             }
-        }
-    }
+        },
+    },
 };
 
 //const game = new Phaser.Game(config);
@@ -140,7 +142,7 @@ const game = new Game(config);
 
 waScaleManager.setGame(game);
 
-window.addEventListener('resize', function (event) {
+window.addEventListener("resize", function (event) {
     coWebsiteManager.resetStyle();
 
     waScaleManager.applyNewSize();
@@ -153,10 +155,23 @@ coWebsiteManager.onResize.subscribe(() => {
 iframeListener.init();
 
 const app = new App({
-    target: HtmlUtils.getElementByIdOrFail('svelte-overlay'),
+    target: HtmlUtils.getElementByIdOrFail("svelte-overlay"),
     props: {
-        game: game
+        game: game,
     },
-})
+});
 
-export default app
+export default app;
+
+if ("serviceWorker" in navigator) {
+    window.addEventListener("load", function () {
+        navigator.serviceWorker
+            .register("/resources/service-worker.js")
+            .then((serviceWorker) => {
+                console.log("Service Worker registered: ", serviceWorker);
+            })
+            .catch((error) => {
+                console.error("Error registering the Service Worker: ", error);
+            });
+    });
+}