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

Merge branch 'develop' of github.com:thecodingmachine/workadventure into svelte_video_overlay

Browse source 
# Conflicts:
#	front/package.json
#	front/src/Components/App.svelte
#	front/src/Phaser/Game/GameScene.ts
#	front/src/Phaser/Menu/MenuScene.ts
#	front/src/WebRtc/MediaManager.ts
This commit is contained in:
David Négrier 2021-06-24 10:49:55 +02:00
commit e4708149e0
172 changed files with 15268 additions and 2850 deletions
Download patch file Download diff file Expand all files Collapse all files

100
front/src/Phaser/Menu/MenuScene.ts
View file

@ -3,7 +3,6 @@ import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCha
import {SelectCompanionScene, SelectCompanionSceneName} from "../Login/SelectCompanionScene";
import {gameManager} from "../Game/GameManager";
import {localUserStore} from "../../Connexion/LocalUserStore";
import {mediaManager} from "../../WebRtc/MediaManager";
import {gameReportKey, gameReportRessource, ReportMenu} from "./ReportMenu";
import {connectionManager} from "../../Connexion/ConnectionManager";
import {GameConnexionTypes} from "../../Url/UrlManager";
@ -12,6 +11,13 @@ import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
import {menuIconVisible} from "../../Stores/MenuStore";
import {videoConstraintStore} from "../../Stores/MediaStore";
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
import { HtmlUtils } from '../../WebRtc/HtmlUtils';
import { iframeListener } from '../../Api/IframeListener';
import { Subscription } from 'rxjs';
import {registerMenuCommandStream} from "../../Api/Events/ui/MenuItemRegisterEvent";
import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
import {consoleGlobalMessageManagerVisibleStore} from "../../Stores/ConsoleGlobalMessageManagerStore";
import {get} from "svelte/store";
export const MenuSceneName = 'MenuScene';
const gameMenuKey = 'gameMenu';
@ -38,15 +44,41 @@ export class MenuScene extends Phaser.Scene {
private menuButton!: Phaser.GameObjects.DOMElement;
private warningContainer: WarningContainer | null = null;
private warningContainerTimeout: NodeJS.Timeout | null = null;
private subscriptions = new Subscription()
constructor() {
super({key: MenuSceneName});
super({ key: MenuSceneName });
this.gameQualityValue = localUserStore.getGameQualityValue();
this.videoQualityValue = localUserStore.getVideoQualityValue();
this.subscriptions.add(registerMenuCommandStream.subscribe(menuCommand => {
this.addMenuOption(menuCommand);
}))
this.subscriptions.add(iframeListener.unregisterMenuCommandStream.subscribe(menuCommand => {
this.destroyMenu(menuCommand);
}))
}
preload () {
reset() {
const addedMenuItems = [...this.menuElement.node.querySelectorAll(".fromApi")];
for (let index = addedMenuItems.length - 1; index >= 0; index--) {
addedMenuItems[index].remove()
}
}
public addMenuOption(menuText: string) {
const wrappingSection = document.createElement("section")
const escapedHtml = HtmlUtils.escapeHtml(menuText);
wrappingSection.innerHTML = `<button class="fromApi" id="${escapedHtml}">${escapedHtml}</button>`
const menuItemContainer = this.menuElement.node.querySelector("#gameMenu main");
if (menuItemContainer) {
menuItemContainer.querySelector(`#${escapedHtml}.fromApi`)?.remove()
menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks"))
}
}
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');
@ -69,11 +101,11 @@ export class MenuScene extends Phaser.Scene {
this.gameShareElement = this.add.dom(middleX, -400).createFromCache(gameShare);
MenuScene.revealMenusAfterInit(this.gameShareElement, gameShare);
this.gameShareElement.addListener('click');
this.gameShareElement.on('click', (event:MouseEvent) => {
this.gameShareElement.on('click', (event: MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'gameShareFormSubmit') {
if ((event?.target as HTMLInputElement).id === 'gameShareFormSubmit') {
this.copyLink();
}else if((event?.target as HTMLInputElement).id === 'gameShareFormCancel') {
} else if ((event?.target as HTMLInputElement).id === 'gameShareFormCancel') {
this.closeGameShare();
}
});
@ -131,8 +163,8 @@ export class MenuScene extends Phaser.Scene {
}
//TODO bind with future metadata of card
//if (connectionManager.getConnexionType === GameConnexionTypes.anonymous){
const adminSection = this.menuElement.getChildByID('socialLinks') as HTMLElement;
adminSection.hidden = false;
const adminSection = this.menuElement.getChildByID('socialLinks') as HTMLElement;
adminSection.hidden = false;
//}
this.tweens.add({
targets: this.menuElement,
@ -162,7 +194,7 @@ export class MenuScene extends Phaser.Scene {
this.sideMenuOpened = false;
this.closeAll();
this.menuButton.getChildByID('openMenuButton').innerHTML = `<img src="/static/images/menu.svg">`;
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.disabledMessageConsole();
consoleGlobalMessageManagerVisibleStore.set(false);
this.tweens.add({
targets: this.menuElement,
x: closedSideMenuX,
@ -182,28 +214,28 @@ export class MenuScene extends Phaser.Scene {
this.settingsMenuOpened = true;
const gameQualitySelect = this.gameQualityMenuElement.getChildByID('select-game-quality') as HTMLInputElement;
gameQualitySelect.value = ''+this.gameQualityValue;
gameQualitySelect.value = '' + this.gameQualityValue;
const videoQualitySelect = this.gameQualityMenuElement.getChildByID('select-video-quality') as HTMLInputElement;
videoQualitySelect.value = ''+this.videoQualityValue;
videoQualitySelect.value = '' + this.videoQualityValue;
this.gameQualityMenuElement.addListener('click');
this.gameQualityMenuElement.on('click', (event:MouseEvent) => {
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') {
} else if ((event?.target as HTMLInputElement).id === 'gameQualityFormCancel') {
this.closeGameQualityMenu();
}
});
let middleY = this.scale.height / 2 - 392/2;
if(middleY < 0){
let middleY = this.scale.height / 2 - 392 / 2;
if (middleY < 0) {
middleY = 0;
}
let middleX = this.scale.width / 2 - 457/2;
if(middleX < 0){
let middleX = this.scale.width / 2 - 457 / 2;
if (middleX < 0) {
middleX = 0;
}
this.tweens.add({
@ -229,7 +261,7 @@ export class MenuScene extends Phaser.Scene {
}
private openGameShare(): void{
private openGameShare(): void {
if (this.gameShareOpened) {
this.closeGameShare();
return;
@ -243,11 +275,11 @@ export class MenuScene extends Phaser.Scene {
this.gameShareOpened = true;
let middleY = this.scale.height / 2 - 85;
if(middleY < 0){
if (middleY < 0) {
middleY = 0;
}
let middleX = this.scale.width / 2 - 200;
if(middleX < 0){
if (middleX < 0) {
middleX = 0;
}
this.tweens.add({
@ -259,7 +291,7 @@ export class MenuScene extends Phaser.Scene {
});
}
private closeGameShare(): void{
private closeGameShare(): void {
const gameShareInfo = this.gameShareElement.getChildByID('gameShareInfo') as HTMLParagraphElement;
gameShareInfo.innerText = '';
gameShareInfo.style.display = 'none';
@ -272,12 +304,18 @@ export class MenuScene extends Phaser.Scene {
});
}
private onMenuClick(event:MouseEvent) {
if((event?.target as HTMLInputElement).classList.contains('not-button')){
private onMenuClick(event: MouseEvent) {
const htmlMenuItem = (event?.target as HTMLInputElement);
if (htmlMenuItem.classList.contains('not-button')) {
return;
}
event.preventDefault();
if (htmlMenuItem.classList.contains("fromApi")) {
sendMenuClickedEvent(htmlMenuItem.id)
return
}
switch ((event?.target as HTMLInputElement).id) {
case 'changeNameButton':
this.closeSideMenu();
@ -307,7 +345,11 @@ export class MenuScene extends Phaser.Scene {
this.toggleFullscreen();
break;
case 'adminConsoleButton':
gameManager.getCurrentGameScene(this).ConsoleGlobalMessageManager.activeMessageConsole();
if (get(consoleGlobalMessageManagerVisibleStore)) {
consoleGlobalMessageManagerVisibleStore.set(false);
} else {
consoleGlobalMessageManagerVisibleStore.set(true);
}
break;
}
}
@ -319,7 +361,7 @@ export class MenuScene extends Phaser.Scene {
gameShareInfo.style.display = 'block';
}
private saveSetting(valueGame: number, valueVideo: number){
private saveSetting(valueGame: number, valueVideo: number) {
if (valueGame !== this.gameQualityValue) {
this.gameQualityValue = valueGame;
localUserStore.setGameQualityValue(valueGame);
@ -340,7 +382,7 @@ export class MenuScene extends Phaser.Scene {
window.open(sparkHost, '_blank');
}
private closeAll(){
private closeAll() {
this.closeGameQualityMenu();
this.closeGameShare();
this.gameReportElement.close();
@ -357,6 +399,10 @@ export class MenuScene extends Phaser.Scene {
}
}
public destroyMenu(menu: string) {
this.menuElement.getChildByID(menu).remove();
}
public isDirty(): boolean {
return false;
}