From 61180a6e649460e71adccfc22e71b184d93ff797 Mon Sep 17 00:00:00 2001 From: GRL Date: Wed, 9 Jun 2021 15:29:37 +0200 Subject: [PATCH 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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 {