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:
parent
d5b74e2182
commit
b7480f1896
89
front/dist/resources/html/gameCopyright.html
vendored
Normal file
89
front/dist/resources/html/gameCopyright.html
vendored
Normal file
|
@ -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>
|
19
front/dist/resources/html/gameMenu.html
vendored
19
front/dist/resources/html/gameMenu.html
vendored
|
@ -6,11 +6,17 @@
|
||||||
* a, button, select{
|
* a, button, select{
|
||||||
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
|
||||||
}
|
}
|
||||||
|
#gameMenu {
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
#gameMenu button {
|
#gameMenu button {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
padding-bottom: 2px;
|
padding: 2px 8px;
|
||||||
|
}
|
||||||
|
#gameMenu button:active {
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
#gameMenu section {
|
#gameMenu section {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
@ -20,21 +26,24 @@
|
||||||
<div id="gameMenu" hidden>
|
<div id="gameMenu" hidden>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section hidden>
|
||||||
<button id="shareButton">Share url</button>
|
<button id="shareButton">Share url</button>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<button id="changeNameButton">Edit name</button>
|
<button id="changeNameButton">Name</button>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<button id="changeSkinButton">Edit skin</button>
|
<button id="changeSkinButton">Avatar</button>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<button id="editGameSettingsButton">Settings</button>
|
<button id="editGameSettingsButton">Settings</button>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section hidden>
|
||||||
<button id="sparkButton">Create map</button>
|
<button id="sparkButton">Create map</button>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="copyrightSection">
|
||||||
|
<button id="copyrightButton">Credits</button>
|
||||||
|
</section>
|
||||||
<section id="adminConsoleSection" hidden>
|
<section id="adminConsoleSection" hidden>
|
||||||
<button id="adminConsoleButton">Admin console</button>
|
<button id="adminConsoleButton">Admin console</button>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -10,6 +10,7 @@ const gameMenuKey = 'gameMenu';
|
||||||
const gameMenuIconKey = 'gameMenuIcon';
|
const gameMenuIconKey = 'gameMenuIcon';
|
||||||
const gameSettingsMenuKey = 'gameSettingsMenu';
|
const gameSettingsMenuKey = 'gameSettingsMenu';
|
||||||
const gameShare = 'gameShare';
|
const gameShare = 'gameShare';
|
||||||
|
const gameCopyrightKey = 'gameCopyright';
|
||||||
|
|
||||||
const closedSideMenuX = -200;
|
const closedSideMenuX = -200;
|
||||||
const openedSideMenuX = 0;
|
const openedSideMenuX = 0;
|
||||||
|
@ -21,9 +22,11 @@ export class MenuScene extends Phaser.Scene {
|
||||||
private menuElement!: Phaser.GameObjects.DOMElement;
|
private menuElement!: Phaser.GameObjects.DOMElement;
|
||||||
private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
|
private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
|
||||||
private gameShareElement!: Phaser.GameObjects.DOMElement;
|
private gameShareElement!: Phaser.GameObjects.DOMElement;
|
||||||
|
private gameCopyrightElement!: Phaser.GameObjects.DOMElement;
|
||||||
private sideMenuOpened = false;
|
private sideMenuOpened = false;
|
||||||
private settingsMenuOpened = false;
|
private settingsMenuOpened = false;
|
||||||
private gameShareOpened = false;
|
private gameShareOpened = false;
|
||||||
|
private gameCopyrightOpened = false;
|
||||||
private gameQualityValue: number;
|
private gameQualityValue: number;
|
||||||
private videoQualityValue: number;
|
private videoQualityValue: number;
|
||||||
private menuButton!: Phaser.GameObjects.DOMElement;
|
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(gameMenuIconKey, 'resources/html/gameMenuIcon.html');
|
||||||
this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
|
this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
|
||||||
this.load.html(gameShare, 'resources/html/gameShare.html');
|
this.load.html(gameShare, 'resources/html/gameShare.html');
|
||||||
|
this.load.html(gameCopyrightKey, 'resources/html/gameCopyright.html');
|
||||||
}
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
|
@ -51,7 +55,6 @@ export class MenuScene extends Phaser.Scene {
|
||||||
this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
|
this.gameQualityMenuElement = this.add.dom(middleX, -400).createFromCache(gameSettingsMenuKey);
|
||||||
this.revealMenusAfterInit(this.gameQualityMenuElement, 'gameQuality');
|
this.revealMenusAfterInit(this.gameQualityMenuElement, 'gameQuality');
|
||||||
|
|
||||||
|
|
||||||
this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
|
this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
|
||||||
this.revealMenusAfterInit(this.gameShareElement, gameShare);
|
this.revealMenusAfterInit(this.gameShareElement, gameShare);
|
||||||
this.gameShareElement.addListener('click');
|
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.input.keyboard.on('keyup-TAB', () => {
|
||||||
this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
|
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) {
|
private onMenuClick(event:MouseEvent) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
@ -245,6 +310,9 @@ export class MenuScene extends Phaser.Scene {
|
||||||
case 'editGameSettingsButton':
|
case 'editGameSettingsButton':
|
||||||
this.openGameSettingsMenu();
|
this.openGameSettingsMenu();
|
||||||
break;
|
break;
|
||||||
|
case 'copyrightButton':
|
||||||
|
this.openGameCopyright();
|
||||||
|
break;
|
||||||
case 'adminConsoleButton':
|
case 'adminConsoleButton':
|
||||||
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
|
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
|
||||||
break;
|
break;
|
||||||
|
@ -280,5 +348,6 @@ export class MenuScene extends Phaser.Scene {
|
||||||
private closeAll(){
|
private closeAll(){
|
||||||
this.closeGameQualityMenu();
|
this.closeGameQualityMenu();
|
||||||
this.closeGameShare();
|
this.closeGameShare();
|
||||||
|
this.closeGameCopyright();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue