From 74de2746c2088f19c9397662c2535166da35c92e Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sat, 31 Oct 2020 14:04:55 +0100 Subject: [PATCH 1/8] Create action button --- front/dist/resources/style/style.css | 27 +++++++++++ front/src/Phaser/Game/GameScene.ts | 27 +++++++---- .../src/Phaser/UserInput/UserInputManager.ts | 7 +++ front/src/WebRtc/JitsiFactory.ts | 3 ++ front/src/WebRtc/LayoutManager.ts | 46 +++++++++++++++++++ 5 files changed, 100 insertions(+), 10 deletions(-) diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index edd3ddf0..9aa9bc32 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -701,3 +701,30 @@ div.modal-report-user{ max-width: calc(800px - 60px); /* size of modal - padding*/ } +/** Action button **/ +div.action{ + position: absolute; + width: 100%; + height: auto; + text-align: center; + bottom: 40px; + transition: all .5s ease; + animation: mymove .5s; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out; +} +div.action p.action-body{ + padding: 10px; + background-color: #2d2d2dba; + color: #fff; + font-size: 12px; + text-align: center; + max-width: 150px; + margin-left: calc(50% - 75px); + border-radius: 15px; +} +@keyframes mymove { + 0% {bottom: 40px;} + 50% {bottom: 30px;} + 100% {bottom: 40px;} +} \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 96648255..9aaf8ee8 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -469,24 +469,31 @@ export class GameScene extends ResizableScene implements CenterListener { this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue) => { if (newValue === undefined) { + layoutManager.removeActionButton('openWebsite', this.userInputManager); coWebsiteManager.closeCoWebsite(); - } else { - coWebsiteManager.loadCoWebsite(newValue as string); + }else{ + layoutManager.addActionButton('openWebsite', 'Clik on SPACE to open web site', () => { + coWebsiteManager.loadCoWebsite(newValue as string); + }, this.userInputManager); } }); + this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => { if (newValue === undefined) { + layoutManager.removeActionButton('jitsiRoom', this.userInputManager); this.stopJitsi(); - } else { - if (JITSI_PRIVATE_MODE) { - const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined; + }else{ + layoutManager.addActionButton('jitsiRoom', 'Clik on SPACE to enter in jitsi meet room', () => { + if (JITSI_PRIVATE_MODE) { + const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined; - this.connection.emitQueryJitsiJwtMessage(this.instance.replace('/', '-') + "-" + newValue, adminTag); - } else { - this.startJitsi(newValue as string); - } + this.connection.emitQueryJitsiJwtMessage(this.instance.replace('/', '-') + "-" + newValue, adminTag); + } else { + this.startJitsi(newValue as string); + } + }, this.userInputManager); } - }) + }); this.gameMap.onPropertyChange('silent', (newValue, oldValue) => { if (newValue === undefined || newValue === false || newValue === '') { diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index fa7080b5..9f4a6071 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -77,4 +77,11 @@ export class UserInputManager { return event; }); } + + addSpaceEventListner(callback : Function){ + this.Scene.input.keyboard.addListener('keyup-SPACE', callback); + } + removeSpaceEventListner(callback : Function){ + this.Scene.input.keyboard.removeListener('keyup-SPACE', callback); + } } diff --git a/front/src/WebRtc/JitsiFactory.ts b/front/src/WebRtc/JitsiFactory.ts index 45b9b3cf..6ad69e2a 100644 --- a/front/src/WebRtc/JitsiFactory.ts +++ b/front/src/WebRtc/JitsiFactory.ts @@ -62,6 +62,9 @@ class JitsiFactory { } public async stop(): Promise { + if(!this.jitsiApi){ + return; + } await coWebsiteManager.closeCoWebsite(); this.jitsiApi.removeListener('audioMuteStatusChanged', this.audioCallback); this.jitsiApi.removeListener('videoMuteStatusChanged', this.videoCallback); diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index dc013563..4013f1d8 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -1,3 +1,4 @@ +import { UserInputManager } from "../Phaser/UserInput/UserInputManager"; import {HtmlUtils} from "./HtmlUtils"; export enum LayoutMode { @@ -33,6 +34,9 @@ class LayoutManager { private normalDivs: Map = new Map(); private listener: CenterListener|null = null; + private actionButtonTrigger: Map = new Map(); + private actionButtonInformation: Map = new Map(); + public setListener(centerListener: CenterListener|null) { this.listener = centerListener; } @@ -305,6 +309,48 @@ class LayoutManager { } } } + + public addActionButton(id: string, text: string, callBack: Function, userInputManager: UserInputManager){ + //delete previous element + this.removeActionButton(id, userInputManager); + + //create div and text html component + const p = document.createElement('p'); + p.classList.add('action-body'); + p.innerText = text; + + const div = document.createElement('div'); + div.classList.add('action'); + div.id = id; + div.appendChild(p); + + this.actionButtonInformation.set(id, div); + + const mainContainer = HtmlUtils.getElementByIdOrFail('main-container'); + mainContainer.appendChild(div); + + const callBackFunctionTrigger = (() => { + console.log('user click on space => ', id); + callBack(); + }); + + //add trigger action + this.actionButtonTrigger.set(id, callBackFunctionTrigger); + userInputManager.addSpaceEventListner(callBackFunctionTrigger); + } + + public removeActionButton(id: string, userInputManager: UserInputManager){ + //delete previous element + const previousDiv = this.actionButtonInformation.get(id); + if(previousDiv){ + previousDiv.remove(); + this.actionButtonInformation.delete(id); + } + const previousEventCallback = this.actionButtonTrigger.get(id); + if(previousEventCallback){ + userInputManager.removeSpaceEventListner(previousEventCallback); + } + } } const layoutManager = new LayoutManager(); From fcb7f364b6c6f6247c9128cde47fe8a02880626b Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 1 Nov 2020 11:49:09 +0100 Subject: [PATCH 2/8] Fix button action when user have activated --- 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 9aaf8ee8..f470c994 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -474,6 +474,7 @@ export class GameScene extends ResizableScene implements CenterListener { }else{ layoutManager.addActionButton('openWebsite', 'Clik on SPACE to open web site', () => { coWebsiteManager.loadCoWebsite(newValue as string); + layoutManager.removeActionButton('openWebsite', this.userInputManager); }, this.userInputManager); } }); From 6051e5f46a01fddc0ae21ddbdcdce1f97f817e36 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 1 Nov 2020 11:53:24 +0100 Subject: [PATCH 3/8] Fix when user have activated action button --- 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 f470c994..27d7d3d2 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -492,6 +492,7 @@ export class GameScene extends ResizableScene implements CenterListener { } else { this.startJitsi(newValue as string); } + layoutManager.removeActionButton('jitsiRoom', this.userInputManager); }, this.userInputManager); } }); From 968787555fe2c91ef978f404b6380ccadaa8b5c2 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 4 Nov 2020 13:33:58 +0100 Subject: [PATCH 4/8] Update feedback @moufmouf --- front/src/Phaser/Game/GameScene.ts | 32 +++++++++++++++++++++++------- maps/Floor0/floor0.json | 17 +++++++++++++++- 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 27d7d3d2..882681ed 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -467,24 +467,33 @@ export class GameScene extends ResizableScene implements CenterListener { // From now, this game scene will be notified of reposition events layoutManager.setListener(this); - this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue) => { + this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue, allProps) => { if (newValue === undefined) { layoutManager.removeActionButton('openWebsite', this.userInputManager); coWebsiteManager.closeCoWebsite(); }else{ - layoutManager.addActionButton('openWebsite', 'Clik on SPACE to open web site', () => { + const openWebsiteFunction = () => { coWebsiteManager.loadCoWebsite(newValue as string); layoutManager.removeActionButton('openWebsite', this.userInputManager); - }, this.userInputManager); + }; + + const openWebsiteTriggerValue = allProps.get('openWebsiteTrigger'); + if(openWebsiteTriggerValue && openWebsiteTriggerValue === 'onaction') { + layoutManager.addActionButton('openWebsite', 'Clik on SPACE to open web site', () => { + openWebsiteFunction(); + }, this.userInputManager); + }else{ + openWebsiteFunction(); + } } }); - + this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => { if (newValue === undefined) { layoutManager.removeActionButton('jitsiRoom', this.userInputManager); this.stopJitsi(); }else{ - layoutManager.addActionButton('jitsiRoom', 'Clik on SPACE to enter in jitsi meet room', () => { + const openJitsiRoomFunction = () => { if (JITSI_PRIVATE_MODE) { const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined; @@ -493,7 +502,16 @@ export class GameScene extends ResizableScene implements CenterListener { this.startJitsi(newValue as string); } layoutManager.removeActionButton('jitsiRoom', this.userInputManager); - }, this.userInputManager); + } + + const jitsiTriggerValue = allProps.get('jitsiTrigger'); + if(jitsiTriggerValue && jitsiTriggerValue === 'onaction') { + layoutManager.addActionButton('jitsiRoom', 'Clik on SPACE to enter in jitsi meet room', () => { + openJitsiRoomFunction(); + }, this.userInputManager); + }else{ + openJitsiRoomFunction(); + } } }); @@ -678,7 +696,7 @@ export class GameScene extends ResizableScene implements CenterListener { if (!properties) { return undefined; } - const obj = properties.find((property: ITiledMapLayerProperty) => property.name === name); + const obj = properties.find((property: ITiledMapLayerProperty) => property.name.toLowerCase() === name.toLowerCase()); if (obj === undefined) { return undefined; } diff --git a/maps/Floor0/floor0.json b/maps/Floor0/floor0.json index 7e6f179b..f03778e6 100644 --- a/maps/Floor0/floor0.json +++ b/maps/Floor0/floor0.json @@ -44,6 +44,11 @@ "name":"jitsiRoom", "type":"string", "value":"tcm-chillzone-2" + }, + { + "name":"jitsiTrigger", + "type":"string", + "value":"auto" }], "type":"tilelayer", "visible":true, @@ -61,7 +66,12 @@ { "name":"jitsiRoom", "type":"string", - "value":"tcm-chillzone-1" + "value":"tcm-chillzone-11" + }, + { + "name":"jitsiTrigger", + "type":"string", + "value":"onaction" }], "type":"tilelayer", "visible":true, @@ -128,6 +138,11 @@ "name":"openWebsite", "type":"string", "value":"https:\/\/app.swile.co\/" + }, + { + "name":"openWebsiteTrigger", + "type":"string", + "value":"auto" }], "type":"tilelayer", "visible":true, From a1d3b016198e5c8b3862e97591d3b0882839da94 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 4 Nov 2020 16:30:01 +0100 Subject: [PATCH 5/8] Fix typo --- front/src/Phaser/Game/GameScene.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 882681ed..3e9361ff 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -479,7 +479,7 @@ export class GameScene extends ResizableScene implements CenterListener { const openWebsiteTriggerValue = allProps.get('openWebsiteTrigger'); if(openWebsiteTriggerValue && openWebsiteTriggerValue === 'onaction') { - layoutManager.addActionButton('openWebsite', 'Clik on SPACE to open web site', () => { + layoutManager.addActionButton('openWebsite', 'Click on SPACE to open web site', () => { openWebsiteFunction(); }, this.userInputManager); }else{ @@ -506,7 +506,7 @@ export class GameScene extends ResizableScene implements CenterListener { const jitsiTriggerValue = allProps.get('jitsiTrigger'); if(jitsiTriggerValue && jitsiTriggerValue === 'onaction') { - layoutManager.addActionButton('jitsiRoom', 'Clik on SPACE to enter in jitsi meet room', () => { + layoutManager.addActionButton('jitsiRoom', 'Click on SPACE to enter in jitsi meet room', () => { openJitsiRoomFunction(); }, this.userInputManager); }else{ From f656d2edefba4b970e4be72d04d8c96562f89505 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sat, 21 Nov 2020 15:41:23 +0100 Subject: [PATCH 6/8] Update gitignore --- front/.gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/front/.gitignore b/front/.gitignore index e207e30a..e77b54d0 100644 --- a/front/.gitignore +++ b/front/.gitignore @@ -1,5 +1,6 @@ /node_modules/ /dist/bundle.js +/dist/tests/ /yarn-error.log /dist/webpack.config.js /dist/webpack.config.js.map From 3d32fb90dc6fdcd13830f52432dbb48b909ef742 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Mon, 23 Nov 2020 20:34:05 +0100 Subject: [PATCH 7/8] Add constant --- front/src/Phaser/Game/GameScene.ts | 17 +++++++++++------ front/src/WebRtc/LayoutManager.ts | 4 ++++ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index a07b4c3a..45fb6a06 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -31,7 +31,12 @@ import {Queue} from 'queue-typescript'; import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene"; import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character"; -import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager"; +import { + CenterListener, + layoutManager, + LayoutMode, + ON_ACTION_TRIGGER_BUTTON, TRIGGER_JITSI_PROPERTIES, TRIGGER_WEBSITE_PROPERTIES +} from "../../WebRtc/LayoutManager"; import Texture = Phaser.Textures.Texture; import Sprite = Phaser.GameObjects.Sprite; import CanvasTexture = Phaser.Textures.CanvasTexture; @@ -586,9 +591,9 @@ export class GameScene extends ResizableScene implements CenterListener { layoutManager.removeActionButton('openWebsite', this.userInputManager); }; - const openWebsiteTriggerValue = allProps.get('openWebsiteTrigger'); - if(openWebsiteTriggerValue && openWebsiteTriggerValue === 'onaction') { - layoutManager.addActionButton('openWebsite', 'Click on SPACE to open web site', () => { + const openWebsiteTriggerValue = allProps.get(TRIGGER_WEBSITE_PROPERTIES); + if(openWebsiteTriggerValue && openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) { + layoutManager.addActionButton('openWebsite', 'Click on SPACE to open the web site', () => { openWebsiteFunction(); }, this.userInputManager); }else{ @@ -612,8 +617,8 @@ export class GameScene extends ResizableScene implements CenterListener { layoutManager.removeActionButton('jitsiRoom', this.userInputManager); } - const jitsiTriggerValue = allProps.get('jitsiTrigger'); - if(jitsiTriggerValue && jitsiTriggerValue === 'onaction') { + const jitsiTriggerValue = allProps.get(TRIGGER_JITSI_PROPERTIES); + if(jitsiTriggerValue && jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) { layoutManager.addActionButton('jitsiRoom', 'Click on SPACE to enter in jitsi meet room', () => { openJitsiRoomFunction(); }, this.userInputManager); diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index 4013f1d8..a6b9fa27 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -23,6 +23,10 @@ export interface CenterListener { onCenterChange(): void; } +export const ON_ACTION_TRIGGER_BUTTON = 'onaction'; +export const TRIGGER_WEBSITE_PROPERTIES = 'openWebsiteTrigger'; +export const TRIGGER_JITSI_PROPERTIES = 'jitsiTrigger'; + /** * This class is in charge of the video-conference layout. * It receives positioning requests for videos and does its best to place them on the screen depending on the active layout mode. From b1410b915c2733f0fdd49075b584d22198123a68 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Mon, 23 Nov 2020 20:44:16 +0100 Subject: [PATCH 8/8] Add 'onaction' JitsiTrigger on Jitsi space floor0 --- maps/Floor0/floor0.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/maps/Floor0/floor0.json b/maps/Floor0/floor0.json index f03778e6..9d258f68 100644 --- a/maps/Floor0/floor0.json +++ b/maps/Floor0/floor0.json @@ -48,7 +48,7 @@ { "name":"jitsiTrigger", "type":"string", - "value":"auto" + "value":"onaction" }], "type":"tilelayer", "visible":true, @@ -142,7 +142,7 @@ { "name":"openWebsiteTrigger", "type":"string", - "value":"auto" + "value":"onaction" }], "type":"tilelayer", "visible":true,