From ac92cbc8f7c4c166f63c284abeb116167554b2d4 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Mon, 4 Jan 2021 17:13:41 +0100 Subject: [PATCH] Crate share menu and fix menu design --- front/dist/resources/html/gameMenuIcon.html | 5 +- front/dist/resources/html/gameShare.html | 106 ++++++++++++++++++++ front/src/Phaser/Menu/MenuScene.ts | 83 +++++++++++++-- 3 files changed, 184 insertions(+), 10 deletions(-) create mode 100644 front/dist/resources/html/gameShare.html diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html index 75a52ac7..078ce281 100644 --- a/front/dist/resources/html/gameMenuIcon.html +++ b/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; diff --git a/front/dist/resources/html/gameShare.html b/front/dist/resources/html/gameShare.html new file mode 100644 index 00000000..4e487328 --- /dev/null +++ b/front/dist/resources/html/gameShare.html @@ -0,0 +1,106 @@ + + + diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts index e0817d39..3b4c7318 100644 --- a/front/src/Phaser/Menu/MenuScene.ts +++ b/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.menuButton.getChildByID('openMenuButton').innerHTML = ``; + this.closeAll(); 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 = ``; + } }