From 28d687e3380ece97ba66f9aef9003f9933cf52a3 Mon Sep 17 00:00:00 2001
From: Piotr Dobrowolski <admin@tastycode.pl>
Date: Sun, 3 Jan 2021 12:45:18 +0100
Subject: [PATCH 01/28] front: implement map sounds

---
 front/dist/index.html                |  58 +++++++++-
 front/dist/resources/style/style.css | 144 +++++++++++++++++++++++-
 front/src/Phaser/Game/GameScene.ts   |  25 +++++
 front/src/WebRtc/AudioManager.ts     | 160 +++++++++++++++++++++++++++
 4 files changed, 385 insertions(+), 2 deletions(-)
 create mode 100644 front/src/WebRtc/AudioManager.ts
diff --git a/front/dist/index.html b/front/dist/index.html
index ea2f517f..9a197822 100644
--- a/front/dist/index.html
+++ b/front/dist/index.html
@@ -39,7 +39,7 @@
         <link rel="stylesheet" href="/resources/style/style.css">
         <title>WorkAdventure</title>
     </head>
-    <body id="body" style="margin: 0">
+    <body id="body" style="margin: 0; background-color: #000">
         <div class="main-container" id="main-container">
             <!-- Create the editor container -->
             <div id="game" class="game">
@@ -81,6 +81,62 @@
                 <img src="/resources/logos/megaphone.svg"/>
             </div>
         </div>
+
+      <div id="audioplayerctrl" class="hidden">
+        <div class="audioplayer">
+          <button type="button" id="audioplayer_mute" class="fa fa-volump-up">
+            <svg
+              width="1em"
+              height="1em"
+              viewBox="0 0 16 16"
+              class="bi bi-volume-up"
+              fill="white"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
+              />
+              <g id="audioplayer_volume_icon_playing">
+                <path
+                  d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
+                />
+                <path
+                  d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
+                />
+                <path
+                  d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
+                />
+              </g>
+            </svg>
+          </button>
+          <div class="audioplayer">
+            <input
+              type="range"
+              id="audioplayer_volume"
+              min="0"
+              max="1"
+              step="0.05"
+              value="1"
+            />
+          </div>
+        </div>
+        <div class="audioplayer">
+          <label
+            id="label-audioplayer_decrease_while_talking"
+            for="audiooplayer_decrease_while_talking"
+            title="decrease background volume by 50% when entering conversations"
+          >
+            autoreduce
+            <input type="checkbox" id="audioplayer_decrease_while_talking" checked />
+          </label>
+          <div id="audioplayer" style="visibility: hidden"></div>
+        </div>
+      </div>
+      <div class="audio-playing">
+        <img src="/resources/logos/megaphone.svg" />
+      </div>
+    </div>
 <!--
     <div id="webRtc" class="webrtc">
             <div id="activeCam" class="activeCam">
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 0d0cf40f..fd81be1b 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -362,6 +362,148 @@ body {
     height: 100%;
 }
 
+.audioplayer:first-child  {
+    display: grid;
+    grid: 2rem / 4rem 10rem;
+}
+
+.audioplayer > button, .audioplayer > div, .audioplayer > label {
+    background-color: rgba(0,0,0,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#audioplayerctrl {
+    position: fixed;
+    top: 0;
+    right: 50%;
+    padding: 0.3rem 0.5rem;
+    color: white;
+    transition: transform 0.5s;
+}
+
+#audioplayer_mute {
+    max-width: 5rem;
+    border: none;
+}
+#audioplayer_mute:focus, #audioplayer_mute:active {
+    outline: none;
+}
+#audioplayer_mute > svg {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+#audioplayer_volume_icon_playing.muted {
+    visibility: hidden;
+    display: none;
+}
+#audioplayerctrl > #audioplayer_volume {
+    width: 100%;
+    background-color: rgba(0,0,0,0.5);
+}
+
+/*
+ * sollte eigentlich in den aspect-ratio teil ..
+ */
+#audioplayerctrl.loading {
+    transform: translateY(-90%);
+}
+#audioplayerctrl.hidden {
+    transform: translateY(-100%);
+}
+
+/*
+ * Style Input Range
+ * https://www.cssportal.com/style-input-range/
+ */
+input[type=range] {
+    height: 28px;
+    -webkit-appearance: none;
+    margin: 10px 0;
+    width: 100%;
+    background-color: transparent;
+}
+input[type=range]:focus {
+    outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 5px;
+    animate: 0.2s;
+    box-shadow: 1px 1px 1px #000000;
+    background: #FFFFFF;
+    border-radius: 5px;
+    border: 1px solid #000000;
+}
+input[type=range]::-webkit-slider-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 1px solid #000000;
+    height: 20px;
+    width: 10px;
+    border-radius: 5px;
+    background: #FFFFFF;
+    -webkit-appearance: none;
+    margin-top: -8.5px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #FFFFFF;
+}
+input[type=range]::-moz-range-track {
+    width: 100%;
+    height: 5px;
+    animate: 0.2s;
+    box-shadow: 1px 1px 1px #000000;
+    background: #FFFFFF;
+    border-radius: 5px;
+    border: 1px solid #000000;
+}
+input[type=range]::-moz-range-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 1px solid #000000;
+    height: 20px;
+    width: 10px;
+    border-radius: 5px;
+    background: #FFFFFF;
+}
+input[type=range]::-ms-track {
+    width: 100%;
+    height: 5px;
+    animate: 0.2s;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+    background: #FFFFFF;
+    border: 1px solid #000000;
+    border-radius: 10px;
+    box-shadow: 1px 1px 1px #000000;
+}
+input[type=range]::-ms-fill-upper {
+    background: #FFFFFF;
+    border: 1px solid #000000;
+    border-radius: 10px;
+    box-shadow: 1px 1px 1px #000000;
+}
+input[type=range]::-ms-thumb {
+    margin-top: 1px;
+    box-shadow: 1px 1px 1px #000000;
+    border: 1px solid #000000;
+    height: 20px;
+    width: 10px;
+    border-radius: 5px;
+    background: #FFFFFF;
+}
+input[type=range]:focus::-ms-fill-lower {
+    background: #FFFFFF;
+}
+input[type=range]:focus::-ms-fill-upper {
+    background: #FFFFFF;
+}
+
+
 .game-overlay {
     display: none;
     position: absolute;
@@ -992,4 +1134,4 @@ div.action p.action-body{
     0% {bottom: 40px;}
     50% {bottom: 30px;}
     100% {bottom: 40px;}
-}
\ No newline at end of file
+}
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 67380309..a8206328 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -60,6 +60,7 @@ import {ResizableScene} from "../Login/ResizableScene";
 import {Room} from "../../Connexion/Room";
 import {jitsiFactory} from "../../WebRtc/JitsiFactory";
 import {urlManager} from "../../Url/UrlManager";
+import {audioManager} from "../../WebRtc/AudioManager";
 import {PresentationModeIcon} from "../Components/PresentationModeIcon";
 import {ChatModeIcon} from "../Components/ChatModeIcon";
 import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
@@ -499,11 +500,13 @@ export class GameScene extends ResizableScene implements CenterListener {
             });
 
             this.connection.onGroupUpdatedOrCreated((groupPositionMessage: GroupCreatedUpdatedMessageInterface) => {
+                audioManager.decreaseVolume();
                 this.shareGroupPosition(groupPositionMessage);
                 this.openChatIcon.setVisible(true);
             })
 
             this.connection.onGroupDeleted((groupId: number) => {
+                audioManager.restoreVolume();
                 try {
                     this.deleteGroup(groupId);
                     this.openChatIcon.setVisible(false);
@@ -591,6 +594,20 @@ export class GameScene extends ResizableScene implements CenterListener {
         });
     }
 
+    private playAudio(url: string|number|boolean|undefined, loop=false): void {
+        if (url === undefined) {
+            audioManager.unloadAudio();
+        } else {
+            const mapDirUrl = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/'));
+            const realAudioPath = mapDirUrl + '/' + url;
+            audioManager.loadAudio(realAudioPath);
+
+            if (loop) {
+                audioManager.loop();
+            }
+        }
+    }
+
     private triggerOnMapLayerPropertyChange(){
         this.gameMap.onPropertyChange('exitSceneUrl', (newValue, oldValue) => {
             if (newValue) this.onMapExit(newValue as string);
@@ -651,6 +668,14 @@ export class GameScene extends ResizableScene implements CenterListener {
                 this.connection.setSilent(true);
             }
         });
+        this.gameMap.onPropertyChange('playAudio', (newValue, oldValue) => {
+            this.playAudio(newValue);
+        });
+
+        this.gameMap.onPropertyChange('playAudioLoop', (newValue, oldValue) => {
+            this.playAudio(newValue, true);
+        });
+
     }
 
     private onMapExit(exitKey: string) {
diff --git a/front/src/WebRtc/AudioManager.ts b/front/src/WebRtc/AudioManager.ts
new file mode 100644
index 00000000..8ae3a9c0
--- /dev/null
+++ b/front/src/WebRtc/AudioManager.ts
@@ -0,0 +1,160 @@
+import {HtmlUtils} from "./HtmlUtils";
+import {isUndefined} from "generic-type-guard";
+
+enum audioStates {
+    closed = 0,
+    loading = 1,
+    playing = 2
+}
+
+const audioPlayerDivId = "audioplayer";
+const audioPlayerCtrlId = "audioplayerctrl";
+const animationTime = 500;
+
+class AudioManager {
+    private opened = audioStates.closed;
+
+    private audioPlayerDiv: HTMLDivElement;
+    private audioPlayerCtrl: HTMLDivElement;
+    private audioPlayerElem: HTMLAudioElement | undefined;
+
+    private volume = 1;
+    private muted = false;
+    private decreaseWhileTalking = true;
+    private volumeReduced = false;
+
+    constructor() {
+        this.audioPlayerDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerDivId);
+        this.audioPlayerCtrl = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(audioPlayerCtrlId);
+
+        const storedVolume = localStorage.getItem('volume')
+        if (storedVolume === null) {
+            this.setVolume(1);
+        } else {
+            this.volume = parseFloat(storedVolume);
+            HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume').value = storedVolume;
+        }
+
+        HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume').value = '' + this.volume;
+    }
+
+    private close(): void {
+        this.audioPlayerCtrl.classList.remove('loading');
+        this.audioPlayerCtrl.classList.add('hidden');
+        this.opened = audioStates.closed;
+    }
+
+    private load(): void {
+        this.audioPlayerCtrl.classList.remove('hidden');
+        this.audioPlayerCtrl.classList.add('loading');
+        this.opened = audioStates.loading;
+    }
+
+    private open(): void {
+        this.audioPlayerCtrl.classList.remove('hidden', 'loading');
+        this.opened = audioStates.playing;
+    }
+
+    private changeVolume(talking = false): void {
+        if (!isUndefined(this.audioPlayerElem)) {
+            this.audioPlayerElem.volume = this.naturalVolume(talking && this.decreaseWhileTalking);
+            this.audioPlayerElem.muted = this.muted;
+        }
+    }
+
+    private naturalVolume(makeSofter: boolean = false): number {
+        const volume = this.volume
+        const retVol = makeSofter && !this.volumeReduced ? Math.pow(volume * 0.5, 3) : volume
+        this.volumeReduced = makeSofter
+        return retVol;
+    }
+
+    private setVolume(volume: number): void {
+        this.volume = volume;
+        localStorage.setItem('volume', '' + volume);
+    }
+
+
+    public loadAudio(url: string): void {
+        this.load();
+
+        /* Solution 1, remove whole audio player */
+        this.audioPlayerDiv.innerHTML = ''; // necessary, if switching from one audio context to another! (else both streams would play simultaneously)
+
+        this.audioPlayerElem = document.createElement('audio');
+        this.audioPlayerElem.id = 'audioplayerelem';
+        this.audioPlayerElem.controls = false;
+        this.audioPlayerElem.preload = 'none';
+
+        const srcElem = document.createElement('source');
+        srcElem.type = "audio/mp3";
+        srcElem.src = url;
+
+        this.audioPlayerElem.append(srcElem);
+
+        this.audioPlayerDiv.append(this.audioPlayerElem);
+        this.changeVolume();
+        this.audioPlayerElem.play();
+
+        const muteElem = HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_mute');
+        muteElem.onclick = (ev: Event)=> {
+            this.muted = !this.muted;
+            this.changeVolume();
+
+            if (this.muted) {
+                HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume_icon_playing').classList.add('muted');
+            } else {
+                HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume_icon_playing').classList.remove('muted');
+            }
+        }
+
+        const volumeElem = HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_volume');
+        volumeElem.oninput = (ev: Event)=> {
+            this.setVolume(parseFloat((<HTMLInputElement>ev.currentTarget).value));
+            this.changeVolume();
+
+            (<HTMLInputElement>ev.currentTarget).blur();
+        }
+
+        const decreaseElem = HtmlUtils.getElementByIdOrFail<HTMLInputElement>('audioplayer_decrease_while_talking');
+        decreaseElem.oninput = (ev: Event)=> {
+            this.decreaseWhileTalking = (<HTMLInputElement>ev.currentTarget).checked;
+            this.changeVolume();
+        }
+
+        this.open();
+    }
+
+    public loop(): void {
+        if (this.audioPlayerElem !== undefined) {
+            this.audioPlayerElem.loop = true;
+        }
+    }
+
+    public unloadAudio(): void {
+        try {
+            const audioElem = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audioplayerelem');
+            this.volume = audioElem.volume;
+            this.muted = audioElem.muted;
+            audioElem.pause();
+            audioElem.loop = false;
+            audioElem.src = "";
+            audioElem.innerHTML = "";
+            audioElem.load();
+        } catch (e) {
+            console.log('No audio element loaded to unload');
+        }
+
+        this.close();
+    }
+
+    public decreaseVolume(): void {
+        this.changeVolume(true);
+    }
+
+    public restoreVolume(): void {
+        this.changeVolume(false);
+    }
+}
+
+export const audioManager = new AudioManager();

From ac92cbc8f7c4c166f63c284abeb116167554b2d4 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Mon, 4 Jan 2021 17:13:41 +0100
Subject: [PATCH 02/28] Crate share menu and fix menu design

---
 front/dist/resources/html/gameMenuIcon.html |   5 +-
 front/dist/resources/html/gameShare.html    | 106 ++++++++++++++++++++
 front/src/Phaser/Menu/MenuScene.ts          |  83 +++++++++++++--
 3 files changed, 184 insertions(+), 10 deletions(-)
 create mode 100644 front/dist/resources/html/gameShare.html

diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html
index 75a52ac7..078ce281 100644
--- a/front/dist/resources/html/gameMenuIcon.html
+++ b/front/dist/resources/html/gameMenuIcon.html
@@ -11,11 +11,12 @@
         color: white;
         border-radius: 7px;
         height: 28px;
-        width: 28px;
+        width: 34px;
     }
     #menuIcon button img{
         width: 14px;
-        padding-top: 4px;
+        padding-top: 3px;
+        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
     #menuIcon section {
         margin: 10px;
diff --git a/front/dist/resources/html/gameShare.html b/front/dist/resources/html/gameShare.html
new file mode 100644
index 00000000..4e487328
--- /dev/null
+++ b/front/dist/resources/html/gameShare.html
@@ -0,0 +1,106 @@
+<style>
+    *{
+        font-family: 'Open Sans', sans-serif;
+        cursor: url('/resources/logos/cursor_normal.png'), auto;
+    }
+    * a, button, input{
+        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    }
+    #gameShare {
+        background: #eceeee;
+        border: 1px solid #42464b;
+        border-radius: 6px;
+        margin: 20px auto 0;
+        width: 298px;
+        height: 150px;
+    }
+    #gameShare .cautiousText {
+        font-size: 50%;
+    }
+    #gameShare 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;
+    }
+    #gameShare 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%;
+    }
+    #gameShare section {
+        margin: 10px;
+    }
+    #gameShare section.action{
+        text-align: center;
+        margin: 0;
+    }
+    #gameShare button {
+        margin-top: 10px;
+        background-color: black;
+        color: white;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 60px;
+    }
+    #gameShare button#gameShareFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    #gameShare section a{
+        text-align: center;
+        font-size: 12px;
+        margin: 0 6px;
+        color: black;
+    }
+    #gameShare section h6,
+    #gameShare section h5{
+        margin: 1px;
+    }
+    #gameShare section.text-center{
+        text-align: center;
+    }
+    #gameShare section p{
+        font-size: 8px;
+        margin: 0px 70px;
+    }
+    #gameShare section p.err{
+        color: red;
+        display: none;
+    }
+    #gameShare section p.info{
+        display: none;
+    }
+    #gameShare section input#gameShareLink{
+        background-color: #a1a3a3;
+    }
+</style>
+
+<form id="gameShare" hidden>
+    <section class="text-center">
+        <h5>Share this link !</h5>
+        <p class="info" id="gameShareInfo"></p>
+    </section>
+    <section>
+        <h6>Link</h6>
+        <input type="text" name="email" id="gameShareLink" readonly>
+    </section>
+    <section class="action">
+        <button type="submit" id="gameShareFormSubmit">Copy</button>
+        <button type="submit" id="gameShareFormCancel">Close</button>
+    </section>
+</form>
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index e0817d39..3b4c7318 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@@ -9,6 +9,7 @@ export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
 const gameMenuIconKey = 'gameMenuIcon';
 const gameSettingsMenuKey = 'gameSettingsMenu';
+const gameShare = 'gameShare';
 
 const closedSideMenuX = -200;
 const openedSideMenuX = 0;
@@ -19,8 +20,10 @@ const openedSideMenuX = 0;
 export class MenuScene extends Phaser.Scene {
     private menuElement!: Phaser.GameObjects.DOMElement;
     private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
+    private gameShareElement!: Phaser.GameObjects.DOMElement;
     private sideMenuOpened = false;
     private settingsMenuOpened = false;
+    private gameShareOpened = false;
     private gameQualityValue: number;
     private videoQualityValue: number;
     private menuButton!: Phaser.GameObjects.DOMElement;
@@ -36,6 +39,7 @@ export class MenuScene extends Phaser.Scene {
         this.load.html(gameMenuKey, 'resources/html/gameMenu.html');
         this.load.html(gameMenuIconKey, 'resources/html/gameMenuIcon.html');
         this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
+        this.load.html(gameShare, 'resources/html/gameShare.html');
     }
 
     create() {
@@ -47,6 +51,19 @@ export class MenuScene extends Phaser.Scene {
         this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
         this.revealMenusAfterInit(this.gameQualityMenuElement, 'gameQuality');
 
+
+        this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
+        this.revealMenusAfterInit(this.gameShareElement, gameShare);
+        this.gameShareElement.addListener('click');
+        this.gameShareElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'gameShareFormSubmit') {
+                this.copyLink();
+            }else if((event?.target as HTMLInputElement).id === 'gameShareFormCancel') {
+                this.closeGameShare();
+            }
+        });
+
         this.input.keyboard.on('keyup-TAB', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
@@ -74,6 +91,7 @@ export class MenuScene extends Phaser.Scene {
 
     openSideMenu() {
         if (this.sideMenuOpened) return;
+        this.closeAll();
         this.sideMenuOpened = true;
         this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
         if (gameManager.getCurrentGameScene(this).connection && gameManager.getCurrentGameScene(this).connection.isAdmin()) {
@@ -91,8 +109,7 @@ export class MenuScene extends Phaser.Scene {
     private closeSideMenu(): void {
         if (!this.sideMenuOpened) return;
         this.sideMenuOpened = false;
-        this.closeGameQualityMenu()
-        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
+        this.closeAll();
         gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole();
         this.tweens.add({
             targets: this.menuElement,
@@ -102,13 +119,13 @@ export class MenuScene extends Phaser.Scene {
         });
     }
 
-
-
     private openGameSettingsMenu(): void {
         if (this.settingsMenuOpened) {
-            this.closeGameQualityMenu();
             return;
         }
+        //close all
+        this.closeAll();
+
         this.settingsMenuOpened = true;
 
         const gameQualitySelect = this.gameQualityMenuElement.getChildByID('select-game-quality') as HTMLInputElement;
@@ -159,6 +176,48 @@ export class MenuScene extends Phaser.Scene {
     }
 
 
+    private openGameShare(): void{
+        if (this.gameShareOpened) {
+            this.closeGameShare();
+            return;
+        }
+        //close all
+        this.closeAll();
+
+        const gameShareLink = this.gameShareElement.getChildByID('gameShareLink') as HTMLInputElement;
+        gameShareLink.value = location.toString();
+
+        this.gameShareOpened = true;
+
+        let middleY = (window.innerHeight / 3) - (257);
+        if(middleY < 0){
+            middleY = 0;
+        }
+        let middleX = (window.innerWidth / 3) - 298;
+        if(middleX < 0){
+            middleX = 0;
+        }
+        this.tweens.add({
+            targets: this.gameShareElement,
+            y: middleY,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    private closeGameShare(): void{
+        const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
+        gameShareInfo.innerText = '';
+        gameShareInfo.style.display = 'none';
+        this.gameShareOpened = false;
+        this.tweens.add({
+            targets: this.gameShareElement,
+            y: -400,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
 
     private onMenuClick(event:MouseEvent) {
         event.preventDefault();
@@ -179,7 +238,7 @@ export class MenuScene extends Phaser.Scene {
                 this.closeSideMenu();
                 break;
             case 'shareButton':
-                this.shareUrl();
+                this.openGameShare();
                 break;
             case 'editGameSettingsButton':
                 this.openGameSettingsMenu();
@@ -190,9 +249,11 @@ export class MenuScene extends Phaser.Scene {
         }
     }
 
-    private async shareUrl() {
+    private async copyLink() {
         await navigator.clipboard.writeText(location.toString());
-        alert('URL is copied to your clipboard!');
+        const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
+        gameShareInfo.innerText = 'Link copied, you can share it now!';
+        gameShareInfo.style.display = 'block';
     }
 
     private saveSetting(valueGame: number, valueVideo: number){
@@ -213,4 +274,10 @@ export class MenuScene extends Phaser.Scene {
         const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
         window.open(sparkHost, '_blank');
     }
+
+    private closeAll(){
+        this.closeGameQualityMenu();
+        this.closeGameShare();
+        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
+    }
 }

From 4be009d5a11baed960c9eb2d5e12798ef44fca1c Mon Sep 17 00:00:00 2001
From: Mewp <git@mewp.pl>
Date: Mon, 4 Jan 2021 18:23:33 +0100
Subject: [PATCH 03/28] Add a PUSHER_HTTP_PORT configuration variable.

Some deployments might not be based on docker, and not on separate
hosts. In such cases, it would be useful to be able to configure the
port pusher listens on.
---
 pusher/server.ts                       | 3 ++-
 pusher/src/Enum/EnvironmentVariable.ts | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/pusher/server.ts b/pusher/server.ts
index cb4a7604..40810d98 100644
--- a/pusher/server.ts
+++ b/pusher/server.ts
@@ -1,3 +1,4 @@
 // lib/server.ts
 import App from "./src/App";
-App.listen(8080, () => console.log(`WorkAdventure starting on port 8080!`))
+import { PUSHER_HTTP_PORT } from "./src/Enum/EnvironmentVariable";
+App.listen(PUSHER_HTTP_PORT, () => console.log(`WorkAdventure starting on port ${PUSHER_HTTP_PORT}!`))
diff --git a/pusher/src/Enum/EnvironmentVariable.ts b/pusher/src/Enum/EnvironmentVariable.ts
index 62ebccc1..17f80f9c 100644
--- a/pusher/src/Enum/EnvironmentVariable.ts
+++ b/pusher/src/Enum/EnvironmentVariable.ts
@@ -11,6 +11,7 @@ const CPU_OVERHEAT_THRESHOLD = Number(process.env.CPU_OVERHEAT_THRESHOLD) || 80;
 const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const JITSI_ISS = process.env.JITSI_ISS || '';
 const SECRET_JITSI_KEY = process.env.SECRET_JITSI_KEY || '';
+const PUSHER_HTTP_PORT = parseInt(process.env.PUSHER_HTTP_PORT || '8080') || 8080
 export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 30; // maximum time (in second) without activity before a socket is closed
 
 export {
@@ -26,5 +27,6 @@ export {
     CPU_OVERHEAT_THRESHOLD,
     JITSI_URL,
     JITSI_ISS,
-    SECRET_JITSI_KEY
+    SECRET_JITSI_KEY,
+    PUSHER_HTTP_PORT
 }

From 6caa0e5b62dda41c2d9ba0e969c7cc35fd498379 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Tue, 5 Jan 2021 17:08:33 +0100
Subject: [PATCH 04/28] HOTFIX: the map property exitUrl now accept relative
 links that are deep enough to rewrite the base url

---
 front/src/Connexion/Room.ts         |  8 ++++++--
 front/tests/Phaser/Game/RoomTest.ts | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/front/src/Connexion/Room.ts b/front/src/Connexion/Room.ts
index 5cd26045..d9bfe905 100644
--- a/front/src/Connexion/Room.ts
+++ b/front/src/Connexion/Room.ts
@@ -30,8 +30,12 @@ export class Room {
         let roomId = '';
         let hash = '';
         if (!identifier.startsWith('/_/') && !identifier.startsWith('/@/')) { //relative file link
-            const absoluteExitSceneUrl = new URL(identifier, baseUrl);
-            roomId = '_/'+currentInstance+'/'+absoluteExitSceneUrl.hostname + absoluteExitSceneUrl.pathname; //in case of a relative url, we need to create a public roomId
+            //Relative identifier can be deep enough to rewrite the base domain, so we cannot use the variable 'baseUrl' as the actual base url for the URL objects.
+            //We instead use 'workadventure' as a dummy base value.
+            const baseUrlObject = new URL(baseUrl);
+            const absoluteExitSceneUrl = new URL(identifier, 'http://workadventure/_/'+currentInstance+'/'+baseUrlObject.hostname+baseUrlObject.pathname);
+            roomId = absoluteExitSceneUrl.pathname; //in case of a relative url, we need to create a public roomId
+            roomId = roomId.substring(1); //remove the leading slash
             hash = absoluteExitSceneUrl.hash;
             hash = hash.substring(1); //remove the leading diese
         } else { //absolute room Id
diff --git a/front/tests/Phaser/Game/RoomTest.ts b/front/tests/Phaser/Game/RoomTest.ts
index 40218d53..80624d64 100644
--- a/front/tests/Phaser/Game/RoomTest.ts
+++ b/front/tests/Phaser/Game/RoomTest.ts
@@ -34,6 +34,22 @@ describe("Room getIdFromIdentifier()", () => {
         expect(roomId).toEqual('_/global/maps.workadventu.re/floor1/Floor1.json');
         expect(hash).toEqual('');
     });
+    it("should work with a relative file link that rewrite the map domain", () => {
+        const {roomId, hash} = Room.getIdFromIdentifier('../../maps.workadventure.localhost/Floor1/floor1.json', 'https://maps.workadventu.re/floor0/Floor0.json', 'global');
+        expect(roomId).toEqual('_/global/maps.workadventure.localhost/Floor1/floor1.json');
+        expect(hash).toEqual('');
+    });
+    it("should work with a relative file link that rewrite the map instance", () => {
+        const {roomId, hash} = Room.getIdFromIdentifier('../../../notglobal/maps.workadventu.re/Floor1/floor1.json', 'https://maps.workadventu.re/floor0/Floor0.json', 'global');
+        expect(roomId).toEqual('_/notglobal/maps.workadventu.re/Floor1/floor1.json');
+        expect(hash).toEqual('');
+    });
+    it("should work with a relative file link that change the map type", () => {
+        const {roomId, hash} = Room.getIdFromIdentifier('../../../../@/tcm/is/great', 'https://maps.workadventu.re/floor0/Floor0.json', 'global');
+        expect(roomId).toEqual('@/tcm/is/great');
+        expect(hash).toEqual('');
+    });
+    
     it("should work with a relative file link and a hash as parameters", () => {
         const {roomId, hash} = Room.getIdFromIdentifier('./test2.json#start', 'https://maps.workadventu.re/test.json', 'global');
         expect(roomId).toEqual('_/global/maps.workadventu.re/test2.json');

From c7ed0bf8bb19c4771579dd70a3d55ba15e6f8596 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 5 Jan 2021 23:50:25 +0000
Subject: [PATCH 05/28] Bump axios from 0.20.0 to 0.21.1 in /front

Bumps [axios](https://github.com/axios/axios) from 0.20.0 to 0.21.1.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v0.21.1/CHANGELOG.md)
- [Commits](https://github.com/axios/axios/compare/v0.20.0...v0.21.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 front/package.json | 2 +-
 front/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/front/package.json b/front/package.json
index 712eb5dc..09f27ec5 100644
--- a/front/package.json
+++ b/front/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "@types/simple-peer": "^9.6.0",
     "@types/socket.io-client": "^1.4.32",
-    "axios": "^0.20.0",
+    "axios": "^0.21.1",
     "generic-type-guard": "^3.2.0",
     "google-protobuf": "^3.13.0",
     "phaser": "^3.22.0",
diff --git a/front/yarn.lock b/front/yarn.lock
index acad51b8..02b6052b 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -563,10 +563,10 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-axios@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
-  integrity sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
   dependencies:
     follow-redirects "^1.10.0"
 

From eb56e05e1d99696daf103d1f0008da6e06993a1f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 6 Jan 2021 08:19:02 +0000
Subject: [PATCH 06/28] Bump systeminformation from 4.30.5 to 4.31.1 in /back

Bumps [systeminformation](https://github.com/sebhildebrandt/systeminformation) from 4.30.5 to 4.31.1.
- [Release notes](https://github.com/sebhildebrandt/systeminformation/releases)
- [Changelog](https://github.com/sebhildebrandt/systeminformation/blob/master/CHANGELOG.md)
- [Commits](https://github.com/sebhildebrandt/systeminformation/compare/v4.30.5...v4.31.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 back/package.json | 2 +-
 back/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/back/package.json b/back/package.json
index de2a5419..7e8026ba 100644
--- a/back/package.json
+++ b/back/package.json
@@ -52,7 +52,7 @@
     "multer": "^1.4.2",
     "prom-client": "^12.0.0",
     "query-string": "^6.13.3",
-    "systeminformation": "^4.30.5",
+    "systeminformation": "^4.31.1",
     "ts-node-dev": "^1.0.0-pre.44",
     "typescript": "^3.8.3",
     "uWebSockets.js": "uNetworking/uWebSockets.js#v18.5.0",
diff --git a/back/yarn.lock b/back/yarn.lock
index 4824feeb..f88b1675 100644
--- a/back/yarn.lock
+++ b/back/yarn.lock
@@ -2723,10 +2723,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-systeminformation@^4.30.5:
-  version "4.30.5"
-  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.30.5.tgz#2219c305c8be56a2cfa527a5519c45bc81d4916c"
-  integrity sha512-aYWs8yttl8ePpr6VOQ/Ak8cznuc9L/NQODVhbOKhInX73ZMLvV2BS86Mzr7LLfmUteVFR36CTDNQgiJgRqq+SQ==
+systeminformation@^4.31.1:
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.31.1.tgz#2e02c26987494d4b6a4d2d83138724593bc98d50"
+  integrity sha512-dVCDWNMN8ncMZo5vbMCA5dpAdMgzafK2ucuJy5LFmGtp1cG6farnPg8QNvoOSky9SkFoEX1Aw0XhcOFV6TnLYA==
 
 table@^5.2.3:
   version "5.4.6"

From 3e0b85701cf6539f8e8b3d9feebbc7116e03e488 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 6 Jan 2021 10:33:33 +0000
Subject: [PATCH 07/28] Bump axios from 0.20.0 to 0.21.1 in /pusher

Bumps [axios](https://github.com/axios/axios) from 0.20.0 to 0.21.1.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v0.21.1/CHANGELOG.md)
- [Commits](https://github.com/axios/axios/compare/v0.20.0...v0.21.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 pusher/package.json | 2 +-
 pusher/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/pusher/package.json b/pusher/package.json
index de2a5419..03fd761d 100644
--- a/pusher/package.json
+++ b/pusher/package.json
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/thecodingmachine/workadventure#readme",
   "dependencies": {
-    "axios": "^0.20.0",
+    "axios": "^0.21.1",
     "body-parser": "^1.19.0",
     "busboy": "^0.3.1",
     "circular-json": "^0.5.9",
diff --git a/pusher/yarn.lock b/pusher/yarn.lock
index 4824feeb..f7de8093 100644
--- a/pusher/yarn.lock
+++ b/pusher/yarn.lock
@@ -335,10 +335,10 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-axios@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
-  integrity sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
   dependencies:
     follow-redirects "^1.10.0"
 

From 438469ae246a2873b841c7f02685675d37f9be2b Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 6 Jan 2021 12:20:02 +0100
Subject: [PATCH 08/28] Verify URL in message

---
 front/src/WebRtc/DiscussionManager.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 583b1384..83dd06a3 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -141,6 +141,15 @@ export class DiscussionManager {
         this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`;
     }
 
+    private urlify(text: string) {
+        let urlRegex = /(https?:\/\/[^\s]+)/g;
+        return text.replace(urlRegex, (url: string) => {
+            return '<a href="' + url + '" target="_blank">' + url + '</a>';
+        })
+        // or alternatively
+        // return text.replace(urlRegex, '<a href="$1">$1</a>')
+    }
+
     public addMessage(name: string, message: string, isMe: boolean = false) {
         const divMessage: HTMLDivElement = document.createElement('div');
         divMessage.classList.add('message');
@@ -160,7 +169,7 @@ export class DiscussionManager {
         divMessage.appendChild(pMessage);
 
         const userMessage: HTMLParagraphElement = document.createElement('p');
-        userMessage.innerText = message;
+        userMessage.innerText = this.urlify(message);
         userMessage.classList.add('body');
         divMessage.appendChild(userMessage);
 

From 4397ff7712a941f57c355adddbe6a891490c3f5d Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 6 Jan 2021 13:36:18 +0100
Subject: [PATCH 09/28] Update style and focus keyboard

---
 front/dist/resources/style/style.css  |  5 +++++
 front/src/WebRtc/DiscussionManager.ts | 18 +++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index fd81be1b..2e2c6c10 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -1072,17 +1072,22 @@ div.modal-report-user{
 }
 
 .discussion .messages .message p.body{
+    color: white;
     font-size: 16px;
     overflow: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
 }
+.discussion .messages .message p.a{
+    color: white;
+}
 
 .discussion .send-message{
     position: absolute;
     bottom: 45px;
     width: 220px;
     height: 26px;
+    margin-bottom: 10px;
 }
 
 .discussion .send-message input{
diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 83dd06a3..5571bcd6 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -59,6 +59,16 @@ export class DiscussionManager {
         const sendDivMessage: HTMLDivElement = document.createElement('div');
         sendDivMessage.classList.add('send-message');
         const inputMessage: HTMLInputElement = document.createElement('input');
+        inputMessage.onfocus = () => {
+            if(this.userInputManager) {
+                this.userInputManager.clearAllInputKeyboard();
+            }
+        }
+        inputMessage.onblur = () => {
+            if(this.userInputManager) {
+                this.userInputManager.initKeyBoardEvent();
+            }
+        }
         inputMessage.type = "text";
         inputMessage.addEventListener('keyup', (event: KeyboardEvent) => {
             if (event.key === 'Enter') {
@@ -169,7 +179,7 @@ export class DiscussionManager {
         divMessage.appendChild(pMessage);
 
         const userMessage: HTMLParagraphElement = document.createElement('p');
-        userMessage.innerText = this.urlify(message);
+        userMessage.innerHTML = this.urlify(message);
         userMessage.classList.add('body');
         divMessage.appendChild(userMessage);
 
@@ -197,17 +207,11 @@ export class DiscussionManager {
 
     private showDiscussion(){
         this.activeDiscussion = true;
-        if(this.userInputManager) {
-            this.userInputManager.clearAllInputKeyboard();
-        }
         this.divDiscuss?.classList.add('active');
     }
 
     private hideDiscussion(){
         this.activeDiscussion = false;
-        if(this.userInputManager) {
-            this.userInputManager.initKeyBoardEvent();
-        }
         this.divDiscuss?.classList.remove('active');
     }
     

From 1359fbe97768c485c033eecd6e588222e836f931 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Wed, 6 Jan 2021 15:00:54 +0100
Subject: [PATCH 10/28] updated phaser to version 3.51 and fixed the BC

---
 front/src/Phaser/Entity/Character.ts        |  4 ++--
 front/src/Phaser/Entity/RemotePlayer.ts     |  3 ++-
 front/src/Phaser/Entity/SpeechBubble.ts     |  2 +-
 front/src/Phaser/Game/GameScene.ts          | 10 +++++-----
 front/src/Phaser/Items/ActionableItem.ts    |  3 +--
 front/src/Phaser/Shaders/OutlinePipeline.ts |  4 +---
 front/src/index.ts                          |  2 +-
 front/yarn.lock                             | 18 +++++++++---------
 8 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index 5c89447e..37b55be2 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -227,7 +227,7 @@ export abstract class Character extends Container {
         }, 3000)
     }
 
-    destroy(fromScene?: boolean): void {
+    destroy(): void {
         if (this.scene) {
             this.scene.events.removeListener('postupdate', this.postupdate.bind(this));
         }
@@ -236,7 +236,7 @@ export abstract class Character extends Container {
                 this.scene.sys.updateList.remove(sprite);
             }
         }
-        super.destroy(fromScene);
+        super.destroy();
         this.playerName.destroy();
     }
 }
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index 08f657d4..54592389 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -29,6 +29,7 @@ export class RemotePlayer extends Character {
         this.playAnimation(position.direction, position.moving);
         this.setX(position.x);
         this.setY(position.y);
-        this.setDepth(position.y);
+        
+        this.setDepth(position.y); //this is to make sure the perspective (player models closer the bottom of the screen will appear in front of models nearer the top of the screen).
     }
 }
diff --git a/front/src/Phaser/Entity/SpeechBubble.ts b/front/src/Phaser/Entity/SpeechBubble.ts
index 30518890..5dc43fe0 100644
--- a/front/src/Phaser/Entity/SpeechBubble.ts
+++ b/front/src/Phaser/Entity/SpeechBubble.ts
@@ -52,7 +52,7 @@ export class SpeechBubble {
         this.bubble.lineBetween(point2X, point2Y, point3X, point3Y);
         this.bubble.lineBetween(point1X, point1Y, point3X, point3Y);
 
-        this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: 20, color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } });
+        this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: '20', color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } });
 
         const bounds = this.content.getBounds();
         this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2));
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index a8206328..99b002de 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -110,7 +110,7 @@ export class GameScene extends ResizableScene implements CenterListener {
     MapPlayers!: Phaser.Physics.Arcade.Group;
     MapPlayersByKey : Map<number, RemotePlayer> = new Map<number, RemotePlayer>();
     Map!: Phaser.Tilemaps.Tilemap;
-    Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>;
+    Layers!: Array<Phaser.Tilemaps.TilemapLayer>;
     Objects!: Array<Phaser.Physics.Arcade.Sprite>;
     mapFile!: ITiledMap;
     groups: Map<number, Sprite>;
@@ -342,11 +342,11 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels);
 
         //add layer on map
-        this.Layers = new Array<Phaser.Tilemaps.StaticTilemapLayer>();
+        this.Layers = new Array<Phaser.Tilemaps.TilemapLayer>();
         let depth = -2;
         for (const layer of this.mapFile.layers) {
             if (layer.type === 'tilelayer') {
-                this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
+                this.addLayer(this.Map.createLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
 
                 const exitSceneUrl = this.getExitSceneUrl(layer);
                 if (exitSceneUrl !== undefined) {
@@ -824,13 +824,13 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.cameras.main.setZoom(ZOOM_LEVEL);
     }
 
-    addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){
+    addLayer(Layer : Phaser.Tilemaps.TilemapLayer){
         this.Layers.push(Layer);
     }
 
     createCollisionWithPlayer() {
         //add collision layer
-        this.Layers.forEach((Layer: Phaser.Tilemaps.StaticTilemapLayer) => {
+        this.Layers.forEach((Layer: Phaser.Tilemaps.TilemapLayer) => {
             this.physics.add.collider(this.CurrentPlayer, Layer, (object1: GameObject, object2: GameObject) => {
                 //this.CurrentPlayer.say("Collision with layer : "+ (object2 as Tile).layer.name)
             });
diff --git a/front/src/Phaser/Items/ActionableItem.ts b/front/src/Phaser/Items/ActionableItem.ts
index 36b14921..a1548f41 100644
--- a/front/src/Phaser/Items/ActionableItem.ts
+++ b/front/src/Phaser/Items/ActionableItem.ts
@@ -43,8 +43,7 @@ export class ActionableItem {
         }
         this.isSelectable = true;
         this.sprite.setPipeline(OutlinePipeline.KEY);
-        this.sprite.pipeline.setFloat2('uTextureSize',
-            this.sprite.texture.getSourceImage().width, this.sprite.texture.getSourceImage().height);
+        this.sprite.pipeline.set2f('uTextureSize', this.sprite.texture.getSourceImage().width, this.sprite.texture.getSourceImage().height);
     }
 
     /**
diff --git a/front/src/Phaser/Shaders/OutlinePipeline.ts b/front/src/Phaser/Shaders/OutlinePipeline.ts
index 6b416b8a..0d074bc3 100644
--- a/front/src/Phaser/Shaders/OutlinePipeline.ts
+++ b/front/src/Phaser/Shaders/OutlinePipeline.ts
@@ -1,5 +1,4 @@
-export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline
-{
+export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.MultiPipeline {
 
     // the unique id of this pipeline
     public static readonly KEY = 'Outline';
@@ -11,7 +10,6 @@ export class OutlinePipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTint
     {
         super({
             game: game,
-            renderer: game.renderer,
             fragShader: `
         precision mediump float;
 
diff --git a/front/src/index.ts b/front/src/index.ts
index c8783b90..46d38a3b 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -75,7 +75,7 @@ const config: GameConfig = {
         postBoot: game => {
             // FIXME: we should fore WebGL in the config.
             const renderer = game.renderer as WebGLRenderer;
-            renderer.addPipeline(OutlinePipeline.KEY, new OutlinePipeline(game));
+            renderer.pipelines.add(OutlinePipeline.KEY, new OutlinePipeline(game));
         }
     }
 };
diff --git a/front/yarn.lock b/front/yarn.lock
index 02b6052b..a31409a6 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1771,7 +1771,7 @@ eventemitter3@^2.0.3:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
   integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
 
-eventemitter3@^4.0.0, eventemitter3@^4.0.4:
+eventemitter3@^4.0.0, eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -1829,7 +1829,7 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-exports-loader@^1.1.0:
+exports-loader@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-1.1.1.tgz#88c9a6877ee6a5519d7c41a016bdd99148421e69"
   integrity sha512-CmyhIR2sJ3KOfVsHjsR0Yvo+0lhRhRMAevCbB8dhTVLHsZPs0lCQTvRmR9YNvBXDBxUuhmCE2f54KqEjZUaFrg==
@@ -2528,7 +2528,7 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imports-loader@^1.1.0:
+imports-loader@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/imports-loader/-/imports-loader-1.2.0.tgz#b06823d0bb42e6f5ff89bc893829000eda46693f"
   integrity sha512-zPvangKEgrrPeqeUqH0Uhc59YqK07JqZBi9a9cQ3v/EKUIqrbJHY4CvUrDus2lgQa5AmPyXuGrWP8JJTqzE5RQ==
@@ -3664,13 +3664,13 @@ pbkdf2@^3.0.3:
     sha.js "^2.4.8"
 
 phaser@^3.22.0:
-  version "3.24.1"
-  resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.24.1.tgz#376e0c965d2a35af37c06ee78627dafbde5be017"
-  integrity sha512-WbrRMkbpEzarkfrq83akeauc6b8xNxsOTpDygyW7wrU2G2ne6kOYu3hji4UAaGnZaOLrVuj8ycYPjX9P1LxcDw==
+  version "3.51.0"
+  resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.51.0.tgz#b0c7ee2b21e795830d74f476dd30816a42b023bd"
+  integrity sha512-Z7XNToZWO60Zx/YetaoeGSeELy5ND45TPPfYB9HtQU2692ACXc/nioQaWp20NzTMgeBsgl6vYf3CI82y/DzSyg==
   dependencies:
-    eventemitter3 "^4.0.4"
-    exports-loader "^1.1.0"
-    imports-loader "^1.1.0"
+    eventemitter3 "^4.0.7"
+    exports-loader "^1.1.1"
+    imports-loader "^1.2.0"
     path "^0.12.7"
 
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:

From 358292840b558944d10cd91cec0aa1b530c52cb4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 6 Jan 2021 14:41:45 +0000
Subject: [PATCH 11/28] Bump axios from 0.20.0 to 0.21.1 in /back

Bumps [axios](https://github.com/axios/axios) from 0.20.0 to 0.21.1.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v0.21.1/CHANGELOG.md)
- [Commits](https://github.com/axios/axios/compare/v0.20.0...v0.21.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 back/package.json | 2 +-
 back/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/back/package.json b/back/package.json
index 7e8026ba..09d6794a 100644
--- a/back/package.json
+++ b/back/package.json
@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/thecodingmachine/workadventure#readme",
   "dependencies": {
-    "axios": "^0.20.0",
+    "axios": "^0.21.1",
     "body-parser": "^1.19.0",
     "busboy": "^0.3.1",
     "circular-json": "^0.5.9",
diff --git a/back/yarn.lock b/back/yarn.lock
index f88b1675..501146cb 100644
--- a/back/yarn.lock
+++ b/back/yarn.lock
@@ -335,10 +335,10 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-axios@^0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.20.0.tgz#057ba30f04884694993a8cd07fa394cff11c50bd"
-  integrity sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
   dependencies:
     follow-redirects "^1.10.0"
 

From e13a5f3e645f9a808130c4029b54b00478bd71dc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 6 Jan 2021 14:41:47 +0000
Subject: [PATCH 12/28] Bump systeminformation from 4.30.5 to 4.31.1 in /pusher

Bumps [systeminformation](https://github.com/sebhildebrandt/systeminformation) from 4.30.5 to 4.31.1.
- [Release notes](https://github.com/sebhildebrandt/systeminformation/releases)
- [Changelog](https://github.com/sebhildebrandt/systeminformation/blob/master/CHANGELOG.md)
- [Commits](https://github.com/sebhildebrandt/systeminformation/compare/v4.30.5...v4.31.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 pusher/package.json | 2 +-
 pusher/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/pusher/package.json b/pusher/package.json
index 03fd761d..09d6794a 100644
--- a/pusher/package.json
+++ b/pusher/package.json
@@ -52,7 +52,7 @@
     "multer": "^1.4.2",
     "prom-client": "^12.0.0",
     "query-string": "^6.13.3",
-    "systeminformation": "^4.30.5",
+    "systeminformation": "^4.31.1",
     "ts-node-dev": "^1.0.0-pre.44",
     "typescript": "^3.8.3",
     "uWebSockets.js": "uNetworking/uWebSockets.js#v18.5.0",
diff --git a/pusher/yarn.lock b/pusher/yarn.lock
index f7de8093..501146cb 100644
--- a/pusher/yarn.lock
+++ b/pusher/yarn.lock
@@ -2723,10 +2723,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-systeminformation@^4.30.5:
-  version "4.30.5"
-  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.30.5.tgz#2219c305c8be56a2cfa527a5519c45bc81d4916c"
-  integrity sha512-aYWs8yttl8ePpr6VOQ/Ak8cznuc9L/NQODVhbOKhInX73ZMLvV2BS86Mzr7LLfmUteVFR36CTDNQgiJgRqq+SQ==
+systeminformation@^4.31.1:
+  version "4.31.1"
+  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.31.1.tgz#2e02c26987494d4b6a4d2d83138724593bc98d50"
+  integrity sha512-dVCDWNMN8ncMZo5vbMCA5dpAdMgzafK2ucuJy5LFmGtp1cG6farnPg8QNvoOSky9SkFoEX1Aw0XhcOFV6TnLYA==
 
 table@^5.2.3:
   version "5.4.6"

From 73d7e798e9166b043c652329085ba6d63bf39f47 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 6 Jan 2021 17:08:13 +0100
Subject: [PATCH 13/28] Upgrade conversion

When user send multi message, scroll on last message
---
 front/src/WebRtc/DiscussionManager.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 5571bcd6..4282603b 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -152,7 +152,7 @@ export class DiscussionManager {
     }
 
     private urlify(text: string) {
-        let urlRegex = /(https?:\/\/[^\s]+)/g;
+        const urlRegex = /(https?:\/\/[^\s]+)/g;
         return text.replace(urlRegex, (url: string) => {
             return '<a href="' + url + '" target="_blank">' + url + '</a>';
         })
@@ -182,8 +182,15 @@ export class DiscussionManager {
         userMessage.innerHTML = this.urlify(message);
         userMessage.classList.add('body');
         divMessage.appendChild(userMessage);
-
         this.divMessages?.appendChild(divMessage);
+
+        //automatic scroll when there are new message
+        setTimeout(() => {
+            this.divMessages?.scroll({
+                top: this.divMessages?.scrollTop + divMessage.getBoundingClientRect().y,
+                behavior: 'smooth'
+            });
+        }, 200);
     }
 
     public removeParticipant(userId: number|string){

From fbb44af369e80b37b83905098143f24f6a4f3132 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Wed, 6 Jan 2021 17:08:48 +0100
Subject: [PATCH 14/28] added a basic loader

---
 front/src/Phaser/Game/GameScene.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 99b002de..1357f6d8 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -180,6 +180,8 @@ export class GameScene extends ResizableScene implements CenterListener {
 
     //hook preload scene
     preload(): void {
+        this.initProgressBar();
+
         this.load.image(openChatIconName, 'resources/objects/talk.png');
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
             this.scene.start(FourOFourSceneName, {
@@ -206,6 +208,16 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
+    private initProgressBar(): void {
+        const progress = this.add.graphics();
+        this.load.on('progress', (value: number) => {
+            progress.clear();
+            progress.fillStyle(0xffffff, 1);
+            progress.fillRect(0, 270, 800 * value, 60);
+        });
+        this.load.on('complete', () => progress.destroy());
+    }
+
     // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private async onMapLoad(data: any): Promise<void> {

From 1659fa400fdd2bcf047c5a83e3f3b6599814a199 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 6 Jan 2021 17:09:17 +0100
Subject: [PATCH 15/28] Increase stability to force stopped screen sharing

---
 front/src/WebRtc/MediaManager.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 4aa240cd..a85992ae 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -318,6 +318,8 @@ export class MediaManager {
         const localScreenCapture = this.localScreenCapture;
         this.getCamera().then((stream) => {
             this.triggerStoppedScreenSharingCallbacks(localScreenCapture);
+        }).catch(() => { //catch error get camera
+            this.triggerStoppedScreenSharingCallbacks(localScreenCapture);
         });
         this.localScreenCapture = null;
     }

From d4c7a20dfa60128eb4c16f6e0cc8e04e08d0209c Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 7 Jan 2021 09:42:11 +0100
Subject: [PATCH 16/28] Update feedback @moufmouf

---
 front/src/WebRtc/MediaManager.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index a85992ae..dcb7717e 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -318,7 +318,8 @@ export class MediaManager {
         const localScreenCapture = this.localScreenCapture;
         this.getCamera().then((stream) => {
             this.triggerStoppedScreenSharingCallbacks(localScreenCapture);
-        }).catch(() => { //catch error get camera
+        }).catch((err) => { //catch error get camera
+            console.error(err);
             this.triggerStoppedScreenSharingCallbacks(localScreenCapture);
         });
         this.localScreenCapture = null;

From 8c89b5e0b168f5a387d174ee788376711a30864f Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 7 Jan 2021 10:30:28 +0100
Subject: [PATCH 17/28] Permit to change style when getCamera was ready and
 permission accorded

---
 front/src/WebRtc/MediaManager.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index dcb7717e..18a15ab6 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -209,9 +209,10 @@ export class MediaManager {
     }
 
     public enableCamera() {
-        this.enableCameraStyle();
         this.constraintsMedia.video = videoConstraint;
+
         this.getCamera().then((stream: MediaStream) => {
+            this.enableCameraStyle();
             this.triggerUpdatedLocalStreamCallbacks(stream);
         });
     }
@@ -228,10 +229,10 @@ export class MediaManager {
     }
 
     public enableMicrophone() {
-        this.enableMicrophoneStyle();
         this.constraintsMedia.audio = true;
 
         this.getCamera().then((stream) => {
+            this.enableMicrophoneStyle();
             this.triggerUpdatedLocalStreamCallbacks(stream);
         });
     }

From 018f01e8780b65a2c728999f100cb29f6d68bf0f Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 7 Jan 2021 11:02:00 +0100
Subject: [PATCH 18/28] Increase stability camera and microphone permission

---
 front/src/WebRtc/MediaManager.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 18a15ab6..09378642 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -212,8 +212,16 @@ export class MediaManager {
         this.constraintsMedia.video = videoConstraint;
 
         this.getCamera().then((stream: MediaStream) => {
+            //TODO show error message tooltip upper of camera button
+            //TODO message : please check camera permission of your navigator
+            if(stream.getVideoTracks().length === 0) {
+                throw Error('Video track is empty, please check camera permission of your navigator')
+            }
             this.enableCameraStyle();
             this.triggerUpdatedLocalStreamCallbacks(stream);
+        }).catch((err) => {
+            console.error(err);
+            this.disableCameraStyle();
         });
     }
 
@@ -232,8 +240,16 @@ export class MediaManager {
         this.constraintsMedia.audio = true;
 
         this.getCamera().then((stream) => {
+            //TODO show error message tooltip upper of camera button
+            //TODO message : please check microphone permission of your navigator
+            if(stream.getAudioTracks().length === 0) {
+                throw Error('Audio track is empty, please check microphone permission of your navigator')
+            }
             this.enableMicrophoneStyle();
             this.triggerUpdatedLocalStreamCallbacks(stream);
+        }).catch((err) => {
+            console.error(err);
+            this.disableMicrophoneStyle();
         });
     }
 

From a88ad3cf4d48db66d7fcf8a4c9a3d0557cbab525 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 7 Jan 2021 12:13:12 +0100
Subject: [PATCH 19/28] Dont delete PeerSharingConnection because it will be
 resuse

When user try to screen charing with same user, the event send is not a offer but renegociation. So could clear arry only when user out of circle.
---
 front/src/WebRtc/SimplePeer.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 2d8e5162..08ae99fe 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -245,9 +245,11 @@ export class SimplePeer {
             // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
             // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
             peer.destroy();
-            if(!this.PeerScreenSharingConnectionArray.delete(userId)){
+
+            //Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion
+            /*if(!this.PeerScreenSharingConnectionArray.delete(userId)){
                 throw 'Couln\'t delete peer screen sharing connexion';
-            }
+            }*/
             //console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
         } catch (err) {
             console.error("closeConnection", err)
@@ -301,11 +303,13 @@ export class SimplePeer {
                 peer.signal(data.signal);
             } else {
                 console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal');
+                console.info('tentative to create new peer connexion');
+                this.sendLocalScreenSharingStreamToUser(data.userId);
             }
         } catch (e) {
             console.error(`receiveWebrtcSignal => ${data.userId}`, e);
-            //force delete and recreate peer connexion
-            this.PeerScreenSharingConnectionArray.delete(data.userId);
+            //Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion
+            //this.PeerScreenSharingConnectionArray.delete(data.userId);
             this.receiveWebrtcScreenSharingSignal(data);
         }
     }
@@ -416,8 +420,8 @@ export class SimplePeer {
 
         if (!PeerConnectionScreenSharing.isReceivingScreenSharingStream()) {
             PeerConnectionScreenSharing.destroy();
-
-            this.PeerScreenSharingConnectionArray.delete(userId);
+            //Comment this peer connexion because if we delete and try to reshare screen, the RTCPeerConnection send renegociate event. This array will be remove when user left circle discussion
+            //this.PeerScreenSharingConnectionArray.delete(userId);
         }
     }
 }

From 3ce842737844ab51a181ecc66c772a258cdb4811 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Thu, 7 Jan 2021 12:43:21 +0100
Subject: [PATCH 20/28] fixed a game crashed because of lack of animations and
 improved the character class

---
 front/src/Phaser/Entity/Character.ts    | 26 +------
 front/src/Phaser/Entity/SpeechBubble.ts | 29 +-------
 front/src/Phaser/Game/GameScene.ts      | 97 ++++++++++++++-----------
 3 files changed, 60 insertions(+), 92 deletions(-)

diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index 37b55be2..6df6e1a4 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -59,6 +59,7 @@ export abstract class Character extends Container {
                 frame?: string | number
     ) {
         super(scene, x, y/*, texture, frame*/);
+        this.PlayerValue = name;
 
         this.sprites = new Map<string, Sprite>();
 
@@ -73,10 +74,9 @@ export abstract class Character extends Container {
         });
         this.add(this.teleportation);*/
 
-        this.PlayerValue = name;
-        this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 7);
+        this.playerName = new BitmapText(scene, 0,  - 25, 'main_font', name, 7);
         this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);
-        scene.add.existing(this.playerName);
+        this.add(this.playerName);
 
         scene.add.existing(this);
 
@@ -88,8 +88,6 @@ export abstract class Character extends Container {
         this.getBody().setOffset(0, 8);
         this.setDepth(-1);
 
-        this.scene.events.on('postupdate', this.postupdate.bind(this));
-
         this.playAnimation(direction, moving);
     }
 
@@ -181,35 +179,21 @@ export abstract class Character extends Container {
         if (body.velocity.y < 0) { //moving up
             this.lastDirection = PlayerAnimationNames.WalkUp;
             this.playAnimation(PlayerAnimationNames.WalkUp, true);
-            //this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`, true);
         } else if (body.velocity.y > 0) { //moving down
             this.lastDirection = PlayerAnimationNames.WalkDown;
             this.playAnimation(PlayerAnimationNames.WalkDown, true);
-            //this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`, true);
         } else if (body.velocity.x > 0) { //moving right
             this.lastDirection = PlayerAnimationNames.WalkRight;
             this.playAnimation(PlayerAnimationNames.WalkRight, true);
-            //this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`, true);
         } else if (body.velocity.x < 0) { //moving left
             this.lastDirection = PlayerAnimationNames.WalkLeft;
             this.playAnimation(PlayerAnimationNames.WalkLeft, true);
-            //this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
-        }
-
-        //todo:remove this, use a container tech to move the bubble instead
-        if (this.bubble) {
-            this.bubble.moveBubble(this.x, this.y);
         }
 
         //update depth user
         this.setDepth(this.y);
     }
 
-    postupdate(time: number, delta: number) {
-        //super.update(delta);
-        this.playerName.setPosition(this.x, this.y - 25);
-    }
-
     stop(){
         this.getBody().setVelocity(0, 0);
         this.playAnimation(this.lastDirection, false);
@@ -218,7 +202,6 @@ export abstract class Character extends Container {
     say(text: string) {
         if (this.bubble) return;
         this.bubble = new SpeechBubble(this.scene, this, text)
-        //todo make the bubble destroy on player movement?
         setTimeout(() => {
             if (this.bubble !== null) {
                 this.bubble.destroy();
@@ -228,9 +211,6 @@ export abstract class Character extends Container {
     }
 
     destroy(): void {
-        if (this.scene) {
-            this.scene.events.removeListener('postupdate', this.postupdate.bind(this));
-        }
         for (const sprite of this.sprites.values()) {
             if(this.scene) {
                 this.scene.sys.updateList.remove(sprite);
diff --git a/front/src/Phaser/Entity/SpeechBubble.ts b/front/src/Phaser/Entity/SpeechBubble.ts
index 5dc43fe0..06a64bd4 100644
--- a/front/src/Phaser/Entity/SpeechBubble.ts
+++ b/front/src/Phaser/Entity/SpeechBubble.ts
@@ -1,16 +1,12 @@
 import Scene = Phaser.Scene;
 import {Character} from "./Character";
 
+//todo: improve this WIP
 export class SpeechBubble {
     private bubble: Phaser.GameObjects.Graphics;
     private content: Phaser.GameObjects.Text;
 
-    /**
-     *
-     * @param scene
-     * @param player
-     * @param text
-     */
+    
     constructor(scene: Scene, player: Character, text: string = "") {
 
         const bubbleHeight = 50;
@@ -19,6 +15,7 @@ export class SpeechBubble {
         const arrowHeight = bubbleHeight / 4;
 
         this.bubble = scene.add.graphics({ x: player.x + 16, y: player.y - 80 });
+        player.add(this.bubble);
 
         //  Bubble shadow
         this.bubble.fillStyle(0x222222, 0.5);
@@ -53,30 +50,12 @@ export class SpeechBubble {
         this.bubble.lineBetween(point1X, point1Y, point3X, point3Y);
 
         this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: '20', color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } });
+        player.add(this.content);
 
         const bounds = this.content.getBounds();
         this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2));
     }
 
-    /**
-     *
-     * @param x
-     * @param y
-     */
-    moveBubble(x : number, y : number) {
-        if (this.bubble) {
-            this.bubble.setPosition((x + 16), (y - 80));
-        }
-        if (this.content) {
-            const bubbleHeight = 50;
-            const bubblePadding = 10;
-            const bubbleWidth = bubblePadding * 2 + this.content.text.length * 10;
-            const bounds = this.content.getBounds();
-            //this.content.setPosition(x, y);
-            this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2));
-        }
-    }
-
     destroy(): void {
         this.bubble.setVisible(false) //todo find a better way
         this.bubble.destroy();
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 1357f6d8..181592e2 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -66,6 +66,7 @@ import {ChatModeIcon} from "../Components/ChatModeIcon";
 import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
 import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {TextureError} from "../../Exception/TextureError";
+import {TextField} from "../Components/TextField";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -209,13 +210,17 @@ export class GameScene extends ResizableScene implements CenterListener {
     }
 
     private initProgressBar(): void {
+        const loadingText = this.add.text(this.game.renderer.width / 2, 200, 'Loading');
         const progress = this.add.graphics();
         this.load.on('progress', (value: number) => {
             progress.clear();
             progress.fillStyle(0xffffff, 1);
             progress.fillRect(0, 270, 800 * value, 60);
         });
-        this.load.on('complete', () => progress.destroy());
+        this.load.on('complete', () => {
+            loadingText.destroy();
+            progress.destroy();
+        });
     }
 
     // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
@@ -391,40 +396,11 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         //notify game manager can to create currentUser in map
         this.createCurrentPlayer();
-
-        //initialise camera
+        this.removeAllRemotePlayers(); //cleanup the list  of remote players in case the scene was rebooted
+        
         this.initCamera();
 
-        // Let's generate the circle for the group delimiter
-        let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
-        if (circleElement) {
-            this.textures.remove('circleSprite-white');
-        }
-
-        circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
-        if (circleElement) {
-            this.textures.remove('circleSprite-red');
-        }
-
-        //create white circle canvas use to create sprite
-        this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96);
-        const context = this.circleTexture.context;
-        context.beginPath();
-        context.arc(48, 48, 48, 0, 2 * Math.PI, false);
-        // context.lineWidth = 5;
-        context.strokeStyle = '#ffffff';
-        context.stroke();
-        this.circleTexture.refresh();
-
-        //create red circle canvas use to create sprite
-        this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96);
-        const contextRed = this.circleRedTexture.context;
-        contextRed.beginPath();
-        contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
-        // context.lineWidth = 5;
-        contextRed.strokeStyle = '#ff0000';
-        contextRed.stroke();
-        this.circleRedTexture.refresh();
+        this.initCirclesCanvas();
 
         // Let's pause the scene if the connection is not established yet
         if (this.isReconnecting) {
@@ -606,6 +582,40 @@ export class GameScene extends ResizableScene implements CenterListener {
         });
     }
 
+    //todo: into dedicated classes
+    private initCirclesCanvas(): void {
+        // Let's generate the circle for the group delimiter
+        let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
+        if (circleElement) {
+            this.textures.remove('circleSprite-white');
+        }
+
+        circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
+        if (circleElement) {
+            this.textures.remove('circleSprite-red');
+        }
+
+        //create white circle canvas use to create sprite
+        this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96);
+        const context = this.circleTexture.context;
+        context.beginPath();
+        context.arc(48, 48, 48, 0, 2 * Math.PI, false);
+        // context.lineWidth = 5;
+        context.strokeStyle = '#ffffff';
+        context.stroke();
+        this.circleTexture.refresh();
+
+        //create red circle canvas use to create sprite
+        this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96);
+        const contextRed = this.circleRedTexture.context;
+        contextRed.beginPath();
+        contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
+        // context.lineWidth = 5;
+        contextRed.strokeStyle = '#ff0000';
+        contextRed.stroke();
+        this.circleRedTexture.refresh();
+    }
+
     private playAudio(url: string|number|boolean|undefined, loop=false): void {
         if (url === undefined) {
             audioManager.unloadAudio();
@@ -717,6 +727,14 @@ export class GameScene extends ResizableScene implements CenterListener {
         }
     }
 
+    private removeAllRemotePlayers(): void {
+        this.MapPlayersByKey.forEach((player: RemotePlayer) => {
+            player.destroy();
+            this.MapPlayers.remove(player);
+        });
+        this.MapPlayersByKey = new Map<number, RemotePlayer>();
+    }
+
     private switchLayoutMode(): void {
         //if discussion is activated, this layout cannot be activated
         if(mediaManager.activatedDiscussion){
@@ -1024,14 +1042,7 @@ export class GameScene extends ResizableScene implements CenterListener {
      */
     private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
         const currentPlayerId = this.connection.getUserId();
-
-        // clean map
-        this.MapPlayersByKey.forEach((player: RemotePlayer) => {
-            player.destroy();
-            this.MapPlayers.remove(player);
-        });
-        this.MapPlayersByKey = new Map<number, RemotePlayer>();
-
+        this.removeAllRemotePlayers();
         // load map
         usersPosition.forEach((userPosition : MessageUserPositionInterface) => {
             if(userPosition.userId === currentPlayerId){
@@ -1224,9 +1235,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         // Let's put this in Game coordinates by applying the zoom level:
         xCenter /= ZOOM_LEVEL * RESOLUTION;
         yCenter /= ZOOM_LEVEL * RESOLUTION;
-
-        //console.log("updateCameraOffset", array, xCenter, yCenter, this.game.renderer.width, this.game.renderer.height);
-
+        
         this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1,  xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
     }
 

From e8f1b2d048c64fc11a855d68a9fbf1135fc0a343 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 7 Jan 2021 12:58:45 +0100
Subject: [PATCH 21/28] Add clear array peer connection sharing

---
 front/src/WebRtc/SimplePeer.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 08ae99fe..90d260ee 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -229,6 +229,14 @@ export class SimplePeer {
         } catch (err) {
             console.error("closeConnection", err)
         }
+
+        //if user left discussion, clear array peer connection of sharing
+        if(this.Users.length === 0) {
+            for (const userId of this.PeerScreenSharingConnectionArray.keys()) {
+                this.closeScreenSharingConnection(userId);
+                this.PeerScreenSharingConnectionArray.delete(userId);
+            }
+        }
     }
 
     /**

From 472fbb1de0718f423e180050807932aea99ea441 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Thu, 7 Jan 2021 17:11:22 +0100
Subject: [PATCH 22/28] All player textures are now lazy-loaded

---
 front/src/Connexion/ConnexionModels.ts        |   2 +-
 front/src/Connexion/RoomConnection.ts         |   2 +-
 front/src/Phaser/Components/Loader.ts         |  14 +
 front/src/Phaser/Entity/Character.ts          |  39 +-
 front/src/Phaser/Entity/PlayerTextures.ts     | 334 ++++++++++++++++
 .../Entity/PlayerTexturesLoadingManager.ts    |  71 ++++
 front/src/Phaser/Entity/RemotePlayer.ts       |   4 +-
 front/src/Phaser/Entity/body_character.ts     | 355 ------------------
 front/src/Phaser/Game/AddPlayerInterface.ts   |   2 +-
 front/src/Phaser/Game/GameManager.ts          |   5 +-
 front/src/Phaser/Game/GameScene.ts            |  83 +---
 front/src/Phaser/Login/CustomizeScene.ts      |  14 +-
 front/src/Phaser/Login/LoginScene.ts          |  10 -
 .../src/Phaser/Login/SelectCharacterScene.ts  |  33 +-
 front/src/Phaser/Player/Player.ts             |   4 +-
 15 files changed, 470 insertions(+), 502 deletions(-)
 create mode 100644 front/src/Phaser/Components/Loader.ts
 create mode 100644 front/src/Phaser/Entity/PlayerTextures.ts
 create mode 100644 front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
 delete mode 100644 front/src/Phaser/Entity/body_character.ts

diff --git a/front/src/Connexion/ConnexionModels.ts b/front/src/Connexion/ConnexionModels.ts
index 6b17fde8..2e6451f3 100644
--- a/front/src/Connexion/ConnexionModels.ts
+++ b/front/src/Connexion/ConnexionModels.ts
@@ -1,8 +1,8 @@
 import {PlayerAnimationNames} from "../Phaser/Player/Animation";
 import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
 import {SignalData} from "simple-peer";
-import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
 import {RoomConnection} from "./RoomConnection";
+import {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures";
 
 export enum EventMessage{
     CONNECT = "connect",
diff --git a/front/src/Connexion/RoomConnection.ts b/front/src/Connexion/RoomConnection.ts
index beb7f9dd..bd330ad9 100644
--- a/front/src/Connexion/RoomConnection.ts
+++ b/front/src/Connexion/RoomConnection.ts
@@ -41,7 +41,7 @@ import {
     ViewportInterface, WebRtcDisconnectMessageInterface,
     WebRtcSignalReceivedMessageInterface,
 } from "./ConnexionModels";
-import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
+import {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures";
 
 const manualPingDelay = 20000;
 
diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts
new file mode 100644
index 00000000..ab9c0d95
--- /dev/null
+++ b/front/src/Phaser/Components/Loader.ts
@@ -0,0 +1,14 @@
+
+export const addLoader = (scene:Phaser.Scene): void => {
+    const loadingText = scene.add.text(scene.game.renderer.width / 2, 200, 'Loading');
+    const progress = scene.add.graphics();
+    scene.load.on('progress', (value: number) => {
+        progress.clear();
+        progress.fillStyle(0xffffff, 1);
+        progress.fillRect(0, 270, 800 * value, 60);
+    });
+    scene.load.on('complete', () => {
+        loadingText.destroy();
+        progress.destroy();
+    });
+}
\ No newline at end of file
diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index 6df6e1a4..67e21f10 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -5,33 +5,6 @@ import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
 import {TextureError} from "../../Exception/TextureError";
 
-export interface PlayerResourceDescriptionInterface {
-    name: string,
-    img: string
-}
-
-export const PLAYER_RESOURCES: Array<PlayerResourceDescriptionInterface> = [
-    {name: "male1", img: "resources/characters/pipoya/Male 01-1.png" /*, x: 32, y: 32*/},
-    {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"/*, x: 64, y: 32*/},
-    {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"/*, x: 96, y: 32*/},
-    {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"/*, x: 128, y: 32*/},
-
-    {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"/*, x: 32, y: 64*/},
-    {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"/*, x: 64, y: 64*/},
-    {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"/*, x: 96, y: 64*/},
-    {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"/*, x: 128, y: 64*/},
-
-    {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"/*, x: 32, y: 96*/},
-    {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"/*, x: 64, y: 96*/},
-    {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"/*, x: 96, y: 96*/},
-    {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"/*, x: 128, y: 96*/},
-
-    {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"/*, x: 32, y: 128*/},
-    {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"/*, x: 64, y: 128*/},
-    {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"/*, x: 96, y: 128*/},
-    {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"/*, x: 128, y: 128*/}
-];
-
 interface AnimationData {
     key: string;
     frameRate: number;
@@ -48,11 +21,12 @@ export abstract class Character extends Container {
     public sprites: Map<string, Sprite>;
     private lastDirection: string = PlayerAnimationNames.WalkDown;
     //private teleportation: Sprite;
+    private invisible: boolean;
 
     constructor(scene: Phaser.Scene,
                 x: number,
                 y: number,
-                textures: string[],
+                texturesPromise: Promise<string[]>,
                 name: string,
                 direction: string,
                 moving: boolean,
@@ -60,10 +34,15 @@ export abstract class Character extends Container {
     ) {
         super(scene, x, y/*, texture, frame*/);
         this.PlayerValue = name;
+        this.invisible = true
 
         this.sprites = new Map<string, Sprite>();
 
-        this.addTextures(textures, frame);
+        //textures are inside a Promise in case they need to be lazyloaded before use.
+        texturesPromise.then((textures) => {
+            this.addTextures(textures, frame);
+            this.invisible = false
+        })
 
         /*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3);
         this.teleportation.setInteractive();
@@ -148,6 +127,7 @@ export abstract class Character extends Container {
     }
 
     protected playAnimation(direction : string, moving: boolean): void {
+        if (this.invisible) return;
         for (const [texture, sprite] of this.sprites.entries()) {
             if (!sprite.anims) {
                 console.error('ANIMS IS NOT DEFINED!!!');
@@ -190,7 +170,6 @@ export abstract class Character extends Container {
             this.playAnimation(PlayerAnimationNames.WalkLeft, true);
         }
 
-        //update depth user
         this.setDepth(this.y);
     }
 
diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts
new file mode 100644
index 00000000..6d0f99c0
--- /dev/null
+++ b/front/src/Phaser/Entity/PlayerTextures.ts
@@ -0,0 +1,334 @@
+//The list of all the player textures, both the default models and the partial textures used for customization
+
+export interface BodyResourceDescriptionListInterface {
+    [key: string]: BodyResourceDescriptionInterface
+}
+
+export interface BodyResourceDescriptionInterface {
+    name: string,
+    img: string
+}
+
+export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
+    "male1": {name: "male1", img: "resources/characters/pipoya/Male 01-1.png"},
+    "male2": {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"},
+    "male3": {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"},
+    "male4": {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"},
+    "male5": {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"},
+    "male6": {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"},
+    "male7": {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"},
+    "male8": {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"},
+    "Female1": {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"},
+    "Female2": {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"},
+    "Female3": {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"},
+    "Female4": {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"},
+    "Female5": {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"},
+    "Female6": {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"},
+    "Female7": {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"},
+    "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"}
+};
+
+export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {
+    "color_1": {name: "color_1", img: "resources/customisation/character_color/character_color0.png"},
+    "color_2": {name: "color_2", img: "resources/customisation/character_color/character_color1.png"},
+    "color_3": {name: "color_3", img: "resources/customisation/character_color/character_color2.png"},
+    "color_4": {name: "color_4", img: "resources/customisation/character_color/character_color3.png"},
+    "color_5": {name: "color_5", img: "resources/customisation/character_color/character_color4.png"},
+    "color_6": {name: "color_6", img: "resources/customisation/character_color/character_color5.png"},
+    "color_7": {name: "color_7", img: "resources/customisation/character_color/character_color6.png"},
+    "color_8": {name: "color_8", img: "resources/customisation/character_color/character_color7.png"},
+    "color_9": {name: "color_9", img: "resources/customisation/character_color/character_color8.png"},
+    "color_10": {name: "color_10", img: "resources/customisation/character_color/character_color9.png"},
+    "color_11": {name: "color_11", img: "resources/customisation/character_color/character_color10.png"},
+    "color_12": {name: "color_12", img: "resources/customisation/character_color/character_color11.png"},
+    "color_13": {name: "color_13", img: "resources/customisation/character_color/character_color12.png"},
+    "color_14": {name: "color_14", img: "resources/customisation/character_color/character_color13.png"},
+    "color_15": {name: "color_15", img: "resources/customisation/character_color/character_color14.png"},
+    "color_16": {name: "color_16", img: "resources/customisation/character_color/character_color15.png"},
+    "color_17": {name: "color_17", img: "resources/customisation/character_color/character_color16.png"},
+    "color_18": {name: "color_18", img: "resources/customisation/character_color/character_color17.png"},
+    "color_19": {name: "color_19", img: "resources/customisation/character_color/character_color18.png"},
+    "color_20": {name: "color_20", img: "resources/customisation/character_color/character_color19.png"},
+    "color_21": {name: "color_21", img: "resources/customisation/character_color/character_color20.png"},
+    "color_22": {name: "color_22", img: "resources/customisation/character_color/character_color21.png"},
+    "color_23": {name: "color_23", img: "resources/customisation/character_color/character_color22.png"},
+    "color_24": {name: "color_24", img: "resources/customisation/character_color/character_color23.png"},
+    "color_25": {name: "color_25", img: "resources/customisation/character_color/character_color24.png"},
+    "color_26": {name: "color_26", img: "resources/customisation/character_color/character_color25.png"},
+    "color_27": {name: "color_27", img: "resources/customisation/character_color/character_color26.png"},
+    "color_28": {name: "color_28", img: "resources/customisation/character_color/character_color27.png"},
+    "color_29": {name: "color_29", img: "resources/customisation/character_color/character_color28.png"},
+    "color_30": {name: "color_30", img: "resources/customisation/character_color/character_color29.png"},
+    "color_31": {name: "color_31", img: "resources/customisation/character_color/character_color30.png"},
+    "color_32": {name: "color_32", img: "resources/customisation/character_color/character_color31.png"},
+    "color_33": {name: "color_33", img: "resources/customisation/character_color/character_color32.png"}
+};
+
+export const EYES_RESOURCES: BodyResourceDescriptionListInterface = {
+    "eyes_1": {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"},
+    "eyes_2": {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"},
+    "eyes_3": {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"},
+    "eyes_4": {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"},
+    "eyes_5": {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"},
+    "eyes_6": {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"},
+    "eyes_7": {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"},
+    "eyes_8": {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"},
+    "eyes_9": {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"},
+    "eyes_10": {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"},
+    "eyes_11": {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"},
+    "eyes_12": {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"},
+    "eyes_13": {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"},
+    "eyes_14": {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"},
+    "eyes_15": {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"},
+    "eyes_16": {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"},
+    "eyes_17": {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"},
+    "eyes_18": {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"},
+    "eyes_19": {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"},
+    "eyes_20": {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"},
+    "eyes_21": {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"},
+    "eyes_22": {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"},
+    "eyes_23": {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"},
+    "eyes_24": {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"},
+    "eyes_25": {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"},
+    "eyes_26": {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"},
+    "eyes_27": {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"},
+    "eyes_28": {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"},
+    "eyes_29": {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"},
+    "eyes_30": {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"}
+
+};
+
+export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = {
+    "hair_1": {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"},
+    "hair_2": {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"},
+    "hair_3": {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"},
+    "hair_4": {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"},
+    "hair_5": {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"},
+    "hair_6": {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"},
+    "hair_7": {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"},
+    "hair_8": {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"},
+    "hair_9": {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"},
+    "hair_10": {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"},
+    "hair_11": {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"},
+    "hair_12": {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"},
+    "hair_13": {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"},
+    "hair_14": {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"},
+    "hair_15": {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"},
+    "hair_16": {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"},
+    "hair_17": {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"},
+    "hair_18": {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"},
+    "hair_19": {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"},
+    "hair_20": {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"},
+    "hair_21": {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"},
+    "hair_22": {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"},
+    "hair_23": {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"},
+    "hair_24": {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"},
+    "hair_25": {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"},
+    "hair_26": {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"},
+    "hair_27": {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"},
+    "hair_28": {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"},
+    "hair_29": {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"},
+    "hair_30": {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"},
+    "hair_31": {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"},
+    "hair_32": {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"},
+    "hair_33": {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"},
+    "hair_34": {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"},
+    "hair_35": {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"},
+    "hair_36": {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"},
+    "hair_37": {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"},
+    "hair_38": {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"},
+    "hair_39": {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"},
+    "hair_40": {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"},
+    "hair_41": {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"},
+    "hair_42": {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"},
+    "hair_43": {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"},
+    "hair_44": {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"},
+    "hair_45": {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"},
+    "hair_46": {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"},
+    "hair_47": {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"},
+    "hair_48": {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"},
+    "hair_49": {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"},
+    "hair_50": {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"},
+    "hair_51": {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"},
+    "hair_52": {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"},
+    "hair_53": {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"},
+    "hair_54": {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"},
+    "hair_55": {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"},
+    "hair_56": {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"},
+    "hair_57": {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"},
+    "hair_58": {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"},
+    "hair_59": {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"},
+    "hair_60": {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"},
+    "hair_61": {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"},
+    "hair_62": {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"},
+    "hair_63": {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"},
+    "hair_64": {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"},
+    "hair_65": {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"},
+    "hair_66": {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"},
+    "hair_67": {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"},
+    "hair_68": {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"},
+    "hair_69": {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"},
+    "hair_70": {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"},
+    "hair_71": {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"},
+    "hair_72": {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"},
+    "hair_73": {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"},
+    "hair_74": {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"}
+};
+
+
+export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {
+    "clothes_1": {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"},
+    "clothes_2": {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"},
+    "clothes_3": {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"},
+    "clothes_4": {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"},
+    "clothes_5": {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"},
+    "clothes_6": {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"},
+    "clothes_7": {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"},
+    "clothes_8": {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"},
+    "clothes_9": {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"},
+    "clothes_10": {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"},
+    "clothes_11": {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"},
+    "clothes_12": {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"},
+    "clothes_13": {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"},
+    "clothes_14": {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"},
+    "clothes_15": {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"},
+    "clothes_16": {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"},
+    "clothes_17": {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"},
+    "clothes_18": {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"},
+    "clothes_19": {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"},
+    "clothes_20": {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"},
+    "clothes_21": {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"},
+    "clothes_22": {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"},
+    "clothes_23": {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"},
+    "clothes_24": {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"},
+    "clothes_25": {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"},
+    "clothes_26": {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"},
+    "clothes_27": {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"},
+    "clothes_28": {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"},
+    "clothes_29": {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"},
+    "clothes_30": {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"},
+    "clothes_31": {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"},
+    "clothes_32": {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"},
+    "clothes_33": {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"},
+    "clothes_34": {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"},
+    "clothes_35": {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"},
+    "clothes_36": {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"},
+    "clothes_37": {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"},
+    "clothes_38": {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"},
+    "clothes_39": {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"},
+    "clothes_40": {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"},
+    "clothes_41": {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"},
+    "clothes_42": {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"},
+    "clothes_43": {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"},
+    "clothes_44": {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"},
+    "clothes_45": {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"},
+    "clothes_46": {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"},
+    "clothes_47": {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"},
+    "clothes_48": {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"},
+    "clothes_49": {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"},
+    "clothes_50": {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"},
+    "clothes_51": {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"},
+    "clothes_52": {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"},
+    "clothes_53": {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"},
+    "clothes_54": {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"},
+    "clothes_55": {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"},
+    "clothes_56": {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"},
+    "clothes_57": {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"},
+    "clothes_58": {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"},
+    "clothes_59": {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"},
+    "clothes_60": {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"},
+    "clothes_61": {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"},
+    "clothes_62": {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"},
+    "clothes_63": {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"},
+    "clothes_64": {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"},
+    "clothes_65": {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"},
+    "clothes_66": {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"},
+    "clothes_67": {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"},
+    "clothes_68": {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"},
+    "clothes_69": {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"},
+    "clothes_70": {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"},
+    "clothes_pride_shirt": {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"},
+    "clothes_black_hoodie": {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"},
+    "clothes_white_hoodie": {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"},
+    "clothes_engelbert": {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"}
+};
+
+export const HATS_RESOURCES: BodyResourceDescriptionListInterface = {
+    "hats_1": {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"},
+    "hats_2": {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"},
+    "hats_3": {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"},
+    "hats_4": {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"},
+    "hats_5": {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"},
+    "hats_6": {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"},
+    "hats_7": {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"},
+    "hats_8": {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"},
+    "hats_9": {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"},
+    "hats_10": {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"},
+    "hats_11": {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"},
+    "hats_12": {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"},
+    "hats_13": {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"},
+    "hats_14": {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"},
+    "hats_15": {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"},
+    "hats_16": {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"},
+    "hats_17": {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"},
+    "hats_18": {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"},
+    "hats_19": {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"},
+    "hats_20": {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"},
+    "hats_21": {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"},
+    "hats_22": {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"},
+    "hats_23": {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"},
+    "hats_24": {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"},
+    "hats_25": {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"},
+    "hats_26": {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"},
+    "tinfoil_hat1": {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"}
+};
+
+export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {
+    "accessory_1": {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"},
+    "accessory_2": {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"},
+    "accessory_3": {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"},
+    "accessory_4": {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"},
+    "accessory_5": {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"},
+    "accessory_6": {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"},
+    "accessory_7": {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"},
+    "accessory_8": {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"},
+    "accessory_9": {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"},
+    "accessory_10": {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"},
+    "accessory_11": {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"},
+    "accessory_12": {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"},
+    "accessory_13": {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"},
+    "accessory_14": {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"},
+    "accessory_15": {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"},
+    "accessory_16": {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"},
+    "accessory_17": {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"},
+    "accessory_18": {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"},
+    "accessory_19": {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"},
+    "accessory_20": {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"},
+    "accessory_21": {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"},
+    "accessory_22": {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"},
+    "accessory_23": {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"},
+    "accessory_24": {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"},
+    "accessory_25": {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"},
+    "accessory_26": {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"},
+    "accessory_27": {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"},
+    "accessory_28": {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"},
+    "accessory_29": {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"},
+    "accessory_30": {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"},
+    "accessory_31": {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"},
+    "accessory_32": {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"},
+    "accessory_mate_bottle": {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"},
+    "accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"}
+};
+
+export const LAYERS: BodyResourceDescriptionListInterface[] = [
+    COLOR_RESOURCES,
+    EYES_RESOURCES,
+    HAIR_RESOURCES,
+    CLOTHES_RESOURCES,
+    HATS_RESOURCES,
+    ACCESSORIES_RESOURCES
+];
+
+export const OBJECTS: BodyResourceDescriptionInterface[] = [
+    {name:'teleportation', img:'resources/objects/teleportation.png'},
+];
\ No newline at end of file
diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
new file mode 100644
index 00000000..6f684b2d
--- /dev/null
+++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
@@ -0,0 +1,71 @@
+import LoaderPlugin = Phaser.Loader.LoaderPlugin;
+import TextureManager = Phaser.Textures.TextureManager;
+import {CharacterTexture} from "../../Connexion/LocalUser";
+import {BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES} from "./PlayerTextures";
+
+
+export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => {
+    const returnArray:BodyResourceDescriptionInterface[][] = [];
+    LAYERS.forEach(layer => {
+        const layerArray:BodyResourceDescriptionInterface[] = [];
+        Object.values(layer).forEach((textureDescriptor) => {
+            layerArray.push(textureDescriptor);
+            load.spritesheet(textureDescriptor.name,textureDescriptor.img,{frameWidth: 32, frameHeight: 32});
+        })
+        returnArray.push(layerArray)
+    });
+    return returnArray;
+}
+export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptionInterface[] => {
+    const returnArray = Object.values(PLAYER_RESOURCES);
+    returnArray.forEach((playerResource: BodyResourceDescriptionInterface) => {
+        load.spritesheet(playerResource.name, playerResource.img, {frameWidth: 32, frameHeight: 32});
+    });
+    return returnArray;
+}
+export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
+    const name = 'customCharacterTexture'+texture.id;
+    load.spritesheet(name,texture.url,{frameWidth: 32, frameHeight: 32});
+}
+
+
+export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array<string|BodyResourceDescriptionInterface>): Promise<string[]> => {
+    const promisesList:Promise<void>[] = [];
+    texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => {
+        const textureName = typeof textureKey === 'string' ? textureKey : textureKey.name;
+        if(!texturePlugin.exists(textureName)) {
+            console.log('Loading '+textureName)
+            const playerResourceDescriptor = typeof textureKey === 'string' ? getRessourceDescriptor(textureKey) : textureKey;
+            promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor));
+        }
+    })
+    let returnPromise:Promise<Array<string|BodyResourceDescriptionInterface>>;
+    if (promisesList.length > 0) {
+        loadPlugin.start();
+        returnPromise = Promise.all(promisesList).then(() => texturekeys);
+    } else {
+        returnPromise = Promise.resolve(texturekeys);
+    }
+    return returnPromise.then((keys) => keys.map((key) => {
+        return typeof key !== 'string' ? key.name : key;
+    }))
+}
+
+
+const getRessourceDescriptor = (textureKey: string): BodyResourceDescriptionInterface => {
+    const playerResource = PLAYER_RESOURCES[textureKey];
+    if (playerResource !== undefined) return playerResource;
+    
+    for (let i=0; i<LAYERS.length;i++) {
+        const playerResource = LAYERS[i][textureKey];
+        if (playerResource !== undefined) return playerResource;
+    }
+    throw 'Could not find a data for texture '+textureKey;
+}
+
+const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) => {
+    return new Promise<void>((res, rej) => {
+        loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {frameWidth: 32, frameHeight: 32});
+        loadPlugin.once('filecomplete-spritesheet-'+playerResourceDescriptor.name, () => res());
+    });
+}
\ No newline at end of file
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index 54592389..822e4e36 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -15,11 +15,11 @@ export class RemotePlayer extends Character {
         x: number,
         y: number,
         name: string,
-        PlayerTextures: string[],
+        texturesPromise: Promise<string[]>,
         direction: string,
         moving: boolean
     ) {
-        super(Scene, x, y, PlayerTextures, name, direction, moving, 1);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1);
 
         //set data
         this.userId = userId;
diff --git a/front/src/Phaser/Entity/body_character.ts b/front/src/Phaser/Entity/body_character.ts
deleted file mode 100644
index b37b9864..00000000
--- a/front/src/Phaser/Entity/body_character.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-import LoaderPlugin = Phaser.Loader.LoaderPlugin;
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character";
-import {CharacterTexture} from "../../Connexion/LocalUser";
-
-export interface BodyResourceDescriptionInterface {
-    name: string,
-    img: string
-}
-
-export const COLOR_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name:"color_1", img: "resources/customisation/character_color/character_color0.png"},
-    {name:"color_2", img: "resources/customisation/character_color/character_color1.png"},
-    {name:"color_3", img: "resources/customisation/character_color/character_color2.png"},
-    {name:"color_4", img: "resources/customisation/character_color/character_color3.png"},
-    {name:"color_5", img: "resources/customisation/character_color/character_color4.png"},
-    {name:"color_6", img: "resources/customisation/character_color/character_color5.png"},
-    {name:"color_7", img: "resources/customisation/character_color/character_color6.png"},
-    {name:"color_8", img: "resources/customisation/character_color/character_color7.png"},
-    {name:"color_9", img: "resources/customisation/character_color/character_color8.png"},
-    {name:"color_10",img: "resources/customisation/character_color/character_color9.png"},
-    {name:"color_11",img: "resources/customisation/character_color/character_color10.png"},
-    {name:"color_12",img: "resources/customisation/character_color/character_color11.png"},
-    {name:"color_13",img: "resources/customisation/character_color/character_color12.png"},
-    {name:"color_14",img: "resources/customisation/character_color/character_color13.png"},
-    {name:"color_15",img: "resources/customisation/character_color/character_color14.png"},
-    {name:"color_16",img: "resources/customisation/character_color/character_color15.png"},
-    {name:"color_17",img: "resources/customisation/character_color/character_color16.png"},
-    {name:"color_18",img: "resources/customisation/character_color/character_color17.png"},
-    {name:"color_19",img: "resources/customisation/character_color/character_color18.png"},
-    {name:"color_20",img: "resources/customisation/character_color/character_color19.png"},
-    {name:"color_21",img: "resources/customisation/character_color/character_color20.png"},
-    {name:"color_22",img: "resources/customisation/character_color/character_color21.png"},
-    {name:"color_23",img: "resources/customisation/character_color/character_color22.png"},
-    {name:"color_24",img: "resources/customisation/character_color/character_color23.png"},
-    {name:"color_25",img: "resources/customisation/character_color/character_color24.png"},
-    {name:"color_26",img: "resources/customisation/character_color/character_color25.png"},
-    {name:"color_27",img: "resources/customisation/character_color/character_color26.png"},
-    {name:"color_28",img: "resources/customisation/character_color/character_color27.png"},
-    {name:"color_29",img: "resources/customisation/character_color/character_color28.png"},
-    {name:"color_30",img: "resources/customisation/character_color/character_color29.png"},
-    {name:"color_31",img: "resources/customisation/character_color/character_color30.png"},
-    {name:"color_32",img: "resources/customisation/character_color/character_color31.png"},
-    {name:"color_33",img: "resources/customisation/character_color/character_color32.png"}
-];
-
-export const EYES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"},
-    {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"},
-    {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"},
-    {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"},
-    {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"},
-    {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"},
-    {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"},
-    {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"},
-    {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"},
-    {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"},
-    {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"},
-    {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"},
-    {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"},
-    {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"},
-    {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"},
-    {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"},
-    {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"},
-    {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"},
-    {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"},
-    {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"},
-    {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"},
-    {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"},
-    {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"},
-    {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"},
-    {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"},
-    {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"},
-    {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"},
-    {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"},
-    {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"},
-    {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"}
-
-]
-
-export const HAIR_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"},
-    {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"},
-    {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"},
-    {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"},
-    {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"},
-    {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"},
-    {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"},
-    {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"},
-    {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"},
-    {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"},
-    {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"},
-    {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"},
-    {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"},
-    {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"},
-    {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"},
-    {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"},
-    {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"},
-    {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"},
-    {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"},
-    {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"},
-    {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"},
-    {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"},
-    {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"},
-    {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"},
-    {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"},
-    {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"},
-    {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"},
-    {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"},
-    {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"},
-    {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"},
-    {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"},
-    {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"},
-    {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"},
-    {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"},
-    {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"},
-    {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"},
-    {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"},
-    {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"},
-    {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"},
-    {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"},
-    {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"},
-    {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"},
-    {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"},
-    {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"},
-    {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"},
-    {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"},
-    {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"},
-    {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"},
-    {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"},
-    {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"},
-    {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"},
-    {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"},
-    {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"},
-    {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"},
-    {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"},
-    {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"},
-    {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"},
-    {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"},
-    {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"},
-    {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"},
-    {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"},
-    {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"},
-    {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"},
-    {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"},
-    {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"},
-    {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"},
-    {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"},
-    {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"},
-    {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"},
-    {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"},
-    {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"},
-    {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"},
-    {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"},
-    {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"}
-];
-
-
-export const CLOTHES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"},
-    {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"},
-    {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"},
-    {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"},
-    {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"},
-    {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"},
-    {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"},
-    {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"},
-    {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"},
-    {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"},
-    {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"},
-    {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"},
-    {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"},
-    {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"},
-    {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"},
-    {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"},
-    {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"},
-    {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"},
-    {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"},
-    {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"},
-    {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"},
-    {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"},
-    {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"},
-    {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"},
-    {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"},
-    {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"},
-    {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"},
-    {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"},
-    {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"},
-    {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"},
-    {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"},
-    {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"},
-    {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"},
-    {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"},
-    {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"},
-    {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"},
-    {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"},
-    {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"},
-    {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"},
-    {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"},
-    {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"},
-    {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"},
-    {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"},
-    {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"},
-    {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"},
-    {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"},
-    {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"},
-    {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"},
-    {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"},
-    {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"},
-    {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"},
-    {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"},
-    {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"},
-    {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"},
-    {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"},
-    {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"},
-    {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"},
-    {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"},
-    {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"},
-    {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"},
-    {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"},
-    {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"},
-    {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"},
-    {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"},
-    {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"},
-    {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"},
-    {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"},
-    {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"},
-    {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"},
-    {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"},
-    {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"},
-    {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"},
-    {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"},
-    {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"}
-];
-
-export const HATS_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"},
-    {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"},
-    {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"},
-    {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"},
-    {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"},
-    {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"},
-    {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"},
-    {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"},
-    {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"},
-    {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"},
-    {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"},
-    {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"},
-    {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"},
-    {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"},
-    {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"},
-    {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"},
-    {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"},
-    {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"},
-    {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"},
-    {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"},
-    {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"},
-    {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"},
-    {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"},
-    {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"},
-    {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"},
-    {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"},
-    {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"}
-];
-
-export const ACCESSORIES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"},
-    {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"},
-    {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"},
-    {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"},
-    {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"},
-    {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"},
-    {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"},
-    {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"},
-    {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"},
-    {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"},
-    {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"},
-    {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"},
-    {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"},
-    {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"},
-    {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"},
-    {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"},
-    {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"},
-    {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"},
-    {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"},
-    {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"},
-    {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"},
-    {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"},
-    {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"},
-    {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"},
-    {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"},
-    {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"},
-    {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"},
-    {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"},
-    {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"},
-    {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"},
-    {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"},
-    {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"},
-    {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"},
-    {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"}
-];
-
-export const LAYERS: Array<Array<BodyResourceDescriptionInterface>> = [
-    COLOR_RESOURCES,
-    EYES_RESOURCES,
-    HAIR_RESOURCES,
-    CLOTHES_RESOURCES,
-    HATS_RESOURCES,
-    ACCESSORIES_RESOURCES
-];
-
-export const loadAllLayers = (load: LoaderPlugin) => {
-    for (let j = 0; j < LAYERS.length; j++) {
-        for (let i = 0; i < LAYERS[j].length; i++) {
-            load.spritesheet(
-                LAYERS[j][i].name,
-                LAYERS[j][i].img,
-                {frameWidth: 32, frameHeight: 32}
-            )
-        }
-    }
-}
-
-export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
-    const name = 'customCharacterTexture'+texture.id;
-    load.spritesheet(
-        name,
-        texture.url,
-        {frameWidth: 32, frameHeight: 32}
-    );
-}
-
-export const OBJECTS: Array<PlayerResourceDescriptionInterface> = [
-    {name:'layout_modes', img:'resources/objects/layout_modes.png'},
-    {name:'teleportation', img:'resources/objects/teleportation.png'},
-];
-
-export const loadObject = (load: LoaderPlugin) => {
-    for (let j = 0; j < OBJECTS.length; j++) {
-        load.spritesheet(
-            OBJECTS[j].name,
-            OBJECTS[j].img,
-            {frameWidth: 32, frameHeight: 32}
-        )
-    }
-}
-
-export const loadPlayerCharacters = (load: LoaderPlugin) => {
-    PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
-        load.spritesheet(
-            playerResource.name,
-            playerResource.img,
-            {frameWidth: 32, frameHeight: 32}
-        );
-    });
-}
diff --git a/front/src/Phaser/Game/AddPlayerInterface.ts b/front/src/Phaser/Game/AddPlayerInterface.ts
index e0c7df0f..0edf197e 100644
--- a/front/src/Phaser/Game/AddPlayerInterface.ts
+++ b/front/src/Phaser/Game/AddPlayerInterface.ts
@@ -1,5 +1,5 @@
 import {PointInterface} from "../../Connexion/ConnexionModels";
-import {BodyResourceDescriptionInterface} from "../Entity/body_character";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 
 export interface AddPlayerInterface {
     userId: number;
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 3b87472e..2a41e17e 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -55,7 +55,10 @@ export class GameManager {
         return this.playerName;
     }
 
-    getCharacterLayers(): string[]|null {
+    getCharacterLayers(): string[] {
+        if (!this.characterLayers) {
+            throw 'characterLayers are not set';
+        }
         return this.characterLayers;
     }
 
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 181592e2..d25c2893 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -30,7 +30,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
-import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character";
+import {lazyLoadPlayerCharacterTextures} from "../Entity/PlayerTexturesLoadingManager";
 import {
     CenterListener,
     layoutManager,
@@ -66,7 +66,7 @@ import {ChatModeIcon} from "../Components/ChatModeIcon";
 import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
 import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {TextureError} from "../../Exception/TextureError";
-import {TextField} from "../Components/TextField";
+import {addLoader} from "../Components/Loader";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -181,7 +181,7 @@ export class GameScene extends ResizableScene implements CenterListener {
 
     //hook preload scene
     preload(): void {
-        this.initProgressBar();
+        addLoader(this);
 
         this.load.image(openChatIconName, 'resources/objects/talk.png');
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
@@ -201,28 +201,10 @@ export class GameScene extends ResizableScene implements CenterListener {
             this.onMapLoad(data);
         }
 
-        //add player png
-        loadPlayerCharacters(this.load);
-        loadAllLayers(this.load);
-        loadObject(this.load);
-
+        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');
     }
 
-    private initProgressBar(): void {
-        const loadingText = this.add.text(this.game.renderer.width / 2, 200, 'Loading');
-        const progress = this.add.graphics();
-        this.load.on('progress', (value: number) => {
-            progress.clear();
-            progress.fillStyle(0xffffff, 1);
-            progress.fillRect(0, 270, 800 * value, 60);
-        });
-        this.load.on('complete', () => {
-            loadingText.destroy();
-            progress.destroy();
-        });
-    }
-
     // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private async onMapLoad(data: any): Promise<void> {
@@ -340,11 +322,7 @@ export class GameScene extends ResizableScene implements CenterListener {
             throw 'playerName is not set';
         }
         this.playerName = playerName;
-        const characterLayers = gameManager.getCharacterLayers();
-        if (!characterLayers) {
-            throw 'characterLayers are not set';
-        }
-        this.characterLayers = characterLayers;
+        this.characterLayers = gameManager.getCharacterLayers();
 
 
         //initalise map
@@ -877,15 +855,15 @@ export class GameScene extends ResizableScene implements CenterListener {
     }
 
     createCurrentPlayer(){
-        //initialise player
         //TODO create animation moving between exit and start
+        const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, this.characterLayers);
         try {
             this.CurrentPlayer = new Player(
                 this,
                 this.startX,
                 this.startY,
                 this.playerName,
-                this.characterLayers,
+                texturesPromise,
                 PlayerAnimationNames.WalkDown,
                 false,
                 this.userInputManager
@@ -1061,11 +1039,8 @@ export class GameScene extends ResizableScene implements CenterListener {
             event: addPlayerData
         });
     }
-
-    /**
-     * Create new player
-     */
-    private async doAddPlayer(addPlayerData : AddPlayerInterface) : Promise<void> {
+    
+    private doAddPlayer(addPlayerData : AddPlayerInterface): void {
         //check if exist player, if exist, move position
         if(this.MapPlayersByKey.has(addPlayerData.userId)){
             this.updatePlayerPosition({
@@ -1074,39 +1049,21 @@ export class GameScene extends ResizableScene implements CenterListener {
             });
             return;
         }
-        // Load textures (in case it is a custom texture)
-        const characterLayerList: string[] = [];
-        const loadPromises: Promise<void>[] = [];
-        for (const characterLayer of addPlayerData.characterLayers) {
-            characterLayerList.push(characterLayer.name);
-            if (characterLayer.img) {
-                console.log('LOADING ', characterLayer.name, characterLayer.img)
-                loadPromises.push(this.loadSpritesheet(characterLayer.name, characterLayer.img));
-            }
-        }
-        if (loadPromises.length > 0) {
-            this.load.start();
-        }
 
-        //initialise player
+        const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, addPlayerData.characterLayers);
         const player = new RemotePlayer(
             addPlayerData.userId,
             this,
             addPlayerData.position.x,
             addPlayerData.position.y,
             addPlayerData.name,
-            [], // Let's go with no textures and let's load textures when promises have returned.
+            texturesPromise,
             addPlayerData.position.direction,
             addPlayerData.position.moving
         );
         this.MapPlayers.add(player);
         this.MapPlayersByKey.set(player.userId, player);
         player.updatePosition(addPlayerData.position);
-
-
-        await Promise.all(loadPromises);
-
-        player.addTextures(characterLayerList, 1);
     }
 
     /**
@@ -1262,23 +1219,5 @@ export class GameScene extends ResizableScene implements CenterListener {
         mediaManager.removeTriggerCloseJitsiFrameButton('close-jisi');
     }
 
-    private loadSpritesheet(name: string, url: string): Promise<void> {
-        return new Promise<void>(((resolve, reject) => {
-            if (this.textures.exists(name)) {
-                resolve();
-                return;
-            }
-            this.load.spritesheet(
-                name,
-                url,
-                {frameWidth: 32, frameHeight: 32}
-            );
-            this.load.on('filecomplete-spritesheet-'+name, () => {
-                console.log('RESOURCE LOADED!');
-                resolve();
-            });
-        }))
-    }
-
 
 }
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 944b57f9..2cc58a8e 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -2,15 +2,14 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
 import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {BodyResourceDescriptionInterface, LAYERS, loadAllLayers, loadCustomTexture} from "../Entity/body_character";
+import {loadAllLayers, loadCustomTexture} 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 {PlayerResourceDescriptionInterface} from "../Entity/Character";
-import {SelectCharacterSceneName} from "./SelectCharacterScene";
-import {LoginSceneName} from "./LoginScene";
+import {addLoader} from "../Components/Loader";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -48,16 +47,13 @@ export class CustomizeScene extends ResizableScene {
     }
 
     preload() {
+        addLoader(this);
         this.load.image(CustomizeTextures.arrowRight, "resources/objects/arrow_right.png");
         this.load.image(CustomizeTextures.icon, "resources/logos/tcm_full.png");
         this.load.image(CustomizeTextures.arrowUp, "resources/objects/arrow_up.png");
         this.load.bitmapFont(CustomizeTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
 
-        //load all the png files
-        loadAllLayers(this.load);
-
-        // load custom layers
-        this.layers = LAYERS;
+        this.layers = loadAllLayers(this.load);
 
         const localUser = localUserStore.getLocalUser();
 
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index b6afa993..8d7202a8 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -2,11 +2,9 @@ import {gameManager} from "../Game/GameManager";
 import {TextField} from "../Components/TextField";
 import {TextInput} from "../Components/TextInput";
 import Image = Phaser.GameObjects.Image;
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
-import {EnableCameraSceneName} from "./EnableCameraScene";
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
@@ -37,14 +35,6 @@ export class LoginScene extends ResizableScene {
         // 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');
         cypressAsserter.preloadFinished();
-        //add player png
-        PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
-            this.load.spritesheet(
-                playerResource.name,
-                playerResource.img,
-                {frameWidth: 32, frameHeight: 32}
-            );
-        });
     }
 
     create() {
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index c09d2d92..723638f5 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -2,11 +2,13 @@ import {gameManager} from "../Game/GameManager";
 import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
 import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
+import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
+import {addLoader} from "../Components/Loader";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 
 
 //todo: put this constants in a dedicated file
@@ -32,6 +34,7 @@ export class SelectCharacterScene extends ResizableScene {
     private selectedRectangleYPos = 0; // Number of the character selected in the columns
     private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
     private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
+    private playerModels!: BodyResourceDescriptionInterface[];
 
     constructor() {
         super({
@@ -40,18 +43,12 @@ export class SelectCharacterScene extends ResizableScene {
     }
 
     preload() {
+        addLoader(this);
         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');
-        //add player png
-        PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
-            this.load.spritesheet(
-                playerResource.name,
-                playerResource.img,
-                {frameWidth: 32, frameHeight: 32}
-            );
-        });
+        this.playerModels = loadAllDefaultModels(this.load);
         this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
         this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
     }
@@ -85,7 +82,7 @@ export class SelectCharacterScene extends ResizableScene {
             this.updateSelectedPlayer();
         });
         this.input.keyboard.on('keydown-DOWN', () => {
-            if (this.selectedRectangleYPos < Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
+            if (this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
                 this.selectedRectangleYPos++;
             }
             this.updateSelectedPlayer();
@@ -106,7 +103,7 @@ export class SelectCharacterScene extends ResizableScene {
             this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow);
             this.updateSelectedPlayer();
         } else if (playerNumber === -1) {
-            this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
+            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
             this.updateSelectedPlayer();
         }
     }
@@ -127,8 +124,8 @@ export class SelectCharacterScene extends ResizableScene {
     }
 
     createCurrentPlayer(): void {
-        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
-            const playerResource = PLAYER_RESOURCES[i];
+        for (let i = 0; i <this.playerModels.length; i++) {
+            const playerResource = this.playerModels[i];
 
             const col = i % this.nbCharactersPerRow;
             const row = Math.floor(i / this.nbCharactersPerRow);
@@ -160,12 +157,12 @@ export class SelectCharacterScene extends ResizableScene {
         this.add.existing(this.customizeButtonSelected);
 
         this.customizeButton.setInteractive().on("pointerdown", () => {
-            this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
+            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
             this.updateSelectedPlayer();
         });
 
         this.selectedPlayer = this.players[0];
-        this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
+        this.selectedPlayer.play(this.playerModels[0].name);
     }
 
     /**
@@ -181,7 +178,7 @@ export class SelectCharacterScene extends ResizableScene {
     private updateSelectedPlayer(): void {
         this.selectedPlayer?.anims.pause();
         // If we selected the customize button
-        if (this.selectedRectangleYPos === Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
+        if (this.selectedRectangleYPos === Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
             this.selectedPlayer = null;
             this.selectedRectangle.setVisible(false);
             this.customizeButtonSelected.setVisible(true);
@@ -198,7 +195,7 @@ export class SelectCharacterScene extends ResizableScene {
         this.selectedRectangle.setSize(32, 32);
         const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
         const player = this.players[playerNumber];
-        player.play(PLAYER_RESOURCES[playerNumber].name);
+        player.play(this.playerModels[playerNumber].name);
         this.selectedPlayer = player;
         localUserStore.setPlayerCharacterIndex(playerNumber);
     }
@@ -211,7 +208,7 @@ export class SelectCharacterScene extends ResizableScene {
         this.customizeButton.x = this.game.renderer.width / 2;
         this.customizeButtonSelected.x = this.game.renderer.width / 2;
 
-        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
+        for (let i = 0; i <this.playerModels.length; i++) {
             const player = this.players[i];
 
             const col = i % this.nbCharactersPerRow;
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index b9c1c91a..a5096ebb 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -19,12 +19,12 @@ export class Player extends Character implements CurrentGamerInterface {
         x: number,
         y: number,
         name: string,
-        PlayerTextures: string[],
+        texturesPromise: Promise<string[]>,
         direction: string,
         moving: boolean,
         private userInputManager: UserInputManager
     ) {
-        super(Scene, x, y, PlayerTextures, name, direction, moving, 1);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1);
 
         //the current player model should be push away by other players to prevent conflict
         this.getBody().setImmovable(false);

From f8d4b696e8aa992fe1ed334501d0141fdee008bb Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Tue, 12 Jan 2021 13:19:51 +0100
Subject: [PATCH 23/28] Customise characters with admin console

 - Add new characters choise
 - Display on 3 line of 6 pers
 - Add custom characters from admin console wilth level -1
---
 front/src/Phaser/Entity/PlayerTextures.ts        |  4 +++-
 .../Entity/PlayerTexturesLoadingManager.ts       |  2 +-
 front/src/Phaser/Login/CustomizeScene.ts         |  3 +++
 front/src/Phaser/Login/SelectCharacterScene.ts   | 16 ++++++++++++++--
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts
index 6d0f99c0..8a560b56 100644
--- a/front/src/Phaser/Entity/PlayerTextures.ts
+++ b/front/src/Phaser/Entity/PlayerTextures.ts
@@ -18,6 +18,7 @@ export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
     "male6": {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"},
     "male7": {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"},
     "male8": {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"},
+    "male9": {name: "male9", img: "resources/characters/pipoya/Teacher male 02.png"},
     "Female1": {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"},
     "Female2": {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"},
     "Female3": {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"},
@@ -25,7 +26,8 @@ export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
     "Female5": {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"},
     "Female6": {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"},
     "Female7": {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"},
-    "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"}
+    "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"},
+    "Female9": {name: "Female9", img: "resources/characters/pipoya/Female 07-2.png"}
 };
 
 export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {
diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
index 6f684b2d..c2a421e5 100644
--- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
+++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts
@@ -26,9 +26,9 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio
 export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
     const name = 'customCharacterTexture'+texture.id;
     load.spritesheet(name,texture.url,{frameWidth: 32, frameHeight: 32});
+    return name;
 }
 
-
 export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array<string|BodyResourceDescriptionInterface>): Promise<string[]> => {
     const promisesList:Promise<void>[] = [];
     texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => {
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 2cc58a8e..c6364ef6 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -60,6 +60,9 @@ export class CustomizeScene extends ResizableScene {
         const textures = localUser?.textures;
         if (textures) {
             for (const texture of textures) {
+                if(texture.level === -1){
+                    continue;
+                }
                 loadCustomTexture(this.load, texture);
                 const name = 'customCharacterTexture'+texture.id;
                 this.layers[texture.level].unshift({
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 723638f5..82a9f75c 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -6,7 +6,7 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
 import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
-import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
+import {loadAllDefaultModels, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
 import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 
@@ -22,7 +22,7 @@ enum LoginTextures {
 }
 
 export class SelectCharacterScene extends ResizableScene {
-    private readonly nbCharactersPerRow = 4;
+    private readonly nbCharactersPerRow = 6;
     private textField!: TextField;
     private pressReturnField!: TextField;
     private logo!: Image;
@@ -51,6 +51,18 @@ export class SelectCharacterScene extends ResizableScene {
         this.playerModels = loadAllDefaultModels(this.load);
         this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
         this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
+
+        const localUser = localUserStore.getLocalUser();
+        const textures = localUser?.textures;
+        if (textures) {
+            for (const texture of textures) {
+                if(texture.level !== -1){
+                    continue;
+                }
+                const name = loadCustomTexture(this.load, texture);
+                this.playerModels.push({name: name, img: texture.url});
+            }
+        }
     }
 
     create() {

From 123ee4bc43c5d30efe69286c5390b79e683f840c Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Tue, 12 Jan 2021 15:29:26 +0100
Subject: [PATCH 24/28] Fix responsive and limite select cursor

---
 .../src/Phaser/Login/SelectCharacterScene.ts  | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 82a9f75c..a7f17576 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -67,8 +67,11 @@ export class SelectCharacterScene extends ResizableScene {
 
     create() {
         this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
-
-        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start');
+        this.pressReturnField = new TextField(
+            this,
+            this.game.renderer.width / 2,
+            90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 40,
+            'Press enter to start');
 
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
 
@@ -82,25 +85,38 @@ export class SelectCharacterScene extends ResizableScene {
         });
 
         this.input.keyboard.on('keydown-RIGHT', () => {
-            if (this.selectedRectangleXPos < this.nbCharactersPerRow - 1) {
+            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) {
+            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)) {
+            if (
+                this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)
+                && (((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length
+            ) {
                 this.selectedRectangleYPos++;
             }
             this.updateSelectedPlayer();
         });
         this.input.keyboard.on('keydown-UP', () => {
-            if (this.selectedRectangleYPos > 0) {
+            if (
+                this.selectedRectangleYPos > 0
+                && (((this.selectedRectangleYPos - 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length
+            ) {
                 this.selectedRectangleYPos--;
             }
             this.updateSelectedPlayer();
@@ -160,10 +176,11 @@ export class SelectCharacterScene extends ResizableScene {
             this.players.push(player);
         }
 
-        this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, LoginTextures.customizeButton);
+        const maxRow = Math.ceil( this.playerModels.length / this.nbCharactersPerRow);
+        this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * maxRow + 6, LoginTextures.customizeButton);
         this.customizeButton.setOrigin(0.5, 0.5);
         this.add.existing(this.customizeButton);
-        this.customizeButtonSelected = new Image(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, LoginTextures.customizeButtonSelected);
+        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);

From 987c80c9c4e025138f7cef9c2003ca46327da6d4 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Tue, 12 Jan 2021 19:48:48 +0100
Subject: [PATCH 25/28] Fix menu

---
 front/src/Phaser/Menu/MenuScene.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index 3b4c7318..8bd64cd1 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@@ -110,6 +110,7 @@ export class MenuScene extends Phaser.Scene {
         if (!this.sideMenuOpened) return;
         this.sideMenuOpened = false;
         this.closeAll();
+        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
         gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole();
         this.tweens.add({
             targets: this.menuElement,
@@ -121,6 +122,7 @@ export class MenuScene extends Phaser.Scene {
 
     private openGameSettingsMenu(): void {
         if (this.settingsMenuOpened) {
+            this.closeGameQualityMenu();
             return;
         }
         //close all
@@ -278,6 +280,5 @@ export class MenuScene extends Phaser.Scene {
     private closeAll(){
         this.closeGameQualityMenu();
         this.closeGameShare();
-        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
     }
 }

From 993c58cf8ee383b9df6d29e84fbc9c867d50367b Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Tue, 12 Jan 2021 19:49:48 +0100
Subject: [PATCH 26/28] Fix select rectangle for customize scene

---
 front/src/Phaser/Login/SelectCharacterScene.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index a7f17576..25af61c6 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -106,7 +106,10 @@ export class SelectCharacterScene extends ResizableScene {
         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
+                && (
+                    (((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++;
             }

From 512be7acd28462792baa2c2bddd272a1938902c1 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Wed, 13 Jan 2021 16:46:24 +0100
Subject: [PATCH 27/28] New basic characters

---
 front/src/Phaser/Entity/PlayerTextures.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts
index 8a560b56..7d10cc1a 100644
--- a/front/src/Phaser/Entity/PlayerTextures.ts
+++ b/front/src/Phaser/Entity/PlayerTextures.ts
@@ -18,7 +18,11 @@ export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
     "male6": {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"},
     "male7": {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"},
     "male8": {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"},
-    "male9": {name: "male9", img: "resources/characters/pipoya/Teacher male 02.png"},
+    "male9": {name: "male9", img: "resources/characters/pipoya/Male 07-2.png"},
+    "male10": {name: "male10", img: "resources/characters/pipoya/Male 05-3.png"},
+    "male11": {name: "male11", img: "resources/characters/pipoya/Teacher male 02.png"},
+    "male12": {name: "male12", img: "resources/characters/pipoya/su4 Student male 12.png"},
+
     "Female1": {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"},
     "Female2": {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"},
     "Female3": {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"},
@@ -27,7 +31,10 @@ export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
     "Female6": {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"},
     "Female7": {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"},
     "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"},
-    "Female9": {name: "Female9", img: "resources/characters/pipoya/Female 07-2.png"}
+    "Female9": {name: "Female9", img: "resources/characters/pipoya/Female 07-2.png"},
+    "Female10": {name: "Female10", img: "resources/characters/pipoya/Female 05-3.png"},
+    "Female11": {name: "Female11", img: "resources/characters/pipoya/Teacher fmale 02.png"},
+    "Female12": {name: "Female12", img: "resources/characters/pipoya/su4 Student fmale 12.png"},
 };
 
 export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {

From 8cf481ec49c4ba5db829add25aecee590db1b5bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 13 Jan 2021 18:39:28 +0100
Subject: [PATCH 28/28] Fixing bug when no WebGL is available

The switch to Phaser 3.50 introduced a bug when WebGL is not available in a browser.
The changes in this commit prevent calls to the WebGL pipeline if the pipeline is not available.
---
 front/src/Phaser/Items/ActionableItem.ts | 6 ++++--
 front/src/index.ts                       | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/front/src/Phaser/Items/ActionableItem.ts b/front/src/Phaser/Items/ActionableItem.ts
index a1548f41..e32bad1a 100644
--- a/front/src/Phaser/Items/ActionableItem.ts
+++ b/front/src/Phaser/Items/ActionableItem.ts
@@ -42,8 +42,10 @@ export class ActionableItem {
             return;
         }
         this.isSelectable = true;
-        this.sprite.setPipeline(OutlinePipeline.KEY);
-        this.sprite.pipeline.set2f('uTextureSize', this.sprite.texture.getSourceImage().width, this.sprite.texture.getSourceImage().height);
+        if (this.sprite.pipeline) {
+            this.sprite.setPipeline(OutlinePipeline.KEY);
+            this.sprite.pipeline.set2f('uTextureSize', this.sprite.texture.getSourceImage().width, this.sprite.texture.getSourceImage().height);
+        }
     }
 
     /**
diff --git a/front/src/index.ts b/front/src/index.ts
index 46d38a3b..abca6036 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -73,9 +73,10 @@ const config: GameConfig = {
     },
     callbacks: {
         postBoot: game => {
-            // FIXME: we should fore WebGL in the config.
-            const renderer = game.renderer as WebGLRenderer;
-            renderer.pipelines.add(OutlinePipeline.KEY, new OutlinePipeline(game));
+            const renderer = game.renderer;
+            if (renderer instanceof WebGLRenderer) {
+                renderer.pipelines.add(OutlinePipeline.KEY, new OutlinePipeline(game));
+            }
         }
     }
 };
