From b7480f1896ed64a22a039f0967c38576add88b00 Mon Sep 17 00:00:00 2001
From: Ludwig Behm <lbehm@users.noreply.github.com>
Date: Tue, 16 Mar 2021 20:07:48 +0100
Subject: [PATCH] New: Credits dialog

Added copyright information / credits dialog into the main menu.
Inspired by [tabascoeye/workadventure](https://github.com/tabascoeye/workadventure/commit/7b7c695f76ff8db095ab6b888f2039d3c7bbad35), 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/dist/resources/html/gameCopyright.html | 89 ++++++++++++++++++++
 front/dist/resources/html/gameMenu.html      | 19 +++--
 front/src/Phaser/Menu/MenuScene.ts           | 71 +++++++++++++++-
 3 files changed, 173 insertions(+), 6 deletions(-)
 create mode 100644 front/dist/resources/html/gameCopyright.html

diff --git a/front/dist/resources/html/gameCopyright.html b/front/dist/resources/html/gameCopyright.html
new file mode 100644
index 00000000..b152b65f
--- /dev/null
+++ b/front/dist/resources/html/gameCopyright.html
@@ -0,0 +1,89 @@
+<style>
+    *{
+        font-family: 'Open Sans', sans-serif;
+        cursor: url('/resources/logos/cursor_normal.png'), auto;
+    }
+    * a, button, input{
+        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+    }
+    #gameCopyright {
+        background: #eceeee;
+        border: 1px solid #42464b;
+        border-radius: 6px;
+        margin: 20px auto 0;
+        width: 350px;
+        height: 158px;
+    }
+    #gameCopyright h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    #gameCopyright input {
+        font-size: 70%;
+        background: linear-gradient(top, #d6d7d7, #dee0e0);
+        border: 1px solid #a1a3a3;
+        border-radius: 4px;
+        box-shadow: 0 1px #fff;
+        box-sizing: border-box;
+        color: #696969;
+        height: 30px;
+        transition: box-shadow 0.3s;
+        width: 100%;
+    }
+    #gameCopyright section {
+        margin: 10px;
+    }
+    #gameCopyright section.action{
+        text-align: center;
+        margin: 0;
+    }
+    #gameCopyright button {
+        margin-top: 10px;
+        background-color: black;
+        color: white;
+        border-radius: 7px;
+        padding-bottom: 4px;
+    }
+    #gameCopyright button#gameCopyrightFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    #gameCopyright section a{
+        text-align: center;
+        font-size: 12px;
+        margin: 0 6px;
+        color: black;
+    }
+    #gameCopyright section h6,
+    #gameCopyright section h5{
+        margin: 1px;
+    }
+    #gameCopyright section.text-center{
+        text-align: center;
+    }
+    #gameCopyright section input#gameCopyrightLink{
+        background-color: #a1a3a3;
+    }
+</style>
+
+<form id="gameCopyright" hidden>
+    <section class="text-center">
+        <h3>Credits</h3>
+    </section>
+    <section>
+        <h6>Die Karteninhalte stehen unter folgender Lizenz:</h6>
+        <input type="text" name="copyrightLink" id="gameCopyrightLink" readonly />
+    </section>
+    <section class="action">
+        <button type="submit" id="gameCopyrightFormCancel">Close</button>
+    </section>
+</form>
diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html
index 88c76ca2..f512f0b5 100644
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@@ -6,11 +6,17 @@
     * a, button, select{
         cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
+    #gameMenu {
+        padding-top: 8px;
+    }
     #gameMenu button {
         background-color: black;
         color: white;
         border-radius: 7px;
-        padding-bottom: 2px;
+        padding: 2px 8px;
+    }
+    #gameMenu button:active {
+	outline: none;
     }
     #gameMenu section {
         margin: 10px;
@@ -20,21 +26,24 @@
 <div id="gameMenu" hidden>
 
     <main>
-        <section>
+        <section hidden>
             <button id="shareButton">Share url</button>
         </section>
         <section>
-            <button id="changeNameButton">Edit name</button>
+            <button id="changeNameButton">Name</button>
         </section>
         <section>
-            <button id="changeSkinButton">Edit skin</button>
+            <button id="changeSkinButton">Avatar</button>
         </section>
         <section>
             <button id="editGameSettingsButton">Settings</button>
         </section>
-        <section>
+        <section hidden>
             <button id="sparkButton">Create map</button>
         </section>
+        <section id="copyrightSection">
+            <button id="copyrightButton">Credits</button>
+        </section>
         <section id="adminConsoleSection" hidden>
             <button id="adminConsoleButton">Admin console</button>
         </section>
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index 8bd64cd1..9f567d27 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/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();
     }
 }