diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index c1adaa87..0bc3b99e 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -71,7 +71,11 @@ - + + + + + diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 2576a72a..bcbacfb6 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -358,7 +358,7 @@ body { pointer-events: none; } - #cowebsite .close-btn{ + #cowebsite .top-right-btn{ position: absolute; top: 10px; right: -100px; @@ -366,9 +366,9 @@ body { border: none; cursor: url('/resources/logos/cursor_pointer.png'), pointer; animation: right .2s ease; - } + } - #cowebsite .close-btn img { + #cowebsite .top-right-btn img { height: 20px; right: 15px; background-color: rgba(0,0.0,0,0.3); @@ -376,13 +376,22 @@ body { border-radius: 3px; } - #cowebsite .close-btn img:hover { + #cowebsite .top-right-btn img:hover { background-color: rgba(0,0,0,0.4); } - - #cowebsite:hover .close-btn{ + + #cowebsite #cowebsite-close { + right: -140px; + } + #cowebsite:hover #cowebsite-close{ right: 10px; } + #cowebsite #cowebsite-fullscreen { + right: -100px; + } + #cowebsite:hover #cowebsite-fullscreen{ + right: 40px; + } } @media (max-aspect-ratio: 1/1) { .game-overlay { diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index a9a0939f..a10fd111 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -5,12 +5,16 @@ enum iframeStates { closed = 1, loading, // loading an iframe can be slow, so we show some placeholder until it is ready opened, + fullscreen, } const cowebsiteDivId = 'cowebsite'; // the id of the whole container. 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 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. class CoWebsiteManager { @@ -26,7 +30,6 @@ class CoWebsiteManager { private currentOperationPromise: Promise = Promise.resolve(); private cowebsiteDiv: HTMLDivElement; private resizing: boolean = false; - private currentWidth: number = 0; private cowebsiteMainDom: HTMLDivElement; private cowebsiteAsideDom: HTMLDivElement; @@ -48,6 +51,9 @@ class CoWebsiteManager { HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId).addEventListener('click', () => { this.closeCoWebsite(); }); + HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => { + this.fullscreen(); + }); } private initResizeListeners() { @@ -169,6 +175,22 @@ class CoWebsiteManager { private fire(): void { 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(); \ No newline at end of file