Merge pull request #1154 from thecodingmachine/gameSizeFix

Display Game

front/src/Components/VisitCard/VisitCard.svelte

@@ -2,24 +2,24 @@
     import { fly } from 'svelte/transition';
     import {requestVisitCardsStore} from "../../Stores/GameStore";
     import {onMount} from "svelte";
-    
+
     export let visitCardUrl: string;
     let w = '500px';
     let h = '250px';
     let hidden = true;
     let cvIframe;
-    
+
     function closeCard() {
         requestVisitCardsStore.set(null);
     }
-    
+
     function handleIframeMessage(message:any) {
         if (message.data.type === 'cvIframeSize') {
             w = (message.data.data.w) + 'px';
             h = (message.data.data.h) + 'px';
         }
     }
-    
+
     onMount(() => {
         cvIframe.onload = () => hidden = false
         cvIframe.onerror = () => hidden = false
@@ -42,7 +42,7 @@
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
-  
+
   .visitCard {
     pointer-events: all;
     margin-left: auto;
@@ -54,7 +54,7 @@
       border: 0;
       max-width: 80vw;
       overflow: hidden;
-      
+
       &.hidden {
         visibility: hidden;
         position: absolute;
@@ -78,7 +78,7 @@
             <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
         </div>
     {/if}
-    
+
 </section>
 
 <svelte:window on:message={handleIframeMessage}/>

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;