noby/workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #384 from thecodingmachine/action-button

Browse Source 
Action button
This commit is contained in:
grégoire parant 2020-11-23 20:44:46 +01:00 committed by GitHub
commit c3d4c668e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 148 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/.gitignore vendored
View File

@ -1,5 +1,6 @@
/node_modules/
/dist/bundle.js
/dist/tests/
/yarn-error.log
/dist/webpack.config.js
/dist/webpack.config.js.map

28
front/dist/resources/style/style.css vendored
View File

@ -918,3 +918,31 @@ div.modal-report-user{
background-color: #ffffff;
}
/** 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;}
}

37
front/src/Phaser/Game/GameScene.ts
View File

@ -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;
@ -576,17 +581,32 @@ export class GameScene extends ResizableScene implements CenterListener {
}
private triggerOnMapLayerPropertyChange(){
this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue) => {
this.gameMap.onPropertyChange('openWebsite', (newValue, oldValue, allProps) => {
if (newValue === undefined) {
layoutManager.removeActionButton('openWebsite', this.userInputManager);
coWebsiteManager.closeCoWebsite();
}else{
const openWebsiteFunction = () => {
coWebsiteManager.loadCoWebsite(newValue as string);
layoutManager.removeActionButton('openWebsite', this.userInputManager);
};
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{
openWebsiteFunction();
}
}
});
this.gameMap.onPropertyChange('jitsiRoom', (newValue, oldValue, allProps) => {
if (newValue === undefined) {
layoutManager.removeActionButton('jitsiRoom', this.userInputManager);
this.stopJitsi();
}else{
const openJitsiRoomFunction = () => {
if (JITSI_PRIVATE_MODE) {
const adminTag = allProps.get("jitsiRoomAdminTag") as string|undefined;
@ -594,6 +614,17 @@ export class GameScene extends ResizableScene implements CenterListener {
} else {
this.startJitsi(newValue as string);
}
layoutManager.removeActionButton('jitsiRoom', this.userInputManager);
}
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);
}else{
openJitsiRoomFunction();
}
}
})
this.gameMap.onPropertyChange('silent', (newValue, oldValue) => {
@ -677,7 +708,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;
}

7
front/src/Phaser/UserInput/UserInputManager.ts
View File

@ -79,4 +79,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);
}
}

3
front/src/WebRtc/JitsiFactory.ts
View File

@ -63,6 +63,9 @@ class JitsiFactory {
}
public async stop(): Promise<void> {
if(!this.jitsiApi){
return;
}
await coWebsiteManager.closeCoWebsite();
this.jitsiApi.removeListener('audioMuteStatusChanged', this.audioCallback);
this.jitsiApi.removeListener('videoMuteStatusChanged', this.videoCallback);

50
front/src/WebRtc/LayoutManager.ts
View File

@ -1,3 +1,4 @@
import { UserInputManager } from "../Phaser/UserInput/UserInputManager";
import {HtmlUtils} from "./HtmlUtils";
export enum LayoutMode {
@ -22,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.
@ -33,6 +38,9 @@ class LayoutManager {
private normalDivs: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
private listener: CenterListener|null = null;
private actionButtonTrigger: Map<string, Function> = new Map<string, Function>();
private actionButtonInformation: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
public setListener(centerListener: CenterListener|null) {
this.listener = centerListener;
}
@ -305,6 +313,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<HTMLDivElement>('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();

17
maps/Floor0/floor0.json
View File

@ -44,6 +44,11 @@
"name":"jitsiRoom",
"type":"string",
"value":"tcm-chillzone-2"
},
{
"name":"jitsiTrigger",
"type":"string",
"value":"onaction"
}],
"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":"onaction"
}],
"type":"tilelayer",
"visible":true,