diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts index f277cb4b..2ef8b422 100644 --- a/back/src/Controller/IoSocketController.ts +++ b/back/src/Controller/IoSocketController.ts @@ -543,13 +543,11 @@ export class IoSocketController { private handleReportMessage(client: ExSocketInterface, reportPlayerMessage: ReportPlayerMessage) { try { - let reportedSocket = this.sockets.get(reportPlayerMessage.getReporteduserid()); + const reportedSocket = this.sockets.get(reportPlayerMessage.getReporteduserid()); if (!reportedSocket) { throw 'reported socket user not found'; } //TODO report user on admin application - console.log('ADMIN_API_URL', ADMIN_API_URL); - console.log('ADMIN_API_TOKEN', ADMIN_API_TOKEN); Axios.post(`${ADMIN_API_URL}/aoi/report`, { reportedUserUuid: client.userUuid, reportedUserComment: reportPlayerMessage.getReportcomment(), @@ -558,7 +556,6 @@ export class IoSocketController { { headers: {"Authorization": `${ADMIN_API_TOKEN}`} }).catch((err) => { - console.error(err); throw err; }); } catch (e) { @@ -911,7 +908,7 @@ export class IoSocketController { * @param token */ searchClientByUuid(uuid: string): ExSocketInterface | null { - for(let socket of this.sockets.values()){ + for(const socket of this.sockets.values()){ if(socket.userUuid === uuid){ return socket; } @@ -920,7 +917,7 @@ export class IoSocketController { } public teleport(userUuid: string) { - let user = this.searchClientByUuid(userUuid); + const user = this.searchClientByUuid(userUuid); if(!user){ throw 'User not found'; } diff --git a/front/dist/resources/logos/close.svg b/front/dist/resources/logos/close.svg new file mode 100644 index 00000000..6acd8b49 --- /dev/null +++ b/front/dist/resources/logos/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/dist/resources/logos/report.svg b/front/dist/resources/logos/report.svg new file mode 100644 index 00000000..1cb3b068 --- /dev/null +++ b/front/dist/resources/logos/report.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/dist/resources/objects/report_flag.png b/front/dist/resources/objects/report_flag.png deleted file mode 100644 index 57b99126..00000000 Binary files a/front/dist/resources/objects/report_flag.png and /dev/null differ diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index e22795a9..7e8d7521 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -56,6 +56,12 @@ body .message-info.warning{ padding: 10px; z-index: 2; } + +.video-container img.report{ + right: 5px; + left: auto; +} + .video-container video{ height: 100%; } @@ -567,4 +573,74 @@ body { .main-container .audio-playing p{ color: white; margin-left: 10px; -} \ No newline at end of file +} + +/*REPORT input*/ +div.modal-report-user{ + position: absolute; + width: 800px; + height: 600px; + left: calc(50% - 400px); + top: calc(50% - 100px); + background-color: #000000ad; +} + +.modal-report-user textarea{ + position: absolute; + width: 400px; + height: 200px; + z-index: 999; + left: calc(50% - 200px); + top: calc(50% - 100px); + background-color: #00000052; + color: white; +} + +.modal-report-user img{ + position: absolute; + height: 50px; + width: 50px; + z-index: 999; + left: calc(50% - 25px); + top: calc(50% - 250px); +} + +.modal-report-user img#cancel-report-user{ + position: absolute; + z-index: 999; + right: 0; + left: auto; + top: 0; + cursor: pointer; + width: 15px; + height: 15px; +} + +.modal-report-user button{ + position: absolute; + top: calc(50% + 200px); + left: calc(50% - 50px); + width: 100px; + border: 1px solid black; + background-color: #00000000; + color: #ffda01; + border-radius: 10px; + padding: 10px 30px; + transition: all .2s ease; +} +.modal-report-user button:hover{ + cursor: pointer; + background-color: #ffda01; + color: black; + border: 1px solid black; + transform: scale(1.1); +} + +.modal-report-user p{ + font-size: 30px; + color: white; + position: absolute; + top: 90px; + width: 100%; + text-align: center; +} diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts index f0d0baa5..08f657d4 100644 --- a/front/src/Phaser/Entity/RemotePlayer.ts +++ b/front/src/Phaser/Entity/RemotePlayer.ts @@ -8,7 +8,6 @@ import {Sprite} from "./Sprite"; */ export class RemotePlayer extends Character { userId: number; - private report: Sprite; constructor( userId: number, @@ -24,28 +23,6 @@ export class RemotePlayer extends Character { //set data this.userId = userId; - - this.report = new Sprite(Scene, 20, -10, 'report_flag', 3); - this.report.setInteractive(); - this.report.visible = false; - this.report.on('pointerup', () => { - //this.scene.events.emit('reportUser', {reportedUserId: userId, reportComment: comment}); - this.scene.events.emit('reportUser', {reportedUserId: this.userId, reportComment: 'test'}); - this.report.visible = false; - }); - this.add(this.report); - - this.sprites.forEach((sprite: Sprite) => { - sprite.on('pointerover', () => { - this.report.visible = true; - }); - sprite.on('pointerup', () => { - this.report.visible = true; - }); - }) - - //the current player model should be push away by other players to prevent conflict - //this.setImmovable(false); } updatePosition(position: PointInterface): void { diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 6d8e5c3d..1dd58c11 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -10,6 +10,7 @@ const videoConstraint: boolean|MediaTrackConstraints = { export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void; export type StartScreenSharingCallback = (media: MediaStream) => void; export type StopScreenSharingCallback = (media: MediaStream) => void; +export type ReportCallback = (message: string) => void; // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only) // TODO: verify that microphone event listeners are not triggered plenty of time NOW (since MediaManager is created many times!!!!) @@ -36,7 +37,6 @@ export class MediaManager { private cinemaBtn: HTMLDivElement; private monitorBtn: HTMLDivElement; - constructor() { this.myCamVideo = this.getElementByIdOrFail('myCamVideo'); @@ -91,17 +91,14 @@ export class MediaManager { } public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void { - this.updatedLocalStreamCallBacks.add(callback); } public onStartScreenSharing(callback: StartScreenSharingCallback): void { - this.startScreenSharingCallBacks.add(callback); } public onStopScreenSharing(callback: StopScreenSharingCallback): void { - this.stopScreenSharingCallBacks.add(callback); } @@ -342,8 +339,10 @@ export class MediaManager { /** * * @param userId + * @param reportCallBack + * @param userName */ - addActiveVideo(userId: string, userName: string = ""){ + addActiveVideo(userId: string, reportCallBack: ReportCallback, userName: string = ""){ this.webrtcInAudio.play(); userName = userName.toUpperCase(); @@ -355,12 +354,19 @@ export class MediaManager { ${userName} + `; layoutManager.add(DivImportance.Normal, userId, html); + const reportBtn = this.getElementByIdOrFail(`report-${userId}`); + reportBtn.addEventListener('click', (e: MouseEvent) => { + e.preventDefault(); + this.showReportModal(userId, userName, reportCallBack); + }); + this.remoteVideo.set(userId, this.getElementByIdOrFail(userId)); } @@ -542,6 +548,58 @@ export class MediaManager { return elem as T; } + private showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){ + //create report text area + const mainContainer = this.getElementByIdOrFail('main-container'); + + const divReport = document.createElement('div'); + divReport.classList.add('modal-report-user'); + + const inputHidden = document.createElement('input'); + inputHidden.id = 'input-report-user'; + inputHidden.type = 'hidden'; + inputHidden.value = userId; + divReport.appendChild(inputHidden); + + const titleMessage = document.createElement('p'); + titleMessage.innerText = 'Vous souhaitez report : ' + userName; + divReport.appendChild(titleMessage); + + const imgReportUser = document.createElement('img'); + imgReportUser.id = 'img-report-user'; + imgReportUser.src = 'resources/logos/report.svg'; + divReport.appendChild(imgReportUser); + + const textareaUser = document.createElement('textarea'); + textareaUser.id = 'textarea-report-user'; + textareaUser.placeholder = 'Laissez un commentaire pour confirmer le report de la personne'; + divReport.appendChild(textareaUser); + + const buttonReport = document.createElement('button'); + buttonReport.id = 'button-save-report-user'; + buttonReport.innerText = 'Report'; + buttonReport.addEventListener('click', () => { + if(!textareaUser.value){ + textareaUser.style.border = '1px solid red' + return; + } + reportCallBack(textareaUser.value); + divReport.remove(); + }); + divReport.appendChild(buttonReport); + + const buttonCancel = document.createElement('img'); + buttonCancel.id = 'cancel-report-user'; + buttonCancel.src = 'resources/logos/close.svg'; + buttonCancel.addEventListener('click', () => { + divReport.remove(); + }); + divReport.appendChild(buttonCancel); + + mainContainer.appendChild(divReport); + } + + } export const mediaManager = new MediaManager(); diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 890a4313..20d10f04 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -47,6 +47,7 @@ export class SimplePeer { this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this); this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this); this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this); + mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback); mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback); mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback); @@ -145,7 +146,9 @@ export class SimplePeer { } mediaManager.removeActiveVideo("" + user.userId); - mediaManager.addActiveVideo("" + user.userId, name); + mediaManager.addActiveVideo("" + user.userId, (comment: string) => { + this.reportUser(user.userId, comment); + }, name); const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection); // When a connection is established to a video stream, and if a screen sharing is taking place, @@ -363,6 +366,13 @@ export class SimplePeer { } } + /** + * Triggered locally when clicking on the report button + */ + public reportUser(userId: number, message: string) { + this.Connection.emitReportPlayerMessage(userId, message) + } + private sendLocalScreenSharingStreamToUser(userId: number): void { // If a connection already exists with user (because it is already sharing a screen with us... let's use this connection) if (this.PeerScreenSharingConnectionArray.has(userId)) { diff --git a/front/src/index.ts b/front/src/index.ts index 177c56c0..0e8c0180 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -31,7 +31,14 @@ const config: GameConfig = { width: width / RESOLUTION, height: height / RESOLUTION, parent: "game", - scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene], + scene: [ + LoginScene, + SelectCharacterScene, + EnableCameraScene, + ReconnectingScene, + FourOFourScene, + CustomizeScene + ], zoom: RESOLUTION, physics: { default: "arcade",