2020-10-25 21:59:14 +01:00
|
|
|
import {HtmlUtils} from "./HtmlUtils";
|
2021-05-12 09:13:25 +02:00
|
|
|
import type {ShowReportCallBack} from "./MediaManager";
|
|
|
|
import type {UserInputManager} from "../Phaser/UserInput/UserInputManager";
|
2020-11-22 12:40:03 +01:00
|
|
|
import {connectionManager} from "../Connexion/ConnectionManager";
|
|
|
|
import {GameConnexionTypes} from "../Url/UrlManager";
|
2021-03-04 19:00:00 +01:00
|
|
|
import {iframeListener} from "../Api/IframeListener";
|
2020-11-22 12:40:03 +01:00
|
|
|
|
2020-10-25 21:59:14 +01:00
|
|
|
export type SendMessageCallback = (message:string) => void;
|
|
|
|
|
|
|
|
export class DiscussionManager {
|
|
|
|
private mainContainer: HTMLDivElement;
|
|
|
|
|
|
|
|
private divDiscuss?: HTMLDivElement;
|
|
|
|
private divParticipants?: HTMLDivElement;
|
|
|
|
private nbpParticipants?: HTMLParagraphElement;
|
|
|
|
private divMessages?: HTMLParagraphElement;
|
|
|
|
|
|
|
|
private participants: Map<number|string, HTMLDivElement> = new Map<number|string, HTMLDivElement>();
|
|
|
|
|
|
|
|
private activeDiscussion: boolean = false;
|
|
|
|
|
2020-10-26 14:13:51 +01:00
|
|
|
private sendMessageCallBack : Map<number|string, SendMessageCallback> = new Map<number|string, SendMessageCallback>();
|
2020-10-25 21:59:14 +01:00
|
|
|
|
2020-11-10 12:38:32 +01:00
|
|
|
private userInputManager?: UserInputManager;
|
|
|
|
|
2020-12-04 11:30:35 +01:00
|
|
|
constructor() {
|
2020-10-25 21:59:14 +01:00
|
|
|
this.mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
|
2020-12-04 11:30:35 +01:00
|
|
|
this.createDiscussPart(''); //todo: why do we always use empty string?
|
2021-03-04 19:00:00 +01:00
|
|
|
|
|
|
|
iframeListener.chatStream.subscribe((chatEvent) => {
|
|
|
|
this.addMessage(chatEvent.author, chatEvent.message, false);
|
|
|
|
this.showDiscussion();
|
|
|
|
});
|
2021-03-06 15:26:07 +01:00
|
|
|
this.onSendMessageCallback('iframe_listener', (message) => {
|
|
|
|
iframeListener.sendUserInputChat(message);
|
|
|
|
})
|
2020-10-25 21:59:14 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
private createDiscussPart(name: string) {
|
|
|
|
this.divDiscuss = document.createElement('div');
|
|
|
|
this.divDiscuss.classList.add('discussion');
|
|
|
|
|
|
|
|
const buttonCloseDiscussion: HTMLButtonElement = document.createElement('button');
|
|
|
|
buttonCloseDiscussion.classList.add('close-btn');
|
|
|
|
buttonCloseDiscussion.innerHTML = `<img src="resources/logos/close.svg"/>`;
|
|
|
|
buttonCloseDiscussion.addEventListener('click', () => {
|
2020-11-10 12:38:32 +01:00
|
|
|
this.hideDiscussion();
|
2020-10-25 21:59:14 +01:00
|
|
|
});
|
|
|
|
this.divDiscuss.appendChild(buttonCloseDiscussion);
|
|
|
|
|
|
|
|
const myName: HTMLParagraphElement = document.createElement('p');
|
|
|
|
myName.innerText = name.toUpperCase();
|
|
|
|
this.nbpParticipants = document.createElement('p');
|
|
|
|
this.nbpParticipants.innerText = 'PARTICIPANTS (1)';
|
|
|
|
|
|
|
|
this.divParticipants = document.createElement('div');
|
|
|
|
this.divParticipants.classList.add('participants');
|
|
|
|
|
|
|
|
this.divMessages = document.createElement('div');
|
|
|
|
this.divMessages.classList.add('messages');
|
|
|
|
this.divMessages.innerHTML = "<h2>Local messages</h2>"
|
|
|
|
|
|
|
|
this.divDiscuss.appendChild(myName);
|
|
|
|
this.divDiscuss.appendChild(this.nbpParticipants);
|
|
|
|
this.divDiscuss.appendChild(this.divParticipants);
|
|
|
|
this.divDiscuss.appendChild(this.divMessages);
|
|
|
|
|
|
|
|
const sendDivMessage: HTMLDivElement = document.createElement('div');
|
|
|
|
sendDivMessage.classList.add('send-message');
|
|
|
|
const inputMessage: HTMLInputElement = document.createElement('input');
|
2021-01-06 13:36:18 +01:00
|
|
|
inputMessage.onfocus = () => {
|
|
|
|
if(this.userInputManager) {
|
2021-03-22 16:10:21 +01:00
|
|
|
this.userInputManager.disableControls();
|
2021-01-06 13:36:18 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
inputMessage.onblur = () => {
|
|
|
|
if(this.userInputManager) {
|
2021-03-22 16:10:21 +01:00
|
|
|
this.userInputManager.restoreControls();
|
2021-01-06 13:36:18 +01:00
|
|
|
}
|
|
|
|
}
|
2020-10-25 21:59:14 +01:00
|
|
|
inputMessage.type = "text";
|
|
|
|
inputMessage.addEventListener('keyup', (event: KeyboardEvent) => {
|
|
|
|
if (event.key === 'Enter') {
|
|
|
|
event.preventDefault();
|
2020-11-10 12:38:32 +01:00
|
|
|
if(inputMessage.value === null
|
|
|
|
|| inputMessage.value === ''
|
|
|
|
|| inputMessage.value === undefined) {
|
|
|
|
return;
|
|
|
|
}
|
2020-10-25 21:59:14 +01:00
|
|
|
this.addMessage(name, inputMessage.value, true);
|
2020-10-26 14:13:51 +01:00
|
|
|
for(const callback of this.sendMessageCallBack.values()) {
|
2020-10-25 21:59:14 +01:00
|
|
|
callback(inputMessage.value);
|
|
|
|
}
|
|
|
|
inputMessage.value = "";
|
|
|
|
}
|
|
|
|
});
|
|
|
|
sendDivMessage.appendChild(inputMessage);
|
|
|
|
this.divDiscuss.appendChild(sendDivMessage);
|
|
|
|
|
|
|
|
//append in main container
|
|
|
|
this.mainContainer.appendChild(this.divDiscuss);
|
|
|
|
|
|
|
|
this.addParticipant('me', 'Moi', undefined, true);
|
|
|
|
}
|
|
|
|
|
2020-10-27 20:18:25 +01:00
|
|
|
public addParticipant(
|
|
|
|
userId: number|string,
|
|
|
|
name: string|undefined,
|
|
|
|
img?: string|undefined,
|
|
|
|
isMe: boolean = false,
|
2021-01-29 21:09:10 +01:00
|
|
|
showReportCallBack?: ShowReportCallBack
|
2020-10-27 20:18:25 +01:00
|
|
|
) {
|
2020-10-25 21:59:14 +01:00
|
|
|
const divParticipant: HTMLDivElement = document.createElement('div');
|
|
|
|
divParticipant.classList.add('participant');
|
|
|
|
divParticipant.id = `participant-${userId}`;
|
|
|
|
|
|
|
|
const divImgParticipant: HTMLImageElement = document.createElement('img');
|
|
|
|
divImgParticipant.src = 'resources/logos/boy.svg';
|
|
|
|
if (img !== undefined) {
|
|
|
|
divImgParticipant.src = img;
|
|
|
|
}
|
|
|
|
const divPParticipant: HTMLParagraphElement = document.createElement('p');
|
|
|
|
if(!name){
|
|
|
|
name = 'Anonymous';
|
|
|
|
}
|
|
|
|
divPParticipant.innerText = name;
|
|
|
|
|
|
|
|
divParticipant.appendChild(divImgParticipant);
|
|
|
|
divParticipant.appendChild(divPParticipant);
|
|
|
|
|
2020-11-22 12:40:03 +01:00
|
|
|
if(
|
|
|
|
!isMe
|
|
|
|
&& connectionManager.getConnexionType
|
|
|
|
&& connectionManager.getConnexionType !== GameConnexionTypes.anonymous
|
|
|
|
) {
|
2020-10-25 21:59:14 +01:00
|
|
|
const reportBanUserAction: HTMLButtonElement = document.createElement('button');
|
|
|
|
reportBanUserAction.classList.add('report-btn')
|
|
|
|
reportBanUserAction.innerText = 'Report';
|
|
|
|
reportBanUserAction.addEventListener('click', () => {
|
2021-01-29 21:09:10 +01:00
|
|
|
if(showReportCallBack) {
|
|
|
|
showReportCallBack(`${userId}`, name);
|
2020-11-10 12:38:32 +01:00
|
|
|
}else{
|
|
|
|
console.info('report feature is not activated!');
|
2020-10-27 20:18:25 +01:00
|
|
|
}
|
2020-10-25 21:59:14 +01:00
|
|
|
});
|
|
|
|
divParticipant.appendChild(reportBanUserAction);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.divParticipants?.appendChild(divParticipant);
|
2020-11-04 13:07:38 +01:00
|
|
|
|
2020-10-25 21:59:14 +01:00
|
|
|
this.participants.set(userId, divParticipant);
|
|
|
|
|
|
|
|
this.updateParticipant(this.participants.size);
|
|
|
|
}
|
|
|
|
|
|
|
|
public updateParticipant(nb: number) {
|
|
|
|
if (!this.nbpParticipants) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`;
|
|
|
|
}
|
|
|
|
|
|
|
|
public addMessage(name: string, message: string, isMe: boolean = false) {
|
|
|
|
const divMessage: HTMLDivElement = document.createElement('div');
|
|
|
|
divMessage.classList.add('message');
|
|
|
|
if(isMe){
|
|
|
|
divMessage.classList.add('me');
|
|
|
|
}
|
|
|
|
|
|
|
|
const pMessage: HTMLParagraphElement = document.createElement('p');
|
|
|
|
const date = new Date();
|
|
|
|
if(isMe){
|
2021-01-21 10:16:08 +01:00
|
|
|
name = 'Me';
|
2020-10-25 21:59:14 +01:00
|
|
|
}
|
|
|
|
pMessage.innerHTML = `<span style="font-weight: bold">${name}</span>
|
|
|
|
<span style="color:#bac2cc;display:inline-block;font-size:12px;">
|
|
|
|
${date.getHours()}:${date.getMinutes()}
|
|
|
|
</span>`;
|
|
|
|
divMessage.appendChild(pMessage);
|
|
|
|
|
|
|
|
const userMessage: HTMLParagraphElement = document.createElement('p');
|
2021-01-22 15:01:10 +01:00
|
|
|
userMessage.innerHTML = HtmlUtils.urlify(message);
|
2020-10-25 21:59:14 +01:00
|
|
|
userMessage.classList.add('body');
|
|
|
|
divMessage.appendChild(userMessage);
|
|
|
|
this.divMessages?.appendChild(divMessage);
|
2021-01-06 17:08:13 +01:00
|
|
|
|
|
|
|
//automatic scroll when there are new message
|
|
|
|
setTimeout(() => {
|
|
|
|
this.divMessages?.scroll({
|
|
|
|
top: this.divMessages?.scrollTop + divMessage.getBoundingClientRect().y,
|
|
|
|
behavior: 'smooth'
|
|
|
|
});
|
|
|
|
}, 200);
|
2020-10-25 21:59:14 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
public removeParticipant(userId: number|string){
|
|
|
|
const element = this.participants.get(userId);
|
|
|
|
if(element){
|
|
|
|
element.remove();
|
2020-11-04 13:07:38 +01:00
|
|
|
this.participants.delete(userId);
|
|
|
|
}
|
|
|
|
//if all participant leave, hide discussion button
|
|
|
|
|
2020-10-26 14:13:51 +01:00
|
|
|
this.sendMessageCallBack.delete(userId);
|
2020-10-25 21:59:14 +01:00
|
|
|
}
|
|
|
|
|
2020-10-26 14:13:51 +01:00
|
|
|
public onSendMessageCallback(userId: string|number, callback: SendMessageCallback): void {
|
|
|
|
this.sendMessageCallBack.set(userId, callback);
|
2020-10-25 21:59:14 +01:00
|
|
|
}
|
|
|
|
|
2020-10-27 20:46:53 +01:00
|
|
|
get activatedDiscussion(){
|
|
|
|
return this.activeDiscussion;
|
|
|
|
}
|
2020-11-04 13:07:38 +01:00
|
|
|
|
2020-11-10 12:38:32 +01:00
|
|
|
private showDiscussion(){
|
|
|
|
this.activeDiscussion = true;
|
|
|
|
this.divDiscuss?.classList.add('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
private hideDiscussion(){
|
|
|
|
this.activeDiscussion = false;
|
|
|
|
this.divDiscuss?.classList.remove('active');
|
|
|
|
}
|
2021-01-21 10:16:08 +01:00
|
|
|
|
2020-11-10 12:38:32 +01:00
|
|
|
public setUserInputManager(userInputManager : UserInputManager){
|
|
|
|
this.userInputManager = userInputManager;
|
|
|
|
}
|
2020-11-17 16:46:46 +01:00
|
|
|
|
|
|
|
public showDiscussionPart(){
|
|
|
|
this.showDiscussion();
|
|
|
|
}
|
2020-12-04 11:30:35 +01:00
|
|
|
}
|
|
|
|
|
2021-01-21 10:16:08 +01:00
|
|
|
export const discussionManager = new DiscussionManager();
|