From 4923ce8b833b07daf19c834b0a2383d420c5c0f1 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 31 May 2021 17:50:14 +0200
Subject: [PATCH] selectCharacterScene and customCharacterScene in svelte

---
 .../resources/html/CustomCharacterScene.html  | 157 ------------------
 .../resources/html/selectCharacterScene.html  | 139 ----------------
 front/dist/resources/objects/arrow_down.png   | Bin 0 -> 4816 bytes
 front/dist/resources/objects/arrow_up.png     | Bin 149 -> 4710 bytes
 front/src/Components/App.svelte               |  14 +-
 .../CustomCharacterScene.svelte               | 110 ++++++++++++
 .../SelectCharacterScene.svelte               |  84 ++++++++++
 front/src/Phaser/Login/CustomizeScene.ts      |  63 ++-----
 .../Login/SelectCharacterMobileScene.ts       |  24 +--
 .../src/Phaser/Login/SelectCharacterScene.ts  |  43 ++---
 front/src/Stores/CustomCharacterStore.ts      |   3 +
 front/src/Stores/SelectCharacterStore.ts      |   3 +
 12 files changed, 249 insertions(+), 391 deletions(-)
 delete mode 100644 front/dist/resources/html/CustomCharacterScene.html
 delete mode 100644 front/dist/resources/html/selectCharacterScene.html
 create mode 100644 front/dist/resources/objects/arrow_down.png
 create mode 100644 front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
 create mode 100644 front/src/Components/selectCharacter/SelectCharacterScene.svelte
 create mode 100644 front/src/Stores/CustomCharacterStore.ts
 create mode 100644 front/src/Stores/SelectCharacterStore.ts

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
deleted file mode 100644
index 9a8aac4d..00000000
--- a/front/dist/resources/html/CustomCharacterScene.html
+++ /dev/null
@@ -1,157 +0,0 @@
-<style>
-    #customizeScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        width: 42vw;
-        height: 48vh;
-        max-width: 350px;
-        /*max-height: 48vh;*/
-        overflow: hidden;
-    }
-    #customizeScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #customizeScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #customizeScene section {
-        margin: 10px;
-    }
-    #customizeScene section.action {
-        text-align: center;
-        position: sticky;
-        bottom: 0;
-        top: 100%;
-    }
-    #customizeScene section.action.action-move { 
-        top: 55%;
-    }
-    #customizeScene button {
-        margin: 2px 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #customizeScene button#customizeSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #customizeScene section h6,
-    #customizeScene section h5{
-        margin: 1px;
-    }
-    #customizeScene section.text-center{
-        text-align: center;
-    }
-    #customizeScene section a{
-        font-size: 14px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #customizeScene section a:hover{
-        font-weight: 700;
-    }
-    #customizeScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #customizeScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #customizeScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #customizeScene section input#customizeSceneLink{
-        background-color: #a1a3a3;
-    }
-    #customizeScene section button.customizeSceneButton{
-        position: absolute;
-        margin: 0;
-        top: -8vh;
-        font-size: 10px;
-        padding: 2px 4px;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonLeft{
-        left: 0vw;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonRight{
-        right: 0vw;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonUp{
-        left: calc(2vw + 40px);
-        transform: rotate(90deg);
-        margin-top: -20px;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonDown{
-        right: calc(2vw + 40px);
-        transform: rotate(90deg);
-        margin-top: 20px;
-    }
-    #customizeScene section.action img{
-        width: 8px;
-        height: 8px;
-    }
-    #customizeScene section.action a#customizeSceneFormBack img{
-        margin-top: -2px;
-    }
-    #customizeScene section.action button#customizeSceneFormSubmit img{
-        transform: rotate(180deg);
-    }
-    @media only screen and (max-width: 600px) {
-        #customizeScene {
-            max-width: 160px;
-            overflow-y: scroll;
-        }
-    }
-    @media only screen and (max-height: 400px) {
-        #customizeScene section.action {
-            top: 92%;
-        }
-        #customizeScene section.action.action-move { 
-            top: 80%;
-        }
-    }
-</style>
-
-<form id="customizeScene" hidden>
-    <section class="text-center">
-        <h5>Custom your WOKA</h3>
-    </section>
-    <section class="action action-move">
-        <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
-        <!--<button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
-    </section>
-    <section class="action">
-        <a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
-        <button type="submit" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
-    </section>
-</form>
diff --git a/front/dist/resources/html/selectCharacterScene.html b/front/dist/resources/html/selectCharacterScene.html
deleted file mode 100644
index 88c84041..00000000
--- a/front/dist/resources/html/selectCharacterScene.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<style>
-    #selectCharacterScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        max-height: 48vh;
-        max-width: 300px;
-        width: 40vw;
-        overflow: hidden;
-    }
-    #selectCharacterScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #selectCharacterScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #selectCharacterScene section {
-        margin: 10px;
-    }
-    #selectCharacterScene section.action {
-        text-align: center;
-        margin: 0;
-        margin-top: 28vh;
-    }
-    #selectCharacterScene button {
-        margin: 10px 0px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
-    #selectCharacterScene button#selectCharacterSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #selectCharacterScene section h6,
-    #selectCharacterScene section h5{
-        margin: 1px;
-    }
-    #selectCharacterScene section.text-center{
-        text-align: center;
-    }
-    #selectCharacterScene section a{
-        font-size: 8px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #selectCharacterScene section a:hover{
-        font-weight: 700;
-    }
-    #selectCharacterScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #selectCharacterScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #selectCharacterScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #selectCharacterScene section input#selectCharacterSceneLink{
-        background-color: #a1a3a3;
-    }
-    #selectCharacterScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    #selectCharacterScene section button.selectCharacterButton{
-        position: absolute;
-        top: 20vh;
-        margin: 0;
-        width: 25px;
-    }
-    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
-        display: none;
-        left: 1vw;
-    }
-    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
-        display: none;
-        right: 1vw;
-    }
-    #selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
-        font-size: 14px;
-        width: auto;
-        margin-top: -2px;
-        background-color: #ffd700;
-        color: black;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #selectCharacterScene{
-            overflow-y: scroll;
-        }
-        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
-            display: block;
-        }
-        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
-            display: block;
-        }
-    }
-</style>
-
-<form id="selectCharacterScene" hidden>
-    <section class="text-center">
-        <h5>Select your WOKA</h5>
-        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
-        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
-    </section>
-    <section class="action">
-        <button type="submit" id="selectCharacterSceneFormSubmit">Continue</button>
-        <button type="submit" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your WOKA</button>
-    </section>
-</form>
diff --git a/front/dist/resources/objects/arrow_down.png b/front/dist/resources/objects/arrow_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..c89fb5f3fa79da69e2a67e763de0304e82f5c1f9
GIT binary patch
literal 4816
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

literal 0
HcmV?d00001

diff --git a/front/dist/resources/objects/arrow_up.png b/front/dist/resources/objects/arrow_up.png
index b9f81ebc21b9be4af3c5f85ddeb5947ec958c7c1..6e948ae216bdbc1f31a4d1e7db53bc69de9db514 100644
GIT binary patch
literal 4710
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
RcO!tJN&SQU4*Ran{4Y>{_dEaq

delta 121
zcmaE+GL><HauEY(fk$L90|Va?5N4dJ%_q&kz~Jub;uvDl`?SxHk3oTlsr&!`&3dyk
zmP}Z8s^j?0j_sGzMVL+P92z!lIa8N9Y4wfc*$1q&0usKlv0HT7Ui1u*H1=HGxB3mg
Z<T-u|w%2;kJ^_tn@O1TaS?83{1OQrQE*Jm+

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index f8a2589f..e9569175 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -6,15 +6,27 @@
     import MyCamera from "./MyCamera.svelte";
     import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
     import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore";
+    import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
+    import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
+    import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
+
     import {Game} from "../Phaser/Game/Game";
+    import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
+
 
     export let game: Game;
 
 </script>
 
 <div>
+    {#if $selectCharacterSceneVisibleStore}
+        <SelectCharacterScene game={ game }></SelectCharacterScene>
+    {/if}
+    {#if $customCharacterSceneVisibleStore}
+        <CustomCharacterScene game={ game }></CustomCharacterScene>
+    {/if}
     {#if $selectCompanionSceneVisibleStore}
-        <SelectCompanionScene game={game}></SelectCompanionScene>
+        <SelectCompanionScene game={ game }></SelectCompanionScene>
     {/if}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
new file mode 100644
index 00000000..954dab43
--- /dev/null
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -0,0 +1,110 @@
+<script lang="typescript">
+    import { Game } from "../../Phaser/Game/Game";
+    import { CustomizeScene } from "../../Phaser/Login/CustomizeScene";
+
+    export let game: Game;
+
+    const customCharacterScene = game.scene.scenes.find((scene) => scene instanceof CustomizeScene);
+    let activeRow = customCharacterScene.activeRow;
+
+    function selectLeft() {
+        customCharacterScene.moveCursorHorizontally(-1);
+    }
+
+    function selectRight() {
+        customCharacterScene.moveCursorHorizontally(1);
+    }
+
+    function selectUp() {
+        customCharacterScene.moveCursorVertically(-1);
+        activeRow = customCharacterScene.activeRow;
+    }
+
+    function selectDown() {
+        customCharacterScene.moveCursorVertically(1);
+        activeRow = customCharacterScene.activeRow;
+    }
+
+    function previousScene() {
+        customCharacterScene.backToPreviousScene();
+    }
+
+    function finish() {
+        customCharacterScene.nextSceneToCamera();
+    }
+
+</script>
+
+<form class="customCharacterScene">
+    <section class="text-center">
+        <h2>Customize your WOKA</h2>
+    </section>
+    <section class="action action-move">
+        <button class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
+        <button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
+    </section>
+    <section class="action">
+        {#if activeRow === 0}
+            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
+        {/if}
+        {#if activeRow !== 0}
+            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up.png" alt=""/></button>
+        {/if}
+        {#if activeRow === 5}
+            <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
+        {/if}
+        {#if activeRow !== 5}
+            <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
+        {/if}
+    </section>
+</form>
+
+<style lang="scss">
+  form.customCharacterScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+  }
+  .customCharacterScene button {
+    font-family: "Press Start 2P";
+  }
+  .customCharacterScene section {
+    margin: 10px;
+  }
+  .customCharacterScene section.action {
+    text-align: center;
+    margin-top: 55vh;
+  }
+  .customCharacterScene section h2 {
+    font-family: "Press Start 2P";
+    margin: 1px;
+  }
+  .customCharacterScene section.text-center{
+    text-align: center;
+  }
+  .customCharacterScene section button.customCharacterSceneButton{
+    position: absolute;
+    top: 33vh;
+    margin: 0;
+  }
+  .customCharacterScene section button.customCharacterSceneFormBack{
+    color: #292929;
+  }
+  .customCharacterScene button.customCharacterSceneButtonLeft{
+    left: 33vw;
+  }
+  .customCharacterScene button.customCharacterSceneButtonRight{
+    right: 33vw;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .customCharacterScene button.customCharacterSceneButtonLeft{
+      left: 10vw;
+    }
+    .customCharacterScene button.customCharacterSceneButtonRight{
+      right: 10vw;
+    }
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/front/src/Components/selectCharacter/SelectCharacterScene.svelte b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
new file mode 100644
index 00000000..81fe2bc8
--- /dev/null
+++ b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
@@ -0,0 +1,84 @@
+<script lang="typescript">
+    import { Game } from "../../Phaser/Game/Game";
+    import { SelectCharacterScene } from "../../Phaser/Login/SelectCharacterScene";
+
+    export let game: Game;
+
+    const selectCharacterScene = game.scene.scenes.find((scene) => scene instanceof SelectCharacterScene);
+
+    function selectLeft() {
+        selectCharacterScene.moveToLeft();
+    }
+
+    function selectRight() {
+        selectCharacterScene.moveToRight();
+    }
+
+    function cameraScene() {
+        selectCharacterScene.nextSceneToCameraScene();
+    }
+
+    function customizeScene() {
+        selectCharacterScene.nextSceneToCustomizeScene();
+    }
+
+</script>
+
+<form class="selectCharacterScene">
+    <section class="text-center">
+        <h2>Select your WOKA</h2>
+        <button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
+        <button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
+    </section>
+    <section class="action">
+        <button type="submit" class="selectCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ cameraScene }>Continue</button>
+        <button type="submit" class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn" on:click|preventDefault={ customizeScene }>Customize your WOKA</button>
+    </section>
+</form>
+
+<style lang="scss">
+  form.selectCharacterScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+  }
+  .selectCharacterScene button {
+    font-family: "Press Start 2P";
+  }
+  .selectCharacterScene section {
+    margin: 10px;
+  }
+  .selectCharacterScene section.action {
+    text-align: center;
+    margin-top: 55vh;
+  }
+  .selectCharacterScene section h2 {
+    font-family: "Press Start 2P";
+    margin: 1px;
+  }
+  .selectCharacterScene section.text-center{
+    text-align: center;
+  }
+  .selectCharacterScene section button.selectCharacterButton{
+    position: absolute;
+    top: 33vh;
+    margin: 0;
+  }
+  .selectCharacterScene button.selectCharacterButtonLeft{
+    left: 33vw;
+  }
+  .selectCharacterScene button.selectCharacterButtonRight{
+    right: 33vw;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .selectCharacterScene button.selectCharacterButtonLeft{
+      left: 10vw;
+    }
+    .selectCharacterScene button.selectCharacterButtonRight{
+      right: 10vw;
+    }
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 1892813c..1715983b 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -11,6 +11,8 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
+import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
+import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -22,7 +24,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private selectedLayers: number[] = [0];
     private containersRow: Container[][] = [];
-    private activeRow:number = 0;
+    public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     private customizeSceneElement!: Phaser.GameObjects.DOMElement;
@@ -51,35 +53,9 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     create() {
-        this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
-        this.centerXDomElement(this.customizeSceneElement, 350);
-        MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
+        customCharacterSceneVisibleStore.set(true);
 
-        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') {
-                if(this.activeRow > 0){
-                    this.moveCursorVertically(-1);
-                }else{
-                    this.backToPreviousScene();
-                }
-            }else if((event?.target as HTMLButtonElement).id === 'customizeSceneFormSubmit') {
-                if(this.activeRow < 5){
-                    this.moveCursorVertically(1);
-                }else{
-                    this.nextSceneToCamera();
-                }
-            }
-        });
+        this.events.addListener('wake', () => { customCharacterSceneVisibleStore.set(true); });
 
         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);
@@ -116,7 +92,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    private moveCursorHorizontally(index: number): void {
+    public moveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -128,27 +104,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    private moveCursorVertically(index:number): void {
-
-        if(index === -1 && this.activeRow === 5){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
-            button.innerHTML = `Next <img src="resources/objects/arrow_up.png"/>`;
-        }
-
-        if(index === 1 && this.activeRow === 4){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
-            button.innerText = 'Finish';
-        }
-
-        if(index === -1 && this.activeRow === 1){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
-            button.innerText = `Return`;
-        }
-
-        if(index === 1 && this.activeRow === 0){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
-            button.innerHTML = `Back <img src="resources/objects/arrow_up.png"/>`;
-        }
+    public moveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {
@@ -269,8 +225,6 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
-
-        this.centerXDomElement(this.customizeSceneElement, 350);
      }
 
     private nextSceneToCamera(){
@@ -290,10 +244,13 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.scene.sleep(CustomizeSceneName);
             this.scene.remove(SelectCharacterSceneName);
             gameManager.tryResumingGame(this, EnableCameraSceneName);
+            customCharacterSceneVisibleStore.set(false);
     }
 
     private backToPreviousScene(){
         this.scene.sleep(CustomizeSceneName);
         this.scene.run(SelectCharacterSceneName);
+        customCharacterSceneVisibleStore.set(false);
+        selectCharacterSceneVisibleStore.set(true);
     }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
index b9c4b5a8..635e0b75 100644
--- a/front/src/Phaser/Login/SelectCharacterMobileScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
@@ -7,46 +7,46 @@ export class SelectCharacterMobileScene extends SelectCharacterScene {
         this.selectedRectangle.destroy();
     }
 
-    protected defineSetupPlayer(numero: number){
+    protected defineSetupPlayer(num: number){
         const deltaX = 30;
         const deltaY = 2;
         let [playerX, playerY] = this.getCharacterPosition();
         let playerVisible = true;
         let playerScale = 1.5;
-        let playserOpactity = 1;
+        let playerOpacity = 1;
 
-        if( this.currentSelectUser !== numero ){
+        if( this.currentSelectUser !== num ){
             playerVisible = false;
         }
-        if( numero === (this.currentSelectUser + 1) ){
+        if( num === (this.currentSelectUser + 1) ){
             playerY -= deltaY;
             playerX += deltaX;
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser + 2) ){
+        if( num === (this.currentSelectUser + 2) ){
             playerY -= deltaY;
             playerX += (deltaX * 2);
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser - 1) ){
+        if( num === (this.currentSelectUser - 1) ){
             playerY -= deltaY;
             playerX -= deltaX;
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser - 2) ){
+        if( num === (this.currentSelectUser - 2) ){
             playerY -= deltaY;
             playerX -= (deltaX * 2);
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
     }
 
         /**
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 998a62e6..5133aab6 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -11,6 +11,8 @@ import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {MenuScene} from "../Menu/MenuScene";
+import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
+import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -49,24 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     create() {
-
-        this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
-        this.centerXDomElement(this.selectCharacterSceneElement, 300);
-        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();
-            }
-        });
+        selectCharacterSceneVisibleStore.set(true);
 
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
@@ -109,6 +94,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCharacterSceneName);
+        selectCharacterSceneVisibleStore.set(false);
     }
 
     protected nextSceneToCustomizeScene(): void {
@@ -117,6 +103,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         }
         this.scene.sleep(SelectCharacterSceneName);
         this.scene.run(CustomizeSceneName);
+        selectCharacterSceneVisibleStore.set(false);
     }
 
     createCurrentPlayer(): void {
@@ -186,35 +173,35 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    protected defineSetupPlayer(numero: number){
+    protected defineSetupPlayer(num: number){
         const deltaX = 32;
         const deltaY = 32;
         let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
 
-        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
-        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
+        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users
+        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users
 
         const playerVisible = true;
         const playerScale = 1;
-        const playserOpactity = 1;
+        const playerOpacity = 1;
 
         // if selected
-        if( numero === this.currentSelectUser ){
+        if( num === this.currentSelectUser ){
             this.selectedRectangle.setX(playerX);
             this.selectedRectangle.setY(playerY);
         }
 
-        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
     }
 
-    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){
 
-        const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
+        const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
         player.setBounce(0.2);
         player.setCollideWorldBounds(false);
         player.setVisible( playerVisible );
         player.setScale(playerScale, playerScale);
-        player.setAlpha(playserOpactity);
+        player.setAlpha(playerOpacity);
         player.setX(playerX);
         player.setY(playerY);
     }
@@ -243,7 +230,5 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     public onResize(): void {
         //move position of user
         this.moveUser();
-
-        this.centerXDomElement(this.selectCharacterSceneElement, 300);
     }
 }
diff --git a/front/src/Stores/CustomCharacterStore.ts b/front/src/Stores/CustomCharacterStore.ts
new file mode 100644
index 00000000..4bef7768
--- /dev/null
+++ b/front/src/Stores/CustomCharacterStore.ts
@@ -0,0 +1,3 @@
+import { derived, writable, Writable } from "svelte/store";
+
+export const customCharacterSceneVisibleStore = writable(false);
\ No newline at end of file
diff --git a/front/src/Stores/SelectCharacterStore.ts b/front/src/Stores/SelectCharacterStore.ts
new file mode 100644
index 00000000..094eaef3
--- /dev/null
+++ b/front/src/Stores/SelectCharacterStore.ts
@@ -0,0 +1,3 @@
+import { derived, writable, Writable } from "svelte/store";
+
+export const selectCharacterSceneVisibleStore = writable(false);
\ No newline at end of file