Merge pull request #1189 from thecodingmachine/develop
Deploy 2021-06-15
This commit is contained in:
commit
39a7b95e32
front
src
Phaser
WebRtc
style
@ -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) {
|
||||||
|
@ -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) => {
|
||||||
|
@ -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) {
|
||||||
|
@ -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;
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -13,6 +13,8 @@
|
|||||||
iframe {
|
iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
max-width: 100vw;
|
||||||
|
max-height: 100vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user