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

front/src/Api/desktop/index.ts

@@ -0,0 +1,38 @@
+import { isSilentStore, requestedCameraState, requestedMicrophoneState } from "../../Stores/MediaStore";
+import { get } from "svelte/store";
+
+class DesktopApi {
+    isSilent: boolean = false;
+
+    init() {
+        if (!window?.WAD?.desktop) {
+            return;
+        }
+
+        console.log("Yipee you are using the desktop app ;)");
+
+        window.WAD.onMuteToggle(() => {
+            if (this.isSilent) return;
+            if (get(requestedMicrophoneState) === true) {
+                requestedMicrophoneState.disableMicrophone();
+            } else {
+                requestedMicrophoneState.enableMicrophone();
+            }
+        });
+
+        window.WAD.onCameraToggle(() => {
+            if (this.isSilent) return;
+            if (get(requestedCameraState) === true) {
+                requestedCameraState.disableWebcam();
+            } else {
+                requestedCameraState.enableWebcam();
+            }
+        });
+
+        isSilentStore.subscribe((value) => {
+            this.isSilent = value;
+        });
+    }
+}
+
+export const desktopApi = new DesktopApi();

front/src/Components/Lazy.svelte

@@ -0,0 +1,21 @@
+<!-- https://lihautan.com/notes/svelte-lazy-load/ -->
+<script>
+    export let when = false;
+    export let component;
+
+    let loading;
+
+    $: if (when) {
+        load();
+    }
+
+    function load() {
+        loading = component();
+    }
+</script>
+
+{#if when}
+    {#await loading then { default: Component }}
+        <Component />
+    {/await}
+{/if}

front/src/Components/MainLayout.svelte

@@ -12,7 +12,6 @@
     import AudioManager from "./AudioManager/AudioManager.svelte";
     import CameraControls from "./CameraControls.svelte";
     import EmbedScreensContainer from "./EmbedScreens/EmbedScreensContainer.svelte";
-    import EmoteMenu from "./EmoteMenu/EmoteMenu.svelte";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import LayoutActionManager from "./LayoutActionManager/LayoutActionManager.svelte";
     import Menu from "./Menu/Menu.svelte";
@@ -38,6 +37,7 @@
     import { LayoutMode } from "../WebRtc/LayoutManager";
     import { actionsMenuStore } from "../Stores/ActionsMenuStore";
     import ActionsMenu from "./ActionsMenu/ActionsMenu.svelte";
+    import Lazy from "./Lazy.svelte";
 
     let mainLayout: HTMLDivElement;
 
@@ -116,9 +116,7 @@
             <VisitCard visitCardUrl={$requestVisitCardsStore} />
         {/if}
 
-        {#if $emoteMenuStore}
-            <EmoteMenu />
-        {/if}
+        <Lazy when={$emoteMenuStore} component={() => import("./EmoteMenu/EmoteMenu.svelte")} />
 
         {#if hasEmbedScreen}
             <EmbedScreensContainer />

front/src/Connexion/ConnectionManager.ts

@@ -16,6 +16,10 @@ import { isRegisterData } from "../Messages/JsonMessages/RegisterData";
 import { isAdminApiData } from "../Messages/JsonMessages/AdminApiData";
 import { limitMapStore } from "../Stores/GameStore";
 import { showLimitRoomModalStore } from "../Stores/ModalStore";
+import { gameManager } from "../Phaser/Game/GameManager";
+import { locales } from "../i18n/i18n-util";
+import type { Locales } from "../i18n/i18n-types";
+import { setCurrentLocale } from "../i18n/locales";
 
 class ConnectionManager {
     private localUser!: LocalUser;
@@ -326,7 +330,7 @@ class ConnectionManager {
                 throw new Error("No Auth code provided");
             }
         }
-        const { authToken, userUuid, email } = await Axios.get(`${PUSHER_URL}/login-callback`, {
+        const { authToken, userUuid, email, username, locale } = await Axios.get(`${PUSHER_URL}/login-callback`, {
             params: { code, nonce, token, playUri: this.currentRoom?.key },
         }).then((res) => {
             return res.data;
@@ -336,6 +340,27 @@ class ConnectionManager {
         localUserStore.saveUser(this.localUser);
         this.authToken = authToken;
 
+        if (username) {
+            gameManager.setPlayerName(username);
+        }
+
+        if (locale) {
+            try {
+                if (locales.indexOf(locale) == -1) {
+                    locales.forEach((l) => {
+                        if (l.startsWith(locale.split("-")[0])) {
+                            setCurrentLocale(l);
+                            return;
+                        }
+                    });
+                } else {
+                    setCurrentLocale(locale as Locales);
+                }
+            } catch (err) {
+                console.warn("Could not set locale", err);
+            }
+        }
+
         //user connected, set connected store for menu at true
         userIsConnected.set(true);
     }

front/src/Phaser/Game/GameMap.ts

@@ -126,19 +126,7 @@ export class GameMap {
         for (let y = 0; y < this.map.height; y += 1) {
             const row: number[] = [];
             for (let x = 0; x < this.map.width; x += 1) {
-                row.push(this.isCollidingAt(x, y) ? 1 : 0);
-            }
-            grid.push(row);
-        }
-        return grid;
-    }
-
-    public getWalkingCostGrid(): number[][] {
-        const grid: number[][] = [];
-        for (let y = 0; y < this.map.height; y += 1) {
-            const row: number[] = [];
-            for (let x = 0; x < this.map.width; x += 1) {
-                row.push(this.getWalkingCostAt(x, y));
+                row.push(this.isCollidingAt(x, y) ? 1 : this.isExitTile(x, y) ? 2 : 0);
             }
             grid.push(row);
         }
@@ -355,8 +343,7 @@ export class GameMap {
         return false;
     }
 
-    private getWalkingCostAt(x: number, y: number): number {
-        const bigCost = 100;
+    private isExitTile(x: number, y: number): boolean {
         for (const layer of this.phaserLayers) {
             if (!layer.visible) {
                 continue;
@@ -369,16 +356,16 @@ export class GameMap {
                 tile &&
                 (tile.properties[GameMapProperties.EXIT_URL] || tile.properties[GameMapProperties.EXIT_SCENE_URL])
             ) {
-                return bigCost;
+                return true;
             }
             for (const property of layer.layer.properties) {
                 //@ts-ignore
                 if (property.name && property.name === "exitUrl") {
-                    return bigCost;
+                    return true;
                 }
             }
         }
-        return 0;
+        return false;
     }
 
     private triggerAllProperties(): void {

front/src/Phaser/Game/GameScene.ts

@@ -566,7 +566,6 @@ export class GameScene extends DirtyScene {
         this.pathfindingManager = new PathfindingManager(
             this,
             this.gameMap.getCollisionGrid(),
-            this.gameMap.getWalkingCostGrid(),
             this.gameMap.getTileDimensions()
         );
 
@@ -1453,7 +1452,7 @@ ${escapedMessage}
                 phaserLayers[i].setCollisionByProperty({ collides: true }, visible);
             }
         }
-        this.pathfindingManager.setCollisionGrid(this.gameMap.getCollisionGrid(), this.gameMap.getWalkingCostGrid());
+        this.pathfindingManager.setCollisionGrid(this.gameMap.getCollisionGrid());
         this.markDirty();
     }
 
@@ -1601,6 +1600,8 @@ ${escapedMessage}
                         }
                     })
                     .catch((reason) => console.warn(reason));
+
+                urlManager.clearHashParameter();
             } catch (err) {
                 console.warn(`Cannot proceed with moveTo command:\n\t-> ${err}`);
             }

front/src/Url/UrlManager.ts

@@ -58,6 +58,10 @@ class UrlManager {
         return this.getHashParameters()[name];
     }
 
+    public clearHashParameter(): void {
+        window.location.hash = "";
+    }
+
     private getHashParameters(): Record<string, string> {
         return window.location.hash
             .substring(1)

front/src/Utils/PathfindingManager.ts

@@ -8,27 +8,21 @@ export class PathfindingManager {
     private grid: number[][];
     private tileDimensions: { width: number; height: number };
 
-    constructor(
-        scene: Phaser.Scene,
-        collisionsGrid: number[][],
-        walkingCostGrid: number[][],
-        tileDimensions: { width: number; height: number }
-    ) {
+    constructor(scene: Phaser.Scene, collisionsGrid: number[][], tileDimensions: { width: number; height: number }) {
         this.scene = scene;
 
         this.easyStar = new EasyStar.js();
         this.easyStar.enableDiagonals();
         this.easyStar.disableCornerCutting();
+        this.easyStar.setTileCost(2, 100);
 
         this.grid = collisionsGrid;
         this.tileDimensions = tileDimensions;
         this.setEasyStarGrid(collisionsGrid);
-        this.setWalkingCostGrid(walkingCostGrid);
     }
 
-    public setCollisionGrid(collisionGrid: number[][], walkingCostGrid: number[][]): void {
+    public setCollisionGrid(collisionGrid: number[][]): void {
         this.setEasyStarGrid(collisionGrid);
-        this.setWalkingCostGrid(walkingCostGrid);
     }
 
     public async findPath(
@@ -120,15 +114,7 @@ export class PathfindingManager {
 
     private setEasyStarGrid(grid: number[][]): void {
         this.easyStar.setGrid(grid);
-        this.easyStar.setAcceptableTiles([0]); // zeroes are walkable
-    }
-
-    private setWalkingCostGrid(grid: number[][]): void {
-        for (let y = 0; y < grid.length; y += 1) {
-            for (let x = 0; x < grid[y].length; x += 1) {
-                this.easyStar.setAdditionalPointCost(x, y, grid[y][x]);
-            }
-        }
+        this.easyStar.setAcceptableTiles([0, 2]); // zeroes are walkable, 2 are exits, also walkable
     }
 
     private logGridToTheConsole(grid: number[][]): void {

front/src/iframe_api.ts

@@ -21,6 +21,7 @@ import type { Popup } from "./Api/iframe/Ui/Popup";
 import type { Sound } from "./Api/iframe/Sound/Sound";
 import { answerPromises, queryWorkadventure } from "./Api/iframe/IframeApiContribution";
 import camera from "./Api/iframe/camera";
+import {} from "./window";
 
 const globalState = createState("global");
 
@@ -182,13 +183,6 @@ const wa = {
 
 export type WorkAdventureApi = typeof wa;
 
-declare global {
-    interface Window {
-        WA: WorkAdventureApi;
-    }
-    let WA: WorkAdventureApi;
-}
-
 window.WA = wa;
 
 window.addEventListener(

front/src/index.ts

@@ -16,6 +16,7 @@ import { coWebsiteManager } from "./WebRtc/CoWebsiteManager";
 import { localUserStore } from "./Connexion/LocalUserStore";
 import { ErrorScene } from "./Phaser/Reconnecting/ErrorScene";
 import { iframeListener } from "./Api/IframeListener";
+import { desktopApi } from "./Api/desktop/index";
 import { SelectCharacterMobileScene } from "./Phaser/Login/SelectCharacterMobileScene";
 import { HdpiManager } from "./Phaser/Services/HdpiManager";
 import { waScaleManager } from "./Phaser/Services/WaScaleManager";
@@ -154,6 +155,7 @@ coWebsiteManager.onResize.subscribe(() => {
 });
 
 iframeListener.init();
+desktopApi.init();
 
 const app = new App({
     target: HtmlUtils.getElementByIdOrFail("game-overlay"),

front/src/window.d.ts

@@ -0,0 +1,10 @@
+import { WorkAdventureApi } from "./iframe_api";
+import { WorkAdventureDesktopApi } from "@wa-preload-app";
+
+declare global {
+    interface Window {
+        WA: WorkAdventureApi;
+        WAD: WorkAdventureDesktopApi;
+    }
+    let WA: WorkAdventureApi;
+}