From 0a04f5d63103834ea24f705ec6acb3cc3f3854d2 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Thu, 22 Apr 2021 02:29:13 +0200
Subject: [PATCH] Finish select character scene and custom character scene

---
 .../resources/html/CustomCharacterScene.html  | 150 ++++++++
 .../resources/html/SelectCharacterScene.html  | 125 +++++++
 front/dist/resources/html/loginScene.html     |   6 +-
 front/src/Phaser/Login/CustomizeScene.ts      | 236 +++++-------
 .../src/Phaser/Login/SelectCharacterScene.ts  | 344 +++++++++---------
 front/src/Phaser/Menu/MenuScene.ts            |   2 +-
 6 files changed, 534 insertions(+), 329 deletions(-)
 create mode 100644 front/dist/resources/html/CustomCharacterScene.html
 create mode 100644 front/dist/resources/html/SelectCharacterScene.html

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
new file mode 100644
index 00000000..9c1a0795
--- /dev/null
+++ b/front/dist/resources/html/CustomCharacterScene.html
@@ -0,0 +1,150 @@
+<style>
+    #customizeScene {
+        background: #0000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 10px auto 0;
+        color: #ebeeee;
+        overflow: scroll;
+        width: 42vw;
+        height: 38vh;
+        max-width: 300px;
+        max-height: 40vh;
+    }
+    #customizeScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #customizeScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #customizeScene section {
+        margin: 10px;
+    }
+    #customizeScene section.action {
+        text-align: center;
+        position: absolute;
+        bottom: 0;
+        top: 100%;
+        width: 100%;
+    }
+    #customizeScene section.action.action-move { 
+        top: 96%;
+    }
+    #customizeScene button {
+        margin: 2px 10px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+    }
+    #customizeScene button#customizeSceneFormCancel {
+        background-color: #aca6a600;
+        color: #292929;
+    }
+    #customizeScene section h6,
+    #customizeScene section h5{
+        margin: 1px;
+    }
+    #customizeScene section.text-center{
+        text-align: center;
+    }
+    #customizeScene section a{
+        font-size: 14px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #customizeScene section a:hover{
+        font-weight: 700;
+    }
+    #customizeScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #customizeScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #customizeScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #customizeScene section input#customizeSceneLink{
+        background-color: #a1a3a3;
+    }
+    #customizeScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
+    #customizeScene section button.customizeSceneButton{
+        position: absolute;
+        margin: 0;
+        width: 25px;
+        top: -8vh;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonLeft{
+        left: 1vw;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonRight{
+        right: 1vw;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonUp{
+        left: calc(2vw + 40px);
+        transform: rotate(90deg);
+        margin-top: -20px;
+    }
+    #customizeScene section button.customizeSceneButton#customizeSceneButtonDown{
+        right: calc(2vw + 40px);
+        transform: rotate(90deg);
+        margin-top: 20px;
+    }
+    @media only screen and (max-width: 600px) {
+        #customizeScene {
+            max-width: 160px;
+        }
+    }
+    @media only screen and (max-height: 400px) {
+        #customizeScene section.action {
+            top: 92%;
+        }
+        #customizeScene section.action.action-move { 
+            top: 80%;
+        }
+    }
+</style>
+
+<form id="customizeScene" hidden>
+    <section class="text-center">
+        <h5>Custom your WOKA</h5>
+    </section>
+    <section class="action action-move">
+        <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
+        <button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
+        <button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
+        <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>
+    </section>
+    <section class="action">
+        <a type="submit" id="customizeSceneFormBack">Back</a>
+        <button type="submit" id="customizeSceneFormSubmit">Finish</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/SelectCharacterScene.html b/front/dist/resources/html/SelectCharacterScene.html
new file mode 100644
index 00000000..aa78b27b
--- /dev/null
+++ b/front/dist/resources/html/SelectCharacterScene.html
@@ -0,0 +1,125 @@
+<style>
+    #selectCharacterScene {
+        background: #0000;
+        /*border: 1px solid #ebeeee;*/
+        border-radius: 6px;
+        margin: 10px auto 0;
+        color: #ebeeee;
+        max-height: 40vh;
+        overflow: scroll;
+        max-width: 300px;
+        width: 40vw;
+    }
+    #selectCharacterScene h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #selectCharacterScene input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+        text-align: center;
+    }
+    #selectCharacterScene section {
+        margin: 10px;
+    }
+    #selectCharacterScene section.action {
+        text-align: center;
+        margin: 0;
+        margin-top: 20vh;
+    }
+    #selectCharacterScene button {
+        margin: 10px 0px;
+        background-color: black;;
+        color: #ebeeee;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 100px;
+    }
+    #selectCharacterScene button#selectCharacterSceneFormCancel {
+        background-color: #aca6a600;
+        color: #292929;
+    }
+    #selectCharacterScene section h6,
+    #selectCharacterScene section h5{
+        margin: 1px;
+    }
+    #selectCharacterScene section.text-center{
+        text-align: center;
+    }
+    #selectCharacterScene section a{
+        font-size: 8px;
+        text-decoration: underline;
+        color: #ebeeee;
+    }
+    #selectCharacterScene section a:hover{
+        font-weight: 700;
+    }
+    #selectCharacterScene section p{
+        text-align: left;
+        font-size: 8px;
+        margin: 10px 10px;
+    }
+    #selectCharacterScene section p.err{
+        color: red;
+        text-align: center;
+    }
+    #selectCharacterScene section p.info{
+        display: none;
+        text-align: center;
+    }
+    #selectCharacterScene section input#selectCharacterSceneLink{
+        background-color: #a1a3a3;
+    }
+    #selectCharacterScene section img{
+        width: 160px;
+        margin: 20px 0;
+    }
+    #selectCharacterScene section button.selectCharacterButton{
+        position: absolute;
+        top: 20vh;
+        margin: 0;
+        width: 25px;
+    }
+    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
+        left: 1vw;
+    }
+    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
+        right: 1vw;
+    }
+    #selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
+        font-size: 14px;
+        width: auto;
+        margin-top: -2px;
+        background-color: #ffd700;
+        color: black;
+    }
+</style>
+
+<form id="selectCharacterScene" hidden>
+    <section class="text-center">
+        <h5>Select your WOKA</h5>
+        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
+        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
+    </section>
+    <section class="action">
+        <button type="submit" id="selectCharacterSceneFormSubmit">Continue</button>
+        <button type="submit" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your WOKA</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html
index 87ccf07b..91c1cfbc 100644
--- a/front/dist/resources/html/loginScene.html
+++ b/front/dist/resources/html/loginScene.html
@@ -1,7 +1,7 @@
 <style>
     #loginScene {
         background: #000000;
-        border: 1px solid #ebeeee;
+        /*border: 1px solid #ebeeee;*/
         border-radius: 6px;
         margin: 20px auto 0;
         width: 90%;
@@ -45,8 +45,8 @@
     }
     #loginScene button {
         margin: 10px;
-        background-color: #ebeeee;;
-        color: black;
+        background-color: black;;
+        color: #ebeeee;
         border-radius: 7px;
         padding-bottom: 4px;
         width: 100px;
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 3b27f01e..12fb2a7e 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -12,6 +12,8 @@ import {addLoader} from "../Components/Loader";
 import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
+import { MenuScene } from "../Menu/MenuScene";
+import { SelectCharacterSceneName } from "./SelectCharacterScene";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -22,11 +24,10 @@ enum CustomizeTextures{
     arrowUp = "arrow_up",
 }
 
+export const CustomizeSceneKey = "CustomizeScene";
+const customizeSceneKey = 'customizeScene';
+
 export class CustomizeScene extends AbstractCharacterScene {
-
-    private textField!: TextField;
-    private enterField!: TextField;
-
     private arrowRight!: Image;
     private arrowLeft!: Image;
 
@@ -49,6 +50,8 @@ export class CustomizeScene extends AbstractCharacterScene {
     private activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
+    private customizeSceneElement!: Phaser.GameObjects.DOMElement;
+
     constructor() {
         super({
             key: CustomizeSceneName
@@ -58,6 +61,8 @@ export class CustomizeScene extends AbstractCharacterScene {
     preload() {
         addLoader(this);
 
+        this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
+
         this.layers = loadAllLayers(this.load);
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
@@ -67,106 +72,34 @@ export class CustomizeScene extends AbstractCharacterScene {
                 this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
             });
         });
-
-        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');
     }
 
     create() {
-        this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!');
+        const middleX = this.getMiddleX();
+        this.customizeSceneElement = this.add.dom(middleX, 0).createFromCache(customizeSceneKey);
+        MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
 
-        this.enterField = new TextField(this, this.game.renderer.width / 2, 60, 'Start the game by pressing ENTER\n\n or touching the center rectangle');
+        this.customizeSceneElement.addListener('click');
+        this.customizeSceneElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'customizeSceneButtonLeft') {
+                this.moveCursorHorizontally(-1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonRight') {
+                this.moveCursorHorizontally(1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonDown') {
+                this.moveCursorVertically(1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonUp') {
+                this.moveCursorVertically(-1);
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneFormBack') {
+                this.backToPreviousScene();
+            }else if((event?.target as HTMLInputElement).id === 'customizeSceneFormSubmit') {
+                this.nextSceneToCamera();
+            }
+        });
 
-        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
-        this.add.existing(this.logo);
-
-
-        this.arrowRight = new Image(this, this.game.renderer.width*0.9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
-        this.add.existing(this.arrowRight);
-        this.mobileTapRIGHT = this.add
-          .rectangle(
-            this.game.renderer.width*0.9,
-            this.game.renderer.height/2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorHorizontally(1);
-          });
-
-        this.arrowLeft = new Image(this, this.game.renderer.width/9, this.game.renderer.height/2, CustomizeTextures.arrowRight);
-        this.arrowLeft.flipX = true;
-        this.add.existing(this.arrowLeft);
-        this.mobileTapLEFT = this.add
-          .rectangle(
-            this.game.renderer.width/9,
-            this.game.renderer.height/2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorHorizontally(-1);
-          });
-
-        this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 2, 32, 33)
+        this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
         this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
         this.add.existing(this.Rectangle);
-        this.mobileTapENTER = this.add
-          .rectangle(
-            this.cameras.main.worldView.x + this.cameras.main.width / 2,
-            this.cameras.main.worldView.y + this.cameras.main.height / 2,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-              const layers: string[] = [];
-              let i = 0;
-              for (const layerItem of this.selectedLayers) {
-                  if (layerItem !== undefined) {
-                      layers.push(this.layers[i][layerItem].name);
-                  }
-                  i++;
-              }
-
-              gameManager.setCharacterLayers(layers);
-
-              this.scene.sleep(CustomizeSceneName);
-              gameManager.tryResumingGame(this, EnableCameraSceneName);
-          });
-
-        this.arrowDown = new Image(this, this.game.renderer.width - 30, 100, CustomizeTextures.arrowUp);
-        this.arrowDown.flipY = true;
-        this.add.existing(this.arrowDown);
-        this.mobileTapDOWN = this.add
-          .rectangle(
-            this.game.renderer.width - 30,
-            100,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorVertically(1);
-          });
-
-        this.arrowUp = new Image(this, this.game.renderer.width - 30, 60, CustomizeTextures.arrowUp);
-        this.add.existing(this.arrowUp);
-        this.mobileTapUP = this.add
-          .rectangle(
-            this.game.renderer.width - 30,
-            60,
-            32,
-            32,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.moveCursorVertically(-1);
-          });
 
         this.createCustomizeLayer(0, 0, 0);
         this.createCustomizeLayer(0, 0, 1);
@@ -177,22 +110,10 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.moveLayers();
         this.input.keyboard.on('keyup-ENTER', () => {
-            const layers: string[] = [];
-            let i = 0;
-            for (const layerItem of this.selectedLayers) {
-                if (layerItem !== undefined) {
-                    layers.push(this.layers[i][layerItem].name);
-                }
-                i++;
-            }
-            if (!areCharacterLayersValid(layers)) {
-                return;
-            }
-
-            gameManager.setCharacterLayers(layers);
-
-            this.scene.sleep(CustomizeSceneName);
-            gameManager.tryResumingGame(this, EnableCameraSceneName);
+            this.nextSceneToCamera();
+        });
+        this.input.keyboard.on('keyup-BACKSPACE', () => {
+            this.backToPreviousScene();
         });
 
         this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1));
@@ -236,11 +157,6 @@ export class CustomizeScene extends AbstractCharacterScene {
         localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
     }
 
-    update(time: number, delta: number): void {
-        super.update(time, delta);
-        this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
-
     /**
      * @param x, the layer's vertical position
      * @param y, the layer's horizontal position
@@ -298,7 +214,7 @@ export class CustomizeScene extends AbstractCharacterScene {
      */
     private moveLayers(): void {
         const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 2;
+        const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 3;
         const screenWidth = this.game.renderer.width;
         const screenHeight = this.game.renderer.height;
         for (let i = 0; i < this.containersRow.length; i++) {
@@ -337,39 +253,63 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
      }
 
+     update(time: number, delta: number): void {
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.customizeSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
      public onResize(): void {
         this.moveLayers();
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        this.mobileTapENTER.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-        this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
-        this.mobileTapENTER.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
-
-        this.textField.x = this.game.renderer.width/2;
-
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
-
-        this.arrowUp.x = this.game.renderer.width - 30;
-        this.mobileTapUP.x = this.game.renderer.width - 30;
-        this.arrowUp.y = 60;
-        this.mobileTapUP.y = 60;
-
-        this.arrowDown.x = this.game.renderer.width - 30;
-        this.mobileTapDOWN.x = this.game.renderer.width - 30;
-        this.arrowDown.y = 100;
-        this.mobileTapDOWN.y = 100;
-
-        this.arrowLeft.x = this.game.renderer.width/9;
-        this.mobileTapLEFT.x = this.game.renderer.width/9;
-        this.arrowLeft.y = this.game.renderer.height/2;
-        this.mobileTapLEFT.y = this.game.renderer.height/2;
-
-        this.arrowRight.x = this.game.renderer.width*0.9;
-        this.mobileTapRIGHT.x = this.game.renderer.width*0.9;
-        this.arrowRight.y = this.game.renderer.height/2;
-        this.mobileTapRIGHT.y = this.game.renderer.height/2;
-
+        this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
 
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.customizeSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
      }
+
+     private getMiddleX() : number{
+        return (this.game.renderer.width / 2) -  
+        (
+            this.customizeSceneElement
+            && this.customizeSceneElement.node
+            && this.customizeSceneElement.node.getBoundingClientRect().width > 0
+            ? (this.customizeSceneElement.node.getBoundingClientRect().width / 4)
+            : 150
+        );
+    }
+
+    private nextSceneToCamera(){
+        const layers: string[] = [];
+            let i = 0;
+            for (const layerItem of this.selectedLayers) {
+                if (layerItem !== undefined) {
+                    layers.push(this.layers[i][layerItem].name);
+                }
+                i++;
+            }
+            if (!areCharacterLayersValid(layers)) {
+                return;
+            }
+
+            gameManager.setCharacterLayers(layers);
+            this.scene.sleep(CustomizeSceneName);
+            this.scene.remove(SelectCharacterSceneName);
+            gameManager.tryResumingGame(this, EnableCameraSceneName);
+    }
+
+    private backToPreviousScene(){
+        this.scene.sleep(CustomizeSceneName);
+        this.scene.run(SelectCharacterSceneName);
+    }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 3c8d0281..90e37cd6 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -12,6 +12,7 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
+import {MenuScene} from "../Menu/MenuScene";
 
 
 //todo: put this constants in a dedicated file
@@ -24,166 +25,104 @@ enum LoginTextures {
     customizeButtonSelected = "customize_button_selected"
 }
 
+const selectCharacterKey = 'selectCharacterScene';
+
 export class SelectCharacterScene extends AbstractCharacterScene {
     private readonly nbCharactersPerRow = 6;
-    private textField!: TextField;
-    private pressReturnField!: TextField;
-    private logo!: Image;
-    private customizeButton!: Image;
-    private customizeButtonSelected!: Image;
-
-    private selectedRectangle!: Rectangle;
-    private selectedRectangleXPos = 0; // Number of the character selected in the rows
-    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 mobileTapRectangle!: Rectangle;
     private playerModels!: BodyResourceDescriptionInterface[];
 
+    private selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
+    private currentSelectUser = 0;
+
     constructor() {
         super({
-            key: SelectCharacterSceneName
+            key: SelectCharacterSceneName,
         });
     }
 
     preload() {
         addLoader(this);
 
+        this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
+
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 this.playerModels.push(bodyResourceDescription);
             });
         })
-
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
-        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
         this.playerModels = loadAllDefaultModels(this.load);
-        this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
-        this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
-
         addLoader(this);
     }
 
     create() {
+        const middleX = this.getMiddleX();
+        this.selectCharacterSceneElement = this.add.dom(middleX, 0).createFromCache(selectCharacterKey);
+        MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
+
+        this.selectCharacterSceneElement.addListener('click');
+        this.selectCharacterSceneElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
+                this.moveToLeft();
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
+                this.moveToRight();
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormSubmit') {
+                this.nextSceneToCameraScene();
+            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormCustomYourOwnSubmit') {
+                this.nextSceneToCustomizeScene();
+            }
+        });
+
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
-        this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
-        this.pressReturnField = new TextField(
-            this,
-            this.game.renderer.width / 2,
-            90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60,
-            'Touch here\n\n or \n\nPress enter to start');
-        // For mobile purposes - we need a big enough touchable area.
-        this.mobileTapRectangle = this.add
-          .rectangle(
-            this.game.renderer.width / 2,
-            275,
-            this.game.renderer.width / 2,
-            50,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
-            this.nextScene();
-          });
-
-        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.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
-        this.add.existing(this.logo);
-
-        this.input.keyboard.on('keyup-ENTER', () => {
-            return this.nextScene();
-        });
-
-        this.input.keyboard.on('keydown-RIGHT', () => {
-            if(this.selectedRectangleYPos * this.nbCharactersPerRow + (this.selectedRectangleXPos + 2))
-            if (
-                this.selectedRectangleXPos < this.nbCharactersPerRow - 1
-                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos + 1) + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleXPos++;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-LEFT', () => {
-            if (
-                this.selectedRectangleXPos > 0
-                && ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos - 1) + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleXPos--;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-DOWN', () => {
-            if (
-                this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)
-                && (
-                    (((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length // check if player isn't empty
-                    || (this.selectedRectangleYPos + 1) === Math.ceil(this.playerModels.length / this.nbCharactersPerRow) // check if is custom rectangle
-                )
-            ) {
-                this.selectedRectangleYPos++;
-            }
-            this.updateSelectedPlayer();
-        });
-        this.input.keyboard.on('keydown-UP', () => {
-            if (
-                this.selectedRectangleYPos > 0
-                && (((this.selectedRectangleYPos - 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.playerModels.length
-            ) {
-                this.selectedRectangleYPos--;
-            }
-            this.updateSelectedPlayer();
-        });
 
         /*create user*/
         this.createCurrentPlayer();
-
         const playerNumber = localUserStore.getPlayerCharacterIndex();
-        if (playerNumber && playerNumber !== -1) {
-            this.selectedRectangleXPos = playerNumber % this.nbCharactersPerRow;
-            this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow);
-            this.updateSelectedPlayer();
-        } else if (playerNumber === -1) {
-            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
-            this.updateSelectedPlayer();
-        }
+
+        this.input.keyboard.on('keyup-ENTER', () => {
+            return this.nextSceneToCameraScene();
+        });
+
+        this.input.keyboard.on('keydown-RIGHT', () => {
+            this.moveToRight();
+        });
+        this.input.keyboard.on('keydown-LEFT', () => {
+            this.moveToLeft();
+        });
     }
 
-    update(time: number, delta: number): void {
-        this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
-    }
-
-    private nextScene(): void {
+    private nextSceneToCameraScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
-        this.scene.stop(SelectCharacterSceneName);
-        if (this.selectedPlayer !== null) {
-            gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
-            gameManager.tryResumingGame(this, EnableCameraSceneName);
-        } else {
-            this.scene.run(CustomizeSceneName);
+        if(!this.selectedPlayer){
+            return;
         }
+        this.scene.stop(SelectCharacterSceneName);
+        gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
+        gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCharacterSceneName);
     }
 
+    private nextSceneToCustomizeScene(): void {
+        if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
+            return;
+        }
+        this.scene.sleep(SelectCharacterSceneName);
+        this.scene.run(CustomizeSceneName);
+    }
+
     createCurrentPlayer(): void {
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
-            const col = i % this.nbCharactersPerRow;
-            const row = Math.floor(i / this.nbCharactersPerRow);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-            const player = this.physics.add.sprite(x, y, playerResource.name, 0);
-            player.setBounce(0.2);
-            player.setCollideWorldBounds(true);
+            const [middleX, middleY] = this.getCharacterPosition();
+            const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
+            this.setUpPlayer(player, i);
             this.anims.create({
                 key: playerResource.name,
                 frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}),
@@ -191,89 +130,140 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                 repeat: -1
             });
             player.setInteractive().on("pointerdown", () => {
-                this.selectedRectangleXPos = col;
-                this.selectedRectangleYPos = row;
-                this.updateSelectedPlayer();
+                if(this.currentSelectUser === i){
+                    return;
+                }
+                this.currentSelectUser = i;
+                this.moveUser();
             });
             this.players.push(player);
         }
 
-        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 * maxRow + 6, LoginTextures.customizeButtonSelected);
-        this.customizeButtonSelected.setOrigin(0.5, 0.5);
-        this.customizeButtonSelected.setVisible(false);
-        this.add.existing(this.customizeButtonSelected);
+        this.selectedPlayer = this.players[this.currentSelectUser];
+        this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
+    }
 
-        this.customizeButton.setInteractive().on("pointerdown", () => {
-            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
-            this.updateSelectedPlayer();
-            this.nextScene();
-        });
-        this.customizeButtonSelected.setInteractive().on("pointerdown", () => {
-            this.nextScene();
-        });
+    private moveUser(){
+        for(let i = 0; i < this.players.length; i++){
+            const player = this.players[i];
+            this.setUpPlayer(player, i);
+        }
+        this.updateSelectedPlayer();
+    }
 
-        this.selectedPlayer = this.players[0];
-        this.selectedPlayer.play(this.playerModels[0].name);
+    private moveToLeft(){
+        if(this.currentSelectUser === 0){
+            return;
+        }
+        this.currentSelectUser -= 1;
+        this.moveUser();
+    }
+
+    private moveToRight(){
+        if(this.currentSelectUser === (this.players.length - 1)){
+            return;
+        }
+        this.currentSelectUser += 1;
+        this.moveUser();
+    }
+
+    private defineSetupPlayer(numero: number){
+        const deltaX = 30;
+        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) ){
+            playerX += deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser + 2) ){
+            playerX += (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 1) ){
+            playerX -= deltaX;
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        if( numero === (this.currentSelectUser - 2) ){
+            playerX -= (deltaX * 2);
+            playerScale = 0.8;
+            playserOpactity = 0.6;
+            playerVisible = true;
+        }
+        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+    }
+    
+    private setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
+
+        const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
+        player.setBounce(0.2);
+        player.setCollideWorldBounds(true);
+        player.setVisible( playerVisible );
+        player.setScale(playerScale, playerScale);
+        player.setAlpha(playserOpactity);
+        player.setX(playerX);
+        player.setY(playerY);
     }
 
     /**
      * Returns pixel position by on column and row number
      */
-    private getCharacterPosition(x: number, y: number): [number, number] {
+    private getCharacterPosition(): [number, number] {
         return [
-            this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32,
-            y * 32 + 90
+            this.game.renderer.width / 2,
+            this.game.renderer.height / 3
         ];
     }
 
     private updateSelectedPlayer(): void {
         this.selectedPlayer?.anims.pause();
-        // If we selected the customize button
-        if (this.selectedRectangleYPos === Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
-            this.selectedPlayer = null;
-            this.selectedRectangle.setVisible(false);
-            this.customizeButtonSelected.setVisible(true);
-            this.customizeButton.setVisible(false);
-            localUserStore.setPlayerCharacterIndex(-1);
-            return;
-        }
-        this.customizeButtonSelected.setVisible(false);
-        this.customizeButton.setVisible(true);
-        const [x, y] = this.getCharacterPosition(this.selectedRectangleXPos, this.selectedRectangleYPos);
-        this.selectedRectangle.setVisible(true);
-        this.selectedRectangle.setX(x);
-        this.selectedRectangle.setY(y);
-        this.selectedRectangle.setSize(32, 32);
-        const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
-        const player = this.players[playerNumber];
-        player.play(this.playerModels[playerNumber].name);
+        const player = this.players[this.currentSelectUser];
+        player.play(this.playerModels[this.currentSelectUser].name);
         this.selectedPlayer = player;
-        localUserStore.setPlayerCharacterIndex(playerNumber);
+        localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
+    }
+
+    update(time: number, delta: number): void {
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.selectCharacterSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
     public onResize(ev: UIEvent): void {
-        this.textField.x = this.game.renderer.width / 2;
-        this.pressReturnField.x = this.game.renderer.width / 2;
-        this.logo.x = this.game.renderer.width - 30;
-        this.logo.y = this.game.renderer.height - 20;
-        this.customizeButton.x = this.game.renderer.width / 2;
-        this.customizeButtonSelected.x = this.game.renderer.width / 2;
+        //move position of user
+        this.moveUser();
 
-        for (let i = 0; i <this.playerModels.length; i++) {
-            const player = this.players[i];
-
-            const col = i % this.nbCharactersPerRow;
-            const row = Math.floor(i / this.nbCharactersPerRow);
-
-            const [x, y] = this.getCharacterPosition(col, row);
-            player.x = x;
-            player.y = y;
-        }
-        this.updateSelectedPlayer();
+        const middleX = this.getMiddleX();
+        this.tweens.add({
+            targets: this.selectCharacterSceneElement,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
     }
 
+    private getMiddleX() : number{
+        return (this.game.renderer.width / 2) -  
+        (
+            this.selectCharacterSceneElement
+            && this.selectCharacterSceneElement.node
+            && this.selectCharacterSceneElement.node.getBoundingClientRect().width > 0
+            ? (this.selectCharacterSceneElement.node.getBoundingClientRect().width / 4)
+            : 150
+        );
+    }
 }
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index 258dc190..3d361f25 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@@ -16,7 +16,7 @@ const gameMenuIconKey = 'gameMenuIcon';
 const gameSettingsMenuKey = 'gameSettingsMenu';
 const gameShare = 'gameShare';
 
-const closedSideMenuX = -400;
+const closedSideMenuX = -1000;
 const openedSideMenuX = 0;
 
 /**