Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of github.com:thecodingmachine/workadventure into player-report

Browse source 
# Conflicts:
#	back/src/Controller/AuthenticateController.ts
This commit is contained in:
David Négrier 2020-10-15 18:01:44 +02:00
commit c75f1edc40
22 changed files with 325 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

32
front/src/Connexion/ConnectionManager.ts
View file

@ -29,24 +29,29 @@ class ConnectionManager {
const roomSlug = data.roomSlug;
urlManager.editUrlForRoom(roomSlug, organizationSlug, worldSlug);
const room = new Room(window.location.pathname);
const room = new Room(window.location.pathname + window.location.hash);
return Promise.resolve(room);
} else if (connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
const localUser = localUserStore.getLocalUser();
if (localUser && localUser.jwtToken && localUser.uuid) {
this.localUser = localUser
this.localUser = localUser;
try {
await this.verifyToken(localUser.jwtToken);
} catch(e) {
// If the token is invalid, let's generate an anonymous one.
console.error('JWT token invalid. Did it expire? Login anonymously instead.');
await this.anonymousLogin();
}
} else {
const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
this.localUser = new LocalUser(data.userUuid, data.authToken);
localUserStore.saveUser(this.localUser);
await this.anonymousLogin();
}
let roomId: string
if (connexionType === GameConnexionTypes.empty) {
const defaultMapUrl = window.location.host.replace('play.', 'maps.') + URL_ROOM_STARTED;
roomId = urlManager.editUrlForRoom(defaultMapUrl, null, null);
} else {
roomId = window.location.pathname;
roomId = window.location.pathname + window.location.hash;
}
const room = new Room(roomId);
return Promise.resolve(room);
@ -54,8 +59,9 @@ class ConnectionManager {
const localUser = localUserStore.getLocalUser();
if (localUser) {
this.localUser = localUser
const room = new Room(window.location.pathname);
this.localUser = localUser;
await this.verifyToken(localUser.jwtToken);
const room = new Room(window.location.pathname + window.location.hash);
return Promise.resolve(room);
} else {
//todo: find some kind of fallback?
@ -66,6 +72,16 @@ class ConnectionManager {
return Promise.reject('Invalid URL');
}
private async verifyToken(token: string): Promise<void> {
await Axios.get(`${API_URL}/verify`, {params: {token}});
}
private async anonymousLogin(): Promise<void> {
const data = await Axios.post(`${API_URL}/anonymLogin`).then(res => res.data);
this.localUser = new LocalUser(data.userUuid, data.authToken);
localUserStore.saveUser(this.localUser);
}
public initBenchmark(): void {
this.localUser = new LocalUser('', 'test');
}

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

@ -1,5 +1,6 @@
import {LocalUser} from "./LocalUser";
//todo: add localstorage fallback
class LocalUserStore {
saveUser(localUser: LocalUser) {
@ -10,6 +11,14 @@ class LocalUserStore {
const data = localStorage.getItem('localUser');
return data ? JSON.parse(data) : null;
}
setName(name:string): void {
window.localStorage.setItem('playerName', name);
}
getName(): string {
return window.localStorage.getItem('playerName') ?? '';
}
}

9
front/src/Connexion/Room.ts
View file

@ -6,8 +6,10 @@ export class Room {
public readonly isPublic: boolean;
private mapUrl: string|undefined;
private instance: string|undefined;
public readonly hash: string;
constructor(id: string) {
this.hash = '';
if (id.startsWith('/')) {
id = id.substr(1);
}
@ -19,6 +21,13 @@ export class Room {
} else {
throw new Error('Invalid room ID');
}
const indexOfHash = this.id.indexOf('#');
if (indexOfHash !== -1) {
const idWithHash = this.id;
this.id = this.id.substr(0, indexOfHash);
this.hash = idWithHash.substr(indexOfHash + 1);
}
}
public async getMapUrl(): Promise<string> {

7
front/src/Phaser/Components/TextField.ts
View file

@ -1,7 +1,10 @@
export class TextField extends Phaser.GameObjects.BitmapText {
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[], center: boolean = true) {
super(scene, x, y, 'main_font', text, 8);
this.scene.add.existing(this)
this.scene.add.existing(this);
if (center) {
this.setOrigin(0.5).setCenterAlign()
}
}
}

22
front/src/Phaser/Components/TextInput.ts
View file

@ -1,13 +1,15 @@
export class TextInput extends Phaser.GameObjects.BitmapText {
private underLineLength = 10;
private minUnderLineLength = 4;
private underLine: Phaser.GameObjects.Text;
constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) {
super(scene, x, y, 'main_font', text, 32);
this.setOrigin(0.5).setCenterAlign()
this.scene.add.existing(this);
this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
this.underLine = this.scene.add.text(x, y+1, this.getUnderLineBody(text.length), { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
this.underLine.setOrigin(0.5)
this.scene.input.keyboard.on('keydown', (event: KeyboardEvent) => {
@ -16,23 +18,27 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
} else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
this.addLetter(event.key);
}
this.underLine.text = this.getUnderLineBody(this.text.length);
onChange(this.text);
});
}
private getUnderLineBody(textLength:number): string {
if (textLength < this.minUnderLineLength) textLength = this.minUnderLineLength;
let text = '_______';
for (let i = this.minUnderLineLength; i < textLength; i++) {
text += '__'
}
return text;
}
private deleteLetter() {
this.text = this.text.substr(0, this.text.length - 1);
if (this.underLine.text.length > this.underLineLength) {
this.underLine.text = this.underLine.text.substr(0, this.underLine.text.length - 1);
}
}
private addLetter(letter: string) {
this.text += letter;
if (this.text.length > this.underLineLength) {
this.underLine.text += '_';
}
}
getText(): string {

3
front/src/Phaser/Entity/Character.ts
View file

@ -88,7 +88,7 @@ export abstract class Character extends Container {
this.add(this.teleportation);*/
this.PlayerValue = name;
this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8);
this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 7);
this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);
scene.add.existing(this.playerName);
@ -189,6 +189,7 @@ export abstract class Character extends Container {
//this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
}
//todo:remove this, use a container tech to move the bubble instead
if (this.bubble) {
this.bubble.moveBubble(this.x, this.y);
}

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

@ -64,7 +64,7 @@ export class GameManager {
public async goToStartingMap(scenePlugin: Phaser.Scenes.ScenePlugin) {
const url = await this.startRoom.getMapUrl();
console.log('Starting scene '+url);
scenePlugin.start(url, {startLayerName: 'global'});
scenePlugin.start(url);
}
}

72
front/src/Phaser/Game/GameScene.ts
View file

@ -54,8 +54,7 @@ export enum Textures {
}
export interface GameSceneInitInterface {
initPosition: PointInterface|null,
startLayerName: string|undefined
initPosition: PointInterface|null
}
interface InitUserPositionEventInterface {
@ -130,7 +129,6 @@ export class GameScene extends ResizableScene implements CenterListener {
}
private PositionNextScene: Array<Array<{ key: string, hash: string }>> = new Array<Array<{ key: string, hash: string }>>();
private startLayerName: string|undefined;
private presentationModeSprite!: Sprite;
private chatModeSprite!: Sprite;
private gameMap!: GameMap;
@ -303,8 +301,6 @@ export class GameScene extends ResizableScene implements CenterListener {
init(initData : GameSceneInitInterface) {
if (initData.initPosition !== undefined) {
this.initPosition = initData.initPosition;
} else if (initData.startLayerName !== undefined) {
this.startLayerName = initData.startLayerName;
}
}
@ -329,7 +325,10 @@ export class GameScene extends ResizableScene implements CenterListener {
this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
}
if (layer.type === 'tilelayer' && this.getExitSceneUrl(layer) !== undefined) {
this.loadNextGame(layer, this.mapFile.width, this.mapFile.tilewidth, this.mapFile.tileheight);
this.loadNextGameFromExitSceneUrl(layer, this.mapFile.width);
} else if (layer.type === 'tilelayer' && this.getExitUrl(layer) !== undefined) {
console.log('Loading exitUrl ', this.getExitUrl(layer))
this.loadNextGameFromExitUrl(layer, this.mapFile.width);
}
if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
depth = 10000;
@ -345,9 +344,9 @@ export class GameScene extends ResizableScene implements CenterListener {
this.startY = this.initPosition.y;
} else {
// Now, let's find the start layer
if (this.startLayerName) {
if (this.room.hash) {
for (const layer of this.mapFile.layers) {
if (this.startLayerName === layer.name && layer.type === 'tilelayer' && this.isStartLayer(layer)) {
if (this.room.hash === layer.name && layer.type === 'tilelayer' && this.isStartLayer(layer)) {
const startPosition = this.startUser(layer);
this.startX = startPosition.x;
this.startY = startPosition.y;
@ -405,6 +404,13 @@ export class GameScene extends ResizableScene implements CenterListener {
context.stroke();
this.circleTexture.refresh();
// Let's alter browser history
let path = this.room.id;
if (this.room.hash) {
path += '#'+this.room.hash;
}
window.history.pushState({}, 'WorkAdventure', path);
// Let's pause the scene if the connection is not established yet
if (this.connection === undefined) {
// Let's wait 0.5 seconds before printing the "connecting" screen to avoid blinking
@ -637,6 +643,10 @@ export class GameScene extends ResizableScene implements CenterListener {
}
}
private getExitUrl(layer: ITiledMapLayer): string|undefined {
return this.getProperty(layer, "exitUrl") as string|undefined;
}
private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {
return this.getProperty(layer, "exitSceneUrl") as string|undefined;
}
@ -661,15 +671,7 @@ export class GameScene extends ResizableScene implements CenterListener {
return obj.value;
}
/**
*
* @param layer
* @param mapWidth
* @param tileWidth
* @param tileHeight
*/
//todo: push that into the gameManager
private loadNextGame(layer: ITiledMapLayer, mapWidth: number, tileWidth: number, tileHeight: number){
private loadNextGameFromExitSceneUrl(layer: ITiledMapLayer, mapWidth: number) {
const exitSceneUrl = this.getExitSceneUrl(layer);
if (exitSceneUrl === undefined) {
throw new Error('Layer is not an exit scene layer.');
@ -679,17 +681,33 @@ export class GameScene extends ResizableScene implements CenterListener {
instance = this.instance;
}
console.log('existSceneUrl', exitSceneUrl);
console.log('existSceneInstance', instance);
// TODO: eventually compute a relative URL
// TODO: handle /@/ URL CASES!
//console.log('existSceneUrl', exitSceneUrl);
//console.log('existSceneInstance', instance);
const absoluteExitSceneUrl = new URL(exitSceneUrl, this.MapUrlFile).href;
const absoluteExitSceneUrlWithoutProtocol = absoluteExitSceneUrl.toString().substr(absoluteExitSceneUrl.toString().indexOf('://')+3);
const roomId = '_/'+instance+'/'+absoluteExitSceneUrlWithoutProtocol;
console.log("Foo", instance, absoluteExitSceneUrlWithoutProtocol);
this.loadNextGame(layer, mapWidth, roomId);
}
private loadNextGameFromExitUrl(layer: ITiledMapLayer, mapWidth: number) {
const exitUrl = this.getExitUrl(layer);
if (exitUrl === undefined) {
throw new Error('Layer is not an exit layer.');
}
const fullPath = new URL(exitUrl, window.location.toString()).pathname;
this.loadNextGame(layer, mapWidth, fullPath);
}
/**
*
* @param layer
* @param mapWidth
*/
//todo: push that into the gameManager
private loadNextGame(layer: ITiledMapLayer, mapWidth: number, roomId: string){
const room = new Room(roomId);
gameManager.loadMap(room, this.scene);
const exitSceneKey = roomId;
@ -704,7 +722,7 @@ export class GameScene extends ResizableScene implements CenterListener {
const y : number = parseInt(((key + 1) / mapWidth).toString());
const x : number = key - (y * mapWidth);
let hash = new URL(exitSceneUrl, this.MapUrlFile).hash;
let hash = new URL(roomId, this.MapUrlFile).hash;
if (hash) {
hash = hash.substr(1);
}
@ -941,9 +959,7 @@ export class GameScene extends ResizableScene implements CenterListener {
this.simplePeer.unregister();
this.scene.stop();
this.scene.remove(this.scene.key);
this.scene.start(nextSceneKey.key, {
startLayerName: nextSceneKey.hash
});
this.scene.start(nextSceneKey.key);
}
}

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

@ -54,12 +54,8 @@ export class CustomizeScene extends ResizableScene {
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 30, 'Customize your own Avatar!');
this.textField.setOrigin(0.5).setCenterAlign();
this.textField.setVisible(true);
this.enterField = new TextField(this, this.game.renderer.width / 2, 500, 'you can start the game by pressing SPACE..');
this.enterField.setOrigin(0.5).setCenterAlign();
this.enterField.setVisible(true);
this.enterField = new TextField(this, this.game.renderer.width / 2, 40, 'you can start the game by pressing SPACE..');
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, CustomizeTextures.icon);
this.add.existing(this.logo);

4
front/src/Phaser/Login/EnableCameraScene.ts
View file

@ -53,16 +53,12 @@ export class EnableCameraScene extends Phaser.Scene {
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
this.textField.setOrigin(0.5).setCenterAlign();
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Press enter to start');
this.pressReturnField.setOrigin(0.5).setCenterAlign();
this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, '');
this.cameraNameField.setOrigin(0.5).setCenterAlign();
this.microphoneNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 40, '');
this.microphoneNameField.setOrigin(0.5).setCenterAlign();
this.arrowRight = new Image(this, 0, 0, LoginTextures.arrowRight);
this.arrowRight.setOrigin(0.5, 0.5);

15
front/src/Phaser/Login/LoginScene.ts
View file

@ -8,6 +8,7 @@ import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Ch
import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
@ -28,9 +29,7 @@ export class LoginScene extends ResizableScene {
super({
key: LoginSceneName
});
if (window.localStorage) {
this.name = window.localStorage.getItem('playerName') ?? '';
}
this.name = localUserStore.getName();
}
preload() {
@ -54,22 +53,18 @@ export class LoginScene extends ResizableScene {
cypressAsserter.initStarted();
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
this.textField.setOrigin(0.5).setCenterAlign()
this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4, this.name,(text: string) => {
this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, 8, this.name,(text: string) => {
this.name = text;
if (window.localStorage) {
window.localStorage.setItem('playerName', text);
}
localUserStore.setName(text);
});
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
this.pressReturnField.setOrigin(0.5).setCenterAlign()
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
this.add.existing(this.logo);
const infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run";
this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText);
this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false);
this.input.keyboard.on('keyup-ENTER', () => {
if (this.name === '') {

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

@ -57,10 +57,8 @@ export class SelectCharacterScene extends ResizableScene {
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
this.textField.setOrigin(0.5).setCenterAlign()
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start');
this.pressReturnField.setOrigin(0.5).setCenterAlign()
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
@ -123,30 +121,6 @@ export class SelectCharacterScene extends ResizableScene {
} else {
this.scene.start(CustomizeSceneName);
}
// Do we have a start URL in the address bar? If so, let's redirect to this address
/*const instanceAndMapUrl = this.findMapUrl();
if (instanceAndMapUrl !== null) {
const [mapUrl, instance] = instanceAndMapUrl;
const key = gameManager.loadMap(mapUrl, this.scene, instance);
this.scene.start(key, {
startLayerName: window.location.hash ? window.location.hash.substr(1) : undefined
} as GameSceneInitInterface);
return {
mapUrlStart: mapUrl,
startInstance: instance
};
} else {
// If we do not have a map address in the URL, let's ask the server for a start map.
return gameManager.loadStartMap().then((startMap: StartMapInterface) => {
const key = gameManager.loadMap(window.location.protocol + "//" + startMap.mapUrlStart, this.scene, startMap.startInstance);
this.scene.start(key);
return startMap;
}).catch((err) => {
console.error(err);
throw err;
});
}*/
}
/**

2
front/src/Phaser/Reconnecting/FourOFourScene.ts
View file

@ -45,7 +45,6 @@ export class FourOFourScene extends Phaser.Scene {
this.add.existing(this.logo);
this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found");
this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign();
let text: string = '';
if (this.file !== undefined) {
@ -56,7 +55,6 @@ export class FourOFourScene extends Phaser.Scene {
}
this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, text);
this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign();
const url = this.file ? this.file : this.url;
if (url !== undefined) {

1
front/src/Phaser/Reconnecting/ReconnectingScene.ts
View file

@ -34,7 +34,6 @@ export class ReconnectingScene extends Phaser.Scene {
this.add.existing(this.logo);
this.reconnectingField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "Connection lost. Reconnecting...");
this.reconnectingField.setOrigin(0.5, 0.5).setCenterAlign();
const cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat');
this.anims.create({