merged develop

front/dist/resources/logos/meet.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="452.388px" height="452.388px" viewBox="0 0 452.388 452.388" style="enable-background:new 0 0 452.388 452.388;"
+	 xml:space="preserve">
+<g>
+	<g id="Layer_8_38_">
+		<path d="M441.677,43.643H10.687C4.785,43.643,0,48.427,0,54.329v297.425c0,5.898,4.785,10.676,10.687,10.676h162.069v25.631
+			c0,0.38,0.074,0.722,0.112,1.089h-23.257c-5.407,0-9.796,4.389-9.796,9.795c0,5.408,4.389,9.801,9.796,9.801h158.506
+			c5.406,0,9.795-4.389,9.795-9.801c0-5.406-4.389-9.795-9.795-9.795h-23.256c0.032-0.355,0.115-0.709,0.115-1.089V362.43H441.7
+			c5.898,0,10.688-4.782,10.688-10.676V54.329C452.37,48.427,447.589,43.643,441.677,43.643z M422.089,305.133
+			c0,5.903-4.784,10.687-10.683,10.687H40.96c-5.898,0-10.684-4.783-10.684-10.687V79.615c0-5.898,4.786-10.684,10.684-10.684
+			h370.446c5.898,0,10.683,4.785,10.683,10.684V305.133z M303.942,290.648H154.025c0-29.872,17.472-55.661,42.753-67.706
+			c-15.987-10.501-26.546-28.571-26.546-49.13c0-32.449,26.306-58.755,58.755-58.755c32.448,0,58.753,26.307,58.753,58.755
+			c0,20.553-10.562,38.629-26.545,49.13C286.475,234.987,303.942,260.781,303.942,290.648z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -19,7 +19,9 @@
     const urlObject = new URL(coWebsiteUrl);
 
     onMount(() => {
-        icon.src = `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
+        icon.src = coWebsite.jitsi
+            ? "/resources/logos/meet.svg"
+            : `${ICON_URL}/icon?url=${urlObject.hostname}&size=64..96..256&fallback_icon_color=14304c`;
         icon.alt = coWebsite.altMessage ?? urlObject.hostname;
         icon.onload = () => {
             iconLoaded = true;
@@ -34,7 +36,7 @@
                 const coWebsites = $coWebsitesNotAsleep;
                 const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
                 if (newMain) {
-                    coWebsiteManager.goToMain(coWebsite);
+                    coWebsiteManager.goToMain(newMain);
                 }
             } else {
                 highlightedEmbedScreen.toggleHighlight({
@@ -79,6 +81,7 @@
     <img
         class="cowebsite-icon noselect nes-pointer"
         class:hide={!iconLoaded}
+        class:jitsi={coWebsite.jitsi}
         bind:this={icon}
         on:dragstart|preventDefault={noDrag}
         alt=""
@@ -308,6 +311,12 @@
             &.hide {
                 display: none;
             }
+
+            &.jitsi {
+                filter: invert(100%);
+                -webkit-filter: invert(100%);
+                padding: 7px;
+            }
         }
     }
 </style>

front/src/Components/EmbedScreens/Layouts/MozaicLayout.svelte

@@ -23,8 +23,9 @@
         {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
             <MediaBox
                 streamable={peer}
+                mozaicSolo={$streamableCollectionStore.size === 1}
                 mozaicFullWidth={$streamableCollectionStore.size === 1 || $streamableCollectionStore.size === 2}
-                mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size === 4}
+                mozaicQuarter={$streamableCollectionStore.size === 3 || $streamableCollectionStore.size >= 4}
             />
         {/each}
     </div>

front/src/Components/Video/MediaBox.svelte

@@ -9,6 +9,7 @@
     export let streamable: Streamable;
     export let isHightlighted = false;
     export let isClickable = false;
+    export let mozaicSolo = false;
     export let mozaicFullWidth = false;
     export let mozaicQuarter = false;
 </script>
@@ -16,6 +17,7 @@
 <div
     class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}"
     class:clickable={isClickable}
+    class:mozaic-solo={mozaicSolo}
     class:mozaic-full-width={mozaicFullWidth}
     class:mozaic-quarter={mozaicQuarter}
 >
@@ -66,6 +68,11 @@
             }
         }
 
+        &.mozaic-solo {
+            max-height: inherit !important;
+            width: 90% !important;
+        }
+
         &.mozaic-full-width {
             width: 95%;
             max-width: 95%;
@@ -73,6 +80,7 @@
             margin-right: 3%;
             margin-top: auto;
             margin-bottom: auto;
+            max-height: 95%;
 
             &:hover {
                 margin-top: auto;
@@ -85,6 +93,7 @@
             max-width: 95%;
             margin-top: auto;
             margin-bottom: auto;
+            max-height: 95%;
 
             &:hover {
                 margin-top: auto;

front/src/Components/WarningContainer/WarningContainer.svelte

@@ -38,7 +38,6 @@
         right: 0;
         margin-left: auto;
         margin-right: auto;
-        transform: translate(-50%, 0);
         font-family: Lato;
         min-width: 300px;
         opacity: 0.9;

front/src/Interfaces/UserInputHandlerInterface.ts

@@ -9,4 +9,7 @@ export interface UserInputHandlerInterface {
     handlePointerUpEvent: (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => void;
     handlePointerDownEvent: (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => void;
     handleSpaceKeyUpEvent: (event: Event) => Event;
+
+    addSpaceEventListener: (callback: Function) => void;
+    removeSpaceEventListner: (callback: Function) => void;
 }

front/src/Phaser/Companion/Companion.ts

@@ -4,6 +4,7 @@ import { PlayerAnimationDirections, PlayerAnimationTypes } from "../Player/Anima
 import { TexturesHelper } from "../Helpers/TexturesHelper";
 import { Writable, writable } from "svelte/store";
 import type { PictureStore } from "../../Stores/PictureStore";
+import type CancelablePromise from "cancelable-promise";
 
 export interface CompanionStatus {
     x: number;
@@ -25,8 +26,9 @@ export class Companion extends Container {
     private direction: PlayerAnimationDirections;
     private animationType: PlayerAnimationTypes;
     private readonly _pictureStore: Writable<string | undefined>;
+    private texturePromise: CancelablePromise<string | void> | undefined;
 
-    constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: Promise<string>) {
+    constructor(scene: Phaser.Scene, x: number, y: number, name: string, texturePromise: CancelablePromise<string>) {
         super(scene, x + 14, y + 4);
 
         this.sprites = new Map<string, Sprite>();
@@ -41,7 +43,7 @@ export class Companion extends Container {
         this.companionName = name;
         this._pictureStore = writable(undefined);
 
-        texturePromise
+        this.texturePromise = texturePromise
             .then((resource) => {
                 this.addResource(resource);
                 this.invisible = false;
@@ -234,6 +236,7 @@ export class Companion extends Container {
     }
 
     public destroy(): void {
+        this.texturePromise?.cancel();
         for (const sprite of this.sprites.values()) {
             if (this.scene) {
                 this.scene.sys.updateList.remove(sprite);

front/src/Phaser/Companion/CompanionTexturesLoadingManager.ts

@@ -1,5 +1,6 @@
 import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import { COMPANION_RESOURCES, CompanionResourceDescriptionInterface } from "./CompanionTextures";
+import CancelablePromise from "cancelable-promise";
 
 export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourceDescriptionInterface[] => {
     COMPANION_RESOURCES.forEach((resource: CompanionResourceDescriptionInterface) => {
@@ -9,8 +10,12 @@ export const getAllCompanionResources = (loader: LoaderPlugin): CompanionResourc
     return COMPANION_RESOURCES;
 };
 
-export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): Promise<string> => {
+export const lazyLoadCompanionResource = (loader: LoaderPlugin, name: string): CancelablePromise<string> => {
-    return new Promise((resolve, reject) => {
+    return new CancelablePromise((resolve, reject, cancel) => {
+        cancel(() => {
+            return;
+        });
+
         const resource = COMPANION_RESOURCES.find((item) => item.name === name);
 
         if (typeof resource === "undefined") {

front/src/Phaser/Entity/Character.ts

@@ -17,7 +17,7 @@ import { Unsubscriber, Writable, writable } from "svelte/store";
 import { createColorStore } from "../../Stores/OutlineColorStore";
 import type { OutlineableInterface } from "../Game/OutlineableInterface";
 import type CancelablePromise from "cancelable-promise";
-import { TalkIcon } from '../Components/TalkIcon';
+import { TalkIcon } from "../Components/TalkIcon";
 
 const playerNameY = -25;
 
@@ -61,7 +61,7 @@ export abstract class Character extends Container implements OutlineableInterfac
         frame: string | number,
         isClickable: boolean,
         companion: string | null,
-        companionTexturePromise?: Promise<string>
+        companionTexturePromise?: CancelablePromise<string>
     ) {
         super(scene, x, y /*, texture, frame*/);
         this.scene = scene;
@@ -155,7 +155,7 @@ export abstract class Character extends Container implements OutlineableInterfac
         this.clickable = clickable;
         if (clickable) {
             this.setInteractive({
-                hitArea: new Phaser.Geom.Circle(0, 0, interactiveRadius),
+                hitArea: new Phaser.Geom.Circle(8, 8, interactiveRadius),
                 hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
                 useHandCursor: true,
             });
@@ -172,6 +172,27 @@ export abstract class Character extends Container implements OutlineableInterfac
         return { x: this.x, y: this.y };
     }
 
+    /**
+     * Returns position based on where player is currently facing
+     * @param shift How far from player should the point of interest be.
+     */
+    public getDirectionalActivationPosition(shift: number): { x: number; y: number } {
+        switch (this.lastDirection) {
+            case PlayerAnimationDirections.Down: {
+                return { x: this.x, y: this.y + shift };
+            }
+            case PlayerAnimationDirections.Left: {
+                return { x: this.x - shift, y: this.y };
+            }
+            case PlayerAnimationDirections.Right: {
+                return { x: this.x + shift, y: this.y };
+            }
+            case PlayerAnimationDirections.Up: {
+                return { x: this.x, y: this.y - shift };
+            }
+        }
+    }
+
     public getObjectToOutline(): Phaser.GameObjects.GameObject {
         return this.playerNameText;
     }
@@ -196,7 +217,7 @@ export abstract class Character extends Container implements OutlineableInterfac
         this.talkIcon.show(show);
     }
 
-    public addCompanion(name: string, texturePromise?: Promise<string>): void {
+    public addCompanion(name: string, texturePromise?: CancelablePromise<string>): void {
         if (typeof texturePromise !== "undefined") {
             this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);
         }
@@ -472,16 +493,16 @@ export abstract class Character extends Container implements OutlineableInterfac
         this.outlineColorStore.removeApiColor();
     }
 
-    public pointerOverOutline(): void {
+    public pointerOverOutline(color: number): void {
-        this.outlineColorStore.pointerOver();
+        this.outlineColorStore.pointerOver(color);
     }
 
     public pointerOutOutline(): void {
         this.outlineColorStore.pointerOut();
     }
 
-    public characterCloseByOutline(): void {
+    public characterCloseByOutline(color: number): void {
-        this.outlineColorStore.characterCloseBy();
+        this.outlineColorStore.characterCloseBy(color);
     }
 
     public characterFarAwayOutline(): void {

front/src/Phaser/Entity/RemotePlayer.ts

@@ -31,18 +31,18 @@ export class RemotePlayer extends Character implements ActivatableInterface {
         moving: boolean,
         visitCardUrl: string | null,
         companion: string | null,
-        companionTexturePromise?: Promise<string>,
+        companionTexturePromise?: CancelablePromise<string>,
         activationRadius?: number
     ) {
         super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);
 
         //set data
         this.userId = userId;
+        this.visitCardUrl = visitCardUrl;
         this.registeredActions = [];
         this.registerDefaultActionsMenuActions();
         this.setClickable(this.registeredActions.length > 0);
         this.activationRadius = activationRadius ?? 96;
-        this.visitCardUrl = visitCardUrl;
         this.actionsMenuStoreUnsubscriber = actionsMenuStore.subscribe((value: ActionsMenuData | undefined) => {
             this.isActionsMenuInitialized = value ? true : false;
         });
@@ -118,7 +118,7 @@ export class RemotePlayer extends Character implements ActivatableInterface {
 
     private bindEventHandlers(): void {
         this.on(Phaser.Input.Events.POINTER_DOWN, (event: Phaser.Input.Pointer) => {
-            if (event.downElement.nodeName === "CANVAS") {
+            if (event.downElement.nodeName === "CANVAS" && event.leftButtonDown()) {
                 this.toggleActionsMenu();
             }
         });

front/src/Phaser/Game/ActivatablesManager.ts

@@ -11,6 +11,11 @@ export class ActivatablesManager {
 
     private currentPlayer: Player;
 
+    private canSelectByDistance: boolean = true;
+
+    private readonly outlineColor = 0xffff00;
+    private readonly directionalActivationPositionShift = 50;
+
     constructor(currentPlayer: Player) {
         this.currentPlayer = currentPlayer;
     }
@@ -27,7 +32,7 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByPointer = object;
         if (isOutlineable(this.selectedActivatableObjectByPointer)) {
-            this.selectedActivatableObjectByPointer?.pointerOverOutline();
+            this.selectedActivatableObjectByPointer?.pointerOverOutline(this.outlineColor);
         }
     }
 
@@ -37,7 +42,7 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByPointer = undefined;
         if (isOutlineable(this.selectedActivatableObjectByDistance)) {
-            this.selectedActivatableObjectByDistance?.characterCloseByOutline();
+            this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor);
         }
     }
 
@@ -46,6 +51,9 @@ export class ActivatablesManager {
     }
 
     public deduceSelectedActivatableObjectByDistance(): void {
+        if (!this.canSelectByDistance) {
+            return;
+        }
         const newNearestObject = this.findNearestActivatableObject();
         if (this.selectedActivatableObjectByDistance === newNearestObject) {
             return;
@@ -60,10 +68,42 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByDistance = newNearestObject;
         if (isOutlineable(this.selectedActivatableObjectByDistance)) {
-            this.selectedActivatableObjectByDistance?.characterCloseByOutline();
+            this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor);
         }
     }
 
+    public updateActivatableObjectsDistances(objects: ActivatableInterface[]): void {
+        const currentPlayerPos = this.currentPlayer.getDirectionalActivationPosition(
+            this.directionalActivationPositionShift
+        );
+        for (const object of objects) {
+            const distance = MathUtils.distanceBetween(currentPlayerPos, object.getPosition());
+            this.activatableObjectsDistances.set(object, distance);
+        }
+    }
+
+    public updateDistanceForSingleActivatableObject(object: ActivatableInterface): void {
+        this.activatableObjectsDistances.set(
+            object,
+            MathUtils.distanceBetween(
+                this.currentPlayer.getDirectionalActivationPosition(this.directionalActivationPositionShift),
+                object.getPosition()
+            )
+        );
+    }
+
+    public disableSelectingByDistance(): void {
+        this.canSelectByDistance = false;
+        if (isOutlineable(this.selectedActivatableObjectByDistance)) {
+            this.selectedActivatableObjectByDistance?.characterFarAwayOutline();
+        }
+        this.selectedActivatableObjectByDistance = undefined;
+    }
+
+    public enableSelectingByDistance(): void {
+        this.canSelectByDistance = true;
+    }
+
     private findNearestActivatableObject(): ActivatableInterface | undefined {
         let shortestDistance: number = Infinity;
         let closestObject: ActivatableInterface | undefined = undefined;
@@ -76,18 +116,8 @@ export class ActivatablesManager {
         }
         return closestObject;
     }
-    public updateActivatableObjectsDistances(objects: ActivatableInterface[]): void {
-        const currentPlayerPos = this.currentPlayer.getPosition();
-        for (const object of objects) {
-            const distance = MathUtils.distanceBetween(currentPlayerPos, object.getPosition());
-            this.activatableObjectsDistances.set(object, distance);
-        }
-    }
 
-    public updateDistanceForSingleActivatableObject(object: ActivatableInterface): void {
+    public isSelectingByDistanceEnabled(): boolean {
-        this.activatableObjectsDistances.set(
+        return this.canSelectByDistance;
-            object,
-            MathUtils.distanceBetween(this.currentPlayer.getPosition(), object.getPosition())
-        );
     }
 }

front/src/Phaser/Game/Game.ts

@@ -26,15 +26,6 @@ export class Game extends Phaser.Game {
                 }
             }
         });
-
-        /*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) {

front/src/Phaser/Game/GameScene.ts

@@ -92,7 +92,7 @@ import { MapStore } from "../../Stores/Utils/MapStore";
 import { followUsersColorStore } from "../../Stores/FollowStore";
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
 import { locale } from "../../i18n/i18n-svelte";
-import { localVolumeStore } from '../../Stores/MediaStore';
+import { localVolumeStore } from "../../Stores/MediaStore";
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
     reconnecting: boolean;
@@ -247,7 +247,7 @@ export class GameScene extends DirtyScene {
                 loadCustomTexture(this.load, texture).catch((e) => console.error(e));
             }
         }
-        this.load.svg('iconTalk', '/resources/icons/icon_talking.svg');
+        this.load.svg("iconTalk", "/resources/icons/icon_talking.svg");
 
         if (touchScreenManager.supportTouchScreen) {
             this.load.image(joystickBaseKey, joystickBaseImg);
@@ -641,15 +641,18 @@ export class GameScene extends DirtyScene {
 
         let oldPeerNumber = 0;
         this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
-            this.volumeStoreUnsubscribers.forEach(unsubscribe => unsubscribe());
+            this.volumeStoreUnsubscribers.forEach((unsubscribe) => unsubscribe());
             this.volumeStoreUnsubscribers.clear();
 
             for (const [key, videoStream] of peers) {
-                this.volumeStoreUnsubscribers.set(key, videoStream.volumeStore.subscribe((volume) => {
+                this.volumeStoreUnsubscribers.set(
+                    key,
+                    videoStream.volumeStore.subscribe((volume) => {
                         if (volume) {
                             this.MapPlayersByKey.get(key)?.showTalkIcon(volume > 5);
                         }
-                }));
+                    })
+                );
             }
 
             const newPeerNumber = peers.size;
@@ -1764,6 +1767,12 @@ ${escapedMessage}
                     emoteMenuStore.openEmoteMenu();
                 }
             });
+            this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OVER, (pointer: Phaser.Input.Pointer) => {
+                this.CurrentPlayer.pointerOverOutline(0x00ffff);
+            });
+            this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OUT, (pointer: Phaser.Input.Pointer) => {
+                this.CurrentPlayer.pointerOutOutline();
+            });
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);
                 analyticsClient.launchEmote(emoteKey);

front/src/Phaser/Game/OutlineableInterface.ts

@@ -3,8 +3,8 @@ export interface OutlineableInterface {
     removeFollowOutlineColor(): void;
     setApiOutlineColor(color: number): void;
     removeApiOutlineColor(): void;
-    pointerOverOutline(): void;
+    pointerOverOutline(color: number): void;
     pointerOutOutline(): void;
-    characterCloseByOutline(): void;
+    characterCloseByOutline(color: number): void;
     characterFarAwayOutline(): void;
 }

front/src/Phaser/Player/Player.ts

@@ -25,7 +25,7 @@ export class Player extends Character {
         direction: PlayerAnimationDirections,
         moving: boolean,
         companion: string | null,
-        companionTexturePromise?: Promise<string>
+        companionTexturePromise?: CancelablePromise<string>
     ) {
         super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);
 

front/src/Phaser/UserInput/GameSceneUserInputHandler.ts

@@ -22,7 +22,7 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface {
     }
 
     public handlePointerUpEvent(pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]): void {
-        if (pointer.rightButtonReleased() || pointer.getDuration() > 250) {
+        if ((!pointer.wasTouch && pointer.leftButtonReleased()) || pointer.getDuration() > 250) {
             return;
         }
         for (const object of gameObjects) {
@@ -53,10 +53,20 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface {
     public handlePointerDownEvent(pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]): void {}
 
     public handleSpaceKeyUpEvent(event: Event): Event {
-        const activatable = this.gameScene.getActivatablesManager().getSelectedActivatableObject();
+        const activatableManager = this.gameScene.getActivatablesManager();
-        if (activatable && activatable.isActivatable()) {
+        const activatable = activatableManager.getSelectedActivatableObject();
+        if (activatable && activatable.isActivatable() && activatableManager.isSelectingByDistanceEnabled()) {
             activatable.activate();
         }
         return event;
     }
+
+    public addSpaceEventListener(callback: Function): void {
+        this.gameScene.input.keyboard.addListener("keyup-SPACE", callback);
+        this.gameScene.getActivatablesManager().disableSelectingByDistance();
+    }
+    public removeSpaceEventListner(callback: Function): void {
+        this.gameScene.input.keyboard.removeListener("keyup-SPACE", callback);
+        this.gameScene.getActivatablesManager().enableSelectingByDistance();
+    }
 }

front/src/Phaser/UserInput/UserInputManager.ts

@@ -223,10 +223,10 @@ export class UserInputManager {
     }
 
     addSpaceEventListner(callback: Function) {
-        this.scene.input.keyboard.addListener("keyup-SPACE", callback);
+        this.userInputHandler.addSpaceEventListener(callback);
     }
     removeSpaceEventListner(callback: Function) {
-        this.scene.input.keyboard.removeListener("keyup-SPACE", callback);
+        this.userInputHandler.removeSpaceEventListner(callback);
     }
 
     destroy(): void {
@@ -255,6 +255,11 @@ export class UserInputManager {
             (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => {
                 this.joystick?.hide();
                 this.userInputHandler.handlePointerUpEvent(pointer, gameObjects);
+
+                // Disable focus on iframe (need by Firefox)
+                if (pointer.downElement.nodeName === "CANVAS" && document.activeElement instanceof HTMLIFrameElement) {
+                    document.activeElement.blur();
+                }
             }
         );
 

front/src/Stores/LayoutManagerStore.ts

@@ -1,4 +1,5 @@
 import { derived, writable } from "svelte/store";
+import type { ActivatablesManager } from "../Phaser/Game/ActivatablesManager";
 import type { UserInputManager } from "../Phaser/UserInput/UserInputManager";
 
 export interface LayoutManagerAction {

front/src/Stores/OutlineColorStore.ts

@@ -5,38 +5,33 @@ export function createColorStore() {
 
     let followColor: number | undefined = undefined;
     let apiColor: number | undefined = undefined;
-
+    let pointedByPointer: number | undefined = undefined;
-    let pointedByPointer: boolean = false;
+    let pointedByCharacter: number | undefined = undefined;
-    let pointedByCharacter: boolean = false;
 
     const updateColor = () => {
-        if (pointedByPointer || pointedByCharacter) {
+        set(pointedByPointer ?? pointedByCharacter ?? followColor ?? apiColor);
-            set(0xffff00);
-        } else {
-            set(followColor ?? apiColor);
-        }
     };
 
     return {
         subscribe,
 
-        pointerOver() {
+        pointerOver(color: number) {
-            pointedByPointer = true;
+            pointedByPointer = color;
             updateColor();
         },
 
         pointerOut() {
-            pointedByPointer = false;
+            pointedByPointer = undefined;
             updateColor();
         },
 
-        characterCloseBy() {
+        characterCloseBy(color: number) {
-            pointedByCharacter = true;
+            pointedByCharacter = color;
             updateColor();
         },
 
         characterFarAway() {
-            pointedByCharacter = false;
+            pointedByCharacter = undefined;
             updateColor();
         },
 

yarn.lock

@@ -2,6 +2,7 @@
 # yarn lockfile v1
 
 
-"husky@^6.0.0":
+husky@^7.0.1:
-  "resolved" "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz"
+  version "7.0.4"
-  "version" "6.0.0"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
+  integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==