diff --git a/front/src/Connexion/LocalUserStore.ts b/front/src/Connexion/LocalUserStore.ts index cfecd3d4..a3c7d54d 100644 --- a/front/src/Connexion/LocalUserStore.ts +++ b/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(); \ No newline at end of file diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 7622381a..b9862c49 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/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 { - this.characterLayers = [characterUserSelected]; - } - - public setCharacterLayers(layers: string[]) { + public setCharacterLayers(layers: string[]): void { 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); diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 0a014dae..0b0338f2 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/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 = [0]; - private containersRow: Array> = new Array>(); - private activeRow = 0; + private selectedLayers: number[] = [0]; + private containersRow: Container[][] = []; + 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', () => { - if (this.selectedLayers[this.activeRow] === undefined) { - this.selectedLayers[this.activeRow] = 0; - } - 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.moveLayers(); - this.updateSelectedLayer(); - } - }); - - this.input.keyboard.on('keydown-DOWN', () => { - if (this.activeRow < LAYERS.length - 1) { - this.activeRow++; - this.moveLayers(); - } - }); - - this.input.keyboard.on('keydown-UP', () => { - if (this.activeRow > 0) { - this.activeRow--; - this.moveLayers(); - } - }); + 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] = index; + + } else { + 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(); + } + + private moveCursorVertically(index:number): void { + this.activeRow += index; + if (this.activeRow < 0) { + this.activeRow = 0 + } else if (this.activeRow > LAYERS.length - 1) { + this.activeRow = LAYERS.length - 1 + } + this.moveLayers(); + //this.saveInLocalStorage(); + } + + /*private saveInLocalStorage() { + localUserStore.setCustomCursorPosition(this.x, this.activeRow, this.selectedLayers); + }*/ + 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(); + this.containersRow[layerNumber] = []; let alpha = 0; let layerPosX = 0; for (let i = 0; i < LAYERS[layerNumber].length; i++) { diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index d7e65eb1..25332b7d 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/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 @@ -98,13 +99,15 @@ export class SelectCharacterScene extends ResizableScene { /*create user*/ this.createCurrentPlayer(); - - if (window.localStorage) { - const playerNumberStr: string = window.localStorage.getItem('selectedPlayer') ?? '0'; - const playerNumber: number = Number(playerNumberStr); + + 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(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