_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #1154 from thecodingmachine/gameSizeFix

Browse Source 
Display Game
This commit is contained in:
David Négrier 2021-06-15 09:16:00 +02:00 committed by GitHub
commit 1880022971
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/Components/VisitCard/VisitCard.svelte
View File

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

7
front/src/Phaser/Services/WaScaleManager.ts
View File

@ -3,6 +3,7 @@ import ScaleManager = Phaser.Scale.ScaleManager;
import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
import type {Game} from "../Game/Game"; import type {Game} from "../Game/Game";
import {ResizableScene} from "../Login/ResizableScene"; import {ResizableScene} from "../Login/ResizableScene";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
class WaScaleManager { class WaScaleManager {
@ -39,6 +40,12 @@ class WaScaleManager {
const style = this.scaleManager.canvas.style; const style = this.scaleManager.canvas.style;
style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
style.height = Math.ceil(realSize.height / 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. // 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)) { for (const scene of this.game.scene.getScenes(true)) {
if (scene instanceof ResizableScene) { if (scene instanceof ResizableScene) {

11
front/style/style.scss
View File

@ -337,12 +337,12 @@ video.myCamVideo{
/* New layout */ /* New layout */
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100%;
width: 100vw; width: 100%;
} }
.main-container { .main-container {
height: 100vh; height: 100%;
width: 100vw; width: 100%;
position: absolute; position: absolute;
} }
@ -367,8 +367,6 @@ body {
} }
#game { #game {
height: 100%;
width: 100%;
position: relative; /* Position relative is needed for the game-overlay. */ 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 */ /* Let's make sure videos are vertically centered if they need to be cropped */
.media-container { .media-container {
display: flex; display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
border-radius: 15px; border-radius: 15px;