lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge pull request #346 from thecodingmachine/customUserStore

Browse source 
improved the local storage of the the selectcharacterScene
This commit is contained in:
David Négrier 2020-10-20 17:38:54 +02:00 committed by GitHub
parent 54d4a1b1f8 dff189b223
commit a3816cd725
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 71 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
front/src/Connexion/LocalUserStore.ts
View file

@ -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();

14
front/src/Phaser/Game/GameManager.ts
View file

@ -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);

86
front/src/Phaser/Login/CustomizeScene.ts
View file

@ -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.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.activeRow = customCursorPosition.activeRow;
this.selectedLayers = customCursorPosition.selectedLayers;
this.moveLayers();
this.updateSelectedLayer();
}
}
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();
}
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.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++) {

37
front/src/Phaser/Login/SelectCharacterScene.ts
View file

@ -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 <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 {