_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'develop' of github.com:thecodingmachine/workadventure into improve_logging

Browse Source
This commit is contained in:
David Négrier
2021-11-24 15:36:35 +01:00
parent dd89f12c2e dc58f16418
commit a1107bd20e
71 changed files with 10373 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Components/Loader.ts
+112 -61
View File
@@ -6,73 +6,124 @@ const TextName: string = "Loading...";
const LogoResource: string = "static/images/logo.png";
const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
export const addLoader = (scene: Phaser.Scene): void => {
// If there is nothing to load, do not display the loader.
if (scene.load.list.entries.length === 0) {
return;
}
let loadingText: Phaser.GameObjects.Text | null = null;
const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3);
const loadingBarHeight: number = 16;
const padding: number = 5;
const loadingBarHeight: number = 16;
const padding: number = 5;
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
if (scene.load.textureManager.exists(LogoNameIndex)) {
return res(
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
} else {
//add loading if logo image is not ready
loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName);
export class Loader {
private progressContainer!: Phaser.GameObjects.Graphics;
private progress!: Phaser.GameObjects.Graphics;
private progressAmount: number = 0;
private logo: Phaser.GameObjects.Image | undefined;
private loadingText: Phaser.GameObjects.Text | null = null;
public constructor(private scene: Phaser.Scene) {}
public addLoader(): void {
// If there is nothing to load, do not display the loader.
if (this.scene.load.list.entries.length === 0) {
return;
}
scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if (loadingText) {
loadingText.destroy();
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
if (this.scene.load.textureManager.exists(LogoNameIndex)) {
return res(
(this.logo = this.scene.add.image(
this.scene.game.renderer.width / 2,
this.scene.game.renderer.height / 2 - 150,
LogoNameIndex
))
);
} else {
//add loading if logo image is not ready
this.loadingText = this.scene.add.text(
this.scene.game.renderer.width / 2,
this.scene.game.renderer.height / 2 - 50,
TextName
);
}
return res(
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if (this.loadingText) {
this.loadingText.destroy();
}
return res(
(this.logo = this.scene.add.image(
this.scene.game.renderer.width / 2,
this.scene.game.renderer.height / 2 - 150,
LogoNameIndex
))
);
});
});
});
const progressContainer = scene.add.graphics();
const progress = scene.add.graphics();
progressContainer.fillStyle(0x444444, 0.8);
progressContainer.fillRect(
(scene.game.renderer.width - loadingBarWidth) / 2 - padding,
scene.game.renderer.height / 2 + 50 - padding,
loadingBarWidth + padding * 2,
loadingBarHeight + padding * 2
);
this.progressContainer = this.scene.add.graphics();
this.progress = this.scene.add.graphics();
this.progressContainer.fillStyle(0x444444, 0.8);
scene.load.on("progress", (value: number) => {
progress.clear();
progress.fillStyle(0xbbbbbb, 1);
progress.fillRect(
(scene.game.renderer.width - loadingBarWidth) / 2,
scene.game.renderer.height / 2 + 50,
loadingBarWidth * value,
this.resize();
this.scene.load.on("progress", (value: number) => {
this.progressAmount = value;
this.drawProgress();
});
this.scene.load.on("complete", () => {
if (this.loadingText) {
this.loadingText.destroy();
}
promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
resLoadingImage.destroy();
});
this.progress.destroy();
this.progressContainer.destroy();
if (this.scene instanceof DirtyScene) {
this.scene.markDirty();
}
});
}
public removeLoader(): void {
if (this.scene.load.textureManager.exists(LogoNameIndex)) {
this.scene.load.textureManager.remove(LogoNameIndex);
}
}
public resize(): void {
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
this.progressContainer.clear();
this.progressContainer.fillStyle(0x444444, 0.8);
this.progressContainer.fillRect(
(this.scene.game.renderer.width - loadingBarWidth) / 2 - padding,
this.scene.game.renderer.height / 2 + 50 - padding,
loadingBarWidth + padding * 2,
loadingBarHeight + padding * 2
);
this.drawProgress();
if (this.loadingText) {
this.loadingText.x = this.scene.game.renderer.width / 2;
this.loadingText.y = this.scene.game.renderer.height / 2 - 50;
}
if (this.logo) {
this.logo.x = this.scene.game.renderer.width / 2;
this.logo.y = this.scene.game.renderer.height / 2 - 150;
}
}
private drawProgress() {
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
this.progress.clear();
this.progress.fillStyle(0xbbbbbb, 1);
this.progress.fillRect(
(this.scene.game.renderer.width - loadingBarWidth) / 2,
this.scene.game.renderer.height / 2 + 50,
loadingBarWidth * this.progressAmount,
loadingBarHeight
);
});
scene.load.on("complete", () => {
if (loadingText) {
loadingText.destroy();
}
promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
resLoadingImage.destroy();
});
progress.destroy();
progressContainer.destroy();
if (scene instanceof DirtyScene) {
scene.markDirty();
}
});
};
export const removeLoader = (scene: Phaser.Scene): void => {
if (scene.load.textureManager.exists(LogoNameIndex)) {
scene.load.textureManager.remove(LogoNameIndex);
}
};
}
front/src/Phaser/Entity/Character.ts
+5 -3
View File
@@ -3,6 +3,7 @@ import { SpeechBubble } from "./SpeechBubble";
import Text = Phaser.GameObjects.Text;
import Container = Phaser.GameObjects.Container;
import Sprite = Phaser.GameObjects.Sprite;
import DOMElement = Phaser.GameObjects.DOMElement;
import { TextureError } from "../../Exception/TextureError";
import { Companion } from "../Companion/Companion";
import type { GameScene } from "../Game/GameScene";
@@ -33,7 +34,7 @@ export abstract class Character extends Container {
//private teleportation: Sprite;
private invisible: boolean;
public companion?: Companion;
private emote: Phaser.GameObjects.Text | null = null;
private emote: Phaser.GameObjects.DOMElement | null = null;
private emoteTween: Phaser.Tweens.Tween | null = null;
scene: GameScene;
@@ -300,8 +301,9 @@ export abstract class Character extends Container {
playEmote(emote: string) {
this.cancelPreviousEmote();
const emoteY = -45;
this.playerName.setVisible(false);
this.emote = new Text(this.scene, -10, 0, emote, { fontSize: "20px" });
const image = new Image(16, 16);
image.src = emote;
this.emote = new DOMElement(this.scene, -1, 0, image, "z-index:10;");
this.emote.setAlpha(0);
this.add(this.emote);
this.createStartTransition(emoteY);
front/src/Phaser/Game/EmbeddedWebsiteManager.ts
+1
View File
@@ -162,6 +162,7 @@ export class EmbeddedWebsiteManager {
const iframe = document.createElement("iframe");
iframe.src = absoluteUrl;
iframe.tabIndex = -1;
iframe.style.width = embeddedWebsiteEvent.position.width + "px";
iframe.style.height = embeddedWebsiteEvent.position.height + "px";
iframe.style.margin = "0";
front/src/Phaser/Game/GameScene.ts
+25 -18
View File
@@ -15,10 +15,7 @@ import type {
import { DEBUG_MODE, JITSI_PRIVATE_MODE, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
import { Queue } from "queue-typescript";
import {
Box,
ON_ACTION_TRIGGER_BUTTON,
} from "../../WebRtc/LayoutManager";
import { Box, ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
import { CoWebsite, coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
@@ -31,7 +28,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import { mediaManager } from "../../WebRtc/MediaManager";
import { SimplePeer } from "../../WebRtc/SimplePeer";
import { addLoader, removeLoader } from "../Components/Loader";
import { Loader } from "../Components/Loader";
import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
import { RemotePlayer } from "../Entity/RemotePlayer";
import type { ActionableItem } from "../Items/ActionableItem";
@@ -91,6 +88,7 @@ import { analyticsClient } from "../../Administration/AnalyticsClient";
import { get } from "svelte/store";
import { contactPageStore } from "../../Stores/MenuStore";
import { GameMapProperties } from "./GameMapProperties";
import SpriteSheetFile = Phaser.Loader.FileTypes.SpriteSheetFile;
export interface GameSceneInitInterface {
initPosition: PointInterface | null;
@@ -205,6 +203,7 @@ export class GameScene extends DirtyScene {
private sharedVariablesManager!: SharedVariablesManager;
private objectsByType = new Map<string, ITiledMapObject[]>();
private embeddedWebsiteManager!: EmbeddedWebsiteManager;
private loader: Loader;
constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
super({
@@ -223,6 +222,7 @@ export class GameScene extends DirtyScene {
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
this.connectionAnswerPromiseResolve = resolve;
});
this.loader = new Loader(this);
}
//hook preload scene
@@ -296,9 +296,10 @@ export class GameScene extends DirtyScene {
}
//once preloading is over, we don't want loading errors to crash the game, so we need to disable this behavior after preloading.
if (this.preloading) {
//if SpriteSheetFile (WOKA file) don't display error and give an access for user
if (this.preloading && !(file instanceof SpriteSheetFile)) {
//remove loader in progress
removeLoader(this);
this.loader.removeLoader();
//display an error scene
this.scene.start(ErrorSceneName, {
@@ -332,7 +333,7 @@ export class GameScene extends DirtyScene {
});
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
// FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
@@ -497,7 +498,10 @@ export class GameScene extends DirtyScene {
object.properties,
'in the "' + object.name + '" object of type "website"'
);
const allowApi = PropertyUtils.findBooleanProperty(GameMapProperties.ALLOW_API, object.properties);
const allowApi = PropertyUtils.findBooleanProperty(
GameMapProperties.ALLOW_API,
object.properties
);
// TODO: add a "allow" property to iframe
this.embeddedWebsiteManager.createEmbeddedWebsite(
@@ -614,10 +618,10 @@ export class GameScene extends DirtyScene {
oldPeerNumber = newPeerNumber;
});
this.emoteUnsubscribe = emoteStore.subscribe((emoteKey) => {
if (emoteKey) {
this.CurrentPlayer?.playEmote(emoteKey);
this.connection?.emitEmoteEvent(emoteKey);
this.emoteUnsubscribe = emoteStore.subscribe((emote) => {
if (emote) {
this.CurrentPlayer?.playEmote(emote.url);
this.connection?.emitEmoteEvent(emote.url);
emoteStore.set(null);
}
});
@@ -763,14 +767,14 @@ export class GameScene extends DirtyScene {
this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
// Init layer change listener
this.gameMap.onEnterLayer(layers => {
layers.forEach(layer => {
this.gameMap.onEnterLayer((layers) => {
layers.forEach((layer) => {
iframeListener.sendEnterLayerEvent(layer.name);
});
});
this.gameMap.onLeaveLayer(layers => {
layers.forEach(layer => {
this.gameMap.onLeaveLayer((layers) => {
layers.forEach((layer) => {
iframeListener.sendLeaveLayerEvent(layer.name);
});
});
@@ -1830,6 +1834,8 @@ ${escapedMessage}
right: camera.scrollX + camera.width,
bottom: camera.scrollY + camera.height,
});
this.loader.resize();
}
private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
for (const layer of this.mapFile.layers) {
@@ -1868,7 +1874,8 @@ ${escapedMessage}
public startJitsi(roomName: string, jwt?: string): void {
const allProps = this.gameMap.getCurrentProperties();
const jitsiConfig = this.safeParseJSONstring(
allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined, GameMapProperties.JITSI_CONFIG
allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined,
GameMapProperties.JITSI_CONFIG
);
const jitsiInterfaceConfig = this.safeParseJSONstring(
allProps.get(GameMapProperties.JITSI_INTERFACE_CONFIG) as string | undefined,
front/src/Phaser/Login/CustomizeScene.ts
+8 -2
View File
@@ -4,7 +4,7 @@ import { loadAllLayers } from "../Entity/PlayerTexturesLoadingManager";
import Sprite = Phaser.GameObjects.Sprite;
import { gameManager } from "../Game/GameManager";
import { localUserStore } from "../../Connexion/LocalUserStore";
import { addLoader } from "../Components/Loader";
import { Loader } from "../Components/Loader";
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
import { AbstractCharacterScene } from "./AbstractCharacterScene";
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
@@ -14,6 +14,7 @@ import { waScaleManager } from "../Services/WaScaleManager";
import { isMobile } from "../../Enum/EnvironmentVariable";
import { CustomizedCharacter } from "../Entity/CustomizedCharacter";
import { get } from "svelte/store";
import { analyticsClient } from "../../Administration/AnalyticsClient";
export const CustomizeSceneName = "CustomizeScene";
@@ -29,10 +30,13 @@ export class CustomizeScene extends AbstractCharacterScene {
private moveHorizontally: number = 0;
private moveVertically: number = 0;
private loader: Loader;
constructor() {
super({
key: CustomizeSceneName,
});
this.loader = new Loader(this);
}
preload() {
@@ -54,7 +58,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.lazyloadingAttempt = false;
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
create() {
@@ -278,6 +282,8 @@ export class CustomizeScene extends AbstractCharacterScene {
return;
}
analyticsClient.validationWoka("CustomizeWoka");
gameManager.setCharacterLayers(layers);
this.scene.sleep(CustomizeSceneName);
waScaleManager.restoreZoom();
front/src/Phaser/Login/EnableCameraScene.ts
+3
View File
@@ -2,6 +2,7 @@ import { gameManager } from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene";
import { enableCameraSceneVisibilityStore } from "../../Stores/MediaStore";
import { localUserStore } from "../../Connexion/LocalUserStore";
import { analyticsClient } from "../../Administration/AnalyticsClient";
export const EnableCameraSceneName = "EnableCameraScene";
@@ -27,6 +28,8 @@ export class EnableCameraScene extends ResizableScene {
update(time: number, delta: number): void {}
public login(): void {
analyticsClient.validationVideo();
enableCameraSceneVisibilityStore.hideEnableCameraScene();
this.scene.sleep(EnableCameraSceneName);
front/src/Phaser/Login/LoginScene.ts
+3
View File
@@ -4,6 +4,7 @@ import { loginSceneVisibleIframeStore, loginSceneVisibleStore } from "../../Stor
import { localUserStore } from "../../Connexion/LocalUserStore";
import { connectionManager } from "../../Connexion/ConnectionManager";
import { gameManager } from "../Game/GameManager";
import { analyticsClient } from "../../Administration/AnalyticsClient";
export const LoginSceneName = "LoginScene";
@@ -34,6 +35,8 @@ export class LoginScene extends ResizableScene {
}
public login(name: string): void {
analyticsClient.validationName();
name = name.trim();
gameManager.setPlayerName(name);
front/src/Phaser/Login/SelectCharacterScene.ts
+8 -2
View File
@@ -4,7 +4,7 @@ import { EnableCameraSceneName } from "./EnableCameraScene";
import { CustomizeSceneName } from "./CustomizeScene";
import { localUserStore } from "../../Connexion/LocalUserStore";
import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
import { addLoader } from "../Components/Loader";
import { Loader } from "../Components/Loader";
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
import { AbstractCharacterScene } from "./AbstractCharacterScene";
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
@@ -13,6 +13,7 @@ import { PinchManager } from "../UserInput/PinchManager";
import { selectCharacterSceneVisibleStore } from "../../Stores/SelectCharacterStore";
import { waScaleManager } from "../Services/WaScaleManager";
import { isMobile } from "../../Enum/EnvironmentVariable";
import { analyticsClient } from "../../Administration/AnalyticsClient";
//todo: put this constants in a dedicated file
export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -30,11 +31,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
protected pointerTimer: number = 0;
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
private loader: Loader;
constructor() {
super({
key: SelectCharacterSceneName,
});
this.loader = new Loader(this);
}
preload() {
@@ -48,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.lazyloadingAttempt = false;
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
create() {
@@ -98,6 +101,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
if (!this.selectedPlayer) {
return;
}
analyticsClient.validationWoka("SelectWoka");
this.scene.stop(SelectCharacterSceneName);
waScaleManager.restoreZoom();
gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
front/src/Phaser/Login/SelectCompanionScene.ts
+4 -2
View File
@@ -1,4 +1,4 @@
import { addLoader } from "../Components/Loader";
import { Loader } from "../Components/Loader";
import { gameManager } from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene";
import { EnableCameraSceneName } from "./EnableCameraScene";
@@ -22,11 +22,13 @@ export class SelectCompanionScene extends ResizableScene {
private currentCompanion = 0;
private pointerClicked: boolean = false;
private pointerTimer: number = 0;
private loader: Loader;
constructor() {
super({
key: SelectCompanionSceneName,
});
this.loader = new Loader(this);
}
preload() {
@@ -35,7 +37,7 @@ export class SelectCompanionScene extends ResizableScene {
});
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
create() {
front/src/Phaser/Player/Player.ts
+16 -4
View File
@@ -3,8 +3,6 @@ import type { GameScene } from "../Game/GameScene";
import { UserInputEvent, UserInputManager } from "../UserInput/UserInputManager";
import { Character } from "../Entity/Character";
import { userMovingStore } from "../../Stores/GameStore";
import { get } from "svelte/store";
import { emoteMenuStore } from "../../Stores/EmoteStore";
export const hasMovedEventName = "hasMoved";
export const requestEmoteEventName = "requestEmote";
@@ -68,10 +66,24 @@ export class Player extends Character {
} else if (this.wasMoving && moving) {
// slow joystick movement
this.move(0, 0);
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
this.emit(hasMovedEventName, {
moving,
direction: this.previousDirection,
x: this.x,
y: this.y,
oldX: x,
oldY: y,
});
} else if (this.wasMoving && !moving) {
this.stop();
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y, oldX: x, oldY: y });
this.emit(hasMovedEventName, {
moving,
direction: this.previousDirection,
x: this.x,
y: this.y,
oldX: x,
oldY: y,
});
}
if (direction !== null) {