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

WIP: Update style for mobile (#942)

Browse source 
* Update style for mobile

 - Update style for mobile modale

* Fix overscroll

* Change css properties overflow

* Revert "Change css properties overflow"

This reverts commit 612fcc7e007fb03c7f72e5fa4b8a0604a184ae7d.

* rm image

* Update view mobile

* Fix CI
This commit is contained in:
grégoire parant 2021-04-27 23:58:33 +02:00 • committed by GitHub
parent 4e09246c7f
commit 9b69910cb8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 74 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

7
front/src/Phaser/Login/CustomizeScene.ts
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
);
}

6
front/src/Phaser/Login/EnableCameraScene.ts
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)
);
}
}

9
front/src/Phaser/Login/LoginScene.ts
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);
}
}

7
front/src/Phaser/Login/SelectCompanionScene.ts
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
);
}

5
front/src/Phaser/Menu/HelpCameraSettingsScene.ts
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';
@ -112,7 +113,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
}
private getMiddleX() : number{
return (this.game.renderer.width / 2) -
return (this.game.renderer.width / RESOLUTION) -
(
this.helpCameraSettingsElement
&& this.helpCameraSettingsElement.node
@ -128,7 +129,7 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
&& 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);
return (middleY > 0 ? middleY / RESOLUTION : 0);
}
}