added fullscreen

front/dist/index.tmpl.html

@@ -71,7 +71,11 @@
                 </aside>
                 <main id="cowebsite-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"/>
                 </button>
             </div>

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;
@@ -368,7 +368,7 @@ body {
         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 {

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<void> = 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();