New: Credits dialog

Added copyright information / credits dialog into the main menu.
Inspired by [tabascoeye/workadventure](7b7c695f76), requested by Chaoschemnitz

Credits dialog shows a text field. It's content should be provided by map authors
by defining a map property of type 'string' with the unique key 'license'.

Cleanup of the main menu:
- removed outline from button:active
- button paddings/margins
- removed "Create map" and "Share url"
- renamed buttons "Edit name" / "Edit skin" into "Name" / "Avatar" for
better DE support

front/src/Phaser/Menu/MenuScene.ts

@@ -10,6 +10,7 @@ const gameMenuKey = 'gameMenu';
 const gameMenuIconKey = 'gameMenuIcon';
 const gameSettingsMenuKey = 'gameSettingsMenu';
 const gameShare = 'gameShare';
+const gameCopyrightKey = 'gameCopyright';
 
 const closedSideMenuX = -200;
 const openedSideMenuX = 0;
@@ -21,9 +22,11 @@ export class MenuScene extends Phaser.Scene {
     private menuElement!: Phaser.GameObjects.DOMElement;
     private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
     private gameShareElement!: Phaser.GameObjects.DOMElement;
+    private gameCopyrightElement!: Phaser.GameObjects.DOMElement;
     private sideMenuOpened = false;
     private settingsMenuOpened = false;
     private gameShareOpened = false;
+    private gameCopyrightOpened = false;
     private gameQualityValue: number;
     private videoQualityValue: number;
     private menuButton!: Phaser.GameObjects.DOMElement;
@@ -40,6 +43,7 @@ export class MenuScene extends Phaser.Scene {
         this.load.html(gameMenuIconKey, 'resources/html/gameMenuIcon.html');
         this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
         this.load.html(gameShare, 'resources/html/gameShare.html');
+        this.load.html(gameCopyrightKey, 'resources/html/gameCopyright.html');
     }
 
     create() {
@@ -51,7 +55,6 @@ export class MenuScene extends Phaser.Scene {
         this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
         this.revealMenusAfterInit(this.gameQualityMenuElement, 'gameQuality');
 
-
         this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
         this.revealMenusAfterInit(this.gameShareElement, gameShare);
         this.gameShareElement.addListener('click');
@@ -64,6 +67,21 @@ export class MenuScene extends Phaser.Scene {
             }
         });
 
+        this.gameCopyrightElement = this.add.dom((window.innerWidth / 3) - 350, -400).createFromCache(gameCopyrightKey);
+        this.revealMenusAfterInit(this.gameCopyrightElement, gameCopyrightKey);
+        this.gameCopyrightElement.addListener('click');
+        this.gameCopyrightElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            switch ((event?.target as HTMLInputElement).id) {
+                case 'gameCopyrightFormCancel':
+                    this.closeGameCopyright();
+                    break;
+                case 'gameCopyrightLink':
+                    this.onGameCopyrightClick();
+                    break;
+            }
+        });
+
         this.input.keyboard.on('keyup-TAB', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
@@ -221,6 +239,53 @@ export class MenuScene extends Phaser.Scene {
         });
     }
 
+    private openGameCopyright(): void{
+        if (this.gameCopyrightOpened) {
+            this.closeGameCopyright();
+            return;
+        }
+        //close all
+        this.closeAll();
+
+        this.gameCopyrightOpened = true;
+	
+	const scene = gameManager.getCurrentGameScene(this);
+
+        const gameCopyrightLink = this.gameCopyrightElement.getChildByID('gameCopyrightLink') as HTMLInputElement;
+        gameCopyrightLink.value = scene.getMapProperty('license', 'string', '');
+
+        let middleY = (window.innerHeight / 3) - 158;
+        if(middleY < 0){
+            middleY = 0;
+        }
+        let middleX = (window.innerWidth / 3) - 350;
+        if(middleX < 0){
+            middleX = 0;
+        }
+        this.tweens.add({
+            targets: this.gameCopyrightElement,
+            y: middleY,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    private closeGameCopyright(): void{
+        this.gameCopyrightOpened = false;
+        this.tweens.add({
+            targets: this.gameCopyrightElement,
+            y: -400,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    private onGameCopyrightClick(): void {
+        const value = (this.gameCopyrightElement.getChildByID('gameCopyrightLink') as HTMLInputElement).value;
+	// ToDo: if value starts with https?:// -> openWebsite
+    }
+
     private onMenuClick(event:MouseEvent) {
         event.preventDefault();
 
@@ -245,6 +310,9 @@ export class MenuScene extends Phaser.Scene {
             case 'editGameSettingsButton':
                 this.openGameSettingsMenu();
                 break;
+            case 'copyrightButton':
+                this.openGameCopyright();
+                break;
             case 'adminConsoleButton':
                 gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
                 break;
@@ -280,5 +348,6 @@ export class MenuScene extends Phaser.Scene {
     private closeAll(){
         this.closeGameQualityMenu();
         this.closeGameShare();
+        this.closeGameCopyright();
     }
 }