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
This commit is contained in:
Ludwig Behm
parent
d5b74e2182
commit
b7480f1896
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue