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',