noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edited CoWebsiteManager to manage vertical resizing

This commit is contained in:
kharhamel 2021-03-18 15:05:15 +01:00
parent 0701e607fa
commit 32fdfaab35
8 changed files with 70 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/dist/.gitignore vendored
View File

@ -1,3 +1,3 @@
index.html index.html
index.tmpl.html.tmp index.tmpl.html.tmp
style.css style.*.css

2
front/dist/index.tmpl.html vendored
View File

@ -29,8 +29,6 @@
<base href="/"> <base href="/">
<link rel="stylesheet" href="/resources/style/style.css">
<link rel="stylesheet" href="/style.css">
<title>WorkAdventure</title> <title>WorkAdventure</title>
</head> </head>
<body id="body" style="margin: 0; background-color: #000"> <body id="body" style="margin: 0; background-color: #000">

36
front/dist/resources/style/cowebsite.scss vendored
View File

@ -1,10 +1,27 @@
/* A potentially shared website could appear in an iframe in the cowebsite space. */
#cowebsite { #cowebsite {
position: fixed;
transition: transform 0.5s;
background-color: white;
&.loading {
background-color: gray;
}
main {
iframe {
width: 100%;
height: 100%;
}
}
aside { aside {
background: gray; background: gray;
cursor: ew-resize; align-items: center;
display: flex;
img { img {
cursor: ew-resize;
margin: 3px; margin: 3px;
pointer-events: none; pointer-events: none;
height: 20px; height: 20px;
@ -52,10 +69,10 @@
aside { aside {
width: 30px; width: 30px;
align-items: center; cursor: ew-resize;
display: flex;
img { img {
cursor: ew-resize;
transform: rotate(90deg); transform: rotate(90deg);
} }
} }
@ -85,7 +102,7 @@
} }
#cowebsite-fullscreen{ #cowebsite-fullscreen{
right: 40px; right: 45px;
} }
} }
} }
@ -114,9 +131,12 @@
aside { aside {
height: 30px; height: 30px;
align-items: center; cursor: ns-resize;
display: flex;
flex-direction: column; flex-direction: column;
img {
cursor: ns-resize;
}
} }
.top-right-btn{ .top-right-btn{
@ -144,7 +164,7 @@
} }
#cowebsite-fullscreen{ #cowebsite-fullscreen{
right: 40px; right: 45px;
} }
} }
} }

2
front/dist/resources/style/index.scss vendored
View File

@ -1,2 +1,2 @@
@import "cowebsite.scss"; @import "cowebsite.scss";
/*@import "style.css"*/ @import "style.css";

15
front/dist/resources/style/style.css vendored
View File

@ -351,21 +351,6 @@ body {
position: relative; /* Position relative is needed for the game-overlay. */ 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 { .audioplayer:first-child {
display: grid; display: grid;
grid: 2rem / 4rem 10rem; grid: 2rem / 4rem 10rem;

57
front/src/WebRtc/CoWebsiteManager.ts
View File

@ -5,7 +5,6 @@ enum iframeStates {
closed = 1, closed = 1,
loading, // loading an iframe can be slow, so we show some placeholder until it is ready loading, // loading an iframe can be slow, so we show some placeholder until it is ready
opened, opened,
fullscreen,
} }
const cowebsiteDivId = 'cowebsite'; // the id of the whole container. const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
@ -21,8 +20,8 @@ class CoWebsiteManager {
private opened: iframeStates = iframeStates.closed; private opened: iframeStates = iframeStates.closed;
private _onStateChange: Subject<void> = new Subject(); private _onResize: Subject<void> = new Subject();
public onStateChange = this._onStateChange.asObservable(); public onResize = this._onResize.asObservable();
/** /**
* Quickly going in and out of an iframe trigger can create conflicts between the iframe states. * 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 * So we use this promise to queue up every cowebsite state transition
@ -40,6 +39,22 @@ class CoWebsiteManager {
set width(width: number) { set width(width: number) {
this.cowebsiteDiv.style.width = width+'px'; 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() { constructor() {
this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId); this.cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
@ -57,19 +72,21 @@ class CoWebsiteManager {
} }
private initResizeListeners() { private initResizeListeners() {
const movecallback = (event:MouseEvent) => {
this.verticalMode ? this.height -= event.movementY : this.width -= event.movementX;
this.fire();
}
this.cowebsiteAsideDom.addEventListener('mousedown', (event) => { this.cowebsiteAsideDom.addEventListener('mousedown', (event) => {
this.resizing = true; this.resizing = true;
this.getIframeDom().style.display = 'none'; this.getIframeDom().style.display = 'none';
document.onmousemove = (event) => { document.addEventListener('mousemove', movecallback);
this.width = this.width - event.movementX;
this.fire();
}
}); });
document.addEventListener('mouseup', (event) => { document.addEventListener('mouseup', (event) => {
if (!this.resizing) return; if (!this.resizing) return;
document.onmousemove = null; document.removeEventListener('mousemove', movecallback);
this.getIframeDom().style.display = 'block'; this.getIframeDom().style.display = 'block';
this.resizing = false; 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.remove('loaded'); //edit the css class to trigger the transition
this.cowebsiteDiv.classList.add('hidden'); this.cowebsiteDiv.classList.add('hidden');
this.opened = iframeStates.closed; this.opened = iframeStates.closed;
this.resetStyle();
} }
private load(): void { private load(): void {
this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
@ -88,11 +106,12 @@ class CoWebsiteManager {
private open(): void { private open(): void {
this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
this.opened = iframeStates.opened; this.opened = iframeStates.opened;
this.resetWidth(); this.resetStyle();
} }
private resetWidth() { public resetStyle() {
this.width = window.innerWidth / 2; this.cowebsiteDiv.style.width = '';
this.cowebsiteDiv.style.height = '';
} }
private getIframeDom(): HTMLIFrameElement { private getIframeDom(): HTMLIFrameElement {
@ -159,7 +178,7 @@ class CoWebsiteManager {
height: window.innerHeight height: window.innerHeight
} }
} }
if (window.innerWidth >= window.innerHeight) { if (!this.verticalMode) {
return { return {
width: window.innerWidth - this.width, width: window.innerWidth - this.width,
height: window.innerHeight height: window.innerHeight
@ -167,25 +186,23 @@ class CoWebsiteManager {
} else { } else {
return { return {
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight / 2 height: window.innerHeight - this.height,
} }
} }
} }
private fire(): void { private fire(): void {
this._onStateChange.next(); this._onResize.next();
} }
private fullscreen(): void { private fullscreen(): void {
if (this.opened === iframeStates.fullscreen) { if (this.isFullScreen) {
this.opened = iframeStates.opened; this.resetStyle();
this.width = window.innerWidth / 2;
//we don't trigger a resize of the phaser game since it won't be visible anyway. //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(cowebsiteOpenFullScreenImageId).style.display = 'inline';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none'; HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
} else { } else {
this.opened = iframeStates.fullscreen; this.verticalMode ? this.height = window.innerHeight : this.width = window.innerWidth;
this.width = window.innerWidth;
//we don't trigger a resize of the phaser game since it won't be visible anyway. //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(cowebsiteOpenFullScreenImageId).style.display = 'none';
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'inline'; HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'inline';

3
front/src/index.ts
View File

@ -109,6 +109,7 @@ const config: GameConfig = {
const game = new Phaser.Game(config); const game = new Phaser.Game(config);
window.addEventListener('resize', function (event) { window.addEventListener('resize', function (event) {
coWebsiteManager.resetStyle();
const {width, height} = coWebsiteManager.getGameSize(); const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION); 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(); const {width, height} = coWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION); game.scale.resize(width / RESOLUTION, height / RESOLUTION);
}); });

2
front/webpack.config.js
View File

@ -42,7 +42,7 @@ module.exports = {
require('webpack-require-http') require('webpack-require-http')
], ],
plugins: [ plugins: [
new MiniCssExtractPlugin({filename: 'style.css'}), new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
new HtmlWebpackPlugin( new HtmlWebpackPlugin(
{ {
template: './dist/index.tmpl.html.tmp', template: './dist/index.tmpl.html.tmp',