lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge pull request #1604 from thecodingmachine/develop

Browse source 
Deploy 2021-11-29
This commit is contained in:
David Négrier 2021-11-29 18:43:57 +01:00 committed by GitHub
parent 5e11cccdf9 591467f1e3
commit 21e400a4a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 71 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
front/src/WebRtc/CoWebsiteManager.ts
View file

@ -15,6 +15,7 @@ const cowebsiteContainerDomId = "cowebsite-container"; // the id of the whole co
const cowebsiteMainDomId = "cowebsite-slot-0"; // the id of the parent div of the iframe.
const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes.
const cowebsiteAsideDomId = "cowebsite-aside"; // the id of the parent div of the iframe.
const cowebsiteAsideHolderDomId = "cowebsite-aside-holder";
const cowebsiteSubIconsDomId = "cowebsite-sub-icons";
export const cowebsiteCloseButtonId = "cowebsite-close";
const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
@ -54,6 +55,7 @@ class CoWebsiteManager {
private cowebsiteMainDom: HTMLDivElement;
private cowebsiteBufferDom: HTMLDivElement;
private cowebsiteAsideDom: HTMLDivElement;
private cowebsiteAsideHolderDom: HTMLDivElement;
private cowebsiteSubIconsDom: HTMLDivElement;
private previousTouchMoveCoordinates: TouchMoveCoordinates | null = null; //only use on touchscreens to track touch movement
@ -99,6 +101,7 @@ class CoWebsiteManager {
this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
this.cowebsiteBufferDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteBufferDomId);
this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
this.cowebsiteAsideHolderDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideHolderDomId);
this.cowebsiteSubIconsDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteSubIconsDomId);
this.initResizeListeners();
@ -188,21 +191,23 @@ class CoWebsiteManager {
this.fire();
};
this.cowebsiteAsideDom.addEventListener("mousedown", (event) => {
this.cowebsiteAsideHolderDom.addEventListener("mousedown", (event) => {
if (this.isFullScreen) return;
this.cowebsiteMainDom.style.display = "none";
this.resizing = true;
document.addEventListener("mousemove", movecallback);
});
document.addEventListener("mouseup", (event) => {
if (!this.resizing) return;
if (!this.resizing || this.isFullScreen) return;
document.removeEventListener("mousemove", movecallback);
this.cowebsiteMainDom.style.display = "block";
this.resizing = false;
this.cowebsiteMainDom.style.display = "flex";
});
this.cowebsiteAsideDom.addEventListener("touchstart", (event) => {
this.cowebsiteAsideHolderDom.addEventListener("touchstart", (event) => {
if (this.isFullScreen) return;
this.cowebsiteMainDom.style.display = "none";
this.resizing = true;
const touchEvent = event.touches[0];
@ -211,7 +216,7 @@ class CoWebsiteManager {
});
document.addEventListener("touchend", (event) => {
if (!this.resizing) return;
if (!this.resizing || this.isFullScreen) return;
this.previousTouchMoveCoordinates = null;
document.removeEventListener("touchmove", movecallback);
this.cowebsiteMainDom.style.display = "block";
@ -640,17 +645,22 @@ class CoWebsiteManager {
}
private fullscreen(): void {
const openFullscreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId);
const closeFullScreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId);
if (this.isFullScreen) {
this.resetStyleMain();
this.fire();
//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";
this.cowebsiteAsideHolderDom.style.visibility = "visible";
openFullscreenImage.style.display = "inline";
closeFullScreenImage.style.display = "none";
} else {
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";
this.cowebsiteAsideHolderDom.style.visibility = "hidden";
openFullscreenImage.style.display = "none";
closeFullScreenImage.style.display = "inline";
}
}
}

9
front/style/cowebsite.scss
View file

@ -28,7 +28,7 @@
justify-content: space-between;
#cowebsite-aside-holder {
pointer-events: none;
background: gray;
height: 20px;
flex: 1;
display: flex;
@ -38,6 +38,7 @@
img {
width: 80%;
pointer-events: none;
}
}
@ -206,12 +207,14 @@
aside {
width: 30px;
cursor: ew-resize;
img {
cursor: ew-resize;
transform: rotate(90deg);
}
}
&-aside-holder {
cursor: ew-resize;
}
}
}

45
tests/tests/test.ts
View file

@ -1,19 +1,17 @@
import {assertLogMessage} from "./utils/log";
const fs = require('fs')
import { Selector } from 'testcafe';
import {userAlice} from "./utils/roles";
fixture `Variables`
.page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/Variables/Cache/variables_tmp.json`;
test("Test that variables cache in the back don't prevent setting a variable in case the map changes", async t => {
test("Test that variables cache in the back don't prevent setting a variable in case the map changes", async (t: TestController) => {
// Let's start by visiting a map that DOES not have the variable.
fs.copyFileSync('../maps/tests/Variables/Cache/variables_cache_1.json', '../maps/tests/Variables/Cache/variables_tmp.json');
await t
.typeText('input[name="loginSceneName"]', 'foo')
.click('button.loginSceneFormSubmit')
.click('button.selectCharacterButtonRight')
.click('button.selectCharacterButtonRight')
.click('button.selectCharacterSceneFormSubmit')
.click('button.letsgo');
await t.useRole(userAlice);
//.takeScreenshot('before_switch.png');
// Let's REPLACE the map by a map that has a new variable
@ -23,19 +21,9 @@ test("Test that variables cache in the back don't prevent setting a variable in
await t.resizeWindow(960, 800);
await t
.typeText('input[name="loginSceneName"]', 'foo')
.click('button.loginSceneFormSubmit')
.click('button.selectCharacterButtonRight')
.click('button.selectCharacterButtonRight')
.click('button.selectCharacterSceneFormSubmit')
.click('button.letsgo');
await t.useRole(userAlice);
//.takeScreenshot('after_switch.png');
const messages = await t.getBrowserConsoleMessages();
const logs = messages['log'];
// Let's check we successfully manage to save the variable value.
await assertLogMessage(t, 'SUCCESS!');
@ -46,22 +34,3 @@ test("Test that variables cache in the back don't prevent setting a variable in
console.log(await t.getBrowserConsoleMessages());
}
});
/**
* Tries to find a given log message in the logs (for 10 seconds)
*/
async function assertLogMessage(t, message: string): Promise<void> {
let i = 0;
let logs: string[]|undefined;
do {
const messages = await t.getBrowserConsoleMessages();
logs = messages['log'];
if (logs.find((str) => str === message)) {
break;
}
await t.wait(1000);
i++;
} while (i < 10);
await t.expect(logs).contains(message);
}

20
tests/tests/utils/log.ts Normal file
View file

@ -0,0 +1,20 @@
import { Selector } from 'testcafe';
/**
* Tries to find a given log message in the logs (for 10 seconds)
*/
export async function assertLogMessage(t: TestController, message: string): Promise<void> {
let i = 0;
let logs: string[]|undefined;
do {
const messages = await t.getBrowserConsoleMessages();
logs = messages['log'];
if (logs.find((str) => str === message)) {
break;
}
await t.wait(1000);
i++;
} while (i < 10);
await t.expect(logs).contains(message);
}

20
tests/tests/utils/roles.ts Normal file
View file

@ -0,0 +1,20 @@
import { Role } from 'testcafe';
export const userAlice = Role('http://play.workadventure.localhost/', async t => {
await t
.typeText('input[name="loginSceneName"]', 'Alice')
.click('button.loginSceneFormSubmit')
.click('button.selectCharacterButtonRight')
.click('button.selectCharacterButtonRight')
.click('button.selectCharacterSceneFormSubmit')
.click('button.letsgo');
});
export const userBob = Role('http://play.workadventure.localhost/', async t => {
await t
.typeText('input[name="loginSceneName"]', 'Bob')
.click('button.loginSceneFormSubmit')
.click('button.selectCharacterButtonRight')
.click('button.selectCharacterSceneFormSubmit')
.click('button.letsgo');
});