improved the local storage of the the selectcharacterScene

front/src/Connexion/LocalUserStore.ts

@@ -6,7 +6,6 @@ class LocalUserStore {
     saveUser(localUser: LocalUser) {
         localStorage.setItem('localUser', JSON.stringify(localUser));
     }
-    
     getLocalUser(): LocalUser|null {
         const data = localStorage.getItem('localUser');
         return data ? JSON.parse(data) : null;
@@ -15,11 +14,23 @@ class LocalUserStore {
     setName(name:string): void {
         window.localStorage.setItem('playerName', name);
     }
-    
     getName(): string {
         return window.localStorage.getItem('playerName') ?? '';
     }
 
+    setPlayerCharacterIndex(playerCharacterIndex: number): void {
+        window.localStorage.setItem('selectedPlayer', ''+playerCharacterIndex);
+    }
+    getPlayerCharacterIndex(): number {
+        return parseInt(window.localStorage.getItem('selectedPlayer') || '');
+    }
+
+    setCustomCursorPosition(x:number, y:number, selectedLayers: number[]): void {
+        window.localStorage.setItem('customCursorPosition', JSON.stringify({x, y, selectedLayers}));
+    }
+    getCustomCursorPosition(): {x:number, y:number, selectedLayers:number[]}|null  {
+        return JSON.parse(window.localStorage.getItem('customCursorPosition') || "null");
+    }
 }
 
 export const localUserStore = new LocalUserStore();

front/src/Phaser/Game/GameManager.ts

@@ -1,7 +1,6 @@
 import {GameScene} from "./GameScene";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import {Room} from "../../Connexion/Room";
-import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
 
 export interface HasMovedEvent {
     direction: string;
@@ -24,11 +23,7 @@ export class GameManager {
         this.playerName = name;
     }
 
-    public setCharacterUserSelected(characterUserSelected : string): void {
+    public setCharacterLayers(layers: string[]): void {
-        this.characterLayers = [characterUserSelected];
-    }
-
-    public setCharacterLayers(layers: string[]) {
         this.characterLayers = layers;
     }
 
@@ -54,13 +49,6 @@ export class GameManager {
         }
     }
 
-    public getMapKeyByUrl(mapUrlStart: string) : string {
-        // FIXME: the key should be computed from the full URL of the map.
-        const startPos = mapUrlStart.indexOf('://')+3;
-        const endPos = mapUrlStart.indexOf(".json");
-        return mapUrlStart.substring(startPos, endPos);
-    }
-
     public async goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin) {
         const url = await this.startRoom.getMapUrl();
         console.log('Starting scene '+url);

front/src/Phaser/Login/CustomizeScene.ts

@@ -7,6 +7,7 @@ import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
 import {ResizableScene} from "./ResizableScene";
+import {localUserStore} from "../../Connexion/LocalUserStore";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -32,9 +33,10 @@ export class CustomizeScene extends ResizableScene {
 
     private logo!: Image;
 
-    private selectedLayers: Array<number> = [0];
+    private selectedLayers: number[] = [0];
-    private containersRow: Array<Array<Container>> = new Array<Array<Container>>();
+    private containersRow: Container[][] = [];
-    private activeRow = 0;
+    private activeRow:number = 0;
+    //private x:number = 0;
 
     constructor() {
         super({
@@ -103,43 +105,51 @@ export class CustomizeScene extends ResizableScene {
             return this.scene.start(EnableCameraSceneName);
         });
 
-        this.input.keyboard.on('keydown-RIGHT', () => {
+        this.input.keyboard.on('keydown-RIGHT', () => this.moveCursorHorizontally(1));
+        this.input.keyboard.on('keydown-LEFT', () => this.moveCursorHorizontally(-1));
+        this.input.keyboard.on('keydown-DOWN', () => this.moveCursorVertically(1));
+        this.input.keyboard.on('keydown-UP', () => this.moveCursorVertically(-1));
+        
+        /*const customCursorPosition = localUserStore.getCustomCursorPosition();
+        if (customCursorPosition) {
+            this.selectedLayers = customCursorPosition.selectedLayers;
+            for (let i = 0; i < customCursorPosition.x; i++) this.moveCursorVertically(1);
+            for (let i = 0; i < customCursorPosition.y; i++) this.moveCursorHorizontally(1);
+        }*/
+    }
+    
+    private moveCursorHorizontally(index: number): void {
         if (this.selectedLayers[this.activeRow] === undefined) {
-                this.selectedLayers[this.activeRow] = 0;
+            this.selectedLayers[this.activeRow] = index;
-            }
-            if (this.selectedLayers[this.activeRow] < LAYERS[this.activeRow].length - 1) {
-                this.selectedLayers[this.activeRow]++;
-                this.moveLayers();
-                this.updateSelectedLayer();
-            }
-        });
             
-        this.input.keyboard.on('keydown-LEFT', () => {
-            if (this.selectedLayers[this.activeRow] > 0) {
-                if (this.selectedLayers[this.activeRow] === 0) {
-                    delete this.selectedLayers[this.activeRow];
         } else {
-                    this.selectedLayers[this.activeRow]--;
+            this.selectedLayers[this.activeRow] += index;
+        }
+        if (this.selectedLayers[this.activeRow] < 0) {
+            this.selectedLayers[this.activeRow] = 0
+        } else if(this.selectedLayers[this.activeRow] > LAYERS[this.activeRow].length - 1) {
+            this.selectedLayers[this.activeRow] = LAYERS[this.activeRow].length - 1
         }
         this.moveLayers();
         this.updateSelectedLayer();
+        //this.saveInLocalStorage();
     }
-        });
     
-        this.input.keyboard.on('keydown-DOWN', () => {
+    private moveCursorVertically(index:number): void {
-            if (this.activeRow < LAYERS.length - 1) {
+        this.activeRow += index;
-                this.activeRow++;
+        if (this.activeRow < 0) {
-                this.moveLayers();
+            this.activeRow = 0
+        } else if (this.activeRow > LAYERS.length - 1) {
+            this.activeRow = LAYERS.length - 1
+        }
+        this.moveLayers();
+        //this.saveInLocalStorage();
     }
-        });
     
-        this.input.keyboard.on('keydown-UP', () => {
+    /*private saveInLocalStorage() {
-            if (this.activeRow > 0) {
+        localUserStore.setCustomCursorPosition(this.x, this.activeRow, this.selectedLayers);
-                this.activeRow--;
+    }*/
-                this.moveLayers();
+    
-            }
-        });
-    }
     update(time: number, delta: number): void {
         super.update(time, delta);
         this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
@@ -152,7 +162,7 @@ export class CustomizeScene extends ResizableScene {
      * create the layer and display it on the scene
      */
     private createCustomizeLayer(x: number, y: number, layerNumber: number): void {
-        this.containersRow[layerNumber] = new Array<Container>();
+        this.containersRow[layerNumber] = [];
         let alpha = 0;
         let layerPosX = 0;
         for (let i = 0; i < LAYERS[layerNumber].length; i++) {

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -6,6 +6,7 @@ import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Ch
 import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
 import {ResizableScene} from "./ResizableScene";
+import {localUserStore} from "../../Connexion/LocalUserStore";
 
 
 //todo: put this constants in a dedicated file
@@ -99,12 +100,14 @@ export class SelectCharacterScene extends ResizableScene {
         /*create user*/
         this.createCurrentPlayer();
         
-        if (window.localStorage) {
+        const playerNumber = localUserStore.getPlayerCharacterIndex();
-            const playerNumberStr: string = window.localStorage.getItem('selectedPlayer') ?? '0';
+        if (playerNumber && playerNumber !== -1) {
-            const playerNumber: number = Number(playerNumberStr);
             this.selectedRectangleXPos = playerNumber % this.nbCharactersPerRow;
             this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow);
             this.updateSelectedPlayer();
+        } else if (playerNumber === -1) {
+            this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
+            this.updateSelectedPlayer();
         }
     }
 
@@ -113,33 +116,14 @@ export class SelectCharacterScene extends ResizableScene {
     }
 
     private nextScene(): void {
-
         if (this.selectedPlayer !== null) {
-            gameManager.setCharacterUserSelected(this.selectedPlayer.texture.key);
+            gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
-
             this.scene.start(EnableCameraSceneName);
         } else {
             this.scene.start(CustomizeSceneName);
         }
     }
 
-    /**
-     * Returns the map URL and the instance from the current URL
-     */
-    private findMapUrl(): [string, string]|null {
-        const path = window.location.pathname;
-        if (!path.startsWith('/_/')) {
-            return null;
-        }
-        const instanceAndMap = path.substr(3);
-        const firstSlash = instanceAndMap.indexOf('/');
-        if (firstSlash === -1) {
-            return null;
-        }
-        const instance = instanceAndMap.substr(0, firstSlash);
-        return [window.location.protocol+'//'+instanceAndMap.substr(firstSlash+1), instance];
-    }
-
     createCurrentPlayer(): void {
         for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
             const playerResource = PLAYER_RESOURCES[i];
@@ -200,6 +184,7 @@ export class SelectCharacterScene extends ResizableScene {
             this.selectedRectangle.setVisible(false);
             this.customizeButtonSelected.setVisible(true);
             this.customizeButton.setVisible(false);
+            localUserStore.setPlayerCharacterIndex(-1);
             return;
         }
         this.customizeButtonSelected.setVisible(false);
@@ -213,9 +198,7 @@ export class SelectCharacterScene extends ResizableScene {
         const player = this.players[playerNumber];
         player.play(PLAYER_RESOURCES[playerNumber].name);
         this.selectedPlayer = player;
-        if (window.localStorage) {
+        localUserStore.setPlayerCharacterIndex(playerNumber);
-            window.localStorage.setItem('selectedPlayer', String(playerNumber));
-        }
     }
 
     public onResize(ev: UIEvent): void {