Merge pull request #1154 from thecodingmachine/gameSizeFix

Display Game

front/src/Phaser/Services/WaScaleManager.ts

@@ -3,6 +3,7 @@ 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";
 
 
 class WaScaleManager {
@@ -39,6 +40,12 @@ 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 = 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.
         for (const scene of this.game.scene.getScenes(true)) {
             if (scene instanceof ResizableScene) {

front/style/style.scss

@@ -337,12 +337,12 @@ 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;
 }
 
@@ -367,8 +367,6 @@ body {
 }
 
 #game {
-    height: 100%;
-    width: 100%;
     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 */
 .media-container {
     display: flex;
-    justify-content: center;
     flex-direction: column;
     overflow: hidden;
     border-radius: 15px;