Merge pull request #346 from thecodingmachine/customUserStore
improved the local storage of the the selectcharacterScene
This commit is contained in:
commit
a3816cd725
@ -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(activeRow:number, selectedLayers: number[]): void {
|
||||
window.localStorage.setItem('customCursorPosition', JSON.stringify({activeRow, selectedLayers}));
|
||||
}
|
||||
getCustomCursorPosition(): {activeRow:number, selectedLayers:number[]}|null {
|
||||
return JSON.parse(window.localStorage.getItem('customCursorPosition') || "null");
|
||||
}
|
||||
}
|
||||
|
||||
export const localUserStore = new LocalUserStore();
|
@ -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);
|
||||
|
@ -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,9 @@ export class CustomizeScene extends ResizableScene {
|
||||
|
||||
private logo!: Image;
|
||||
|
||||
private selectedLayers: Array<number> = [0];
|
||||
private containersRow: Array<Array<Container>> = new Array<Array<Container>>();
|
||||
private activeRow = 0;
|
||||
private selectedLayers: number[] = [0];
|
||||
private containersRow: Container[][] = [];
|
||||
private activeRow:number = 0;
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
@ -103,43 +104,47 @@ 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.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.activeRow = customCursorPosition.activeRow;
|
||||
this.selectedLayers = customCursorPosition.selectedLayers;
|
||||
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]--;
|
||||
private moveCursorHorizontally(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] > 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', () => {
|
||||
if (this.activeRow < LAYERS.length - 1) {
|
||||
this.activeRow++;
|
||||
this.moveLayers();
|
||||
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();
|
||||
}
|
||||
});
|
||||
|
||||
this.input.keyboard.on('keydown-UP', () => {
|
||||
if (this.activeRow > 0) {
|
||||
this.activeRow--;
|
||||
this.moveLayers();
|
||||
}
|
||||
});
|
||||
private saveInLocalStorage() {
|
||||
localUserStore.setCustomCursorPosition(this.activeRow, this.selectedLayers);
|
||||
}
|
||||
|
||||
update(time: number, delta: number): void {
|
||||
super.update(time, delta);
|
||||
this.enterField.setVisible(!!(Math.floor(time / 500) % 2));
|
||||
@ -152,7 +157,8 @@ 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] = [];
|
||||
this.selectedLayers[layerNumber] = 0;
|
||||
let alpha = 0;
|
||||
let layerPosX = 0;
|
||||
for (let i = 0; i < LAYERS[layerNumber].length; i++) {
|
||||
|
@ -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 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 <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) {
|
||||
window.localStorage.setItem('selectedPlayer', String(playerNumber));
|
||||
}
|
||||
localUserStore.setPlayerCharacterIndex(playerNumber);
|
||||
}
|
||||
|
||||
public onResize(ev: UIEvent): void {
|
||||
|
Loading…
Reference in New Issue
Block a user