FEATURE: implemented a client side blacklist

front/src/Phaser/Menu/ReportMenu.ts

@@ -0,0 +1,119 @@
+import {MenuScene} from "./MenuScene";
+import {gameManager} from "../Game/GameManager";
+import {blackListManager} from "../../WebRtc/BlackListManager";
+
+export const gameReportKey = 'gameReport';
+export const gameReportRessource = 'resources/html/gameReport.html';
+
+export class ReportMenu extends Phaser.GameObjects.DOMElement {
+    private opened: boolean = false;
+    
+    private userId!: number;
+    private userName!: string|undefined;
+    private anonymous: boolean;
+    
+    constructor(scene: Phaser.Scene, anonymous: boolean) {
+        super(scene, -2000, -2000);
+        this.anonymous = anonymous;
+        this.createFromCache(gameReportKey);
+
+        if (this.anonymous) {
+            const divToHide = this.getChildByID('reportSection') as HTMLElement;
+            divToHide.hidden = true;
+            const textToHide = this.getChildByID('askActionP') as HTMLElement;
+            textToHide.hidden = true;
+        }
+        
+        scene.add.existing(this);
+        MenuScene.revealMenusAfterInit(this, gameReportKey);
+
+        this.addListener('click');
+        this.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if ((event?.target as HTMLInputElement).id === 'gameReportFormSubmit') {
+                this.submitReport();
+            } else if((event?.target as HTMLInputElement).id === 'gameReportFormCancel') {
+                this.close();
+            } else if((event?.target as HTMLInputElement).id === 'toggleBlockButton') {
+                this.toggleBlock();
+            }
+        });
+    }
+
+    public open(userId: number, userName: string|undefined): void {
+        if (this.opened) {
+            this.close();
+            return;
+        }
+        
+        this.userId = userId;
+        this.userName = userName;
+        
+        const mainEl = this.getChildByID('gameReport') as HTMLElement;
+        this.x = this.getCenteredX(mainEl);
+        this.y = this.getHiddenY(mainEl);
+
+        const gameTitleReport = this.getChildByID('nameReported') as HTMLElement;
+        gameTitleReport.innerText = userName || '';
+
+        const blockButton = this.getChildByID('toggleBlockButton') as HTMLElement;
+        blockButton.innerText = blackListManager.isBlackListed(this.userId) ? 'Unblock this user' : 'Block this user';
+
+        this.opened = true;
+
+        gameManager.getCurrentGameScene(this.scene).userInputManager.clearAllKeys();
+
+        this.scene.tweens.add({
+            targets: this,
+            y: this.getCenteredY(mainEl),
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    public close(): void {
+        this.opened = false;
+        gameManager.getCurrentGameScene(this.scene).userInputManager.initKeyBoardEvent();
+        const mainEl = this.getChildByID('gameReport') as HTMLElement;
+        this.scene.tweens.add({
+            targets: this,
+            y: this.getHiddenY(mainEl),
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+    
+    //todo: into a parent class?
+    private getCenteredX(mainEl: HTMLElement): number {
+        return window.innerWidth / 4 - mainEl.clientWidth / 2;
+    }
+    private getHiddenY(mainEl: HTMLElement): number {
+        return - mainEl.clientHeight - 50;
+    }
+    private getCenteredY(mainEl: HTMLElement): number {
+        return window.innerHeight / 4 - mainEl.clientHeight / 2;
+    }
+    
+    private toggleBlock(): void {
+        !blackListManager.isBlackListed(this.userId) ? blackListManager.blackList(this.userId) : blackListManager.cancelBlackList(this.userId);
+        this.close();
+    }
+
+    private submitReport(): void{
+        const gamePError = this.getChildByID('gameReportErr') as HTMLParagraphElement;
+        gamePError.innerText = '';
+        gamePError.style.display = 'none';
+        const gameTextArea = this.getChildByID('gameReportInput') as HTMLInputElement;
+        const gameIdUserReported = this.getChildByID('idUserReported') as HTMLInputElement;
+        if(!gameTextArea || !gameTextArea.value || !gameIdUserReported || !gameIdUserReported.value){
+            gamePError.innerText = 'Report message cannot to be empty.';
+            gamePError.style.display = 'block';
+            return;
+        }
+        gameManager.getCurrentGameScene(this.scene).connection.emitReportPlayerMessage(
+            parseInt(gameIdUserReported.value),
+            gameTextArea.value
+        );
+        this.close();
+    }
+}