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

# Conflicts:
#	front/src/Phaser/Game/GameScene.ts
#	front/src/index.ts

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

@@ -1,7 +1,11 @@
 name: Build, push and deploy Docker image
 
 on:
-  - push
+  release:
+    types: [created]
+  pull_request:
+    types: [ labeled, synchronize ]
+
 
 # Enables BuildKit
 env:
@@ -10,7 +14,7 @@ env:
 jobs:
 
   build-front:
-
+    if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
     runs-on: ubuntu-latest
 
     steps:
@@ -30,11 +34,11 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
           repository: thecodingmachine/workadventure-front
-          tags: ${{ env.GITHUB_REF_SLUG }}
+          tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
           add_git_labels: true
 
   build-back:
-
+    if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
     runs-on: ubuntu-latest
 
     steps:
@@ -53,11 +57,11 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
           repository: thecodingmachine/workadventure-back
-          tags: ${{ env.GITHUB_REF_SLUG }}
+          tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
           add_git_labels: true
 
   build-pusher:
-
+    if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
     runs-on: ubuntu-latest
 
     steps:
@@ -76,11 +80,11 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
           repository: thecodingmachine/workadventure-pusher
-          tags: ${{ env.GITHUB_REF_SLUG }}
+          tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
           add_git_labels: true
 
   build-uploader:
-
+    if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
     runs-on: ubuntu-latest
 
     steps:
@@ -99,11 +103,11 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
           repository: thecodingmachine/workadventure-uploader
-          tags: ${{ env.GITHUB_REF_SLUG }}
+          tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
           add_git_labels: true
 
   build-maps:
-
+    if: ${{ github.event.release || contains(github.event.pull_request.labels.*.name, 'deploy') }}
     runs-on: ubuntu-latest
 
     steps:
@@ -123,7 +127,7 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
           repository: thecodingmachine/workadventure-maps
-          tags: ${{ env.GITHUB_REF_SLUG }}
+          tags: ${{ github.event.pull_request && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
           add_git_labels: true
 
   deeploy:
@@ -134,6 +138,7 @@ jobs:
       - build-maps
       - build-uploader
     runs-on: ubuntu-latest
+    if: ${{ contains(github.event.pull_request.labels.*.name, 'deploy') }}
 
     steps:
       - name: Checkout
@@ -151,14 +156,14 @@ jobs:
           JITSI_URL: ${{ secrets.JITSI_URL }}
           SECRET_JITSI_KEY: ${{ secrets.SECRET_JITSI_KEY }}
           TURN_STATIC_AUTH_SECRET: ${{ secrets.TURN_STATIC_AUTH_SECRET }}
+          DEPLOY_REF: ${{ env.GITHUB_HEAD_REF_SLUG }}
         with:
-          namespace: workadventure-${{ env.GITHUB_REF_SLUG }}
+          namespace: workadventure-${{ env.GITHUB_HEAD_REF_SLUG }}
 
       - name: Add a comment in PR
         uses: unsplash/comment-on-pr@v1.2.0
-        if: ${{ env.GITHUB_REF_SLUG != 'master' }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          msg: Environment deployed at https://play.${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com
+          msg: Environment deployed at https://play.${{ env.GITHUB_HEAD_REF_SLUG }}.test.workadventu.re
           check_for_duplicate_msg: true

.github/workflows/cleanup.yml

@@ -1,7 +1,8 @@
 name: Cleanup images and environments
 
 on:
-  - delete
+  pull_request:
+    types: [ closed ]
 
 # Enables BuildKit
 env:
@@ -14,13 +15,12 @@ jobs:
 
     steps:
       # Create a slugified value of the branch
-      - uses: rlespinasse/github-slug-action@1.1.0
+      - uses: rlespinasse/github-slug-action@3.1.0
 
       - name: Cleanup
+        continue-on-error: true
         uses: thecodingmachine/deeployer-cleanup-action@master
         env:
           KUBE_CONFIG_FILE: ${{ secrets.KUBE_CONFIG_FILE }}
         with:
-# FIXME: we are not using ${{ env.GITHUB_REF_SLUG }} that resolves to master BUT! we are not using a slugified namespace
+          namespace: workadventure-${{ env.GITHUB_HEAD_REF_SLUG }}
-# so complex namespace names will not be treated correctly
-          namespace: workadventure-${{ github.event.ref }}

.github/workflows/continuous_integration.yml

@@ -3,8 +3,11 @@
 name: "Continuous Integration"
 
 on:
-  - "pull_request"
+  push:
-  - "push"
+    branches:
+      - master
+      - develop
+  pull_request:
 
 jobs:
 

CHANGELOG.md

@@ -0,0 +1,24 @@
+## Version 1.3.9 - in dev
+
+### Updates
+
+- 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)
+
+### Bug Fixes
+
+- Pinch gesture does no longer move the character
+
+## Version 1.3.0
+
+### New Features
+
+* Maps can now contain "group" layers (layers that contain other layers) - #899 #779 (@Lurkars @moufmouf)
+
+### Updates
+
+
+### Bug Fixes

README.md

@@ -20,7 +20,7 @@ Install Docker.
 Run:
 
 ```
-docker-compose up
+docker-compose up -d
 ```
 
 The environment will start.

deeployer.libsonnet

@@ -1,8 +1,8 @@
 {
   local env = std.extVar("env"),
-  local namespace = env.GITHUB_REF_SLUG,
+  local namespace = env.DEPLOY_REF,
   local tag = namespace,
-  local url = if namespace == "master" then "workadventu.re" else namespace+".workadventure.test.thecodingmachine.com",
+  local url = if namespace == "master" then "workadventu.re" else namespace+".test.workadventu.re",
   // develop branch does not use admin because of issue with SSL certificate of admin as of now.
   local adminUrl = if namespace == "master" || namespace == "develop" || std.startsWith(namespace, "admin") then "https://"+url else null,
   "$schema": "https://raw.githubusercontent.com/thecodingmachine/deeployer/master/deeployer.schema.json",

docker-compose.single-domain.yaml

@@ -30,7 +30,8 @@ services:
       UPLOADER_URL: /uploader
       ADMIN_URL: /admin
       MAPS_URL: /maps
-      STARTUP_COMMAND_1: yarn install
+      STARTUP_COMMAND_1: ./templater.sh
+      STARTUP_COMMAND_2: yarn install
       TURN_SERVER: "turn:localhost:3478,turns:localhost:5349"
       # Use TURN_USER/TURN_PASSWORD if your Coturn server is secured via hard coded credentials.
       # Advice: you should instead use Coturn REST API along the TURN_STATIC_AUTH_SECRET in the Back container
@@ -152,23 +153,6 @@ services:
       - "traefik.http.routers.uploader-ssl.tls=true"
       - "traefik.http.routers.uploader-ssl.service=uploader"
 
-  website:
-    image: thecodingmachine/nodejs:12-apache
-    environment:
-      STARTUP_COMMAND_1: npm install
-      STARTUP_COMMAND_2: npm run watch &
-      APACHE_DOCUMENT_ROOT: dist/
-    volumes:
-      - ./website:/var/www/html
-    labels:
-      - "traefik.http.routers.website.rule=Host(`workadventure.localhost`)"
-      - "traefik.http.routers.website.entryPoints=web"
-      - "traefik.http.services.website.loadbalancer.server.port=80"
-      - "traefik.http.routers.website-ssl.rule=Host(`workadventure.localhost`)"
-      - "traefik.http.routers.website-ssl.entryPoints=websecure"
-      - "traefik.http.routers.website-ssl.tls=true"
-      - "traefik.http.routers.website-ssl.service=website"
-
   messages:
     #image: thecodingmachine/nodejs:14
     image: thecodingmachine/workadventure-back-base:latest

front/dist/index.tmpl.html

@@ -48,20 +48,27 @@
                     <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-micro" class="btn-micro">
+                        <div id="btn-monitor" class="btn-monitor">
-                            <img id="microphone" src="resources/logos/microphone.svg">
+                            <img id="monitor" src="resources/logos/monitor.svg">
-                            <img id="microphone-close" src="resources/logos/microphone-close.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-monitor" class="btn-monitor">
+                        <div id="btn-micro" class="btn-micro">
-                            <img id="monitor" src="resources/logos/monitor.svg">
+                            <img id="microphone" src="resources/logos/microphone.svg">
-                            <img id="monitor-close" src="resources/logos/monitor-close.svg">
+                            <img id="microphone-close" src="resources/logos/microphone-close.svg">
                         </div>
                     </div>
 

front/dist/resources/html/CustomCharacterScene.html

@@ -0,0 +1,160 @@
+<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

@@ -0,0 +1,129 @@
+<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

@@ -0,0 +1,134 @@
+<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,4 +1,10 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
+    #gameMenu main{
+        margin-top: 15px;
+    }
     #gameMenu button {
         background-color: black;
         color: white;
@@ -16,6 +22,21 @@
         width: 32px;
         cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
+    @media only screen and (max-height: 700px) {
+        #gameMenu main {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            margin-top: 0;
+        }
+        #gameMenu section{
+            margin: 2px;
+        }
+        section#socialLinks{
+            position: relative;
+        }
+    }
 </style>
 
 <div id="gameMenu" hidden>

front/dist/resources/html/gameMenuIcon.html

@@ -1,10 +1,12 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #menuIcon button {
         background-color: black;
         color: white;
         border-radius: 7px;
-        height: 28px;
+        padding: 2px 8px;
-        width: 34px;
     }
     #menuIcon button img{
         width: 14px;
@@ -14,6 +16,11 @@
     #menuIcon section {
         margin: 10px;
     }
+    @media only screen and (max-height: 700px) {
+        #menuIcon section {
+            margin: 2px;
+        }
+    }
 </style>
 <main id="menuIcon" hidden>
     <section>

front/dist/resources/html/gameQualityMenu.html

@@ -1,11 +1,14 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameQuality {
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
-        height: 257px;
         margin: 20px auto 0;
-        width: 298px;
+        width: 50vw;
+        max-width: 300px;
     }
     #gameQuality .cautiousText {
         font-size: 50%;
@@ -33,7 +36,7 @@
         color: #696969;
         height: 30px;
         transition: box-shadow 0.3s;
-        width: 240px;
+        width: 100%;
     }
     #gameQuality section {
         margin: 10px;
@@ -42,12 +45,11 @@
         text-align: center;
     }
     #gameQuality button {
-        margin-top: 10px;
+        margin: 10px;
         background-color: black;
         color: white;
         border-radius: 7px;
         padding-bottom: 4px;
-        width: 60px;
     }
     #gameQuality button#gameQualityFormCancel {
         background-color: #c7c7c700;
@@ -57,7 +59,7 @@
 
 <form id="gameQuality" hidden>
     <section>
-        <h3>Game quality</h3>
+        <h5>Game quality</h3>
         <p class="cautiousText">(Editing these settings will restart the game)</p>
         <select id="select-game-quality">
             <option value="120">High video quality (120 fps)</option>
@@ -67,7 +69,7 @@
         </select>
     </section>
     <section>
-        <h3>Video quality</h3>
+        <h5>Video quality</h3>
         <select id="select-video-quality">
             <option value="30">High video quality (30 fps)</option>
             <option value="20">Medium video quality (20 fps, recommended)</option>

front/dist/resources/html/gameReport.html

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

front/dist/resources/html/gameShare.html

@@ -1,11 +1,14 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameShare {
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
         margin: 20px auto 0;
-        width: 298px;
+        width: 50vw;
-        height: 160px;
+        max-width: 400px;
     }
     #gameShare h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -40,7 +43,7 @@
         margin: 0;
     }
     #gameShare button {
-        margin-top: 10px;
+        margin: 10px;
         background-color: black;
         color: white;
         border-radius: 7px;
@@ -66,7 +69,7 @@
     }
     #gameShare section p{
         font-size: 8px;
-        margin: 0px 70px;
+        margin: 0;
     }
     #gameShare section p.err{
         color: red;

front/dist/resources/html/helpCameraSettings.html

@@ -1,11 +1,17 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #helpCameraSettings {
         background: #eceeee;
         border: 1px solid #42464b;
         border-radius: 6px;
-        margin: 10px auto 0;
+        margin: 25px auto 0;
         width: 400px;
-        height: 370px;
+        max-height: calc(48vh - 50px);
+        max-width: 48vw;
+        overflow: hidden;
+        overflow-y: scroll;
     }
     #helpCameraSettings h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -20,18 +26,6 @@
         text-align: center;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
     }
-    #helpCameraSettings 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%;
-    }
     #helpCameraSettings section {
         margin: 10px;
     }
@@ -40,7 +34,7 @@
         margin: 0;
     }
     #helpCameraSettings button {
-        margin-top: 10px;
+        margin: 10px 4px;
         background-color: black;
         color: white;
         border-radius: 7px;
@@ -51,9 +45,8 @@
         color: #292929;
     }
     #helpCameraSettings section a{
-        text-align: center;
         font-size: 12px;
-        margin: 0 6px;
+        text-decoration: underline;
         color: black;
     }
     #helpCameraSettings section h6,
@@ -67,6 +60,9 @@
         font-size: 8px;
         margin: 0px 20px;
     }
+    #helpCameraSettings section p a{
+        font-size: 8px;
+    }
     #helpCameraSettings section p.err{
         color: #ff0000;
     }
@@ -81,6 +77,12 @@
         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>
@@ -96,8 +98,12 @@
         <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">
-        <button type="submit" id="helpCameraSettingsFormRefresh">Refresh</button>
+        <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
         <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
     </section>
 </form>

front/dist/resources/html/loginScene.html

@@ -0,0 +1,120 @@
+<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

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

front/dist/resources/logos/monitor-close.svg

@@ -1,44 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.33 426.67"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M426.67,21.33h-384A42.66,42.66,0,0,0,0,64V320a42.66,42.66,0,0,0,42.67,42.67H192v42.66H149.33V448H320V405.33H277.33V362.67H426.67A42.66,42.66,0,0,0,469.33,320V64A42.66,42.66,0,0,0,426.67,21.33Zm0,298.67h-384V64h384Z" transform="translate(0 -21.33)"/><path class="cls-1" d="M267.2,127.15V86.26a8.14,8.14,0,0,1,14.18-5.44l73.2,81.34a8.12,8.12,0,0,1,.25,10.57l-73.2,89.47a8.14,8.14,0,0,1-14.43-5.13V216.54c-64.25,2.09-104.35,29.55-122.42,83.77a8.13,8.13,0,0,1-15.84-2.58C128.94,202,186.59,131.59,267.2,127.15Zm8.14,73a8.13,8.13,0,0,1,8.13,8.14v26l54.36-66.44-54.36-60.39v27.6a8.13,8.13,0,0,1-8.13,8.14c-63.93,0-111.77,44.24-125.87,111.73C175.65,218.53,217.8,200.13,275.34,200.13Z" transform="translate(0 -21.33)"/></svg>
-<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 480" style="enable-background:new 0 0 512 480;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<path class="st0" d="M411.1,384.2c-12.2,0-24.3,0-36.5,0C259.6,257.6,144.5,130.9,29.5,4.3c11.4-0.8,22.9-1.6,34.3-2.4
-		C179.6,129.3,295.3,256.8,411.1,384.2z"/>
-	<g>
-		<path class="st0" d="M352,152.5c-8.8-8.7-34.2-31.6-74.5-38.1c-32.3-5.2-58.1,2.7-70,7.3C170.9,81.5,134.3,41.3,97.8,1
-			C220.4,1,343,1,465.6,1C427.7,51.5,389.8,102,352,152.5z"/>
-		<path class="st0" d="M511.5,338.3c0,4.7-0.8,12.2-4.7,20.2c-1.2,2.4-3.4,6.3-7.1,10.5c-4,4.4-7.9,7.1-10.2,8.5
-			c-5.6,3.5-10.7,4.9-13.5,5.6c-3.8,0.9-6.7,1-10.2,1.2c-3.6,0.2-5.3,0-13.1,0c-3,0-5.4,0-7,0C414.5,307,383.2,229.8,352,152.5
-			C402.9,62.7,448.7,1,465.6,1c7.5,0,14.3,2.3,14.3,2.3c14.5,4.8,22.3,15.8,23.6,17.8c7.4,10.8,8,21.7,8,25.9
-			C511.5,144.1,511.5,241.2,511.5,338.3z"/>
-		<path class="st0" d="M312.5,192c-5.2-5.2-15.6-14.1-31.4-19.4c-12.8-4.2-24-4.3-30.9-3.8c-6.2-7.1-12.4-14.2-18.6-21.3
-			c10.3-2.4,36.5-6.8,65.1,5.3c15.3,6.5,26.1,15.5,32.7,22.2C323.7,180.8,318.1,186.4,312.5,192z"/>
-		<path class="st0" d="M329.4,175.1c38.8,69.7,77.6,139.4,116.4,209.1c-50.3-55.4-100.6-110.8-151-166.2c6.9,2.9,14.9,0.7,19.2-5.2
-			c4.6-6.2,4-15.1-1.6-20.8C318.1,186.4,323.7,180.8,329.4,175.1z"/>
-		<path class="st0" d="M445.8,384.2L445.8,384.2c-38.8-69.7-77.6-139.4-116.4-209.1c5.3,4.9,12.9,6,18.9,2.7
-			c7.8-4.2,8.3-13.4,8.3-13.8C386.4,237.4,416.1,310.8,445.8,384.2z"/>
-	</g>
-	<path class="st0" d="M162.2,150.4C108.3,213,54.4,275.7,0.5,338.3c0-97.1,0-194.3,0-291.4c0-4,0.6-15.1,8.1-26
-		C16,10.2,25.7,5.8,29.5,4.3C73.7,53,118,101.7,162.2,150.4z"/>
-	<path class="st0" d="M199.5,192c-5.3-6-10.6-12-15.8-18C122.6,228.8,61.6,283.6,0.5,338.3c0,4.1,0.6,15.5,8.6,26.7
-		c1.7,2.4,9.6,12.9,24.1,17.2c5.3,1.6,10,1.9,13.1,1.9C97.5,320.2,148.5,256.1,199.5,192z"/>
-	<path class="st0" d="M84.7,384.2c-12.7,0-25.5,0-38.2,0c58.2-56.2,116.5-112.5,174.7-168.7c8.3,9.1,16.6,18.2,24.9,27.2
-		c-2.2,1.1-5.5,3-8.4,6.4c-3.1,3.7-4.2,7.3-4.4,7.8C231.3,262.4,194.5,295.2,84.7,384.2z"/>
-	<path class="st0" d="M46.4,384.2c-15.3-15.3-30.6-30.6-45.9-45.9C52.8,277.5,105.1,216.8,157.4,156c-3.7,6.7-2.2,15.1,3.5,20
-		c5.4,4.6,13.3,5.1,19.4,1C135.7,246.1,91.1,315.1,46.4,384.2z"/>
-	<path class="st0" d="M49.6,384.3c-1.1,0-2.1,0-3.2-0.1c50.1-62.9,100.2-125.8,150.3-188.7c-3.5,6.6-2.1,14.8,3.4,19.7
-		c5.8,5.2,14.8,5.3,21,0.3C164,271.7,106.8,328,49.6,384.3z"/>
-	<path class="st0" d="M374.6,384.2c-96.6,0-193.3,0-289.9,0C16.5,308,1.3,223,28.5,194.5C57,164.7,150.6,177,233.3,256.9
-		c-3.9,11.8,2,24.8,13.3,29.6c11,4.7,24,0.4,30.2-10C309.3,312.4,342,348.3,374.6,384.2z"/>
-	<path class="st0" d="M219.7,226.7"/>
-	<path class="st0" d="M368.9,480c-74.9,0-149.8,0-224.7,0c-8.8,0-16-7.2-16-16c0-8.8,7.2-16,16-16c74.9,0,149.9,0,224.8,0.1
-		c8.3,0.7,14.7,7.6,14.7,15.9C383.7,472.3,377.2,479.3,368.9,480z"/>
-	<rect x="208.1" y="384.2" class="st0" width="31.9" height="63.9"/>
-	<rect x="272" y="384.2" class="st0" width="32" height="63.9"/>
-	<path class="st0" d="M410.3,395.5"/>
-</g>
-</svg>

front/dist/resources/logos/monitor.svg

@@ -1,15 +1,24 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<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 480" style="enable-background:new 0 0 512 480;" xml:space="preserve">
+	 viewBox="0 0 469.3 469.3" style="enable-background:new 0 0 469.3 469.3;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
+	.st1{opacity:0.9;fill:#FFFFFF;stroke:#FFFFFF;stroke-width:15;stroke-miterlimit:10;enable-background:new    ;}
 </style>
-<path class="st0" d="M466,0H46C20.6,0,0,20.6,0,46v292c0,25.4,20.6,46,46,46h162v64h-64c-8.8,0-16,7.2-16,16s7.2,16,16,16h224
+<g>
-	c8.8,0,16-7.2,16-16s-7.2-16-16-16h-64v-64h162c25.4,0,46-20.6,46-46V46C512,20.6,491.4,0,466,0z M232,264c0-13.3,10.7-24,24-24
+	<g>
-	c13.3,0,24,10.7,24,24s-10.7,24-24,24C242.7,288,232,277.3,232,264z M272,448h-32v-64h32V448z M312.6,214.1
+		<path class="st0" d="M426.7,21.3h-384C19.1,21.3,0,40.4,0,64v256c0,23.6,19.1,42.7,42.7,42.7H192v42.7h-42.7V448H320v-42.7h-42.7
-	c-6.2,6.2-16.4,6.2-22.6,0c-18.7-18.8-49.1-18.8-67.9,0c0,0,0,0,0,0c-6.4,6.1-16.5,5.8-22.6-0.6c-5.9-6.2-5.9-15.9,0-22
+			v-42.7h149.3c23.6,0,42.7-19.1,42.7-42.7V64C469.3,40.4,450.2,21.3,426.7,21.3z M426.7,320h-384V64h384V320z"/>
-	c31.2-31.2,81.9-31.2,113.1,0c0,0,0,0,0,0C318.8,197.7,318.8,207.8,312.6,214.1z M352.2,174.5c-6.2,6.2-16.4,6.3-22.6,0c0,0,0,0,0,0
+	</g>
-	c-40.6-40.6-106.4-40.6-147.1,0c-6.2,6.3-16.4,6.3-22.6,0c-6.3-6.2-6.3-16.4,0-22.6c53.1-53.1,139.2-53.1,192.3,0c0,0,0,0,0,0
+</g>
-	C358.4,158.1,358.4,168.2,352.2,174.5C352.2,174.5,352.2,174.5,352.2,174.5L352.2,174.5z"/>
+<g>
+	<g>
+		<path class="st0" d="M267.2,127.2V86.3c0-4.5,3.6-8.1,8.1-8.1c2.3,0,4.5,1,6,2.7l73.2,81.3c2.7,3,2.8,7.5,0.3,10.6l-73.2,89.5
+			c-2.8,3.5-8,4-11.4,1.1c-1.9-1.5-3-3.8-3-6.3v-40.5c-64.3,2.1-104.4,29.6-122.4,83.8c-1.1,3.3-4.2,5.6-7.7,5.6
+			c-0.4,0-0.9,0-1.3-0.1c-3.9-0.6-6.8-4-6.8-8C128.9,202,186.6,131.6,267.2,127.2z M275.3,200.1c4.5,0,8.1,3.6,8.1,8.1v26l54.4-66.4
+			l-54.4-60.4V135c0,4.5-3.6,8.1-8.1,8.1c-63.9,0-111.8,44.2-125.9,111.7C175.6,218.5,217.8,200.1,275.3,200.1z"/>
+	</g>
+</g>
+<path class="st1" d="M13.4,42.7C153.6,142.3,293.8,241.9,434,341.5"/>
 </svg>

front/dist/resources/style/cowebsite-mobile.scss

@@ -0,0 +1,49 @@
+@media (max-aspect-ratio: 1/1) {
+
+    #main-container {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+  
+  
+    #cowebsite {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 50%;
+      display: flex;
+      flex-direction: column-reverse;
+  
+      &.loading {
+        transform: translateY(-90%);
+      }
+      &.hidden {
+        transform: translateY(-100%);
+      }
+  
+      main {
+        height: 100%;
+      }
+  
+  
+      aside {
+        height: 30px;
+        cursor: ns-resize;
+        flex-direction: column;
+  
+        img {
+          cursor: ns-resize;
+        }
+      }
+  
+      .top-right-btn {
+        &#cowebsite-close {
+          right: 0;
+        }
+        &#cowebsite-fullscreen {
+          left: 0;
+        }
+      }
+    }
+  }
+  

front/dist/resources/style/cowebsite.scss

@@ -87,51 +87,3 @@
     }
   }
 }
-@media (max-aspect-ratio: 1/1) {
-  
-  #main-container {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-
-  #cowebsite {
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 50%;
-    display: flex;
-    flex-direction: column-reverse;
-
-    &.loading {
-      transform: translateY(-90%);
-    }
-    &.hidden {
-      transform: translateY(-100%);
-    }
-
-    main {
-      height: 100%;
-    }
-
-
-    aside {
-      height: 30px;
-      cursor: ns-resize;
-      flex-direction: column;
-      
-      img {
-        cursor: ns-resize;
-      }
-    }
-
-    .top-right-btn {
-      &#cowebsite-close {
-        right: 0px;
-      }
-      &#cowebsite-fullscreen {
-        right: 25px;
-      }
-    }
-  }
-}

front/dist/resources/style/index.scss

@@ -1,2 +1,4 @@
 @import "cowebsite.scss";
+@import "cowebsite-mobile.scss";
 @import "style.css";
+@import "mobile-style.scss";

front/dist/resources/style/mobile-style.scss

@@ -0,0 +1,49 @@
+@media screen and (max-width: 700px),
+        screen and (max-height: 700px){
+  video#myCamVideo {
+    width: 150px;
+  }
+
+  .sidebar {
+    width: 20%;
+    min-width: 200px;
+    position: absolute;
+    display: block;
+    right: 0;
+    height: 80%;
+
+    &> div {
+      max-height: 120px;
+      min-width: 200px;
+    }
+
+    .video-container{
+      min-width: 200px;
+    }
+  }
+
+  .btn-cam-action {
+    min-width: 150px;
+
+    &:hover{
+      transform: translateY(20px);
+    }
+    div {
+      margin: 0 1%;
+      &:hover {
+        background-color: #666;
+      }
+      margin-bottom: 30px;
+    }
+  }
+
+  .main-section {
+    position: absolute;
+    width: 100%;
+    min-width: 400px;
+
+    & > div {
+      z-index: 2;
+    }
+  }
+}

front/dist/resources/style/style.css

@@ -53,6 +53,7 @@ body .message-info.warning{
     padding-top: 32px;
     font-size: 28px;
     color: white;
+    overflow: hidden;
 }
 
 .video-container img{
@@ -97,7 +98,7 @@ body .message-info.warning{
 }
 
 .video-container button.report:hover {
-    width: 150px;
+    width: 160px;
 }
 
 .video-container button.report img{
@@ -125,6 +126,7 @@ body .message-info.warning{
 
 .video-container video{
     height: 100%;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 .video-container video:focus{
@@ -138,8 +140,9 @@ body .message-info.warning{
 #div-myCamVideo {
     position: absolute;
     right: 15px;
-    bottom: 15px;
+    bottom: 30px;
     border-radius: 15px 15px 15px 15px;
+    max-height: 20%;
 }
 
 video#myCamVideo{
@@ -151,28 +154,70 @@ video#myCamVideo{
     /*height: 113px;*/
 }
 
+.sound-progress{
+    display: none;
+    position: absolute;
+    right: 14px;
+    top: calc(50% - 5px);
+}
+.sound-progress.active{
+    display: table-column;
+}
+.sound-progress span{
+    position: absolute;
+    color: black;
+    background-color: #00000020;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+}
+.sound-progress span.active{
+    background-color: #00c3ff66
+}
+.sound-progress span:nth-child(1){
+    top: calc(50% + 20px);
+}
+.sound-progress span:nth-child(2){
+    top: calc(50% + 10px);
+}
+.sound-progress span:nth-child(3){
+    top: calc(50% - 0px);
+}
+.sound-progress span:nth-child(4){
+    top: calc(50% - 10px);
+}
+.sound-progress span:nth-child(5){
+    top: calc(50% - 20px);
+}
 
 .btn-cam-action {
     pointer-events: all;
     position: absolute;
-    bottom: 0px;
+    display: inline-flex;
-    right: 0px;
+    bottom: 10px;
-    width: 450px;
+    right: 15px;
-    height: 150px;
+    width: 15vw;
+    height: 40px;
+    text-align: center;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
 }
 /*btn animation*/
 .btn-cam-action div{
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
-    position: absolute;
+    /*position: absolute;*/
     border: solid 0px black;
     width: 44px;
     height: 44px;
     background: #666;
     box-shadow: 2px 2px 24px #444;
     border-radius: 48px;
-    transform: translateY(40px);
+    transform: translateY(20px);
     transition-timing-function: ease-in-out;
-    bottom: 20px;
+    margin-bottom: 20px;
+    margin: 0 4%;
 }
 .btn-cam-action div.disabled {
     background: #d75555;
@@ -186,22 +231,22 @@ video#myCamVideo{
 .btn-cam-action div:hover{
     background: #407cf7;
     box-shadow: 4px 4px 48px #666;
-    transition: 280ms;
+    transition: 120ms;
 }
 .btn-micro{
     pointer-events: auto;
     transition: all .3s;
-    right: 44px;
+    /*right: 44px;*/
 }
 .btn-video{
     pointer-events: auto;
     transition: all .25s;
-    right: 134px;
+    /*right: 134px;*/
 }
 .btn-monitor{
     pointer-events: auto;
     transition: all .2s;
-    right: 224px;
+    /*right: 224px;*/
 }
 .btn-copy{
     pointer-events: auto;
@@ -338,24 +383,6 @@ body {
 
 
 }
-@media (max-aspect-ratio: 1/1) {
-    .game-overlay {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        flex-direction: row;
-        align-items: flex-end;
-    }
-
-    .sidebar > div {
-        max-width: 21%;
-    }
-
-    .sidebar > div:hover {
-        max-width: 25%;
-    }
-}
 
 #game {
     width: 100%;
@@ -530,7 +557,7 @@ input[type=range]:focus::-ms-fill-upper {
 }
 
 .game-overlay video {
-    width: 100%
+    width: 100%;
 }
 
 .main-section {
@@ -546,6 +573,7 @@ input[type=range]:focus::-ms-fill-upper {
     flex-basis: 96%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    pointer-events: auto;
     /*flex-shrink: 2;*/
 }
 
@@ -557,7 +585,6 @@ input[type=range]:focus::-ms-fill-upper {
 .sidebar {
     flex: 0 0 25%;
     display: flex;
-    pointer-events: none;
 }
 
 .sidebar > div {
@@ -565,12 +592,17 @@ input[type=range]:focus::-ms-fill-upper {
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     border-radius: 15px 15px 15px 15px;
+    pointer-events: auto;
 }
 
 .sidebar > div:hover {
     margin: 0%;
 }
 
+.sidebar > div video {
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+}
+
 /* Let's make sure videos are vertically centered if they need to be cropped */
 .media-container {
     display: flex;
@@ -814,7 +846,7 @@ input[type=range]:focus::-ms-fill-upper {
     right: 0;
 }
 .main-container .audio-playing img{
-    width: 30px;
+    /*width: 30px;*/
     border-radius: 50%;
     background-color: #ffda01;
     padding: 10px;
@@ -822,6 +854,7 @@ input[type=range]:focus::-ms-fill-upper {
 .main-container .audio-playing p{
     color: white;
     margin-left: 10px;
+    margin-top: 14px;
 }
 
 /* VIDEO QUALITY */
@@ -1053,7 +1086,7 @@ div.modal-report-user{
 
 .discussion .messages{
     position: absolute;
-    height: calc(100% - 360px);
+    height: calc(100% - 390px);
     overflow-x: hidden;
     overflow-y: auto;
     max-width: calc(100% - 40px);
@@ -1134,17 +1167,34 @@ div.action{
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }
+div.action.info,
+div.action.warning,
+div.action.danger{
+    transition: all 1s ease;
+    animation: mymove 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
 div.action p.action-body{
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     padding: 10px;
     background-color: #2d2d2dba;
     color: #fff;
     font-size: 14px;
     font-weight: 500;
     text-align: center;
-    max-width: 250px;
+    max-width: 350px;
-    margin-left: calc(50% - 125px);
+    margin-left: calc(50% - 175px);
     border-radius: 15px;
 }
+div.action.warning p.action-body{
+    background-color: #ff9800eb;
+    color: #000;
+}
+div.action.danger p.action-body{
+    background-color: #da0000e3;
+    color: #000;
+}
 .popUpElement{
     font-family: 'Press Start 2P';
     text-align: left;

front/dist/static/images/favicons/manifest.json

@@ -1,41 +1,149 @@
 {
- "name": "App",
+    "short_name": "WA",
+    "name": "WorkAdventure",
     "icons": [
         {
-   "src": "\/android-icon-36x36.png",
+            "src": "/static/images/favicons/apple-icon-57x57.png",
+            "sizes": "57x57",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-60x60.png",
+            "sizes": "60x60",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-76x76.png",
+            "sizes": "76x76",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-114x114.png",
+            "sizes": "114x114",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-120x120.png",
+            "sizes": "120x120",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-152x152.png",
+            "sizes": "152x152",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-180x180.png",
+            "sizes": "180x180",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-36x36.png",
             "sizes": "36x36",
             "type": "image\/png",
             "density": "0.75"
         },
         {
-   "src": "\/android-icon-48x48.png",
+            "src": "/static/images/favicons/android-icon-48x48.png",
             "sizes": "48x48",
             "type": "image\/png",
             "density": "1.0"
         },
         {
-   "src": "\/android-icon-72x72.png",
+            "src": "/static/images/favicons/android-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+
+        {
+            "src": "/static/images/favicons/favicon-16x16.png",
+            "sizes": "16x16",
+            "type": "image\/png",
+            "density": "1"
+        },
+        {
+            "src": "/static/images/favicons/favicon-32x32.png",
+            "sizes": "32x32",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+        {
+            "src": "/static/images/favicons/favicon-96x96.png",
+            "sizes": "96x96",
+            "type": "image\/png",
+            "density": "2.0"
+        },
+
+        {
+            "src": "/static/images/favicons/android-icon-36x36.png",
+            "sizes": "36x36",
+            "type": "image\/png",
+            "density": "1"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image\/png",
+            "density": "1"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-72x72.png",
             "sizes": "72x72",
             "type": "image\/png",
             "density": "1.5"
         },
         {
-   "src": "\/android-icon-96x96.png",
+            "src": "/static/images/favicons/android-icon-96x96.png",
             "sizes": "96x96",
             "type": "image\/png",
             "density": "2.0"
         },
         {
-   "src": "\/android-icon-144x144.png",
+            "src": "/static/images/favicons/android-icon-144x144.png",
             "sizes": "144x144",
             "type": "image\/png",
             "density": "3.0"
         },
         {
-   "src": "\/android-icon-192x192.png",
+            "src": "/static/images/favicons/android-icon-192x192.png",
             "sizes": "192x192",
             "type": "image\/png",
             "density": "4.0"
         }
- ]
+    ],
+    "start_url": "/",
+    "background_color": "#000000",
+    "display_override": ["window-control-overlay", "minimal-ui"],
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#000000",
+    "shortcuts": [
+      {
+        "name": "WorkAdventures",
+        "short_name": "WA",
+        "description": "WorkAdventure application",
+        "url": "/",
+        "icons": [{ "src": "/static/images/favicons/android-icon-192x192.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "WorkAdventure application",
+    "screenshots": [],
+    "related_applications": [{
+        "platform": "web",
+        "url": "https://workadventu.re"
+      }, {
+        "platform": "play",
+        "url": "https://play.workadventu.re"
+    }]
 }

front/package.json

@@ -33,7 +33,7 @@
     "phaser": "^3.54.0",
     "phaser3-rex-plugins": "^1.1.42",
     "queue-typescript": "^1.0.1",
-    "quill": "^1.3.7",
+    "quill": "1.3.6",
     "rxjs": "^6.6.3",
     "simple-peer": "^9.6.2",
     "socket.io-client": "^2.3.0",

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -2,7 +2,6 @@ import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
 import {RoomConnection} from "../Connexion/RoomConnection";
 import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
-import {ADMIN_URL} from "../Enum/EnvironmentVariable";
 import {AdminMessageEventTypes} from "../Connexion/AdminMessagesService";
 
 export const CLASS_CONSOLE_MESSAGE = 'main-console';
@@ -162,10 +161,11 @@ export class ConsoleGlobalMessageManager {
         this.divMessageConsole.appendChild(section);
 
         (async () => {
+            try{
                 // Start loading CSS
                 const cssPromise = ConsoleGlobalMessageManager.loadCss();
                 // Import quill
-            const Quill:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
+                const {default: Quill}:any = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
                 // Wait for CSS to be loaded
                 await cssPromise;
 
@@ -198,6 +198,9 @@ export class ConsoleGlobalMessageManager {
                         toolbar: toolbarOptions
                     },
                 });
+            }catch(err){
+                console.error(err);
+            }
         })();
     }
 

front/src/Api/IframeListener.ts

@@ -60,14 +60,14 @@ class IframeListener {
             // Do we trust the sender of this message?
             // Let's only accept messages from the iframe that are allowed.
             // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
-            let found = false;
+            let foundSrc: string | null = null;
             for (const iframe of this.iframes) {
                 if (iframe.contentWindow === message.source) {
-                    found = true;
+                    foundSrc = iframe.src;
                     break;
                 }
             }
-            if (!found) {
+            if (!foundSrc) {
                 return;
             }
 
@@ -87,7 +87,11 @@ class IframeListener {
                     scriptUtils.goToPage(payload.data.url);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    scriptUtils.openCoWebsite(payload.data.url);
+                    const scriptUrl = [...this.scripts.keys()].find(key => {
+                        return this.scripts.get(key)?.contentWindow == message.source
+                    })
+
+                    scriptUtils.openCoWebsite(payload.data.url, scriptUrl || foundSrc);
                 }
                 else if(payload.type === 'closeCoWebSite') {
                     scriptUtils.closeCoWebSite();

front/src/Api/ScriptUtils.ts

@@ -11,8 +11,8 @@ class ScriptUtils {
 
     }
 
-    public openCoWebsite(url : string){
+    public openCoWebsite(url: string, base: string) {
-            coWebsiteManager.loadCoWebsite(url,url);
+           coWebsiteManager.loadCoWebsite(url, base);
     }
 
     public closeCoWebSite(){

front/src/Connexion/AdminMessagesService.ts

@@ -5,6 +5,7 @@ export enum AdminMessageEventTypes {
     admin = 'message',
     audio = 'audio',
     ban = 'ban',
+    banned = 'banned',
 }
 
 interface AdminMessageEvent {

front/src/Connexion/LocalUser.ts

@@ -10,7 +10,7 @@ export interface CharacterTexture {
 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
 
 export function isUserNameValid(value: string): boolean {
-    const regexp = new RegExp('^[A-Za-z]{1,'+maxUserNameLength+'}$');
+    const regexp = new RegExp('^[A-Za-z0-9]{1,'+maxUserNameLength+'}$');
     return regexp.test(value);
 }
 

front/src/Connexion/RoomConnection.ts

@@ -27,7 +27,8 @@ import {
     SendJitsiJwtMessage,
     CharacterLayerMessage,
     PingMessage,
-    SendUserMessage, BanUserMessage
+    SendUserMessage, 
+    BanUserMessage
 } from "../Messages/generated/messages_pb"
 
 import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@@ -169,6 +170,9 @@ export class RoomConnection implements RoomConnection {
             } else if (message.hasWorldfullmessage()) {
                 worldFullMessageStream.onMessage();
                 this.closed = true;
+            } else if (message.hasWorldconnexionmessage()) {
+                worldFullMessageStream.onMessage(message.getWorldconnexionmessage()?.getMessage());
+                this.closed = true;
             }else if (message.hasWebrtcsignaltoclientmessage()) {
                 this.dispatch(EventMessage.WEBRTC_SIGNAL, message.getWebrtcsignaltoclientmessage());
             } else if (message.hasWebrtcscreensharingsignaltoclientmessage()) {
@@ -188,7 +192,7 @@ export class RoomConnection implements RoomConnection {
             } else if (message.hasSendusermessage()) {
                 adminMessagesService.onSendusermessage(message.getSendusermessage() as SendUserMessage);
             } else if (message.hasBanusermessage()) {
-                adminMessagesService.onSendusermessage(message.getSendusermessage() as BanUserMessage);
+                adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
             } else if (message.hasWorldfullwarningmessage()) {
                 worldFullWarningStream.onMessage();
             } else if (message.hasRefreshroommessage()) {

front/src/Connexion/WorldFullMessageStream.ts

@@ -2,12 +2,12 @@ import {Subject} from "rxjs";
 
 class WorldFullMessageStream {
     
-    private _stream:Subject<void> = new Subject();
+    private _stream:Subject<string|null> = new Subject<string|null>();
     public stream = this._stream.asObservable();
 
 
-    onMessage() {
+    onMessage(message? :string) {
-        this._stream.next();
+        this._stream.next(message);
     }
 }
 

front/src/Enum/EnvironmentVariable.ts

@@ -10,21 +10,19 @@ const TURN_USER: string = process.env.TURN_USER || '';
 const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
 const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true";
-const RESOLUTION = 2;
-const ZOOM_LEVEL = 1/*3/4*/;
 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 isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
+
 export {
     DEBUG_MODE,
     START_ROOM_URL,
     PUSHER_URL,
     UPLOADER_URL,
     ADMIN_URL,
-    RESOLUTION,
-    ZOOM_LEVEL,
     POSITION_DELAY,
     MAX_EXTRAPOLATION_TIME,
     STUN_SERVER,

front/src/Phaser/Components/MobileJoystick.ts

@@ -0,0 +1,65 @@
+import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
+import ScaleManager = Phaser.Scale.ScaleManager;
+import {waScaleManager} from "../Services/WaScaleManager";
+
+//the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
+export const joystickBaseKey = 'joystickBase';
+export const joystickBaseImg = 'resources/objects/joystickSplitted.png';
+export const joystickThumbKey = 'joystickThumb';
+export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png';
+
+const baseSize = 50;
+const thumbSize = 25;
+const radius = 17.5;
+
+export class MobileJoystick extends VirtualJoystick {
+    private resizeCallback: () => void;
+
+    constructor(scene: Phaser.Scene) {
+        super(scene, {
+            x: -1000,
+            y: -1000,
+            radius: radius * window.devicePixelRatio,
+            base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(99999),
+            thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(99999),
+            enable: true,
+            dir: "8dir",
+        });
+        this.visible = false;
+        this.enable = false;
+
+        this.scene.input.on('pointerdown', (pointer: { x: number; y: number; wasTouch: boolean; event: TouchEvent }) => {
+            if (!pointer.wasTouch) {
+                return;
+            }
+
+            // Let's only display the joystick if there is one finger on the screen
+            if (pointer.event.touches.length === 1) {
+                this.x = pointer.x;
+                this.y = pointer.y;
+                this.visible = true;
+                this.enable = true;
+            } else {
+                this.visible = false;
+                this.enable = false;
+            }
+        });
+        this.scene.input.on('pointerup', () => {
+            this.visible = false;
+            this.enable = false;
+        });
+        this.resizeCallback = this.resize.bind(this);
+        this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
+    }
+
+    private resize() {
+        this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio);
+        this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio);
+        this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio);
+    }
+
+    public destroy() {
+        super.destroy();
+        this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
+    }
+}

front/src/Phaser/Components/TextUtils.ts

@@ -0,0 +1,53 @@
+import {ITiledMapObject} from "../Map/ITiledMap";
+import Text = Phaser.GameObjects.Text;
+import {GameScene} from "../Game/GameScene";
+import TextStyle = Phaser.GameObjects.TextStyle;
+
+export class TextUtils {
+    public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
+        if (object.text === undefined) {
+            throw new Error('This object has not textual representation.');
+        }
+        const options: {
+            fontStyle?: string,
+            fontSize?: string,
+            fontFamily?: string,
+            color?: string,
+            align?: string,
+            wordWrap?: {
+                width: number,
+                useAdvancedWrap?: boolean
+            }
+        } = {};
+        if (object.text.italic) {
+            options.fontStyle = 'italic';
+        }
+        // Note: there is no support for "strikeout" and "underline"
+        let fontSize: number = 16;
+        if (object.text.pixelsize) {
+            fontSize = object.text.pixelsize;
+        }
+        options.fontSize = fontSize + 'px';
+        if (object.text.fontfamily) {
+            options.fontFamily = '"'+object.text.fontfamily+'"';
+        }
+        let color = '#000000';
+        if (object.text.color !== undefined) {
+            color = object.text.color;
+        }
+        options.color = color;
+        if (object.text.wrap === true) {
+            options.wordWrap = {
+                width: object.width,
+                //useAdvancedWrap: true
+            }
+        }
+        if (object.text.halign !== undefined) {
+            options.align = object.text.halign;
+        }
+
+        console.warn(options);
+        const textElem = scene.add.text(object.x, object.y, object.text.text, options);
+        textElem.setAngle(object.rotation);
+    }
+}

front/src/Phaser/Game/DirtyScene.ts

@@ -46,7 +46,7 @@ export abstract class DirtyScene extends ResizableScene {
         return this.dirty || this.objectListChanged;
     }
 
-    public onResize(): void {
+    public onResize(ev: UIEvent): void {
         this.objectListChanged = true;
     }
 }

front/src/Phaser/Game/GameManager.ts

@@ -89,11 +89,8 @@ export class GameManager {
         console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
         scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
         scenePlugin.launch(MenuSceneName);
-        
-        if (!localUserStore.getHelpCameraSettingsShown()) {
         scenePlugin.launch(HelpCameraSettingsSceneName);//700
     }
-    }
     
     public gameSceneIsCreated(scene: GameScene) {
         this.currentGameSceneName = scene.scene.key;

front/src/Phaser/Game/GameMap.ts

@@ -1,4 +1,5 @@
-import {ITiledMap} from "../Map/ITiledMap";
+import {ITiledMap, ITiledMapLayer} from "../Map/ITiledMap";
+import {LayersIterator} from "../Map/LayersIterator";
 
 export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void;
 
@@ -10,8 +11,10 @@ export class GameMap {
     private key: number|undefined;
     private lastProperties = new Map<string, string|boolean|number>();
     private callbacks = new Map<string, Array<PropertyChangeCallback>>();
+    public readonly layersIterator: LayersIterator;
 
     public constructor(private map: ITiledMap) {
+        this.layersIterator = new LayersIterator(map);
     }
 
     /**
@@ -55,7 +58,7 @@ export class GameMap {
     private getProperties(key: number): Map<string, string|boolean|number> {
         const properties = new Map<string, string|boolean|number>();
 
-        for (const layer of this.map.layers) {
+        for (const layer of this.layersIterator) {
             if (layer.type !== 'tilelayer') {
                 continue;
             }

front/src/Phaser/Game/GameScene.ts

@@ -15,10 +15,16 @@ import {
     JITSI_PRIVATE_MODE,
     MAX_PER_GROUP,
     POSITION_DELAY,
-    RESOLUTION,
-    ZOOM_LEVEL
 } from "../../Enum/EnvironmentVariable";
-import {ITiledMap, ITiledMapLayer, ITiledMapLayerProperty, ITiledMapObject, ITiledTileSet} from "../Map/ITiledMap";
+import {
+    ITiledMap,
+    ITiledMapLayer,
+    ITiledMapLayerProperty,
+    ITiledMapObject,
+    ITiledText,
+    ITiledMapTileLayer,
+    ITiledTileSet
+} from "../Map/ITiledMap";
 import {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
@@ -58,10 +64,6 @@ import {Room} from "../../Connexion/Room";
 import {jitsiFactory} from "../../WebRtc/JitsiFactory";
 import {urlManager} from "../../Url/UrlManager";
 import {audioManager} from "../../WebRtc/AudioManager";
-import {IVirtualJoystick} from "../../types";
-const {
-  default: VirtualJoystick,
-} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
 import {PresentationModeIcon} from "../Components/PresentationModeIcon";
 import {ChatModeIcon} from "../Components/ChatModeIcon";
 import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
@@ -84,6 +86,11 @@ import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoading
 import RenderTexture = Phaser.GameObjects.RenderTexture;
 import Tilemap = Phaser.Tilemaps.Tilemap;
 import {DirtyScene} from "./DirtyScene";
+import {TextUtils} from "../Components/TextUtils";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
+import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
+import {waScaleManager} from "../Services/WaScaleManager";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -139,7 +146,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     pendingEvents: Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface>();
     private initPosition: PositionInterface|null = null;
     private playersPositionInterpolator = new PlayersPositionInterpolator();
-    public connection!: RoomConnection;
+    public connection: RoomConnection|undefined;
     private simplePeer!: SimplePeer;
     private GlobalMessageManager!: GlobalMessageManager;
     public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
@@ -178,7 +185,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private messageSubscription: Subscription|null = null;
     private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
     private originalMapUrl: string|undefined;
-    public virtualJoystick!: IVirtualJoystick;
+    private pinchManager: PinchManager|undefined;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
         super({
@@ -197,8 +204,7 @@ export class GameScene extends DirtyScene implements CenterListener {
         })
         this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
             this.connectionAnswerPromiseResolve = resolve;
-        })
+        });
-
     }
 
     //hook preload scene
@@ -212,6 +218,10 @@ export class GameScene extends DirtyScene implements CenterListener {
         }
 
         this.load.image(openChatIconName, 'resources/objects/talk.png');
+        if (touchScreenManager.supportTouchScreen) {
+            this.load.image(joystickBaseKey, joystickBaseImg);
+            this.load.image(joystickThumbKey, joystickThumbImg);
+        }
         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) {
@@ -259,6 +269,7 @@ 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');
 
+        //this function must stay at the end of preload function
         addLoader(this);
     }
 
@@ -364,7 +375,11 @@ export class GameScene extends DirtyScene implements CenterListener {
         urlManager.pushRoomIdToUrl(this.room);
         this.startLayerName = urlManager.getStartLayerNameFromUrl();
 
-        this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError())
+        if (touchScreenManager.supportTouchScreen) {
+            this.pinchManager = new PinchManager(this);
+        }
+
+        this.messageSubscription = worldFullMessageStream.stream.subscribe((message) => this.showWorldFullError(message))
 
         const playerName = gameManager.getPlayerName();
         if (!playerName) {
@@ -388,7 +403,7 @@ export class GameScene extends DirtyScene implements CenterListener {
         //add layer on map
         this.Layers = new Array<Phaser.Tilemaps.TilemapLayer>();
         let depth = -2;
-        for (const layer of this.mapFile.layers) {
+        for (const layer of this.gameMap.layersIterator) {
             if (layer.type === 'tilelayer') {
                 this.addLayer(this.Map.createLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
 
@@ -404,9 +419,16 @@ export class GameScene extends DirtyScene implements CenterListener {
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
                 depth = 10000;
             }
+            if (layer.type === 'objectgroup') {
+                for (const object of layer.objects) {
+                    if (object.text) {
+                        TextUtils.createTextFromITiledMapObject(this, object);
+                    }
+                }
+            }
         }
         if (depth === -2) {
-            throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at.');
+            throw new Error('Your map MUST contain a layer of type "objectgroup" whose name is "floorLayer" that represents the layer characters are drawn at. This layer cannot be contained in a group.');
         }
 
         this.initStartXAndStartY();
@@ -417,26 +439,10 @@ export class GameScene extends DirtyScene implements CenterListener {
         //initialise list of other player
         this.MapPlayers = this.physics.add.group({immovable: true});
 
-        this.virtualJoystick = new VirtualJoystick(this, {
-            x: this.game.renderer.width / 2,
-            y: this.game.renderer.height / 2,
-            radius: 20,
-            base: this.add.circle(0, 0, 20),
-            thumb: this.add.circle(0, 0, 10),
-            enable: true,
-            dir: "8dir",
-        });
-        this.virtualJoystick.visible = true;
-        //create input to move
-        mediaManager.setUserInputManager(this.userInputManager);
-        this.userInputManager = new UserInputManager(this, this.virtualJoystick);
 
-        // Listener event to reposition virtual joystick
+        //create input to move
-        // whatever place you click in game area
+        this.userInputManager = new UserInputManager(this);
-        this.input.on('pointerdown', (pointer: { x: number; y: number; }) => {
+        mediaManager.setUserInputManager(this.userInputManager);
-            this.virtualJoystick.x = pointer.x;
-            this.virtualJoystick.y = pointer.y;
-        });
 
         if (localUserStore.getFullscreen()) {
             document.querySelector('body')?.requestFullscreen();
@@ -729,7 +735,7 @@ export class GameScene extends DirtyScene implements CenterListener {
                     if (JITSI_PRIVATE_MODE && !jitsiUrl) {
                         const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined;
 
-                        this.connection.emitQueryJitsiJwtMessage(roomName, adminTag);
+                        this.connection?.emitQueryJitsiJwtMessage(roomName, adminTag);
                     } else {
                         this.startJitsi(roomName, undefined);
                     }
@@ -752,9 +758,9 @@ export class GameScene extends DirtyScene implements CenterListener {
         });
         this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
             if (newValue === undefined || newValue === false || newValue === '') {
-                this.connection.setSilent(false);
+                this.connection?.setSilent(false);
             } else {
-                this.connection.setSilent(true);
+                this.connection?.setSilent(true);
             }
         });
         this.gameMap.onPropertyChange('playAudio', (newValue, oldValue, allProps) => {
@@ -909,9 +915,11 @@ ${escapedMessage}
         audioManager.unloadAudio();
         // We are completely destroying the current scene to avoid using a half-backed instance when coming back to the same map.
         this.connection?.closeConnection();
-        this.simplePeer.closeAllConnections();
+        this.simplePeer?.closeAllConnections();
         this.simplePeer?.unregister();
         this.messageSubscription?.unsubscribe();
+        this.userInputManager.destroy();
+        this.pinchManager?.destroy();
 
         for(const iframeEvents of this.iframeSubscriptionList){
             iframeEvents.unsubscribe();
@@ -973,13 +981,14 @@ ${escapedMessage}
     }
 
     private initPositionFromLayerName(layerName: string) {
-        for (const layer of this.mapFile.layers) {
+        for (const layer of this.gameMap.layersIterator) {
-            if (layerName === layer.name && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) {
+            if ((layerName === layer.name || layer.name.endsWith('/'+layerName)) && layer.type === 'tilelayer' && (layerName === defaultStartLayerName || this.isStartLayer(layer))) {
                 const startPosition = this.startUser(layer);
                 this.startX = startPosition.x + this.mapFile.tilewidth/2;
                 this.startY = startPosition.y + this.mapFile.tileheight/2;
             }
         }
+
     }
 
     private getExitUrl(layer: ITiledMapLayer): string|undefined {
@@ -1002,7 +1011,7 @@ ${escapedMessage}
     }
 
     private getProperty(layer: ITiledMapLayer|ITiledMap, name: string): string|boolean|number|undefined {
-        const properties: ITiledMapLayerProperty[] = layer.properties;
+        const properties: ITiledMapLayerProperty[]|undefined = layer.properties;
         if (!properties) {
             return undefined;
         }
@@ -1014,7 +1023,7 @@ ${escapedMessage}
     }
 
     private getProperties(layer: ITiledMapLayer|ITiledMap, name: string): (string|number|boolean|undefined)[] {
-        const properties: ITiledMapLayerProperty[] = layer.properties;
+        const properties: ITiledMapLayerProperty[]|undefined = layer.properties;
         if (!properties) {
             return [];
         }
@@ -1028,7 +1037,7 @@ ${escapedMessage}
         await gameManager.loadMap(room, this.scene);
     }
 
-    private startUser(layer: ITiledMapLayer): PositionInterface {
+    private startUser(layer: ITiledMapTileLayer): PositionInterface {
         const tiles = layer.data;
         if (typeof(tiles) === 'string') {
             throw new Error('The content of a JSON map must be filled as a JSON array, not as a string');
@@ -1058,8 +1067,8 @@ ${escapedMessage}
     //todo: in a dedicated class/function?
     initCamera() {
         this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
+        this.cameras.main.startFollow(this.CurrentPlayer, true);
         this.updateCameraOffset();
-        this.cameras.main.setZoom(ZOOM_LEVEL);
     }
 
     addLayer(Layer : Phaser.Tilemaps.TilemapLayer){
@@ -1185,7 +1194,7 @@ ${escapedMessage}
         this.lastMoveEventSent = event;
         this.lastSentTick = this.currentTick;
         const camera = this.cameras.main;
-        this.connection.sharePosition(event.x, event.y, event.direction, event.moving, {
+        this.connection?.sharePosition(event.x, event.y, event.direction, event.moving, {
             left: camera.scrollX,
             top: camera.scrollY,
             right: camera.scrollX + camera.width,
@@ -1198,13 +1207,8 @@ ${escapedMessage}
      * @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
      */
     update(time: number, delta: number) : void {
-        // TODO: add Events.ADDED_TO_SCENE to the scene to track new objects.
-        // When an object is added, add ANIMATION_UPDATE event on this object (and remove the listener on Events.REMOVE_FROM_SCENE)
-        // This way, we can set the dirty flag only when an animation is added!!!
-
-
         this.dirty = false;
-        mediaManager.setLastUpdateScene();
+        mediaManager.updateScene();
         this.currentTick = time;
         if (this.CurrentPlayer.isMoving()) {
             this.dirty = true;
@@ -1269,7 +1273,7 @@ ${escapedMessage}
      * Put all the players on the map on map load.
      */
     private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
-        const currentPlayerId = this.connection.getUserId();
+        const currentPlayerId = this.connection?.getUserId();
         this.removeAllRemotePlayers();
         // load map
         usersPosition.forEach((userPosition : MessageUserPositionInterface) => {
@@ -1413,16 +1417,16 @@ ${escapedMessage}
      * Sends to the server an event emitted by one of the ActionableItems.
      */
     emitActionableEvent(itemId: number, eventName: string, state: unknown, parameters: unknown) {
-        this.connection.emitActionableEvent(itemId, eventName, state, parameters);
+        this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
-    public onResize(): void {
+    public onResize(ev: UIEvent): void {
-        super.onResize();
+        super.onResize(ev);
         this.reposition();
 
         // Send new viewport to server
         const camera = this.cameras.main;
-        this.connection.setViewport({
+        this.connection?.setViewport({
             left: camera.scrollX,
             top: camera.scrollY,
             right: camera.scrollX + camera.width,
@@ -1452,19 +1456,18 @@ ${escapedMessage}
     }
 
     /**
-     * Updates the offset of the character compared to the center of the screen according to the layout mananger
+     * Updates the offset of the character compared to the center of the screen according to the layout manager
-     * (tries to put the character in the center of the reamining space if there is a discussion going on.
+     * (tries to put the character in the center of the remaining space if there is a discussion going on.
      */
     private updateCameraOffset(): void {
         const array = layoutManager.findBiggestAvailableArray();
-        let xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
+        const xCenter = (array.xEnd - array.xStart) / 2 + array.xStart;
-        let yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
+        const yCenter = (array.yEnd - array.yStart) / 2 + array.yStart;
 
+        const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>('#game canvas');
         // Let's put this in Game coordinates by applying the zoom level:
-        xCenter /= ZOOM_LEVEL * RESOLUTION;
-        yCenter /= ZOOM_LEVEL * RESOLUTION;
 
-        this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1,  xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
+        this.cameras.main.setFollowOffset((xCenter - game.offsetWidth/2) * window.devicePixelRatio / this.scale.zoom , (yCenter - game.offsetHeight/2) * window.devicePixelRatio / this.scale.zoom);
     }
 
     public onCenterChange(): void {
@@ -1478,7 +1481,7 @@ ${escapedMessage}
         const jitsiUrl = allProps.get("jitsiUrl") as string|undefined;
 
         jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl);
-        this.connection.setSilent(true);
+        this.connection?.setSilent(true);
         mediaManager.hideGameOverlay();
 
         //permit to stop jitsi when user close iframe
@@ -1507,14 +1510,29 @@ ${escapedMessage}
     }
 
     //todo: put this into an 'orchestrator' scene (EntryScene?)
-    private showWorldFullError(): void {
+    private showWorldFullError(message: string|null): void {
         this.cleanupClosingScene();
         this.scene.stop(ReconnectingSceneName);
+        this.scene.remove(ReconnectingSceneName);
         this.userInputManager.disableControls();
+        //FIX ME to use status code
+        if(message == undefined){
             this.scene.start(ErrorSceneName, {
                 title: 'Connection rejected',
                 subTitle: 'The world you are trying to join is full. Try again later.',
                 message: 'If you want more information, you may contact us at: workadventure@thecodingmachine.com'
             });
+        }else{
+            this.scene.start(ErrorSceneName, {
+                title: 'Connection rejected',
+                subTitle: 'You cannot join the World. Try again later. \n\r \n\r Error: '+message+'.',
+                message: 'If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com'
+            });
+        }
+    }
+
+    zoomByFactor(zoomFactor: number) {
+        waScaleManager.zoomModifier *= zoomFactor;
+        this.updateCameraOffset();
     }
 }

front/src/Phaser/Login/CustomizeScene.ts

@@ -1,54 +1,32 @@
 import {EnableCameraSceneName} from "./EnableCameraScene";
-import {TextField} from "../Components/TextField";
-import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {loadAllLayers, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
+import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
 import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
-import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
 import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import { MenuScene } from "../Menu/MenuScene";
+import { SelectCharacterSceneName } from "./SelectCharacterScene";
 
 export const CustomizeSceneName = "CustomizeScene";
 
-enum CustomizeTextures{
+export const CustomizeSceneKey = "CustomizeScene";
-    icon = "icon",
+const customizeSceneKey = 'customizeScene';
-    arrowRight = "arrow_right",
-    mainFont = "main_font",
-    arrowUp = "arrow_up",
-}
 
 export class CustomizeScene extends AbstractCharacterScene {
-
-    private textField!: TextField;
-    private enterField!: TextField;
-
-    private arrowRight!: Image;
-    private arrowLeft!: Image;
-
-    private arrowDown!: Image;
-    private arrowUp!: Image;
-
     private Rectangle!: Rectangle;
 
-    private mobileTapUP!: Rectangle;
-    private mobileTapDOWN!: Rectangle;
-    private mobileTapLEFT!: Rectangle;
-    private mobileTapRIGHT!: Rectangle;
-
-    private mobileTapENTER!: Rectangle;
-
-    private logo!: Image;
-
     private selectedLayers: number[] = [0];
     private containersRow: Container[][] = [];
     private activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
+    private customizeSceneElement!: Phaser.GameObjects.DOMElement;
+
     constructor() {
         super({
             key: CustomizeSceneName
@@ -56,7 +34,7 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     preload() {
-        addLoader(this);
+        this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
 
         this.layers = loadAllLayers(this.load);
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
@@ -68,105 +46,44 @@ export class CustomizeScene extends AbstractCharacterScene {
             });
         });
 
-        this.load.image(CustomizeTextures.arrowRight, "resources/objects/arrow_right.png");
+        //this function must stay at the end of preload function
-        this.load.image(CustomizeTextures.icon, "resources/logos/tcm_full.png");
+        addLoader(this);
-        this.load.image(CustomizeTextures.arrowUp, "resources/objects/arrow_up.png");
-        this.load.bitmapFont(CustomizeTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
     create() {
-        this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!');
+        this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
+        this.centerXDomElement(this.customizeSceneElement, 150);
+        MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
 
-        this.enterField = new TextField(this, this.game.renderer.width / 2, 60, 'Start the game by pressing ENTER\n\n or touching the center rectangle');
+        this.customizeSceneElement.addListener('click');
-
+        this.customizeSceneElement.on('click',  (event:MouseEvent) => {
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
+            event.preventDefault();
-        this.add.existing(this.logo);
+            if((event?.target as HTMLInputElement).id === 'customizeSceneButtonLeft') {
-
-
-        this.arrowRight = new Image(this, this.game.renderer.width*0.9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
-        this.add.existing(this.arrowRight);
-        this.mobileTapRIGHT = this.add
-          .rectangle(
-            this.game.renderer.width*0.9,
-            this.game.renderer.height/2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorHorizontally(1);
-          });
-
-        this.arrowLeft = new Image(this, this.game.renderer.width/9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
-        this.arrowLeft.flipX = true;
-        this.add.existing(this.arrowLeft);
-        this.mobileTapLEFT = this.add
-          .rectangle(
-            this.game.renderer.width/9,
-            this.game.renderer.height/2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
                 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();
+                }
+            }
         });
 
-        this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 2, 32, 33)
+        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);
-        this.mobileTapENTER = this.add
-          .rectangle(
-            this.cameras.main.worldView.x + this.cameras.main.width / 2,
-            this.cameras.main.worldView.y + this.cameras.main.height / 2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-              const layers: string[] = [];
-              let i = 0;
-              for (const layerItem of this.selectedLayers) {
-                  if (layerItem !== undefined) {
-                      layers.push(this.layers[i][layerItem].name);
-                  }
-                  i++;
-              }
-
-              gameManager.setCharacterLayers(layers);
-
-              this.scene.sleep(CustomizeSceneName);
-              gameManager.tryResumingGame(this, EnableCameraSceneName);
-          });
-
-        this.arrowDown = new Image(this, this.game.renderer.width - 30, 100, CustomizeTextures.arrowUp);
-        this.arrowDown.flipY = true;
-        this.add.existing(this.arrowDown);
-        this.mobileTapDOWN = this.add
-          .rectangle(
-            this.game.renderer.width - 30,
-            100,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorVertically(1);
-          });
-
-        this.arrowUp = new Image(this, this.game.renderer.width - 30, 60, CustomizeTextures.arrowUp);
-        this.add.existing(this.arrowUp);
-        this.mobileTapUP = this.add
-          .rectangle(
-            this.game.renderer.width - 30,
-            60,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorVertically(-1);
-          });
 
         this.createCustomizeLayer(0, 0, 0);
         this.createCustomizeLayer(0, 0, 1);
@@ -177,22 +94,10 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.moveLayers();
         this.input.keyboard.on('keyup-ENTER', () => {
-            const layers: string[] = [];
+            this.nextSceneToCamera();
-            let i = 0;
+        });
-            for (const layerItem of this.selectedLayers) {
+        this.input.keyboard.on('keyup-BACKSPACE', () => {
-                if (layerItem !== undefined) {
+            this.backToPreviousScene();
-                    layers.push(this.layers[i][layerItem].name);
-                }
-                i++;
-            }
-            if (!areCharacterLayersValid(layers)) {
-                return;
-            }
-
-            gameManager.setCharacterLayers(layers);
-
-            this.scene.sleep(CustomizeSceneName);
-            gameManager.tryResumingGame(this, EnableCameraSceneName);
         });
 
         this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1));
@@ -207,6 +112,8 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.moveLayers();
             this.updateSelectedLayer();
         }
+
+        this.onResize();
     }
 
     private moveCursorHorizontally(index: number): void {
@@ -222,6 +129,27 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     private 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) {
             this.activeRow = 0
@@ -236,11 +164,6 @@ export class CustomizeScene extends AbstractCharacterScene {
         localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
     }
 
-    update(time: number, delta: number): void {
-        super.update(time, delta);
-        this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
-
     /**
      * @param x, the layer's vertical position
      * @param y, the layer's horizontal position
@@ -298,7 +221,7 @@ export class CustomizeScene extends AbstractCharacterScene {
      */
     private moveLayers(): void {
         const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 2;
+        const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 3;
         const screenWidth = this.game.renderer.width;
         const screenHeight = this.game.renderer.height;
         for (let i = 0; i < this.containersRow.length; i++) {
@@ -335,41 +258,42 @@ export class CustomizeScene extends AbstractCharacterScene {
                 this.containersRow[i][j].add(children);
             }
         }
+    }
+
+    update(time: number, delta: number): void {
+
     }
 
      public onResize(): void {
         this.moveLayers();
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        this.mobileTapENTER.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.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
-        this.mobileTapENTER.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
 
-        this.textField.x = this.game.renderer.width/2;
+        this.centerXDomElement(this.customizeSceneElement, 150);
+     }
 
-        this.logo.x = this.game.renderer.width - 30;
+    private nextSceneToCamera(){
-        this.logo.y = this.game.renderer.height - 20;
+        const layers: string[] = [];
-
+            let i = 0;
-        this.arrowUp.x = this.game.renderer.width - 30;
+            for (const layerItem of this.selectedLayers) {
-        this.mobileTapUP.x = this.game.renderer.width - 30;
+                if (layerItem !== undefined) {
-        this.arrowUp.y = 60;
+                    layers.push(this.layers[i][layerItem].name);
-        this.mobileTapUP.y = 60;
+                }
-
+                i++;
-        this.arrowDown.x = this.game.renderer.width - 30;
+            }
-        this.mobileTapDOWN.x = this.game.renderer.width - 30;
+            if (!areCharacterLayersValid(layers)) {
-        this.arrowDown.y = 100;
+                return;
-        this.mobileTapDOWN.y = 100;
+            }
-
-        this.arrowLeft.x = this.game.renderer.width/9;
-        this.mobileTapLEFT.x = this.game.renderer.width/9;
-        this.arrowLeft.y = this.game.renderer.height/2;
-        this.mobileTapLEFT.y = this.game.renderer.height/2;
-
-        this.arrowRight.x = this.game.renderer.width*0.9;
-        this.mobileTapRIGHT.x = this.game.renderer.width*0.9;
-        this.arrowRight.y = this.game.renderer.height/2;
-        this.mobileTapRIGHT.y = this.game.renderer.height/2;
 
+            gameManager.setCharacterLayers(layers);
+            this.scene.sleep(CustomizeSceneName);
+            this.scene.remove(SelectCharacterSceneName);
+            gameManager.tryResumingGame(this, EnableCameraSceneName);
+    }
 
+    private backToPreviousScene(){
+        this.scene.sleep(CustomizeSceneName);
+        this.scene.run(SelectCharacterSceneName);
     }
 }

front/src/Phaser/Login/EnableCameraScene.ts

@@ -1,12 +1,15 @@
 import {gameManager} from "../Game/GameManager";
 import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
-import Rectangle = Phaser.GameObjects.Rectangle;
 import {mediaManager} from "../../WebRtc/MediaManager";
-import {RESOLUTION} from "../../Enum/EnvironmentVariable";
 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";
 
 export const EnableCameraSceneName = "EnableCameraScene";
 enum LoginTextures {
@@ -17,12 +20,11 @@ enum LoginTextures {
     arrowUp = "arrow_up"
 }
 
+const enableCameraSceneKey = 'enableCameraScene';
 
-export class EnableCameraScene extends Phaser.Scene {
+export class EnableCameraScene extends ResizableScene {
     private textField!: TextField;
-    private pressReturnField!: TextField;
     private cameraNameField!: TextField;
-    private logo!: Image;
     private arrowLeft!: Image;
     private arrowRight!: Image;
     private arrowDown!: Image;
@@ -34,9 +36,11 @@ export class EnableCameraScene extends Phaser.Scene {
     private soundMeter: SoundMeter;
     private soundMeterSprite!: SoundMeterSprite;
     private microphoneNameField!: TextField;
-    private repositionCallback!: (this: Window, ev: UIEvent) => void;
 
-    private mobileTapRectangle!: Rectangle;
+    private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
+
+    private mobileTapZone!: Zone;
+
     constructor() {
         super({
             key: EnableCameraSceneName
@@ -45,8 +49,10 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     preload() {
+
+        this.load.html(enableCameraSceneKey, 'resources/html/EnableCameraScene.html');
+
         this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.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
@@ -54,19 +60,30 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     create() {
-        this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
 
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start');
+        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.mobileTapRectangle = this.add
+        this.mobileTapZone = this.add.zone(this.scale.width / 2,this.scale.height - 30,200,50)
-          .rectangle(
+          .setInteractive().on("pointerdown", () => {
-            this.game.renderer.width / 2,
-            this.game.renderer.height - 30,
-            200,
-            50,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
             this.login();
           });
 
@@ -96,9 +113,6 @@ export class EnableCameraScene extends Phaser.Scene {
         this.arrowDown.setInteractive().on('pointerdown', this.nextMic.bind(this));
         this.add.existing(this.arrowDown);
 
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
         this.input.keyboard.on('keyup-ENTER', () => {
             this.login();
         });
@@ -118,8 +132,7 @@ export class EnableCameraScene extends Phaser.Scene {
         this.soundMeterSprite.setVisible(false);
         this.add.existing(this.soundMeterSprite);
 
-        this.repositionCallback = this.reposition.bind(this);
+        this.onResize();
-        window.addEventListener('resize', this.repositionCallback);
     }
 
     private previousCam(): void {
@@ -197,10 +210,9 @@ export class EnableCameraScene extends Phaser.Scene {
             this.arrowUp.setVisible(this.microphoneSelected > 0);
 
         }
-        this.reposition();
     }
 
-    private reposition(): void {
+    public onResize(): void {
         let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
         let bounds = div.getBoundingClientRect();
         if (!div.srcObject) {
@@ -209,24 +221,22 @@ export class EnableCameraScene extends Phaser.Scene {
         }
 
         this.textField.x = this.game.renderer.width / 2;
-        this.mobileTapRectangle.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.pressReturnField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
 
-        this.cameraNameField.y = bounds.top / RESOLUTION - 8;
+        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 / RESOLUTION + 16;
+        this.soundMeterSprite.y = bounds.bottom / this.scale.zoom + 16;
 
         this.microphoneNameField.y = this.soundMeterSprite.y + 22;
 
-        this.arrowRight.x = bounds.right / RESOLUTION + 16;
+        this.arrowRight.x = bounds.right / this.scale.zoom + 16;
-        this.arrowRight.y = (bounds.top + bounds.height / 2) / RESOLUTION;
+        this.arrowRight.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
 
-        this.arrowLeft.x = bounds.left / RESOLUTION - 16;
+        this.arrowLeft.x = bounds.left / this.scale.zoom - 16;
-        this.arrowLeft.y = (bounds.top + bounds.height / 2) / RESOLUTION;
+        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;
@@ -234,23 +244,22 @@ export class EnableCameraScene extends Phaser.Scene {
         this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
         this.arrowUp.y = this.microphoneNameField.y;
 
-        this.pressReturnField.y = Math.max(this.game.renderer.height - 30, this.microphoneNameField.y + 20);
+        const actionBtn = document.querySelector<HTMLDivElement>('#enableCameraScene .action');
-        this.logo.x = this.game.renderer.width - 30;
+        if (actionBtn !== null) {
-        this.logo.y = Math.max(this.game.renderer.height - 20, this.microphoneNameField.y + 30);
+            actionBtn.style.top = (this.scale.height - 65) + 'px';
+        }
     }
 
     update(time: number, delta: number): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-
         this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
+        mediaManager.updateScene();
 
-        mediaManager.setLastUpdateScene();
+        this.centerXDomElement(this.enableCameraSceneElement, 300);
     }
 
     private login(): void {
         HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
         this.soundMeter.stop();
-        window.removeEventListener('resize', this.repositionCallback);
 
         mediaManager.stopCamera();
         mediaManager.stopMicrophone();

front/src/Phaser/Login/EntryScene.ts

@@ -2,6 +2,7 @@ import {gameManager} from "../Game/GameManager";
 import {Scene} from "phaser";
 import {ErrorScene} from "../Reconnecting/ErrorScene";
 import {WAError} from "../Reconnecting/WAError";
+import {waScaleManager} from "../Services/WaScaleManager";
 
 export const EntrySceneName = "EntryScene";
 
@@ -17,11 +18,18 @@ export class EntryScene extends Scene {
     }
 
     create() {
+
         gameManager.init(this.scene).then((nextSceneName) => {
+            // Let's rescale before starting the game
+            // We can do it at this stage.
+            waScaleManager.applyNewSize();
             this.scene.start(nextSceneName);
         }).catch((err) => {
             if (err.response && err.response.status == 404) {
-                ErrorScene.showError(new WAError('Page Not Found', 'Could not find map', window.location.pathname), this.scene);
+                ErrorScene.showError(new WAError(
+                    'Access link incorrect', 
+                    'Could not find map. Please check your access link.', 
+                    'If you want more information, you may contact administrator or contact us at: workadventure@thecodingmachine.com'), this.scene);
             } else {
                 ErrorScene.showError(err, this.scene);
             }

front/src/Phaser/Login/LoginScene.ts

@@ -1,28 +1,18 @@
 import {gameManager} from "../Game/GameManager";
-import {TextField} from "../Components/TextField";
-import {TextInput} from "../Components/TextInput";
-import Image = Phaser.GameObjects.Image;
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
-import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser";
 import { localUserStore } from "../../Connexion/LocalUserStore";
-import Rectangle = Phaser.GameObjects.Rectangle;
+import {MenuScene} from "../Menu/MenuScene";
+import { isUserNameValid } from "../../Connexion/LocalUser";
 
-//todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
-enum LoginTextures {
+
-    icon = "icon",
+const loginSceneKey = 'loginScene';
-    mainFont = "main_font"
-}
 
 export class LoginScene extends ResizableScene {
-    private nameInput!: TextInput;
+
-    private textField!: TextField;
+    private loginSceneElement!: Phaser.GameObjects.DOMElement;
-    private infoTextField!: TextField;
-    private pressReturnField!: TextField;
-    private logo!: Image;
     private name: string = '';
-    private mobileTapRectangle!: Rectangle;
 
     constructor() {
         super({
@@ -32,78 +22,65 @@ export class LoginScene extends ResizableScene {
     }
 
     preload() {
-        //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
+        this.load.html(loginSceneKey, 'resources/html/loginScene.html');
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.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.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey);
+        this.centerXDomElement(this.loginSceneElement, 200);
+        MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
 
-        this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => {
+        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
-            this.name = text;
+        const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement;
-            localUserStore.setName(text);
+        inputElement.value = localUserStore.getName() ?? '';
-        })
+        inputElement.focus();
-            .setInteractive()
+        inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
-            .on('pointerdown', () => {
+            if(inputElement.value.length > 7){
-                this.nameInput.focus();
+                event.preventDefault();
-            })
+                return;
-
-        this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:')
-            .setInteractive()
-            .on('pointerdown', () => {
-                this.nameInput.focus();
-            })
-        // For mobile purposes - we need a big enough touchable area.
-        this.mobileTapRectangle = this.add.rectangle(
-            this.game.renderer.width / 2,
-            130,
-            this.game.renderer.width / 2,
-            60,
-        ).setInteractive()
-        .on('pointerdown', () => {
-            this.login(this.name)
-        })
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Touch here\n\n or \n\nPress enter to start')
-
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
-        const infoText = "Commands: \n - Arrows or W, A, S, D to move\n - SHIFT to run";
-        this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false);
-
-        this.input.keyboard.on('keyup-ENTER', () => {
-            if (isUserNameValid(this.name)) {
-                this.login(this.name);
             }
+            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);
         });
     }
 
-    update(time: number, delta: number): void {
+    private login(inputElement: HTMLInputElement): void {
-        if (this.name == '') {
+        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
-            this.pressReturnField?.setVisible(false);
+        this.name = inputElement.value;
-        } else {
+        if (this.name === '') {
-            this.pressReturnField?.setVisible(!!(Math.floor(time / 500) % 2));
+            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
         }
-
-    private login(name: string): void {
         if (this.name === '') return
-        gameManager.setPlayerName(name);
+        gameManager.setPlayerName(this.name);
 
         this.scene.stop(LoginSceneName)
         gameManager.tryResumingGame(this, SelectCharacterSceneName);
         this.scene.remove(LoginSceneName)
     }
 
-    public onResize(ev: UIEvent): void {
+    update(time: number, delta: number): void {
-        this.textField.x = this.game.renderer.width / 2;
-        this.nameInput.setX(this.game.renderer.width / 2 - 64);
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.mobileTapRectangle.x = this.game.renderer.width / 2;
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
-        this.infoTextField.y = this.game.renderer.height - 35;
-    }
 
     }
+
+    public onResize(ev: UIEvent): void {
+        this.centerXDomElement(this.loginSceneElement, 200);
+    }
+}

front/src/Phaser/Login/ResizableScene.ts

@@ -1,5 +1,23 @@
 import {Scene} from "phaser";
+import DOMElement = Phaser.GameObjects.DOMElement;
 
 export abstract class ResizableScene extends Scene {
     public abstract onResize(ev: UIEvent): void;
+
+    /**
+     * Centers the DOM element on the X axis.
+     *
+     * @param object
+     * @param defaultWidth The width of the DOM element. We try to compute it but it may not be available if called from "create".
+     */
+    public centerXDomElement(object: DOMElement, defaultWidth: number): void {
+        object.x = (this.scale.width / 2) -
+            (
+                object
+                && object.node
+                && object.node.getBoundingClientRect().width > 0
+                    ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
+                    : (300 / this.scale.zoom)
+            );
+    }
 }

front/src/Phaser/Login/SelectCharacterMobileScene.ts

@@ -0,0 +1,76 @@
+import {gameManager} from "../Game/GameManager";
+import {TextField} from "../Components/TextField";
+import Image = Phaser.GameObjects.Image;
+import Rectangle = Phaser.GameObjects.Rectangle;
+import {EnableCameraSceneName} from "./EnableCameraScene";
+import {CustomizeSceneName} from "./CustomizeScene";
+import {localUserStore} from "../../Connexion/LocalUserStore";
+import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
+import {AbstractCharacterScene} from "./AbstractCharacterScene";
+import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
+import {MenuScene} from "../Menu/MenuScene";
+import { SelectCharacterScene, SelectCharacterSceneName } from "./SelectCharacterScene";
+
+export class SelectCharacterMobileScene extends SelectCharacterScene {
+
+    create(){
+        super.create();
+        this.selectedRectangle.destroy();
+    }
+    
+    protected defineSetupPlayer(numero: number){
+        const deltaX = 30;
+        const deltaY = 2;
+        let [playerX, playerY] = this.getCharacterPosition();
+        let playerVisible = true;
+        let playerScale = 1.5;
+        let playserOpactity = 1;
+
+        if( this.currentSelectUser !== numero ){
+            playerVisible = false;
+        }
+        if( numero === (this.currentSelectUser + 1) ){
+            playerY -= deltaY;
+            playerX += deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser + 2) ){
+            playerY -= deltaY;
+            playerX += (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 1) ){
+            playerY -= deltaY;
+            playerX -= deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 2) ){
+            playerY -= deltaY;
+            playerX -= (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+    }
+
+        /**
+     * Returns pixel position by on column and row number
+     */
+         protected getCharacterPosition(): [number, number] {
+            return [
+                this.game.renderer.width / 2,
+                this.game.renderer.height / 3
+            ];
+        }
+
+}

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -1,275 +1,251 @@
 import {gameManager} from "../Game/GameManager";
-import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
-import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
-import {loadAllDefaultModels, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
+import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
 import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
-
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
+import {MenuScene} from "../Menu/MenuScene";
+import { SelectCharacterMobileScene } from "./SelectCharacterMobileScene";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
-enum LoginTextures {
+
-    playButton = "play_button",
+const selectCharacterKey = 'selectCharacterScene';
-    icon = "icon",
-    mainFont = "main_font",
-    customizeButton = "customize_button",
-    customizeButtonSelected = "customize_button_selected"
-}
 
 export class SelectCharacterScene extends AbstractCharacterScene {
-    private readonly nbCharactersPerRow = 6;
+    protected readonly nbCharactersPerRow = 6;
-    private textField!: TextField;
+    protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
-    private pressReturnField!: TextField;
+    protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
-    private logo!: Image;
+    protected playerModels!: BodyResourceDescriptionInterface[];
-    private customizeButton!: Image;
-    private customizeButtonSelected!: Image;
 
-    private selectedRectangle!: Rectangle;
+    protected selectedRectangle!: Rectangle;
-    private selectedRectangleXPos = 0; // Number of the character selected in the rows
+
-    private selectedRectangleYPos = 0; // Number of the character selected in the columns
+    protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
-    private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
+    protected currentSelectUser = 0;
-    private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
-    private mobileTapRectangle!: Rectangle;
-    private playerModels!: BodyResourceDescriptionInterface[];
 
     constructor() {
         super({
-            key: SelectCharacterSceneName
+            key: SelectCharacterSceneName,
         });
     }
 
     preload() {
-        addLoader(this);
+        this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
 
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 this.playerModels.push(bodyResourceDescription);
             });
         })
-
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.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');
         this.playerModels = loadAllDefaultModels(this.load);
-        this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
-        this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
 
+        //this function must stay at the end of preload function
         addLoader(this);
     }
 
     create() {
-        this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
+
-        this.pressReturnField = new TextField(
+        this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
-            this,
+        this.centerXDomElement(this.selectCharacterSceneElement, 150);
-            this.game.renderer.width / 2,
+        MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
-            90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60,
+
-            'Touch here\n\n or \n\nPress enter to start');
+        this.selectCharacterSceneElement.addListener('click');
-        // For mobile purposes - we need a big enough touchable area.
+        this.selectCharacterSceneElement.on('click',  (event:MouseEvent) => {
-        this.mobileTapRectangle = this.add
+            event.preventDefault();
-          .rectangle(
+            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
-            this.game.renderer.width / 2,
+                this.moveToLeft();
-            275,
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
-            this.game.renderer.width / 2,
+                this.moveToRight();
-            50,
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormSubmit') {
-          )
+                this.nextSceneToCameraScene();
-          .setInteractive()
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormCustomYourOwnSubmit') {
-          .on("pointerdown", () => {
+                this.nextSceneToCustomizeScene();
-            this.nextScene();
+            }
         });
 
+        if (touchScreenManager.supportTouchScreen) {
+            new PinchManager(this);
+        }
+
         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);
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
-        this.input.keyboard.on('keyup-ENTER', () => {
-            return this.nextScene();
-        });
-
-        this.input.keyboard.on('keydown-RIGHT', () => {
-            if(this.selectedRectangleYPos * this.nbCharactersPerRow + (this.selectedRectangleXPos + 2))
-            if (
-                this.selectedRectangleXPos < this.nbCharactersPerRow - 1
-                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos + 1) + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleXPos++;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-LEFT', () => {
-            if (
-                this.selectedRectangleXPos > 0
-                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos - 1) + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleXPos--;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-DOWN', () => {
-            if (
-                this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)
-                && (
-                    (((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length // check if player isn't empty
-                    || (this.selectedRectangleYPos + 1) === Math.ceil(this.playerModels.length / this.nbCharactersPerRow) // check if is custom rectangle
-                )
-            ) {
-                this.selectedRectangleYPos++;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-UP', () => {
-            if (
-                this.selectedRectangleYPos > 0
-                && (((this.selectedRectangleYPos - 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleYPos--;
-            }
-            this.updateSelectedPlayer();
-        });
 
         /*create user*/
         this.createCurrentPlayer();
-
         const playerNumber = localUserStore.getPlayerCharacterIndex();
-        if (playerNumber && playerNumber !== -1) {
+
-            this.selectedRectangleXPos = playerNumber % this.nbCharactersPerRow;
+        this.input.keyboard.on('keyup-ENTER', () => {
-            this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow);
+            return this.nextSceneToCameraScene();
-            this.updateSelectedPlayer();
+        });
-        } else if (playerNumber === -1) {
+
-            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
+        this.input.keyboard.on('keydown-RIGHT', () => {
-            this.updateSelectedPlayer();
+            this.moveToRight();
-        }
+        });
+        this.input.keyboard.on('keydown-LEFT', () => {
+            this.moveToLeft();
+        });
+        this.input.keyboard.on('keydown-UP', () => {
+            this.moveToUp();
+        });
+        this.input.keyboard.on('keydown-DOWN', () => {
+            this.moveToDown();
+        });
     }
 
-    update(time: number, delta: number): void {
+    protected nextSceneToCameraScene(): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
-
-    private nextScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
+        if(!this.selectedPlayer){
+            return;
+        }
         this.scene.stop(SelectCharacterSceneName);
-        if (this.selectedPlayer !== null) {
         gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
-        } else {
-            this.scene.run(CustomizeSceneName);
-        }
         this.scene.remove(SelectCharacterSceneName);
     }
 
+    protected nextSceneToCustomizeScene(): void {
+        if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
+            return;
+        }
+        this.scene.sleep(SelectCharacterSceneName);
+        this.scene.run(CustomizeSceneName);
+    }
+
     createCurrentPlayer(): void {
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
-            const col = i % this.nbCharactersPerRow;
+            const [middleX, middleY] = this.getCharacterPosition();
-            const row = Math.floor(i / this.nbCharactersPerRow);
+            const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
-
+            this.setUpPlayer(player, i);
-            const [x, y] = this.getCharacterPosition(col, row);
-            const player = this.physics.add.sprite(x, y, playerResource.name, 0);
-            player.setBounce(0.2);
-            player.setCollideWorldBounds(true);
             this.anims.create({
                 key: playerResource.name,
-                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}),
+                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}),
-                frameRate: 10,
+                frameRate: 8,
                 repeat: -1
             });
             player.setInteractive().on("pointerdown", () => {
-                this.selectedRectangleXPos = col;
+                if(this.currentSelectUser === i){
-                this.selectedRectangleYPos = row;
+                    return;
-                this.updateSelectedPlayer();
+                }
+                this.currentSelectUser = i;
+                this.moveUser();
             });
             this.players.push(player);
         }
 
-        const maxRow = Math.ceil( this.playerModels.length / this.nbCharactersPerRow);
+        this.selectedPlayer = this.players[this.currentSelectUser];
-        this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButton);
+        this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
-        this.customizeButton.setOrigin(0.5, 0.5);
+    }
-        this.add.existing(this.customizeButton);
-        this.customizeButtonSelected = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButtonSelected);
-        this.customizeButtonSelected.setOrigin(0.5, 0.5);
-        this.customizeButtonSelected.setVisible(false);
-        this.add.existing(this.customizeButtonSelected);
 
-        this.customizeButton.setInteractive().on("pointerdown", () => {
+    protected moveUser(){
-            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
+        for(let i = 0; i < this.players.length; i++){
+            const player = this.players[i];
+            this.setUpPlayer(player, i);
+        }
         this.updateSelectedPlayer();
-            this.nextScene();
+    }
-        });
-        this.customizeButtonSelected.setInteractive().on("pointerdown", () => {
-            this.nextScene();
-        });
 
-        this.selectedPlayer = this.players[0];
+    protected moveToLeft(){
-        this.selectedPlayer.play(this.playerModels[0].name);
+        if(this.currentSelectUser === 0){
+            return;
+        }
+        this.currentSelectUser -= 1;
+        this.moveUser();
+    }
+
+    protected moveToRight(){
+        if(this.currentSelectUser === (this.players.length - 1)){
+            return;
+        }
+        this.currentSelectUser += 1;
+        this.moveUser();
+    }
+
+    protected moveToUp(){
+        if(this.currentSelectUser < this.nbCharactersPerRow){
+            return;
+        }
+        this.currentSelectUser -= this.nbCharactersPerRow;
+        this.moveUser();
+    }
+
+    protected moveToDown(){
+        if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){
+            return;
+        }
+        this.currentSelectUser += this.nbCharactersPerRow;
+        this.moveUser();
+    }
+
+    protected defineSetupPlayer(numero: 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
+        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
+
+        const playerVisible = true;
+        const playerScale = 1;
+        const playserOpactity = 1;
+
+        // if selected
+        if( numero === this.currentSelectUser ){
+            this.selectedRectangle.setX(playerX);
+            this.selectedRectangle.setY(playerY);
+        }
+
+        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+    }
+
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
+
+        const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
+        player.setBounce(0.2);
+        player.setCollideWorldBounds(true);
+        player.setVisible( playerVisible );
+        player.setScale(playerScale, playerScale);
+        player.setAlpha(playserOpactity);
+        player.setX(playerX);
+        player.setY(playerY);
     }
 
     /**
      * Returns pixel position by on column and row number
      */
-    private getCharacterPosition(x: number, y: number): [number, number] {
+    protected getCharacterPosition(): [number, number] {
         return [
-            this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32,
+            this.game.renderer.width / 2,
-            y * 32 + 90
+            this.game.renderer.height / 2.5
         ];
     }
 
-    private updateSelectedPlayer(): void {
+    protected updateSelectedPlayer(): void {
-        this.selectedPlayer?.anims.pause();
+        this.selectedPlayer?.anims.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
-        // If we selected the customize button
+        const player = this.players[this.currentSelectUser];
-        if (this.selectedRectangleYPos === Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
+        player.play(this.playerModels[this.currentSelectUser].name);
-            this.selectedPlayer = null;
-            this.selectedRectangle.setVisible(false);
-            this.customizeButtonSelected.setVisible(true);
-            this.customizeButton.setVisible(false);
-            localUserStore.setPlayerCharacterIndex(-1);
-            return;
-        }
-        this.customizeButtonSelected.setVisible(false);
-        this.customizeButton.setVisible(true);
-        const [x, y] = this.getCharacterPosition(this.selectedRectangleXPos, this.selectedRectangleYPos);
-        this.selectedRectangle.setVisible(true);
-        this.selectedRectangle.setX(x);
-        this.selectedRectangle.setY(y);
-        this.selectedRectangle.setSize(32, 32);
-        const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
-        const player = this.players[playerNumber];
-        player.play(this.playerModels[playerNumber].name);
         this.selectedPlayer = player;
-        localUserStore.setPlayerCharacterIndex(playerNumber);
+        localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
+    }
+
+    update(time: number, delta: number): void {
     }
 
     public onResize(ev: UIEvent): void {
-        this.textField.x = this.game.renderer.width / 2;
+        //move position of user
-        this.pressReturnField.x = this.game.renderer.width / 2;
+        this.moveUser();
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
-        this.customizeButton.x = this.game.renderer.width / 2;
-        this.customizeButtonSelected.x = this.game.renderer.width / 2;
 
-        for (let i = 0; i <this.playerModels.length; i++) {
+        this.centerXDomElement(this.selectCharacterSceneElement, 150);
-            const player = this.players[i];
-
-            const col = i % this.nbCharactersPerRow;
-            const row = Math.floor(i / this.nbCharactersPerRow);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-            player.x = x;
-            player.y = y;
     }
-        this.updateSelectedPlayer();
-    }
-
 }

front/src/Phaser/Login/SelectCompanionScene.ts

@@ -3,33 +3,25 @@ import Rectangle = Phaser.GameObjects.Rectangle;
 import { addLoader } from "../Components/Loader";
 import { gameManager} from "../Game/GameManager";
 import { ResizableScene } from "./ResizableScene";
-import { TextField } from "../Components/TextField";
 import { EnableCameraSceneName } from "./EnableCameraScene";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures";
 import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
+import { MenuScene } from "../Menu/MenuScene";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
-enum LoginTextures {
+const selectCompanionSceneKey = 'selectCompanionScene';
-    playButton = "play_button",
-    icon = "icon",
-    mainFont = "main_font"
-}
 
 export class SelectCompanionScene extends ResizableScene {
-    private logo!: Image;
-    private textField!: TextField;
-    private pressReturnField!: TextField;
-    private readonly nbCharactersPerRow = 7;
-
-    private selectedRectangle!: Rectangle;
-    
     private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
     private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
-    private companionModels: Array<CompanionResourceDescriptionInterface|null> = [null];
+    private companionModels: Array<CompanionResourceDescriptionInterface> = [];
 
-    private confirmTouchArea!: Rectangle;
+    private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
+    private currentCompanion = 0;
 
     constructor() {
         super({
@@ -38,206 +30,199 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     preload() {
-        addLoader(this);
+        this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
 
         getAllCompanionResources(this.load).forEach(model => {
             this.companionModels.push(model);
         });
 
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
+        //this function must stay at the end of preload function
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.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');
-
         addLoader(this);
     }
 
     create() {
-        this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your companion');
 
-        const confirmTouchAreaY = 115 + 32 * Math.ceil(this.companionModels.length / this.nbCharactersPerRow);
+        this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
-        this.pressReturnField = new TextField(
+        this.centerXDomElement(this.selectCompanionSceneElement, 150);
-            this,
+        MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
-            this.game.renderer.width / 2,
-            confirmTouchAreaY,
-            'Touch here\n\n or \n\n press enter to start'
-        );
-        this.confirmTouchArea = this.add
-            .rectangle(this.game.renderer.width / 2, confirmTouchAreaY, 200, 50)
-            .setInteractive()
-            .on("pointerdown", this.nextScene.bind(this));
 
-        const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
+        this.selectCompanionSceneElement.addListener('click');
-        this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
+        this.selectCompanionSceneElement.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 === 'selectCompanionSceneFormSubmit') {
+                this.nextScene();
+            }else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormBack') {
+                this._nextScene();
+            }
+        });
 
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
+        if (touchScreenManager.supportTouchScreen) {
-        this.add.existing(this.logo);
+            new PinchManager(this);
+        }
 
         // input events
         this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this));
 
-        this.input.keyboard.on('keydown-RIGHT', this.selectNext.bind(this));
+        this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
-        this.input.keyboard.on('keydown-LEFT', this.selectPrevious.bind(this));
+        this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
-        this.input.keyboard.on('keydown-DOWN', this.jumpToNextRow.bind(this));
+
-        this.input.keyboard.on('keydown-UP', this.jumpToPreviousRow.bind(this));
+        if(localUserStore.getCompanion()){
+            const companionIndex = this.companionModels.findIndex((companion) => companion.name === localUserStore.getCompanion());
+            if(companionIndex > -1 || companionIndex < this.companions.length){
+                this.currentCompanion = companionIndex;
+                this.selectedCompanion = this.companions[companionIndex];
+            }
+        }
+
+        localUserStore.setCompanion(null);
+        gameManager.setCompanion(null);
 
         this.createCurrentCompanion();
-        this.selectCompanion(this.getCompanionIndex());
+        this.updateSelectedCompanion();
     }
 
     update(time: number, delta: number): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
 
-    private jumpToPreviousRow(): void {
-        const index = this.companions.indexOf(this.selectedCompanion) - this.nbCharactersPerRow;
-        if (index >= 0) {
-            this.selectCompanion(index);  
-        }
-    }
-
-    private jumpToNextRow(): void {
-        const index = this.companions.indexOf(this.selectedCompanion) + this.nbCharactersPerRow;
-        if (index < this.companions.length) {
-            this.selectCompanion(index);  
-        }
-    }
-
-    private selectPrevious(): void {
-        const index = this.companions.indexOf(this.selectedCompanion);
-        this.selectCompanion(index - 1);  
-    }
-
-    private selectNext(): void {
-        const index = this.companions.indexOf(this.selectedCompanion);
-        this.selectCompanion(index + 1);  
-    }
-
-    private selectCompanion(index?: number): void {
-        if (typeof index === 'undefined') {
-            index = this.companions.indexOf(this.selectedCompanion);
-        }
-
-        // make sure index is inside possible range
-        index = Math.min(this.companions.length - 1, Math.max(0, index));
-
-        if (this.selectedCompanion === this.companions[index]) {
-            return;
-        }
-
-        this.selectedCompanion.anims.pause();
-        this.selectedCompanion = this.companions[index];
-
-        this.redrawSelectedRectangle();
-
-        const model = this.companionModels[index];
-
-        if (model !== null) {
-            this.selectedCompanion.anims.play(model.name);
-        }
-    }
-
-    private redrawSelectedRectangle(): void {
-        this.selectedRectangle.setVisible(true);
-        this.selectedRectangle.setX(this.selectedCompanion.x);
-        this.selectedRectangle.setY(this.selectedCompanion.y);
-        this.selectedRectangle.setSize(32, 32);
-    }
-
-    private storeCompanionSelection(): string|null {
-        const index = this.companions.indexOf(this.selectedCompanion);
-        const model = this.companionModels[index];
-        const companion = model === null ? null : model.name;
-
-        localUserStore.setCompanion(companion);
-
-        return companion;
     }
 
     private nextScene(): void {
-        const companion = this.storeCompanionSelection();
+        localUserStore.setCompanion(this.companionModels[this.currentCompanion].name);
+        gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
 
+        this._nextScene();
+    }
+
+    private _nextScene(){
         // next scene
         this.scene.stop(SelectCompanionSceneName);
-
-        gameManager.setCompanion(companion);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
-
         this.scene.remove(SelectCompanionSceneName);
     }
 
     private createCurrentCompanion(): void {
         for (let i = 0; i < this.companionModels.length; i++) {
-            const companionResource = this.companionModels[i];
+            const companionResource = this.companionModels[i]
-
+            const [middleX, middleY] = this.getCompanionPosition();
-            const col = i % this.nbCharactersPerRow;
+            const companion = this.physics.add.sprite(middleX, middleY, companionResource.name, 0);
-            const row = Math.floor(i / this.nbCharactersPerRow);
+            this.setUpCompanion(companion, i);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-
-            let name = "null";
-            if (companionResource !== null) {
-                name = companionResource.name;
-            }
-
-            const companion = this.physics.add.sprite(x, y, name, 0);
-            companion.setBounce(0.2);
-            companion.setCollideWorldBounds(true);
-
-            if (companionResource !== null) {
             this.anims.create({
-                    key: name,
+                key: companionResource.name,
-                    frames: this.anims.generateFrameNumbers(name, {start: 0, end: 2,}),
+                frames: this.anims.generateFrameNumbers(companionResource.name, {start: 0, end: 2,}),
                 frameRate: 10,
                 repeat: -1
             });
-            }
 
             companion.setInteractive().on("pointerdown", () => {
-                this.selectCompanion(i);
+                this.currentCompanion = i;
+                this.moveCompanion();
             });
 
             this.companions.push(companion);
         }
-
+        this.selectedCompanion = this.companions[this.currentCompanion];
-        this.selectedCompanion = this.companions[0];
-    }
-
-    private getCharacterPosition(x: number, y: number): [number, number] {
-        return [
-            this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32,
-            y * 32 + 90
-        ];
     }
 
     public onResize(ev: UIEvent): void {
-        this.textField.x = this.game.renderer.width / 2;
+        this.moveCompanion();
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
 
-        for (let i = 0; i < this.companionModels.length; i++) {
+        this.centerXDomElement(this.selectCompanionSceneElement, 150);
+    }
+
+    private updateSelectedCompanion(): void {
+        this.selectedCompanion?.anims.pause();
+        const companion = this.companions[this.currentCompanion];
+        companion.play(this.companionModels[this.currentCompanion].name);
+        this.selectedCompanion = companion;
+    }
+
+    private moveCompanion(){
+        for(let i = 0; i < this.companions.length; i++){
             const companion = this.companions[i];
-
+            this.setUpCompanion(companion, i);
-            const col = i % this.nbCharactersPerRow;
+        }
-            const row = Math.floor(i / this.nbCharactersPerRow);
+        this.updateSelectedCompanion();
-
-            const [x, y] = this.getCharacterPosition(col, row);
-            companion.x = x;
-            companion.y = y;
     }
 
-        this.redrawSelectedRectangle();
+    private moveToLeft(){
+        if(this.currentCompanion === 0){
+            return;
+        }
+        this.currentCompanion -= 1;
+        this.moveCompanion();
     }
 
-    private getCompanionIndex(): number {
+    private moveToRight(){
-        const companion = localUserStore.getCompanion();
+        if(this.currentCompanion === (this.companions.length - 1)){
-
+            return;
-        if (companion === null) {
+        }
-            return 0;
+        this.currentCompanion += 1;
+        this.moveCompanion();
     }
 
-        return this.companionModels.findIndex(model => model !== null && model.name === companion);
+    private defineSetupCompanion(numero: 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 ){
+            companionVisible = false;
+        }
+        if( numero === (this.currentCompanion + 1) ){
+            companionY -= deltaY;
+            companionX += deltaX;
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        if( numero === (this.currentCompanion + 2) ){
+            companionY -= deltaY;
+            companionX += (deltaX * 2);
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        if( numero === (this.currentCompanion - 1) ){
+            companionY -= deltaY;
+            companionX -= deltaX;
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        if( numero === (this.currentCompanion - 2) ){
+            companionY -= deltaY;
+            companionX -= (deltaX * 2);
+            companionScale = 0.8;
+            companionOpactity = 0.6;
+            companionVisible = true;
+        }
+        return {companionX, companionY, companionScale, companionOpactity, companionVisible}
+    }
+
+    /**
+     * Returns pixel position by on column and row number
+     */
+    private getCompanionPosition(): [number, number] {
+        return [
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 3
+        ];
+    }
+
+    private setUpCompanion(companion: Phaser.Physics.Arcade.Sprite, numero: number){
+
+        const {companionX, companionY, companionScale, companionOpactity, companionVisible} = this.defineSetupCompanion(numero);
+        companion.setBounce(0.2);
+        companion.setCollideWorldBounds(true);
+        companion.setVisible( companionVisible );
+        companion.setScale(companionScale, companionScale);
+        companion.setAlpha(companionOpactity);
+        companion.setX(companionX);
+        companion.setY(companionY);
     }
 }

front/src/Phaser/Map/ITiledMap.ts

@@ -14,7 +14,7 @@ export interface ITiledMap {
      * Map orientation (orthogonal)
      */
     orientation: string;
-    properties: ITiledMapLayerProperty[];
+    properties?: ITiledMapLayerProperty[];
 
     /**
      * Render order (right-down)
@@ -24,6 +24,11 @@ export interface ITiledMap {
     tilewidth: number;
     tilesets: ITiledTileSet[];
     version: number;
+    compressionlevel?: number;
+    infinite?: boolean;
+    nextlayerid?: number;
+    tiledversion?: string;
+    type?: string;
 }
 
 export interface ITiledMapLayerProperty {
@@ -38,19 +43,35 @@ export interface ITiledMapLayerProperty {
     value: boolean
 }*/
 
-export interface ITiledMapLayer {
+export type ITiledMapLayer = ITiledMapGroupLayer | ITiledMapObjectLayer | ITiledMapTileLayer;
+
+export interface ITiledMapGroupLayer {
+    id?: number,
+    name: string;
+    opacity: number;
+    properties?: ITiledMapLayerProperty[];
+
+    type: "group";
+    visible: boolean;
+    x: number;
+    y: number;
+    /**
+     * Layers for group layer
+     */
+    layers: ITiledMapLayer[];
+}
+
+export interface ITiledMapTileLayer {
+    id?: number,
     data: number[]|string;
     height: number;
     name: string;
     opacity: number;
-    properties: ITiledMapLayerProperty[];
+    properties?: ITiledMapLayerProperty[];
-    encoding: string;
+    encoding?: string;
     compression?: string;
 
-    /**
+    type: "tilelayer";
-     * Type of layer (tilelayer, objectgroup)
-     */
-    type: string;
     visible: boolean;
     width: number;
     x: number;
@@ -59,7 +80,28 @@ export interface ITiledMapLayer {
     /**
      * Draw order (topdown (default), index)
      */
-    draworder: string;
+    draworder?: string;
+}
+
+export interface ITiledMapObjectLayer {
+    id?: number,
+    height: number;
+    name: string;
+    opacity: number;
+    properties?: ITiledMapLayerProperty[];
+    encoding?: string;
+    compression?: string;
+
+    type: "objectgroup";
+    visible: boolean;
+    width: number;
+    x: number;
+    y: number;
+
+    /**
+     * Draw order (topdown (default), index)
+     */
+    draworder?: string;
     objects: ITiledMapObject[];
 }
 
@@ -94,6 +136,20 @@ export interface ITiledMapObject {
      * Polyline points
      */
     polyline: {x: number, y: number}[];
+
+    text?: ITiledText
+}
+
+export interface ITiledText {
+    text: string,
+    wrap?: boolean,
+    fontfamily?: string,
+    pixelsize?: number,
+    color?: string,
+    underline?: boolean,
+    italic?: boolean,
+    strikeout?: boolean,
+    halign?: "center"|"right"|"justify"|"left"
 }
 
 export interface ITiledTileSet {

front/src/Phaser/Map/LayersIterator.ts

@@ -0,0 +1,44 @@
+import {ITiledMap, ITiledMapLayer} from "./ITiledMap";
+
+/**
+ * Iterates over the layers of a map, flattening the grouped layers
+ */
+export class LayersIterator implements IterableIterator<ITiledMapLayer> {
+
+    private layers: ITiledMapLayer[] = [];
+    private pointer: number = 0;
+
+    constructor(private map: ITiledMap) {
+        this.initLayersList(map.layers, '');
+    }
+
+    private initLayersList(layers : ITiledMapLayer[], prefix : string) {
+        for (const layer of layers) {
+            if (layer.type === 'group') {
+                this.initLayersList(layer.layers, prefix + layer.name + '/');
+            } else {
+                const layerWithNewName = { ...layer };
+                layerWithNewName.name = prefix+layerWithNewName.name;
+                this.layers.push(layerWithNewName);
+            }
+        }
+    }
+
+    public next(): IteratorResult<ITiledMapLayer> {
+        if (this.pointer < this.layers.length) {
+            return {
+                done: false,
+                value: this.layers[this.pointer++]
+            }
+        } else {
+            return {
+                done: true,
+                value: null
+            }
+        }
+    }
+
+    [Symbol.iterator](): IterableIterator<ITiledMapLayer> {
+        return new LayersIterator(this.map);
+    }
+}

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -1,13 +1,14 @@
 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 Phaser.Scene {
+export class HelpCameraSettingsScene extends DirtyScene {
     private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
     private helpCameraSettingsOpened: boolean = false;
 
@@ -20,16 +21,18 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     create(){
-        localUserStore.setHelpCameraSettingsShown();
         this.createHelpCameraSettings();
     }
 
     private createHelpCameraSettings() : void {
-        const middleX = (window.innerWidth / 3) - (370*0.85);
+        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();
@@ -38,27 +41,30 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
             }
         });
 
-        if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
+        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;
-        let middleY = (window.innerHeight / 3) - (495);
+        try{
-        if(middleY < 0){
-            middleY = 0;
-        }
-        let middleX =  (window.innerWidth / 3) - (370*0.85);
-        if(middleX < 0){
-            middleX = 0;
-        }
             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,
@@ -67,20 +73,26 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
             ease: 'Power3',
             overflow: 'scroll'
         });
+
+        this.dirty = true;
     }
 
     private closeHelpCameraSettingsOpened(): void{
-        const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
+        const middleX = this.getMiddleX();
+        /*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
         helpCameraSettingsInfo.innerText = '';
-        helpCameraSettingsInfo.style.display = 'none';
+        helpCameraSettingsInfo.style.display = 'none';*/
         this.helpCameraSettingsOpened = false;
         this.tweens.add({
             targets: this.helpCameraSettingsElement,
-            y: -400,
+            y: -1000,
+            x: middleX,
             duration: 1000,
             ease: 'Power3',
             overflow: 'scroll'
         });
+
+        this.dirty = true;
     }
 
     private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
@@ -91,5 +103,45 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
         }, 250);
     }
 
+    update(time: number, delta: number): void {
+        this.dirty = false;
+    }
+
+    public onResize(ev: UIEvent): void {
+        super.onResize(ev);
+        const middleX = this.getMiddleX();
+        const middleY = this.getMiddleY();
+        this.tweens.add({
+            targets: this.helpCameraSettingsElement,
+            x: middleX,
+            y: middleY,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    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

@@ -16,7 +16,7 @@ const gameMenuIconKey = 'gameMenuIcon';
 const gameSettingsMenuKey = 'gameSettingsMenu';
 const gameShare = 'gameShare';
 
-const closedSideMenuX = -200;
+const closedSideMenuX = -1000;
 const openedSideMenuX = 0;
 
 /**
@@ -118,7 +118,8 @@ export class MenuScene extends Phaser.Scene {
         this.closeAll();
         this.sideMenuOpened = true;
         this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
-        if (gameManager.getCurrentGameScene(this).connection && gameManager.getCurrentGameScene(this).connection.isAdmin()) {
+        const connection = gameManager.getCurrentGameScene(this).connection;
+        if (connection && connection.isAdmin()) {
             const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement;
             adminSection.hidden = false;
         }
@@ -191,11 +192,11 @@ export class MenuScene extends Phaser.Scene {
             }
         });
 
-        let middleY = (window.innerHeight / 3) - (257);
+        let middleY = this.scale.height / 2 - 392/2;
         if(middleY < 0){
             middleY = 0;
         }
-        let middleX = (window.innerWidth / 3) - 298;
+        let middleX = this.scale.width / 2 - 457/2;
         if(middleX < 0){
             middleX = 0;
         }
@@ -235,11 +236,11 @@ export class MenuScene extends Phaser.Scene {
 
         this.gameShareOpened = true;
 
-        let middleY = (window.innerHeight / 3) - (257);
+        let middleY = this.scale.height / 2 - 85;
         if(middleY < 0){
             middleY = 0;
         }
-        let middleX = (window.innerWidth / 3) - 298;
+        let middleX = this.scale.width / 2 - 200;
         if(middleX < 0){
             middleX = 0;
         }

front/src/Phaser/Menu/ReportMenu.ts

@@ -109,7 +109,7 @@ export class ReportMenu extends Phaser.GameObjects.DOMElement {
             gamePError.style.display = 'block';
             return;
         }
-        gameManager.getCurrentGameScene(this.scene).connection.emitReportPlayerMessage(
+        gameManager.getCurrentGameScene(this.scene).connection?.emitReportPlayerMessage(
             this.userId,
             gameTextArea.value
         );

front/src/Phaser/Reconnecting/ErrorScene.ts

@@ -52,7 +52,7 @@ export class ErrorScene extends Phaser.Scene {
 
         this.subTitleField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, this.subTitle);
 
-        this.messageField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, this.message, {
+        this.messageField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 48, this.message, {
             fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif',
             fontSize: '10px'
         });

front/src/Phaser/Services/HdpiManager.ts

@@ -0,0 +1,105 @@
+import ScaleManager = Phaser.Scale.ScaleManager;
+
+interface Size {
+    width: number;
+    height: number;
+}
+
+export class HdpiManager {
+    private _zoomModifier: number = 1;
+
+    /**
+     *
+     * @param minRecommendedGamePixelsNumber The minimum number of pixels we want to display "by default" to the user
+     * @param absoluteMinPixelNumber The very minimum of game pixels to display. Below, we forbid zooming more
+     */
+    public constructor(private minRecommendedGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
+    }
+
+    /**
+     * Returns the optimal size in "game pixels" based on the screen size in "real pixels".
+     *
+     * Note: the function is returning the optimal size in "game pixels" in the "game" property,
+     * but also recommends resizing the "real" pixel screen size of the canvas.
+     * The proposed new real size is a few pixels bigger than the real size available (if the size is not a multiple of the pixel size) and should overflow.
+     *
+     * @param realPixelScreenSize
+     */
+    public getOptimalGameSize(realPixelScreenSize: Size): { game: Size, real: Size } {
+        const realPixelNumber = realPixelScreenSize.width * realPixelScreenSize.height;
+        // If the screen has not a definition small enough to match the minimum number of pixels we want to display,
+        // let's make the canvas the size of the screen (in real pixels)
+        if (realPixelNumber <= this.minRecommendedGamePixelsNumber) {
+            return {
+                game: realPixelScreenSize,
+                real: realPixelScreenSize
+            };
+        }
+
+        let i = 1;
+
+        while (realPixelNumber > this.minRecommendedGamePixelsNumber * i * i) {
+            i++;
+        }
+
+        // Has the canvas more pixels than the screen? This is forbidden
+        if ((i - 1) * this._zoomModifier < 1) {
+            // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
+            this._zoomModifier = 1 / (i - 1);
+
+            return {
+                game: {
+                    width: realPixelScreenSize.width,
+                    height: realPixelScreenSize.height,
+                },
+                real: {
+                    width: realPixelScreenSize.width,
+                    height: realPixelScreenSize.height,
+                }
+            }
+        }
+
+        const gameWidth = Math.ceil(realPixelScreenSize.width / (i - 1) / this._zoomModifier);
+        const gameHeight = Math.ceil(realPixelScreenSize.height / (i - 1) / this._zoomModifier);
+
+        // Let's ensure we display a minimum of pixels, even if crazily zoomed in.
+        if (gameWidth * gameHeight < this.absoluteMinPixelNumber) {
+            const minGameHeight = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.height / realPixelScreenSize.width);
+            const minGameWidth = Math.sqrt(this.absoluteMinPixelNumber * realPixelScreenSize.width / realPixelScreenSize.height);
+
+            // Let's reset the zoom modifier (WARNING this is a SIDE EFFECT in a getter)
+            this._zoomModifier = realPixelScreenSize.width / minGameWidth / (i - 1);
+
+            return {
+                game: {
+                    width: minGameWidth,
+                    height: minGameHeight,
+                },
+                real: {
+                    width: realPixelScreenSize.width,
+                    height: realPixelScreenSize.height,
+                }
+            }
+
+        }
+
+        return {
+            game: {
+                width: gameWidth,
+                height: gameHeight,
+            },
+            real: {
+                width: Math.ceil(realPixelScreenSize.width / (i - 1)) * (i - 1),
+                height: Math.ceil(realPixelScreenSize.height / (i - 1)) * (i - 1),
+            }
+        }
+    }
+
+    public get zoomModifier(): number {
+        return this._zoomModifier;
+    }
+
+    public set zoomModifier(zoomModifier: number) {
+        this._zoomModifier = zoomModifier;
+    }
+}

front/src/Phaser/Services/WaScaleManager.ts

@@ -0,0 +1,47 @@
+import {HdpiManager} from "./HdpiManager";
+import ScaleManager = Phaser.Scale.ScaleManager;
+import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
+
+
+class WaScaleManager {
+    private hdpiManager: HdpiManager;
+    private scaleManager!: ScaleManager;
+
+    public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
+        this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
+    }
+
+    public setScaleManager(scaleManager: ScaleManager) {
+        this.scaleManager = scaleManager;
+    }
+
+    public applyNewSize() {
+        const {width, height} = coWebsiteManager.getGameSize();
+
+        let devicePixelRatio = 1;
+        if (window.devicePixelRatio) {
+            devicePixelRatio = window.devicePixelRatio;
+        }
+
+        const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio});
+
+        this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio);
+        this.scaleManager.resize(gameSize.width, gameSize.height);
+
+        // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
+        const style = this.scaleManager.canvas.style;
+        style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
+        style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
+    }
+
+    public get zoomModifier(): number {
+        return this.hdpiManager.zoomModifier;
+    }
+
+    public set zoomModifier(zoomModifier: number) {
+        this.hdpiManager.zoomModifier = zoomModifier;
+        this.applyNewSize();
+    }
+}
+
+export const waScaleManager = new WaScaleManager(640*480, 196*196);

front/src/Phaser/UserInput/PinchManager.ts

@@ -0,0 +1,41 @@
+import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {GameScene} from "../Game/GameScene";
+
+export class PinchManager {
+    private scene: Phaser.Scene;
+    private pinch!: any; // eslint-disable-line
+
+    constructor(scene: Phaser.Scene) {
+        this.scene = scene;
+        this.pinch = new Pinch(scene);
+        this.pinch.setDragThreshold(10);
+
+        // The "pinch.scaleFactor" value is very sensitive and causes the screen to flicker.
+        // We are smoothing its value with previous values to prevent the flicking.
+        let smoothPinch = 1;
+
+        this.pinch.on('pinchstart', () => {
+            smoothPinch = 1;
+        });
+
+
+        this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line
+            if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) {
+                // Pinch too fast! Probably a bad measure.
+                return;
+            }
+
+            smoothPinch = 3/5*smoothPinch + 2/5*pinch.scaleFactor;
+            if (this.scene instanceof GameScene) {
+                this.scene.zoomByFactor(smoothPinch);
+            } else {
+                waScaleManager.zoomModifier *= smoothPinch;
+            }
+        });
+    }
+
+    destroy() {
+        this.pinch.removeAllListeners();
+    }
+}

front/src/Phaser/UserInput/UserInputManager.ts

@@ -1,8 +1,7 @@
-import { Direction, IVirtualJoystick } from "../../types";
+import { Direction } from "../../types";
 import {GameScene} from "../Game/GameScene";
-const {
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
-  default: VirtualJoystick,
+import {MobileJoystick} from "../Components/MobileJoystick";
-} = require("phaser3-rex-plugins/plugins/virtualjoystick.js");
 
 interface UserInputManagerDatum {
     keyInstance: Phaser.Input.Keyboard.Key;
@@ -20,6 +19,7 @@ export enum UserInputEvent {
     JoystickMove,
 }
 
+
 //we cannot use a map structure so we have to create a replacment
 export class ActiveEventList {
     private eventMap : Map<UserInputEvent, boolean> = new Map<UserInputEvent, boolean>();
@@ -44,17 +44,24 @@ export class UserInputManager {
     private Scene: GameScene;
     private isInputDisabled : boolean;
 
-    private joystick : IVirtualJoystick;
+    private joystick!: MobileJoystick;
     private joystickEvents = new ActiveEventList();
     private joystickForceThreshold = 60;
     private joystickForceAccuX = 0;
     private joystickForceAccuY = 0;
 
-    constructor(Scene: GameScene, virtualJoystick: IVirtualJoystick) {
+    constructor(Scene: GameScene) {
         this.Scene = Scene;
         this.isInputDisabled = false;
         this.initKeyBoardEvent();
-        this.joystick = virtualJoystick;
+        this.initMouseWheel();
+        if (touchScreenManager.supportTouchScreen) {
+            this.initVirtualJoystick();
+        }
+    }
+
+    initVirtualJoystick() {
+        this.joystick = new MobileJoystick(this.Scene);
         this.joystick.on("update", () => {
             this.joystickForceAccuX = this.joystick.forceX ? this.joystickForceAccuX : 0;
             this.joystickForceAccuY = this.joystick.forceY ? this.joystickForceAccuY : 0;
@@ -105,6 +112,7 @@ export class UserInputManager {
         this.Scene.input.keyboard.removeAllListeners();
     }
 
+    //todo: should we also disable the joystick?
     disableControls(){
         this.Scene.input.keyboard.removeAllKeys();
         this.isInputDisabled = true;
@@ -163,4 +171,14 @@ export class UserInputManager {
     removeSpaceEventListner(callback : Function){
         this.Scene.input.keyboard.removeListener('keyup-SPACE', callback);
     }
+
+    destroy(): void {
+        this.joystick.destroy();
+    }
+
+    private initMouseWheel() {
+        this.Scene.input.on('wheel', (pointer: unknown, gameObjects: unknown, deltaX: number, deltaY: number, deltaZ: number) => {
+            this.Scene.zoomByFactor(1 - deltaY / 53 * 0.1);
+        });
+    }
 }

front/src/Touch/TouchScreenManager.ts

@@ -0,0 +1,16 @@
+
+class TouchScreenManager {
+    
+    readonly supportTouchScreen:boolean;
+    
+    constructor() {
+        this.supportTouchScreen = this.detectTouchscreen();
+    }
+
+    //found here: https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript#4819886
+    detectTouchscreen(): boolean {
+        return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+    }
+}
+
+export const touchScreenManager = new TouchScreenManager();

front/src/WebRtc/LayoutManager.ts

@@ -346,7 +346,7 @@ class LayoutManager {
         userInputManager.addSpaceEventListner(callBack);
     }
 
-    public removeActionButton(id: string, userInputManager: UserInputManager){
+    public removeActionButton(id: string, userInputManager?: UserInputManager){
         //delete previous element
         const previousDiv = this.actionButtonInformation.get(id);
         if(previousDiv){
@@ -354,10 +354,45 @@ class LayoutManager {
             this.actionButtonInformation.delete(id);
         }
         const previousEventCallback = this.actionButtonTrigger.get(id);
-        if(previousEventCallback){
+        if(previousEventCallback && userInputManager){
             userInputManager.removeSpaceEventListner(previousEventCallback);
         }
     }
+
+    public addInformation(id: string, text: string,  callBack?: Function, userInputManager?: UserInputManager){
+        //delete previous element
+        for ( const [key, value] of this.actionButtonInformation ) {
+            this.removeActionButton(key, userInputManager);
+        }
+
+        //create div and text html component
+        const p = document.createElement('p');
+        p.classList.add('action-body');
+        p.innerText = text;
+
+        const div = document.createElement('div');
+        div.classList.add('action');
+        div.classList.add(id);
+        div.id = id;
+        div.appendChild(p);
+
+        this.actionButtonInformation.set(id, div);
+
+        const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
+        mainContainer.appendChild(div);
+        //add trigger action
+        if(callBack){
+            div.onpointerdown = () => {
+                callBack();
+                this.removeActionButton(id, userInputManager);
+            };
+        }
+
+        //remove it after 10 sec
+        setTimeout(() => {
+            this.removeActionButton(id, userInputManager);
+        }, 10000)
+    }
 }
 
 const layoutManager = new LayoutManager();

front/src/WebRtc/MediaManager.ts

@@ -4,6 +4,8 @@ import {discussionManager, SendMessageCallback} from "./DiscussionManager";
 import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
 import {localUserStore} from "../Connexion/LocalUserStore";
 import {UserSimplePeerInterface} from "./SimplePeer";
+import {SoundMeter} from "../Phaser/Components/SoundMeter";
+
 declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 let videoConstraint: boolean|MediaTrackConstraints = {
@@ -26,6 +28,7 @@ export type StartScreenSharingCallback = (media: MediaStream) => void;
 export type StopScreenSharingCallback = (media: MediaStream) => void;
 export type ReportCallback = (message: string) => void;
 export type ShowReportCallBack = (userId: string, userName: string|undefined) => void;
+export type HelpCameraSettingsCallBack = () => void;
 
 // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
 export class MediaManager {
@@ -40,6 +43,7 @@ export class MediaManager {
     microphoneClose: HTMLImageElement;
     microphone: HTMLImageElement;
     webrtcInAudio: HTMLAudioElement;
+    mySoundMeterElement: HTMLDivElement;
     private webrtcOutAudio: HTMLAudioElement;
     constraintsMedia : MediaStreamConstraints = {
         audio: audioConstraint,
@@ -49,6 +53,8 @@ export class MediaManager {
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
+    helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
+    
     private microphoneBtn: HTMLDivElement;
     private cinemaBtn: HTMLDivElement;
     private monitorBtn: HTMLDivElement;
@@ -63,6 +69,12 @@ export class MediaManager {
 
     private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>();
 
+    private userInputManager?: UserInputManager;
+
+    private mySoundMeter?: SoundMeter|null;
+    private soundMeters: Map<string, SoundMeter> = new Map<string, SoundMeter>();
+    private soundMeterElements: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
+
     constructor() {
 
         this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@@ -121,10 +133,16 @@ export class MediaManager {
         this.pingCameraStatus();
 
         this.checkActiveUser(); //todo: desactivated in case of bug
+
+        this.mySoundMeterElement = (HtmlUtils.getElementByIdOrFail('mySoundMeter'));
+        this.mySoundMeterElement.childNodes.forEach((value: ChildNode, index) => {
+            this.mySoundMeterElement.children.item(index)?.classList.remove('active');
+        });
     }
 
-    public setLastUpdateScene(){
+    public updateScene(){
         this.lastUpdateScene = new Date();
+        this.updateSoudMeter();
     }
 
     public blurCamera() {
@@ -225,6 +243,10 @@ export class MediaManager {
         }).catch((err) => {
             console.error(err);
             this.disableCameraStyle();
+
+            layoutManager.addInformation('warning', 'Camera access denied. Click here and check navigators permissions.', () => {
+                this.showHelpCameraSettingsCallBack();
+            }, this.userInputManager);
         });
     }
 
@@ -253,6 +275,10 @@ export class MediaManager {
         }).catch((err) => {
             console.error(err);
             this.disableMicrophoneStyle();
+
+            layoutManager.addInformation('warning', 'Microphone access denied. Click here and check navigators permissions.', () => {
+                this.showHelpCameraSettingsCallBack();
+            }, this.userInputManager);
         });
     }
 
@@ -315,12 +341,21 @@ export class MediaManager {
     }
 
     private enableScreenSharing() {
+        this.getScreenMedia().then((stream) => {
+            this.triggerStartedScreenSharingCallbacks(stream);
             this.monitorClose.style.display = "none";
             this.monitor.style.display = "block";
             this.monitorBtn.classList.add("enabled");
-        this.getScreenMedia().then((stream) => {
+        }, () => {
-            this.triggerStartedScreenSharingCallbacks(stream);
+            this.monitorClose.style.display = "block";
+            this.monitor.style.display = "none";
+            this.monitorBtn.classList.remove("enabled");
+
+            layoutManager.addInformation('warning', 'Screen sharing access denied. Click here and check navigators permissions.', () => {
+                this.showHelpCameraSettingsCallBack();
+            }, this.userInputManager);
         });
+
     }
 
     private disableScreenSharing() {
@@ -397,13 +432,14 @@ export class MediaManager {
             }
         }
 
-        return this.getLocalStream().catch(() => {
+        return this.getLocalStream().catch((err) => {
-            console.info('Error get camera, trying with video option at null');
+            console.info('Error get camera, trying with video option at null =>', err);
             this.disableCameraStyle();
             return this.getLocalStream().then((stream : MediaStream) => {
                 this.hasCamera = false;
                 return stream;
             }).catch((err) => {
+                this.disableMicrophoneStyle();
                 console.info("error get media ", this.constraintsMedia.video, this.constraintsMedia.audio, err);
                 throw err;
             });
@@ -420,6 +456,13 @@ export class MediaManager {
         return navigator.mediaDevices.getUserMedia(this.constraintsMedia).then((stream : MediaStream) => {
             this.localStream = stream;
             this.myCamVideo.srcObject = this.localStream;
+
+            //init sound meter
+            this.mySoundMeter = null;
+            if(this.constraintsMedia.audio){
+                this.mySoundMeter = new SoundMeter();
+                this.mySoundMeter.connectToSource(stream, new AudioContext());
+            }
             return stream;
         }).catch((err: Error) => {
             throw err;
@@ -446,6 +489,7 @@ export class MediaManager {
                 track.stop();
             }
         }
+        this.mySoundMeter?.stop();
     }
 
     setCamera(id: string): Promise<MediaStream> {
@@ -491,6 +535,13 @@ export class MediaManager {
                 </button>
                 <video id="${userId}" autoplay></video>
                 <img src="resources/logos/blockSign.svg" id="blocking-${userId}" class="block-logo">
+                <div id="soundMeter-${userId}" class="sound-progress">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
             </div>
         `;
 
@@ -580,6 +631,12 @@ export class MediaManager {
             throw `Unable to find video for ${userId}`;
         }
         remoteVideo.srcObject = stream;
+
+        //sound metter
+        const soundMeter = new SoundMeter();
+        soundMeter.connectToSource(stream, new AudioContext());
+        this.soundMeters.set(userId, soundMeter);
+        this.soundMeterElements.set(userId, HtmlUtils.getElementByIdOrFail<HTMLImageElement>('soundMeter-'+userId));
     }
     addStreamRemoteScreenSharing(userId: string, stream : MediaStream){
         // In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet
@@ -595,6 +652,10 @@ export class MediaManager {
         layoutManager.remove(userId);
         this.remoteVideo.delete(userId);
 
+        this.soundMeters.get(userId)?.stop();
+        this.soundMeters.delete(userId);
+        this.soundMeterElements.delete(userId);
+
         //permit to remove user in discussion part
         this.removeParticipant(userId);
     }
@@ -712,6 +773,7 @@ export class MediaManager {
     }
 
     public setUserInputManager(userInputManager : UserInputManager){
+        this.userInputManager = userInputManager;
         discussionManager.setUserInputManager(userInputManager);
     }
     //check if user is active
@@ -734,6 +796,57 @@ export class MediaManager {
     public setShowReportModalCallBacks(callback: ShowReportCallBack){
         this.showReportModalCallBacks.add(callback);
     }
+
+    public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack){
+        this.helpCameraSettingsCallBacks.add(callback);
+    }
+
+    private showHelpCameraSettingsCallBack(){
+        for(const callBack of this.helpCameraSettingsCallBacks){
+            callBack();
+        }
+    }
+
+    updateSoudMeter(){
+        try{
+            const volume = parseInt(((this.mySoundMeter ? this.mySoundMeter.getVolume() : 0) / 10).toFixed(0));
+            this.setVolumeSoundMeter(volume, this.mySoundMeterElement);
+            
+            for(const indexUserId of this.soundMeters.keys()){
+                const soundMeter = this.soundMeters.get(indexUserId);
+                const soundMeterElement = this.soundMeterElements.get(indexUserId);
+                if(!soundMeter || !soundMeterElement){
+                    return;
+                }
+                const volumeByUser = parseInt((soundMeter.getVolume() / 10).toFixed(0));
+                this.setVolumeSoundMeter(volumeByUser, soundMeterElement);
+            }
+        }catch(err){
+            //console.error(err);
+        }
+    }
+
+    private setVolumeSoundMeter(volume: number, element: HTMLDivElement){
+        if(volume <= 0 && !element.classList.contains('active')){
+            return;
+        }
+        element.classList.remove('active');
+        if(volume <= 0){
+            return;
+        }
+        element.classList.add('active');
+        element.childNodes.forEach((value: ChildNode, index) => {
+            const elementChildre = element.children.item(index);
+            if(!elementChildre){
+                return;
+            }
+            elementChildre.classList.remove('active');
+            if((index +1) > volume){
+                return;
+            }
+            elementChildre.classList.add('active');
+        });
+    }
 }
 
 export const mediaManager = new MediaManager();

front/src/WebRtc/SimplePeer.ts

@@ -82,15 +82,11 @@ export class SimplePeer {
         });
 
         mediaManager.showGameOverlay();
-        mediaManager.getCamera().then(() => {
+        mediaManager.getCamera().finally(() => {
-
             //receive message start
             this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
                 this.receiveWebrtcStart(message);
             });
-
-        }).catch((err) => {
-            console.error("err", err);
         });
 
         this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => {

front/src/index.ts

@@ -2,7 +2,7 @@ import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import "../dist/resources/style/index.scss";
 
-import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, isMobile} from "./Enum/EnvironmentVariable";
 import {LoginScene} from "./Phaser/Login/LoginScene";
 import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
 import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
@@ -17,7 +17,9 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 import {iframeListener} from "./Api/IframeListener";
-import {discussionManager} from "./WebRtc/DiscussionManager";
+import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobileScene';
+import {HdpiManager} from "./Phaser/Services/HdpiManager";
+import {waScaleManager} from "./Phaser/Services/WaScaleManager";
 import {Game} from "./Phaser/Game/Game";
 
 const {width, height} = coWebsiteManager.getGameSize();
@@ -69,15 +71,31 @@ switch (phaserMode) {
         throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"');
 }
 
+const hdpiManager = new HdpiManager(640*480, 196*196);
+const { game: gameSize, real: realSize } = hdpiManager.getOptimalGameSize({width, height});
 
 const config: GameConfig = {
     type: mode,
     title: "WorkAdventure",
-    width: width / RESOLUTION,
+    scale: {
-    height: height / RESOLUTION,
         parent: "game",
-    scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
+        width: gameSize.width,
-    zoom: RESOLUTION,
+        height: gameSize.height,
+        zoom: realSize.width / gameSize.width,
+        autoRound: true,
+        resizeInterval: 999999999999
+    },
+    scene: [EntryScene,
+        LoginScene,
+        isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
+        SelectCompanionScene,
+        EnableCameraScene,
+        ReconnectingScene,
+        ErrorScene,
+        CustomizeScene,
+        MenuScene,
+        HelpCameraSettingsScene],
+    //resolution: window.devicePixelRatio / 2,
     fps: fps,
     dom: {
         createContainer: true
@@ -109,10 +127,12 @@ const config: GameConfig = {
 //const game = new Phaser.Game(config);
 const game = new Game(config);
 
+waScaleManager.setScaleManager(game.scale);
+
 window.addEventListener('resize', function (event) {
     coWebsiteManager.resetStyle();
-    const {width, height} = coWebsiteManager.getGameSize();
+
-    game.scale.resize(width / RESOLUTION, height / RESOLUTION);
+    waScaleManager.applyNewSize();
 
     // Let's trigger the onResize method of any active scene that is a ResizableScene
     for (const scene of game.scene.getScenes(true)) {
@@ -123,8 +143,7 @@ window.addEventListener('resize', function (event) {
 });
 
 coWebsiteManager.onResize.subscribe(() => {
-    const {width, height} = coWebsiteManager.getGameSize();
+    waScaleManager.applyNewSize();
-    game.scale.resize(width / RESOLUTION, height / RESOLUTION);
 });
 
 iframeListener.init();

front/src/rex-plugins.d.ts

@@ -0,0 +1,12 @@
+
+declare module 'phaser3-rex-plugins/plugins/virtualjoystick.js' {
+    const content: any; // eslint-disable-line
+    export default content;
+}
+declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
+    const content: any; // eslint-disable-line
+    export default content;
+}
+declare module 'phaser3-rex-plugins/plugins/gestures.js' {
+    export const Pinch: any; // eslint-disable-line
+}

front/tests/Phaser/Connexion/LocalUserTest.ts

@@ -19,9 +19,6 @@ describe("isUserNameValid()", () => {
     it("should not validate spaces", () => {
         expect(isUserNameValid(' ')).toBe(false);
     });
-    it("should not validate numbers", () => {
-        expect(isUserNameValid('a12')).toBe(false);
-    });
     it("should not validate special characters", () => {
         expect(isUserNameValid('a&-')).toBe(false);
     });

front/tests/Phaser/Map/LayersIteratorTest.ts

@@ -0,0 +1,147 @@
+import "jasmine";
+import {Room} from "../../../src/Connexion/Room";
+import {LayersIterator} from "../../../src/Phaser/Map/LayersIterator";
+
+describe("Layers iterator", () => {
+    it("should iterate maps with no group", () => {
+        const layersIterator = new LayersIterator({
+            "compressionlevel":-1,
+            "height":2,
+            "infinite":false,
+            "layers":[
+                {
+                    "data":[0, 0, 0, 0],
+                    "height":2,
+                    "id":1,
+                    "name":"Tile Layer 1",
+                    "opacity":1,
+                    "type":"tilelayer",
+                    "visible":true,
+                    "width":2,
+                    "x":0,
+                    "y":0
+                },
+                {
+                    "data":[0, 0, 0, 0],
+                    "height":2,
+                    "id":1,
+                    "name":"Tile Layer 2",
+                    "opacity":1,
+                    "type":"tilelayer",
+                    "visible":true,
+                    "width":2,
+                    "x":0,
+                    "y":0
+                }],
+            "nextlayerid":2,
+            "nextobjectid":1,
+            "orientation":"orthogonal",
+            "renderorder":"right-down",
+            "tiledversion":"2021.03.23",
+            "tileheight":32,
+            "tilesets":[],
+            "tilewidth":32,
+            "type":"map",
+            "version":1.5,
+            "width":2
+        })
+
+        const layers = [];
+        for (const layer of layersIterator) {
+            layers.push(layer.name);
+        }
+        expect(layers).toEqual(['Tile Layer 1', 'Tile Layer 2']);
+    });
+
+    it("should iterate maps with recursive groups", () => {
+        const layersIterator = new LayersIterator({
+            "compressionlevel":-1,
+            "height":2,
+            "infinite":false,
+            "layers":[
+                {
+                    "id":6,
+                    "layers":[
+                        {
+                            "id":5,
+                            "layers":[
+                                {
+                                    "data":[0, 0, 0, 0],
+                                    "height":2,
+                                    "id":10,
+                                    "name":"Tile3",
+                                    "opacity":1,
+                                    "type":"tilelayer",
+                                    "visible":true,
+                                    "width":2,
+                                    "x":0,
+                                    "y":0
+                                },
+                                {
+                                    "data":[0, 0, 0, 0],
+                                    "height":2,
+                                    "id":9,
+                                    "name":"Tile2",
+                                    "opacity":1,
+                                    "type":"tilelayer",
+                                    "visible":true,
+                                    "width":2,
+                                    "x":0,
+                                    "y":0
+                                }],
+                            "name":"Group 3",
+                            "opacity":1,
+                            "type":"group",
+                            "visible":true,
+                            "x":0,
+                            "y":0
+                        },
+                        {
+                            "id":7,
+                            "layers":[
+                                {
+                                    "data":[0, 0, 0, 0],
+                                    "height":2,
+                                    "id":8,
+                                    "name":"Tile1",
+                                    "opacity":1,
+                                    "type":"tilelayer",
+                                    "visible":true,
+                                    "width":2,
+                                    "x":0,
+                                    "y":0
+                                }],
+                            "name":"Group 2",
+                            "opacity":1,
+                            "type":"group",
+                            "visible":true,
+                            "x":0,
+                            "y":0
+                        }],
+                    "name":"Group 1",
+                    "opacity":1,
+                    "type":"group",
+                    "visible":true,
+                    "x":0,
+                    "y":0
+                }],
+            "nextlayerid":11,
+            "nextobjectid":1,
+            "orientation":"orthogonal",
+            "renderorder":"right-down",
+            "tiledversion":"2021.03.23",
+            "tileheight":32,
+            "tilesets":[],
+            "tilewidth":32,
+            "type":"map",
+            "version":1.5,
+            "width":2
+        })
+
+        const layers = [];
+        for (const layer of layersIterator) {
+            layers.push(layer.name);
+        }
+        expect(layers).toEqual(['Group 1/Group 3/Tile3', 'Group 1/Group 3/Tile2', 'Group 1/Group 2/Tile1']);
+    });
+});

front/tests/Phaser/Services/HdpiManagerTest.ts

@@ -0,0 +1,55 @@
+import "jasmine";
+import {HdpiManager} from "../../../src/Phaser/Services/HdpiManager";
+
+describe("Test HdpiManager", () => {
+    it("should match screen size if size is too small.", () => {
+        const hdpiManager = new HdpiManager(640*480, 64*64);
+
+        const result = hdpiManager.getOptimalGameSize({ width: 320, height: 200 });
+        expect(result.game.width).toEqual(320);
+        expect(result.game.height).toEqual(200);
+        expect(result.real.width).toEqual(320);
+        expect(result.real.height).toEqual(200);
+    });
+
+    it("should match multiple just above.", () => {
+        const hdpiManager = new HdpiManager(640*480, 64*64);
+
+        let result = hdpiManager.getOptimalGameSize({ width: 960, height: 600 });
+        expect(result.game.width).toEqual(960);
+        expect(result.game.height).toEqual(600);
+
+        result = hdpiManager.getOptimalGameSize({ width: 640 * 2 + 50, height: 480 * 2 + 50 });
+        expect(result.game.width).toEqual(Math.ceil((640 * 2 + 50) / 2));
+        expect(result.game.height).toEqual((480 * 2 + 50) / 2);
+
+        result = hdpiManager.getOptimalGameSize({ width: 640 * 3 + 50, height: 480 * 3 + 50 });
+        expect(result.game.width).toEqual(Math.ceil((640 * 3 + 50) / 3));
+        expect(result.game.height).toEqual(Math.ceil((480 * 3 + 50) / 3));
+        expect(result.real.width).toEqual(result.game.width * 3);
+        expect(result.real.height).toEqual(result.game.height * 3);
+    });
+
+    it("should not zoom in too much.", () => {
+        const hdpiManager = new HdpiManager(640*480, 64*64);
+
+        hdpiManager.zoomModifier = 11;
+
+        const result = hdpiManager.getOptimalGameSize({ width: 640, height: 640 });
+        expect(result.game.width).toEqual(64);
+        expect(result.game.height).toEqual(64);
+        expect(hdpiManager.zoomModifier).toEqual(10);
+
+    });
+
+    it("should not zoom out too much.", () => {
+        const hdpiManager = new HdpiManager(640*480, 64*64);
+
+        hdpiManager.zoomModifier = 1/10;
+
+        const result = hdpiManager.getOptimalGameSize({ width: 1280, height: 768 });
+        expect(result.game.width).toEqual(1280);
+        expect(result.game.height).toEqual(768);
+        expect(hdpiManager.zoomModifier).toEqual(1);
+    });
+});

front/yarn.lock

@@ -1897,7 +1897,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.2:
+extend@^3.0.1, extend@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -3975,15 +3975,15 @@ quill-delta@^3.6.2:
     extend "^3.0.2"
     fast-diff "1.1.2"
 
-quill@^1.3.7:
+quill@1.3.6:
-  version "1.3.7"
+  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.6.tgz#99f4de1fee85925a0d7d4163b6d8328f23317a4d"
-  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  integrity sha512-K0mvhimWZN6s+9OQ249CH2IEPZ9JmkFuCQeHAOQax3EZ2nDJ3wfGh59mnlQaZV2i7u8eFarx6wAtvQKgShojug==
   dependencies:
     clone "^2.1.1"
     deep-equal "^1.0.1"
     eventemitter3 "^2.0.3"
-    extend "^3.0.2"
+    extend "^3.0.1"
     parchment "^1.1.4"
     quill-delta "^3.6.2"
 

maps/Tuto/tutoV3.json

@@ -24,7 +24,7 @@
                 {
                  "name":"exitUrl",
                  "type":"string",
-                 "value":"@\/tcm\/workadventure\/floor0"
+                 "value":"\/@\/tcm\/workadventure\/wa-village"
                 }],
          "type":"tilelayer",
          "visible":true,
@@ -260,15 +260,15 @@
          "name":"floorLayer",
          "objects":[
                 {
-                 "height":199.667,
+                 "height":140,
                  "id":1,
                  "name":"Tutobubble",
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":245.667,
+                 "width":185,
-                 "x":1170,
+                 "x":1022,
-                 "y":350
+                 "y":308
                 }, 
                 {
                  "height":86.9996666666667,
@@ -277,9 +277,9 @@
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":245.667,
+                 "width":187,
-                 "x":1171,
+                 "x":1019,
-                 "y":412
+                 "y":361
                 }, 
                 {
                  "height":84.6667,
@@ -288,9 +288,9 @@
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":210.667,
+                 "width":184.5,
-                 "x":1030.5,
+                 "x":1023,
-                 "y":318.66665
+                 "y":319
                 }, 
                 {
                  "height":99.6667,
@@ -299,9 +299,9 @@
                  "rotation":0,
                  "type":"",
                  "visible":true,
-                 "width":210.667,
+                 "width":185,
-                 "x":1174,
+                 "x":1021,
-                 "y":400
+                 "y":348
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -355,7 +355,7 @@
          "value":"scriptTuto.js"
         }],
  "renderorder":"right-down",
- "tiledversion":"2021.03.23",
+ "tiledversion":"1.5.0",
  "tileheight":32,
  "tilesets":[
         {