noby/workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Centering character based on game div

Browse Source 
Previously, character was centered based on window size, but when doing CoWebsite browsing, window size != game size, leading to poorly centered characters
This commit is contained in:
David Négrier 2020-08-31 17:56:11 +02:00
parent 1ed132145c
commit 9516f6615c
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%;
}*/
.cowebsite iframe {
.cowebsite > iframe {
width: 100%;
height: 100%;
}
.game-overlay {
display: none;
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)
*/
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
}
}
}