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

Add First Version of Tuto

Browse source 
PopUp
Player Control disable
Fake bubble displayed
This commit is contained in:
DESKTOP-FMM8UI0\CLV 2021-03-12 16:39:29 +01:00
parent fa4d917729
commit c5c8770a60
8 changed files with 174 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

2
front/src/Api/Events/IframeEvent.ts
View file

@ -4,4 +4,4 @@ export interface IframeEvent {
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const isIframeEventWrapper = (event: any): event is IframeEvent => typeof event.type === 'string' && typeof event.data === 'object';
export const isIframeEventWrapper = (event: any): event is IframeEvent => typeof event.type === 'string';

25
front/src/Api/IframeListener.ts
View file

@ -10,7 +10,6 @@ import {ButtonClickedEvent} from "./Events/ButtonClickedEvent";
import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent";
/**
* Listens to messages from iframes and turn those messages into easy to use observables.
* Also allows to send messages to those iframes.
@ -22,9 +21,21 @@ class IframeListener {
private readonly _openPopupStream: Subject<OpenPopupEvent> = new Subject();
public readonly openPopupStream = this._openPopupStream.asObservable();
private readonly _disablePlayerControlStream: Subject<void> = new Subject();
public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
private readonly _enablePlayerControl: Subject<void> = new Subject();
public readonly enablePlayerControl = this._enablePlayerControl.asObservable();
private readonly _closePopupStream: Subject<ClosePopupEvent> = new Subject();
public readonly closePopupStream = this._closePopupStream.asObservable();
private readonly _displayBubble: Subject<void> = new Subject();
public readonly displayBubble = this._displayBubble.asObservable();
private readonly _removeBubble: Subject<void> = new Subject();
public readonly removeBubble = this._removeBubble.asObservable();
private readonly iframes = new Set<HTMLIFrameElement>();
private readonly scripts = new Map<string, HTMLIFrameElement>();
@ -53,6 +64,18 @@ class IframeListener {
} else if (payload.type === 'closePopup' && isClosePopupEvent(payload.data)) {
this._closePopupStream.next(payload.data);
}
else if (payload.type === 'disablePlayerControl'){
this._disablePlayerControlStream.next();
}
else if (payload.type === 'enablePlayerControl'){
this._enablePlayerControl.next();
}
else if (payload.type === 'displayBubble'){
this._displayBubble.next();
}
else if (payload.type === 'removeBubble'){
this._removeBubble.next();
}
}

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

@ -57,16 +57,15 @@ import {TextureError} from "../../Exception/TextureError";
import {addLoader} from "../Components/Loader";
import {ErrorSceneName} from "../Reconnecting/ErrorScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
import {Subscription} from "rxjs";
import {iframeListener} from "../../Api/IframeListener";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite;
import CanvasTexture = Phaser.Textures.CanvasTexture;
import GameObject = Phaser.GameObjects.GameObject;
import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
import {Subscription} from "rxjs";
import {iframeListener} from "../../Api/IframeListener";
import DOMElement = Phaser.GameObjects.DOMElement;
import Tween = Phaser.Tweens.Tween;
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
export interface GameSceneInitInterface {
initPosition: PointInterface|null,
@ -589,7 +588,7 @@ export class GameScene extends ResizableScene implements CenterListener {
const contextRed = this.circleRedTexture.context;
contextRed.beginPath();
contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
// context.lineWidth = 5;
//context.lineWidth = 5;
contextRed.strokeStyle = '#ff0000';
contextRed.stroke();
this.circleRedTexture.refresh();
@ -687,7 +686,6 @@ export class GameScene extends ResizableScene implements CenterListener {
iframeListener.sendLeaveEvent(oldValue as string);
} else {
console.log(newValue);
iframeListener.sendEnterEvent(newValue as string);
}
});
@ -695,12 +693,13 @@ export class GameScene extends ResizableScene implements CenterListener {
private listenToIframeEvents(): void {
iframeListener.openPopupStream.subscribe((openPopupEvent) => {
let objectLayerSquare : ITiledMapObject;
if (this.getObjectLayerData(openPopupEvent.targetObject) !== undefined){
objectLayerSquare = this.getObjectLayerData(openPopupEvent.targetObject) as ITiledMapObject;
}
else{
console.error("The name of your square is not mathing with your param targetObject, check the two names. ")
console.error("Cannot find an Object with name " + openPopupEvent.targetObject + "The name of your rectangle object is not matching with your param targetObject, check the two names.")
return;
}
const escapedMessage = HtmlUtils.escapeHtml(openPopupEvent.message);
@ -761,6 +760,23 @@ ${escapedMessage}
},
});
});
iframeListener.disablePlayerControlStream.subscribe(()=>{
this.userInputManager.clearAllKeys();
})
iframeListener.enablePlayerControl.subscribe(()=>{
this.userInputManager.restoreAllKeys();
})
let sprite : Sprite;
iframeListener.displayBubble.subscribe(()=>{
sprite = new Sprite(this,this.CurrentPlayer.x + 25,this.CurrentPlayer.y,'circleSprite-white');
sprite.setDisplayOrigin(48, 48);
this.add.existing(sprite);
})
iframeListener.removeBubble.subscribe(()=>{
sprite.destroy();
})
}
private getMapDirUrl(): string {
@ -1288,7 +1304,6 @@ ${escapedMessage}
if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
for (const object of layer.objects) {
if (object.name === objectName) {
console.log("je return l'object");
return object;
}
else continue;
@ -1296,7 +1311,6 @@ ${escapedMessage}
}
}
}
console.log("je return undefined");
return undefined;
}

10
front/src/Phaser/UserInput/UserInputManager.ts
View file

@ -31,10 +31,11 @@ export class ActiveEventList {
export class UserInputManager {
private KeysCode!: UserInputManagerDatum[];
private Scene: GameScene;
private isInputDisable : boolean;
constructor(Scene : GameScene) {
this.Scene = Scene;
this.initKeyBoardEvent();
this.isInputDisable = false;
}
initKeyBoardEvent(){
@ -65,14 +66,21 @@ export class UserInputManager {
clearAllKeys(){
this.Scene.input.keyboard.removeAllKeys();
this.isInputDisable = true;
}
restoreAllKeys(){
this.initKeyBoardEvent();
this.isInputDisable = false;
}
getEventListForGameTick(): ActiveEventList {
const eventsMap = new ActiveEventList();
if (this.isInputDisable) return eventsMap;
this.KeysCode.forEach(d => {
if (d. keyInstance.isDown) {
eventsMap.set(d.event, true);
}
});
return eventsMap;
}

22
front/src/iframe_api.ts
View file

@ -13,6 +13,10 @@ interface WorkAdventureApi {
onEnterZone(name: string, callback: () => void): void;
onLeaveZone(name: string, callback: () => void): void;
openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
disablePlayerControl() : void;
enablePlayerControl() : void;
displayBubble() : void;
removeBubble() : void;
}
declare global {
@ -62,7 +66,6 @@ class Popup {
}
}
window.WA = {
/**
* Send a message in the chat.
@ -77,6 +80,22 @@ window.WA = {
} as ChatEvent
}, '*');
},
disablePlayerControl() : void {
window.parent.postMessage({'type' : 'disablePlayerControl'},'*');
},
enablePlayerControl() : void {
window.parent.postMessage({'type' : 'enablePlayerControl'},'*');
},
displayBubble() : void {
window.parent.postMessage({'type' : 'displayBubble'},'*');
},
removeBubble() : void {
window.parent.postMessage({'type' : 'removeBubble'},'*');
},
openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
popupId++;
const popup = new Popup(popupId);
@ -165,6 +184,7 @@ window.addEventListener('message', message => {
callback(popup);
}
}
}
// ...