_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/dist/index.tmpl.html
Vendored
+3 -3
View File
@@ -49,15 +49,15 @@
</div>
</div>
<div class="btn-cam-action">
<div id="btn-micro" class="btn-micro">
<div id="btn-micro" class="btn-micro nes-btn is-dark">
<img id="microphone" src="resources/logos/microphone.svg">
<img id="microphone-close" src="resources/logos/microphone-close.svg">
</div>
<div id="btn-video" class="btn-video">
<div id="btn-video" class="btn-video nes-btn is-dark">
<img id="cinema" src="resources/logos/cinema.svg">
<img id="cinema-close" src="resources/logos/cinema-close.svg">
</div>
<div id="btn-monitor" class="btn-monitor">
<div id="btn-monitor" class="btn-monitor nes-btn is-dark">
<img id="monitor" src="resources/logos/monitor.svg">
<img id="monitor-close" src="resources/logos/monitor-close.svg">
</div>
front/dist/resources/html/CustomCharacterScene.html
Vendored
+5 -12
View File
@@ -7,9 +7,9 @@
color: #ebeeee;
overflow: auto;
width: 42vw;
height: 38vh;
/*max-width: 300px;*/
max-height: 40vh;
height: 48vh;
/*max-width: 300px;
max-height: 48vh;*/
}
#customizeScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -47,14 +47,6 @@
#customizeScene section.text-center{
text-align: center;
}
#customizeScene section a{
font-size: 14px;
text-decoration: underline;
color: #ebeeee;
}
#customizeScene section a:hover{
font-weight: 700;
}
#customizeScene section p{
text-align: left;
font-size: 8px;
@@ -107,6 +99,7 @@
@media only screen and (max-width: 600px) {
#customizeScene {
max-width: 160px;
overflow-y: scroll;
}
}
@media only screen and (max-height: 400px) {
@@ -130,7 +123,7 @@
<button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
</section>
<section class="action">
<a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
<a type="submit" class="nes-btn is-dark" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
<button type="submit" class="nes-btn" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
</section>
</form>
front/dist/resources/html/EnableCameraScene.html
Vendored
+9 -3
View File
@@ -5,10 +5,10 @@
border-radius: 6px;
margin: 20px auto 0;
color: #ebeeee;
max-height: 40vh;
max-height: 48vh;
width: 42vw;
max-width: 300px;
/*overflow: scroll;*/
overflow: hidden;
}
#enableCameraScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -45,7 +45,7 @@
text-align: center;
margin: 0;
position: absolute;
top: 40vh;
top: 44vh;
width: 100%;
}
#enableCameraScene button#enableCameraSceneFormCancel {
@@ -87,6 +87,12 @@
width: 160px;
margin: 20px 0;
}
/*@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#enableCameraScene{
overflow-y: scroll;
}
}*/
</style>
<form id="enableCameraScene" hidden>
front/dist/resources/html/SelectCompanionScene.html
Vendored
+7 -6
View File
@@ -42,11 +42,6 @@
#selectCompanionScene section.text-center{
text-align: center;
}
#selectCompanionScene section a{
font-size: 14px;
text-decoration: underline;
color: #ebeeee;
}
#selectCompanionScene section a:hover{
font-weight: 700;
}
@@ -89,6 +84,12 @@
background-color: #ffd700;
color: black;
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#selectCompanionScene{
overflow-y: scroll;
}
}
</style>
<form id="selectCompanionScene" hidden>
@@ -98,7 +99,7 @@
<button class="selectCharacterButton nes-btn" id="selectCharacterButtonRight"> > </button>
</section>
<section class="action">
<a herf="#" class="nes-btn is-dark" id="selectCompanionSceneFormBack">Back</a>
<a herf="#" class="nes-btn is-dark" id="selectCompanionSceneFormBack">No companion</a>
<button type="submit" class="nes-btn" id="selectCompanionSceneFormSubmit">Continue</button>
</section>
</form>
front/dist/resources/html/helpCameraSettings.html
Vendored
+13 -18
View File
@@ -5,9 +5,10 @@
border-radius: 6px;
margin: 25px auto 0;
width: 400px;
max-height: calc(50vh - 25px);
overflow: scroll;
max-height: calc(48vh - 50px);
max-width: 48vw;
overflow: auto;
padding-bottom: 10px;
}
#helpCameraSettings h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -29,22 +30,10 @@
text-align: center;
margin: 0;
}
#helpCameraSettings button {
margin: 10px 4px;
background-color: black;
color: white;
border-radius: 7px;
padding-bottom: 4px;
}
#helpCameraSettings button#helpCameraSettingsFormCancel {
background-color: #c7c7c700;
color: #292929;
}
#helpCameraSettings section a{
font-size: 12px;
text-decoration: underline;
color: black;
}
#helpCameraSettings section h6,
#helpCameraSettings section h5{
margin: 1px;
@@ -53,7 +42,7 @@
text-align: center;
}
#helpCameraSettings section p{
font-size: 8px;
font-size: 7px;
margin: 0px 20px;
}
#helpCameraSettings section p.err{
@@ -64,12 +53,18 @@
}
#helpCameraSettings section li{
text-align: left;
font-size: 8px;
font-size: 7px;
}
#helpCameraSettings section img {
width: 200px;
margin-top: 10px;
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#helpCameraSettings{
overflow-y: scroll;
}
}
</style>
<form id="helpCameraSettings" hidden>
@@ -86,7 +81,7 @@
<p id='browserHelpSetting'></p>
</section>
<section class="action">
<a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
<button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
<a href="#" class="nes-btn" id="helpCameraSettingsFormRefresh">Refresh</a>
<button type="submit" class="nes-btn is-warning" id="helpCameraSettingsFormContinue">Continue</button>
</section>
</form>
front/dist/resources/html/loginScene.html
Vendored
+6
View File
@@ -69,6 +69,12 @@
width: 160px;
margin: 20px 0;
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#loginScene{
overflow-y: scroll;
}
}
</style>
<form id="loginScene" hidden>
front/dist/resources/html/SelectCharacterScene.html → front/dist/resources/html/selectCharacterScene.html
Vendored
+5 -3
View File
@@ -5,11 +5,10 @@
border-radius: 6px;
margin: 10px auto 0;
color: #ebeeee;
max-height: 40vh;
overflow: scroll;
max-height: 48vh;
max-width: 300px;
width: 40vw;
overflow: unset;
overflow: hidden;
}
#selectCharacterScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
@@ -87,6 +86,9 @@
}
@media only screen and (max-width: 800px),
only screen and (max-height: 600px) {
#selectCharacterScene{
overflow-y: scroll;
}
#selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
display: block;
}
front/dist/resources/style/cowebsite.scss
Vendored
+1 -1
View File
@@ -17,7 +17,7 @@
}
aside {
background: gray;
background: #212529;
align-items: center;
display: flex;
front/dist/resources/style/style.css
Vendored
+5 -9
View File
@@ -162,15 +162,12 @@ video#myCamVideo{
.btn-cam-action div{
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
position: absolute;
border: solid 0px black;
width: 44px;
height: 44px;
background: #666;
box-shadow: 2px 2px 24px #444;
border-radius: 48px;
width: auto;
transform: translateY(20px);
transition-timing-function: ease-in-out;
bottom: 20px;
pointer-events: none;
}
.btn-cam-action div.disabled {
background: #d75555;
@@ -209,11 +206,10 @@ video#myCamVideo{
}
.btn-cam-action div img{
height: 22px;
width: 30px;
top: calc(48px - 37px);
left: calc(48px - 41px);
width: auto;
position: relative;
cursor: url('/resources/logos/cursor_pointer.png'), pointer;
pointer-events: all;
}
/* Spinner */
@@ -1124,7 +1120,7 @@ div.action p.action-body{
font-size: 12px;
font-weight: 500;
text-align: center;
max-width: 250px;
max-width: 350px;
}
.popUpElement{
font-family: 'Press Start 2P';
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);
}
}