From 9516f6615cd3b0f9f75c80082f867922dfa91f42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 31 Aug 2020 17:56:11 +0200
Subject: [PATCH] Centering character based on game div

Previously, character was centered based on window size, but when doing CoWebsite browsing, window size != game size, leading to poorly centered characters
---
 front/dist/resources/style/style.css |  3 +-
 front/src/WebRtc/LayoutManager.ts    | 43 ++++++++++++++--------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 2dbba223..807544ad 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -299,12 +299,11 @@ body {
     flex-basis: 100%;
 }*/
 
-.cowebsite iframe {
+.cowebsite > iframe {
     width: 100%;
     height: 100%;
 }
 
-
 .game-overlay {
     display: none;
     position: absolute;
diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts
index 02818c78..dc013563 100644
--- a/front/src/WebRtc/LayoutManager.ts
+++ b/front/src/WebRtc/LayoutManager.ts
@@ -204,6 +204,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');
         if (this.mode === LayoutMode.VideoChat) {
             const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
             const htmlChildren = Array.from(children.values());
@@ -213,27 +214,27 @@ class LayoutManager {
                 return {
                     xStart: 0,
                     yStart: 0,
-                    xEnd: window.innerWidth,
-                    yEnd: window.innerHeight
+                    xEnd: game.offsetWidth,
+                    yEnd: game.offsetHeight
                 }
             }
 
             const lastDiv = htmlChildren[htmlChildren.length - 1];
             // Compute area between top right of the last div and bottom right of window
-            const area1 = (window.innerWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth))
-                          * (window.innerHeight - lastDiv.offsetTop);
+            const area1 = (game.offsetWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth))
+                          * (game.offsetHeight - lastDiv.offsetTop);
 
             // Compute area between bottom of last div and bottom of the screen on whole width
-            const area2 = window.innerWidth
-                * (window.innerHeight - (lastDiv.offsetTop + lastDiv.offsetHeight));
+            const area2 = game.offsetWidth
+                * (game.offsetHeight - (lastDiv.offsetTop + lastDiv.offsetHeight));
 
             if (area1 < 0 && area2 < 0) {
                 // If screen is full, let's not attempt something foolish and simply center character in the middle.
                 return {
                     xStart: 0,
                     yStart: 0,
-                    xEnd: window.innerWidth,
-                    yEnd: window.innerHeight
+                    xEnd: game.offsetWidth,
+                    yEnd: game.offsetHeight
                 }
             }
             if (area1 <= area2) {
@@ -241,16 +242,16 @@ class LayoutManager {
                 return {
                     xStart: 0,
                     yStart: lastDiv.offsetTop + lastDiv.offsetHeight,
-                    xEnd: window.innerWidth,
-                    yEnd: window.innerHeight
+                    xEnd: game.offsetWidth,
+                    yEnd: game.offsetHeight
                 }
             } else {
                 console.log('lastDiv', lastDiv.offsetTop);
                 return {
                     xStart: lastDiv.offsetLeft + lastDiv.offsetWidth,
                     yStart: lastDiv.offsetTop,
-                    xEnd: window.innerWidth,
-                    yEnd: window.innerHeight
+                    xEnd: game.offsetWidth,
+                    yEnd: game.offsetHeight
                 }
             }
         } else {
@@ -263,15 +264,15 @@ class LayoutManager {
                 return {
                     xStart: 0,
                     yStart: 0,
-                    xEnd: window.innerWidth,
-                    yEnd: window.innerHeight
+                    xEnd: game.offsetWidth,
+                    yEnd: game.offsetHeight
                 }
             }
 
             // At this point, we know we have at least one element in the main section.
             const lastPresentationDiv = mainSectionChildren[mainSectionChildren.length-1];
 
-            const presentationArea = (window.innerHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight))
+            const presentationArea = (game.offsetHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight))
                                      * (lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth);
 
             let leftSideBar: number;
@@ -284,22 +285,22 @@ class LayoutManager {
                 leftSideBar = lastSideBarChildren.offsetLeft;
                 bottomSideBar = lastSideBarChildren.offsetTop + lastSideBarChildren.offsetHeight;
             }
-            const sideBarArea = (window.innerWidth - leftSideBar)
-                * (window.innerHeight - bottomSideBar);
+            const sideBarArea = (game.offsetWidth - leftSideBar)
+                * (game.offsetHeight - bottomSideBar);
 
             if (presentationArea <= sideBarArea) {
                 return {
                     xStart: leftSideBar,
                     yStart: bottomSideBar,
-                    xEnd: window.innerWidth,
-                    yEnd: window.innerHeight
+                    xEnd: game.offsetWidth,
+                    yEnd: game.offsetHeight
                 }
             } else {
                 return {
                     xStart: 0,
                     yStart: lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight,
-                    xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ window.innerWidth , // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area
-                    yEnd: window.innerHeight
+                    xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ game.offsetWidth , // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area
+                    yEnd: game.offsetHeight
                 }
             }
         }