Create action button

This commit is contained in:
Gregoire Parant 2020-10-31 14:04:55 +01:00
parent 8a687f40cb
commit 74de2746c2
5 changed files with 100 additions and 10 deletions

View File

@ -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;}
}

View File

@ -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 === '') {

View File

@ -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);
}
}

View File

@ -62,6 +62,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);

View File

@ -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<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 +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<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();