diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index f874f866..322c10eb 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -330,6 +330,10 @@ body { top: 0; width: 50%; height: 100vh; + cursor: ew-resize; + } + #cowebsite iframe { + margin-left: 30px; } #cowebsite.loading { transform: translateX(90%); diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 4e74c4a7..27e815b0 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -22,9 +22,26 @@ class CoWebsiteManager { */ private currentOperationPromise: Promise = Promise.resolve(); private cowebsiteDiv: HTMLDivElement; + private resizing: boolean = false; constructor() { this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail(cowebsiteDivId); + + this.cowebsiteDiv.addEventListener('mousedown', (event) => { + this.resizing = true; + this.getIframeDom().style.display = 'none'; + + document.onmousemove = (event) => { + this.cowebsiteDiv.style.width = (this.cowebsiteDiv.clientWidth - event.movementX) + 'px'; + } + }); + + document.addEventListener('mouseup', (event) => { + if (!this.resizing) return; + document.onmousemove = null; + this.getIframeDom().style.display = 'block'; + this.resizing = false; + }); } private close(): void { @@ -41,6 +58,12 @@ class CoWebsiteManager { this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition this.opened = iframeStates.opened; } + + private getIframeDom(): HTMLIFrameElement { + const iframe = HtmlUtils.getElementByIdOrFail(cowebsiteDivId).querySelector('iframe'); + if (!iframe) throw new Error('Could not find iframe!'); + return iframe; + } public loadCoWebsite(url: string, base: string, allowPolicy?: string): void { this.load(); diff --git a/front/src/index.ts b/front/src/index.ts index 94b1df43..1ef53d65 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -5,8 +5,6 @@ import {LoginScene} from "./Phaser/Login/LoginScene"; import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene"; import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene"; import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene"; -import WebGLRenderer = Phaser.Renderer.WebGL.WebGLRenderer; -import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline"; import {CustomizeScene} from "./Phaser/Login/CustomizeScene"; import {ResizableScene} from "./Phaser/Login/ResizableScene"; import {EntryScene} from "./Phaser/Login/EntryScene";