Ban mesage

- Create type message could be use to send private message at any user
- Create SendMessageUser message
- Add sound when user receive ban message

back/src/Controller/IoSocketController.ts

@@ -12,8 +12,7 @@ import {
     WebRtcSignalToServerMessage,
     PlayGlobalMessage,
     ReportPlayerMessage,
-    QueryJitsiJwtMessage,
+    QueryJitsiJwtMessage
-    SendJitsiJwtMessage,
 } from "../Messages/generated/messages_pb";
 import {UserMovesMessage} from "../Messages/generated/messages_pb";
 import {TemplatedApp} from "uWebSockets.js"
@@ -72,7 +71,20 @@ export class IoSocketController {
                 clientEventsEmitter.registerToClientLeave(ws.clientLeaveCallback);
             },
             message: (ws, arrayBuffer, isBinary): void => {
-                console.log('m', ws); //todo: add admin actions such as ban here
+                try {
+                    //TODO refactor message type and data
+                    let message: {event: string, message: {type: string, message: unknown, userUuid: string}} =
+                        JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(arrayBuffer)));
+
+                    if(message.event === 'user-message') {
+                        if (message.message.type === 'ban') {
+                            let messageToEmit = (message.message as {message: string, type: string, userUuid: string});
+                            socketManager.emitSendUserMessage(messageToEmit);
+                        }
+                    }
+                }catch (err) {
+                    console.error(err);
+                }
             },
             close: (ws, code, message) => {
                 //todo make sure this code unregister the right listeners

back/src/Services/SocketManager.ts

@@ -19,7 +19,11 @@ import {
     UserMovesMessage,
     ViewportMessage, WebRtcDisconnectMessage,
     WebRtcSignalToClientMessage,
-    WebRtcSignalToServerMessage, WebRtcStartMessage, QueryJitsiJwtMessage, SendJitsiJwtMessage
+    WebRtcSignalToServerMessage,
+    WebRtcStartMessage,
+    QueryJitsiJwtMessage,
+    SendJitsiJwtMessage,
+    SendUserMessage
 } from "../Messages/generated/messages_pb";
 import {PointInterface} from "../Model/Websocket/PointInterface";
 import {User} from "../Model/User";
@@ -668,6 +672,24 @@ class SocketManager {
 
         client.send(serverToClientMessage.serializeBinary().buffer, true);
     }
+
+    public emitSendUserMessage(messageToSend: {userUuid: string, message: string, type: string}): void {
+        let socket = this.searchClientByUuid(messageToSend.userUuid);
+        if(!socket){
+            throw 'socket was not found';
+        }
+
+        const sendUserMessage = new SendUserMessage();
+        sendUserMessage.setMessage(messageToSend.message);
+        sendUserMessage.setType(messageToSend.type);
+
+        const serverToClientMessage = new ServerToClientMessage();
+        serverToClientMessage.setSendusermessage(sendUserMessage);
+
+        if (!socket.disconnecting) {
+            socket.send(serverToClientMessage.serializeBinary().buffer, true);
+        }
+    }
 }
 
 export const socketManager = new SocketManager();

front/dist/index.html

@@ -125,6 +125,9 @@
         <audio id="audio-webrtc-in">
             <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
         </audio>
+        <audio id="report-message">
+            <source src="/resources/objects/report-message.mp3" type="audio/mp3">
+        </audio>
 
     </body>
 </html>

front/dist/resources/style/style.css

@@ -654,4 +654,6 @@ div.modal-report-user{
     width: 100%;
     text-align: left;
     padding: 30px;
+    max-width: calc(800px - 60px); /* size of modal - padding*/
 }
+

front/src/Administration/TypeMessage.ts

@@ -0,0 +1,62 @@
+import {TypeMessageInterface} from "./UserMessageManager";
+import {HtmlUtils} from "../WebRtc/HtmlUtils";
+
+export class Ban implements TypeMessageInterface {
+    private nbSecond = 0;
+    private maxNbSecond = 10;
+    private titleMessage = 'IMPORTANT !';
+
+    showMessage(message: string): void {
+        let div : HTMLDivElement = document.createElement('div');
+        div.classList.add('modal-report-user');
+        div.id = 'report-message-user';
+        div.style.backgroundColor = '#000000e0';
+
+        let img : HTMLImageElement = document.createElement('img');
+        img.src = 'resources/logos/report.svg';
+        div.appendChild(img);
+
+        let title : HTMLParagraphElement = document.createElement('p');
+        title.id = 'title-report-user';
+        title.innerText = `${this.titleMessage} (${this.maxNbSecond})`;
+        div.appendChild(title);
+
+        let p : HTMLParagraphElement = document.createElement('p');
+        p.id = 'body-report-user'
+        p.innerText = message;
+        div.appendChild(p);
+
+        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
+        mainSectionDiv.appendChild(div);
+
+        const reportMessageAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
+        reportMessageAudio.play();
+
+        this.nbSecond = this.maxNbSecond;
+        setTimeout((c) => {
+            this.forMessage(title);
+        }, 1000);
+    }
+
+    forMessage(title: HTMLParagraphElement){
+        this.nbSecond -= 1;
+        title.innerText = `${this.titleMessage} (${this.nbSecond})`;
+        if(this.nbSecond > 0){
+            setTimeout(() => {
+                this.forMessage(title);
+            }, 1000);
+        }else{
+            title.innerText = this.titleMessage;
+
+            let imgCancel : HTMLImageElement = document.createElement('img');
+            imgCancel.id = 'cancel-report-user';
+            imgCancel.src = 'resources/logos/close.svg';
+
+            const div = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('report-message-user');
+            div.appendChild(imgCancel);
+            imgCancel.addEventListener('click', () => {
+                div.remove();
+            });
+        }
+    }
+}

front/src/Administration/UserMessageManager.ts

@@ -0,0 +1,36 @@
+import {RoomConnection} from "../Connexion/RoomConnection";
+import * as TypeMessages from "./TypeMessage";
+
+export interface TypeMessageInterface{
+    showMessage(message: string) : void;
+};
+
+export class UserMessageManager {
+
+    typeMessages : Map<string, TypeMessageInterface> = new Map<string, TypeMessageInterface>();
+
+    constructor(private Connection: RoomConnection) {
+        let valueTypeMessageTab = Object.values(TypeMessages);
+        Object.keys(TypeMessages).forEach((value: string, index: number) => {
+            let typeMessageInstance : TypeMessageInterface = (new valueTypeMessageTab[index]() as TypeMessageInterface);
+            this.typeMessages.set(value.toLowerCase(), typeMessageInstance);
+        });
+        this.initialise();
+    }
+
+    initialise(){
+        //receive signal to show message
+        this.Connection.receiveUserMessage((type: string, message: string) => {
+            this.showMessage(type, message);
+        });
+    }
+
+    showMessage(type: string, message: string){
+        let classTypeMessage = this.typeMessages.get(type.toLowerCase());
+        if(!classTypeMessage){
+            console.error('Message unknown');
+            return;
+        }
+        classTypeMessage.showMessage(message);
+    }
+};

front/src/Connexion/ConnexionModels.ts

@@ -27,6 +27,7 @@ export enum EventMessage{
     STOP_GLOBAL_MESSAGE = "stop-global-message",
 
     TELEPORT = "teleport",
+    USER_MESSAGE = "user-message",
     START_JITSI_ROOM = "start-jitsi-room",
 }
 

front/src/Connexion/RoomConnection.ts

@@ -22,7 +22,7 @@ import {
     WebRtcSignalToServerMessage,
     WebRtcStartMessage,
     ReportPlayerMessage,
-    TeleportMessageMessage, QueryJitsiJwtMessage, SendJitsiJwtMessage
+    TeleportMessageMessage, QueryJitsiJwtMessage, SendJitsiJwtMessage, SendUserMessage
 } from "../Messages/generated/messages_pb"
 
 import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@@ -35,8 +35,6 @@ import {
     RoomJoinedMessageInterface,
     ViewportInterface, WebRtcDisconnectMessageInterface,
     WebRtcSignalReceivedMessageInterface,
-    WebRtcSignalSentMessageInterface,
-    WebRtcStartMessageInterface
 } from "./ConnexionModels";
 
 export class RoomConnection implements RoomConnection {
@@ -152,6 +150,8 @@ export class RoomConnection implements RoomConnection {
                 this.dispatch(EventMessage.TELEPORT, message.getTeleportmessagemessage());
             } else if (message.hasSendjitsijwtmessage()) {
                 this.dispatch(EventMessage.START_JITSI_ROOM, message.getSendjitsijwtmessage());
+            } else if (message.hasSendusermessage()) {
+                this.dispatch(EventMessage.USER_MESSAGE, message.getSendusermessage());
             } else {
                 throw new Error('Unknown message received');
             }
@@ -479,8 +479,13 @@ export class RoomConnection implements RoomConnection {
         });
     }
 
+    public receiveUserMessage(callback: (type: string, message: string) => void) {
+        return this.onMessage(EventMessage.USER_MESSAGE, (message: SendUserMessage) => {
+            callback(message.getType(), message.getMessage());
+        });
+    }
+
     public emitGlobalMessage(message: PlayGlobalMessageInterface){
-        console.log('emitGlobalMessage', message);
         const playGlobalMessage = new PlayGlobalMessage();
         playGlobalMessage.setId(message.id);
         playGlobalMessage.setType(message.type);

front/src/Phaser/Game/GameScene.ts

@@ -51,6 +51,7 @@ import {ProtobufClientUtils} from "../../Network/ProtobufClientUtils";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import {RoomConnection} from "../../Connexion/RoomConnection";
 import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
+import {UserMessageManager} from "../../Administration/UserMessageManager";
 import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
 import {ResizableScene} from "../Login/ResizableScene";
 import {Room} from "../../Connexion/Room";
@@ -114,6 +115,7 @@ export class GameScene extends ResizableScene implements CenterListener {
     private connection!: RoomConnection;
     private simplePeer!: SimplePeer;
     private GlobalMessageManager!: GlobalMessageManager;
+    private UserMessageManager!: UserMessageManager;
     private ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
     private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
     private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
@@ -600,6 +602,7 @@ export class GameScene extends ResizableScene implements CenterListener {
             // When connection is performed, let's connect SimplePeer
             this.simplePeer = new SimplePeer(this.connection, !this.room.isPublic);
             this.GlobalMessageManager = new GlobalMessageManager(this.connection);
+            this.UserMessageManager = new UserMessageManager(this.connection);
 
             const self = this;
             this.simplePeer.registerPeerConnectionListener({

messages/messages.proto

@@ -178,6 +178,11 @@ message SendJitsiJwtMessage {
   string jwt = 2;
 }
 
+message SendUserMessage{
+  string type = 1;
+  string message = 2;
+}
+
 message ServerToClientMessage {
   oneof message {
     BatchMessage batchMessage = 1;
@@ -191,5 +196,6 @@ message ServerToClientMessage {
     StopGlobalMessage stopGlobalMessage = 9;
     TeleportMessageMessage teleportMessageMessage = 10;
     SendJitsiJwtMessage sendJitsiJwtMessage = 11;
+    SendUserMessage sendUserMessage = 12;
   }
 }