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

added fullscreen

Browse Source
This commit is contained in:
kharhamel 2021-03-17 18:57:00 +01:00
parent 272be3eba0
commit f9c8b4131c
3 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/dist/index.tmpl.html vendored
View File

@ -71,7 +71,11 @@
</aside> </aside>
<main id="cowebsite-main"> <main id="cowebsite-main">
</main> </main>
<button class="close-btn" id="cowebsite-close"> <button class="top-right-btn" id="cowebsite-fullscreen">
<img id="cowebsite-fullscreen-open" src="resources/logos/monitor.svg"/>
<img id="cowebsite-fullscreen-close" style="display: none;" src="resources/logos/monitor-close.svg"/>
</button>
<button class="top-right-btn" id="cowebsite-close">
<img src="resources/logos/close.svg"/> <img src="resources/logos/close.svg"/>
</button> </button>
</div> </div>

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

@ -358,7 +358,7 @@ body {
pointer-events: none; pointer-events: none;
} }
#cowebsite .close-btn{ #cowebsite .top-right-btn{
position: absolute; position: absolute;
top: 10px; top: 10px;
right: -100px; right: -100px;
@ -368,7 +368,7 @@ body {
animation: right .2s ease; animation: right .2s ease;
} }
#cowebsite .close-btn img { #cowebsite .top-right-btn img {
height: 20px; height: 20px;
right: 15px; right: 15px;
background-color: rgba(0,0.0,0,0.3); background-color: rgba(0,0.0,0,0.3);
@ -376,13 +376,22 @@ body {
border-radius: 3px; border-radius: 3px;
} }
#cowebsite .close-btn img:hover { #cowebsite .top-right-btn img:hover {
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
} }
#cowebsite:hover .close-btn{ #cowebsite #cowebsite-close {
right: -140px;
}
#cowebsite:hover #cowebsite-close{
right: 10px; right: 10px;
} }
#cowebsite #cowebsite-fullscreen {
right: -100px;
}
#cowebsite:hover #cowebsite-fullscreen{
right: 40px;
}
} }
@media (max-aspect-ratio: 1/1) { @media (max-aspect-ratio: 1/1) {
.game-overlay { .game-overlay {

24
front/src/WebRtc/CoWebsiteManager.ts
View File

@ -5,12 +5,16 @@ enum iframeStates {
closed = 1, closed = 1,
loading, // loading an iframe can be slow, so we show some placeholder until it is ready loading, // loading an iframe can be slow, so we show some placeholder until it is ready
opened, opened,
fullscreen,
} }
const cowebsiteDivId = 'cowebsite'; // the id of the whole container. const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
const cowebsiteMainDomId = 'cowebsite-main'; // the id of the parent div of the iframe. const cowebsiteMainDomId = 'cowebsite-main'; // the id of the parent div of the iframe.
const cowebsiteAsideDomId = 'cowebsite-aside'; // the id of the parent div of the iframe. const cowebsiteAsideDomId = 'cowebsite-aside'; // the id of the parent div of the iframe.
const cowebsiteCloseButtonId = 'cowebsite-close'; const cowebsiteCloseButtonId = 'cowebsite-close';
const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
const animationTime = 500; //time used by the css transitions, in ms. const animationTime = 500; //time used by the css transitions, in ms.
class CoWebsiteManager { class CoWebsiteManager {
@ -26,7 +30,6 @@ class CoWebsiteManager {
private currentOperationPromise: Promise<void> = Promise.resolve(); private currentOperationPromise: Promise<void> = Promise.resolve();
private cowebsiteDiv: HTMLDivElement; private cowebsiteDiv: HTMLDivElement;
private resizing: boolean = false; private resizing: boolean = false;
private currentWidth: number = 0;
private cowebsiteMainDom: HTMLDivElement; private cowebsiteMainDom: HTMLDivElement;
private cowebsiteAsideDom: HTMLDivElement; private cowebsiteAsideDom: HTMLDivElement;
@ -48,6 +51,9 @@ class CoWebsiteManager {
HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId).addEventListener('click', () => { HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId).addEventListener('click', () => {
this.closeCoWebsite(); this.closeCoWebsite();
}); });
HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => {
this.fullscreen();
});
} }
private initResizeListeners() { private initResizeListeners() {
@ -169,6 +175,22 @@ class CoWebsiteManager {
private fire(): void { private fire(): void {
this._onStateChange.next(); this._onStateChange.next();
} }
private fullscreen(): void {
if (this.opened === iframeStates.fullscreen) {
this.opened = iframeStates.opened;
this.width = window.innerWidth / 2;
//we don't trigger a resize of the phaser game since it won't be visible anyway.
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
} else {
this.opened = iframeStates.fullscreen;
this.width = window.innerWidth;
//we don't trigger a resize of the phaser game since it won't be visible anyway.
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'none';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'inline';
}
}
} }
export const coWebsiteManager = new CoWebsiteManager(); export const coWebsiteManager = new CoWebsiteManager();