diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte index 5cdb4cfe..ebf22934 100644 --- a/front/src/Components/VisitCard/VisitCard.svelte +++ b/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 @@ {/if} - + diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 1da0fcf3..abfd2a8b 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/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('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) { diff --git a/front/style/style.scss b/front/style/style.scss index 8522d4a4..beed1db5 100644 --- a/front/style/style.scss +++ b/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;