From b52c546a8caf5ec418c0769891c61ab35b47bb07 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 27 Jan 2021 12:38:57 +0100
Subject: [PATCH 1/3] 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<T extends HTMLElement>(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<T extends HTMLElement>(id: string): T {
         const elem = document.getElementById(id);
         if (HtmlUtils.isHtmlElement<T>(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<HTMLDivElement>('game');
+        const game = HtmlUtils.querySelectorOrFail<HTMLDivElement>('#game canvas');
         if (this.mode === LayoutMode.VideoChat) {
             const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
             const htmlChildren = Array.from(children.values());

From 608a9ad347320365b4838e27413b4ca04afe9785 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 28 Jan 2021 21:07:17 +0100
Subject: [PATCH 2/3] use type guard

---
 front/src/WebRtc/HtmlUtils.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts
index 48c1e092..9b4d9bb8 100644
--- a/front/src/WebRtc/HtmlUtils.ts
+++ b/front/src/WebRtc/HtmlUtils.ts
@@ -8,12 +8,11 @@ export class HtmlUtils {
     }
 
     public static querySelectorOrFail<T extends HTMLElement>(selector: string): T {
-        const elem = document.querySelector(selector);
-        if (elem === null) {
-            throw new Error("Cannot find HTML element with selector '"+selector+"'");
+        const elem = document.querySelector<T>(selector);
+        if (HtmlUtils.isHtmlElement<T>(elem)) {
+            return elem;
         }
-        // FIXME: does not check the type of the returned type
-        return elem as T;
+        throw new Error("Cannot find HTML element with selector '"+selector+"'");
     }
 
     public static removeElementByIdOrFail<T extends HTMLElement>(id: string): T {

From a8b5e8599feaf7e458089609444311a55ed58f6f Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 28 Jan 2021 21:09:41 +0100
Subject: [PATCH 3/3] use HTMLCanvasElement

---
 front/src/WebRtc/LayoutManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts
index 4649a880..4587f870 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.querySelectorOrFail<HTMLDivElement>('#game canvas');
+        const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>('#game canvas');
         if (this.mode === LayoutMode.VideoChat) {
             const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
             const htmlChildren = Array.from(children.values());