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;