From de5a505296fa4b4f51ce6cf7f13c3894f656bbec Mon Sep 17 00:00:00 2001 From: Lukas Hass Date: Thu, 3 Feb 2022 19:26:25 +0100 Subject: [PATCH 01/17] remove explicit definition of prettier-plugin-svelte fixes prettier in vscode --- front/.prettierrc.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/front/.prettierrc.json b/front/.prettierrc.json index 057ed062..e8980d15 100644 --- a/front/.prettierrc.json +++ b/front/.prettierrc.json @@ -1,5 +1,4 @@ { "printWidth": 120, - "tabWidth": 4, - "plugins": ["prettier-plugin-svelte"] + "tabWidth": 4 } From 6863fa37640a179ed314f28afeee267ead80ffae Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Fri, 4 Feb 2022 14:46:57 +0100 Subject: [PATCH 02/17] Fix game unfocusable after clicking on iframe --- front/src/Phaser/Game/Game.ts | 9 --------- front/src/Phaser/UserInput/UserInputManager.ts | 5 +++++ 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/front/src/Phaser/Game/Game.ts b/front/src/Phaser/Game/Game.ts index 865026f7..783f2348 100644 --- a/front/src/Phaser/Game/Game.ts +++ b/front/src/Phaser/Game/Game.ts @@ -26,15 +26,6 @@ export class Game extends Phaser.Game { } } }); - - /*window.addEventListener('resize', (event) => { - // Let's trigger the onResize method of any active scene that is a ResizableScene - for (const scene of this.scene.getScenes(true)) { - if (scene instanceof ResizableScene) { - scene.onResize(event); - } - } - });*/ } public step(time: number, delta: number) { diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index ffa67c3a..112ab0e5 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -255,6 +255,11 @@ export class UserInputManager { (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => { this.joystick?.hide(); this.userInputHandler.handlePointerUpEvent(pointer, gameObjects); + + // Disable focus on iframe (need by Firefox) + if (pointer.downElement.nodeName === "CANVAS" && document.activeElement instanceof HTMLIFrameElement) { + document.activeElement.blur(); + } } ); From 72b4438d1ed7d59d31ab8020b396a15dfcd97fc9 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Mon, 7 Feb 2022 10:39:03 +0100 Subject: [PATCH 03/17] outline color is decided from particular system level --- front/src/Phaser/Entity/Character.ts | 8 +++---- front/src/Phaser/Game/ActivatablesManager.ts | 8 ++++--- front/src/Phaser/Game/GameScene.ts | 6 +++++ front/src/Phaser/Game/OutlineableInterface.ts | 4 ++-- front/src/Stores/OutlineColorStore.ts | 24 +++++++++---------- 5 files changed, 28 insertions(+), 22 deletions(-) diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 5ec031bd..c26b87ba 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -455,16 +455,16 @@ export abstract class Character extends Container implements OutlineableInterfac this.outlineColorStore.removeApiColor(); } - public pointerOverOutline(): void { - this.outlineColorStore.pointerOver(); + public pointerOverOutline(color: number): void { + this.outlineColorStore.pointerOver(color); } public pointerOutOutline(): void { this.outlineColorStore.pointerOut(); } - public characterCloseByOutline(): void { - this.outlineColorStore.characterCloseBy(); + public characterCloseByOutline(color: number): void { + this.outlineColorStore.characterCloseBy(color); } public characterFarAwayOutline(): void { diff --git a/front/src/Phaser/Game/ActivatablesManager.ts b/front/src/Phaser/Game/ActivatablesManager.ts index 60e967d9..90f1c8d3 100644 --- a/front/src/Phaser/Game/ActivatablesManager.ts +++ b/front/src/Phaser/Game/ActivatablesManager.ts @@ -11,6 +11,8 @@ export class ActivatablesManager { private currentPlayer: Player; + private readonly outlineColor = 0xffff00; + constructor(currentPlayer: Player) { this.currentPlayer = currentPlayer; } @@ -27,7 +29,7 @@ export class ActivatablesManager { } this.selectedActivatableObjectByPointer = object; if (isOutlineable(this.selectedActivatableObjectByPointer)) { - this.selectedActivatableObjectByPointer?.pointerOverOutline(); + this.selectedActivatableObjectByPointer?.pointerOverOutline(this.outlineColor); } } @@ -37,7 +39,7 @@ export class ActivatablesManager { } this.selectedActivatableObjectByPointer = undefined; if (isOutlineable(this.selectedActivatableObjectByDistance)) { - this.selectedActivatableObjectByDistance?.characterCloseByOutline(); + this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor); } } @@ -60,7 +62,7 @@ export class ActivatablesManager { } this.selectedActivatableObjectByDistance = newNearestObject; if (isOutlineable(this.selectedActivatableObjectByDistance)) { - this.selectedActivatableObjectByDistance?.characterCloseByOutline(); + this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor); } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 242d97c8..e7242f90 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1737,6 +1737,12 @@ ${escapedMessage} emoteMenuStore.openEmoteMenu(); } }); + this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OVER, (pointer: Phaser.Input.Pointer) => { + this.CurrentPlayer.pointerOverOutline(0x00ffff); + }); + this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OUT, (pointer: Phaser.Input.Pointer) => { + this.CurrentPlayer.pointerOutOutline(); + }); this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => { this.connection?.emitEmoteEvent(emoteKey); analyticsClient.launchEmote(emoteKey); diff --git a/front/src/Phaser/Game/OutlineableInterface.ts b/front/src/Phaser/Game/OutlineableInterface.ts index bee560cc..7112fe84 100644 --- a/front/src/Phaser/Game/OutlineableInterface.ts +++ b/front/src/Phaser/Game/OutlineableInterface.ts @@ -3,8 +3,8 @@ export interface OutlineableInterface { removeFollowOutlineColor(): void; setApiOutlineColor(color: number): void; removeApiOutlineColor(): void; - pointerOverOutline(): void; + pointerOverOutline(color: number): void; pointerOutOutline(): void; - characterCloseByOutline(): void; + characterCloseByOutline(color: number): void; characterFarAwayOutline(): void; } diff --git a/front/src/Stores/OutlineColorStore.ts b/front/src/Stores/OutlineColorStore.ts index a35cc9c9..a444037d 100644 --- a/front/src/Stores/OutlineColorStore.ts +++ b/front/src/Stores/OutlineColorStore.ts @@ -5,38 +5,36 @@ export function createColorStore() { let followColor: number | undefined = undefined; let apiColor: number | undefined = undefined; + let pointedByPointer: number | undefined = undefined; + let pointedByCharacter: number | undefined = undefined; - let pointedByPointer: boolean = false; - let pointedByCharacter: boolean = false; const updateColor = () => { - if (pointedByPointer || pointedByCharacter) { - set(0xffff00); - } else { - set(followColor ?? apiColor); - } + console.log('update color'); + console.log(pointedByPointer, pointedByCharacter, followColor, apiColor); + set(pointedByPointer ?? pointedByCharacter ?? followColor ?? apiColor); }; return { subscribe, - pointerOver() { - pointedByPointer = true; + pointerOver(color: number) { + pointedByPointer = color; updateColor(); }, pointerOut() { - pointedByPointer = false; + pointedByPointer = undefined; updateColor(); }, - characterCloseBy() { - pointedByCharacter = true; + characterCloseBy(color: number) { + pointedByCharacter = color; updateColor(); }, characterFarAway() { - pointedByCharacter = false; + pointedByCharacter = undefined; updateColor(); }, From bf0d2eb4124a16895363e0a600411a47f088517a Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Mon, 7 Feb 2022 11:08:52 +0100 Subject: [PATCH 04/17] directional shift for current player when trying to activate entities --- front/src/Phaser/Entity/Character.ts | 13 +++++++++++++ front/src/Phaser/Game/ActivatablesManager.ts | 8 ++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index c26b87ba..061bc2e5 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -159,6 +159,19 @@ export abstract class Character extends Container implements OutlineableInterfac return { x: this.x, y: this.y }; } + /** + * Returns position based on where player is currently facing + * @param shift How far from player should the point of interest be. + */ + public getDirectionalActivationPosition(shift: number): { x: number, y: number } { + switch (this.lastDirection) { + case PlayerAnimationDirections.Down: { return { x: this.x, y: this.y + shift }; } + case PlayerAnimationDirections.Left: { return { x: this.x - shift, y: this.y }; } + case PlayerAnimationDirections.Right: { return { x: this.x + shift, y: this.y }; } + case PlayerAnimationDirections.Up: { return { x: this.x, y: this.y - shift }; } + } + } + public getObjectToOutline(): Phaser.GameObjects.GameObject { return this.playerNameText; } diff --git a/front/src/Phaser/Game/ActivatablesManager.ts b/front/src/Phaser/Game/ActivatablesManager.ts index 90f1c8d3..f5f893db 100644 --- a/front/src/Phaser/Game/ActivatablesManager.ts +++ b/front/src/Phaser/Game/ActivatablesManager.ts @@ -12,6 +12,7 @@ export class ActivatablesManager { private currentPlayer: Player; private readonly outlineColor = 0xffff00; + private readonly directionalActivationPositionShift = 50; constructor(currentPlayer: Player) { this.currentPlayer = currentPlayer; @@ -79,7 +80,7 @@ export class ActivatablesManager { return closestObject; } public updateActivatableObjectsDistances(objects: ActivatableInterface[]): void { - const currentPlayerPos = this.currentPlayer.getPosition(); + const currentPlayerPos = this.currentPlayer.getDirectionalActivationPosition(this.directionalActivationPositionShift); for (const object of objects) { const distance = MathUtils.distanceBetween(currentPlayerPos, object.getPosition()); this.activatableObjectsDistances.set(object, distance); @@ -89,7 +90,10 @@ export class ActivatablesManager { public updateDistanceForSingleActivatableObject(object: ActivatableInterface): void { this.activatableObjectsDistances.set( object, - MathUtils.distanceBetween(this.currentPlayer.getPosition(), object.getPosition()) + MathUtils.distanceBetween( + this.currentPlayer.getDirectionalActivationPosition(this.directionalActivationPositionShift), + object.getPosition(), + ) ); } } From 9571a52f1e674f5c820a3f5dc203783e95069d9a Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 11:21:04 +0100 Subject: [PATCH 05/17] Re-implement action message on cowebsite trigger --- .../Phaser/Game/GameMapPropertiesListener.ts | 114 +++++++++++++++--- front/src/WebRtc/CoWebsiteManager.ts | 2 +- front/src/WebRtc/LayoutManager.ts | 1 + 3 files changed, 98 insertions(+), 19 deletions(-) diff --git a/front/src/Phaser/Game/GameMapPropertiesListener.ts b/front/src/Phaser/Game/GameMapPropertiesListener.ts index caa83cb0..900a00b6 100644 --- a/front/src/Phaser/Game/GameMapPropertiesListener.ts +++ b/front/src/Phaser/Game/GameMapPropertiesListener.ts @@ -6,7 +6,7 @@ import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager"; import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore"; import { localUserStore } from "../../Connexion/LocalUserStore"; import { get } from "svelte/store"; -import { ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager"; +import { ON_ACTION_TRIGGER_BUTTON, ON_ICON_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager"; import type { ITiledMapLayer } from "../Map/ITiledMap"; import { GameMapProperties } from "./GameMapProperties"; import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore"; @@ -18,12 +18,14 @@ enum OpenCoWebsiteState { } interface OpenCoWebsite { - coWebsite: CoWebsite; + actionId: string; + coWebsite?: CoWebsite; state: OpenCoWebsiteState; } export class GameMapPropertiesListener { private coWebsitesOpenByLayer = new Map(); + private coWebsitesActionTriggerByLayer = new Map(); constructor(private scene: GameScene, private gameMap: GameMap) {} @@ -95,27 +97,19 @@ export class GameMapPropertiesListener { return; } - const actionUuid = "openWebsite-" + (Math.random() + 1).toString(36).substring(7); + const actionId = "openWebsite-" + (Math.random() + 1).toString(36).substring(7); if (this.coWebsitesOpenByLayer.has(layer)) { return; } - const coWebsite = coWebsiteManager.addCoWebsite( - openWebsiteProperty, - this.scene.MapUrlFile, - allowApiProperty, - websitePolicyProperty, - websitePositionProperty, - false - ); - this.coWebsitesOpenByLayer.set(layer, { - coWebsite: coWebsite, + actionId: actionId, + coWebsite: undefined, state: OpenCoWebsiteState.ASLEEP, }); - const openWebsiteFunction = () => { + const loadCoWebsiteFunction = (coWebsite: CoWebsite) => { coWebsiteManager .loadCoWebsite(coWebsite) .then((coWebsite) => { @@ -125,8 +119,10 @@ export class GameMapPropertiesListener { console.error("Error during a co-website closing"); }); this.coWebsitesOpenByLayer.delete(layer); + this.coWebsitesActionTriggerByLayer.delete(layer); } else { this.coWebsitesOpenByLayer.set(layer, { + actionId, coWebsite, state: OpenCoWebsiteState.OPENED, }); @@ -136,14 +132,74 @@ export class GameMapPropertiesListener { console.error("Error during loading a co-website: " + coWebsite.url); }); - layoutManagerActionStore.removeAction(actionUuid); + layoutManagerActionStore.removeAction(actionId); + }; + + const openCoWebsiteFunction = ( + url: string | undefined, + allowApi: boolean | undefined, + policy: string | undefined, + position: number | undefined + ) => { + const coWebsite = coWebsiteManager.addCoWebsite( + url ?? "", + this.scene.MapUrlFile, + allowApiProperty, + websitePolicyProperty, + websitePositionProperty, + false + ); + + loadCoWebsiteFunction(coWebsite); }; if ( - !localUserStore.getForceCowebsiteTrigger() && - websiteTriggerProperty !== ON_ACTION_TRIGGER_BUTTON + localUserStore.getForceCowebsiteTrigger() || + websiteTriggerProperty === ON_ACTION_TRIGGER_BUTTON ) { - openWebsiteFunction(); + if (!websiteTriggerMessageProperty) { + websiteTriggerMessageProperty = "Press SPACE or touch here to open web site"; + } + + this.coWebsitesActionTriggerByLayer.set(layer, actionId); + + layoutManagerActionStore.addAction({ + uuid: actionId, + type: "message", + message: websiteTriggerMessageProperty, + callback: () => + openCoWebsiteFunction( + openWebsiteProperty, + allowApiProperty, + websitePolicyProperty, + websitePositionProperty + ), + userInputManager: this.scene.userInputManager, + }); + } else if (!websiteTriggerProperty || websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) { + const coWebsite = coWebsiteManager.addCoWebsite( + openWebsiteProperty, + this.scene.MapUrlFile, + allowApiProperty, + websitePolicyProperty, + websitePositionProperty, + false + ); + + const ObjectByLayer = this.coWebsitesOpenByLayer.get(layer); + + if (ObjectByLayer) { + ObjectByLayer.coWebsite = coWebsite; + } + } + + if (!websiteTriggerProperty) { + openCoWebsiteFunction( + openWebsiteProperty, + allowApiProperty, + websitePolicyProperty, + websitePositionProperty + ); } }); }; @@ -192,6 +248,28 @@ export class GameMapPropertiesListener { } this.coWebsitesOpenByLayer.delete(layer); + + if (!websiteTriggerProperty) { + return; + } + + const actionStore = get(layoutManagerActionStore); + const actionTriggerUuid = this.coWebsitesActionTriggerByLayer.get(layer); + + if (!actionTriggerUuid) { + return; + } + + const action = + actionStore && actionStore.length > 0 + ? actionStore.find((action) => action.uuid === actionTriggerUuid) + : undefined; + + if (action) { + layoutManagerActionStore.removeAction(actionTriggerUuid); + } + + this.coWebsitesActionTriggerByLayer.delete(layer); }); }; diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 8e646d9d..9f4f0c36 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -21,7 +21,7 @@ const gameOverlayDomId = "game-overlay"; const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes. const cowebsiteAsideHolderDomId = "cowebsite-aside-holder"; const cowebsiteLoaderDomId = "cowebsite-loader"; -export const cowebsiteCloseButtonId = "cowebsite-close"; +const cowebsiteCloseButtonId = "cowebsite-close"; const cowebsiteFullScreenButtonId = "cowebsite-fullscreen"; const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open"; const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close"; diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index de79047f..a926cb41 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -13,5 +13,6 @@ export enum DivImportance { } export const ON_ACTION_TRIGGER_BUTTON = "onaction"; +export const ON_ICON_TRIGGER_BUTTON = "onicon"; export type Box = { xStart: number; yStart: number; xEnd: number; yEnd: number }; From aec7790875e9802e494c88168c32d198d06a8d8b Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Mon, 7 Feb 2022 12:36:33 +0100 Subject: [PATCH 06/17] disable activation by distance if in JITSI --- front/src/Phaser/Game/ActivatablesManager.ts | 46 ++++++++++++++----- front/src/Phaser/Game/GameScene.ts | 2 + .../UserInput/GameSceneUserInputHandler.ts | 5 +- front/src/Stores/OutlineColorStore.ts | 2 - 4 files changed, 39 insertions(+), 16 deletions(-) diff --git a/front/src/Phaser/Game/ActivatablesManager.ts b/front/src/Phaser/Game/ActivatablesManager.ts index f5f893db..f136de7c 100644 --- a/front/src/Phaser/Game/ActivatablesManager.ts +++ b/front/src/Phaser/Game/ActivatablesManager.ts @@ -11,6 +11,8 @@ export class ActivatablesManager { private currentPlayer: Player; + private canSelectByDistance: boolean = true; + private readonly outlineColor = 0xffff00; private readonly directionalActivationPositionShift = 50; @@ -49,6 +51,9 @@ export class ActivatablesManager { } public deduceSelectedActivatableObjectByDistance(): void { + if (!this.canSelectByDistance) { + return; + } const newNearestObject = this.findNearestActivatableObject(); if (this.selectedActivatableObjectByDistance === newNearestObject) { return; @@ -67,18 +72,6 @@ export class ActivatablesManager { } } - private findNearestActivatableObject(): ActivatableInterface | undefined { - let shortestDistance: number = Infinity; - let closestObject: ActivatableInterface | undefined = undefined; - - for (const [object, distance] of this.activatableObjectsDistances.entries()) { - if (object.isActivatable() && object.activationRadius > distance && shortestDistance > distance) { - shortestDistance = distance; - closestObject = object; - } - } - return closestObject; - } public updateActivatableObjectsDistances(objects: ActivatableInterface[]): void { const currentPlayerPos = this.currentPlayer.getDirectionalActivationPosition(this.directionalActivationPositionShift); for (const object of objects) { @@ -96,4 +89,33 @@ export class ActivatablesManager { ) ); } + + public disableSelectingByDistance(): void { + this.canSelectByDistance = false; + if (isOutlineable(this.selectedActivatableObjectByDistance)) { + this.selectedActivatableObjectByDistance?.characterFarAwayOutline(); + } + this.selectedActivatableObjectByDistance = undefined; + } + + public enableSelectingByDistance(): void { + this.canSelectByDistance = true; + } + + private findNearestActivatableObject(): ActivatableInterface | undefined { + let shortestDistance: number = Infinity; + let closestObject: ActivatableInterface | undefined = undefined; + + for (const [object, distance] of this.activatableObjectsDistances.entries()) { + if (object.isActivatable() && object.activationRadius > distance && shortestDistance > distance) { + shortestDistance = distance; + closestObject = object; + } + } + return closestObject; + } + + public isSelectingByDistanceEnabled(): boolean { + return this.canSelectByDistance; + } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index e7242f90..0f081c14 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -957,9 +957,11 @@ export class GameScene extends DirtyScene { this.gameMap.onPropertyChange(GameMapProperties.JITSI_ROOM, (newValue, oldValue, allProps) => { if (newValue === undefined) { + this.activatablesManager.enableSelectingByDistance(); layoutManagerActionStore.removeAction("jitsi"); this.stopJitsi(); } else { + this.activatablesManager.disableSelectingByDistance(); const openJitsiRoomFunction = () => { const roomName = jitsiFactory.getRoomName(newValue.toString(), this.instance); const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined; diff --git a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts b/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts index 4d9ac8a9..566e8882 100644 --- a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts +++ b/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts @@ -53,8 +53,9 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface { public handlePointerDownEvent(pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]): void {} public handleSpaceKeyUpEvent(event: Event): Event { - const activatable = this.gameScene.getActivatablesManager().getSelectedActivatableObject(); - if (activatable && activatable.isActivatable()) { + const activatableManager = this.gameScene.getActivatablesManager(); + const activatable = activatableManager.getSelectedActivatableObject(); + if (activatable && activatable.isActivatable() && activatableManager.isSelectingByDistanceEnabled()) { activatable.activate(); } return event; diff --git a/front/src/Stores/OutlineColorStore.ts b/front/src/Stores/OutlineColorStore.ts index a444037d..97a443e1 100644 --- a/front/src/Stores/OutlineColorStore.ts +++ b/front/src/Stores/OutlineColorStore.ts @@ -10,8 +10,6 @@ export function createColorStore() { const updateColor = () => { - console.log('update color'); - console.log(pointedByPointer, pointedByCharacter, followColor, apiColor); set(pointedByPointer ?? pointedByCharacter ?? followColor ?? apiColor); }; From 4bae6e75b1c37913361b5b5f15abfb5f4344b792 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Mon, 7 Feb 2022 12:37:59 +0100 Subject: [PATCH 07/17] enable activating by distance if in JITSI and JITSI was already opened --- front/src/Phaser/Game/GameScene.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 0f081c14..37b9a066 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -972,6 +972,7 @@ export class GameScene extends DirtyScene { } else { this.startJitsi(roomName, undefined); } + this.activatablesManager.enableSelectingByDistance(); layoutManagerActionStore.removeAction("jitsi"); }; From 81272fbb3cc09736b0577b070020c516d7395fff Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Mon, 7 Feb 2022 13:47:33 +0100 Subject: [PATCH 08/17] yarn.lock update --- yarn.lock | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index b9698f61..adbed748 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,7 @@ # yarn lockfile v1 -"husky@^6.0.0": - "resolved" "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz" - "version" "6.0.0" +husky@^7.0.1: + version "7.0.4" + resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535" + integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ== From d4801507289464a2a649a24400df4d3ff80be1fe Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Mon, 7 Feb 2022 14:22:43 +0100 Subject: [PATCH 09/17] cleaner approach to disable activatablesManager distance check if space-event --- front/src/Interfaces/UserInputHandlerInterface.ts | 3 +++ front/src/Phaser/Game/GameScene.ts | 3 --- front/src/Phaser/UserInput/GameSceneUserInputHandler.ts | 9 +++++++++ front/src/Phaser/UserInput/UserInputManager.ts | 4 ++-- front/src/Stores/LayoutManagerStore.ts | 1 + 5 files changed, 15 insertions(+), 5 deletions(-) diff --git a/front/src/Interfaces/UserInputHandlerInterface.ts b/front/src/Interfaces/UserInputHandlerInterface.ts index cf7b2f1c..2a8c6b3e 100644 --- a/front/src/Interfaces/UserInputHandlerInterface.ts +++ b/front/src/Interfaces/UserInputHandlerInterface.ts @@ -9,4 +9,7 @@ export interface UserInputHandlerInterface { handlePointerUpEvent: (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => void; handlePointerDownEvent: (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => void; handleSpaceKeyUpEvent: (event: Event) => Event; + + addSpaceEventListener: (callback: Function) => void; + removeSpaceEventListner: (callback: Function) => void; } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 37b9a066..e7242f90 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -957,11 +957,9 @@ export class GameScene extends DirtyScene { this.gameMap.onPropertyChange(GameMapProperties.JITSI_ROOM, (newValue, oldValue, allProps) => { if (newValue === undefined) { - this.activatablesManager.enableSelectingByDistance(); layoutManagerActionStore.removeAction("jitsi"); this.stopJitsi(); } else { - this.activatablesManager.disableSelectingByDistance(); const openJitsiRoomFunction = () => { const roomName = jitsiFactory.getRoomName(newValue.toString(), this.instance); const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined; @@ -972,7 +970,6 @@ export class GameScene extends DirtyScene { } else { this.startJitsi(roomName, undefined); } - this.activatablesManager.enableSelectingByDistance(); layoutManagerActionStore.removeAction("jitsi"); }; diff --git a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts b/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts index 566e8882..fc9e83cf 100644 --- a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts +++ b/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts @@ -60,4 +60,13 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface { } return event; } + + public addSpaceEventListener(callback: Function): void { + this.gameScene.input.keyboard.addListener("keyup-SPACE", callback); + this.gameScene.getActivatablesManager().disableSelectingByDistance(); + } + public removeSpaceEventListner(callback: Function): void { + this.gameScene.input.keyboard.removeListener("keyup-SPACE", callback); + this.gameScene.getActivatablesManager().enableSelectingByDistance(); + } } diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index 112ab0e5..e7f814b9 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -223,10 +223,10 @@ export class UserInputManager { } addSpaceEventListner(callback: Function) { - this.scene.input.keyboard.addListener("keyup-SPACE", callback); + this.userInputHandler.addSpaceEventListener(callback); } removeSpaceEventListner(callback: Function) { - this.scene.input.keyboard.removeListener("keyup-SPACE", callback); + this.userInputHandler.removeSpaceEventListner(callback); } destroy(): void { diff --git a/front/src/Stores/LayoutManagerStore.ts b/front/src/Stores/LayoutManagerStore.ts index b6f428aa..e0f8d955 100644 --- a/front/src/Stores/LayoutManagerStore.ts +++ b/front/src/Stores/LayoutManagerStore.ts @@ -1,4 +1,5 @@ import { derived, writable } from "svelte/store"; +import type { ActivatablesManager } from "../Phaser/Game/ActivatablesManager"; import type { UserInputManager } from "../Phaser/UserInput/UserInputManager"; export interface LayoutManagerAction { From c29ce6e9a932de9cdef37406eab0d8278ea1ff69 Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Mon, 7 Feb 2022 14:23:34 +0100 Subject: [PATCH 10/17] prettier --- front/src/Phaser/Entity/Character.ts | 18 +++++++++++++----- front/src/Phaser/Game/ActivatablesManager.ts | 6 ++++-- front/src/Stores/OutlineColorStore.ts | 1 - 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 061bc2e5..b411eee7 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -163,12 +163,20 @@ export abstract class Character extends Container implements OutlineableInterfac * Returns position based on where player is currently facing * @param shift How far from player should the point of interest be. */ - public getDirectionalActivationPosition(shift: number): { x: number, y: number } { + public getDirectionalActivationPosition(shift: number): { x: number; y: number } { switch (this.lastDirection) { - case PlayerAnimationDirections.Down: { return { x: this.x, y: this.y + shift }; } - case PlayerAnimationDirections.Left: { return { x: this.x - shift, y: this.y }; } - case PlayerAnimationDirections.Right: { return { x: this.x + shift, y: this.y }; } - case PlayerAnimationDirections.Up: { return { x: this.x, y: this.y - shift }; } + case PlayerAnimationDirections.Down: { + return { x: this.x, y: this.y + shift }; + } + case PlayerAnimationDirections.Left: { + return { x: this.x - shift, y: this.y }; + } + case PlayerAnimationDirections.Right: { + return { x: this.x + shift, y: this.y }; + } + case PlayerAnimationDirections.Up: { + return { x: this.x, y: this.y - shift }; + } } } diff --git a/front/src/Phaser/Game/ActivatablesManager.ts b/front/src/Phaser/Game/ActivatablesManager.ts index f136de7c..74c637d7 100644 --- a/front/src/Phaser/Game/ActivatablesManager.ts +++ b/front/src/Phaser/Game/ActivatablesManager.ts @@ -73,7 +73,9 @@ export class ActivatablesManager { } public updateActivatableObjectsDistances(objects: ActivatableInterface[]): void { - const currentPlayerPos = this.currentPlayer.getDirectionalActivationPosition(this.directionalActivationPositionShift); + const currentPlayerPos = this.currentPlayer.getDirectionalActivationPosition( + this.directionalActivationPositionShift + ); for (const object of objects) { const distance = MathUtils.distanceBetween(currentPlayerPos, object.getPosition()); this.activatableObjectsDistances.set(object, distance); @@ -85,7 +87,7 @@ export class ActivatablesManager { object, MathUtils.distanceBetween( this.currentPlayer.getDirectionalActivationPosition(this.directionalActivationPositionShift), - object.getPosition(), + object.getPosition() ) ); } diff --git a/front/src/Stores/OutlineColorStore.ts b/front/src/Stores/OutlineColorStore.ts index 97a443e1..8ecd7293 100644 --- a/front/src/Stores/OutlineColorStore.ts +++ b/front/src/Stores/OutlineColorStore.ts @@ -8,7 +8,6 @@ export function createColorStore() { let pointedByPointer: number | undefined = undefined; let pointedByCharacter: number | undefined = undefined; - const updateColor = () => { set(pointedByPointer ?? pointedByCharacter ?? followColor ?? apiColor); }; From 60c17ecea271732deb78d56d145c4aa8300b49d0 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 14:55:51 +0100 Subject: [PATCH 11/17] Re-implement set width of main cowebsite --- front/src/Api/Events/OpenCoWebsiteEvent.ts | 1 + front/src/Api/iframe/nav.ts | 2 + front/src/Phaser/Game/GameMapProperties.ts | 1 + .../Phaser/Game/GameMapPropertiesListener.ts | 31 +++----- front/src/Phaser/Game/GameScene.ts | 1 + front/src/WebRtc/CoWebsiteManager.ts | 73 +++++++++++++------ front/src/WebRtc/JitsiFactory.ts | 10 ++- .../CoWebsite/cowebsite_property_trigger.json | 5 ++ 8 files changed, 81 insertions(+), 43 deletions(-) diff --git a/front/src/Api/Events/OpenCoWebsiteEvent.ts b/front/src/Api/Events/OpenCoWebsiteEvent.ts index 51a17763..b991d3f7 100644 --- a/front/src/Api/Events/OpenCoWebsiteEvent.ts +++ b/front/src/Api/Events/OpenCoWebsiteEvent.ts @@ -5,6 +5,7 @@ export const isOpenCoWebsiteEvent = new tg.IsInterface() url: tg.isString, allowApi: tg.isOptional(tg.isBoolean), allowPolicy: tg.isOptional(tg.isString), + widthPercent: tg.isOptional(tg.isNumber), position: tg.isOptional(tg.isNumber), closable: tg.isOptional(tg.isBoolean), lazy: tg.isOptional(tg.isBoolean), diff --git a/front/src/Api/iframe/nav.ts b/front/src/Api/iframe/nav.ts index d5362b4b..b57f2456 100644 --- a/front/src/Api/iframe/nav.ts +++ b/front/src/Api/iframe/nav.ts @@ -45,6 +45,7 @@ export class WorkadventureNavigationCommands extends IframeApiContribution { + const openCoWebsiteFunction = () => { const coWebsite = coWebsiteManager.addCoWebsite( - url ?? "", + openWebsiteProperty ?? "", this.scene.MapUrlFile, allowApiProperty, websitePolicyProperty, + websiteWidthProperty, websitePositionProperty, false ); @@ -167,13 +166,7 @@ export class GameMapPropertiesListener { uuid: actionId, type: "message", message: websiteTriggerMessageProperty, - callback: () => - openCoWebsiteFunction( - openWebsiteProperty, - allowApiProperty, - websitePolicyProperty, - websitePositionProperty - ), + callback: () => openCoWebsiteFunction(), userInputManager: this.scene.userInputManager, }); } else if (!websiteTriggerProperty || websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) { @@ -182,6 +175,7 @@ export class GameMapPropertiesListener { this.scene.MapUrlFile, allowApiProperty, websitePolicyProperty, + websiteWidthProperty, websitePositionProperty, false ); @@ -194,12 +188,7 @@ export class GameMapPropertiesListener { } if (!websiteTriggerProperty) { - openCoWebsiteFunction( - openWebsiteProperty, - allowApiProperty, - websitePolicyProperty, - websitePositionProperty - ); + openCoWebsiteFunction(); } }); }; diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 242d97c8..8b62a435 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1265,6 +1265,7 @@ ${escapedMessage} iframeListener.getBaseUrlFromSource(source), openCoWebsite.allowApi, openCoWebsite.allowPolicy, + openCoWebsite.widthPercent, openCoWebsite.position, openCoWebsite.closable ?? true ); diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 9f4f0c36..7b7147b3 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -43,6 +43,7 @@ export type CoWebsite = { closable: boolean; allowPolicy: string | undefined; allowApi: boolean | undefined; + widthPercent?: number | undefined; jitsi?: boolean; altMessage?: string; }; @@ -82,8 +83,13 @@ class CoWebsiteManager { this.cowebsiteDom.style.width = width + "px"; } - set widthPercent(width: number) { - this.cowebsiteDom.style.width = width + "%"; + get maxWidth(): number { + let maxWidth = 75 * window.innerWidth; + if (maxWidth !== 0) { + maxWidth = Math.round(maxWidth / 100); + } + + return maxWidth; } get height(): number { @@ -94,6 +100,15 @@ class CoWebsiteManager { this.cowebsiteDom.style.height = height + "px"; } + get maxHeight(): number { + let maxHeight = 60 * window.innerHeight; + if (maxHeight !== 0) { + maxHeight = Math.round(maxHeight / 100); + } + + return maxHeight; + } + get verticalMode(): boolean { return window.innerWidth < window.innerHeight; } @@ -191,29 +206,21 @@ class CoWebsiteManager { if (this.verticalMode) { const tempValue = this.height + y; - let maxHeight = 60 * window.innerHeight; - if (maxHeight !== 0) { - maxHeight = Math.round(maxHeight / 100); - } if (tempValue < this.cowebsiteAsideHolderDom.offsetHeight) { this.height = this.cowebsiteAsideHolderDom.offsetHeight; - } else if (tempValue > maxHeight) { - this.height = maxHeight; + } else if (tempValue > this.maxHeight) { + this.height = this.maxHeight; } else { this.height = tempValue; } } else { const tempValue = this.width - x; - let maxWidth = 75 * window.innerWidth; - if (maxWidth !== 0) { - maxWidth = Math.round(maxWidth / 100); - } if (tempValue < this.cowebsiteAsideHolderDom.offsetWidth) { this.width = this.cowebsiteAsideHolderDom.offsetWidth; - } else if (tempValue > maxWidth) { - this.width = maxWidth; + } else if (tempValue > this.maxWidth) { + this.width = this.maxWidth; } else { this.width = tempValue; } @@ -308,7 +315,7 @@ class CoWebsiteManager { this.fire(); } - private loadMain(): void { + private loadMain(openingWidth?: number): void { this.loaderAnimationInterval.interval = setInterval(() => { if (!this.loaderAnimationInterval.trails) { this.loaderAnimationInterval.trails = [0, 1, 2]; @@ -337,6 +344,25 @@ class CoWebsiteManager { trail === 3 ? 0 : trail + 1 ); }, 200); + + if (!this.verticalMode && openingWidth) { + let newWidth = 50; + + if (openingWidth > 100) { + newWidth = 100; + } else if (openingWidth > 1) { + newWidth = openingWidth; + } + + newWidth = Math.round((newWidth * this.maxWidth) / 100); + + if (newWidth < this.cowebsiteAsideHolderDom.offsetWidth) { + newWidth = this.cowebsiteAsideHolderDom.offsetWidth; + } + + this.width = newWidth; + } + this.cowebsiteDom.classList.add("opened"); this.openedMain = iframeStates.loading; } @@ -346,7 +372,6 @@ class CoWebsiteManager { this.resizeAllIframes(); }); this.openedMain = iframeStates.opened; - this.resetStyleMain(); } public resetStyleMain() { @@ -533,6 +558,7 @@ class CoWebsiteManager { base: string, allowApi?: boolean, allowPolicy?: string, + widthPercent?: number, position?: number, closable?: boolean, altMessage?: string @@ -549,6 +575,7 @@ class CoWebsiteManager { closable: closable ?? false, allowPolicy, allowApi, + widthPercent, altMessage, }; @@ -561,14 +588,11 @@ class CoWebsiteManager { iframe: HTMLIFrameElement, allowApi?: boolean, allowPolicy?: string, + widthPercent?: number, position?: number, closable?: boolean, jitsi?: boolean ): CoWebsite { - if (get(coWebsitesNotAsleep).length < 1) { - this.loadMain(); - } - iframe.id = this.generateUniqueId(); const newCoWebsite: CoWebsite = { @@ -578,9 +602,16 @@ class CoWebsiteManager { closable: closable ?? false, allowPolicy, allowApi, + widthPercent, jitsi, }; + if (get(coWebsitesNotAsleep).length < 1) { + coWebsites.remove(newCoWebsite); + coWebsites.add(newCoWebsite, 0); + this.loadMain(widthPercent); + } + if (position === 0) { this.openMain(); setTimeout(() => { @@ -597,7 +628,7 @@ class CoWebsiteManager { if (get(coWebsitesNotAsleep).length < 1) { coWebsites.remove(coWebsite); coWebsites.add(coWebsite, 0); - this.loadMain(); + this.loadMain(coWebsite.widthPercent); } coWebsite.state.set("loading"); diff --git a/front/src/WebRtc/JitsiFactory.ts b/front/src/WebRtc/JitsiFactory.ts index b273a64c..8f7ed952 100644 --- a/front/src/WebRtc/JitsiFactory.ts +++ b/front/src/WebRtc/JitsiFactory.ts @@ -179,7 +179,15 @@ class JitsiFactory { const doResolve = (): void => { const iframe = coWebsiteManager.getCoWebsiteBuffer().querySelector('[id*="jitsi" i]'); if (iframe && this.jitsiApi) { - const coWebsite = coWebsiteManager.addCoWebsiteFromIframe(iframe, false, undefined, 0, false, true); + const coWebsite = coWebsiteManager.addCoWebsiteFromIframe( + iframe, + false, + undefined, + undefined, + 0, + false, + true + ); this.jitsiApi.addListener("videoConferenceLeft", () => { this.closeOrUnload(coWebsite); diff --git a/maps/tests/CoWebsite/cowebsite_property_trigger.json b/maps/tests/CoWebsite/cowebsite_property_trigger.json index 183fad3a..116f399c 100644 --- a/maps/tests/CoWebsite/cowebsite_property_trigger.json +++ b/maps/tests/CoWebsite/cowebsite_property_trigger.json @@ -47,6 +47,11 @@ "name":"openWebsiteTrigger", "type":"string", "value":"onaction" + }, + { + "name":"openWebsiteWidth", + "type":"int", + "value":100 }], "type":"tilelayer", "visible":true, From 75d42209f48d33dc92c955736b5cea4594a4453f Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 17:09:52 +0100 Subject: [PATCH 12/17] Hide main cowebsite --- .../CoWebsiteThumbnailSlot.svelte | 7 +++- front/src/WebRtc/CoWebsiteManager.ts | 32 ++++++++++++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte index 809d1985..b71a35c0 100644 --- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte +++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte @@ -5,6 +5,7 @@ import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore"; import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore"; import type { CoWebsite } from "../../WebRtc/CoWebsiteManager"; + import { iframeStates } from "../../WebRtc/CoWebsiteManager"; import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager"; export let index: number; @@ -35,8 +36,12 @@ if ($mainCoWebsite.iframe.id === coWebsite.iframe.id) { const coWebsites = $coWebsitesNotAsleep; const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined; - if (newMain) { + if (newMain && newMain.iframe.id !== $mainCoWebsite.iframe.id) { coWebsiteManager.goToMain(newMain); + } else if (coWebsiteManager.getMainState() === iframeStates.closed) { + coWebsiteManager.displayMain(); + } else { + coWebsiteManager.hideMain(); } } else { highlightedEmbedScreen.toggleHighlight({ diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 7b7147b3..4d6f482c 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -10,7 +10,7 @@ import { jitsiFactory } from "./JitsiFactory"; import { gameManager } from "../Phaser/Game/GameManager"; import { LayoutMode } from "./LayoutManager"; -enum iframeStates { +export enum iframeStates { closed = 1, loading, // loading an iframe can be slow, so we show some placeholder until it is ready opened, @@ -75,6 +75,10 @@ class CoWebsiteManager { this.resizeAllIframes(); }); + public getMainState() { + return this.openedMain; + } + get width(): number { return this.cowebsiteDom.clientWidth; } @@ -306,6 +310,27 @@ class CoWebsiteManager { }); } + public displayMain() { + const coWebsite = this.getMainCoWebsite(); + if (coWebsite) { + coWebsite.iframe.style.display = "block"; + } + this.loadMain(); + this.openMain(); + this.fire(); + } + + public hideMain() { + const coWebsite = this.getMainCoWebsite(); + if (coWebsite) { + coWebsite.iframe.style.display = "none"; + } + this.cowebsiteDom.classList.add("closing"); + this.cowebsiteDom.classList.remove("opened"); + this.openedMain = iframeStates.closed; + this.fire(); + } + private closeMain(): void { this.toggleFullScreenIcon(true); this.cowebsiteDom.classList.add("closing"); @@ -631,6 +656,11 @@ class CoWebsiteManager { this.loadMain(coWebsite.widthPercent); } + // Check if the main is hide + if (this.getMainCoWebsite() && this.openedMain === iframeStates.closed) { + this.displayMain(); + } + coWebsite.state.set("loading"); const mainCoWebsite = this.getMainCoWebsite(); From c2da4c3906681c8a260380925fdb2660ae1fa376 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 17:25:55 +0100 Subject: [PATCH 13/17] Fix active custom menu button --- front/src/Components/Menu/Menu.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte index 69cfa25e..08957a5c 100644 --- a/front/src/Components/Menu/Menu.svelte +++ b/front/src/Components/Menu/Menu.svelte @@ -69,6 +69,7 @@ } else { const customMenu = customMenuIframe.get(menu.label); if (customMenu !== undefined) { + activeSubMenu = menu; props = { url: customMenu.url, allowApi: customMenu.allowApi }; activeComponent = CustomSubMenu; } else { From 433d3a20c6c80b9a00f20a63060558d3c721f485 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 17:32:05 +0100 Subject: [PATCH 14/17] Fix raw html not displayed buy terms translation key --- front/src/Components/Login/LoginScene.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte index 4efbc514..0576ac9f 100644 --- a/front/src/Components/Login/LoginScene.svelte +++ b/front/src/Components/Login/LoginScene.svelte @@ -53,7 +53,7 @@
Need for traduction

- {$LL.login.terms()} + {@html $LL.login.terms()}

{/if} From e51300e850f75e869d96d25262a8c2bedfd80715 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 17:53:36 +0100 Subject: [PATCH 15/17] Add cowebsite percentWidth property to the documention --- docs/maps/api-nav.md | 27 ++++++++++++------------- docs/maps/images/icon_open_website.png | Bin 0 -> 7971 bytes docs/maps/opening-a-website.md | 7 +++++++ 3 files changed, 20 insertions(+), 14 deletions(-) create mode 100644 docs/maps/images/icon_open_website.png diff --git a/docs/maps/api-nav.md b/docs/maps/api-nav.md index 2743d1ad..8d9fe595 100644 --- a/docs/maps/api-nav.md +++ b/docs/maps/api-nav.md @@ -3,7 +3,7 @@ ### Opening a web page in a new tab -``` +```ts WA.nav.openTab(url: string): void ``` @@ -11,13 +11,13 @@ Opens the webpage at "url" in your browser, in a new tab. Example: -```javascript +```ts WA.nav.openTab('https://www.wikipedia.org/'); ``` ### Opening a web page in the current tab -``` +```ts WA.nav.goToPage(url: string): void ``` @@ -25,14 +25,13 @@ Opens the webpage at "url" in your browser in place of WorkAdventure. WorkAdvent Example: -```javascript +```ts WA.nav.goToPage('https://www.wikipedia.org/'); ``` ### Going to a different map from the script -``` - +```ts WA.nav.goToRoom(url: string): void ``` @@ -43,7 +42,7 @@ global urls: "/_/global/domain/path/map.json[#start-layer-name]" Example: -```javascript +```ts WA.nav.goToRoom("/@/tcm/workadventure/floor0") // workadventure urls WA.nav.goToRoom('../otherMap/map.json'); WA.nav.goToRoom("/_/global/.json#start-layer-2") @@ -51,25 +50,25 @@ WA.nav.goToRoom("/_/global/.json#start-layer-2") ### Opening/closing web page in Co-Websites -``` -WA.nav.openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = "", position: number, closable: boolean, lazy: boolean): Promise +```ts +WA.nav.openCoWebSite(url: string, allowApi?: boolean = false, allowPolicy?: string = "", percentWidth?: number, position?: number, closable?: boolean, lazy?: boolean): Promise ``` -Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allows the webpage to use the "IFrame API" and execute script (it is equivalent to putting the `openWebsiteAllowApi` property in the map). `allowPolicy` grants additional access rights to the iFrame. The `allowPolicy` parameter is turned into an [`allow` feature policy in the iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow), position in whitch slot the web page will be open, closable allow to close the webpage also you need to close it by the api and lazy +Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allows the webpage to use the "IFrame API" and execute script (it is equivalent to putting the `openWebsiteAllowApi` property in the map). `allowPolicy` grants additional access rights to the iFrame. The `allowPolicy` parameter is turned into an [`allow` feature policy in the iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow),widthPercent define the width of the main cowebsite beetween the min size and the max size (70% of the viewport), position in whitch slot the web page will be open, closable allow to close the webpage also you need to close it by the api and lazy it's to add the cowebsite but don't load it. Example: -```javascript +```ts const coWebsite = await WA.nav.openCoWebSite('https://www.wikipedia.org/'); -const coWebsiteWorkAdventure = await WA.nav.openCoWebSite('https://workadventu.re/', true, "", 1, true, true); +const coWebsiteWorkAdventure = await WA.nav.openCoWebSite('https://workadventu.re/', true, "", 70, 1, true, true); // ... coWebsite.close(); ``` ### Get all Co-Websites -``` +```ts WA.nav.getCoWebSites(): Promise ``` @@ -77,6 +76,6 @@ Get all opened co-websites with their ids and positions. Example: -```javascript +```ts const coWebsites = await WA.nav.getCowebSites(); ``` diff --git a/docs/maps/images/icon_open_website.png b/docs/maps/images/icon_open_website.png new file mode 100644 index 0000000000000000000000000000000000000000..f3a505bd357feb3b4ea23b124bef0ed9977f6fe4 GIT binary patch literal 7971 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 literal 0 HcmV?d00001 diff --git a/docs/maps/opening-a-website.md b/docs/maps/opening-a-website.md index 64b19f1c..a84bde30 100644 --- a/docs/maps/opening-a-website.md +++ b/docs/maps/opening-a-website.md @@ -52,6 +52,13 @@ If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an If you set `openWebsiteTriggerMessage: your message action` you can edit alert message displayed. If is not defined, the default message displayed is 'Press on SPACE to open the web site'. +If you set `openWebsiteTrigger: onicon`, when the user walks on the layer, an icon will be displayed at the bottom of the screen: + +
+ +
The iFrame will only open if the user clicks on icon
+
+ ### Setting the iFrame "allow" attribute By default, iFrames have limited rights in browsers. For instance, they cannot put their content in fullscreen, they cannot start your webcam, etc... From c77084655899de40fde246b2d5b66d45211b5bea Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 18:23:02 +0100 Subject: [PATCH 16/17] Fix multi cowebsite creation by trigger --- front/src/Phaser/Game/GameMapPropertiesListener.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/Phaser/Game/GameMapPropertiesListener.ts b/front/src/Phaser/Game/GameMapPropertiesListener.ts index 32596ddd..497b6cbc 100644 --- a/front/src/Phaser/Game/GameMapPropertiesListener.ts +++ b/front/src/Phaser/Game/GameMapPropertiesListener.ts @@ -169,7 +169,7 @@ export class GameMapPropertiesListener { callback: () => openCoWebsiteFunction(), userInputManager: this.scene.userInputManager, }); - } else if (!websiteTriggerProperty || websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) { + } else if (websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) { const coWebsite = coWebsiteManager.addCoWebsite( openWebsiteProperty, this.scene.MapUrlFile, From 7334d59c4fd259e90f18a833b33795c34d8f9813 Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 7 Feb 2022 18:41:24 +0100 Subject: [PATCH 17/17] Remove priority on iframe add to cowebsites --- front/src/WebRtc/CoWebsiteManager.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 4d6f482c..476526da 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -618,6 +618,10 @@ class CoWebsiteManager { closable?: boolean, jitsi?: boolean ): CoWebsite { + if (get(coWebsitesNotAsleep).length < 1) { + this.loadMain(widthPercent); + } + iframe.id = this.generateUniqueId(); const newCoWebsite: CoWebsite = { @@ -631,12 +635,6 @@ class CoWebsiteManager { jitsi, }; - if (get(coWebsitesNotAsleep).length < 1) { - coWebsites.remove(newCoWebsite); - coWebsites.add(newCoWebsite, 0); - this.loadMain(widthPercent); - } - if (position === 0) { this.openMain(); setTimeout(() => {