From f11e93614327f4e156302101c5f05a94a49ac979 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Fri, 23 Apr 2021 03:59:14 +0200
Subject: [PATCH] Refactoring & fix feedback WorkAdventure

---
 .../resources/html/CustomCharacterScene.html  |  13 +-
 .../resources/html/EnableCameraScene.html     |   4 +-
 .../resources/html/SelectCharacterScene.html  |  17 ++-
 .../resources/html/SelectCompanionScene.html  |   3 +
 front/dist/resources/html/gameMenu.html       |   3 +
 front/dist/resources/html/gameMenuIcon.html   |   3 +
 .../dist/resources/html/gameQualityMenu.html  |   4 +-
 front/dist/resources/html/gameReport.html     |   3 +
 front/dist/resources/html/gameShare.html      |   3 +
 .../resources/html/helpCameraSettings.html    |   3 +
 front/dist/resources/html/loginScene.html     |   3 +
 .../dist/resources/html/warningContainer.html |   3 +
 front/src/Enum/EnvironmentVariable.ts         |   2 +
 front/src/Phaser/Login/CustomizeScene.ts      |  87 ++++++++----
 front/src/Phaser/Login/EnableCameraScene.ts   |   1 -
 front/src/Phaser/Login/LoginScene.ts          |  11 +-
 .../Login/SelectCharacterMobileScene.ts       |  77 +++++++++++
 .../src/Phaser/Login/SelectCharacterScene.ts  | 128 +++++++++---------
 .../src/Phaser/Login/SelectCompanionScene.ts  |   7 -
 .../Phaser/Menu/HelpCameraSettingsScene.ts    |   1 -
 front/src/index.ts                            |  15 +-
 21 files changed, 275 insertions(+), 116 deletions(-)
 create mode 100644 front/src/Phaser/Login/SelectCharacterMobileScene.ts

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
index a1f4f24a..0c39d1e3 100644
--- a/front/dist/resources/html/CustomCharacterScene.html
+++ b/front/dist/resources/html/CustomCharacterScene.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #customizeScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
@@ -8,7 +11,7 @@
         overflow: scroll;
         width: 42vw;
         height: 38vh;
-        max-width: 300px;
+        /*max-width: 300px;*/
         max-height: 40vh;
     }
     #customizeScene h1 {
@@ -48,7 +51,7 @@
         width: 100%;
     }
     #customizeScene section.action.action-move { 
-        top: 96%;
+        top: 55%;
     }
     #customizeScene button {
         margin: 2px 10px;
@@ -140,11 +143,11 @@
     <section class="action action-move">
         <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
         <button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>
+        <!--<button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
+        <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
     </section>
     <section class="action">
         <a type="submit" id="customizeSceneFormBack">Back</a>
-        <button type="submit" id="customizeSceneFormSubmit">Finish</button>
+        <button type="submit" id="customizeSceneFormSubmit">Next</button>
     </section>
 </form>
diff --git a/front/dist/resources/html/EnableCameraScene.html b/front/dist/resources/html/EnableCameraScene.html
index 9e737149..6f22dd31 100644
--- a/front/dist/resources/html/EnableCameraScene.html
+++ b/front/dist/resources/html/EnableCameraScene.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #enableCameraScene {
         background: #000000;
         /*border: 1px solid #ebeeee;*/
@@ -54,7 +57,6 @@
         color: #ebeeee;
         border-radius: 7px;
         padding-bottom: 4px;
-        width: 100px;
     }
     #enableCameraScene button#enableCameraSceneFormCancel {
         background-color: #c7c7c700;
diff --git a/front/dist/resources/html/SelectCharacterScene.html b/front/dist/resources/html/SelectCharacterScene.html
index aa78b27b..9425cfbb 100644
--- a/front/dist/resources/html/SelectCharacterScene.html
+++ b/front/dist/resources/html/SelectCharacterScene.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #selectCharacterScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
@@ -9,6 +12,7 @@
         overflow: scroll;
         max-width: 300px;
         width: 40vw;
+        overflow: unset;
     }
     #selectCharacterScene h1 {
         background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -42,7 +46,7 @@
     #selectCharacterScene section.action {
         text-align: center;
         margin: 0;
-        margin-top: 20vh;
+        margin-top: 28vh;
     }
     #selectCharacterScene button {
         margin: 10px 0px;
@@ -98,9 +102,11 @@
         width: 25px;
     }
     #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
+        display: none;
         left: 1vw;
     }
     #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
+        display: none;
         right: 1vw;
     }
     #selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
@@ -110,6 +116,15 @@
         background-color: #ffd700;
         color: black;
     }
+    @media only screen and (max-width: 800px),
+            only screen and (max-height: 600px) {
+        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
+            display: block;
+        }
+        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
+            display: block;
+        }
+    }
 </style>
 
 <form id="selectCharacterScene" hidden>
diff --git a/front/dist/resources/html/SelectCompanionScene.html b/front/dist/resources/html/SelectCompanionScene.html
index f539cdb4..8112f035 100644
--- a/front/dist/resources/html/SelectCompanionScene.html
+++ b/front/dist/resources/html/SelectCompanionScene.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #selectCompanionScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html
index 399cf349..6abf2753 100644
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameMenu main{
         margin-top: 15px;
     }
diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html
index 22fe9867..e0a1f782 100644
--- a/front/dist/resources/html/gameMenuIcon.html
+++ b/front/dist/resources/html/gameMenuIcon.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #menuIcon button {
         background-color: black;
         color: white;
diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html
index fa7210bc..09c74dee 100644
--- a/front/dist/resources/html/gameQualityMenu.html
+++ b/front/dist/resources/html/gameQualityMenu.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameQuality {
         background: #eceeee;
         border: 1px solid #42464b;
@@ -47,7 +50,6 @@
         color: white;
         border-radius: 7px;
         padding-bottom: 4px;
-        width: 60px;
     }
     #gameQuality button#gameQualityFormCancel {
         background-color: #c7c7c700;
diff --git a/front/dist/resources/html/gameReport.html b/front/dist/resources/html/gameReport.html
index d35ae556..9ea16b74 100644
--- a/front/dist/resources/html/gameReport.html
+++ b/front/dist/resources/html/gameReport.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameReport {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/gameShare.html b/front/dist/resources/html/gameShare.html
index 404c8680..00222437 100644
--- a/front/dist/resources/html/gameShare.html
+++ b/front/dist/resources/html/gameShare.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #gameShare {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/helpCameraSettings.html b/front/dist/resources/html/helpCameraSettings.html
index cdaf69a0..557c6eff 100644
--- a/front/dist/resources/html/helpCameraSettings.html
+++ b/front/dist/resources/html/helpCameraSettings.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #helpCameraSettings {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html
index 91c1cfbc..a17cf9b5 100644
--- a/front/dist/resources/html/loginScene.html
+++ b/front/dist/resources/html/loginScene.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #loginScene {
         background: #000000;
         /*border: 1px solid #ebeeee;*/
diff --git a/front/dist/resources/html/warningContainer.html b/front/dist/resources/html/warningContainer.html
index 832ac4da..4989c49d 100644
--- a/front/dist/resources/html/warningContainer.html
+++ b/front/dist/resources/html/warningContainer.html
@@ -1,4 +1,7 @@
 <style>
+    *{
+        font-family: PixelFont-7,monospace!important;
+    }
     #warningMain {
         border-radius: 5px;
         height: 100px;
diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 11479b0f..5d6a5ea6 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -17,6 +17,8 @@ const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new
 export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
 export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
 
+export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
+
 export {
     DEBUG_MODE,
     START_ROOM_URL,
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 12fb2a7e..f5bec168 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -1,12 +1,9 @@
 import {EnableCameraSceneName} from "./EnableCameraScene";
-import {TextField} from "../Components/TextField";
-import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {loadAllLayers, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
+import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
 import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
-import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
 import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
@@ -17,34 +14,12 @@ import { SelectCharacterSceneName } from "./SelectCharacterScene";
 
 export const CustomizeSceneName = "CustomizeScene";
 
-enum CustomizeTextures{
-    icon = "icon",
-    arrowRight = "arrow_right",
-    mainFont = "main_font",
-    arrowUp = "arrow_up",
-}
-
 export const CustomizeSceneKey = "CustomizeScene";
 const customizeSceneKey = 'customizeScene';
 
 export class CustomizeScene extends AbstractCharacterScene {
-    private arrowRight!: Image;
-    private arrowLeft!: Image;
-
-    private arrowDown!: Image;
-    private arrowUp!: Image;
-
     private Rectangle!: Rectangle;
 
-    private mobileTapUP!: Rectangle;
-    private mobileTapDOWN!: Rectangle;
-    private mobileTapLEFT!: Rectangle;
-    private mobileTapRIGHT!: Rectangle;
-
-    private mobileTapENTER!: Rectangle;
-
-    private logo!: Image;
-
     private selectedLayers: number[] = [0];
     private containersRow: Container[][] = [];
     private activeRow:number = 0;
@@ -91,9 +66,17 @@ export class CustomizeScene extends AbstractCharacterScene {
             }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonUp') {
                 this.moveCursorVertically(-1);
             }else if((event?.target as HTMLInputElement).id === 'customizeSceneFormBack') {
-                this.backToPreviousScene();
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneFormSubmit') {
-                this.nextSceneToCamera();
+                if(this.activeRow > 0){
+                    this.moveCursorVertically(-1);
+                }else{
+                    this.backToPreviousScene();
+                }
+            }else if((event?.target as HTMLButtonElement).id === 'customizeSceneFormSubmit') {
+                if(this.activeRow < 5){
+                    this.moveCursorVertically(1);
+                }else{
+                    this.nextSceneToCamera();
+                }
             }
         });
 
@@ -143,6 +126,17 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     private moveCursorVertically(index:number): void {
+
+        if(index === -1 && this.activeRow === 5){
+            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
+            button.innerText = 'Next';
+        }
+
+        if(index === 1 && this.activeRow === 4){
+            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
+            button.innerText = 'Finish';
+        }
+
         this.activeRow += index;
         if (this.activeRow < 0) {
             this.activeRow = 0
@@ -278,7 +272,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         });
      }
 
-     private getMiddleX() : number{
+     protected getMiddleX() : number{
         return (this.game.renderer.width / 2) -  
         (
             this.customizeSceneElement
@@ -312,4 +306,37 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.scene.sleep(CustomizeSceneName);
         this.scene.run(SelectCharacterSceneName);
     }
+
+    /**
+     * TODO fix me and mutualize code
+     */
+    defineSetupPosition() : {playerX: number, playerY: number, playerScale: number, playserOpactity: number, playerVisible: boolean}{
+        throw new Error('defineSetupPosition cannot be used');
+        return {playerX: 0, playerY: 0, playerScale: 0, playserOpactity: 0, playerVisible: false};
+    }
+
+    /**
+     * TODO fix me and mutualize code
+     */
+    nextSceneToCameraScene(): void {
+        throw new Error('nextSceneToCameraScene cannot be used in this scene');
+    }
+
+    /**
+     * TODO fix me and mutualize code
+     */
+    nextSceneToCustomizeScene(): void {
+        throw new Error('nextSceneToCustomizeScene cannot be used in this scene');
+    }
+
+    /**
+     * TODO fix me and mutualize code
+     * Returns pixel position by on column and row number
+     */
+    getCharacterPosition(): [number, number] {
+        return [
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 2
+        ];
+    }
 }
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index d39ddcd0..deafe15f 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -63,7 +63,6 @@ export class EnableCameraScene extends Phaser.Scene {
     create() {
 
         const middleX = this.getMiddleX();
-        console.log('create => middleX', middleX);
         this.enableCameraSceneElement = this.add.dom(middleX, 0).createFromCache(enableCameraSceneKey);
         MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey);
 
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 12e19b82..95f620b7 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -3,6 +3,7 @@ import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import {MenuScene} from "../Menu/MenuScene";
+import { isUserNameValid } from "../../Connexion/LocalUser";
 
 export const LoginSceneName = "LoginScene";
 
@@ -12,7 +13,6 @@ export class LoginScene extends ResizableScene {
 
     private loginSceneElement!: Phaser.GameObjects.DOMElement;
     private name: string = '';
-    private mobileTapZone!: Phaser.GameObjects.Zone;
 
     constructor() {
         super({
@@ -35,11 +35,14 @@ export class LoginScene extends ResizableScene {
         inputElement.value = localUserStore.getName() ?? '';
         inputElement.focus();
         inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
-            if(inputElement.value.length > 8){
+            if(inputElement.value.length > 7){
                 event.preventDefault();
                 return;
             }
             pErrorElement.innerHTML = '';
+            if(inputElement.value && !isUserNameValid(inputElement.value)){
+                pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
+            }
             if (event.key === 'Enter') {
                 event.preventDefault();
                 this.login(inputElement);
@@ -61,6 +64,10 @@ export class LoginScene extends ResizableScene {
             pErrorElement.innerHTML = 'The name is empty';
             return
         }
+        if(!isUserNameValid(this.name)){
+            pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
+            return
+        }
         if (this.name === '') return
         gameManager.setPlayerName(this.name);
 
diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
new file mode 100644
index 00000000..5d874f46
--- /dev/null
+++ b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
@@ -0,0 +1,77 @@
+import {gameManager} from "../Game/GameManager";
+import {TextField} from "../Components/TextField";
+import Image = Phaser.GameObjects.Image;
+import Rectangle = Phaser.GameObjects.Rectangle;
+import {EnableCameraSceneName} from "./EnableCameraScene";
+import {CustomizeSceneName} from "./CustomizeScene";
+import {localUserStore} from "../../Connexion/LocalUserStore";
+import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
+import {addLoader} from "../Components/Loader";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
+import {AbstractCharacterScene} from "./AbstractCharacterScene";
+import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import {touchScreenManager} from "../../Touch/TouchScreenManager";
+import {PinchManager} from "../UserInput/PinchManager";
+import {MenuScene} from "../Menu/MenuScene";
+import { SelectCharacterScene, SelectCharacterSceneName } from "./SelectCharacterScene";
+
+export class SelectCharacterMobileScene extends SelectCharacterScene {
+
+    create(){
+        super.create();
+        this.selectedRectangle.destroy();
+    }
+    
+    protected defineSetupPlayer(numero: number){
+        const deltaX = 30;
+        const deltaY = 2;
+        let [playerX, playerY] = this.getCharacterPosition();
+        let playerVisible = true;
+        let playerScale = 1.5;
+        let playserOpactity = 1;
+
+        if( this.currentSelectUser !== numero ){
+            playerVisible = false;
+        }
+        if( numero === (this.currentSelectUser + 1) ){
+            playerY -= deltaY;
+            playerX += deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser + 2) ){
+            playerY -= deltaY;
+            playerX += (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 1) ){
+            playerY -= deltaY;
+            playerX -= deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 2) ){
+            playerY -= deltaY;
+            playerX -= (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+    }
+
+        /**
+     * Returns pixel position by on column and row number
+     */
+         protected getCharacterPosition(): [number, number] {
+            return [
+                this.game.renderer.width / 2,
+                this.game.renderer.height / 3
+            ];
+        }
+
+}
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 0482b0e8..c9f41e69 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -1,5 +1,4 @@
 import {gameManager} from "../Game/GameManager";
-import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {EnableCameraSceneName} from "./EnableCameraScene";
@@ -13,29 +12,23 @@ import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {MenuScene} from "../Menu/MenuScene";
-import Zone = Phaser.GameObjects.Zone;
-
+import { SelectCharacterMobileScene } from "./SelectCharacterMobileScene";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
-enum LoginTextures {
-    playButton = "play_button",
-    icon = "icon",
-    mainFont = "main_font",
-    customizeButton = "customize_button",
-    customizeButtonSelected = "customize_button_selected"
-}
 
 const selectCharacterKey = 'selectCharacterScene';
 
 export class SelectCharacterScene extends AbstractCharacterScene {
-    private readonly nbCharactersPerRow = 6;
-    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[];
+    protected readonly nbCharactersPerRow = 6;
+    protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
+    protected players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
+    protected playerModels!: BodyResourceDescriptionInterface[];
 
-    private selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
-    private currentSelectUser = 0;
+    protected selectedRectangle!: Rectangle;
+
+    protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
+    protected currentSelectUser = 0;
 
     constructor() {
         super({
@@ -58,6 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     create() {
+
         const middleX = this.getMiddleX();
         this.selectCharacterSceneElement = this.add.dom(middleX, 0).createFromCache(selectCharacterKey);
         MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
@@ -80,6 +74,10 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             new PinchManager(this);
         }
 
+        const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
+        this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
+        this.selectedRectangle.setDepth(2);
+
         /*create user*/
         this.createCurrentPlayer();
         const playerNumber = localUserStore.getPlayerCharacterIndex();
@@ -94,9 +92,15 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.input.keyboard.on('keydown-LEFT', () => {
             this.moveToLeft();
         });
+        this.input.keyboard.on('keydown-UP', () => {
+            this.moveToUp();
+        });
+        this.input.keyboard.on('keydown-DOWN', () => {
+            this.moveToDown();
+        });
     }
 
-    private nextSceneToCameraScene(): void {
+    protected nextSceneToCameraScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -109,7 +113,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.scene.remove(SelectCharacterSceneName);
     }
 
-    private nextSceneToCustomizeScene(): void {
+    protected nextSceneToCustomizeScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -126,8 +130,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             this.setUpPlayer(player, i);
             this.anims.create({
                 key: playerResource.name,
-                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}),
-                frameRate: 10,
+                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 11}),
+                frameRate: 8,
                 repeat: -1
             });
             player.setInteractive().on("pointerdown", () => {
@@ -144,7 +148,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
     }
 
-    private moveUser(){
+    protected moveUser(){
         for(let i = 0; i < this.players.length; i++){
             const player = this.players[i];
             this.setUpPlayer(player, i);
@@ -152,7 +156,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.updateSelectedPlayer();
     }
 
-    private moveToLeft(){
+    protected moveToLeft(){
         if(this.currentSelectUser === 0){
             return;
         }
@@ -160,7 +164,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    private moveToRight(){
+    protected moveToRight(){
         if(this.currentSelectUser === (this.players.length - 1)){
             return;
         }
@@ -168,48 +172,44 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    private defineSetupPlayer(numero: number){
-        const deltaX = 30;
-        const deltaY = 2;
-        let [playerX, playerY] = this.getCharacterPosition();
-        let playerVisible = true;
-        let playerScale = 1.5;
-        let playserOpactity = 1;
-        if( this.currentSelectUser !== numero ){
-            playerVisible = false;
+    protected moveToUp(){
+        if(this.currentSelectUser < this.nbCharactersPerRow){
+            return;
         }
-        if( numero === (this.currentSelectUser + 1) ){
-            playerY -= deltaY;
-            playerX += deltaX;
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
+        this.currentSelectUser -= this.nbCharactersPerRow;
+        this.moveUser();
+    }
+
+    protected moveToDown(){
+        if((this.currentSelectUser + this.nbCharactersPerRow) > (this.players.length - 1)){
+            return;
         }
-        if( numero === (this.currentSelectUser + 2) ){
-            playerY -= deltaY;
-            playerX += (deltaX * 2);
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
-        }
-        if( numero === (this.currentSelectUser - 1) ){
-            playerY -= deltaY;
-            playerX -= deltaX;
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
-        }
-        if( numero === (this.currentSelectUser - 2) ){
-            playerY -= deltaY;
-            playerX -= (deltaX * 2);
-            playerScale = 0.8;
-            playserOpactity = 0.6;
-            playerVisible = true;
+        this.currentSelectUser += this.nbCharactersPerRow;
+        this.moveUser();
+    }
+
+    protected defineSetupPlayer(numero: number){
+        const deltaX = 32;
+        const deltaY = 32;
+        let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
+
+        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
+        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
+
+        const playerVisible = true;
+        const playerScale = 1;
+        const playserOpactity = 1;
+
+        // if selected
+        if( numero === this.currentSelectUser ){
+            this.selectedRectangle.setX(playerX);
+            this.selectedRectangle.setY(playerY);
         }
+
         return {playerX, playerY, playerScale, playserOpactity, playerVisible}
     }
 
-    private setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
 
         const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
         player.setBounce(0.2);
@@ -224,15 +224,15 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     /**
      * Returns pixel position by on column and row number
      */
-    private getCharacterPosition(): [number, number] {
+    protected getCharacterPosition(): [number, number] {
         return [
             this.game.renderer.width / 2,
-            this.game.renderer.height / 3
+            this.game.renderer.height / 2.5
         ];
     }
 
-    private updateSelectedPlayer(): void {
-        this.selectedPlayer?.anims.pause();
+    protected updateSelectedPlayer(): void {
+        this.selectedPlayer?.anims.pause(this.selectedPlayer?.anims.currentAnim.frames[0]);
         const player = this.players[this.currentSelectUser];
         player.play(this.playerModels[this.currentSelectUser].name);
         this.selectedPlayer = player;
@@ -262,7 +262,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         });
     }
 
-    private getMiddleX() : number{
+    protected getMiddleX() : number{
         return (this.game.renderer.width / 2) -
         (
             this.selectCharacterSceneElement
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index 8ac877cc..e1ce32de 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -10,16 +10,9 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import { MenuScene } from "../Menu/MenuScene";
-import Zone = Phaser.GameObjects.Zone;
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
-enum LoginTextures {
-    playButton = "play_button",
-    icon = "icon",
-    mainFont = "main_font"
-}
-
 const selectCompanionSceneKey = 'selectCompanionScene';
 
 export class SelectCompanionScene extends ResizableScene {
diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
index cd3a007b..dce4e23a 100644
--- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
@@ -123,7 +123,6 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     private getMiddleY() : number{
-        console.log('this.helpCameraSettingsElement.node.getBoundingClientRect()', this.helpCameraSettingsElement.node.getBoundingClientRect());
         const middleY = ((window.innerHeight) - (
             (this.helpCameraSettingsElement
             && this.helpCameraSettingsElement.node
diff --git a/front/src/index.ts b/front/src/index.ts
index 268f857d..26155146 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -2,7 +2,7 @@ import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import "../dist/resources/style/index.scss";
 
-import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
+import {DEBUG_MODE, isMobile, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {LoginScene} from "./Phaser/Login/LoginScene";
 import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
 import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
@@ -17,6 +17,7 @@ import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 import {iframeListener} from "./Api/IframeListener";
+import { SelectCharacterMobileScene } from './Phaser/Login/SelectCharacterMobileScene';
 
 const {width, height} = coWebsiteManager.getGameSize();
 
@@ -67,14 +68,22 @@ switch (phaserMode) {
         throw new Error('phaserMode parameter must be one of "auto", "canvas" or "webgl"');
 }
 
-
 const config: GameConfig = {
     type: mode,
     title: "WorkAdventure",
     width: width / RESOLUTION,
     height: height / RESOLUTION,
     parent: "game",
-    scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
+    scene: [EntryScene, 
+        LoginScene,
+        isMobile() ? SelectCharacterMobileScene : SelectCharacterScene,
+        SelectCompanionScene, 
+        EnableCameraScene, 
+        ReconnectingScene, 
+        ErrorScene, 
+        CustomizeScene, 
+        MenuScene, 
+        HelpCameraSettingsScene],
     zoom: RESOLUTION,
     fps: fps,
     dom: {