From 3e29ed4376a9e469c51291a93f8d0c1599e03b84 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 22 Jun 2021 11:48:08 +0200
Subject: [PATCH] Correction of button customize WOKA scene issue

---
 .../CustomCharacterScene.svelte               | 12 +++----
 front/src/Phaser/Login/CustomizeScene.ts      | 32 +++++++++----------
 front/src/Stores/CustomCharacterStore.ts      |  4 ++-
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index f9e3a66b..3fff6bc0 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -1,11 +1,11 @@
 <script lang="typescript">
     import { Game } from "../../Phaser/Game/Game";
     import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
+    import {activeRowStore} from "../../Stores/CustomCharacterStore";
 
     export let game: Game;
 
     const customCharacterScene = game.scene.getScene(CustomizeSceneName);
-    let activeRow = customCharacterScene.activeRow;
 
     function selectLeft() {
         customCharacterScene.moveCursorHorizontally(-1);
@@ -17,12 +17,10 @@
 
     function selectUp() {
         customCharacterScene.moveCursorVertically(-1);
-        activeRow = customCharacterScene.activeRow;
     }
 
     function selectDown() {
         customCharacterScene.moveCursorVertically(1);
-        activeRow = customCharacterScene.activeRow;
     }
 
     function previousScene() {
@@ -44,16 +42,16 @@
         <button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
     </section>
     <section class="action">
-        {#if activeRow === 0}
+        {#if $activeRowStore === 0}
             <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
         {/if}
-        {#if activeRow !== 0}
+        {#if $activeRowStore !== 0}
             <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up_black.png" alt=""/></button>
         {/if}
-        {#if activeRow === 5}
+        {#if $activeRowStore === 5}
             <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
         {/if}
-        {#if activeRow !== 5}
+        {#if $activeRowStore !== 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>
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 9d0e7877..3096c6f6 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -9,10 +9,11 @@ import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
-import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
+import {activeRowStore, customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
 import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
+import {get} from "svelte/store";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -21,7 +22,6 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private selectedLayers: number[] = [0];
     private containersRow: CustomizedCharacter[][] = [];
-    public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
@@ -95,7 +95,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         const customCursorPosition = localUserStore.getCustomCursorPosition();
         if (customCursorPosition) {
-            this.activeRow = customCursorPosition.activeRow;
+            activeRowStore.set(customCursorPosition.activeRow);
             this.selectedLayers = customCursorPosition.selectedLayers;
             this.moveLayers();
             this.updateSelectedLayer();
@@ -113,11 +113,11 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     private doMoveCursorHorizontally(index: number): void {
-        this.selectedLayers[this.activeRow] += index;
-        if (this.selectedLayers[this.activeRow] < 0) {
-            this.selectedLayers[this.activeRow] = 0
-        } else if(this.selectedLayers[this.activeRow] > this.layers[this.activeRow].length - 1) {
-            this.selectedLayers[this.activeRow] = this.layers[this.activeRow].length - 1
+        this.selectedLayers[get(activeRowStore)] += index;
+        if (this.selectedLayers[get(activeRowStore)] < 0) {
+            this.selectedLayers[get(activeRowStore)] = 0
+        } else if(this.selectedLayers[get(activeRowStore)] > this.layers[get(activeRowStore)].length - 1) {
+            this.selectedLayers[get(activeRowStore)] = this.layers[get(activeRowStore)].length - 1
         }
         this.moveLayers();
         this.updateSelectedLayer();
@@ -126,18 +126,18 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private doMoveCursorVertically(index:number): void {
 
-        this.activeRow += index;
-        if (this.activeRow < 0) {
-            this.activeRow = 0
-        } else if (this.activeRow > this.layers.length - 1) {
-            this.activeRow = this.layers.length - 1
+        activeRowStore.set(get(activeRowStore) + index);
+        if (get(activeRowStore) < 0) {
+            activeRowStore.set(0);
+        } else if (get(activeRowStore) > this.layers.length - 1) {
+            activeRowStore.set(this.layers.length - 1);
         }
         this.moveLayers();
         this.saveInLocalStorage();
     }
 
     private saveInLocalStorage() {
-        localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
+        localUserStore.setCustomCursorPosition(get(activeRowStore), this.selectedLayers);
     }
 
     /**
@@ -207,9 +207,9 @@ export class CustomizeScene extends AbstractCharacterScene {
                         selectedX = 0;
                     }
                     this.containersRow[i][j].x = screenCenterX + (j - selectedX) * 40;
-                    this.containersRow[i][j].y = screenCenterY + (i - this.activeRow) * 40;
+                    this.containersRow[i][j].y = screenCenterY + (i - get(activeRowStore)) * 40;
                     const alpha1 = Math.abs(selectedX - j)*47*2/screenWidth;
-                    const alpha2 = Math.abs(this.activeRow - i)*49*2/screenHeight;
+                    const alpha2 = Math.abs(get(activeRowStore) - i)*49*2/screenHeight;
                     this.containersRow[i][j].setAlpha((1 -alpha1)*(1 - alpha2));
             }
 
diff --git a/front/src/Stores/CustomCharacterStore.ts b/front/src/Stores/CustomCharacterStore.ts
index 4bef7768..f966471e 100644
--- a/front/src/Stores/CustomCharacterStore.ts
+++ b/front/src/Stores/CustomCharacterStore.ts
@@ -1,3 +1,5 @@
 import { derived, writable, Writable } from "svelte/store";
 
-export const customCharacterSceneVisibleStore = writable(false);
\ No newline at end of file
+export const customCharacterSceneVisibleStore = writable(false);
+
+export const activeRowStore = writable(0);
\ No newline at end of file