From 61180a6e649460e71adccfc22e71b184d93ff797 Mon Sep 17 00:00:00 2001 From: GRL Date: Wed, 9 Jun 2021 15:29:37 +0200 Subject: [PATCH 01/10] The cam of other people in a bubble is at the top of the screen even when a iframe is open on mobile --- front/style/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/front/style/style.scss b/front/style/style.scss index 8522d4a4..b22a3f57 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -589,7 +589,6 @@ input[type=range]:focus::-ms-fill-upper { /* Let's make sure videos are vertically centered if they need to be cropped */ .media-container { display: flex; - justify-content: center; flex-direction: column; overflow: hidden; border-radius: 15px; From 6868128267e05180f94942b847184360157686b4 Mon Sep 17 00:00:00 2001 From: GRL Date: Wed, 9 Jun 2021 18:08:14 +0200 Subject: [PATCH 02/10] DOM Element game resize at the same time and the same size at the canvas of phaser Remove VisitCard scss unused --- front/src/Components/VisitCard/VisitCard.svelte | 11 ----------- front/src/Phaser/Services/WaScaleManager.ts | 8 ++++++++ front/style/style.scss | 2 -- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte index cc7f00d6..c2e53f0c 100644 --- a/front/src/Components/VisitCard/VisitCard.svelte +++ b/front/src/Components/VisitCard/VisitCard.svelte @@ -17,17 +17,6 @@ width: 530px; margin-top: 200px; max-width: 100vw; - - .defaultCard { - border-radius: 5px; - border: 2px black solid; - background-color: whitesmoke; - width: 530px; - - header { - padding: 5px; - } - } iframe { border: 0; diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index acbecc38..cf10f195 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -39,6 +39,14 @@ class WaScaleManager { const style = this.scaleManager.canvas.style; style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; + + // Resize the game element at the same size at the canvas + const gameStyle = document.getElementById('game')?.style; + if (gameStyle != undefined) { + gameStyle.height = style.height; + gameStyle.width = style.width; + } + // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way. for (const scene of this.game.scene.getScenes(true)) { if (scene instanceof ResizableScene) { diff --git a/front/style/style.scss b/front/style/style.scss index b22a3f57..b034baec 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -367,8 +367,6 @@ body { } #game { - height: 100%; - width: 100%; position: relative; /* Position relative is needed for the game-overlay. */ } From d26502a724a01e6a9dac2f8e3ba641b314b8142f Mon Sep 17 00:00:00 2001 From: GRL Date: Thu, 10 Jun 2021 09:23:25 +0200 Subject: [PATCH 03/10] Use HtmlUtils to get DOM Element game --- front/src/Phaser/Services/WaScaleManager.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index cf10f195..52e5e14a 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -3,6 +3,8 @@ import ScaleManager = Phaser.Scale.ScaleManager; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import type {Game} from "../Game/Game"; import {ResizableScene} from "../Login/ResizableScene"; +import {HtmlUtils} from "../../WebRtc/HtmlUtils"; +import {INPUT_CONSOLE_MESSAGE} from "../../Administration/ConsoleGlobalMessageManager"; class WaScaleManager { @@ -41,11 +43,9 @@ class WaScaleManager { style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; // Resize the game element at the same size at the canvas - const gameStyle = document.getElementById('game')?.style; - if (gameStyle != undefined) { - gameStyle.height = style.height; - gameStyle.width = style.width; - } + const gameStyle = HtmlUtils.getElementByIdOrFail('game').style; + gameStyle.height = style.height; + gameStyle.width = style.width; // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way. for (const scene of this.game.scene.getScenes(true)) { From 281b8580cd6be6d9d5c993408d2fc838cec3491a Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 14 Jun 2021 15:54:22 +0200 Subject: [PATCH 04/10] Use window and not viewport in css for main-container --- front/src/Phaser/Services/WaScaleManager.ts | 2 +- front/style/style.scss | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 52e5e14a..e40ef65f 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -44,8 +44,8 @@ class WaScaleManager { // Resize the game element at the same size at the canvas const gameStyle = HtmlUtils.getElementByIdOrFail('game').style; - gameStyle.height = style.height; gameStyle.width = style.width; + gameStyle.height = style.height; // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way. for (const scene of this.game.scene.getScenes(true)) { diff --git a/front/style/style.scss b/front/style/style.scss index b034baec..8eae5330 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -337,13 +337,14 @@ video.myCamVideo{ /* New layout */ body { margin: 0; - height: 100vh; - width: 100vw; + height: 100%; + width: 100%; } .main-container { - height: 100vh; - width: 100vw; + height: 100%; + width: 100%; position: absolute; + background-color: #00d4ff; } @media (min-aspect-ratio: 1/1) { From c2fba353608a0cb51a49eb39613e192b919e757d Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 14 Jun 2021 16:04:55 +0200 Subject: [PATCH 05/10] Suppression blue back-ground --- front/style/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/front/style/style.scss b/front/style/style.scss index 8eae5330..beed1db5 100644 --- a/front/style/style.scss +++ b/front/style/style.scss @@ -344,7 +344,6 @@ body { height: 100%; width: 100%; position: absolute; - background-color: #00d4ff; } @media (min-aspect-ratio: 1/1) { From b239edb2665492420a0422098e50400ca876ca40 Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 14 Jun 2021 16:09:41 +0200 Subject: [PATCH 06/10] Clean code --- front/src/Phaser/Services/WaScaleManager.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index e40ef65f..ff3bef0c 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -4,7 +4,6 @@ import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import type {Game} from "../Game/Game"; import {ResizableScene} from "../Login/ResizableScene"; import {HtmlUtils} from "../../WebRtc/HtmlUtils"; -import {INPUT_CONSOLE_MESSAGE} from "../../Administration/ConsoleGlobalMessageManager"; class WaScaleManager { From a5779095f8f964ec3b66da026da8c7d9575726d6 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Mon, 7 Jun 2021 17:48:39 +0200 Subject: [PATCH 07/10] FIX: cowebsite resize now works on touchscreens --- front/src/WebRtc/CoWebsiteManager.ts | 47 +++++++++++++++++++++++----- front/style/cowebsite.scss | 2 ++ 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 9793cd25..1fb28487 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -1,6 +1,7 @@ import {HtmlUtils} from "./HtmlUtils"; import {Subject} from "rxjs"; import {iframeListener} from "../Api/IframeListener"; +import {touchScreenManager} from "../Touch/TouchScreenManager"; enum iframeStates { closed = 1, @@ -17,6 +18,11 @@ const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open'; const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close'; const animationTime = 500; //time used by the css transitions, in ms. +interface TouchMoveCoordinates { + x: number; + y: number; +} + class CoWebsiteManager { private opened: iframeStates = iframeStates.closed; @@ -32,6 +38,7 @@ class CoWebsiteManager { private resizing: boolean = false; private cowebsiteMainDom: HTMLDivElement; private cowebsiteAsideDom: HTMLDivElement; + private previousTouchMoveCoordinates: TouchMoveCoordinates|null = null; //only use on touchscreens to track touch movement get width(): number { return this.cowebsiteDiv.clientWidth; @@ -62,7 +69,10 @@ class CoWebsiteManager { this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail(cowebsiteMainDomId); this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail(cowebsiteAsideDomId); - this.initResizeListeners(); + if (touchScreenManager.supportTouchScreen) { + this.initResizeListeners(true); + } + this.initResizeListeners(false); const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId); buttonCloseFrame.addEventListener('click', () => { @@ -77,22 +87,43 @@ class CoWebsiteManager { }); } - private initResizeListeners() { - const movecallback = (event:MouseEvent) => { - this.verticalMode ? this.height += event.movementY / this.getDevicePixelRatio() : this.width -= event.movementX / this.getDevicePixelRatio(); + private initResizeListeners(touchMode:boolean) { + const movecallback = (event:MouseEvent|TouchEvent) => { + 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.cowebsiteAsideDom.addEventListener('mousedown', (event) => { + this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => { this.resizing = true; 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; - document.removeEventListener('mousemove', movecallback); + if (touchMode) { + this.previousTouchMoveCoordinates = null; + } + document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback); this.getIframeDom().style.display = 'block'; this.resizing = false; }); diff --git a/front/style/cowebsite.scss b/front/style/cowebsite.scss index 2ed1ef69..e508b58d 100644 --- a/front/style/cowebsite.scss +++ b/front/style/cowebsite.scss @@ -13,6 +13,8 @@ iframe { width: 100%; height: 100%; + max-width: 100vw; + max-height: 100vh; } } From 09da69c24af786b97c81b3b88d82cdb66f17c1f2 Mon Sep 17 00:00:00 2001 From: GRL Date: Tue, 15 Jun 2021 11:16:44 +0200 Subject: [PATCH 08/10] CustomizeScene buttons use moveHorizontally and moveVertically --- front/src/Phaser/Login/CustomizeScene.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index f1d48235..4c19d944 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -111,7 +111,15 @@ export class CustomizeScene extends AbstractCharacterScene { 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; if (this.selectedLayers[this.activeRow] < 0) { this.selectedLayers[this.activeRow] = 0 @@ -123,7 +131,7 @@ export class CustomizeScene extends AbstractCharacterScene { this.saveInLocalStorage(); } - public doMoveCursorVertically(index:number): void { + private doMoveCursorVertically(index:number): void { this.activeRow += index; if (this.activeRow < 0) { From 40e2ba196d1b40d6054b2e0b0d26e20dba742b38 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Tue, 15 Jun 2021 14:35:29 +0200 Subject: [PATCH 09/10] FIX: fixed the cowebsite aside dom not being visible on some browser --- front/style/cowebsite-mobile.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/front/style/cowebsite-mobile.scss b/front/style/cowebsite-mobile.scss index 85b41511..48a6689e 100644 --- a/front/style/cowebsite-mobile.scss +++ b/front/style/cowebsite-mobile.scss @@ -28,6 +28,7 @@ aside { height: 30px; + min-height: 30px; cursor: ns-resize; flex-direction: column; From c559b2104b4e28da9ebaaf218b7ec7b78d82e733 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Tue, 15 Jun 2021 15:32:40 +0200 Subject: [PATCH 10/10] scene cleanup --- front/src/Phaser/Login/CustomizeScene.ts | 7 ------- front/src/Phaser/Login/SelectCharacterScene.ts | 6 ------ 2 files changed, 13 deletions(-) diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 4c19d944..9d0e7877 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -2,26 +2,20 @@ import {EnableCameraSceneName} from "./EnableCameraScene"; import Rectangle = Phaser.GameObjects.Rectangle; import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager"; import Sprite = Phaser.GameObjects.Sprite; -import Container = Phaser.GameObjects.Container; import {gameManager} from "../Game/GameManager"; import {localUserStore} from "../../Connexion/LocalUserStore"; import {addLoader} from "../Components/Loader"; import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; import {AbstractCharacterScene} from "./AbstractCharacterScene"; import {areCharacterLayersValid} from "../../Connexion/LocalUser"; -import { MenuScene } from "../Menu/MenuScene"; import { SelectCharacterSceneName } from "./SelectCharacterScene"; import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore"; -import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore"; import {waScaleManager} from "../Services/WaScaleManager"; import {isMobile} from "../../Enum/EnvironmentVariable"; import {CustomizedCharacter} from "../Entity/CustomizedCharacter"; export const CustomizeSceneName = "CustomizeScene"; -export const CustomizeSceneKey = "CustomizeScene"; -const customizeSceneKey = 'customizeScene'; - export class CustomizeScene extends AbstractCharacterScene { private Rectangle!: Rectangle; @@ -42,7 +36,6 @@ export class CustomizeScene extends AbstractCharacterScene { } preload() { - this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html'); this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => { bodyResourceDescriptions.forEach((bodyResourceDescription) => { diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 0d01bd88..1abd58e5 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -10,17 +10,13 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene"; import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {PinchManager} from "../UserInput/PinchManager"; -import {MenuScene} from "../Menu/MenuScene"; import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore"; -import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore"; import {waScaleManager} from "../Services/WaScaleManager"; import {isMobile} from "../../Enum/EnvironmentVariable"; //todo: put this constants in a dedicated file export const SelectCharacterSceneName = "SelectCharacterScene"; -const selectCharacterKey = 'selectCharacterScene'; - export class SelectCharacterScene extends AbstractCharacterScene { protected readonly nbCharactersPerRow = 6; 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 selectCharacterSceneElement!: Phaser.GameObjects.DOMElement; protected currentSelectUser = 0; protected pointerClicked: boolean = false; protected pointerTimer: number = 0; @@ -43,7 +38,6 @@ export class SelectCharacterScene extends AbstractCharacterScene { } preload() { - this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html'); this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => { bodyResourceDescriptions.forEach((bodyResourceDescription) => {