_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

nes.css improvements, fix for camerainfo

Browse Source
This commit is contained in:
_Bastler
2021-04-28 13:10:50 +02:00
parent 92122a3272 16397fe978
commit bd40c8fe5e
39 changed files with 3170 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Login/CustomizeScene.ts
+4 -3
View File
@@ -11,6 +11,7 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import { MenuScene } from "../Menu/MenuScene";
import { SelectCharacterSceneName } from "./SelectCharacterScene";
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
export const CustomizeSceneName = "CustomizeScene";
@@ -139,7 +140,7 @@ export class CustomizeScene extends AbstractCharacterScene {
if(index === -1 && this.activeRow === 1){
const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
button.innerText = `Back`;
button.innerText = `Return`;
}
if(index === 1 && this.activeRow === 0){
@@ -283,12 +284,12 @@ export class CustomizeScene extends AbstractCharacterScene {
}
protected getMiddleX() : number{
return (this.game.renderer.width / 2) -
return (this.game.renderer.width / RESOLUTION) -
(
this.customizeSceneElement
&& this.customizeSceneElement.node
&& this.customizeSceneElement.node.getBoundingClientRect().width > 0
? (this.customizeSceneElement.node.getBoundingClientRect().width / 4)
? (this.customizeSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
: 150
);
}
front/src/Phaser/Login/EnableCameraScene.ts
+3 -3
View File
@@ -284,13 +284,13 @@ export class EnableCameraScene extends Phaser.Scene {
}
private getMiddleX() : number{
return (this.game.renderer.width / 2) -
return (this.game.renderer.width / RESOLUTION) -
(
this.enableCameraSceneElement
&& this.enableCameraSceneElement.node
&& this.enableCameraSceneElement.node.getBoundingClientRect().width > 0
? (this.enableCameraSceneElement.node.getBoundingClientRect().width / 4)
: (300 / 2)
? (this.enableCameraSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
: (300 / RESOLUTION)
);
}
}
front/src/Phaser/Login/LoginScene.ts
+5 -4
View File
@@ -4,6 +4,7 @@ import {ResizableScene} from "./ResizableScene";
import { localUserStore } from "../../Connexion/LocalUserStore";
import {MenuScene} from "../Menu/MenuScene";
import { isUserNameValid } from "../../Connexion/LocalUser";
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
export const LoginSceneName = "LoginScene";
@@ -27,7 +28,7 @@ export class LoginScene extends ResizableScene {
create() {
const middleX = this.getMiddleX();
this.loginSceneElement = this.add.dom((middleX/2), 0).createFromCache(loginSceneKey);
this.loginSceneElement = this.add.dom(middleX, 0).createFromCache(loginSceneKey);
MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
@@ -80,7 +81,7 @@ export class LoginScene extends ResizableScene {
const middleX = this.getMiddleX();
this.tweens.add({
targets: this.loginSceneElement,
x: (middleX/2),
x: middleX,
duration: 1000,
ease: 'Power3'
});
@@ -90,7 +91,7 @@ export class LoginScene extends ResizableScene {
const middleX = this.getMiddleX();
this.tweens.add({
targets: this.loginSceneElement,
x: (middleX/2),
x: middleX,
duration: 1000,
ease: 'Power3'
});
@@ -98,6 +99,6 @@ export class LoginScene extends ResizableScene {
private getMiddleX() : number{
const middleX = ((window.innerWidth) - ((this.loginSceneElement && this.loginSceneElement.width > 0 ? this.loginSceneElement.width : 200 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
return (middleX > 0 ? middleX : 0);
return (middleX > 0 ? (middleX / 2) : 0);
}
}
front/src/Phaser/Login/SelectCharacterScene.ts
+1 -1
View File
@@ -39,7 +39,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
preload() {
addLoader(this);
this.load.html(selectCharacterKey, 'resources/html/SelectCharacterScene.html');
this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
bodyResourceDescriptions.forEach((bodyResourceDescription) => {
front/src/Phaser/Login/SelectCompanionScene.ts
+4 -3
View File
@@ -10,6 +10,7 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager";
import { MenuScene } from "../Menu/MenuScene";
import { RESOLUTION } from "../../Enum/EnvironmentVariable";
export const SelectCompanionSceneName = "SelectCompanionScene";
@@ -125,7 +126,7 @@ export class SelectCompanionScene extends ResizableScene {
companion.setInteractive().on("pointerdown", () => {
this.currentCompanion = i;
this.updateSelectedCompanion();
this.moveCompanion();
});
this.companions.push(companion);
@@ -240,12 +241,12 @@ export class SelectCompanionScene extends ResizableScene {
}
private getMiddleX() : number{
return (this.game.renderer.width / 2) -
return (this.game.renderer.width / RESOLUTION) -
(
this.selectCompanionSceneElement
&& this.selectCompanionSceneElement.node
&& this.selectCompanionSceneElement.node.getBoundingClientRect().width > 0
? (this.selectCompanionSceneElement.node.getBoundingClientRect().width / 4)
? (this.selectCompanionSceneElement.node.getBoundingClientRect().width / (2*RESOLUTION))
: 150
);
}
front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+29 -26
View File
@@ -1,6 +1,7 @@
import {mediaManager} from "../../WebRtc/MediaManager";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import {localUserStore} from "../../Connexion/LocalUserStore";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
const helpCameraSettings = 'helpCameraSettings';
@@ -19,37 +20,38 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
}
create(){
localUserStore.setHelpCameraSettingsShown();
create() {
this.createHelpCameraSettings();
}
private createHelpCameraSettings() : void {
private createHelpCameraSettings(): void {
const middleX = this.getMiddleX();
this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
this.helpCameraSettingsElement.addListener('click');
this.helpCameraSettingsElement.on('click', (event:MouseEvent) => {
this.helpCameraSettingsElement.on('click', (event: MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
window.location.reload();
}else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
} else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
this.closeHelpCameraSettingsOpened();
}
});
if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video) {
this.openHelpCameraSettingsOpened();
} else {
this.closeHelpCameraSettingsOpened();
}
}
private openHelpCameraSettingsOpened(): void{
private openHelpCameraSettingsOpened(): void {
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
this.helpCameraSettingsOpened = true;
if(window.navigator.userAgent.includes('Firefox')){
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
}else if(window.navigator.userAgent.includes('Chrome')){
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
if(window.navigator.userAgent.includes('Firefox')) {
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML = '<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
} else if(window.navigator.userAgent.includes('Chrome')) {
HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML = '<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
}
const middleY = this.getMiddleY();
const middleX = this.getMiddleX();
@@ -63,7 +65,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
});
}
private closeHelpCameraSettingsOpened(): void{
private closeHelpCameraSettingsOpened(): void {
const middleX = this.getMiddleX();
const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
helpCameraSettingsInfo.innerText = '';
@@ -77,6 +79,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
ease: 'Power3',
overflow: 'scroll'
});
localUserStore.setHelpCameraSettingsShown();
}
private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
@@ -111,24 +114,24 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
});
}
private getMiddleX() : number{
return (this.game.renderer.width / 2) -
(
this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / 4)
: (400 / 2)
);
private getMiddleX(): number {
return (this.game.renderer.width / RESOLUTION) -
(
this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / 4)
: (400 / 2)
);
}
private getMiddleY() : number{
private getMiddleY(): number {
const middleY = ((window.innerHeight) - (
(this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)*2)) / 2;
return (middleY > 0 ? middleY / 2 : 0);
&& this.helpCameraSettingsElement.node
&& this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/) * 2)) / 2;
return (middleY > 0 ? middleY / RESOLUTION : 0);
}
}