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

Merge pull request #256 from thecodingmachine/develop

Browse Source 
Centering character based on game div  (production)
This commit is contained in:
David Négrier 2020-09-01 14:24:10 +02:00 committed by GitHub
commit f0497f2d55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/dist/resources/style/style.css vendored
View File

@ -299,12 +299,11 @@ body {
flex-basis: 100%; flex-basis: 100%;
}*/ }*/
.cowebsite iframe { .cowebsite > iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.game-overlay { .game-overlay {
display: none; display: none;
position: absolute; position: absolute;

43
front/src/WebRtc/LayoutManager.ts
View File

@ -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) * 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} { public findBiggestAvailableArray(): {xStart: number, yStart: number, xEnd: number, yEnd: number} {
const game = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('game');
if (this.mode === LayoutMode.VideoChat) { if (this.mode === LayoutMode.VideoChat) {
const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div'); const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
const htmlChildren = Array.from(children.values()); const htmlChildren = Array.from(children.values());
@ -213,27 +214,27 @@ class LayoutManager {
return { return {
xStart: 0, xStart: 0,
yStart: 0, yStart: 0,
xEnd: window.innerWidth, xEnd: game.offsetWidth,
yEnd: window.innerHeight yEnd: game.offsetHeight
} }
} }
const lastDiv = htmlChildren[htmlChildren.length - 1]; const lastDiv = htmlChildren[htmlChildren.length - 1];
// Compute area between top right of the last div and bottom right of window // Compute area between top right of the last div and bottom right of window
const area1 = (window.innerWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth)) const area1 = (game.offsetWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth))
* (window.innerHeight - lastDiv.offsetTop); * (game.offsetHeight - lastDiv.offsetTop);
// Compute area between bottom of last div and bottom of the screen on whole width // Compute area between bottom of last div and bottom of the screen on whole width
const area2 = window.innerWidth const area2 = game.offsetWidth
* (window.innerHeight - (lastDiv.offsetTop + lastDiv.offsetHeight)); * (game.offsetHeight - (lastDiv.offsetTop + lastDiv.offsetHeight));
if (area1 < 0 && area2 < 0) { if (area1 < 0 && area2 < 0) {
// If screen is full, let's not attempt something foolish and simply center character in the middle. // If screen is full, let's not attempt something foolish and simply center character in the middle.
return { return {
xStart: 0, xStart: 0,
yStart: 0, yStart: 0,
xEnd: window.innerWidth, xEnd: game.offsetWidth,
yEnd: window.innerHeight yEnd: game.offsetHeight
} }
} }
if (area1 <= area2) { if (area1 <= area2) {
@ -241,16 +242,16 @@ class LayoutManager {
return { return {
xStart: 0, xStart: 0,
yStart: lastDiv.offsetTop + lastDiv.offsetHeight, yStart: lastDiv.offsetTop + lastDiv.offsetHeight,
xEnd: window.innerWidth, xEnd: game.offsetWidth,
yEnd: window.innerHeight yEnd: game.offsetHeight
} }
} else { } else {
console.log('lastDiv', lastDiv.offsetTop); console.log('lastDiv', lastDiv.offsetTop);
return { return {
xStart: lastDiv.offsetLeft + lastDiv.offsetWidth, xStart: lastDiv.offsetLeft + lastDiv.offsetWidth,
yStart: lastDiv.offsetTop, yStart: lastDiv.offsetTop,
xEnd: window.innerWidth, xEnd: game.offsetWidth,
yEnd: window.innerHeight yEnd: game.offsetHeight
} }
} }
} else { } else {
@ -263,15 +264,15 @@ class LayoutManager {
return { return {
xStart: 0, xStart: 0,
yStart: 0, yStart: 0,
xEnd: window.innerWidth, xEnd: game.offsetWidth,
yEnd: window.innerHeight yEnd: game.offsetHeight
} }
} }
// At this point, we know we have at least one element in the main section. // At this point, we know we have at least one element in the main section.
const lastPresentationDiv = mainSectionChildren[mainSectionChildren.length-1]; 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); * (lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth);
let leftSideBar: number; let leftSideBar: number;
@ -284,22 +285,22 @@ class LayoutManager {
leftSideBar = lastSideBarChildren.offsetLeft; leftSideBar = lastSideBarChildren.offsetLeft;
bottomSideBar = lastSideBarChildren.offsetTop + lastSideBarChildren.offsetHeight; bottomSideBar = lastSideBarChildren.offsetTop + lastSideBarChildren.offsetHeight;
} }
const sideBarArea = (window.innerWidth - leftSideBar) const sideBarArea = (game.offsetWidth - leftSideBar)
* (window.innerHeight - bottomSideBar); * (game.offsetHeight - bottomSideBar);
if (presentationArea <= sideBarArea) { if (presentationArea <= sideBarArea) {
return { return {
xStart: leftSideBar, xStart: leftSideBar,
yStart: bottomSideBar, yStart: bottomSideBar,
xEnd: window.innerWidth, xEnd: game.offsetWidth,
yEnd: window.innerHeight yEnd: game.offsetHeight
} }
} else { } else {
return { return {
xStart: 0, xStart: 0,
yStart: lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight, 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 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: window.innerHeight yEnd: game.offsetHeight
} }
} }
} }