Crate share menu and fix menu design

front/dist/resources/html/gameMenuIcon.html

@@ -11,11 +11,12 @@
         color: white;
         border-radius: 7px;
         height: 28px;
-        width: 28px;
+        width: 34px;
     }
     #menuIcon button img{
         width: 14px;
-        padding-top: 4px;
+        padding-top: 3px;
+        cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     }
     #menuIcon section {
         margin: 10px;

front/dist/resources/html/gameShare.html

@@ -0,0 +1,106 @@
+<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;
+    }
+    #gameShare {
+        background: #eceeee;
+        border: 1px solid #42464b;
+        border-radius: 6px;
+        margin: 20px auto 0;
+        width: 298px;
+        height: 150px;
+    }
+    #gameShare .cautiousText {
+        font-size: 50%;
+    }
+    #gameShare 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;
+    }
+    #gameShare 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%;
+    }
+    #gameShare section {
+        margin: 10px;
+    }
+    #gameShare section.action{
+        text-align: center;
+        margin: 0;
+    }
+    #gameShare button {
+        margin-top: 10px;
+        background-color: black;
+        color: white;
+        border-radius: 7px;
+        padding-bottom: 4px;
+        width: 60px;
+    }
+    #gameShare button#gameShareFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    #gameShare section a{
+        text-align: center;
+        font-size: 12px;
+        margin: 0 6px;
+        color: black;
+    }
+    #gameShare section h6,
+    #gameShare section h5{
+        margin: 1px;
+    }
+    #gameShare section.text-center{
+        text-align: center;
+    }
+    #gameShare section p{
+        font-size: 8px;
+        margin: 0px 70px;
+    }
+    #gameShare section p.err{
+        color: red;
+        display: none;
+    }
+    #gameShare section p.info{
+        display: none;
+    }
+    #gameShare section input#gameShareLink{
+        background-color: #a1a3a3;
+    }
+</style>
+
+<form id="gameShare" hidden>
+    <section class="text-center">
+        <h5>Share this link !</h5>
+        <p class="info" id="gameShareInfo"></p>
+    </section>
+    <section>
+        <h6>Link</h6>
+        <input type="text" name="email" id="gameShareLink" readonly>
+    </section>
+    <section class="action">
+        <button type="submit" id="gameShareFormSubmit">Copy</button>
+        <button type="submit" id="gameShareFormCancel">Close</button>
+    </section>
+</form>

front/src/Phaser/Menu/MenuScene.ts

@@ -9,6 +9,7 @@ export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
 const gameMenuIconKey = 'gameMenuIcon';
 const gameSettingsMenuKey = 'gameSettingsMenu';
+const gameShare = 'gameShare';
 
 const closedSideMenuX = -200;
 const openedSideMenuX = 0;
@@ -19,8 +20,10 @@ const openedSideMenuX = 0;
 export class MenuScene extends Phaser.Scene {
     private menuElement!: Phaser.GameObjects.DOMElement;
     private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
+    private gameShareElement!: Phaser.GameObjects.DOMElement;
     private sideMenuOpened = false;
     private settingsMenuOpened = false;
+    private gameShareOpened = false;
     private gameQualityValue: number;
     private videoQualityValue: number;
     private menuButton!: Phaser.GameObjects.DOMElement;
@@ -36,6 +39,7 @@ export class MenuScene extends Phaser.Scene {
         this.load.html(gameMenuKey, 'resources/html/gameMenu.html');
         this.load.html(gameMenuIconKey, 'resources/html/gameMenuIcon.html');
         this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
+        this.load.html(gameShare, 'resources/html/gameShare.html');
     }
 
     create() {
@@ -47,6 +51,19 @@ 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');
+        this.gameShareElement.on('click',  (event:MouseEvent) => {
+            event.preventDefault();
+            if((event?.target as HTMLInputElement).id === 'gameShareFormSubmit') {
+                this.copyLink();
+            }else if((event?.target as HTMLInputElement).id === 'gameShareFormCancel') {
+                this.closeGameShare();
+            }
+        });
+
         this.input.keyboard.on('keyup-TAB', () => {
             this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
         });
@@ -74,6 +91,7 @@ export class MenuScene extends Phaser.Scene {
 
     openSideMenu() {
         if (this.sideMenuOpened) return;
+        this.closeAll();
         this.sideMenuOpened = true;
         this.menuButton.getChildByID('openMenuButton').innerHTML = 'X';
         if (gameManager.getCurrentGameScene(this).connection && gameManager.getCurrentGameScene(this).connection.isAdmin()) {
@@ -91,8 +109,7 @@ export class MenuScene extends Phaser.Scene {
     private closeSideMenu(): void {
         if (!this.sideMenuOpened) return;
         this.sideMenuOpened = false;
-        this.closeGameQualityMenu()
+        this.closeAll();
-        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
         gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole();
         this.tweens.add({
             targets: this.menuElement,
@@ -102,13 +119,13 @@ export class MenuScene extends Phaser.Scene {
         });
     }
 
-
-
     private openGameSettingsMenu(): void {
         if (this.settingsMenuOpened) {
-            this.closeGameQualityMenu();
             return;
         }
+        //close all
+        this.closeAll();
+
         this.settingsMenuOpened = true;
 
         const gameQualitySelect = this.gameQualityMenuElement.getChildByID('select-game-quality') as HTMLInputElement;
@@ -159,6 +176,48 @@ export class MenuScene extends Phaser.Scene {
     }
 
 
+    private openGameShare(): void{
+        if (this.gameShareOpened) {
+            this.closeGameShare();
+            return;
+        }
+        //close all
+        this.closeAll();
+
+        const gameShareLink = this.gameShareElement.getChildByID('gameShareLink') as HTMLInputElement;
+        gameShareLink.value = location.toString();
+
+        this.gameShareOpened = true;
+
+        let middleY = (window.innerHeight / 3) - (257);
+        if(middleY < 0){
+            middleY = 0;
+        }
+        let middleX = (window.innerWidth / 3) - 298;
+        if(middleX < 0){
+            middleX = 0;
+        }
+        this.tweens.add({
+            targets: this.gameShareElement,
+            y: middleY,
+            x: middleX,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
+
+    private closeGameShare(): void{
+        const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
+        gameShareInfo.innerText = '';
+        gameShareInfo.style.display = 'none';
+        this.gameShareOpened = false;
+        this.tweens.add({
+            targets: this.gameShareElement,
+            y: -400,
+            duration: 1000,
+            ease: 'Power3'
+        });
+    }
 
     private onMenuClick(event:MouseEvent) {
         event.preventDefault();
@@ -179,7 +238,7 @@ export class MenuScene extends Phaser.Scene {
                 this.closeSideMenu();
                 break;
             case 'shareButton':
-                this.shareUrl();
+                this.openGameShare();
                 break;
             case 'editGameSettingsButton':
                 this.openGameSettingsMenu();
@@ -190,9 +249,11 @@ export class MenuScene extends Phaser.Scene {
         }
     }
 
-    private async shareUrl() {
+    private async copyLink() {
         await navigator.clipboard.writeText(location.toString());
-        alert('URL is copied to your clipboard!');
+        const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
+        gameShareInfo.innerText = 'Link copied, you can share it now!';
+        gameShareInfo.style.display = 'block';
     }
 
     private saveSetting(valueGame: number, valueVideo: number){
@@ -213,4 +274,10 @@ export class MenuScene extends Phaser.Scene {
         const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
         window.open(sparkHost, '_blank');
     }
+
+    private closeAll(){
+        this.closeGameQualityMenu();
+        this.closeGameShare();
+        this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
+    }
 }