Merge pull request from thecodingmachine/develop

Deploy 2021-06-15
This commit is contained in:
David Négrier 2021-06-15 17:20:19 +02:00 committed by GitHub
commit 39a7b95e32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 70 additions and 37 deletions

View File

@ -2,26 +2,20 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
import Rectangle = Phaser.GameObjects.Rectangle; import Rectangle = Phaser.GameObjects.Rectangle;
import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager"; import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import Container = Phaser.GameObjects.Container;
import {gameManager} from "../Game/GameManager"; import {gameManager} from "../Game/GameManager";
import {localUserStore} from "../../Connexion/LocalUserStore"; import {localUserStore} from "../../Connexion/LocalUserStore";
import {addLoader} from "../Components/Loader"; import {addLoader} from "../Components/Loader";
import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
import {AbstractCharacterScene} from "./AbstractCharacterScene"; import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import { MenuScene } from "../Menu/MenuScene";
import { SelectCharacterSceneName } from "./SelectCharacterScene"; import { SelectCharacterSceneName } from "./SelectCharacterScene";
import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore"; import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
import {waScaleManager} from "../Services/WaScaleManager"; import {waScaleManager} from "../Services/WaScaleManager";
import {isMobile} from "../../Enum/EnvironmentVariable"; import {isMobile} from "../../Enum/EnvironmentVariable";
import {CustomizedCharacter} from "../Entity/CustomizedCharacter"; import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
export const CustomizeSceneName = "CustomizeScene"; export const CustomizeSceneName = "CustomizeScene";
export const CustomizeSceneKey = "CustomizeScene";
const customizeSceneKey = 'customizeScene';
export class CustomizeScene extends AbstractCharacterScene { export class CustomizeScene extends AbstractCharacterScene {
private Rectangle!: Rectangle; private Rectangle!: Rectangle;
@ -42,7 +36,6 @@ export class CustomizeScene extends AbstractCharacterScene {
} }
preload() { preload() {
this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => { this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
bodyResourceDescriptions.forEach((bodyResourceDescription) => { bodyResourceDescriptions.forEach((bodyResourceDescription) => {
@ -111,7 +104,15 @@ export class CustomizeScene extends AbstractCharacterScene {
this.onResize(); this.onResize();
} }
public doMoveCursorHorizontally(index: number): void { public moveCursorHorizontally(index: number): void {
this.moveHorizontally = index;
}
public moveCursorVertically(index: number): void {
this.moveVertically = index;
}
private doMoveCursorHorizontally(index: number): void {
this.selectedLayers[this.activeRow] += index; this.selectedLayers[this.activeRow] += index;
if (this.selectedLayers[this.activeRow] < 0) { if (this.selectedLayers[this.activeRow] < 0) {
this.selectedLayers[this.activeRow] = 0 this.selectedLayers[this.activeRow] = 0
@ -123,7 +124,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.saveInLocalStorage(); this.saveInLocalStorage();
} }
public doMoveCursorVertically(index:number): void { private doMoveCursorVertically(index:number): void {
this.activeRow += index; this.activeRow += index;
if (this.activeRow < 0) { if (this.activeRow < 0) {

View File

@ -10,17 +10,13 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {areCharacterLayersValid} from "../../Connexion/LocalUser";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import {PinchManager} from "../UserInput/PinchManager";
import {MenuScene} from "../Menu/MenuScene";
import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore"; import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
import {waScaleManager} from "../Services/WaScaleManager"; import {waScaleManager} from "../Services/WaScaleManager";
import {isMobile} from "../../Enum/EnvironmentVariable"; import {isMobile} from "../../Enum/EnvironmentVariable";
//todo: put this constants in a dedicated file //todo: put this constants in a dedicated file
export const SelectCharacterSceneName = "SelectCharacterScene"; export const SelectCharacterSceneName = "SelectCharacterScene";
const selectCharacterKey = 'selectCharacterScene';
export class SelectCharacterScene extends AbstractCharacterScene { export class SelectCharacterScene extends AbstractCharacterScene {
protected readonly nbCharactersPerRow = 6; protected readonly nbCharactersPerRow = 6;
protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
@ -29,7 +25,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
protected selectedRectangle!: Rectangle; protected selectedRectangle!: Rectangle;
protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
protected currentSelectUser = 0; protected currentSelectUser = 0;
protected pointerClicked: boolean = false; protected pointerClicked: boolean = false;
protected pointerTimer: number = 0; protected pointerTimer: number = 0;
@ -43,7 +38,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
} }
preload() { preload() {
this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => { this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
bodyResourceDescriptions.forEach((bodyResourceDescription) => { bodyResourceDescriptions.forEach((bodyResourceDescription) => {

View File

@ -3,6 +3,7 @@ import ScaleManager = Phaser.Scale.ScaleManager;
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
import type {Game} from "../Game/Game"; import type {Game} from "../Game/Game";
import {ResizableScene} from "../Login/ResizableScene"; import {ResizableScene} from "../Login/ResizableScene";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
class WaScaleManager { class WaScaleManager {
@ -39,6 +40,12 @@ class WaScaleManager {
const style = this.scaleManager.canvas.style; const style = this.scaleManager.canvas.style;
style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
// Resize the game element at the same size at the canvas
const gameStyle = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('game').style;
gameStyle.width = style.width;
gameStyle.height = style.height;
// Note: onResize will be called twice (once here and once in Game.ts), but we have no better way. // Note: onResize will be called twice (once here and once in Game.ts), but we have no better way.
for (const scene of this.game.scene.getScenes(true)) { for (const scene of this.game.scene.getScenes(true)) {
if (scene instanceof ResizableScene) { if (scene instanceof ResizableScene) {

View File

@ -1,6 +1,7 @@
import {HtmlUtils} from "./HtmlUtils"; import {HtmlUtils} from "./HtmlUtils";
import {Subject} from "rxjs"; import {Subject} from "rxjs";
import {iframeListener} from "../Api/IframeListener"; import {iframeListener} from "../Api/IframeListener";
import {touchScreenManager} from "../Touch/TouchScreenManager";
enum iframeStates { enum iframeStates {
closed = 1, closed = 1,
@ -17,6 +18,11 @@ const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close'; const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
const animationTime = 500; //time used by the css transitions, in ms. const animationTime = 500; //time used by the css transitions, in ms.
interface TouchMoveCoordinates {
x: number;
y: number;
}
class CoWebsiteManager { class CoWebsiteManager {
private opened: iframeStates = iframeStates.closed; private opened: iframeStates = iframeStates.closed;
@ -32,6 +38,7 @@ class CoWebsiteManager {
private resizing: boolean = false; private resizing: boolean = false;
private cowebsiteMainDom: HTMLDivElement; private cowebsiteMainDom: HTMLDivElement;
private cowebsiteAsideDom: HTMLDivElement; private cowebsiteAsideDom: HTMLDivElement;
private previousTouchMoveCoordinates: TouchMoveCoordinates|null = null; //only use on touchscreens to track touch movement
get width(): number { get width(): number {
return this.cowebsiteDiv.clientWidth; return this.cowebsiteDiv.clientWidth;
@ -62,7 +69,10 @@ class CoWebsiteManager {
this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId); this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId); this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
this.initResizeListeners(); if (touchScreenManager.supportTouchScreen) {
this.initResizeListeners(true);
}
this.initResizeListeners(false);
const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId); const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
buttonCloseFrame.addEventListener('click', () => { buttonCloseFrame.addEventListener('click', () => {
@ -77,22 +87,43 @@ class CoWebsiteManager {
}); });
} }
private initResizeListeners() { private initResizeListeners(touchMode:boolean) {
const movecallback = (event:MouseEvent) => { const movecallback = (event:MouseEvent|TouchEvent) => {
this.verticalMode ? this.height += event.movementY / this.getDevicePixelRatio() : this.width -= event.movementX / this.getDevicePixelRatio(); let x, y;
if (event.type === 'mousemove') {
x = (event as MouseEvent).movementX / this.getDevicePixelRatio();
y = (event as MouseEvent).movementY / this.getDevicePixelRatio();
} else {
const touchEvent = (event as TouchEvent).touches[0];
const last = {x: touchEvent.pageX, y: touchEvent.pageY};
const previous = this.previousTouchMoveCoordinates as TouchMoveCoordinates;
this.previousTouchMoveCoordinates = last;
x = last.x - previous.x;
y = last.y - previous.y;
}
this.verticalMode ? this.height += y : this.width -= x;
this.fire(); this.fire();
} }
this.cowebsiteAsideDom.addEventListener('mousedown', (event) => { this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => {
this.resizing = true; this.resizing = true;
this.getIframeDom().style.display = 'none'; this.getIframeDom().style.display = 'none';
if (touchMode) {
const touchEvent = (event as TouchEvent).touches[0];
this.previousTouchMoveCoordinates = {x: touchEvent.pageX, y: touchEvent.pageY};
}
document.addEventListener('mousemove', movecallback); document.addEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
}); });
document.addEventListener('mouseup', (event) => { document.addEventListener(touchMode ? 'touchend' : 'mouseup', (event) => {
if (!this.resizing) return; if (!this.resizing) return;
document.removeEventListener('mousemove', movecallback); if (touchMode) {
this.previousTouchMoveCoordinates = null;
}
document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
this.getIframeDom().style.display = 'block'; this.getIframeDom().style.display = 'block';
this.resizing = false; this.resizing = false;
}); });

View File

@ -28,6 +28,7 @@
aside { aside {
height: 30px; height: 30px;
min-height: 30px;
cursor: ns-resize; cursor: ns-resize;
flex-direction: column; flex-direction: column;

View File

@ -13,6 +13,8 @@
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100vw;
max-height: 100vh;
} }
} }

View File

@ -337,12 +337,12 @@ video.myCamVideo{
/* New layout */ /* New layout */
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100%;
width: 100vw; width: 100%;
} }
.main-container { .main-container {
height: 100vh; height: 100%;
width: 100vw; width: 100%;
position: absolute; position: absolute;
} }
@ -367,8 +367,6 @@ body {
} }
#game { #game {
height: 100%;
width: 100%;
position: relative; /* Position relative is needed for the game-overlay. */ position: relative; /* Position relative is needed for the game-overlay. */
} }
@ -589,7 +587,6 @@ input[type=range]:focus::-ms-fill-upper {
/* Let's make sure videos are vertically centered if they need to be cropped */ /* Let's make sure videos are vertically centered if they need to be cropped */
.media-container { .media-container {
display: flex; display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
border-radius: 15px; border-radius: 15px;