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) { saveUser(localUser: LocalUser) {
localStorage.setItem('localUser', JSON.stringify(localUser)); localStorage.setItem('localUser', JSON.stringify(localUser));
} }
getLocalUser(): LocalUser|null { getLocalUser(): LocalUser|null {
const data = localStorage.getItem('localUser'); const data = localStorage.getItem('localUser');
return data ? JSON.parse(data) : null; return data ? JSON.parse(data) : null;
@ -15,11 +14,23 @@ class LocalUserStore {
setName(name:string): void { setName(name:string): void {
window.localStorage.setItem('playerName', name); window.localStorage.setItem('playerName', name);
} }
getName(): string { getName(): string {
return window.localStorage.getItem('playerName') ?? ''; 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(); export const localUserStore = new LocalUserStore();

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

@ -1,7 +1,6 @@
import {GameScene} from "./GameScene"; import {GameScene} from "./GameScene";
import {connectionManager} from "../../Connexion/ConnectionManager"; import {connectionManager} from "../../Connexion/ConnectionManager";
import {Room} from "../../Connexion/Room"; import {Room} from "../../Connexion/Room";
import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
export interface HasMovedEvent { export interface HasMovedEvent {
direction: string; direction: string;
@ -24,11 +23,7 @@ export class GameManager {
this.playerName = name; this.playerName = name;
} }
public setCharacterUserSelected(characterUserSelected : string): void { public setCharacterLayers(layers: string[]): void {
this.characterLayers = [characterUserSelected];
}
public setCharacterLayers(layers: string[]) {
this.characterLayers = layers; 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) { public async goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin) {
const url = await this.startRoom.getMapUrl(); const url = await this.startRoom.getMapUrl();
console.log('Starting scene '+url); 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 Container = Phaser.GameObjects.Container;
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {ResizableScene} from "./ResizableScene"; import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
export const CustomizeSceneName = "CustomizeScene"; export const CustomizeSceneName = "CustomizeScene";
@ -32,9 +33,9 @@ export class CustomizeScene extends ResizableScene {
private logo!: Image; 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;
constructor() { constructor() {
super({ super({
@ -103,43 +104,47 @@ export class CustomizeScene extends ResizableScene {
return this.scene.start(EnableCameraSceneName); return this.scene.start(EnableCameraSceneName);
}); });
this.input.keyboard.on('keydown-RIGHT', () => { this.input.keyboard.on('keydown-RIGHT', () => this.moveCursorHorizontally(1));
if (this.selectedLayers[this.activeRow] === undefined) { this.input.keyboard.on('keydown-LEFT', () => this.moveCursorHorizontally(-1));
this.selectedLayers[this.activeRow] = 0; this.input.keyboard.on('keydown-DOWN', () => this.moveCursorVertically(1));
} this.input.keyboard.on('keydown-UP', () => this.moveCursorVertically(-1));
if (this.selectedLayers[this.activeRow] < LAYERS[this.activeRow].length - 1) {
this.selectedLayers[this.activeRow]++; const customCursorPosition = localUserStore.getCustomCursorPosition();
this.moveLayers(); if (customCursorPosition) {
this.updateSelectedLayer(); 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]--;
}
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();
}
});
} }
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 { update(time: number, delta: number): void {
super.update(time, delta); super.update(time, delta);
this.enterField.setVisible(!!(Math.floor(time / 500) % 2)); 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 * create the layer and display it on the scene
*/ */
private createCustomizeLayer(x: number, y: number, layerNumber: number): void { 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 alpha = 0;
let layerPosX = 0; let layerPosX = 0;
for (let i = 0; i < LAYERS[layerNumber].length; i++) { 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 {EnableCameraSceneName} from "./EnableCameraScene";
import {CustomizeSceneName} from "./CustomizeScene"; import {CustomizeSceneName} from "./CustomizeScene";
import {ResizableScene} from "./ResizableScene"; import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
//todo: put this constants in a dedicated file //todo: put this constants in a dedicated file
@ -98,13 +99,15 @@ export class SelectCharacterScene extends ResizableScene {
/*create user*/ /*create user*/
this.createCurrentPlayer(); 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.selectedRectangleXPos = playerNumber % this.nbCharactersPerRow;
this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow); this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow);
this.updateSelectedPlayer(); 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 { private nextScene(): void {
if (this.selectedPlayer !== null) { if (this.selectedPlayer !== null) {
gameManager.setCharacterUserSelected(this.selectedPlayer.texture.key); gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
this.scene.start(EnableCameraSceneName); this.scene.start(EnableCameraSceneName);
} else { } else {
this.scene.start(CustomizeSceneName); 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 { createCurrentPlayer(): void {
for (let i = 0; i <PLAYER_RESOURCES.length; i++) { for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
const playerResource = PLAYER_RESOURCES[i]; const playerResource = PLAYER_RESOURCES[i];
@ -200,6 +184,7 @@ export class SelectCharacterScene extends ResizableScene {
this.selectedRectangle.setVisible(false); this.selectedRectangle.setVisible(false);
this.customizeButtonSelected.setVisible(true); this.customizeButtonSelected.setVisible(true);
this.customizeButton.setVisible(false); this.customizeButton.setVisible(false);
localUserStore.setPlayerCharacterIndex(-1);
return; return;
} }
this.customizeButtonSelected.setVisible(false); this.customizeButtonSelected.setVisible(false);
@ -213,9 +198,7 @@ export class SelectCharacterScene extends ResizableScene {
const player = this.players[playerNumber]; const player = this.players[playerNumber];
player.play(PLAYER_RESOURCES[playerNumber].name); player.play(PLAYER_RESOURCES[playerNumber].name);
this.selectedPlayer = player; this.selectedPlayer = player;
if (window.localStorage) { localUserStore.setPlayerCharacterIndex(playerNumber);
window.localStorage.setItem('selectedPlayer', String(playerNumber));
}
} }
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {