Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FEAT: prototype game menu using html elements, better icon for text chat

Browse source
This commit is contained in:
kharhamel 2020-12-04 11:30:35 +01:00
parent 855b55903b
commit 069f2f1cec
23 changed files with 520 additions and 226 deletions
Download patch file Download diff file Expand all files Collapse all files

189
front/src/Phaser/Menu/MenuScene.ts Normal file
View file

@ -0,0 +1,189 @@
import {LoginSceneName} from "../Login/LoginScene";
import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
import {gameManager} from "../Game/GameManager";
import {localUserStore} from "../../Connexion/LocalUserStore";
import {mediaManager} from "../../WebRtc/MediaManager";
export const MenuSceneName = 'MenuScene';
const gameMenuKey = 'gameMenu';
const gameMenuIconKey = 'gameMenuIcon';
const gameSettingsMenuKey = 'gameSettingsMenu';
const closedSideMenuX = -200;
const openedSideMenuX = 0;
/**
* The scene that manages the game menu, rendered using a DOM element.
*/
export class MenuScene extends Phaser.Scene {
private menuElement!: Phaser.GameObjects.DOMElement;
private gameQualityMenuElement!: Phaser.GameObjects.DOMElement;
private sideMenuOpened = false;
private settingsMenuOpened = false;
private gameQualityValue: number;
private videoQualityValue: number;
private menuButton!: Phaser.GameObjects.DOMElement;
constructor() {
super({key: MenuSceneName});
this.gameQualityValue = localUserStore.getGameQualityValue();
this.videoQualityValue = localUserStore.getVideoQualityValue();
}
preload () {
this.load.html(gameMenuKey, 'resources/html/gameMenu.html');
this.load.html(gameMenuIconKey, 'resources/html/gameMenuIcon.html');
this.load.html(gameSettingsMenuKey, 'resources/html/gameQualityMenu.html');
}
create() {
this.menuElement = this.add.dom(closedSideMenuX, 25).createFromCache(gameMenuKey);
this.menuElement.setOrigin(0);
this.gameQualityMenuElement = this.add.dom(this.game.renderer.width / 2, -400).createFromCache(gameSettingsMenuKey);
this.gameQualityMenuElement.setOrigin(0.5);
this.input.keyboard.on('keyup-TAB', () => {
this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
});
this.menuButton = this.add.dom(35, 20).createFromCache(gameMenuIconKey);
this.menuButton.addListener('click');
this.menuButton.on('click', () => {
this.sideMenuOpened ? this.closeSideMenu() : this.openSideMenu();
});
}
openSideMenu() {
if (this.sideMenuOpened) return;
this.sideMenuOpened = true;
this.menuButton.getChildByID('openMenuButton').innerHTML = 'Close'
if (gameManager.getCurrentGameScene(this).connection.isAdmin()) {
const adminSection = this.menuElement.getChildByID('adminConsoleSection') as HTMLElement;
adminSection.hidden = false;
}
this.menuElement.addListener('click');
this.menuElement.on('click', this.onMenuClick.bind(this));
this.tweens.add({
targets: this.menuElement,
x: openedSideMenuX,
duration: 500,
ease: 'Power3'
});
}
private closeSideMenu(): void {
if (!this.sideMenuOpened) return;
this.sideMenuOpened = false;
this.closeGameQualityMenu()
this.menuButton.getChildByID('openMenuButton').innerHTML = 'Menu'
this.tweens.add({
targets: this.menuElement,
x: closedSideMenuX,
duration: 500,
ease: 'Power3'
});
this.menuElement.removeListener('click');
}
private openGameSettingsMenu(): void {
if (this.settingsMenuOpened) return;
this.settingsMenuOpened = true;
const gameQualitySelect = this.gameQualityMenuElement.getChildByID('select-game-quality') as HTMLInputElement;
gameQualitySelect.value = ''+this.gameQualityValue;
const videoQualitySelect = this.gameQualityMenuElement.getChildByID('select-video-quality') as HTMLInputElement;
videoQualitySelect.value = ''+this.videoQualityValue;
this.gameQualityMenuElement.addListener('click');
this.gameQualityMenuElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if ((event?.target as HTMLInputElement).id === 'gameQualityFormSubmit') {
const gameQualitySelect = this.gameQualityMenuElement.getChildByID('select-game-quality') as HTMLInputElement;
const videoQualitySelect = this.gameQualityMenuElement.getChildByID('select-video-quality') as HTMLInputElement;
this.saveSetting(parseInt(gameQualitySelect.value), parseInt(videoQualitySelect.value));
} else if((event?.target as HTMLInputElement).id === 'gameQualityFormCancel') {
this.closeGameQualityMenu();
}
});
this.tweens.add({
targets: this.gameQualityMenuElement,
y: this.game.renderer.height / 2,
duration: 1000,
ease: 'Power3'
});
}
private closeGameQualityMenu(): void {
if (!this.settingsMenuOpened) return;
this.settingsMenuOpened = false;
this.gameQualityMenuElement.removeListener('click');
this.tweens.add({
targets: this.gameQualityMenuElement,
y: -400,
duration: 1000,
ease: 'Power3'
});
}
private onMenuClick(event:MouseEvent) {
event.preventDefault();
switch ((event?.target as HTMLInputElement).id) {
case 'changeNameButton':
this.closeSideMenu();
this.closeGameQualityMenu();
gameManager.leaveGame(this, LoginSceneName);
break;
case 'sparkButton':
this.goToSpark();
break;
case 'changeSkinButton':
this.closeSideMenu();
gameManager.leaveGame(this, SelectCharacterSceneName);
break;
case 'closeButton':
this.closeSideMenu();
break;
case 'shareButton':
this.shareUrl();
break;
case 'editGameSettingsButton':
this.openGameSettingsMenu();
break;
case 'adminConsoleButton':
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
break;
}
}
private async shareUrl() {
await navigator.clipboard.writeText(location.toString());
alert('URL was copy to your clipboard!');
}
private saveSetting(valueGame: number, valueVideo: number){
if (valueGame !== this.gameQualityValue) {
this.gameQualityValue = valueGame;
localUserStore.setGameQualityValue(valueGame);
window.location.reload();
}
if (valueVideo !== this.videoQualityValue) {
this.videoQualityValue = valueVideo;
localUserStore.setVideoQualityValue(valueVideo);
mediaManager.updateCameraQuality(valueVideo);
}
this.closeGameQualityMenu();
}
private goToSpark() {
const sparkHost = 'https://'+window.location.host.replace('play.', 'admin.')+'/register';
window.location.assign(sparkHost);
}
}