Merge pull request #544 from thecodingmachine/updateMenu
Update menu design
This commit is contained in:
David Négrier
GitHub
commit
e02e051f91
5
front/dist/resources/html/gameMenuIcon.html
vendored
5
front/dist/resources/html/gameMenuIcon.html
vendored
@ -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;
|
||||
|
||||
106
front/dist/resources/html/gameShare.html
vendored
Normal file
106
front/dist/resources/html/gameShare.html
vendored
Normal file
@ -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>
|
||||
@ -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 = `<img src="/static/images/menu.svg">`;
|
||||
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 = `<img src="/static/images/menu.svg">`;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user