From b52c546a8caf5ec418c0769891c61ab35b47bb07 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 27 Jan 2021 12:38:57 +0100 Subject: [PATCH] Use canvas instead of div container for calculating the game size --- front/src/WebRtc/HtmlUtils.ts | 9 +++++++++ front/src/WebRtc/LayoutManager.ts | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts index 168fba1e..48c1e092 100644 --- a/front/src/WebRtc/HtmlUtils.ts +++ b/front/src/WebRtc/HtmlUtils.ts @@ -7,6 +7,15 @@ export class HtmlUtils { throw new Error("Cannot find HTML element with id '"+id+"'"); } + public static querySelectorOrFail(selector: string): T { + const elem = document.querySelector(selector); + if (elem === null) { + throw new Error("Cannot find HTML element with selector '"+selector+"'"); + } + // FIXME: does not check the type of the returned type + return elem as T; + } + public static removeElementByIdOrFail(id: string): T { const elem = document.getElementById(id); if (HtmlUtils.isHtmlElement(elem)) { diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index a6b9fa27..4649a880 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -212,7 +212,7 @@ class LayoutManager { * Tries to find the biggest available box of remaining space (this is a space where we can center the character) */ public findBiggestAvailableArray(): {xStart: number, yStart: number, xEnd: number, yEnd: number} { - const game = HtmlUtils.getElementByIdOrFail('game'); + const game = HtmlUtils.querySelectorOrFail('#game canvas'); if (this.mode === LayoutMode.VideoChat) { const children = document.querySelectorAll('div.chat-mode > div'); const htmlChildren = Array.from(children.values());