From 3f6c61633af034f2f43bda7407065c038fe45488 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Mon, 15 Mar 2021 18:43:13 +0100 Subject: [PATCH 1/5] FEATURE: complete control over the iframe size --- front/dist/resources/style/style.css | 4 ++++ front/src/WebRtc/CoWebsiteManager.ts | 23 +++++++++++++++++++++++ front/src/index.ts | 2 -- 3 files changed, 27 insertions(+), 2 deletions(-) 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"; From 272be3eba0b922e844cd22509f9b38cd660e2136 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Wed, 17 Mar 2021 11:52:41 +0100 Subject: [PATCH 2/5] improve the visual of the cowebsite --- front/dist/index.tmpl.html | 5 ++ front/dist/resources/style/style.css | 26 ++++++++-- front/src/WebRtc/CoWebsiteManager.ts | 78 ++++++++++++++++------------ front/src/index.ts | 2 +- 4 files changed, 73 insertions(+), 38 deletions(-) diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index a2b44788..c1adaa87 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -66,6 +66,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 From 0701e607fad442578998432ca15ddc97009e7a5c Mon Sep 17 00:00:00 2001 From: kharhamel Date: Thu, 18 Mar 2021 12:37:05 +0100 Subject: [PATCH 4/5] added sass loader to the project and put the cowebsite style in its own sass file --- front/dist/.gitignore | 1 + front/dist/index.tmpl.html | 1 + front/dist/resources/style/cowebsite.scss | 150 +++++++++++++++++ front/dist/resources/style/index.scss | 2 + front/dist/resources/style/style.css | 79 --------- front/package.json | 4 + front/src/index.ts | 2 + front/webpack.config.js | 6 + front/yarn.lock | 189 +++++++++++++++++++++- 9 files changed, 352 insertions(+), 82 deletions(-) create mode 100644 front/dist/resources/style/cowebsite.scss create mode 100644 front/dist/resources/style/index.scss diff --git a/front/dist/.gitignore b/front/dist/.gitignore index dd1fae3d..50a1ae0c 100644 --- a/front/dist/.gitignore +++ b/front/dist/.gitignore @@ -1,2 +1,3 @@ index.html index.tmpl.html.tmp +style.css \ No newline at end of file diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index 0bc3b99e..e4423fdd 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -30,6 +30,7 @@ + WorkAdventure diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss new file mode 100644 index 00000000..8af87f42 --- /dev/null +++ b/front/dist/resources/style/cowebsite.scss @@ -0,0 +1,150 @@ +#cowebsite { + aside { + background: gray; + cursor: ew-resize; + + img { + cursor: ew-resize; + margin: 3px; + pointer-events: none; + height: 20px; + } + } + + .top-right-btn{ + position: absolute; + background: none; + border: none; + cursor: url('/resources/logos/cursor_pointer.png'), pointer; + + img { + height: 20px; + background-color: rgba(0,0.0,0,0.3); + padding: 5px; + border-radius: 3px; + } + + img:hover { + background-color: rgba(0,0,0,0.4); + } + } +} + +@media (min-aspect-ratio: 1/1) { + #cowebsite { + right: 0; + top: 0; + width: 50%; + height: 100vh; + display: flex; + + &.loading { + transform: translateX(90%); + } + &.hidden { + transform: translateX(100%); + } + + main { + width: 100%; + } + + + aside { + width: 30px; + align-items: center; + display: flex; + + img { + transform: rotate(90deg); + } + } + + .top-right-btn{ + top: 10px; + right: -100px; + animation: right .2s ease; + + img { + right: 15px; + } + } + + #cowebsite-close { + right: -140px; + } + #cowebsite-fullscreen { + right: -100px; + } + + } + + #cowebsite:hover { + #cowebsite-close{ + right: 10px; + } + + #cowebsite-fullscreen{ + right: 40px; + } + } +} +@media (max-aspect-ratio: 1/1) { + + + #cowebsite { + left: 0; + bottom: 0; + width: 100%; + height: 50%; + display: flex; + flex-direction: column; + + &.loading { + transform: translateY(90%); + } + &.hidden { + transform: translateY(100%); + } + + main { + height: 100%; + } + + + aside { + height: 30px; + align-items: center; + display: flex; + flex-direction: column; + } + + .top-right-btn{ + top: 10px; + right: -100px; + animation: right .2s ease; + + img { + right: 15px; + } + } + + #cowebsite-close { + right: -140px; + } + #cowebsite-fullscreen { + right: -100px; + } + + } + + #cowebsite:hover { + #cowebsite-close{ + right: 10px; + } + + #cowebsite-fullscreen{ + right: 40px; + } + } +} \ No newline at end of file diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss new file mode 100644 index 00000000..bb4c167e --- /dev/null +++ b/front/dist/resources/style/index.scss @@ -0,0 +1,2 @@ +@import "cowebsite.scss"; +/*@import "style.css"*/ \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index bcbacfb6..1ecbe889 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -325,73 +325,7 @@ body { max-height: 25%; } - #cowebsite { - right: 0; - top: 0; - width: 50%; - height: 100vh; - display: flex; - } - #cowebsite.loading { - transform: translateX(90%); - } - #cowebsite.hidden { - transform: translateX(100%); - } - - #cowebsite main { - width: 100%; - } - #cowebsite aside { - width: 30px; - background: gray; - align-items: center; - display: flex; - cursor: ew-resize; - } - - #cowebsite aside img { - cursor: ew-resize; - margin: 3px; - transform: rotate(90deg); - pointer-events: none; - } - - #cowebsite .top-right-btn{ - position: absolute; - top: 10px; - right: -100px; - background: none; - border: none; - cursor: url('/resources/logos/cursor_pointer.png'), pointer; - animation: right .2s ease; - } - - #cowebsite .top-right-btn img { - height: 20px; - right: 15px; - background-color: rgba(0,0.0,0,0.3); - padding: 5px; - border-radius: 3px; - } - - #cowebsite .top-right-btn img:hover { - background-color: rgba(0,0,0,0.4); - } - - #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 { @@ -410,19 +344,6 @@ body { .sidebar > div:hover { max-width: 25%; } - - #cowebsite { - left: 0; - bottom: 0; - width: 100%; - height: 50%; - } - #cowebsite.loading { - transform: translateY(90%); - } - #cowebsite.hidden { - transform: translateY(100%); - } } #game { diff --git a/front/package.json b/front/package.json index 0e50ba80..1ba7f3c2 100644 --- a/front/package.json +++ b/front/package.json @@ -9,9 +9,13 @@ "@types/quill": "^1.3.7", "@typescript-eslint/eslint-plugin": "^2.26.0", "@typescript-eslint/parser": "^2.26.0", + "css-loader": "^5.1.3", "eslint": "^6.8.0", "html-webpack-plugin": "^4.3.0", "jasmine": "^3.5.0", + "mini-css-extract-plugin": "^1.3.9", + "sass": "^1.32.8", + "sass-loader": "10.1.1", "ts-loader": "^6.2.2", "ts-node": "^8.10.2", "typescript": "^3.8.3", diff --git a/front/src/index.ts b/front/src/index.ts index 84c54d2a..3e0ae325 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -1,5 +1,7 @@ import 'phaser'; import GameConfig = Phaser.Types.Core.GameConfig; +import "../dist/resources/style/index.scss"; + import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable"; import {LoginScene} from "./Phaser/Login/LoginScene"; import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene"; diff --git a/front/webpack.config.js b/front/webpack.config.js index bb03c789..dda5ee4e 100644 --- a/front/webpack.config.js +++ b/front/webpack.config.js @@ -1,6 +1,7 @@ const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { entry: './src/index.ts', @@ -23,6 +24,10 @@ module.exports = { use: 'ts-loader', exclude: /node_modules/, }, + { + test: /\.scss$/, + use: [MiniCssExtractPlugin.loader, 'css-loader?url=false', 'sass-loader'], + }, ], }, resolve: { @@ -37,6 +42,7 @@ module.exports = { require('webpack-require-http') ], plugins: [ + new MiniCssExtractPlugin({filename: 'style.css'}), new HtmlWebpackPlugin( { template: './dist/index.tmpl.html.tmp', diff --git a/front/yarn.lock b/front/yarn.lock index 0b85ad88..533c5420 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -878,6 +878,11 @@ camelcase@^5.0.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== +camelcase@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809" + integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== + chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -905,6 +910,21 @@ charenc@0.0.2: resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667" integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc= +"chokidar@>=2.0.0 <4.0.0": + version "3.5.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" + integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.3.1" + chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -1034,6 +1054,11 @@ color-name@~1.1.4: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +colorette@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" + integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w== + commander@^2.20.0: version "2.20.3" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" @@ -1222,6 +1247,24 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +css-loader@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.1.3.tgz#87f6fc96816b20debe3cf682f85c7e56a963d0d1" + integrity sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag== + dependencies: + camelcase "^6.2.0" + cssesc "^3.0.0" + icss-utils "^5.1.0" + loader-utils "^2.0.0" + postcss "^8.2.8" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.0" + postcss-modules-scope "^3.0.0" + postcss-modules-values "^4.0.0" + postcss-value-parser "^4.1.0" + schema-utils "^3.0.0" + semver "^7.3.4" + css-select@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858" @@ -1237,6 +1280,11 @@ css-what@2.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg== +cssesc@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" + integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== + cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" @@ -2128,6 +2176,11 @@ fsevents@~2.1.2: resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e" integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ== +fsevents@~2.3.1: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -2497,6 +2550,11 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" +icss-utils@^5.0.0, icss-utils@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" + integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== + ieee754@^1.1.4: version "1.1.13" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84" @@ -2543,6 +2601,11 @@ imurmurhash@^0.1.4: resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= +indexes-of@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607" + integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc= + indexof@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d" @@ -2942,6 +3005,11 @@ kind-of@^6.0.0, kind-of@^6.0.2: resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== +klona@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0" + integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA== + levn@^0.3.0, levn@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee" @@ -3010,6 +3078,13 @@ lru-cache@^5.1.1: dependencies: yallist "^3.0.2" +lru-cache@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94" + integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== + dependencies: + yallist "^4.0.0" + make-dir@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" @@ -3156,6 +3231,15 @@ mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +mini-css-extract-plugin@^1.3.9: + version "1.3.9" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.9.tgz#47a32132b0fd97a119acd530e8421e8f6ab16d5e" + integrity sha512-Ac4s+xhVbqlyhXS5J/Vh/QXUz3ycXlCqoCPpg0vdfhsIBH9eg/It/9L1r1XhSCH737M1lqcWnMuWL13zcygn5A== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + webpack-sources "^1.1.0" + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -3259,6 +3343,11 @@ nan@^2.12.1: resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01" integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw== +nanoid@^3.1.20: + version "3.1.22" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844" + integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -3286,7 +3375,7 @@ negotiator@0.6.2: resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw== -neo-async@^2.5.0, neo-async@^2.6.1: +neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2: version "2.6.2" resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== @@ -3721,6 +3810,58 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs= +postcss-modules-extract-imports@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" + integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== + +postcss-modules-local-by-default@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c" + integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ== + dependencies: + icss-utils "^5.0.0" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + +postcss-modules-scope@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06" + integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg== + dependencies: + postcss-selector-parser "^6.0.4" + +postcss-modules-values@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" + integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== + dependencies: + icss-utils "^5.0.0" + +postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: + version "6.0.4" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3" + integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw== + dependencies: + cssesc "^3.0.0" + indexes-of "^1.0.1" + uniq "^1.0.1" + util-deprecate "^1.0.2" + +postcss-value-parser@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" + integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== + +postcss@^8.2.8: + version "8.2.8" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.8.tgz#0b90f9382efda424c4f0f69a2ead6f6830d08ece" + integrity sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw== + dependencies: + colorette "^1.2.2" + nanoid "^3.1.20" + source-map "^0.6.1" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -3940,6 +4081,13 @@ readdirp@~3.4.0: dependencies: picomatch "^2.2.1" +readdirp@~3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e" + integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ== + dependencies: + picomatch "^2.2.1" + regex-not@^1.0.0, regex-not@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c" @@ -4123,6 +4271,24 @@ safe-regex@^1.1.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sass-loader@10.1.1: + version "10.1.1" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.1.1.tgz#4ddd5a3d7638e7949065dd6e9c7c04037f7e663d" + integrity sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw== + dependencies: + klona "^2.0.4" + loader-utils "^2.0.0" + neo-async "^2.6.2" + schema-utils "^3.0.0" + semver "^7.3.2" + +sass@^1.32.8: + version "1.32.8" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.8.tgz#f16a9abd8dc530add8834e506878a2808c037bdc" + integrity sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ== + dependencies: + chokidar ">=2.0.0 <4.0.0" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" @@ -4168,6 +4334,13 @@ semver@^7.3.2: resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938" integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ== +semver@^7.3.4: + version "7.3.4" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97" + integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw== + dependencies: + lru-cache "^6.0.0" + send@0.17.1: version "0.17.1" resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8" @@ -4812,6 +4985,11 @@ union-value@^1.0.0: is-extendable "^0.1.1" set-value "^2.0.1" +uniq@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff" + integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8= + unique-filename@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230" @@ -4877,7 +5055,7 @@ use@^3.1.0: resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ== -util-deprecate@^1.0.1, util-deprecate@~1.0.1: +util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= @@ -5056,7 +5234,7 @@ webpack-require-http@^0.4.3: md5 "^2.0.0" url "^0.11.0" -webpack-sources@^1.4.0, webpack-sources@^1.4.1: +webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1: version "1.4.3" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933" integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ== @@ -5193,6 +5371,11 @@ yallist@^3.0.2: resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== +yallist@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" + integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A== + yargs-parser@^13.1.2: version "13.1.2" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38" From 32fdfaab35186d37ff16c35e9f5efb2cce08f160 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Thu, 18 Mar 2021 15:05:15 +0100 Subject: [PATCH 5/5] edited CoWebsiteManager to manage vertical resizing --- front/dist/.gitignore | 2 +- front/dist/index.tmpl.html | 2 - front/dist/resources/style/cowebsite.scss | 36 ++++++++++---- front/dist/resources/style/index.scss | 2 +- front/dist/resources/style/style.css | 15 ------ front/src/WebRtc/CoWebsiteManager.ts | 57 +++++++++++++++-------- front/src/index.ts | 3 +- front/webpack.config.js | 2 +- 8 files changed, 70 insertions(+), 49 deletions(-) diff --git a/front/dist/.gitignore b/front/dist/.gitignore index 50a1ae0c..05c474ec 100644 --- a/front/dist/.gitignore +++ b/front/dist/.gitignore @@ -1,3 +1,3 @@ index.html index.tmpl.html.tmp -style.css \ No newline at end of file +style.*.css \ No newline at end of file diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index e4423fdd..3ec6ad3b 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -29,8 +29,6 @@ - - WorkAdventure diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss index 8af87f42..ba8fdb84 100644 --- a/front/dist/resources/style/cowebsite.scss +++ b/front/dist/resources/style/cowebsite.scss @@ -1,10 +1,27 @@ +/* A potentially shared website could appear in an iframe in the cowebsite space. */ + #cowebsite { + position: fixed; + transition: transform 0.5s; + background-color: white; + + &.loading { + background-color: gray; + } + + main { + iframe { + width: 100%; + height: 100%; + } + } + aside { background: gray; - cursor: ew-resize; + align-items: center; + display: flex; img { - cursor: ew-resize; margin: 3px; pointer-events: none; height: 20px; @@ -52,10 +69,10 @@ aside { width: 30px; - align-items: center; - display: flex; + cursor: ew-resize; img { + cursor: ew-resize; transform: rotate(90deg); } } @@ -85,7 +102,7 @@ } #cowebsite-fullscreen{ - right: 40px; + right: 45px; } } } @@ -114,9 +131,12 @@ aside { height: 30px; - align-items: center; - display: flex; + cursor: ns-resize; flex-direction: column; + + img { + cursor: ns-resize; + } } .top-right-btn{ @@ -144,7 +164,7 @@ } #cowebsite-fullscreen{ - right: 40px; + right: 45px; } } } \ No newline at end of file diff --git a/front/dist/resources/style/index.scss b/front/dist/resources/style/index.scss index bb4c167e..4d0355b7 100644 --- a/front/dist/resources/style/index.scss +++ b/front/dist/resources/style/index.scss @@ -1,2 +1,2 @@ @import "cowebsite.scss"; -/*@import "style.css"*/ \ No newline at end of file +@import "style.css"; \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 1ecbe889..05ff5a03 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -351,21 +351,6 @@ body { position: relative; /* Position relative is needed for the game-overlay. */ } -/* A potentially shared website could appear in an iframe in the cowebsite space. */ -#cowebsite { - position: fixed; - transition: transform 0.5s; - background-color: white; -} -#cowebsite.loading { - background-color: gray; -} - -#cowebsite main iframe { - width: 100%; - height: 100%; -} - .audioplayer:first-child { display: grid; grid: 2rem / 4rem 10rem; diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index a10fd111..ada438ad 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -5,7 +5,6 @@ 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. @@ -21,8 +20,8 @@ class CoWebsiteManager { private opened: iframeStates = iframeStates.closed; - private _onStateChange: Subject = new Subject(); - public onStateChange = this._onStateChange.asObservable(); + private _onResize: Subject = new Subject(); + public onResize = this._onResize.asObservable(); /** * Quickly going in and out of an iframe trigger can create conflicts between the iframe states. * So we use this promise to queue up every cowebsite state transition @@ -40,6 +39,22 @@ class CoWebsiteManager { set width(width: number) { this.cowebsiteDiv.style.width = width+'px'; } + + get height(): number { + return this.cowebsiteDiv.clientHeight; + } + + set height(height: number) { + this.cowebsiteDiv.style.height = height+'px'; + } + + get verticalMode(): boolean { + return window.innerWidth < window.innerHeight; + } + + get isFullScreen(): boolean { + return this.verticalMode ? this.height === this.cowebsiteDiv.clientHeight : this.width === this.cowebsiteDiv.clientWidth + } constructor() { this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail(cowebsiteDivId); @@ -57,19 +72,21 @@ class CoWebsiteManager { } private initResizeListeners() { + const movecallback = (event:MouseEvent) => { + this.verticalMode ? this.height -= event.movementY : this.width -= event.movementX; + this.fire(); + } + this.cowebsiteAsideDom.addEventListener('mousedown', (event) => { this.resizing = true; this.getIframeDom().style.display = 'none'; - document.onmousemove = (event) => { - this.width = this.width - event.movementX; - this.fire(); - } + document.addEventListener('mousemove', movecallback); }); document.addEventListener('mouseup', (event) => { if (!this.resizing) return; - document.onmousemove = null; + document.removeEventListener('mousemove', movecallback); this.getIframeDom().style.display = 'block'; this.resizing = false; }); @@ -79,6 +96,7 @@ class CoWebsiteManager { this.cowebsiteDiv.classList.remove('loaded'); //edit the css class to trigger the transition this.cowebsiteDiv.classList.add('hidden'); this.opened = iframeStates.closed; + this.resetStyle(); } private load(): void { this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition @@ -88,11 +106,12 @@ class CoWebsiteManager { private open(): void { this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition this.opened = iframeStates.opened; - this.resetWidth(); + this.resetStyle(); } - private resetWidth() { - this.width = window.innerWidth / 2; + public resetStyle() { + this.cowebsiteDiv.style.width = ''; + this.cowebsiteDiv.style.height = ''; } private getIframeDom(): HTMLIFrameElement { @@ -159,7 +178,7 @@ class CoWebsiteManager { height: window.innerHeight } } - if (window.innerWidth >= window.innerHeight) { + if (!this.verticalMode) { return { width: window.innerWidth - this.width, height: window.innerHeight @@ -167,25 +186,23 @@ class CoWebsiteManager { } else { return { width: window.innerWidth, - height: window.innerHeight / 2 + height: window.innerHeight - this.height, } } } private fire(): void { - this._onStateChange.next(); + this._onResize.next(); } - + private fullscreen(): void { - if (this.opened === iframeStates.fullscreen) { - this.opened = iframeStates.opened; - this.width = window.innerWidth / 2; + if (this.isFullScreen) { + this.resetStyle(); //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; + this.verticalMode ? this.height = window.innerHeight : 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'; diff --git a/front/src/index.ts b/front/src/index.ts index 3e0ae325..8b0a83b6 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -109,6 +109,7 @@ const config: GameConfig = { const game = new Phaser.Game(config); window.addEventListener('resize', function (event) { + coWebsiteManager.resetStyle(); const {width, height} = coWebsiteManager.getGameSize(); game.scale.resize(width / RESOLUTION, height / RESOLUTION); @@ -120,7 +121,7 @@ window.addEventListener('resize', function (event) { } }); -coWebsiteManager.onStateChange.subscribe(() => { +coWebsiteManager.onResize.subscribe(() => { const {width, height} = coWebsiteManager.getGameSize(); game.scale.resize(width / RESOLUTION, height / RESOLUTION); }); diff --git a/front/webpack.config.js b/front/webpack.config.js index dda5ee4e..7e376da1 100644 --- a/front/webpack.config.js +++ b/front/webpack.config.js @@ -42,7 +42,7 @@ module.exports = { require('webpack-require-http') ], plugins: [ - new MiniCssExtractPlugin({filename: 'style.css'}), + new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}), new HtmlWebpackPlugin( { template: './dist/index.tmpl.html.tmp',