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

.github/workflows/build-and-deploy.yml

@@ -2,7 +2,7 @@ name: Build, push and deploy Docker image
 
 on:
   push:
-    branches: [master]
+    branches: [master, develop]
   release:
     types: [created]
   pull_request:

CHANGELOG.md

@@ -8,12 +8,31 @@
 
 ### Updates
 
+- Added the emote feature to WorkAdventure. (@Kharhamel, @Tabascoeye)
+  - The emote menu can be opened by clicking on your character. 
+  -  Clicking on one of its element will close the menu and play an emote above your character. 
+  -  This emote can be seen by other players.
+- Player names were improved. (@Kharhamel)
+  - We now create a GameObject.Text instead of GameObject.BitmapText
+  - now use the 'Press Start 2P' font family and added an outline
+  - As a result, we can now allow non-standard letters like french accents or chinese characters!
+  
+- Added the contact card feature. (@Kharhamel)
+  - Click on another player to see its contact info.
+  - Premium-only feature unfortunately. I need to find a way to make it available for all.
+  - If no contact data is found (either because the user is anonymous or because no admin backend), display an error card.
+
 - Mobile support has been improved
   - WorkAdventure automatically sets the zoom level based on the viewport size to ensure a sensible size of the map is visible, whatever the viewport used
   - Mouse wheel support to zoom in / out
   - Pinch support on mobile to zoom in / out
   - Improved virtual joystick size (adapts to the zoom level)
-  
+- Redesigned intermediate scenes
+  - Redesigned Select Companion scene
+  - Redesigned Enter Your Name scene
+    - Added a new `DISPLAY_TERMS_OF_USE` environment variable to trigger the display of terms of use  
+- New scripting API features:
+  - Use `WA.loadSound(): Sound` to load / play / stop a sound
 
 ### Bug Fixes
 

back/src/Model/GameRoom.ts

@@ -2,12 +2,12 @@ import {PointInterface} from "./Websocket/PointInterface";
 import {Group} from "./Group";
 import {User, UserSocket} from "./User";
 import {PositionInterface} from "_Model/PositionInterface";
-import {EntersCallback, LeavesCallback, MovesCallback} from "_Model/Zone";
+import {EmoteCallback, EntersCallback, LeavesCallback, MovesCallback} from "_Model/Zone";
 import {PositionNotifier} from "./PositionNotifier";
 import {Movable} from "_Model/Movable";
 import {extractDataFromPrivateRoomId, extractRoomSlugPublicRoomId, isRoomAnonymous} from "./RoomIdentifier";
 import {arrayIntersect} from "../Services/ArrayHelper";
-import {JoinRoomMessage} from "../Messages/generated/messages_pb";
+import {EmoteEventMessage, JoinRoomMessage} from "../Messages/generated/messages_pb";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
 import {ZoneSocket} from "src/RoomManager";
 import {Admin} from "../Model/Admin";
@@ -51,8 +51,9 @@ export class GameRoom {
                 groupRadius: number,
                 onEnters: EntersCallback,
                 onMoves: MovesCallback,
-                onLeaves: LeavesCallback)
+                onLeaves: LeavesCallback,
-    {
+                onEmote: EmoteCallback,
+    ) {
         this.roomId = roomId;
 
         if (isRoomAnonymous(roomId)) {
@@ -74,7 +75,7 @@ export class GameRoom {
         this.minDistance = minDistance;
         this.groupRadius = groupRadius;
         // A zone is 10 sprites wide.
-        this.positionNotifier = new PositionNotifier(320, 320, onEnters, onMoves, onLeaves);
+        this.positionNotifier = new PositionNotifier(320, 320, onEnters, onMoves, onLeaves, onEmote);
     }
 
     public getGroups(): Group[] {
@@ -88,6 +89,9 @@ export class GameRoom {
     public getUserByUuid(uuid: string): User|undefined {
         return this.usersByUuid.get(uuid);
     }
+    public getUserById(id: number): User|undefined {
+        return this.users.get(id);
+    }
     
     public join(socket : UserSocket, joinRoomMessage: JoinRoomMessage): User {
         const positionMessage = joinRoomMessage.getPositionmessage();
@@ -325,4 +329,8 @@ export class GameRoom {
         this.versionNumber++
         return this.versionNumber;
     }
+
+    public emitEmoteEvent(user: User, emoteEventMessage: EmoteEventMessage) {
+        this.positionNotifier.emitEmoteEvent(user, emoteEventMessage);
+    }
 }

back/src/Model/PositionNotifier.ts

@@ -8,10 +8,12 @@
  * The PositionNotifier is important for performance. It allows us to send the position of players only to a restricted
  * number of players around the current player.
  */
-import {EntersCallback, LeavesCallback, MovesCallback, Zone} from "./Zone";
+import {EmoteCallback, EntersCallback, LeavesCallback, MovesCallback, Zone} from "./Zone";
 import {Movable} from "_Model/Movable";
 import {PositionInterface} from "_Model/PositionInterface";
 import {ZoneSocket} from "../RoomManager";
+import {User} from "_Model/User";
+import {EmoteEventMessage} from "../Messages/generated/messages_pb";
 
 interface ZoneDescriptor {
     i: number;
@@ -24,7 +26,7 @@ export class PositionNotifier {
 
     private zones: Zone[][] = [];
 
-    constructor(private zoneWidth: number, private zoneHeight: number, private onUserEnters: EntersCallback, private onUserMoves: MovesCallback, private onUserLeaves: LeavesCallback) {
+    constructor(private zoneWidth: number, private zoneHeight: number, private onUserEnters: EntersCallback, private onUserMoves: MovesCallback, private onUserLeaves: LeavesCallback, private onEmote: EmoteCallback) {
     }
 
     private getZoneDescriptorFromCoordinates(x: number, y: number): ZoneDescriptor {
@@ -77,7 +79,7 @@ export class PositionNotifier {
 
         let zone = this.zones[j][i];
         if (zone === undefined) {
-            zone = new Zone(this.onUserEnters, this.onUserMoves, this.onUserLeaves, i, j);
+            zone = new Zone(this.onUserEnters, this.onUserMoves, this.onUserLeaves, this.onEmote, i, j);
             this.zones[j][i] = zone;
         }
         return zone;
@@ -93,4 +95,11 @@ export class PositionNotifier {
         const zone = this.getZone(x, y);
         zone.removeListener(call);
     }
+
+    public emitEmoteEvent(user: User, emoteEventMessage: EmoteEventMessage) {
+        const zoneDesc = this.getZoneDescriptorFromCoordinates(user.getPosition().x, user.getPosition().y);
+        const zone = this.getZone(zoneDesc.i, zoneDesc.j);
+        zone.emitEmoteEvent(emoteEventMessage);
+        
+    }
 }

back/src/Model/Zone.ts

@@ -3,21 +3,19 @@ import {PositionInterface} from "_Model/PositionInterface";
 import {Movable} from "./Movable";
 import {Group} from "./Group";
 import {ZoneSocket} from "../RoomManager";
+import {EmoteEventMessage} from "../Messages/generated/messages_pb";
 
 export type EntersCallback = (thing: Movable, fromZone: Zone|null, listener: ZoneSocket) => void;
 export type MovesCallback = (thing: Movable, position: PositionInterface, listener: ZoneSocket) => void;
 export type LeavesCallback = (thing: Movable, newZone: Zone|null, listener: ZoneSocket) => void;
+export type EmoteCallback = (emoteEventMessage: EmoteEventMessage, listener: ZoneSocket) => void;
 
 export class Zone {
     private things: Set<Movable> = new Set<Movable>();
     private listeners: Set<ZoneSocket> = new Set<ZoneSocket>();
     
-    /**
+    
-     * @param x For debugging purpose only
+    constructor(private onEnters: EntersCallback, private onMoves: MovesCallback, private onLeaves: LeavesCallback, private onEmote: EmoteCallback, public readonly x: number, public readonly y: number) { }
-     * @param y For debugging purpose only
-     */
-    constructor(private onEnters: EntersCallback, private onMoves: MovesCallback, private onLeaves: LeavesCallback, public readonly x: number, public readonly y: number) {
-    }
 
     /**
      * A user/thing leaves the zone
@@ -41,9 +39,7 @@ export class Zone {
      */
     private notifyLeft(thing: Movable, newZone: Zone|null) {
         for (const listener of this.listeners) {
-            //if (listener !== thing && (newZone === null || !listener.listenedZones.has(newZone))) {
             this.onLeaves(thing, newZone, listener);
-            //}
         }
     }
 
@@ -57,15 +53,6 @@ export class Zone {
      */
     private notifyEnter(thing: Movable, oldZone: Zone|null, position: PositionInterface) {
         for (const listener of this.listeners) {
-
-            /*if (listener === thing) {
-                continue;
-            }
-            if (oldZone === null || !listener.listenedZones.has(oldZone)) {
-                this.onEnters(thing, listener);
-            } else {
-                this.onMoves(thing, position, listener);
-            }*/
             this.onEnters(thing, oldZone, listener);
         }
     }
@@ -85,28 +72,6 @@ export class Zone {
         }
     }
 
-    /*public startListening(listener: User): void {
-        for (const thing of this.things) {
-            if (thing !== listener) {
-                this.onEnters(thing, listener);
-            }
-        }
-
-        this.listeners.add(listener);
-        listener.listenedZones.add(this);
-    }
-
-    public stopListening(listener: User): void {
-        for (const thing of this.things) {
-            if (thing !== listener) {
-                this.onLeaves(thing, listener);
-            }
-        }
-
-        this.listeners.delete(listener);
-        listener.listenedZones.delete(this);
-    }*/
-
     public getThings(): Set<Movable> {
         return this.things;
     }
@@ -119,4 +84,11 @@ export class Zone {
     public removeListener(socket: ZoneSocket): void {
         this.listeners.delete(socket);
     }
+
+    public emitEmoteEvent(emoteEventMessage: EmoteEventMessage) {
+        for (const listener of this.listeners) {
+            this.onEmote(emoteEventMessage, listener);
+        }
+        
+    }
 }

back/src/RoomManager.ts

@@ -5,12 +5,13 @@ import {
     AdminPusherToBackMessage,
     AdminRoomMessage,
     BanMessage,
+    EmotePromptMessage,
     EmptyMessage,
     ItemEventMessage,
     JoinRoomMessage,
     PlayGlobalMessage,
     PusherToBackMessage,
-    QueryJitsiJwtMessage, RefreshRoomPromptMessage,
+    QueryJitsiJwtMessage, RefreshRoomPromptMessage, RequestVisitCardMessage,
     ServerToAdminClientMessage,
     ServerToClientMessage,
     SilentMessage,
@@ -71,6 +72,10 @@ const roomManager: IRoomManagerServer = {
                         socketManager.emitPlayGlobalMessage(room, message.getPlayglobalmessage() as PlayGlobalMessage);
                     } else if (message.hasQueryjitsijwtmessage()){
                         socketManager.handleQueryJitsiJwtMessage(user, message.getQueryjitsijwtmessage() as QueryJitsiJwtMessage);
+                    } else if (message.hasEmotepromptmessage()){
+                        socketManager.handleEmoteEventMessage(room, user, message.getEmotepromptmessage() as EmotePromptMessage);
+                    } else if (message.hasRequestvisitcardmessage()) {
+                        socketManager.handleRequestVisitCardMessage(room, user, message.getRequestvisitcardmessage() as RequestVisitCardMessage);
                     }else if (message.hasSendusermessage()) {
                         const sendUserMessage = message.getSendusermessage();
                         if(sendUserMessage !== undefined) {

back/src/Services/AdminApi.ts

@@ -0,0 +1,22 @@
+import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
+import Axios from "axios";
+
+
+class AdminApi {
+
+    fetchVisitCardUrl(membershipUuid: string): Promise<string> {
+        if (ADMIN_API_URL) {
+            return Axios.get(ADMIN_API_URL + '/api/membership/'+membershipUuid,
+                {headers: {"Authorization": `${ADMIN_API_TOKEN}`}}
+            ).then((res) => {
+                return res.data;
+            }).catch(() => {
+                return 'INVALID';
+            });
+        } else {
+            return Promise.resolve('INVALID')
+        }
+    }
+}
+
+export const adminApi = new AdminApi();

back/src/Services/SocketManager.ts

@@ -26,7 +26,8 @@ import {
     GroupLeftZoneMessage,
     WorldFullWarningMessage,
     UserLeftZoneMessage,
-    BanUserMessage, RefreshRoomMessage,
+    EmoteEventMessage,
+    BanUserMessage, RefreshRoomMessage, EmotePromptMessage, RequestVisitCardMessage, VisitCardMessage,
 } from "../Messages/generated/messages_pb";
 import {User, UserSocket} from "../Model/User";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
@@ -50,6 +51,7 @@ import {Zone} from "_Model/Zone";
 import Debug from "debug";
 import {Admin} from "_Model/Admin";
 import crypto from "crypto";
+import {adminApi} from "./AdminApi";
 
 
 const debug = Debug('sockermanager');
@@ -67,6 +69,7 @@ export class SocketManager {
     private rooms: Map<string, GameRoom> = new Map<string, GameRoom>();
 
     constructor() {
+        
         clientEventsEmitter.registerToClientJoin((clientUUid: string, roomId: string) => {
             gaugeManager.incNbClientPerRoomGauge(roomId);
         });
@@ -263,7 +266,8 @@ export class SocketManager {
                 GROUP_RADIUS,
                 (thing: Movable, fromZone: Zone|null, listener: ZoneSocket) => this.onZoneEnter(thing, fromZone, listener),
                 (thing: Movable, position:PositionInterface, listener: ZoneSocket) => this.onClientMove(thing, position, listener),
-                (thing: Movable, newZone: Zone|null, listener: ZoneSocket) => this.onClientLeave(thing, newZone, listener)
+                (thing: Movable, newZone: Zone|null, listener: ZoneSocket) => this.onClientLeave(thing, newZone, listener),
+                (emoteEventMessage:EmoteEventMessage, listener: ZoneSocket) => this.onEmote(emoteEventMessage, listener),
             );
             gaugeManager.incNbRoomGauge();
             this.rooms.set(roomId, world);
@@ -339,6 +343,14 @@ export class SocketManager {
         }
     }
 
+
+    private onEmote(emoteEventMessage: EmoteEventMessage, client: ZoneSocket) {
+        const subMessage = new SubToPusherMessage();
+        subMessage.setEmoteeventmessage(emoteEventMessage);
+
+        emitZoneMessage(subMessage, client);
+    }
+
     private emitCreateUpdateGroupEvent(client: ZoneSocket, fromZone: Zone|null, group: Group): void {
         const position = group.getPosition();
         const pointMessage = new PointMessage();
@@ -751,6 +763,28 @@ export class SocketManager {
             recipient.socket.write(clientMessage);
         });
     }
+
+    handleEmoteEventMessage(room: GameRoom, user: User, emotePromptMessage: EmotePromptMessage) {
+        const emoteEventMessage = new EmoteEventMessage();
+        emoteEventMessage.setEmote(emotePromptMessage.getEmote());
+        emoteEventMessage.setActoruserid(user.id);
+        room.emitEmoteEvent(user, emoteEventMessage);
+    }
+
+    async handleRequestVisitCardMessage(room: GameRoom, user: User, requestvisitcardmessage: RequestVisitCardMessage): Promise<void> {
+        const targetUser = room.getUserById(requestvisitcardmessage.getTargetuserid());
+        if (!targetUser) {
+            throw 'Could not find user for id '+requestvisitcardmessage.getTargetuserid();
+        }
+        const url = await adminApi.fetchVisitCardUrl(targetUser.uuid);
+        
+        const visitCardMessage = new VisitCardMessage();
+        visitCardMessage.setUrl(url);
+        const clientMessage = new ServerToClientMessage();
+        clientMessage.setVisitcardmessage(visitCardMessage);
+        
+        user.socket.write(clientMessage);
+    }
 }
 
 export const socketManager = new SocketManager();

back/tests/GameRoomTest.ts

@@ -5,6 +5,7 @@ import {Group} from "../src/Model/Group";
 import {User, UserSocket} from "_Model/User";
 import {JoinRoomMessage, PositionMessage} from "../src/Messages/generated/messages_pb";
 import Direction = PositionMessage.Direction;
+import {EmoteCallback} from "_Model/Zone";
 
 function createMockUser(userId: number): User {
     return {
@@ -33,6 +34,8 @@ function createJoinRoomMessage(uuid: string, x: number, y: number): JoinRoomMess
     return joinRoomMessage;
 }
 
+const emote: EmoteCallback = (emoteEventMessage, listener): void => {}
+
 describe("GameRoom", () => {
     it("should connect user1 and user2", () => {
         let connectCalledNumber: number = 0;
@@ -43,7 +46,8 @@ describe("GameRoom", () => {
 
         }
 
-        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {}, emote);
 
 
 
@@ -72,7 +76,7 @@ describe("GameRoom", () => {
 
         }
 
-        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {}, emote);
 
         const user1 = world.join(createMockUserSocket(), createJoinRoomMessage('1', 100, 100));
 
@@ -101,7 +105,7 @@ describe("GameRoom", () => {
             disconnectCallNumber++;
         }
 
-        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {});
+        const world = new GameRoom('_/global/test.json', connect, disconnect, 160, 160, () => {}, () => {}, () => {}, emote);
 
         const user1 = world.join(createMockUserSocket(), createJoinRoomMessage('1', 100, 100));
 

back/tests/PositionNotifierTest.ts

@@ -23,7 +23,7 @@ describe("PositionNotifier", () => {
             moveTriggered = true;
         }, (thing: Movable) => {
             leaveTriggered = true;
-        });
+        }, () => {});
 
         const user1 = new User(1, 'test', '10.0.0.2', {
             x: 500,
@@ -98,7 +98,7 @@ describe("PositionNotifier", () => {
             moveTriggered = true;
         }, (thing: Movable) => {
             leaveTriggered = true;
-        });
+        }, () => {});
 
         const user1 = new User(1, 'test', '10.0.0.2', {
             x: 500,

back/yarn.lock

@@ -1251,9 +1251,9 @@ has-values@^1.0.0:
     kind-of "^4.0.0"
 
 hosted-git-info@^2.1.4:
-  version "2.8.8"
+  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
-  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
 http-errors@1.7.2:
   version "1.7.2"

benchmark/package-lock.json

@@ -230,9 +230,9 @@
       }
     },
     "hosted-git-info": {
-      "version": "2.8.8",
+      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "indent-string": {
       "version": "2.1.0",

benchmark/yarn.lock

@@ -169,8 +169,8 @@ graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
 
 hosted-git-info@^2.1.4:
-  version "2.8.8"
+  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
 
 indent-string@^2.1.0:
   version "2.1.0"

front/dist/index.tmpl.html

@@ -29,7 +29,6 @@
 
 
         <base href="/">
-        <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
         <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
 
         <title>WorkAdventure</title>
@@ -47,33 +46,6 @@
                     </aside>
                     <div id="chat-mode" class="chat-mode three-col" style="display: none;">
                     </div>
-                    <div id="activeCam" class="activeCam">
-                        <div id="div-myCamVideo" class="video-container">
-                            <video id="myCamVideo" autoplay muted></video>
-                            <div id="mySoundMeter" class="sound-progress">
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="btn-cam-action">
-                        <div id="btn-monitor" class="btn-monitor">
-                            <img id="monitor" src="resources/logos/monitor.svg">
-                            <img id="monitor-close" src="resources/logos/monitor-close.svg">
-                        </div>
-                        <div id="btn-video" class="btn-video">
-                            <img id="cinema" src="resources/logos/cinema.svg">
-                            <img id="cinema-close" src="resources/logos/cinema-close.svg">
-                        </div>
-                        <div id="btn-micro" class="btn-micro">
-                            <img id="microphone" src="resources/logos/microphone.svg">
-                            <img id="microphone-close" src="resources/logos/microphone-close.svg">
-                        </div>
-                    </div>
-
                 </div>
             </div>
             <div id="cowebsite" class="cowebsite hidden">
@@ -108,30 +80,17 @@
                     </div>
                 </div>
                 <div class="audioplayer">
-                    <label id="label-audioplayer_decrease_while_talking" for="audiooplayer_decrease_while_talking" title="decrease background volume by 50% when entering conversations">
+                    <label id="label-audioplayer_decrease_while_talking" for="audioplayer_decrease_while_talking" title="decrease background volume by 50% when entering conversations">
                         reduce in conversations
                         <input type="checkbox" id="audioplayer_decrease_while_talking" checked />
                     </label>
                     <div id="audioplayer" style="visibility: hidden"></div>
                 </div>
             </div>
-            <div class="audio-playing">
-                <img src="/resources/logos/megaphone.svg" />
-            </div>
         </div>
 
         <div id="activeScreenSharing" class="active-screen-sharing active">
         </div>
-        <div id="webRtcSetup" class="webrtcsetup">
-            <img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
-            <video id="myCamVideoSetup" autoplay muted></video>
-        </div>
-        <audio id="audio-webrtc-in">
-            <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
-        </audio>
-        <audio id="audio-webrtc-out">
-            <source src="/resources/objects/webrtc-out.mp3" type="audio/mp3">
-        </audio>
         <audio id="report-message">
             <source src="/resources/objects/report-message.mp3" type="audio/mp3">
         </audio>

front/dist/resources/fonts/fonts.css

@@ -0,0 +1,5 @@
+/*This file is a workaround to allow phaser to load directly this font */
+@font-face {
+    font-family: "Press Start 2P";
+    src: url("/fonts/press-start-2p-latin-400-normal.woff2") format('woff2');
+}

front/dist/resources/html/CustomCharacterScene.html

@@ -1,160 +0,0 @@
-<style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #customizeScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        width: 42vw;
-        height: 48vh;
-        /*max-width: 300px;
-        max-height: 48vh;*/
-        overflow: hidden;
-    }
-    #customizeScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #customizeScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #customizeScene section {
-        margin: 10px;
-    }
-    #customizeScene section.action {
-        text-align: center;
-        position: sticky;
-        bottom: 0;
-        top: 100%;
-    }
-    #customizeScene section.action.action-move { 
-        top: 55%;
-    }
-    #customizeScene button {
-        margin: 2px 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #customizeScene button#customizeSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #customizeScene section h6,
-    #customizeScene section h5{
-        margin: 1px;
-    }
-    #customizeScene section.text-center{
-        text-align: center;
-    }
-    #customizeScene section a{
-        font-size: 14px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #customizeScene section a:hover{
-        font-weight: 700;
-    }
-    #customizeScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #customizeScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #customizeScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #customizeScene section input#customizeSceneLink{
-        background-color: #a1a3a3;
-    }
-    #customizeScene section button.customizeSceneButton{
-        position: absolute;
-        margin: 0;
-        top: -8vh;
-        font-size: 10px;
-        padding: 2px 4px;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonLeft{
-        left: 0vw;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonRight{
-        right: 0vw;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonUp{
-        left: calc(2vw + 40px);
-        transform: rotate(90deg);
-        margin-top: -20px;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonDown{
-        right: calc(2vw + 40px);
-        transform: rotate(90deg);
-        margin-top: 20px;
-    }
-    #customizeScene section.action img{
-        width: 8px;
-        height: 8px;
-    }
-    #customizeScene section.action a#customizeSceneFormBack img{
-        margin-top: -2px;
-    }
-    #customizeScene section.action button#customizeSceneFormSubmit img{
-        transform: rotate(180deg);
-    }
-    @media only screen and (max-width: 600px) {
-        #customizeScene {
-            max-width: 160px;
-            overflow-y: scroll;
-        }
-    }
-    @media only screen and (max-height: 400px) {
-        #customizeScene section.action {
-            top: 92%;
-        }
-        #customizeScene section.action.action-move { 
-            top: 80%;
-        }
-    }
-</style>
-
-<form id="customizeScene" hidden>
-    <section class="text-center">
-        <h5>Custom your WOKA</h3>
-    </section>
-    <section class="action action-move">
-        <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
-        <!--<button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
-    </section>
-    <section class="action">
-        <a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
-        <button type="submit" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
-    </section>
-</form>

front/dist/resources/html/EnableCameraScene.html

@@ -1,129 +0,0 @@
-<style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #enableCameraScene {
-        background: #000000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 20px auto 0;
-        color: #ebeeee;
-        max-height: 48vh;
-        width: 42vw;
-        max-width: 300px;
-        overflow: hidden;
-    }
-    #enableCameraScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #enableCameraScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #enableCameraScene section.title {
-        position: absolute;
-        top: 1vh;
-        width: 100%;
-    }
-    #enableCameraScene section.action{
-        text-align: center;
-        margin: 0;
-        position: absolute;
-        top: 40vh;
-        width: 100%;
-    }
-    #enableCameraScene button {
-        margin: 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #enableCameraScene button#enableCameraSceneFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    #enableCameraScene section h6,
-    #enableCameraScene section h5{
-        margin: 1px;
-    }
-    #enableCameraScene section.text-center{
-        text-align: center;
-    }
-    #enableCameraScene section a{
-        font-size: 8px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #enableCameraScene section a:hover{
-        font-weight: 700;
-    }
-    #enableCameraScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #enableCameraScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #enableCameraScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #enableCameraScene section input#enableCameraSceneLink{
-        background-color: #a1a3a3;
-    }
-    #enableCameraScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    /*@media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #enableCameraScene{
-            overflow-y: scroll;
-        }
-    }*/
-</style>
-
-<form id="enableCameraScene" hidden>
-    <!-- FIX me -->
-    <section class="title text-center">
-        <h5>Turn on your camera and microphone</h5>
-    </section>
-    <!--<section class="text-center">
-        <video id="myCamVideoSetup" autoplay muted></video>
-    </section>
-    <section class="text-center">
-        <h5>Select your camera</h3>
-        <select id="camera">
-        </select>
-    </section>
-    <section class="text-center">
-        <h5>Select your michrophone</h3>
-        <select id="michrophone">
-        </select>
-    </section>-->
-    <section class="action">
-        <button type="submit" id="enableCameraSceneFormSubmit">Let's go!</button>
-    </section>
-</form>

front/dist/resources/html/SelectCompanionScene.html

@@ -1,134 +0,0 @@
-<style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #selectCompanionScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        max-height: 40vh;
-        max-width: 300px;
-        width: 40vw;
-        overflow: hidden;
-    }
-    #selectCompanionScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #selectCompanionScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #selectCompanionScene section {
-        margin: 10px;
-    }
-    #selectCompanionScene section.action {
-        text-align: center;
-        margin: 0;
-        margin-top: 20vh;
-    }
-    #selectCompanionScene button {
-        margin: 10px 4px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
-    #selectCompanionScene button#selectCompanionSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #selectCompanionScene section h6,
-    #selectCompanionScene section h5{
-        margin: 1px;
-    }
-    #selectCompanionScene section.text-center{
-        text-align: center;
-    }
-    #selectCompanionScene section a{
-        font-size: 14px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #selectCompanionScene section a:hover{
-        font-weight: 700;
-    }
-    #selectCompanionScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #selectCompanionScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #selectCompanionScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #selectCompanionScene section input#selectCompanionSceneLink{
-        background-color: #a1a3a3;
-    }
-    #selectCompanionScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    #selectCompanionScene section button.selectCharacterButton{
-        position: absolute;
-        top: 20vh;
-        margin: 0;
-        width: 25px;
-    }
-    #selectCompanionScene section button.selectCharacterButton#selectCharacterButtonLeft{
-        left: 1vw;
-    }
-    #selectCompanionScene section button.selectCharacterButton#selectCharacterButtonRight{
-        right: 1vw;
-    }
-    #selectCompanionScene section button#selectCompanionSceneFormCustomYourOwnSubmit{
-        font-size: 14px;
-        width: auto;
-        margin-top: -2px;
-        background-color: #ffd700;
-        color: black;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #selectCompanionScene{
-            overflow-y: scroll;
-        }
-    }
-</style>
-
-<form id="selectCompanionScene" hidden>
-    <section class="text-center">
-        <h5>Select your WOKA</h5>
-        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
-        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
-    </section>
-    <section class="action">
-        <a herf="#" id="selectCompanionSceneFormBack">No companion</a>
-        <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
-    </section>
-</form>

front/dist/resources/html/gameMenu.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameMenu main{
         margin-top: 15px;
     }

front/dist/resources/html/gameMenuIcon.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #menuIcon button {
         background-color: black;
         color: white;

front/dist/resources/html/gameQualityMenu.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameQuality {
         background: #eceeee;
         border: 1px solid #42464b;

front/dist/resources/html/gameReport.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameReport {
         background: #eceeee;
         border: 1px solid #42464b;

front/dist/resources/html/gameShare.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameShare {
         background: #eceeee;
         border: 1px solid #42464b;

front/dist/resources/html/helpCameraSettings.html

@@ -1,109 +0,0 @@
-<style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #helpCameraSettings {
-        background: #eceeee;
-        border: 1px solid #42464b;
-        border-radius: 6px;
-        margin: 25px auto 0;
-        width: 400px;
-        max-height: calc(48vh - 50px);
-        max-width: 48vw;
-        overflow: hidden;
-        overflow-y: scroll;
-    }
-    #helpCameraSettings h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #helpCameraSettings section {
-        margin: 10px;
-    }
-    #helpCameraSettings section.action{
-        text-align: center;
-        margin: 0;
-    }
-    #helpCameraSettings button {
-        margin: 10px 4px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #helpCameraSettings button#helpCameraSettingsFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    #helpCameraSettings section a{
-        font-size: 12px;
-        text-decoration: underline;
-        color: black;
-    }
-    #helpCameraSettings section h6,
-    #helpCameraSettings section h5{
-        margin: 1px;
-    }
-    #helpCameraSettings section.text-center{
-        text-align: center;
-    }
-    #helpCameraSettings section p{
-        font-size: 8px;
-        margin: 0px 20px;
-    }
-    #helpCameraSettings section p a{
-        font-size: 8px;
-    }
-    #helpCameraSettings section p.err{
-        color: #ff0000;
-    }
-    #helpCameraSettings section ul{
-        margin: 6px;
-    }
-    #helpCameraSettings section li{
-        text-align: left;
-        font-size: 8px;
-    }
-    #helpCameraSettings section img {
-        width: 200px;
-        margin-top: 10px;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #helpCameraSettings{
-            overflow-y: scroll;
-        }
-    }
-</style>
-
-<form id="helpCameraSettings" hidden>
-    <section class="text-center">
-        <h5>Camera/Microphone access needed</h5>
-        <p class="err" id="permissionError">Permission denied</p>
-        <p class="info">You must allow camera and microphone access in your browser.</p>
-            <ul>
-                <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li>
-                <li>Please ensure that you have a camera AND microphone plugged into your computer.</li>
-            </ul>
-        <p class="info">Once you've followed these steps, please refresh this page.</p>
-        <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
-        <p id='browserHelpSetting'></p>
-    </section>
-    <!--<section class="text-center">
-        <p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
-    </section>-->
-    </section>
-    <section class="action">
-        <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
-        <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
-    </section>
-</form>

front/dist/resources/html/loginScene.html

@@ -1,120 +0,0 @@
-<style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #loginScene {
-        background: #000000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 20px auto 0;
-        width: 90%;
-        max-width: 200px;
-        color: #ebeeee;
-        max-height: 40vh;
-        overflow: hidden;
-    }
-    #loginScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #loginScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #loginScene section {
-        margin: 10px;
-    }
-    #loginScene section.action{
-        text-align: center;
-        margin: 0;
-    }
-    #loginScene button {
-        margin: 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
-    #loginScene button#loginSceneFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    #loginScene section h6,
-    #loginScene section h5{
-        margin: 1px;
-    }
-    #loginScene section.text-center{
-        text-align: center;
-    }
-    #loginScene section a{
-        font-size: 8px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #loginScene section a:hover{
-        font-weight: 700;
-    }
-    #loginScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #loginScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #loginScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #loginScene section input#loginSceneLink{
-        background-color: #a1a3a3;
-    }
-    #loginScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #loginScene{
-            overflow-y: scroll;
-        }
-    }
-</style>
-
-<form id="loginScene" hidden>
-    <section class="text-center">
-        <img src="resources/logos/logo.png">
-    </section>
-    <section class="text-center">
-        <h5>Enter your name</h5>
-        <p class="info">9 chars maximum</p>
-        <p class="err" id="errorLoginScene"></p>
-    </section>
-    <section>
-        <input type="text" name="email" id="loginSceneName">
-        <p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
-    </section>
-    <section class="action">
-        <button type="submit" id="loginSceneFormSubmit">Continue</button>
-    </section>
-</form>

front/dist/resources/html/selectCharacterScene.html

@@ -1,142 +0,0 @@
-<style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #selectCharacterScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        max-height: 48vh;
-        max-width: 300px;
-        width: 40vw;
-        overflow: hidden;
-    }
-    #selectCharacterScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #selectCharacterScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #selectCharacterScene section {
-        margin: 10px;
-    }
-    #selectCharacterScene section.action {
-        text-align: center;
-        margin: 0;
-        margin-top: 28vh;
-    }
-    #selectCharacterScene button {
-        margin: 10px 0px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
-    #selectCharacterScene button#selectCharacterSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #selectCharacterScene section h6,
-    #selectCharacterScene section h5{
-        margin: 1px;
-    }
-    #selectCharacterScene section.text-center{
-        text-align: center;
-    }
-    #selectCharacterScene section a{
-        font-size: 8px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #selectCharacterScene section a:hover{
-        font-weight: 700;
-    }
-    #selectCharacterScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #selectCharacterScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #selectCharacterScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #selectCharacterScene section input#selectCharacterSceneLink{
-        background-color: #a1a3a3;
-    }
-    #selectCharacterScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    #selectCharacterScene section button.selectCharacterButton{
-        position: absolute;
-        top: 20vh;
-        margin: 0;
-        width: 25px;
-    }
-    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
-        display: none;
-        left: 1vw;
-    }
-    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
-        display: none;
-        right: 1vw;
-    }
-    #selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
-        font-size: 14px;
-        width: auto;
-        margin-top: -2px;
-        background-color: #ffd700;
-        color: black;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #selectCharacterScene{
-            overflow-y: scroll;
-        }
-        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
-            display: block;
-        }
-        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
-            display: block;
-        }
-    }
-</style>
-
-<form id="selectCharacterScene" hidden>
-    <section class="text-center">
-        <h5>Select your WOKA</h5>
-        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
-        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
-    </section>
-    <section class="action">
-        <button type="submit" id="selectCharacterSceneFormSubmit">Continue</button>
-        <button type="submit" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your WOKA</button>
-    </section>
-</form>

front/dist/resources/html/warningContainer.html

@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #warningMain {
         border-radius: 5px;
         height: 100px;

front/package.json

@@ -34,6 +34,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "@fontsource/press-start-2p": "^4.3.0",
     "@types/simple-peer": "^9.6.0",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.1",
@@ -45,7 +46,8 @@
     "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",
+    "standardized-audio-context": "^25.2.4"
   },
   "scripts": {
     "start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",

front/src/Administration/GlobalMessageManager.ts

@@ -3,6 +3,8 @@ import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager";
 import {PUSHER_URL, UPLOADER_URL} from "../Enum/EnvironmentVariable";
 import type {RoomConnection} from "../Connexion/RoomConnection";
 import type {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
+import {soundPlayingStore} from "../Stores/SoundPlayingStore";
+import {soundManager} from "../Phaser/Game/SoundManager";
 
 export class GlobalMessageManager {
 
@@ -44,44 +46,7 @@ export class GlobalMessageManager {
     }
 
     private playAudioMessage(messageId : string, urlMessage: string) {
-        //delete previous elements
+        soundPlayingStore.playSound(UPLOADER_URL + urlMessage);
-        const previousDivAudio = document.getElementsByClassName('audio-playing');
-        for(let i = 0; i < previousDivAudio.length; i++){
-            previousDivAudio[i].remove();
-        }
-
-        //create new element
-        const divAudio : HTMLDivElement = document.createElement('div');
-        divAudio.id = `audio-playing-${messageId}`;
-        divAudio.classList.add('audio-playing');
-        const imgAudio : HTMLImageElement = document.createElement('img');
-        imgAudio.src = '/resources/logos/megaphone.svg';
-        const pAudio : HTMLParagraphElement = document.createElement('p');
-        pAudio.textContent = 'Message audio'
-        divAudio.appendChild(imgAudio);
-        divAudio.appendChild(pAudio);
-
-        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
-        mainSectionDiv.appendChild(divAudio);
-
-        const messageAudio : HTMLAudioElement = document.createElement('audio');
-        messageAudio.id = this.getHtmlMessageId(messageId);
-        messageAudio.autoplay = true;
-        messageAudio.style.display = 'none';
-        messageAudio.onended = () => {
-            divAudio.classList.remove('active');
-            messageAudio.remove();
-            setTimeout(() => {
-                divAudio.remove();
-            }, 1000);
-        }
-        messageAudio.onplay = () => {
-            divAudio.classList.add('active');
-        }
-        const messageAudioSource : HTMLSourceElement = document.createElement('source');
-        messageAudioSource.src = `${UPLOADER_URL}${urlMessage}`;
-        messageAudio.appendChild(messageAudioSource);
-        mainSectionDiv.appendChild(messageAudio);
     }
 
     private playTextMessage(messageId : string, htmlMessage: string){

front/src/Administration/TypeMessage.ts

@@ -44,7 +44,13 @@ export class TypeMessageExt implements TypeMessageInterface{
         mainSectionDiv.appendChild(div);
 
         const reportMessageAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('report-message');
+        // FIXME: this will fail on iOS
+        // We should move the sound playing into the GameScene and listen to the event of a report using a store
+        try {
             reportMessageAudio.play();
+        } catch (e) {
+            console.error(e);
+        }
 
         this.nbSecond = this.maxNbSecond;
         setTimeout((c) => {

front/src/Api/Events/IframeEvent.ts

@@ -9,6 +9,8 @@ import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
 import type { OpenPopupEvent } from './OpenPopupEvent';
 import type { OpenTabEvent } from './OpenTabEvent';
 import type { UserInputChatEvent } from './UserInputChatEvent';
+import type {LoadSoundEvent} from "./LoadSoundEvent";
+import type {PlaySoundEvent} from "./PlaySoundEvent";
 
 
 export interface TypedMessageEvent<T> extends MessageEvent {
@@ -29,6 +31,9 @@ export type IframeEventMap = {
     restorePlayerControls: null
     displayBubble: null
     removeBubble: null
+    loadSound: LoadSoundEvent
+    playSound: PlaySoundEvent
+    stopSound: null
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

front/src/Api/Events/LoadSoundEvent.ts

@@ -0,0 +1,11 @@
+import * as tg from "generic-type-guard";
+
+export const isLoadSoundEvent =
+    new tg.IsInterface().withProperties({
+        url: tg.isString,
+    }).get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type LoadSoundEvent = tg.GuardedType<typeof isLoadSoundEvent>;

front/src/Api/Events/PlaySoundEvent.ts

@@ -0,0 +1,24 @@
+import * as tg from "generic-type-guard";
+
+
+const isSoundConfig =
+    new tg.IsInterface().withProperties({
+        volume: tg.isOptional(tg.isNumber),
+        loop: tg.isOptional(tg.isBoolean),
+        mute: tg.isOptional(tg.isBoolean),
+        rate: tg.isOptional(tg.isNumber),
+        detune: tg.isOptional(tg.isNumber),
+        seek: tg.isOptional(tg.isNumber),
+        delay: tg.isOptional(tg.isNumber)
+    }).get();
+
+export const isPlaySoundEvent =
+    new tg.IsInterface().withProperties({
+        url: tg.isString,
+        config : tg.isOptional(isSoundConfig),
+    }).get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type PlaySoundEvent = tg.GuardedType<typeof isPlaySoundEvent>;

front/src/Api/Events/StopSoundEvent.ts

@@ -0,0 +1,11 @@
+import * as tg from "generic-type-guard";
+
+export const isStopSoundEvent =
+    new tg.IsInterface().withProperties({
+        url: tg.isString,
+    }).get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type StopSoundEvent = tg.GuardedType<typeof isStopSoundEvent>;

front/src/Api/IframeListener.ts

@@ -1,3 +1,4 @@
+
 import { Subject } from "rxjs";
 import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
@@ -11,8 +12,9 @@ import { GoToPageEvent, isGoToPageEvent } from "./Events/GoToPageEvent";
 import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
 import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper, TypedMessageEvent } from "./Events/IframeEvent";
 import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
-
+import {isPlaySoundEvent, PlaySoundEvent} from "./Events/PlaySoundEvent";
-
+import {isStopSoundEvent, StopSoundEvent} from "./Events/StopSoundEvent";
+import {isLoadSoundEvent, LoadSoundEvent} from "./Events/LoadSoundEvent";
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -51,6 +53,15 @@ class IframeListener {
     private readonly _removeBubbleStream: Subject<void> = new Subject();
     public readonly removeBubbleStream = this._removeBubbleStream.asObservable();
 
+    private readonly _playSoundStream: Subject<PlaySoundEvent> = new Subject();
+    public readonly playSoundStream = this._playSoundStream.asObservable();
+
+    private readonly _stopSoundStream: Subject<StopSoundEvent> = new Subject();
+    public readonly stopSoundStream = this._stopSoundStream.asObservable();
+
+    private readonly _loadSoundStream: Subject<LoadSoundEvent> = new Subject();
+    public readonly loadSoundStream = this._loadSoundStream.asObservable();
+
     private readonly iframes = new Set<HTMLIFrameElement>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
 
@@ -85,6 +96,15 @@ class IframeListener {
                 else if (payload.type === 'goToPage' && isGoToPageEvent(payload.data)) {
                     scriptUtils.goToPage(payload.data.url);
                 }
+                else if (payload.type === 'playSound' && isPlaySoundEvent(payload.data)) {
+                    this._playSoundStream.next(payload.data);
+                }
+                else if (payload.type === 'stopSound' && isStopSoundEvent(payload.data)) {
+                    this._stopSoundStream.next(payload.data);
+                }
+                else if (payload.type === 'loadSound' && isLoadSoundEvent(payload.data)) {
+                    this._loadSoundStream.next(payload.data);
+                }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
                     const scriptUrl = [...this.scripts.keys()].find(key => {
                         return this.scripts.get(key)?.contentWindow == message.source
@@ -92,9 +112,11 @@ class IframeListener {
 
                     scriptUtils.openCoWebsite(payload.data.url, scriptUrl || foundSrc);
                 }
+
                 else if (payload.type === 'closeCoWebSite') {
                     scriptUtils.closeCoWebSite();
                 }
+
                 else if (payload.type === 'disablePlayerControls') {
                     this._disablePlayerControlStream.next();
                 }

front/src/Components/App.svelte

@@ -1,11 +1,81 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisible} from "../Stores/MenuStore";
+    import {enableCameraSceneVisibilityStore, gameOverlayVisibilityStore} from "../Stores/MediaStore";
+    import CameraControls from "./CameraControls.svelte";
+    import MyCamera from "./MyCamera.svelte";
+    import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
+    import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore";
+    import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
+    import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
+    import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
+    import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
+    import LoginScene from "./Login/LoginScene.svelte";
+    import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
+    import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
+    import VisitCard from "./VisitCard/VisitCard.svelte";
+    import {requestVisitCardsStore} from "../Stores/GameStore";
 
+    import {Game} from "../Phaser/Game/Game";
+    import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
+    import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
+    import AudioPlaying from "./UI/AudioPlaying.svelte";
+    import {soundPlayingStore} from "../Stores/SoundPlayingStore";
+
+    export let game: Game;
 </script>
 
 <div>
-    <!-- {#if $menuIconVisible}
+    {#if $loginSceneVisibleStore}
-    <MenuIcon  />
+        <div class="scrollable">
-    {/if} -->
+            <LoginScene game={game}></LoginScene>
+        </div>
+    {/if}
+    {#if $selectCharacterSceneVisibleStore}
+        <div>
+            <SelectCharacterScene game={ game }></SelectCharacterScene>
+        </div>
+    {/if}
+    {#if $customCharacterSceneVisibleStore}
+        <div>
+           <CustomCharacterScene game={ game }></CustomCharacterScene>
+        </div>
+    {/if}
+    {#if $selectCompanionSceneVisibleStore}
+        <div>
+            <SelectCompanionScene game={ game }></SelectCompanionScene>
+        </div>
+    {/if}
+    {#if $enableCameraSceneVisibilityStore}
+        <div class="scrollable">
+            <EnableCameraScene game={game}></EnableCameraScene>
+        </div>
+    {/if}
+    {#if $soundPlayingStore}
+    <div>
+        <AudioPlaying url={$soundPlayingStore} />
+    </div>
+    {/if}
+
+    <!--
+    {#if $menuIconVisible}
+        <div>
+            <MenuIcon  />
+        </div>
+    {/if}
+    -->
+    {#if $gameOverlayVisibilityStore}
+        <div>
+            <MyCamera></MyCamera>
+            <CameraControls></CameraControls>
+        </div>
+    {/if}
+    {#if $helpCameraSettingsVisibleStore}
+        <div>
+            <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+        </div>
+    {/if}
+    {#if $requestVisitCardsStore}
+        <VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard>
+    {/if}
 </div>

front/src/Components/CameraControls.svelte

@@ -0,0 +1,61 @@
+<script lang="typescript">
+    import {requestedScreenSharingState, screenSharingAvailableStore} from "../Stores/ScreenSharingStore";
+    import {requestedCameraState, requestedMicrophoneState} from "../Stores/MediaStore";
+    import monitorImg from "./images/monitor.svg";
+    import monitorCloseImg from "./images/monitor-close.svg";
+    import cinemaImg from "./images/cinema.svg";
+    import cinemaCloseImg from "./images/cinema-close.svg";
+    import microphoneImg from "./images/microphone.svg";
+    import microphoneCloseImg from "./images/microphone-close.svg";
+
+    function screenSharingClick(): void {
+        if ($requestedScreenSharingState === true) {
+            requestedScreenSharingState.disableScreenSharing();
+        } else {
+            requestedScreenSharingState.enableScreenSharing();
+        }
+    }
+
+    function cameraClick(): void {
+        if ($requestedCameraState === true) {
+            requestedCameraState.disableWebcam();
+        } else {
+            requestedCameraState.enableWebcam();
+        }
+    }
+
+    function microphoneClick(): void {
+        if ($requestedMicrophoneState === true) {
+            requestedMicrophoneState.disableMicrophone();
+        } else {
+            requestedMicrophoneState.enableMicrophone();
+        }
+    }
+
+</script>
+
+<div>
+    <div class="btn-cam-action">
+        <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
+            {#if $requestedScreenSharingState}
+                <img src={monitorImg} alt="Start screen sharing">
+            {:else}
+                <img src={monitorCloseImg} alt="Stop screen sharing">
+            {/if}
+        </div>
+        <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
+            {#if $requestedCameraState}
+                <img src={cinemaImg} alt="Turn on webcam">
+            {:else}
+                <img src={cinemaCloseImg} alt="Turn off webcam">
+            {/if}
+        </div>
+        <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
+            {#if $requestedMicrophoneState}
+                <img src={microphoneImg} alt="Turn on microphone">
+            {:else}
+                <img src={microphoneCloseImg} alt="Turn off microphone">
+            {/if}
+        </div>
+    </div>
+</div>

front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte

@@ -0,0 +1,119 @@
+<script lang="typescript">
+    import { Game } from "../../Phaser/Game/Game";
+    import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
+
+    export let game: Game;
+
+    const customCharacterScene = game.scene.getScene(CustomizeSceneName);
+    let activeRow = customCharacterScene.activeRow;
+
+    function selectLeft() {
+        customCharacterScene.moveCursorHorizontally(-1);
+    }
+
+    function selectRight() {
+        customCharacterScene.moveCursorHorizontally(1);
+    }
+
+    function selectUp() {
+        customCharacterScene.moveCursorVertically(-1);
+        activeRow = customCharacterScene.activeRow;
+    }
+
+    function selectDown() {
+        customCharacterScene.moveCursorVertically(1);
+        activeRow = customCharacterScene.activeRow;
+    }
+
+    function previousScene() {
+        customCharacterScene.backToPreviousScene();
+    }
+
+    function finish() {
+        customCharacterScene.nextSceneToCamera();
+    }
+
+</script>
+
+<form class="customCharacterScene">
+    <section class="text-center">
+        <h2>Customize your WOKA</h2>
+    </section>
+    <section class="action action-move">
+        <button class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
+        <button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
+    </section>
+    <section class="action">
+        {#if activeRow === 0}
+            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
+        {/if}
+        {#if activeRow !== 0}
+            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up_black.png" alt=""/></button>
+        {/if}
+        {#if activeRow === 5}
+            <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
+        {/if}
+        {#if activeRow !== 5}
+            <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
+        {/if}
+    </section>
+</form>
+
+<style lang="scss">
+  form.customCharacterScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+
+    section {
+      margin: 10px;
+
+      &.action {
+        text-align: center;
+        margin-top: 55vh;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      button.customCharacterSceneButton {
+        position: absolute;
+        top: 33vh;
+        margin: 0;
+      }
+
+      button.customCharacterSceneFormBack {
+        color: #292929;
+      }
+    }
+
+    button {
+      font-family: "Press Start 2P";
+
+      &.customCharacterSceneButtonLeft {
+        left: 33vw;
+      }
+
+      &.customCharacterSceneButtonRight {
+        right: 33vw;
+      }
+    }
+  }
+
+  @media only screen and (max-width: 800px) {
+    form.customCharacterScene button.customCharacterSceneButtonLeft{
+      left: 5vw;
+    }
+    form.customCharacterScene button.customCharacterSceneButtonRight{
+      right: 5vw;
+    }
+  }
+
+
+</style>

front/src/Components/EnableCamera/EnableCameraScene.svelte

@@ -0,0 +1,217 @@
+<script lang="typescript">
+    import {Game} from "../../Phaser/Game/Game";
+    import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
+    import {
+        audioConstraintStore,
+        cameraListStore,
+        localStreamStore,
+        microphoneListStore,
+        videoConstraintStore
+    } from "../../Stores/MediaStore";
+    import {onDestroy} from "svelte";
+    import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
+    import cinemaCloseImg from "../images/cinema-close.svg";
+    import cinemaImg from "../images/cinema.svg";
+    import microphoneImg from "../images/microphone.svg";
+
+    export let game: Game;
+    let selectedCamera : string|null = null;
+    let selectedMicrophone : string|null = null;
+
+    const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
+
+    function submit() {
+        enableCameraScene.login();
+    }
+
+    function srcObject(node, stream) {
+        node.srcObject = stream;
+        return {
+            update(newStream) {
+                if (node.srcObject != newStream) {
+                    node.srcObject = newStream
+                }
+            }
+        }
+    }
+
+    let stream: MediaStream | null;
+
+    const unsubscribe = localStreamStore.subscribe(value => {
+        if (value.type === 'success') {
+            stream = value.stream;
+
+            if (stream !== null) {
+                const videoTracks = stream.getVideoTracks();
+                if (videoTracks.length > 0) {
+                    selectedCamera = videoTracks[0].getSettings().deviceId;
+                }
+                const audioTracks = stream.getAudioTracks();
+                if (audioTracks.length > 0) {
+                    selectedMicrophone = audioTracks[0].getSettings().deviceId;
+                }
+            }
+        } else {
+            stream = null;
+            selectedCamera = null;
+            selectedMicrophone = null;
+        }
+    });
+
+    onDestroy(unsubscribe);
+
+    function normalizeDeviceName(label: string): string {
+        // remove text in parenthesis
+        return label.replace(/\([^()]*\)/g, '').trim();
+    }
+
+    function selectCamera() {
+        videoConstraintStore.setDeviceId(selectedCamera);
+    }
+
+    function selectMicrophone() {
+        audioConstraintStore.setDeviceId(selectedMicrophone);
+    }
+
+</script>
+
+<form class="enableCameraScene" on:submit|preventDefault={submit}>
+    <section class="text-center">
+        <h2>Turn on your camera and microphone</h2>
+    </section>
+        {#if $localStreamStore.stream}
+            <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
+        {:else }
+            <div class="webrtcsetup">
+                <img class="background-img" src={cinemaCloseImg} alt="">
+            </div>
+        {/if}
+    <HorizontalSoundMeterWidget stream={stream}></HorizontalSoundMeterWidget>
+
+    <section class="selectWebcamForm">
+
+        {#if $cameraListStore.length > 1 }
+            <div class="control-group">
+                <img src={cinemaImg} alt="Camera" />
+                <div class="nes-select">
+                    <select bind:value={selectedCamera} on:change={selectCamera}>
+                        {#each $cameraListStore as camera}
+                            <option value={camera.deviceId}>
+                                {normalizeDeviceName(camera.label)}
+                            </option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
+        {/if}
+
+        {#if $microphoneListStore.length > 1 }
+            <div class="control-group">
+                <img src={microphoneImg} alt="Microphone" />
+                <div class="nes-select">
+                    <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
+                        {#each $microphoneListStore as microphone}
+                            <option value={microphone.deviceId}>
+                                {normalizeDeviceName(microphone.label)}
+                            </option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
+        {/if}
+
+    </section>
+    <section class="action">
+        <button type="submit" class="nes-btn is-primary letsgo" >Let's go!</button>
+    </section>
+</form>
+
+<style lang="scss">
+    .enableCameraScene {
+      pointer-events: auto;
+      margin: 20px auto 0;
+      color: #ebeeee;
+
+      section.selectWebcamForm {
+        margin-top: 3vh;
+        margin-bottom: 3vh;
+        min-height: 10vh;
+        width: 50%;
+        margin-left: auto;
+        margin-right: auto;
+
+        select {
+          font-family: "Press Start 2P";
+          margin-top: 1vh;
+          margin-bottom: 1vh;
+
+          option {
+            font-family: "Press Start 2P";
+          }
+        }
+      }
+
+      section.action{
+        text-align: center;
+        margin: 0;
+        width: 100%;
+      }
+
+      h2{
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      section.text-center{
+        text-align: center;
+      }
+
+      button.letsgo {
+        font-size: 200%;
+      }
+
+      .control-group {
+        display: flex;
+        flex-direction: row;
+
+        img {
+          width: 30px;
+          margin-right: 10px;
+        }
+      }
+
+      .webrtcsetup{
+        margin-top: 2vh;
+        margin-left: auto;
+        margin-right: auto;
+        height: 28.125vw;
+        width: 50vw;
+        border: white 6px solid;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img.background-img {
+          width: 40%;
+        }
+      }
+      .myCamVideoSetup {
+        margin-top: 2vh;
+        margin-left: auto;
+        margin-right: auto;
+        max-height: 50vh;
+        width: 50vw;
+        border: white 6px solid;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+
+    }
+</style>
+

front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte

@@ -0,0 +1,82 @@
+<script lang="typescript">
+    import { AudioContext } from 'standardized-audio-context';
+    import {SoundMeter} from "../../Phaser/Components/SoundMeter";
+    import {onDestroy} from "svelte";
+
+    export let stream: MediaStream | null;
+    let volume = 0;
+
+    const NB_BARS = 20;
+
+    let timeout;
+    const soundMeter = new SoundMeter();
+    let display = false;
+
+    $: {
+        if (stream && stream.getAudioTracks().length > 0) {
+            display = true;
+            soundMeter.connectToSource(stream, new AudioContext());
+
+            if (timeout) {
+                clearInterval(timeout);
+            }
+
+            timeout = setInterval(() => {
+                try{
+                    volume = parseInt((soundMeter.getVolume() / 100 * NB_BARS).toFixed(0));
+                    //console.log(volume);
+                }catch(err){
+
+                }
+            }, 100);
+
+        } else {
+            display = false;
+        }
+    }
+
+    onDestroy(() => {
+        soundMeter.stop();
+        if (timeout) {
+            clearInterval(timeout);
+        }
+    })
+
+
+    function color(i: number, volume: number) {
+        const red = 255 * i / NB_BARS;
+        const green = 255 * (1 - i / NB_BARS);
+
+        let alpha = 1;
+        if (i >= volume) {
+            alpha = 0.5;
+        }
+
+        return 'background-color:rgba('+red+', '+green+', 0, '+alpha+')';
+    }
+</script>
+
+
+<div class="horizontal-sound-meter" class:active={display}>
+    {#each [...Array(NB_BARS).keys()] as i}
+        <div style={color(i, volume)}></div>
+    {/each}
+</div>
+
+<style lang="scss">
+    .horizontal-sound-meter {
+      display: flex;
+      flex-direction: row;
+      width: 50%;
+      height: 30px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 1vh;
+    }
+
+    .horizontal-sound-meter div {
+      margin-left: 5px;
+      flex-grow: 1;
+    }
+
+</style>

front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte

@@ -0,0 +1,73 @@
+<script lang="typescript">
+    import { fly } from 'svelte/transition';
+    import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
+    import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
+    import chromeImg from "./images/help-setting-camera-permission-chrome.png";
+
+    let isAndroid = window.navigator.userAgent.includes('Android');
+    let isFirefox = window.navigator.userAgent.includes('Firefox');
+    let isChrome = window.navigator.userAgent.includes('Chrome');
+
+    function refresh() {
+        window.location.reload();
+    }
+
+    function close() {
+        helpCameraSettingsVisibleStore.set(false);
+    }
+
+</script>
+
+<form class="helpCameraSettings nes-container" on:submit|preventDefault={close} transition:fly="{{ y: -900, duration: 500 }}">
+    <section>
+        <h2>Camera / Microphone access needed</h2>
+        <p class="err">Permission denied</p>
+        <p>You must allow camera and microphone access in your browser.</p>
+        <p>
+            {#if isFirefox }
+                <p class="err">Please click the "Remember this decision" checkbox, if you don't want Firefox to keep asking you the authorization.</p>
+                <img src={firefoxImg} alt="" />
+            {:else if isChrome && !isAndroid }
+                <img src={chromeImg} alt="" />
+            {/if}
+        </p>
+    </section>
+    <section>
+        <button class="helpCameraSettingsFormRefresh nes-btn" on:click|preventDefault={refresh}>Refresh</button>
+        <button type="submit" class="helpCameraSettingsFormContinue nes-btn is-primary" on:click|preventDefault={close}>Continue without webcam</button>
+    </section>
+</form>
+
+
+<style lang="scss">
+    .helpCameraSettings {
+        pointer-events: auto;
+        background: #eceeee;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 10vh;
+        max-height: 80vh;
+        max-width: 80vw;
+        overflow: auto;
+        text-align: center;
+
+        h2 {
+            font-family: 'Press Start 2P';
+        }
+
+        section {
+            p {
+                margin: 15px;
+                font-family: 'Press Start 2P';
+
+                & .err {
+                    color: #ff0000;
+                }
+            }
+            img {
+                max-width: 500px;
+                width: 100%;
+            }
+        }
+    }
+</style>

front/src/Components/Login/LoginScene.svelte

@@ -0,0 +1,123 @@
+<script lang="typescript">
+    import {Game} from "../../Phaser/Game/Game";
+    import {LoginSceneName} from "../../Phaser/Login/LoginScene";
+    import {DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH} from "../../Enum/EnvironmentVariable";
+    import logoImg from "../images/logo.png";
+    import {gameManager} from "../../Phaser/Game/GameManager";
+    import {maxUserNameLength} from "../../Connexion/LocalUser";
+
+    export let game: Game;
+
+    const loginScene = game.scene.getScene(LoginSceneName);
+
+    let name = gameManager.getPlayerName() || '';
+    let startValidating = false;
+
+    function submit() {
+        startValidating = true;
+
+        let finalName = name.trim();
+        if (finalName !== '') {
+            loginScene.login(finalName);
+        }
+    }
+</script>
+
+<form class="loginScene" on:submit|preventDefault={submit}>
+    <section class="text-center">
+        <img src={logoImg} alt="WorkAdventure logo" />
+    </section>
+    <section class="text-center">
+        <h2>Enter your name</h2>
+    </section>
+    <input type="text" name="loginSceneName" class="nes-input is-dark" autofocus maxlength={MAX_USERNAME_LENGTH} bind:value={name} on:keypress={() => {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
+    <section class="error-section">
+    {#if name.trim() === '' && startValidating }
+        <p class="err">The name is empty</p>
+    {/if}
+    </section>
+
+    {#if DISPLAY_TERMS_OF_USE}
+    <section class="terms-and-conditions">
+        <p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
+    </section>
+    {/if}
+    <section class="action">
+        <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">Continue</button>
+    </section>
+</form>
+
+<style lang="scss">
+  .loginScene {
+    pointer-events: auto;
+    margin: 20px auto 0;
+    width: 90%;
+    color: #ebeeee;
+
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+
+    input {
+      text-align: center;
+      font-family: "Press Start 2P";
+      max-width: 400px;
+    }
+
+    .terms-and-conditions {
+      max-width: 400px;
+    }
+
+    p.err {
+      color: #ce372b;
+      text-align: center;
+    }
+
+    section {
+      margin: 10px;
+
+      &.error-section {
+        min-height: 2rem;
+        margin: 0;
+
+        p {
+          margin: 0;
+        }
+      }
+
+      &.action {
+        text-align: center;
+        margin-top: 20px;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      a {
+        text-decoration: underline;
+        color: #ebeeee;
+      }
+
+      a:hover {
+        font-weight: 700;
+      }
+
+      p {
+        text-align: left;
+        margin: 10px 10px;
+      }
+
+      img {
+        width: 100%;
+        margin: 20px 0;
+      }
+    }
+  }
+
+</style>

front/src/Components/MyCamera.svelte

@@ -0,0 +1,46 @@
+<script lang="typescript">
+    import {localStreamStore} from "../Stores/MediaStore";
+    import SoundMeterWidget from "./SoundMeterWidget.svelte";
+    import {onDestroy} from "svelte";
+
+    function srcObject(node, stream) {
+        node.srcObject = stream;
+        return {
+            update(newStream) {
+                if (node.srcObject != newStream) {
+                    node.srcObject = newStream
+                }
+            }
+        }
+    }
+
+    let stream : MediaStream|null;
+    /*$: {
+        if ($localStreamStore.type === 'success') {
+            stream = $localStreamStore.stream;
+        } else {
+            stream = null;
+        }
+    }*/
+
+    const unsubscribe = localStreamStore.subscribe(value => {
+        if (value.type === 'success') {
+            stream = value.stream;
+        } else {
+            stream = null;
+        }
+    });
+
+    onDestroy(unsubscribe);
+
+</script>
+
+
+<div>
+    <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
+        <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
+        <!-- {#if stream}
+        <SoundMeterWidget stream={stream}></SoundMeterWidget>
+        {/if} -->
+    </div>
+</div>

front/src/Components/SelectCompanion/SelectCompanionScene.svelte

@@ -0,0 +1,87 @@
+<script lang="typescript">
+    import {Game} from "../../Phaser/Game/Game";
+    import {SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
+
+    export let game: Game;
+
+    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName);
+
+    function selectLeft() {
+        selectCompanionScene.moveToLeft();
+    }
+
+    function selectRight() {
+        selectCompanionScene.moveToRight();
+    }
+
+    function noCompanion() {
+        selectCompanionScene.closeScene();
+    }
+
+    function selectCompanion() {
+        selectCompanionScene.selectCompanion();
+    }
+</script>
+
+<form class="selectCompanionScene">
+    <section class="text-center">
+        <h2>Select your companion</h2>
+        <button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={selectLeft}> &lt; </button>
+        <button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={selectRight}> &gt; </button>
+    </section>
+    <section class="action">
+        <button href="/" class="selectCompanionSceneFormBack nes-btn" on:click|preventDefault={noCompanion}>No companion</button>
+        <button type="submit" class="selectCompanionSceneFormSubmit nes-btn is-primary" on:click|preventDefault={selectCompanion}>Continue</button>
+    </section>
+</form>
+
+<style lang="scss">
+  form.selectCompanionScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+
+    section {
+      margin: 10px;
+
+      &.action {
+        text-align: center;
+        margin-top: 55vh;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      button.selectCharacterButton {
+        position: absolute;
+        top: 33vh;
+        margin: 0;
+      }
+    }
+
+    button.selectCharacterButtonLeft {
+      left: 33vw;
+    }
+
+    button.selectCharacterButtonRight {
+      right: 33vw;
+    }
+  }
+
+  @media only screen and (max-width: 800px) {
+    form.selectCompanionScene button.selectCharacterButtonLeft{
+      left: 5vw;
+    }
+    form.selectCompanionScene button.selectCharacterButtonRight{
+      right: 5vw;
+    }
+  }
+
+
+</style>

front/src/Components/SoundMeterWidget.svelte

@@ -0,0 +1,53 @@
+<script lang="typescript">
+    import { AudioContext } from 'standardized-audio-context';
+    import {SoundMeter} from "../Phaser/Components/SoundMeter";
+    import {onDestroy} from "svelte";
+
+    export let stream: MediaStream|null;
+    let volume = 0;
+
+    const NB_BARS = 5;
+
+    let timeout;
+    const soundMeter = new SoundMeter();
+    let display = false;
+
+    $: {
+        if (stream && stream.getAudioTracks().length > 0) {
+            display = true;
+            soundMeter.connectToSource(stream, new AudioContext());
+
+            if (timeout) {
+                clearInterval(timeout);
+            }
+
+            timeout = setInterval(() => {
+                try{
+                    volume = parseInt((soundMeter.getVolume() / 100 * NB_BARS).toFixed(0));
+                    //console.log(volume);
+                }catch(err){
+
+                }
+            }, 100);
+
+        } else {
+            display = false;
+        }
+    }
+
+    onDestroy(() => {
+        soundMeter.stop();
+        if (timeout) {
+            clearInterval(timeout);
+        }
+    })
+</script>
+
+
+<div class="sound-progress" class:active={display}>
+    <span class:active={volume > 1}></span>
+    <span class:active={volume > 2}></span>
+    <span class:active={volume > 3}></span>
+    <span class:active={volume > 4}></span>
+    <span class:active={volume > 5}></span>
+</div>

front/src/Components/UI/AudioPlaying.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { fly } from 'svelte/transition';
+    import megaphoneImg from "./images/megaphone.svg";
+    import {soundPlayingStore} from "../../Stores/SoundPlayingStore";
+    import {afterUpdate, onMount} from "svelte";
+
+    export let url: string;
+    let audio: HTMLAudioElement;
+
+    function soundEnded() {
+        soundPlayingStore.soundEnded();
+    }
+
+    afterUpdate(() => {
+        audio.play();
+    });
+</script>
+
+<div class="audio-playing" transition:fly="{{ x: 210, duration: 500 }}">
+    <img src={megaphoneImg} alt="Audio playing" />
+    <p>Audio message</p>
+    <audio bind:this={audio} src={url} on:ended={soundEnded} >
+        <track kind="captions">
+    </audio>
+</div>
+
+<style lang="scss">
+  /*audio html when audio message playing*/
+ .audio-playing {
+    position: absolute;
+    width: 200px;
+    height: 54px;
+    right: 0;
+    top: 40px;
+    transition: all 0.1s ease-out;
+    background-color: black;
+    border-radius: 30px 0 0 30px;
+    display: inline-flex;
+
+    img {
+      border-radius: 50%;
+      background-color: #ffda01;
+      padding: 10px;
+    }
+
+    p {
+      color: white;
+      margin-left: 10px;
+      margin-top: 14px;
+    }
+  }
+</style>

front/src/Components/UI/images/megaphone.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="0 0 451.7 512" style="enable-background:new 0 0 451.7 512;" xml:space="preserve">
+<path d="M436.9,212.6L237.2,12.9c-11.7-11.7-30.7-11.7-42.4,0s-11.7,30.7,0,42.4L394.5,255c11.5,11.9,30.5,12.2,42.4,0.7
+	c11.9-11.5,12.2-30.5,0.7-42.4C437.4,213.1,437.2,212.8,436.9,212.6z"/>
+<path d="M179.5,83.1l-1.5,7.5c-10.4,53-36,103.4-70.6,144.3l109,108.3c40.7-34.9,90.2-61.5,143.1-72.3l7.5-1.5L179.5,83.1z"/>
+<path d="M87.4,257l-74.2,74.2c-17.6,17.6-17.6,46.1,0,63.6c0,0,0,0,0,0l42.4,42.4c17.6,17.6,46.1,17.6,63.6,0c0,0,0,0,0,0l74.2-74.2
+	L87.4,257z M98,373.7c-6.1,5.6-15.6,5.3-21.2-0.8c-5.4-5.8-5.4-14.7,0-20.5l21.2-21.2c6-5.8,15.5-5.6,21.2,0.4
+	c5.6,5.8,5.6,15,0,20.8L98,373.7z"/>
+<path d="M256.1,445.3l20.4-20.4c17.6-17.6,17.6-46.1,0-63.6l-15.1-15.2c-8.4,5.7-16.4,11.7-24.2,18.3l18.1,18.1
+	c5.8,5.9,5.8,15.3,0,21.2l-20.7,20.8l-30.5-29.5l-42.4,42.4l68.1,65.9c11.7,11.7,30.7,11.7,42.4,0c11.7-11.7,11.7-30.7,0-42.4l0,0
+	L256.1,445.3z"/>
+<path d="M316.7,0c-8.3,0-15,6.7-15,15v30c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15V15C331.7,6.7,325,0,316.7,0z"/>
+<path d="M436.7,120h-30c-8.3,0-15,6.7-15,15s6.7,15,15,15h30c8.3,0,15-6.7,15-15S445,120,436.7,120z"/>
+<path d="M417.3,34.4c-5.9-5.9-15.4-5.9-21.2,0l-30,30c-6,5.8-6.1,15.3-0.4,21.2c5.8,6,15.3,6.1,21.2,0.4c0.1-0.1,0.2-0.2,0.4-0.4
+	l30-30C423.2,49.7,423.2,40.2,417.3,34.4z"/>
+</svg>

front/src/Components/VisitCard/VisitCard.svelte

@@ -0,0 +1,64 @@
+<script lang="typescript">
+    import { fly } from 'svelte/transition';
+    import {requestVisitCardsStore} from "../../Stores/GameStore";
+    
+    export let visitCardUrl: string;
+    
+    function closeCard() {
+        requestVisitCardsStore.set(null);
+    }
+</script>
+
+<style lang="scss">
+  .visitCard {
+    pointer-events: all;
+    margin-left: auto;
+    margin-right: auto;
+    width: 515px;
+    margin-top: 200px;
+    
+    .defaultCard {
+      border-radius: 5px;
+      border: 2px black solid;
+      background-color: whitesmoke;
+      width: 500px;
+      
+      header {
+        padding: 5px;
+      }
+    }
+
+    iframe {
+      border: 0;
+      width: 515px;
+      height: 270px;
+      overflow: hidden;
+    }
+
+    button {
+      float: right;
+    }
+  }
+</style>
+
+
+<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}">
+    {#if visitCardUrl === 'INVALID'}
+        <div class="defaultCard">
+            <header>
+                <h2>Sorry</h2>
+                <p style="font-style: italic;">This user doesn't have a contact card.</p>
+            </header>
+
+            <main style="padding: 5px; background-color: gray">
+                <p>Maybe he is offline, or this feature is deactivated.</p>
+            </main>
+        </div>
+    {:else}
+        <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
+    {/if}
+    <div class="buttonContainer">
+        <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
+    </div>
+        
+</section>

front/src/Components/images/cinema-close.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="0 0 332.8 332.8" style="enable-background:new 0 0 332.8 332.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M330.8,171c-3.6-6.4-12-8.8-18.8-4.8l-45.6,26.4l-11.6,6.8v63.2l10.8,6.4c0.4,0,0.4,0.4,0.8,0.4l44.8,26
+				c2,1.6,4.8,2.4,7.6,2.4c7.6,0,13.6-6,13.6-13.6v-53.6l0.4-52.8C332.8,175.4,332.4,173,330.8,171z"/>
+			<path class="st0" d="M193.2,150.6c35.6,0,64.4-28.8,64.4-64.4s-28.8-64.4-64.4-64.4s-64.4,28.8-64.4,64.4
+				C128.8,121.8,157.6,150.6,193.2,150.6z M193.2,59.8c14.8,0,26.4,12,26.4,26.4c0,14.8-12,26.4-26.4,26.4s-26.4-12-26.4-26.4
+				C166.8,71.4,178.4,59.8,193.2,59.8z"/>
+		</g>
+	</g>
+</g>
+<g>
+	<g>
+	</g>
+</g>
+<rect x="134.8" y="-45.3" transform="matrix(-0.7402 0.6723 -0.6723 -0.7402 376.0669 224.8258)" class="st0" width="19.6" height="460.7"/>
+<path class="st0" d="M90.6,83.3c-0.2-2.2-1.3-8.9-6.7-14.9c-5.4-5.9-11.9-7.6-14.1-8.1C59.7,49.2,49.5,38,39.4,26.8
+	c24.3-9.8,52-4.4,70.2,13.6c19.9,19.7,24.7,50.8,11.5,76.4C110.9,105.6,100.8,94.5,90.6,83.3z"/>
+<path class="st0" d="M10.1,51.6c9.4,10.2,18.8,20.4,28.2,30.6c-0.2,1.8-1.4,11.7,5.5,20.5c8.2,10.3,20.7,10.2,22.1,10.1
+	c9.2,10.3,18.5,20.6,27.7,30.8c-4.8,2.3-24.6,11.2-48.3,4.1c-6-1.8-20.7-7.3-32.1-22C-0.3,108.1-0.2,89.1,0.1,83.4
+	C0.8,68,6.8,56.8,10.1,51.6z"/>
+<g>
+	<path class="st0" d="M243.4,178.2c0.1,24.5,0.2,49,0.2,73.5c-30.7-33.8-61.3-67.7-92-101.5c5.9,3.9,20.9,12.4,41.6,12.4
+		c16,0,28.2-5.2,34.4-8.4c2.5,1.5,7,4.6,10.7,10.3C242,170,243,175.4,243.4,178.2z"/>
+	<g>
+		<path class="st0" d="M211.2,311C150.8,258.7,90.4,206.5,30,154.2c6.1,3.1,18.2,8.4,34.4,8.4c18.1,0,31.5-6.5,37.5-9.9
+			c44.5,49,89.1,98.1,133.6,147.1c-1.8,2.1-5.3,5.5-10.6,8.1C219.2,310.6,214,311,211.2,311z"/>
+		<path class="st0" d="M46.8,311C36,267.7,25.2,224.3,14.4,181c0.1-3.2,0.7-11.3,6.5-18.8c3.1-4.1,6.7-6.6,9.1-8
+			C90.4,206.5,150.8,258.7,211.2,311C156.4,311,101.6,311,46.8,311z"/>
+		<path class="st0" d="M14.4,278.6L14.4,278.6c0-32.5,0-65.1,0-97.6c10.8,43.3,21.6,86.7,32.4,130c-2.6,0-12.7-0.4-21.5-8.1
+			C14.7,293.5,14.4,280.7,14.4,278.6z"/>
+	</g>
+</g>
+</svg>

front/src/Components/images/microphone-close.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<rect x="257" y="-47.9" transform="matrix(-0.7402 0.6723 -0.6723 -0.7402 643.9641 283.6469)" class="st0" width="20.4" height="628.3"/>
+<g>
+	<g>
+		<path class="st0" d="M333.6,250.3c-52.6-43.9-105.1-87.9-157.7-131.8c0-17.9,0-35.8,0-53.6c6.5-38.6,40.3-67,79.3-66.8
+			c38.6,0.2,71.9,28.5,78.4,66.8C333.6,126.7,333.6,188.5,333.6,250.3z"/>
+		<path class="st0" d="M322.6,279.9c-48.9-53.8-97.8-107.6-146.6-161.4l0,0c52.6,43.9,105.1,87.9,157.7,131.8
+			c-0.2,1.6-0.5,3.3-0.9,5C330.5,265.2,326.6,273.5,322.6,279.9z"/>
+	</g>
+	<path class="st0" d="M292.5,308.1c-2.3,1.2-39.5,20.3-76.7-1c-36.4-20.8-39.4-61.2-39.6-64.1c-0.1-21-0.1-42.1-0.2-63.1
+		C214.8,222.6,253.6,265.3,292.5,308.1z"/>
+</g>
+<path class="st0" d="M431.6,238.5c-0.9-8.4-8.5-14.4-16.6-13.5c-7.9,0.9-13.9,8.1-13.2,16.3c-0.1,13.3-2.2,34.6-12.6,57.9
+	c-6.3,14.2-14,25.2-20.6,33.1c6.8,7.5,13.6,14.9,20.3,22.4c9.5-10.9,23.4-29.7,32.8-56.3C430.3,273.9,431.8,252.5,431.6,238.5z"/>
+<line class="st0" x1="354.5" y1="347.2" x2="374.6" y2="369.4"/>
+<path class="st0" d="M338.5,359.9c6.8,7.4,13.5,14.9,20.3,22.3c-52.6,37.6-121.5,43.7-179.2,15.8c-60.3-29.1-98.9-90.7-99.3-158.2
+	c0-8.2,6.8-15,15-15s15,6.8,15,15c0.1,13.5,2.4,54.4,32.4,91.6c4.2,5.2,45.1,54.1,113.3,54.1C297,385.6,326.7,367.9,338.5,359.9z"/>
+<rect x="241" y="409.6" class="st0" width="29.9" height="102.3"/>
+<path class="st0" d="M304.2,511.9h-97.1c-8-0.4-14.3-7.1-14.3-15c0-8.1,6.7-14.9,15-15c31.7,0,63.4,0.1,95.1,0.1
+	c8.9-0.6,16.3,6.5,16.3,14.9C319.2,504.8,312.6,511.7,304.2,511.9z"/>
+</svg>

front/src/Components/selectCharacter/SelectCharacterScene.svelte

@@ -0,0 +1,92 @@
+<script lang="typescript">
+    import { Game } from "../../Phaser/Game/Game";
+    import { SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
+
+    export let game: Game;
+
+    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName);
+
+    function selectLeft() {
+        selectCharacterScene.moveToLeft();
+    }
+
+    function selectRight() {
+        selectCharacterScene.moveToRight();
+    }
+
+    function cameraScene() {
+        selectCharacterScene.nextSceneToCameraScene();
+    }
+
+    function customizeScene() {
+        selectCharacterScene.nextSceneToCustomizeScene();
+    }
+
+</script>
+
+<form class="selectCharacterScene">
+    <section class="text-center">
+        <h2>Select your WOKA</h2>
+        <button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
+        <button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
+    </section>
+    <section class="action">
+        <button type="submit" class="selectCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ cameraScene }>Continue</button>
+        <button type="submit" class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn" on:click|preventDefault={ customizeScene }>Customize your WOKA</button>
+    </section>
+</form>
+
+<style lang="scss">
+  form.selectCharacterScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+
+    section {
+      margin: 10px;
+
+      &.action {
+        text-align: center;
+        margin-top: 55vh;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      button.selectCharacterButton {
+        position: absolute;
+        top: 33vh;
+        margin: 0;
+      }
+    }
+
+    button {
+      font-family: "Press Start 2P";
+
+      &.selectCharacterButtonLeft {
+        left: 33vw;
+      }
+
+      &.selectCharacterButtonRight {
+        right: 33vw;
+      }
+    }
+  }
+
+  @media only screen and (max-width: 800px) {
+    form.selectCharacterScene button.selectCharacterButtonLeft{
+      left: 5vw;
+    }
+    form.selectCharacterScene button.selectCharacterButtonRight{
+      right: 5vw;
+    }
+  }
+
+
+</style>

front/src/Connexion/ConnectionManager.ts

@@ -4,7 +4,7 @@ import {RoomConnection} from "./RoomConnection";
 import type {OnConnectInterface, PositionInterface, ViewportInterface} from "./ConnexionModels";
 import {GameConnexionTypes, urlManager} from "../Url/UrlManager";
 import {localUserStore} from "./LocalUserStore";
-import {LocalUser} from "./LocalUser";
+import {CharacterTexture, LocalUser} from "./LocalUser";
 import {Room} from "./Room";
 
 
@@ -46,8 +46,8 @@ class ConnectionManager {
             urlManager.pushRoomIdToUrl(room);
             return Promise.resolve(room);
         } else if (connexionType === GameConnexionTypes.organization || connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
-            const localUser = localUserStore.getLocalUser();
 
+            let localUser = localUserStore.getLocalUser();
             if (localUser && localUser.jwtToken && localUser.uuid && localUser.textures) {
                 this.localUser = localUser;
                 try {
@@ -60,13 +60,39 @@ class ConnectionManager {
             }else{
                 await this.anonymousLogin();
             }
-            let roomId: string
+
+            localUser = localUserStore.getLocalUser();
+            if(!localUser){
+                throw "Error to store local user data";
+            }
+
+            let roomId: string;
             if (connexionType === GameConnexionTypes.empty) {
                 roomId = START_ROOM_URL;
             } else {
                 roomId = window.location.pathname + window.location.search + window.location.hash;
             }
-            return Promise.resolve(new Room(roomId));
+
+            //get detail map for anonymous login and set texture in local storage
+            const room = new Room(roomId);
+            const mapDetail = await room.getMapDetail();
+            if(mapDetail.textures != undefined && mapDetail.textures.length > 0) {
+                //check if texture was changed
+                if(localUser.textures.length === 0){
+                    localUser.textures = mapDetail.textures;
+                }else{
+                    mapDetail.textures.forEach((newTexture) => {
+                        const alreadyExistTexture = localUser?.textures.find((c) => newTexture.id === c.id);
+                        if(localUser?.textures.findIndex((c) => newTexture.id === c.id) !== -1){
+                            return;
+                        }
+                        localUser?.textures.push(newTexture)
+                    });
+                }
+                this.localUser = localUser;
+                localUserStore.saveUser(localUser);
+            }
+            return Promise.resolve(room);
         }
 
         return Promise.reject(new Error('Invalid URL'));

front/src/Connexion/EmoteEventStream.ts

@@ -0,0 +1,19 @@
+import {Subject} from "rxjs";
+
+interface EmoteEvent {
+    userId: number,
+    emoteName: string,
+}
+
+class EmoteEventStream {
+
+    private _stream:Subject<EmoteEvent> = new Subject();
+    public stream = this._stream.asObservable();
+
+
+    fire(userId: number, emoteName:string) {
+        this._stream.next({userId, emoteName});
+    }
+}
+
+export const emoteEventStream = new EmoteEventStream();

front/src/Connexion/LocalUser.ts

@@ -9,9 +9,8 @@ export interface CharacterTexture {
 
 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
 
-export function isUserNameValid(value: string): boolean {
+export function isUserNameValid(value: unknown): boolean {
-    const regexp = new RegExp('^[A-Za-z0-9]{1,'+maxUserNameLength+'}$');
+    return typeof value === "string" && value.length > 0 && value.length <= maxUserNameLength && value.indexOf(' ') === -1;
-    return regexp.test(value);
 }
 
 export function areCharacterLayersValid(value: string[] | null): boolean {
@@ -25,6 +24,6 @@ export function areCharacterLayersValid(value: string[] | null): boolean {
 }
 
 export class LocalUser {
-    constructor(public readonly uuid:string, public readonly jwtToken: string, public readonly textures: CharacterTexture[]) {
+    constructor(public readonly uuid:string, public readonly jwtToken: string, public textures: CharacterTexture[]) {
     }
 }

front/src/Connexion/Room.ts

@@ -1,10 +1,17 @@
 import Axios from "axios";
 import {PUSHER_URL} from "../Enum/EnvironmentVariable";
+import type {CharacterTexture} from "./LocalUser";
+
+export class MapDetail{
+    constructor(public readonly mapUrl: string, public readonly textures : CharacterTexture[]|undefined) {
+    }
+}
 
 export class Room {
     public readonly id: string;
     public readonly isPublic: boolean;
     private mapUrl: string|undefined;
+    private textures: CharacterTexture[]|undefined;
     private instance: string|undefined;
     private _search: URLSearchParams;
 
@@ -50,10 +57,10 @@ export class Room {
         return {roomId, hash}
     }
 
-    public async getMapUrl(): Promise<string> {
+    public async getMapDetail(): Promise<MapDetail> {
-        return new Promise<string>((resolve, reject) => {
+        return new Promise<MapDetail>((resolve, reject) => {
-            if (this.mapUrl !== undefined) {
+            if (this.mapUrl !== undefined && this.textures != undefined) {
-                resolve(this.mapUrl);
+                resolve(new MapDetail(this.mapUrl, this.textures));
                 return;
             }
 
@@ -61,7 +68,7 @@ export class Room {
                 const match = /_\/[^/]+\/(.+)/.exec(this.id);
                 if (!match) throw new Error('Could not extract url from "'+this.id+'"');
                 this.mapUrl = window.location.protocol+'//'+match[1];
-                resolve(this.mapUrl);
+                resolve(new MapDetail(this.mapUrl, this.textures));
                 return;
             } else {
                 // We have a private ID, we need to query the map URL from the server.
@@ -71,7 +78,7 @@ export class Room {
                     params: urlParts
                 }).then(({data}) => {
                     console.log('Map ', this.id, ' resolves to URL ', data.mapUrl);
-                    resolve(data.mapUrl);
+                    resolve(data);
                     return;
                 }).catch((reason) => {
                     reject(reason);

front/src/Connexion/RoomConnection.ts

@@ -27,8 +27,10 @@ import {
     SendJitsiJwtMessage,
     CharacterLayerMessage,
     PingMessage,
+    EmoteEventMessage,
+    EmotePromptMessage,
     SendUserMessage,
-    BanUserMessage
+    BanUserMessage, RequestVisitCardMessage
 } from "../Messages/generated/messages_pb"
 
 import type {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@@ -47,6 +49,8 @@ import {adminMessagesService} from "./AdminMessagesService";
 import {worldFullMessageStream} from "./WorldFullMessageStream";
 import {worldFullWarningStream} from "./WorldFullWarningStream";
 import {connectionManager} from "./ConnectionManager";
+import {emoteEventStream} from "./EmoteEventStream";
+import {requestVisitCardsStore} from "../Stores/GameStore";
 
 const manualPingDelay = 20000;
 
@@ -124,7 +128,7 @@ export class RoomConnection implements RoomConnection {
 
             if (message.hasBatchmessage()) {
                 for (const subMessage of (message.getBatchmessage() as BatchMessage).getPayloadList()) {
-                    let event: string;
+                    let event: string|null = null;
                     let payload;
                     if (subMessage.hasUsermovedmessage()) {
                         event = EventMessage.USER_MOVED;
@@ -144,12 +148,17 @@ export class RoomConnection implements RoomConnection {
                     } else if (subMessage.hasItemeventmessage()) {
                         event = EventMessage.ITEM_EVENT;
                         payload = subMessage.getItemeventmessage();
+                    } else if (subMessage.hasEmoteeventmessage()) {
+                        const emoteMessage = subMessage.getEmoteeventmessage() as EmoteEventMessage;
+                        emoteEventStream.fire(emoteMessage.getActoruserid(), emoteMessage.getEmote());
                     } else {
                         throw new Error('Unexpected batch message type');
                     }
 
+                    if (event) {
                         this.dispatch(event, payload);
                     }
+                }
             } else if (message.hasRoomjoinedmessage()) {
                 const roomJoinedMessage = message.getRoomjoinedmessage() as RoomJoinedMessage;
 
@@ -195,6 +204,8 @@ export class RoomConnection implements RoomConnection {
                 adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
             } else if (message.hasWorldfullwarningmessage()) {
                 worldFullWarningStream.onMessage();
+            } else if (message.hasVisitcardmessage()) {
+                requestVisitCardsStore.set(message?.getVisitcardmessage()?.getUrl() as unknown as string);
             } else if (message.hasRefreshroommessage()) {
                 //todo: implement a way to notify the user the room was refreshed.
             } else {
@@ -599,4 +610,24 @@ export class RoomConnection implements RoomConnection {
     public isAdmin(): boolean {
         return this.hasTag('admin');
     }
+
+    public emitEmoteEvent(emoteName: string): void {
+        const emoteMessage = new EmotePromptMessage();
+        emoteMessage.setEmote(emoteName)
+
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setEmotepromptmessage(emoteMessage);
+
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
+    
+    public requestVisitCardUrl(targetUserId: number): void {
+        const message = new RequestVisitCardMessage();
+        message.setTargetuserid(targetUserId);
+
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setRequestvisitcardmessage(message);
+
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
 }

front/src/Enum/EnvironmentVariable.ts

@@ -14,6 +14,7 @@ const POSITION_DELAY = 200; // Wait 200ms between sending position events
 const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
 export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
 export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
+export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == 'true';
 
 export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
 

front/src/Phaser/Components/ChatModeIcon.ts

@@ -1,3 +1,5 @@
+import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
+
 export class ChatModeIcon extends Phaser.GameObjects.Sprite {
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y, 'layout_modes', 3);
@@ -6,6 +8,6 @@ export class ChatModeIcon extends Phaser.GameObjects.Sprite {
         this.setOrigin(0, 1);
         this.setInteractive();
         this.setVisible(false);
-        this.setDepth(99999);
+        this.setDepth(DEPTH_INGAME_TEXT_INDEX);
     }
 }

front/src/Phaser/Components/MobileJoystick.ts

@@ -1,5 +1,6 @@
 import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
 import {waScaleManager} from "../Services/WaScaleManager";
+import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
 
 //the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
 export const joystickBaseKey = 'joystickBase';
@@ -19,21 +20,21 @@ export class MobileJoystick extends VirtualJoystick {
             x: -1000,
             y: -1000,
             radius: radius * window.devicePixelRatio,
-            base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(99999),
+            base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX),
-            thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(99999),
+            thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX),
             enable: true,
             dir: "8dir",
         });
         this.visible = false;
         this.enable = false;
 
-        this.scene.input.on('pointerdown', (pointer: { x: number; y: number; wasTouch: boolean; event: TouchEvent }) => {
+        this.scene.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
             if (!pointer.wasTouch) {
                 return;
             }
 
             // Let's only display the joystick if there is one finger on the screen
-            if (pointer.event.touches.length === 1) {
+            if ((pointer.event as TouchEvent).touches.length === 1) {
                 this.x = pointer.x;
                 this.y = pointer.y;
                 this.visible = true;

front/src/Phaser/Components/OpenChatIcon.ts

@@ -1,4 +1,5 @@
 import {discussionManager} from "../../WebRtc/DiscussionManager";
+import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
 
 export const openChatIconName = 'openChatIcon';
 export class OpenChatIcon extends Phaser.GameObjects.Image {
@@ -9,7 +10,7 @@ export class OpenChatIcon extends Phaser.GameObjects.Image {
         this.setOrigin(0, 1);
         this.setInteractive();
         this.setVisible(false);
-        this.setDepth(99999);
+        this.setDepth(DEPTH_INGAME_TEXT_INDEX);
 
         this.on("pointerup", () => discussionManager.showDiscussionPart());
     }

front/src/Phaser/Components/PresentationModeIcon.ts

@@ -1,3 +1,5 @@
+import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
+
 export class PresentationModeIcon extends Phaser.GameObjects.Sprite {
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y, 'layout_modes', 0);
@@ -6,6 +8,6 @@ export class PresentationModeIcon extends Phaser.GameObjects.Sprite {
         this.setOrigin(0, 1);
         this.setInteractive();
         this.setVisible(false);
-        this.setDepth(99999);
+        this.setDepth(DEPTH_INGAME_TEXT_INDEX);
     }
 }

front/src/Phaser/Components/RadialMenu.ts

@@ -0,0 +1,74 @@
+import Sprite = Phaser.GameObjects.Sprite;
+import {DEPTH_UI_INDEX} from "../Game/DepthIndexes";
+import {waScaleManager} from "../Services/WaScaleManager";
+
+export interface RadialMenuItem {
+    image: string,
+    name: string,
+}
+
+export const RadialMenuClickEvent = 'radialClick';
+
+export class RadialMenu extends Phaser.GameObjects.Container {
+    private resizeCallback: OmitThisParameter<() => void>;
+    
+    constructor(scene: Phaser.Scene, x: number, y: number, private items: RadialMenuItem[]) {
+        super(scene, x, y);
+        this.setDepth(DEPTH_UI_INDEX)
+        this.scene.add.existing(this);
+        this.initItems();
+
+        this.resize();
+        this.resizeCallback = this.resize.bind(this);
+        this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
+    }
+    
+    private initItems() {
+        const itemsNumber = this.items.length;
+        const menuRadius = 70 + (waScaleManager.uiScalingFactor - 1) * 20;
+        this.items.forEach((item, index) => this.createRadialElement(item, index, itemsNumber, menuRadius))
+    }
+    
+    private createRadialElement(item: RadialMenuItem, index: number, itemsNumber: number, menuRadius: number) {
+        const image = new Sprite(this.scene, 0,  menuRadius, item.image);
+        this.add(image);
+        this.scene.sys.updateList.add(image);
+        const scalingFactor = waScaleManager.uiScalingFactor * 0.075;
+        image.setScale(scalingFactor)
+        image.setInteractive({
+            useHandCursor: true,
+        });
+        image.on('pointerdown', () => this.emit(RadialMenuClickEvent, item));
+        image.on('pointerover', () => {
+            this.scene.tweens.add({
+                targets: image,
+                props: {
+                    scale: 2 * scalingFactor,
+                },
+                duration: 500,
+                ease: 'Power3',
+            })
+        });
+        image.on('pointerout', () => {
+            this.scene.tweens.add({
+                targets: image,
+                props: {
+                    scale: scalingFactor,
+                },
+                duration: 500,
+                ease: 'Power3',
+            })
+        });
+        const angle = 2 * Math.PI * index / itemsNumber;
+        Phaser.Actions.RotateAroundDistance([image], {x: 0, y: 0}, angle, menuRadius);
+    }
+
+    private resize() {
+        this.setScale(waScaleManager.uiScalingFactor);
+    }
+
+    public destroy() {
+        this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
+        super.destroy();
+    }
+}

front/src/Phaser/Components/SoundMeter.ts

@@ -1,3 +1,5 @@
+import type {IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode} from 'standardized-audio-context';
+
 /**
  * Class to measure the sound volume of a media stream
  */
@@ -5,10 +7,10 @@ export class SoundMeter {
     private instant: number;
     private clip: number;
     //private script: ScriptProcessorNode;
-    private analyser: AnalyserNode|undefined;
+    private analyser: IAnalyserNode<IAudioContext>|undefined;
     private dataArray: Uint8Array|undefined;
-    private context: AudioContext|undefined;
+    private context: IAudioContext|undefined;
-    private source: MediaStreamAudioSourceNode|undefined;
+    private source: IMediaStreamAudioSourceNode<IAudioContext>|undefined;
 
     constructor() {
         this.instant = 0.0;
@@ -16,7 +18,7 @@ export class SoundMeter {
         //this.script = context.createScriptProcessor(2048, 1, 1);
     }
 
-    private init(context: AudioContext) {
+    private init(context: IAudioContext) {
         this.context = context;
         this.analyser = this.context.createAnalyser();
 
@@ -25,8 +27,12 @@ export class SoundMeter {
         this.dataArray = new Uint8Array(bufferLength);
     }
 
-    public connectToSource(stream: MediaStream, context: AudioContext): void
+    public connectToSource(stream: MediaStream, context: IAudioContext): void
     {
+        if (this.source !== undefined) {
+            this.stop();
+        }
+
         this.init(context);
 
         this.source = this.context?.createMediaStreamSource(stream);
@@ -81,56 +87,3 @@ export class SoundMeter {
 
 }
 
-
-// Meter class that generates a number correlated to audio volume.
-// The meter class itself displays nothing, but it makes the
-// instantaneous and time-decaying volumes available for inspection.
-// It also reports on the fraction of samples that were at or near
-// the top of the measurement range.
-/*function SoundMeter(context) {
-    this.context = context;
-    this.instant = 0.0;
-    this.slow = 0.0;
-    this.clip = 0.0;
-    this.script = context.createScriptProcessor(2048, 1, 1);
-    const that = this;
-    this.script.onaudioprocess = function(event) {
-        const input = event.inputBuffer.getChannelData(0);
-        let i;
-        let sum = 0.0;
-        let clipcount = 0;
-        for (i = 0; i < input.length; ++i) {
-            sum += input[i] * input[i];
-            if (Math.abs(input[i]) > 0.99) {
-                clipcount += 1;
-            }
-        }
-        that.instant = Math.sqrt(sum / input.length);
-        that.slow = 0.95 * that.slow + 0.05 * that.instant;
-        that.clip = clipcount / input.length;
-    };
-}
-
-SoundMeter.prototype.connectToSource = function(stream, callback) {
-    console.log('SoundMeter connecting');
-    try {
-        this.mic = this.context.createMediaStreamSource(stream);
-        this.mic.connect(this.script);
-        // necessary to make sample run, but should not be.
-        this.script.connect(this.context.destination);
-        if (typeof callback !== 'undefined') {
-            callback(null);
-        }
-    } catch (e) {
-        console.error(e);
-        if (typeof callback !== 'undefined') {
-            callback(e);
-        }
-    }
-};
-
-SoundMeter.prototype.stop = function() {
-    this.mic.disconnect();
-    this.script.disconnect();
-};
-*/

front/src/Phaser/Components/SoundMeterSprite.ts

@@ -1,44 +0,0 @@
-import Container = Phaser.GameObjects.Container;
-import type {Scene} from "phaser";
-import GameObject = Phaser.GameObjects.GameObject;
-import Rectangle = Phaser.GameObjects.Rectangle;
-
-
-export class SoundMeterSprite extends Container {
-    private rectangles: Rectangle[] = new Array<Rectangle>();
-    private static readonly NB_BARS = 20;
-
-    constructor(scene: Scene, x?: number, y?: number, children?: GameObject[]) {
-        super(scene, x, y, children);
-
-        for (let i = 0; i < SoundMeterSprite.NB_BARS; i++) {
-            const rectangle = new Rectangle(scene, i * 13, 0, 10, 20, (Math.round(255 - i * 255 / SoundMeterSprite.NB_BARS) << 8) + (Math.round(i * 255 / SoundMeterSprite.NB_BARS) << 16));
-            this.add(rectangle);
-            this.rectangles.push(rectangle);
-        }
-    }
-
-    /**
-     * A number between 0 and 100
-     *
-     * @param volume
-     */
-    public setVolume(volume: number): void {
-
-        const normalizedVolume = volume / 100 * SoundMeterSprite.NB_BARS;
-        for (let i = 0; i < SoundMeterSprite.NB_BARS; i++) {
-            if (normalizedVolume < i) {
-                this.rectangles[i].alpha = 0.5;
-            } else {
-                this.rectangles[i].alpha = 1;
-            }
-        }
-    }
-
-    public getWidth(): number {
-        return SoundMeterSprite.NB_BARS * 13;
-    }
-
-
-
-}

front/src/Phaser/Entity/Character.ts

@@ -1,10 +1,15 @@
 import {PlayerAnimationDirections, PlayerAnimationTypes} from "../Player/Animation";
 import {SpeechBubble} from "./SpeechBubble";
-import BitmapText = Phaser.GameObjects.BitmapText;
+import Text = Phaser.GameObjects.Text;
 import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
 import {TextureError} from "../../Exception/TextureError";
 import {Companion} from "../Companion/Companion";
+import type {GameScene} from "../Game/GameScene";
+import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
+import {waScaleManager} from "../Services/WaScaleManager";
+
+const playerNameY = - 25;
 
 interface AnimationData {
     key: string;
@@ -14,24 +19,30 @@ interface AnimationData {
     frames : number[]
 }
 
+const interactiveRadius = 35;
+
 export abstract class Character extends Container {
     private bubble: SpeechBubble|null = null;
-    private readonly playerName: BitmapText;
+    private readonly playerName: Text;
     public PlayerValue: string;
     public sprites: Map<string, Sprite>;
     private lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
     //private teleportation: Sprite;
     private invisible: boolean;
     public companion?: Companion;
+    private emote: Phaser.GameObjects.Sprite | null = null;
+    private emoteTween: Phaser.Tweens.Tween|null = null;
 
-    constructor(scene: Phaser.Scene,
+    constructor(scene: GameScene,
                 x: number,
                 y: number,
                 texturesPromise: Promise<string[]>,
                 name: string,
                 direction: PlayerAnimationDirections,
                 moving: boolean,
-                frame?: string | number
+                frame: string | number,
+                companion: string|null,
+                companionTexturePromise?: Promise<string>
     ) {
         super(scene, x, y/*, texture, frame*/);
         this.PlayerValue = name;
@@ -45,19 +56,18 @@ export abstract class Character extends Container {
             this.invisible = false
         })
         
-        /*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3);
+        this.playerName = new Text(scene, 0,  playerNameY, name, {fontFamily: '"Press Start 2P"', fontSize: '8px', strokeThickness: 2, stroke: "gray"});
-        this.teleportation.setInteractive();
+        this.playerName.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
-        this.teleportation.visible = false;
-        this.teleportation.on('pointerup', () => {
-            this.report.visible = false;
-            this.teleportation.visible = false;
-        });
-        this.add(this.teleportation);*/
-
-        this.playerName = new BitmapText(scene, 0,  - 25, 'main_font', name, 7);
-        this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);
         this.add(this.playerName);
 
+        if (this.isClickable()) {
+            this.setInteractive({
+                hitArea: new Phaser.Geom.Circle(0, 0, interactiveRadius),
+                hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
+                useHandCursor: true,
+            });
+        }
+
         scene.add.existing(this);
 
         this.scene.physics.world.enableBody(this);
@@ -69,6 +79,10 @@ export abstract class Character extends Container {
         this.setDepth(-1);
 
         this.playAnimation(direction, moving);
+        
+        if (typeof companion === 'string') {
+            this.addCompanion(companion, companionTexturePromise);
+        }
     }
 
     public addCompanion(name: string, texturePromise?: Promise<string>): void {
@@ -77,13 +91,14 @@ export abstract class Character extends Container {
         }
     }
     
+    public abstract isClickable(): boolean;
+
     public addTextures(textures: string[], frame?: string | number): void {
         for (const texture of textures) {
             if(!this.scene.textures.exists(texture)){
                 throw new TextureError('texture not found');
             }
             const sprite = new Sprite(this.scene, 0, 0, texture, frame);
-            sprite.setInteractive({useHandCursor: true});
             this.add(sprite);
             this.getPlayerAnimations(texture).forEach(d => {
                 this.scene.anims.create({
@@ -225,7 +240,84 @@ export abstract class Character extends Container {
                 this.scene.sys.updateList.remove(sprite);
             }
         }
+        this.list.forEach(objectContaining => objectContaining.destroy()) 
         super.destroy();
-        this.playerName.destroy();
+    }
+    
+    playEmote(emoteKey: string) {
+        this.cancelPreviousEmote();
+
+        const scalingFactor = waScaleManager.uiScalingFactor * 0.05;
+        const emoteY = -30 - scalingFactor * 10;
+        
+        this.playerName.setVisible(false);
+        this.emote = new Sprite(this.scene, 0,  0, emoteKey);
+        this.emote.setAlpha(0);
+        this.emote.setScale(0.1 * scalingFactor);
+        this.add(this.emote);
+        this.scene.sys.updateList.add(this.emote);
+        
+        this.createStartTransition(scalingFactor, emoteY);
+    }
+
+    private createStartTransition(scalingFactor: number, emoteY: number) {
+        this.emoteTween = this.scene.tweens.add({
+            targets: this.emote,
+            props: {
+                scale: scalingFactor,
+                alpha: 1,
+                y: emoteY,
+            },
+            ease: 'Power2',
+            duration: 500,
+            onComplete: () => {
+                this.startPulseTransition(emoteY, scalingFactor);
+            }
+        });
+    }
+
+    private startPulseTransition(emoteY: number, scalingFactor: number) {
+        this.emoteTween = this.scene.tweens.add({
+            targets: this.emote,
+            props: {
+                y: emoteY * 1.3,
+                scale: scalingFactor * 1.1
+            },
+            duration: 250,
+            yoyo: true,
+            repeat: 1,
+            completeDelay: 200,
+            onComplete: () => {
+                this.startExitTransition(emoteY);
+            }
+        });
+    }
+
+    private startExitTransition(emoteY: number) {
+        this.emoteTween = this.scene.tweens.add({
+            targets: this.emote,
+            props: {
+                alpha: 0,
+                y: 2 * emoteY,
+            },
+            ease: 'Power2',
+            duration: 500,
+            onComplete: () => {
+                this.destroyEmote();
+            }
+        });
+    }
+
+    cancelPreviousEmote() {
+        if (!this.emote) return;
+
+        this.emoteTween?.remove();
+        this.destroyEmote()
+    }
+
+    private destroyEmote() {
+        this.emote?.destroy();
+        this.emote = null;
+        this.playerName.setVisible(true);
     }
 }

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -2,6 +2,10 @@ import LoaderPlugin = Phaser.Loader.LoaderPlugin;
 import type {CharacterTexture} from "../../Connexion/LocalUser";
 import {BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES} from "./PlayerTextures";
 
+export interface FrameConfig {
+    frameWidth: number,
+    frameHeight: number,
+}
 
 export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => {
     const returnArray:BodyResourceDescriptionInterface[][] = [];
@@ -26,7 +30,10 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio
 export const loadCustomTexture = (loaderPlugin: LoaderPlugin, texture: CharacterTexture) : Promise<BodyResourceDescriptionInterface> => {
     const name = 'customCharacterTexture'+texture.id;
     const playerResourceDescriptor: BodyResourceDescriptionInterface = {name, img: texture.url, level: texture.level}
-    return createLoadingPromise(loaderPlugin, playerResourceDescriptor);
+    return createLoadingPromise(loaderPlugin, playerResourceDescriptor, {
+        frameWidth: 32,
+        frameHeight: 32
+    });
 }
 
 export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturekeys:Array<string|BodyResourceDescriptionInterface>): Promise<string[]> => {
@@ -36,7 +43,10 @@ export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, textur
             //TODO refactor
             const playerResourceDescriptor = getRessourceDescriptor(textureKey);
             if (playerResourceDescriptor && !loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
-                promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor));
+                promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor, {
+                    frameWidth: 32,
+                    frameHeight: 32
+                }));
             }
         }catch (err){
             console.error(err);
@@ -69,15 +79,12 @@ export const getRessourceDescriptor = (textureKey: string|BodyResourceDescriptio
     throw 'Could not find a data for texture '+textureName;
 }
 
-const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) => {
+export const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface, frameConfig: FrameConfig) => {
     return new Promise<BodyResourceDescriptionInterface>((res) => {
         if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
             return res(playerResourceDescriptor);
         }
-        loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {
+        loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, frameConfig);
-            frameWidth: 32,
-            frameHeight: 32
-        });
         loadPlugin.once('filecomplete-spritesheet-' + playerResourceDescriptor.name, () => res(playerResourceDescriptor));
     });
 }

front/src/Phaser/Entity/RemotePlayer.ts

@@ -3,6 +3,8 @@ import type {PointInterface} from "../../Connexion/ConnexionModels";
 import {Character} from "../Entity/Character";
 import type {PlayerAnimationDirections} from "../Player/Animation";
 
+export const playerClickedEvent = 'playerClickedEvent';
+
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
  */
@@ -21,14 +23,14 @@ export class RemotePlayer extends Character {
         companion: string|null,
         companionTexturePromise?: Promise<string>
     ) {
-        super(Scene, x, y, texturesPromise, name, direction, moving, 1);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1, companion, companionTexturePromise);
         
         //set data
         this.userId = userId;
         
-        if (typeof companion === 'string') {
+        this.on('pointerdown', () => {
-            this.addCompanion(companion, companionTexturePromise);
+            this.emit(playerClickedEvent, this.userId);
-        }
+        })
     }
 
     updatePosition(position: PointInterface): void {
@@ -42,4 +44,8 @@ export class RemotePlayer extends Character {
             this.companion.setTarget(position.x, position.y, position.direction as PlayerAnimationDirections);
         }
     }
+
+    isClickable(): boolean {
+        return true; //todo: make remote players clickable if they are logged in.
+    }
 }

front/src/Phaser/Game/DepthIndexes.ts

@@ -0,0 +1,8 @@
+//this file contains all the depth indexes which will be used in our game
+
+export const DEPTH_TILE_INDEX = 0;
+//Note: Player characters use their y coordinate as their depth to simulate a perspective.
+//See the Character class.
+export const DEPTH_OVERLAY_INDEX = 10000;
+export const DEPTH_INGAME_TEXT_INDEX = 100000;
+export const DEPTH_UI_INDEX = 1000000;

front/src/Phaser/Game/DirtyScene.ts

@@ -12,6 +12,7 @@ export abstract class DirtyScene extends ResizableScene {
     private isAlreadyTracking: boolean = false;
     protected dirty:boolean = true;
     private objectListChanged:boolean = true;
+    private physicsEnabled: boolean = false;
 
     /**
      * Track all objects added to the scene and adds a callback each time an animation is added.
@@ -37,6 +38,27 @@ export abstract class DirtyScene extends ResizableScene {
         this.events.on(Events.RENDER, () => {
             this.objectListChanged = false;
         });
+
+        this.physics.disableUpdate();
+        this.events.on(Events.POST_UPDATE, () => {
+            let objectMoving = false;
+            for (const body of this.physics.world.bodies.entries) {
+                if (body.velocity.x !== 0 || body.velocity.y !== 0) {
+                    this.objectListChanged = true;
+                    objectMoving = true;
+                    if (!this.physicsEnabled) {
+                        this.physics.enableUpdate();
+                        this.physicsEnabled = true;
+                    }
+                    break;
+                }
+            }
+            if (!objectMoving && this.physicsEnabled) {
+                this.physics.disableUpdate();
+                this.physicsEnabled = false;
+            }
+        });
+
     }
 
     private trackAnimation(): void {
@@ -47,7 +69,7 @@ export abstract class DirtyScene extends ResizableScene {
         return this.dirty || this.objectListChanged;
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.objectListChanged = true;
     }
 }

front/src/Phaser/Game/EmoteManager.ts

@@ -0,0 +1,73 @@
+import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
+import {emoteEventStream} from "../../Connexion/EmoteEventStream";
+import type {GameScene} from "./GameScene";
+import type {RadialMenuItem} from "../Components/RadialMenu";
+import LoaderPlugin = Phaser.Loader.LoaderPlugin;
+import type {Subscription} from "rxjs";
+
+
+interface RegisteredEmote extends BodyResourceDescriptionInterface {
+    name: string;
+    img: string;
+}
+
+export const emotes: {[key: string]: RegisteredEmote} = {
+    'emote-heart': {name: 'emote-heart', img: 'resources/emotes/heart-emote.png'},
+    'emote-clap': {name: 'emote-clap', img: 'resources/emotes/clap-emote.png'},
+    'emote-hand': {name: 'emote-hand', img: 'resources/emotes/hand-emote.png'},
+    'emote-thanks': {name: 'emote-thanks', img: 'resources/emotes/thanks-emote.png'},
+    'emote-thumb-up': {name: 'emote-thumb-up', img: 'resources/emotes/thumb-up-emote.png'},
+    'emote-thumb-down': {name: 'emote-thumb-down', img: 'resources/emotes/thumb-down-emote.png'},
+};
+
+export class EmoteManager {
+    private subscription: Subscription;
+    
+    constructor(private scene: GameScene) {
+        this.subscription = emoteEventStream.stream.subscribe((event) => {
+            const actor = this.scene.MapPlayersByKey.get(event.userId);
+            if (actor) {
+                this.lazyLoadEmoteTexture(event.emoteName).then(emoteKey => {
+                    actor.playEmote(emoteKey);
+                })
+            }
+        })
+    }
+    createLoadingPromise(loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) {
+        return new Promise<string>((res) => {
+            if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) {
+                return res(playerResourceDescriptor.name);
+            }
+            loadPlugin.image(playerResourceDescriptor.name, playerResourceDescriptor.img);
+            loadPlugin.once('filecomplete-image-' + playerResourceDescriptor.name, () => res(playerResourceDescriptor.name));
+        });
+    }
+    
+    lazyLoadEmoteTexture(textureKey: string): Promise<string> {
+        const emoteDescriptor = emotes[textureKey];
+        if (emoteDescriptor === undefined) {
+            throw 'Emote not found!';
+        }
+        const loadPromise = this.createLoadingPromise(this.scene.load, emoteDescriptor);
+        this.scene.load.start();
+        return loadPromise
+    }
+    
+    getMenuImages(): Promise<RadialMenuItem[]> {
+        const promises = [];
+        for (const key in emotes) {
+            const promise = this.lazyLoadEmoteTexture(key).then((textureKey) => {
+                return {
+                    image: textureKey,
+                    name: textureKey,
+                }
+            });
+            promises.push(promise);
+        }
+        return Promise.all(promises);
+    }
+    
+    destroy() {
+        this.subscription.unsubscribe();
+    }
+}

front/src/Phaser/Game/Game.ts

@@ -21,14 +21,22 @@ export class Game extends Phaser.Game {
     constructor(GameConfig: Phaser.Types.Core.GameConfig) {
         super(GameConfig);
 
-        window.addEventListener('resize', (event) => {
+        this.scale.on(Phaser.Scale.Events.RESIZE, () => {
+            for (const scene of this.scene.getScenes(true)) {
+                if (scene instanceof ResizableScene) {
+                    scene.onResize();
+                }
+            }
+        })
+
+        /*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/GameManager.ts

@@ -2,11 +2,13 @@ import {GameScene} from "./GameScene";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import type {Room} from "../../Connexion/Room";
 import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
-import {HelpCameraSettingsScene, HelpCameraSettingsSceneName} from "../Menu/HelpCameraSettingsScene";
 import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
+import {get} from "svelte/store";
+import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore";
+import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
 
 export interface HasMovedEvent {
     direction: string;
@@ -76,11 +78,11 @@ export class GameManager {
 
     public async loadMap(room: Room, scenePlugin: Phaser.Scenes.ScenePlugin): Promise<void> {
         const roomID = room.id;
-        const mapUrl = await room.getMapUrl();
+        const mapDetail = await room.getMapDetail();
 
         const gameIndex = scenePlugin.getIndex(roomID);
         if(gameIndex === -1){
-            const game : Phaser.Scene = new GameScene(room, mapUrl);
+            const game : Phaser.Scene = new GameScene(room, mapDetail.mapUrl);
             scenePlugin.add(roomID, game, false);
         }
     }
@@ -89,7 +91,11 @@ export class GameManager {
         console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
         scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
         scenePlugin.launch(MenuSceneName);
-        scenePlugin.launch(HelpCameraSettingsSceneName);//700
+
+        if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
+            helpCameraSettingsVisibleStore.set(true);
+            localUserStore.setHelpCameraSettingsShown();
+        }
     }
 
     public gameSceneIsCreated(scene: GameScene) {

front/src/Phaser/Game/GameScene.ts

@@ -9,7 +9,7 @@ import type {
     PositionInterface,
     RoomJoinedMessageInterface
 } from "../../Connexion/ConnexionModels";
-import {CurrentGamerInterface, hasMovedEventName, Player} from "../Player/Player";
+import {hasMovedEventName, Player, requestEmoteEventName} from "../Player/Player";
 import {
     DEBUG_MODE,
     JITSI_PRIVATE_MODE,
@@ -29,7 +29,7 @@ import type {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
 import {PlayersPositionInterpolator} from "./PlayersPositionInterpolator";
-import {RemotePlayer} from "../Entity/RemotePlayer";
+import {playerClickedEvent, RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
@@ -52,6 +52,7 @@ import {mediaManager} from "../../WebRtc/MediaManager";
 import type {ItemFactoryInterface} from "../Items/ItemFactoryInterface";
 import type {ActionableItem} from "../Items/ActionableItem";
 import {UserInputManager} from "../UserInput/UserInputManager";
+import {soundManager} from "./SoundManager";
 import type {UserMovedMessage} from "../../Messages/generated/messages_pb";
 import {ProtobufClientUtils} from "../../Network/ProtobufClientUtils";
 import {connectionManager} from "../../Connexion/ConnectionManager";
@@ -90,7 +91,10 @@ import {TextUtils} from "../Components/TextUtils";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
+import {DEPTH_OVERLAY_INDEX} from "./DepthIndexes";
 import {waScaleManager} from "../Services/WaScaleManager";
+import {peerStore} from "../../Stores/PeerStore";
+import {EmoteManager} from "./EmoteManager";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -131,7 +135,7 @@ const defaultStartLayerName = 'start';
 
 export class GameScene extends DirtyScene implements CenterListener {
     Terrains : Array<Phaser.Tilemaps.Tileset>;
-    CurrentPlayer!: CurrentGamerInterface;
+    CurrentPlayer!: Player;
     MapPlayers!: Phaser.Physics.Arcade.Group;
     MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>();
     Map!: Phaser.Tilemaps.Tilemap;
@@ -156,6 +160,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
     private iframeSubscriptionList! : Array<Subscription>;
+    private peerStoreUnsubscribe!: () => void;
     MapUrlFile: string;
     RoomId: string;
     instance: string;
@@ -186,9 +191,8 @@ 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;
+    private emoteManager!: EmoteManager;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
         super({
@@ -208,7 +212,6 @@ export class GameScene extends DirtyScene implements CenterListener {
         this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
             this.connectionAnswerPromiseResolve = resolve;
         });
-        this.onVisibilityChangeCallback = this.onVisibilityChange.bind(this);
     }
 
     //hook preload scene
@@ -226,6 +229,11 @@ export class GameScene extends DirtyScene implements CenterListener {
             this.load.image(joystickBaseKey, joystickBaseImg);
             this.load.image(joystickThumbKey, joystickThumbImg);
         }
+        this.load.audio('audio-webrtc-in', '/resources/objects/webrtc-in.mp3');
+        this.load.audio('audio-webrtc-out', '/resources/objects/webrtc-out.mp3');
+        //this.load.audio('audio-report-message', '/resources/objects/report-message.mp3');
+        this.sound.pauseOnBlur = false;
+
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
             // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
             if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
@@ -272,6 +280,14 @@ export class GameScene extends DirtyScene implements CenterListener {
 
         this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
+        //eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this.load as any).rexWebFont({
+            custom: {
+                families: ['Press Start 2P'],
+                urls: ['/resources/fonts/fonts.css'],
+                testString: 'abcdefg'
+            },
+        });
 
         //this function must stay at the end of preload function
         addLoader(this);
@@ -421,7 +437,7 @@ export class GameScene extends DirtyScene implements CenterListener {
                 }
             }
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
-                depth = 10000;
+                depth = DEPTH_OVERLAY_INDEX;
             }
             if (layer.type === 'objectgroup') {
                 for (const object of layer.objects) {
@@ -508,7 +524,22 @@ export class GameScene extends DirtyScene implements CenterListener {
             this.connect();
         }
 
-        document.addEventListener('visibilitychange', this.onVisibilityChangeCallback);
+        this.emoteManager = new EmoteManager(this);
+
+        let oldPeerNumber = 0;
+        this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
+            const newPeerNumber = peers.size;
+            if (newPeerNumber > oldPeerNumber) {
+                this.sound.play('audio-webrtc-in', {
+                    volume: 0.2
+                });
+            } else if (newPeerNumber < oldPeerNumber) {
+                this.sound.play('audio-webrtc-out', {
+                    volume: 0.2
+                });
+            }
+            oldPeerNumber = newPeerNumber;
+        });
     }
 
     /**
@@ -613,6 +644,7 @@ export class GameScene extends DirtyScene implements CenterListener {
 
             // When connection is performed, let's connect SimplePeer
             this.simplePeer = new SimplePeer(this.connection, !this.room.isPublic, this.playerName);
+            peerStore.connectToSimplePeer(this.simplePeer);
             this.GlobalMessageManager = new GlobalMessageManager(this.connection);
             userMessageManager.setReceiveBanListener(this.bannedUser.bind(this));
 
@@ -630,7 +662,6 @@ export class GameScene extends DirtyScene implements CenterListener {
                         self.chatModeSprite.setVisible(false);
                         self.openChatIcon.setVisible(false);
                         audioManager.restoreVolume();
-                        self.onVisibilityChange();
                     }
                 }
             })
@@ -868,9 +899,28 @@ ${escapedMessage}
             this.userInputManager.disableControls();
         }));
 
+       this.iframeSubscriptionList.push(iframeListener.playSoundStream.subscribe((playSoundEvent)=>
+       {
+           const url = new URL(playSoundEvent.url, this.MapUrlFile);
+           soundManager.playSound(this.load,this.sound,url.toString(),playSoundEvent.config);
+       }))
+
+        this.iframeSubscriptionList.push(iframeListener.stopSoundStream.subscribe((stopSoundEvent)=>
+        {
+            const url = new URL(stopSoundEvent.url, this.MapUrlFile);
+            soundManager.stopSound(this.sound,url.toString());
+        }))
+
+        this.iframeSubscriptionList.push(iframeListener.loadSoundStream.subscribe((loadSoundEvent)=>
+        {
+            const url = new URL(loadSoundEvent.url, this.MapUrlFile);
+            soundManager.loadSound(this.load,this.sound,url.toString());
+        }))
+
        this.iframeSubscriptionList.push(iframeListener.enablePlayerControlStream.subscribe(()=>{
             this.userInputManager.restoreControls();
         }));
+
         let scriptedBubbleSprite : Sprite;
        this.iframeSubscriptionList.push(iframeListener.displayBubbleStream.subscribe(()=>{
             scriptedBubbleSprite = new Sprite(this,this.CurrentPlayer.x + 25,this.CurrentPlayer.y,'circleSprite-white');
@@ -930,12 +980,14 @@ ${escapedMessage}
         this.messageSubscription?.unsubscribe();
         this.userInputManager.destroy();
         this.pinchManager?.destroy();
+        this.emoteManager.destroy();
+        this.peerStoreUnsubscribe();
+
+        mediaManager.hideGameOverlay();
 
         for(const iframeEvents of this.iframeSubscriptionList){
             iframeEvents.unsubscribe();
         }
-
-        document.removeEventListener('visibilitychange', this.onVisibilityChangeCallback);
     }
 
     private removeAllRemotePlayers(): void {
@@ -1088,8 +1140,6 @@ ${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) => {
@@ -1123,6 +1173,15 @@ ${escapedMessage}
                 this.companion,
                 this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
             );
+            this.CurrentPlayer.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
+                if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
+                    return; //we don't want the menu to open when pinching on a touch screen.
+                }
+                this.emoteManager.getMenuImages().then((emoteMenuElements) => this.CurrentPlayer.openOrCloseEmoteMenu(emoteMenuElements))
+            })
+            this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
+                this.connection?.emitEmoteEvent(emoteKey);
+            })
         }catch (err){
             if(err instanceof TextureError) {
                 gameManager.leaveGame(this, SelectCharacterSceneName, new SelectCharacterScene());
@@ -1223,20 +1282,7 @@ ${escapedMessage}
         this.dirty = false;
         mediaManager.updateScene();
         this.currentTick = time;
-        if (this.CurrentPlayer.isMoving()) {
-            this.dirty = true;
-        }
         this.CurrentPlayer.moveUser(delta);
-        if (this.CurrentPlayer.isMoving()) {
-            this.dirty = true;
-            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) {
@@ -1333,6 +1379,9 @@ ${escapedMessage}
             addPlayerData.companion,
             addPlayerData.companion !== null ? lazyLoadCompanionResource(this.load, addPlayerData.companion) : undefined
         );
+        player.on(playerClickedEvent, (userID:number) => {
+            this.connection?.requestVisitCardUrl(userID);
+        })
         this.MapPlayers.add(player);
         this.MapPlayersByKey.set(player.userId, player);
         player.updatePosition(addPlayerData.position);
@@ -1436,8 +1485,8 @@ ${escapedMessage}
         this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
-        super.onResize(ev);
+        super.onResize();
         this.reposition();
 
         // Send new viewport to server
@@ -1504,8 +1553,6 @@ ${escapedMessage}
         mediaManager.addTriggerCloseJitsiFrameButton('close-jisi',() => {
             this.stopJitsi();
         });
-
-        this.onVisibilityChange();
     }
 
     public stopJitsi(): void {
@@ -1514,7 +1561,6 @@ ${escapedMessage}
         mediaManager.showGameOverlay();
 
         mediaManager.removeTriggerCloseJitsiFrameButton('close-jisi');
-        this.onVisibilityChange();
     }
 
     //todo: put this into an 'orchestrator' scene (EntryScene?)
@@ -1554,20 +1600,4 @@ ${escapedMessage}
         waScaleManager.zoomModifier *= zoomFactor;
         this.updateCameraOffset();
     }
-
-    private onVisibilityChange(): void {
-        // If the overlay is not displayed, we are in Jitsi. We don't need the webcam.
-        if (!mediaManager.isGameOverlayVisible()) {
-            mediaManager.blurCamera();
-            return;
-        }
-
-        if (document.visibilityState === 'visible') {
-            mediaManager.focusCamera();
-        } else {
-            if (this.simplePeer.getNbConnections() === 0) {
-                mediaManager.blurCamera();
-            }
-        }
-    }
 }

front/src/Phaser/Game/SoundManager.ts

@@ -0,0 +1,39 @@
+import LoaderPlugin = Phaser.Loader.LoaderPlugin;
+import BaseSoundManager = Phaser.Sound.BaseSoundManager;
+import BaseSound = Phaser.Sound.BaseSound;
+import SoundConfig = Phaser.Types.Sound.SoundConfig;
+
+class SoundManager {
+    private soundPromises : Map<string,Promise<BaseSound>> = new Map<string, Promise<Phaser.Sound.BaseSound>>();
+    public  loadSound (loadPlugin: LoaderPlugin, soundManager : BaseSoundManager, soundUrl: string) : Promise<BaseSound> {
+        let soundPromise =  this.soundPromises.get(soundUrl);
+        if (soundPromise !== undefined) {
+            return soundPromise;
+        }
+        soundPromise =  new Promise<BaseSound>((res) => {
+
+            const sound = soundManager.get(soundUrl);
+            if (sound !== null) {
+                return res(sound);
+            }
+            loadPlugin.audio(soundUrl, soundUrl);
+            loadPlugin.once('filecomplete-audio-' + soundUrl, () => {
+                res(soundManager.add(soundUrl));
+            });
+            loadPlugin.start();
+        });
+        this.soundPromises.set(soundUrl,soundPromise);
+        return soundPromise;
+    }
+
+    public async playSound(loadPlugin: LoaderPlugin, soundManager : BaseSoundManager, soundUrl: string, config: SoundConfig|undefined) : Promise<void> {
+        const sound = await this.loadSound(loadPlugin,soundManager,soundUrl);
+        if (config === undefined) sound.play();
+        else sound.play(config);
+    }
+
+    public stopSound(soundManager : BaseSoundManager,soundUrl : string){
+        soundManager.get(soundUrl).stop();
+    }
+}
+export const soundManager = new SoundManager();

front/src/Phaser/Login/CustomizeScene.ts

@@ -11,6 +11,10 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
+import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
+import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -22,10 +26,10 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private selectedLayers: number[] = [0];
     private containersRow: Container[][] = [];
-    private activeRow:number = 0;
+    public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
-    private customizeSceneElement!: Phaser.GameObjects.DOMElement;
+    protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
     constructor() {
         super({
@@ -36,7 +40,6 @@ export class CustomizeScene extends AbstractCharacterScene {
     preload() {
         this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
 
-        this.layers = loadAllLayers(this.load);
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 if(bodyResourceDescription.level == undefined || bodyResourceDescription.level < 0 || bodyResourceDescription.level > 5 ){
@@ -44,43 +47,28 @@ export class CustomizeScene extends AbstractCharacterScene {
                 }
                 this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
             });
+            this.lazyloadingAttempt = true;
         });
 
+        this.layers = loadAllLayers(this.load);
+        this.lazyloadingAttempt = false;
+
+
         //this function must stay at the end of preload function
         addLoader(this);
     }
 
     create() {
-        this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
+        customCharacterSceneVisibleStore.set(true);
-        this.centerXDomElement(this.customizeSceneElement, 150);
+        this.events.addListener('wake', () => {
-        MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
+            waScaleManager.saveZoom();
-
+            waScaleManager.zoomModifier = isMobile() ? 3 : 1;
-        this.customizeSceneElement.addListener('click');
+            customCharacterSceneVisibleStore.set(true);
-        this.customizeSceneElement.on('click',  (event:MouseEvent) => {
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'customizeSceneButtonLeft') {
-                this.moveCursorHorizontally(-1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonRight') {
-                this.moveCursorHorizontally(1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonDown') {
-                this.moveCursorVertically(1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonUp') {
-                this.moveCursorVertically(-1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneFormBack') {
-                if(this.activeRow > 0){
-                    this.moveCursorVertically(-1);
-                }else{
-                    this.backToPreviousScene();
-                }
-            }else if((event?.target as HTMLButtonElement).id === 'customizeSceneFormSubmit') {
-                if(this.activeRow < 5){
-                    this.moveCursorVertically(1);
-                }else{
-                    this.nextSceneToCamera();
-                }
-            }
         });
 
+        waScaleManager.saveZoom();
+        waScaleManager.zoomModifier = isMobile() ? 3 : 1;
+
         this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
         this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
         this.add.existing(this.Rectangle);
@@ -116,7 +104,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    private moveCursorHorizontally(index: number): void {
+    public moveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -128,27 +116,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    private moveCursorVertically(index:number): void {
+    public moveCursorVertically(index:number): void {
-
-        if(index === -1 && this.activeRow === 5){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
-            button.innerHTML = `Next <img src="resources/objects/arrow_up.png"/>`;
-        }
-
-        if(index === 1 && this.activeRow === 4){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
-            button.innerText = 'Finish';
-        }
-
-        if(index === -1 && this.activeRow === 1){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
-            button.innerText = `Return`;
-        }
-
-        if(index === 1 && this.activeRow === 0){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
-            button.innerHTML = `Back <img src="resources/objects/arrow_up.png"/>`;
-        }
 
         this.activeRow += index;
         if (this.activeRow < 0) {
@@ -262,6 +230,10 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     update(time: number, delta: number): void {
 
+        if(this.lazyloadingAttempt){
+            this.moveLayers();
+            this.lazyloadingAttempt = false;
+        }
     }
 
      public onResize(): void {
@@ -269,8 +241,6 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
-
-        this.centerXDomElement(this.customizeSceneElement, 150);
      }
 
     private nextSceneToCamera(){
@@ -288,12 +258,16 @@ export class CustomizeScene extends AbstractCharacterScene {
 
             gameManager.setCharacterLayers(layers);
             this.scene.sleep(CustomizeSceneName);
-            this.scene.remove(SelectCharacterSceneName);
+            waScaleManager.restoreZoom();
+            this.events.removeListener('wake');
             gameManager.tryResumingGame(this, EnableCameraSceneName);
+            customCharacterSceneVisibleStore.set(false);
     }
 
     private backToPreviousScene(){
         this.scene.sleep(CustomizeSceneName);
+        waScaleManager.restoreZoom();
         this.scene.run(SelectCharacterSceneName);
+        customCharacterSceneVisibleStore.set(false);
     }
 }

front/src/Phaser/Login/EnableCameraScene.ts

@@ -3,279 +3,48 @@ import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import {mediaManager} from "../../WebRtc/MediaManager";
 import {SoundMeter} from "../Components/SoundMeter";
-import {SoundMeterSprite} from "../Components/SoundMeterSprite";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import Zone = Phaser.GameObjects.Zone;
 import { MenuScene } from "../Menu/MenuScene";
 import {ResizableScene} from "./ResizableScene";
+import {
+    enableCameraSceneVisibilityStore,
+} from "../../Stores/MediaStore";
 
 export const EnableCameraSceneName = "EnableCameraScene";
-enum LoginTextures {
-    playButton = "play_button",
-    icon = "icon",
-    mainFont = "main_font",
-    arrowRight = "arrow_right",
-    arrowUp = "arrow_up"
-}
-
-const enableCameraSceneKey = 'enableCameraScene';
 
 export class EnableCameraScene extends ResizableScene {
-    private textField!: TextField;
-    private cameraNameField!: TextField;
-    private arrowLeft!: Image;
-    private arrowRight!: Image;
-    private arrowDown!: Image;
-    private arrowUp!: Image;
-    private microphonesList: MediaDeviceInfo[] = new Array<MediaDeviceInfo>();
-    private camerasList: MediaDeviceInfo[] = new Array<MediaDeviceInfo>();
-    private cameraSelected: number = 0;
-    private microphoneSelected: number = 0;
-    private soundMeter: SoundMeter;
-    private soundMeterSprite!: SoundMeterSprite;
-    private microphoneNameField!: TextField;
-
-    private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
-
-    private mobileTapZone!: Zone;
 
     constructor() {
         super({
             key: EnableCameraSceneName
         });
-        this.soundMeter = new SoundMeter();
     }
 
     preload() {
-
-        this.load.html(enableCameraSceneKey, 'resources/html/EnableCameraScene.html');
-
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png");
-        this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png");
-        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
     create() {
 
-        this.enableCameraSceneElement = this.add.dom(-1000, 0).createFromCache(enableCameraSceneKey);
-        this.centerXDomElement(this.enableCameraSceneElement, 300);
-
-        MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey);
-
-        const continuingButton = this.enableCameraSceneElement.getChildByID('enableCameraSceneFormSubmit') as HTMLButtonElement;
-        continuingButton.addEventListener('click', (e) => {
-            e.preventDefault();
-            this.login();
-        });
-
-        if (touchScreenManager.supportTouchScreen) {
-            new PinchManager(this);
-        }
-        //this.scale.setZoom(ZOOM_LEVEL);
-        //Phaser.Display.Align.In.BottomCenter(this.pressReturnField, zone);
-
-        /* FIX ME */
-        this.textField = new TextField(this, this.scale.width / 2, 20, '');
-
-        // For mobile purposes - we need a big enough touchable area.
-        this.mobileTapZone = this.add.zone(this.scale.width / 2,this.scale.height - 30,200,50)
-          .setInteractive().on("pointerdown", () => {
-            this.login();
-          });
-
-        this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, '');
-
-        this.microphoneNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 40, '');
-
-        this.arrowRight = new Image(this, 0, 0, LoginTextures.arrowRight);
-        this.arrowRight.setVisible(false);
-        this.arrowRight.setInteractive().on('pointerdown', this.nextCam.bind(this));
-        this.add.existing(this.arrowRight);
-
-        this.arrowLeft = new Image(this, 0, 0, LoginTextures.arrowRight);
-        this.arrowLeft.setVisible(false);
-        this.arrowLeft.flipX = true;
-        this.arrowLeft.setInteractive().on('pointerdown', this.previousCam.bind(this));
-        this.add.existing(this.arrowLeft);
-
-        this.arrowUp = new Image(this, 0, 0, LoginTextures.arrowUp);
-        this.arrowUp.setVisible(false);
-        this.arrowUp.setInteractive().on('pointerdown', this.previousMic.bind(this));
-        this.add.existing(this.arrowUp);
-
-        this.arrowDown = new Image(this, 0, 0, LoginTextures.arrowUp);
-        this.arrowDown.setVisible(false);
-        this.arrowDown.flipY = true;
-        this.arrowDown.setInteractive().on('pointerdown', this.nextMic.bind(this));
-        this.add.existing(this.arrowDown);
-
         this.input.keyboard.on('keyup-ENTER', () => {
             this.login();
         });
 
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').classList.add('active');
+        enableCameraSceneVisibilityStore.showEnableCameraScene();
-
-        const mediaPromise = mediaManager.getCamera();
-        mediaPromise.then(this.getDevices.bind(this));
-        mediaPromise.then(this.setupStream.bind(this));
-
-        this.input.keyboard.on('keydown-RIGHT', this.nextCam.bind(this));
-        this.input.keyboard.on('keydown-LEFT', this.previousCam.bind(this));
-        this.input.keyboard.on('keydown-DOWN', this.nextMic.bind(this));
-        this.input.keyboard.on('keydown-UP', this.previousMic.bind(this));
-
-        this.soundMeterSprite = new SoundMeterSprite(this, 50, 50);
-        this.soundMeterSprite.setVisible(false);
-        this.add.existing(this.soundMeterSprite);
-
-        this.onResize();
-    }
-
-    private previousCam(): void {
-        if (this.cameraSelected === 0 || this.camerasList.length === 0) {
-            return;
-        }
-        this.cameraSelected--;
-        mediaManager.setCamera(this.camerasList[this.cameraSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    private nextCam(): void {
-        if (this.cameraSelected === this.camerasList.length - 1 || this.camerasList.length === 0) {
-            return;
-        }
-        this.cameraSelected++;
-        // TODO: the change of camera should be OBSERVED (reactive)
-        mediaManager.setCamera(this.camerasList[this.cameraSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    private previousMic(): void {
-        if (this.microphoneSelected === 0 || this.microphonesList.length === 0) {
-            return;
-        }
-        this.microphoneSelected--;
-        mediaManager.setMicrophone(this.microphonesList[this.microphoneSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    private nextMic(): void {
-        if (this.microphoneSelected === this.microphonesList.length - 1 || this.microphonesList.length === 0) {
-            return;
-        }
-        this.microphoneSelected++;
-        // TODO: the change of camera should be OBSERVED (reactive)
-        mediaManager.setMicrophone(this.microphonesList[this.microphoneSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    /**
-     * Function called each time a camera is changed
-     */
-    private setupStream(stream: MediaStream): void {
-        const img = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetupNoVideo');
-        img.style.display = 'none';
-
-        const div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
-        div.srcObject = stream;
-
-        this.soundMeter.connectToSource(stream, new window.AudioContext());
-        this.soundMeterSprite.setVisible(true);
-
-        this.updateWebCamName();
-    }
-
-    private updateWebCamName(): void {
-        if (this.camerasList.length > 1) {
-            let label = this.camerasList[this.cameraSelected].label;
-            // remove text in parenthesis
-            label = label.replace(/\([^()]*\)/g, '').trim();
-            // remove accents
-            label = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-            this.cameraNameField.text = label;
-
-            this.arrowRight.setVisible(this.cameraSelected < this.camerasList.length - 1);
-            this.arrowLeft.setVisible(this.cameraSelected > 0);
-        }
-        if (this.microphonesList.length > 1) {
-            let label = this.microphonesList[this.microphoneSelected].label;
-            // remove text in parenthesis
-            label = label.replace(/\([^()]*\)/g, '').trim();
-            // remove accents
-            label = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-
-            this.microphoneNameField.text = label;
-
-            this.arrowDown.setVisible(this.microphoneSelected < this.microphonesList.length - 1);
-            this.arrowUp.setVisible(this.microphoneSelected > 0);
-
-        }
     }
 
     public onResize(): void {
-        let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
-        let bounds = div.getBoundingClientRect();
-        if (!div.srcObject) {
-            div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('webRtcSetup');
-            bounds = div.getBoundingClientRect();
-        }
-
-        this.textField.x = this.game.renderer.width / 2;
-        this.mobileTapZone.x = this.game.renderer.width / 2;
-        this.cameraNameField.x = this.game.renderer.width / 2;
-        this.microphoneNameField.x = this.game.renderer.width / 2;
-
-        this.cameraNameField.y = bounds.top / this.scale.zoom - 8;
-
-        this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2;
-        this.soundMeterSprite.y = bounds.bottom / this.scale.zoom + 16;
-
-        this.microphoneNameField.y = this.soundMeterSprite.y + 22;
-
-        this.arrowRight.x = bounds.right / this.scale.zoom + 16;
-        this.arrowRight.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
-
-        this.arrowLeft.x = bounds.left / this.scale.zoom - 16;
-        this.arrowLeft.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
-
-        this.arrowDown.x = this.microphoneNameField.x + this.microphoneNameField.width / 2 + 16;
-        this.arrowDown.y = this.microphoneNameField.y;
-
-        this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
-        this.arrowUp.y = this.microphoneNameField.y;
-
-        const actionBtn = document.querySelector<HTMLDivElement>('#enableCameraScene .action');
-        if (actionBtn !== null) {
-            actionBtn.style.top = (this.scale.height - 65) + 'px';
-        }
     }
 
     update(time: number, delta: number): void {
-        this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
-
-        this.centerXDomElement(this.enableCameraSceneElement, 300);
     }
 
-    private login(): void {
+    public login(): void {
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
+        enableCameraSceneVisibilityStore.hideEnableCameraScene();
-        this.soundMeter.stop();
 
-        mediaManager.stopCamera();
+        this.scene.sleep(EnableCameraSceneName);
-        mediaManager.stopMicrophone();
-
-        this.scene.sleep(EnableCameraSceneName)
         gameManager.goToStartingMap(this.scene);
     }
-
-    private async getDevices() {
-        const mediaDeviceInfos = await navigator.mediaDevices.enumerateDevices();
-        for (const mediaDeviceInfo of mediaDeviceInfos) {
-            if (mediaDeviceInfo.kind === 'audioinput') {
-                this.microphonesList.push(mediaDeviceInfo);
-            } else if (mediaDeviceInfo.kind === 'videoinput') {
-                this.camerasList.push(mediaDeviceInfo);
-            }
-        }
-        this.updateWebCamName();
-    }
 }

front/src/Phaser/Login/LoginScene.ts

@@ -1,17 +1,12 @@
 import {gameManager} from "../Game/GameManager";
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
-import { localUserStore } from "../../Connexion/LocalUserStore";
+import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore";
-import {MenuScene} from "../Menu/MenuScene";
-import { isUserNameValid } from "../../Connexion/LocalUser";
 
 export const LoginSceneName = "LoginScene";
 
-const loginSceneKey = 'loginScene';
-
 export class LoginScene extends ResizableScene {
 
-    private loginSceneElement!: Phaser.GameObjects.DOMElement;
     private name: string = '';
 
     constructor() {
@@ -22,65 +17,25 @@ export class LoginScene extends ResizableScene {
     }
 
     preload() {
-        this.load.html(loginSceneKey, 'resources/html/loginScene.html');
     }
 
     create() {
-        this.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey);
+        loginSceneVisibleStore.set(true);
-        this.centerXDomElement(this.loginSceneElement, 200);
-        MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
-
-        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
-        const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement;
-        inputElement.value = localUserStore.getName() ?? '';
-        inputElement.focus();
-        inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
-            if(inputElement.value.length > 7){
-                event.preventDefault();
-                return;
-            }
-            pErrorElement.innerHTML = '';
-            if(inputElement.value && !isUserNameValid(inputElement.value)){
-                pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
-            }
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                this.login(inputElement);
-                return;
-            }
-        });
-
-        const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement;
-        continuingButton.addEventListener('click', (e) => {
-            e.preventDefault();
-            this.login(inputElement);
-        });
     }
 
-    private login(inputElement: HTMLInputElement): void {
+    public login(name: string): void {
-        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
+        name = name.trim();
-        this.name = inputElement.value;
+        gameManager.setPlayerName(name);
-        if (this.name === '') {
-            pErrorElement.innerHTML = 'The name is empty';
-            return
-        }
-        if(!isUserNameValid(this.name)){
-            pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
-            return
-        }
-        if (this.name === '') return
-        gameManager.setPlayerName(this.name);
 
         this.scene.stop(LoginSceneName)
         gameManager.tryResumingGame(this, SelectCharacterSceneName);
-        this.scene.remove(LoginSceneName)
+        this.scene.remove(LoginSceneName);
+        loginSceneVisibleStore.set(false);
     }
 
     update(time: number, delta: number): void {
-
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
-        this.centerXDomElement(this.loginSceneElement, 200);
     }
 }

front/src/Phaser/Login/ResizableScene.ts

@@ -2,7 +2,7 @@ import {Scene} from "phaser";
 import DOMElement = Phaser.GameObjects.DOMElement;
 
 export abstract class ResizableScene extends Scene {
-    public abstract onResize(ev: UIEvent): void;
+    public abstract onResize(): void;
 
     /**
      * Centers the DOM element on the X axis.
@@ -17,7 +17,7 @@ export abstract class ResizableScene extends Scene {
                 && object.node
                 && object.node.getBoundingClientRect().width > 0
                     ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
-                    : (300 / this.scale.zoom)
+                    : (defaultWidth / this.scale.zoom)
             );
     }
 }

front/src/Phaser/Login/SelectCharacterMobileScene.ts

@@ -4,49 +4,50 @@ export class SelectCharacterMobileScene extends SelectCharacterScene {
 
     create(){
         super.create();
+        this.onResize();
         this.selectedRectangle.destroy();
     }
 
-    protected defineSetupPlayer(numero: number){
+    protected defineSetupPlayer(num: number){
         const deltaX = 30;
         const deltaY = 2;
         let [playerX, playerY] = this.getCharacterPosition();
         let playerVisible = true;
         let playerScale = 1.5;
-        let playserOpactity = 1;
+        let playerOpacity = 1;
 
-        if( this.currentSelectUser !== numero ){
+        if( this.currentSelectUser !== num ){
             playerVisible = false;
         }
-        if( numero === (this.currentSelectUser + 1) ){
+        if( num === (this.currentSelectUser + 1) ){
             playerY -= deltaY;
             playerX += deltaX;
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser + 2) ){
+        if( num === (this.currentSelectUser + 2) ){
             playerY -= deltaY;
             playerX += (deltaX * 2);
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser - 1) ){
+        if( num === (this.currentSelectUser - 1) ){
             playerY -= deltaY;
             playerX -= deltaX;
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser - 2) ){
+        if( num === (this.currentSelectUser - 2) ){
             playerY -= deltaY;
             playerX -= (deltaX * 2);
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
     }
 
         /**

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -11,6 +11,10 @@ import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {MenuScene} from "../Menu/MenuScene";
+import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
+import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -27,6 +31,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
     protected currentSelectUser = 0;
+    protected pointerClicked: boolean = false;
+
+    protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
     constructor() {
         super({
@@ -41,44 +48,36 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 this.playerModels.push(bodyResourceDescription);
             });
-        })
+            this.lazyloadingAttempt = true;
+        });
         this.playerModels = loadAllDefaultModels(this.load);
+        this.lazyloadingAttempt = false;
 
         //this function must stay at the end of preload function
         addLoader(this);
     }
 
     create() {
-
+        selectCharacterSceneVisibleStore.set(true);
-        this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
+        this.events.addListener('wake', () => {
-        this.centerXDomElement(this.selectCharacterSceneElement, 150);
+            waScaleManager.saveZoom();
-        MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
+            waScaleManager.zoomModifier = isMobile() ? 2 : 1;
-
+            selectCharacterSceneVisibleStore.set(true);
-        this.selectCharacterSceneElement.addListener('click');
-        this.selectCharacterSceneElement.on('click',  (event:MouseEvent) => {
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
-                this.moveToLeft();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
-                this.moveToRight();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormSubmit') {
-                this.nextSceneToCameraScene();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormCustomYourOwnSubmit') {
-                this.nextSceneToCustomizeScene();
-            }
         });
 
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
 
+        waScaleManager.saveZoom();
+        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
+
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
         this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
         this.selectedRectangle.setDepth(2);
 
         /*create user*/
         this.createCurrentPlayer();
-        const playerNumber = localUserStore.getPlayerCharacterIndex();
 
         this.input.keyboard.on('keyup-ENTER', () => {
             return this.nextSceneToCameraScene();
@@ -106,9 +105,12 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             return;
         }
         this.scene.stop(SelectCharacterSceneName);
+        waScaleManager.restoreZoom();
         gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
-        this.scene.remove(SelectCharacterSceneName);
+        this.players = [];
+        selectCharacterSceneVisibleStore.set(false);
+        this.events.removeListener('wake');
     }
 
     protected nextSceneToCustomizeScene(): void {
@@ -116,7 +118,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             return;
         }
         this.scene.sleep(SelectCharacterSceneName);
+        waScaleManager.restoreZoom();
         this.scene.run(CustomizeSceneName);
+        selectCharacterSceneVisibleStore.set(false);
     }
 
     createCurrentPlayer(): void {
@@ -133,15 +137,16 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                 repeat: -1
             });
             player.setInteractive().on("pointerdown", () => {
-                if(this.currentSelectUser === i){
+                if (this.pointerClicked || this.currentSelectUser === i) {
                     return;
                 }
+                this.pointerClicked = true;
                 this.currentSelectUser = i;
                 this.moveUser();
+                setTimeout(() => {this.pointerClicked = false;}, 100);
             });
             this.players.push(player);
         }
-
         this.selectedPlayer = this.players[this.currentSelectUser];
         this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
     }
@@ -186,35 +191,35 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    protected defineSetupPlayer(numero: number){
+    protected defineSetupPlayer(num: number){
         const deltaX = 32;
         const deltaY = 32;
         let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
 
-        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
+        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users
-        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
+        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users
 
         const playerVisible = true;
         const playerScale = 1;
-        const playserOpactity = 1;
+        const playerOpacity = 1;
 
         // if selected
-        if( numero === this.currentSelectUser ){
+        if( num === this.currentSelectUser ){
             this.selectedRectangle.setX(playerX);
             this.selectedRectangle.setY(playerY);
         }
 
-        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
     }
 
-    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){
 
-        const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
+        const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
         player.setBounce(0.2);
-        player.setCollideWorldBounds(true);
+        player.setCollideWorldBounds(false);
         player.setVisible( playerVisible );
         player.setScale(playerScale, playerScale);
-        player.setAlpha(playserOpactity);
+        player.setAlpha(playerOpacity);
         player.setX(playerX);
         player.setY(playerY);
     }
@@ -238,12 +243,14 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     update(time: number, delta: number): void {
+        if(this.lazyloadingAttempt){
+            this.moveUser();
+            this.lazyloadingAttempt = false;
+        }
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         //move position of user
         this.moveUser();
-
-        this.centerXDomElement(this.selectCharacterSceneElement, 150);
     }
 }

front/src/Phaser/Login/SelectCompanionScene.ts

@@ -10,17 +10,18 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import { MenuScene } from "../Menu/MenuScene";
+import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
-const selectCompanionSceneKey = 'selectCompanionScene';
-
 export class SelectCompanionScene extends ResizableScene {
     private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
     private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     private companionModels: Array<CompanionResourceDescriptionInterface> = [];
+    private saveZoom: number = 0;
 
-    private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
     private currentCompanion = 0;
 
     constructor() {
@@ -30,8 +31,6 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     preload() {
-        this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
-
         getAllCompanionResources(this.load).forEach(model => {
             this.companionModels.push(model);
         });
@@ -42,30 +41,17 @@ export class SelectCompanionScene extends ResizableScene {
 
     create() {
 
-        this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
+        selectCompanionSceneVisibleStore.set(true);
-        this.centerXDomElement(this.selectCompanionSceneElement, 150);
-        MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
 
-        this.selectCompanionSceneElement.addListener('click');
+        waScaleManager.saveZoom();
-        this.selectCompanionSceneElement.on('click',  (event:MouseEvent) => {
+        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
-                this.moveToLeft();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
-                this.moveToRight();
-            }else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormSubmit') {
-                this.nextScene();
-            }else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormBack') {
-                this._nextScene();
-            }
-        });
 
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
 
         // input events
-        this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this));
+        this.input.keyboard.on('keyup-ENTER', this.selectCompanion.bind(this));
 
         this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
         this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
@@ -89,18 +75,20 @@ export class SelectCompanionScene extends ResizableScene {
 
     }
 
-    private nextScene(): void {
+    public selectCompanion(): void {
         localUserStore.setCompanion(this.companionModels[this.currentCompanion].name);
         gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
 
-        this._nextScene();
+        this.closeScene();
     }
 
-    private _nextScene(){
+    public closeScene(){
         // next scene
         this.scene.stop(SelectCompanionSceneName);
+        waScaleManager.restoreZoom();
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCompanionSceneName);
+        selectCompanionSceneVisibleStore.set(false);
     }
 
     private createCurrentCompanion(): void {
@@ -126,10 +114,8 @@ export class SelectCompanionScene extends ResizableScene {
         this.selectedCompanion = this.companions[this.currentCompanion];
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.moveCompanion();
-
-        this.centerXDomElement(this.selectCompanionSceneElement, 150);
     }
 
     private updateSelectedCompanion(): void {
@@ -147,15 +133,7 @@ export class SelectCompanionScene extends ResizableScene {
         this.updateSelectedCompanion();
     }
 
-    private moveToLeft(){
+    public moveToRight(){
-        if(this.currentCompanion === 0){
-            return;
-        }
-        this.currentCompanion -= 1;
-        this.moveCompanion();
-    }
-
-    private moveToRight(){
         if(this.currentCompanion === (this.companions.length - 1)){
             return;
         }
@@ -163,38 +141,46 @@ export class SelectCompanionScene extends ResizableScene {
         this.moveCompanion();
     }
 
-    private defineSetupCompanion(numero: number){
+    public moveToLeft(){
+        if(this.currentCompanion === 0){
+            return;
+        }
+        this.currentCompanion -= 1;
+        this.moveCompanion();
+    }
+
+    private defineSetupCompanion(num: number){
         const deltaX = 30;
         const deltaY = 2;
         let [companionX, companionY] = this.getCompanionPosition();
         let companionVisible = true;
         let companionScale = 1.5;
         let companionOpactity = 1;
-        if( this.currentCompanion !== numero ){
+        if( this.currentCompanion !== num ){
             companionVisible = false;
         }
-        if( numero === (this.currentCompanion + 1) ){
+        if( num === (this.currentCompanion + 1) ){
             companionY -= deltaY;
             companionX += deltaX;
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion + 2) ){
+        if( num === (this.currentCompanion + 2) ){
             companionY -= deltaY;
             companionX += (deltaX * 2);
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion - 1) ){
+        if( num === (this.currentCompanion - 1) ){
             companionY -= deltaY;
             companionX -= deltaX;
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion - 2) ){
+        if( num === (this.currentCompanion - 2) ){
             companionY -= deltaY;
             companionX -= (deltaX * 2);
             companionScale = 0.8;

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -1,150 +0,0 @@
-import {mediaManager} from "../../WebRtc/MediaManager";
-import {HtmlUtils} from "../../WebRtc/HtmlUtils";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {DirtyScene} from "../Game/DirtyScene";
-
-export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
-const helpCameraSettings = 'helpCameraSettings';
-/**
- * The scene that show how to permit Camera and Microphone access if there are not already allowed
- */
-export class HelpCameraSettingsScene extends DirtyScene {
-    private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
-    private helpCameraSettingsOpened: boolean = false;
-
-    constructor() {
-        super({key: HelpCameraSettingsSceneName});
-    }
-
-    preload() {
-        this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
-    }
-
-    create(){
-        this.createHelpCameraSettings();
-    }
-
-    private createHelpCameraSettings() : void {
-        const middleX = this.getMiddleX();
-        this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
-        this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
-        this.helpCameraSettingsElement.addListener('click');
-        this.helpCameraSettingsElement.on('click',  (event:MouseEvent) => {
-            if((event?.target as HTMLInputElement).id === 'mailto') {
-                return;
-            }
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
-                window.location.reload();
-            }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
-                this.closeHelpCameraSettingsOpened();
-            }
-        });
-
-        if(!localUserStore.getHelpCameraSettingsShown() && (!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video)){
-            this.openHelpCameraSettingsOpened();
-            localUserStore.setHelpCameraSettingsShown();
-        }
-
-        mediaManager.setHelpCameraSettingsCallBack(() => {
-            this.openHelpCameraSettingsOpened();
-        });
-    }
-
-    private openHelpCameraSettingsOpened(): void{
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
-        this.helpCameraSettingsOpened = true;
-        try{
-            if(window.navigator.userAgent.includes('Firefox')){
-                HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
-            }else if(window.navigator.userAgent.includes('Chrome')){
-                HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
-            }
-        }catch(err) {
-            console.error('openHelpCameraSettingsOpened => getElementByIdOrFail => error', err);
-        }
-        const middleY = this.getMiddleY();
-        const middleX = this.getMiddleX();
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: middleY,
-            x: middleX,
-            duration: 1000,
-            ease: 'Power3',
-            overflow: 'scroll'
-        });
-
-        this.dirty = true;
-    }
-
-    private closeHelpCameraSettingsOpened(): void{
-        const middleX = this.getMiddleX();
-        /*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
-        helpCameraSettingsInfo.innerText = '';
-        helpCameraSettingsInfo.style.display = 'none';*/
-        this.helpCameraSettingsOpened = false;
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: -1000,
-            x: middleX,
-            duration: 1000,
-            ease: 'Power3',
-            overflow: 'scroll'
-        });
-
-        this.dirty = true;
-    }
-
-    private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
-        //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
-        //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
-        setTimeout(() => {
-            (menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
-        }, 250);
-    }
-
-    update(time: number, delta: number): void {
-        this.dirty = false;
-    }
-
-    public onResize(ev: UIEvent): void {
-        super.onResize(ev);
-        if (this.helpCameraSettingsOpened) {
-            const middleX = this.getMiddleX();
-            const middleY = this.getMiddleY();
-            this.tweens.add({
-                targets: this.helpCameraSettingsElement,
-                x: middleX,
-                y: middleY,
-                duration: 1000,
-                ease: 'Power3'
-            });
-            this.dirty = true;
-        }
-    }
-
-    private getMiddleX() : number{
-        return (this.scale.width / 2) -
-        (
-            this.helpCameraSettingsElement
-            && this.helpCameraSettingsElement.node
-            && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
-            ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / (2 * this.scale.zoom))
-            : (400 / 2)
-        );
-    }
-
-    private getMiddleY() : number{
-        const middleY = ((this.scale.height) - (
-            (this.helpCameraSettingsElement
-            && this.helpCameraSettingsElement.node
-            && this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
-                ? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)/this.scale.zoom)) / 2;
-        return (middleY > 0 ? middleY : 0);
-    }
-
-    public isDirty(): boolean {
-        return this.dirty;
-    }
-}
-

front/src/Phaser/Menu/MenuScene.ts

@@ -10,6 +10,7 @@ import {GameConnexionTypes} from "../../Url/UrlManager";
 import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Components/WarningContainer";
 import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
 import {menuIconVisible} from "../../Stores/MenuStore";
+import {videoConstraintStore} from "../../Stores/MediaStore";
 
 export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
@@ -324,7 +325,7 @@ export class MenuScene extends Phaser.Scene {
         if (valueVideo !== this.videoQualityValue) {
             this.videoQualityValue = valueVideo;
             localUserStore.setVideoQualityValue(valueVideo);
-            mediaManager.updateCameraQuality(valueVideo);
+            videoConstraintStore.setFrameRate(valueVideo);
         }
         this.closeGameQualityMenu();
     }

front/src/Phaser/Player/Player.ts

@@ -2,17 +2,17 @@ import {PlayerAnimationDirections} from "./Animation";
 import type {GameScene} from "../Game/GameScene";
 import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
 import {Character} from "../Entity/Character";
+import {userMovingStore} from "../../Stores/GameStore";
+import {RadialMenu, RadialMenuClickEvent, RadialMenuItem} from "../Components/RadialMenu";
 
 export const hasMovedEventName = "hasMoved";
-export interface CurrentGamerInterface extends Character{
+export const requestEmoteEventName = "requestEmote";
-    moveUser(delta: number) : void;
-    say(text : string) : void;
-    isMoving(): boolean;
-}
 
-export class Player extends Character implements CurrentGamerInterface {
+export class Player extends Character {
     private previousDirection: string = PlayerAnimationDirections.Down;
     private wasMoving: boolean = false;
+    private emoteMenu: RadialMenu|null = null;
+    private updateListener: () => void;
 
     constructor(
         Scene: GameScene,
@@ -26,14 +26,18 @@ export class Player extends Character implements CurrentGamerInterface {
         companion: string|null,
         companionTexturePromise?: Promise<string>
     ) {
-        super(Scene, x, y, texturesPromise, name, direction, moving, 1);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1, companion, companionTexturePromise);
 
         //the current player model should be push away by other players to prevent conflict
         this.getBody().setImmovable(false);
 
-        if (typeof companion === 'string') {
+        this.updateListener = () => {
-            this.addCompanion(companion, companionTexturePromise);
+            if (this.emoteMenu) {
+                this.emoteMenu.x = this.x;
+                this.emoteMenu.y = this.y;
             }
+        };
+        this.scene.events.addListener('postupdate', this.updateListener);
     }
 
     moveUser(delta: number): void {
@@ -83,9 +87,43 @@ export class Player extends Character implements CurrentGamerInterface {
             this.previousDirection = direction;
         }
         this.wasMoving = moving;
+        userMovingStore.set(moving);
     }
 
     public isMoving(): boolean {
         return this.wasMoving;
     }
+
+    openOrCloseEmoteMenu(emotes:RadialMenuItem[]) {
+        if(this.emoteMenu) {
+            this.closeEmoteMenu();
+        } else {
+            this.openEmoteMenu(emotes);
+        }
+    }
+
+    isClickable(): boolean {
+        return true;
+    }
+
+    openEmoteMenu(emotes:RadialMenuItem[]): void {
+        this.cancelPreviousEmote();
+        this.emoteMenu = new RadialMenu(this.scene, this.x, this.y, emotes)
+        this.emoteMenu.on(RadialMenuClickEvent, (item: RadialMenuItem) => {
+            this.closeEmoteMenu();
+            this.emit(requestEmoteEventName, item.name);
+            this.playEmote(item.name);
+        });
+    }
+
+    closeEmoteMenu(): void {
+        if (!this.emoteMenu) return;
+        this.emoteMenu.destroy();
+        this.emoteMenu = null;
+    }
+
+    destroy() {
+        this.scene.events.removeListener('postupdate', this.updateListener);
+        super.destroy();
+    }
 }