Change report flag

- Add icon on video
- Permit to have a modal with comment

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

front/dist/resources/logos/close.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M512,84.85,427.15,0,256,171.15,84.85,0,0,84.85,171.15,256,0,427.15,84.85,512,256,340.85,427.15,512,512,427.15,340.85,256Z" transform="translate(0 0)"/></svg>

front/dist/resources/logos/report.svg

@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.48 56.48"><defs><style>.cls-1{fill:#e76e54;}.cls-2{fill:#fff;}</style></defs><path class="cls-1" d="M39.94,512H16.54L0,495.46v-23.4l16.54-16.54h23.4l16.54,16.54v23.4Z" transform="translate(0 -455.52)"/><path class="cls-2" d="M33.54,485.52H23l-1.77-21.18H35.3Z" transform="translate(0 -455.52)"/><path class="cls-2" d="M23,492.58H33.54v10.59H23Z" transform="translate(0 -455.52)"/></svg>

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;
-}
+}
+
+/*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;
+}

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 {

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<HTMLVideoElement>('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 {
                 <div class="rtc-error" style="display: none"></div>
                 <i id="name-${userId}" style="background-color: ${color};">${userName}</i>
                 <img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
+                <img id="report-${userId}" class="report active" src="resources/logos/report.svg">
                 <video id="${userId}" autoplay></video>
             </div>
         `;
 
         layoutManager.add(DivImportance.Normal, userId, html);
 
+        const reportBtn = this.getElementByIdOrFail<HTMLDivElement>(`report-${userId}`);
+        reportBtn.addEventListener('click', (e: MouseEvent) => {
+            e.preventDefault();
+            this.showReportModal(userId, userName, reportCallBack);
+        });
+
         this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(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<HTMLDivElement>('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();

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)) {

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",