_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' into develop

Browse Source
This commit is contained in:
Gregoire Parant 2021-08-06 15:53:33 +02:00
commit af613f5b5b
20 changed files with 202 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
back/src/Model/GameRoom.ts
View File

@ -473,7 +473,22 @@ export class GameRoom {
const variablesManager = new VariablesManager(this.roomUrl, null); const variablesManager = new VariablesManager(this.roomUrl, null);
return variablesManager.init(); return variablesManager.init();
} else { } else {
throw e; // An error occurred while loading the map
// Right now, let's bypass the error. In the future, we should make sure the user is aware of that
// and that he/she will act on it to fix the problem.
// Note: we run this message inside a setTimeout so that the room listeners can have time to connect.
setTimeout(() => {
for (const roomListener of this.roomListeners) {
emitErrorOnRoomSocket(
roomListener,
"Your map does not seem accessible from the WorkAdventure servers. Is it behind a firewall or a proxy? Your map should be accessible from the WorkAdventure servers. If you use the scripting API in this map, please be aware that server-side checks and variable persistence is disabled."
);
}
}, 1000);
const variablesManager = new VariablesManager(this.roomUrl, null);
return variablesManager.init();
} }
}); });
} }

62
front/dist/resources/service-worker.html vendored
View File

@ -1,62 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- TRACK CODE -->
<!-- END TRACK CODE -->
<link rel="apple-touch-icon" sizes="57x57" href="/static/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/static/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/static/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/static/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/static/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/static/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/static/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/static/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/static/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/static/images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#000000">
<title>WorkAdventure PWA</title>
<style>
body{
font-family: Whitney, Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body img{
position: absolute;
top: calc( 50% - 25px);
height: 59px;
width: 307px;
left: calc( 50% - 150px);
}
body p{
position: absolute;
text-align: center;
top: calc( 50% + 50px);
left: calc( 50% - 150px);
height: 59px;
width: 307px;
font-size: 20px;
}
</style>
</head>
<body>
<img src="/static/images/logo.png" alt="WorkAdventure logo"/>
<p>Charging your workspace ...</p>
<script>
setTimeout(() => {
window.location = localStorage.getItem('lastRoomUrl');
}, 4000);
</script>
</body>
</html>

1
front/dist/resources/service-worker.js → front/dist/service-worker.js vendored
View File

@ -8,7 +8,6 @@ self.addEventListener('install', function(event) {
event.waitUntil( event.waitUntil(
caches.open(CACHE_NAME) caches.open(CACHE_NAME)
.then(function(cache) { .then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache); return cache.addAll(urlsToCache);
}) })
); );

BIN
front/dist/static/images/favicons/apple-icon-114x114.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
front/dist/static/images/favicons/apple-icon-120x120.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
front/dist/static/images/favicons/apple-icon-144x144.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
front/dist/static/images/favicons/apple-icon-152x152.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
front/dist/static/images/favicons/apple-icon-180x180.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
front/dist/static/images/favicons/apple-icon-57x57.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 978 B

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
front/dist/static/images/favicons/apple-icon-60x60.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 985 B

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
front/dist/static/images/favicons/apple-icon-72x72.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
front/dist/static/images/favicons/apple-icon-76x76.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
front/dist/static/images/favicons/apple-icon.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
front/dist/static/images/favicons/icon-512x512.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

60
front/dist/static/images/favicons/manifest.json vendored
View File

@ -48,41 +48,10 @@
"type": "image\/png" "type": "image\/png"
}, },
{ {
"src": "/static/images/favicons/android-icon-36x36.png", "src": "/static/images/favicons/apple-icon.png",
"sizes": "36x36", "sizes": "192x192",
"type": "image\/png", "type": "image\/png",
"density": "0.75" "purpose": "any"
},
{
"src": "/static/images/favicons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "/static/images/favicons/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "/static/images/favicons/favicon-16x16.png",
"sizes": "16x16",
"type": "image\/png",
"density": "1"
},
{
"src": "/static/images/favicons/favicon-32x32.png",
"sizes": "32x32",
"type": "image\/png",
"density": "1.5"
},
{
"src": "/static/images/favicons/favicon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
}, },
{ {
@ -122,18 +91,37 @@
"density": "4.0", "density": "4.0",
"purpose": "any maskable" "purpose": "any maskable"
}, },
{
"src": "/static/images/favicons/favicon-16x16.png",
"sizes": "16x16",
"type": "image\/png",
"density": "1"
},
{
"src": "/static/images/favicons/favicon-32x32.png",
"sizes": "32x32",
"type": "image\/png",
"density": "1.5"
},
{
"src": "/static/images/favicons/favicon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{ {
"src": "/static/images/favicons/icon-512x512.png", "src": "/static/images/favicons/icon-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image\/png" "type": "image\/png"
} }
], ],
"start_url": "/resources/service-worker.html", "start_url": "/",
"background_color": "#000000", "background_color": "#000000",
"display_override": ["window-control-overlay", "minimal-ui"], "display_override": ["window-control-overlay", "minimal-ui"],
"display": "standalone", "display": "standalone",
"orientation": "portrait-primary", "orientation": "portrait-primary",
"scope": "/resources/", "scope": "/",
"lang": "en", "lang": "en",
"theme_color": "#000000", "theme_color": "#000000",
"shortcuts": [ "shortcuts": [

9
front/src/Connexion/ConnectionManager.ts
View File

@ -105,6 +105,15 @@ class ConnectionManager {
let roomPath: string; let roomPath: string;
if (connexionType === GameConnexionTypes.empty) { if (connexionType === GameConnexionTypes.empty) {
roomPath = window.location.protocol + "//" + window.location.host + START_ROOM_URL; roomPath = window.location.protocol + "//" + window.location.host + START_ROOM_URL;
//get last room path from cache api
try {
const lastRoomUrl = await localUserStore.getLastRoomUrlCacheApi();
if (lastRoomUrl != undefined) {
roomPath = lastRoomUrl;
}
} catch (err) {
console.error(err);
}
} else { } else {
roomPath = roomPath =
window.location.protocol + window.location.protocol +

15
front/src/Connexion/LocalUserStore.ts
View File

@ -17,6 +17,8 @@ const authToken = "authToken";
const state = "state"; const state = "state";
const nonce = "nonce"; const nonce = "nonce";
const cacheAPIIndex = "workavdenture-cache-v1";
class LocalUserStore { class LocalUserStore {
saveUser(localUser: LocalUser) { saveUser(localUser: LocalUser) {
localStorage.setItem("localUser", JSON.stringify(localUser)); localStorage.setItem("localUser", JSON.stringify(localUser));
@ -116,10 +118,23 @@ class LocalUserStore {
setLastRoomUrl(roomUrl: string): void { setLastRoomUrl(roomUrl: string): void {
localStorage.setItem(lastRoomUrl, roomUrl.toString()); localStorage.setItem(lastRoomUrl, roomUrl.toString());
caches.open(cacheAPIIndex).then((cache) => {
const stringResponse = new Response(JSON.stringify({ roomUrl }));
cache.put(`/${lastRoomUrl}`, stringResponse);
});
} }
getLastRoomUrl(): string { getLastRoomUrl(): string {
return localStorage.getItem(lastRoomUrl) ?? ""; return localStorage.getItem(lastRoomUrl) ?? "";
} }
getLastRoomUrlCacheApi(): Promise<string | undefined> {
return caches.open(cacheAPIIndex).then((cache) => {
return cache.match(`/${lastRoomUrl}`).then((res) => {
return res?.json().then((data) => {
return data.roomUrl;
});
});
});
}
setAuthToken(value: string | null) { setAuthToken(value: string | null) {
value ? localStorage.setItem(authToken, value) : localStorage.removeItem(authToken); value ? localStorage.setItem(authToken, value) : localStorage.removeItem(authToken);

4
front/src/Network/ServiceWorker.ts
View File

@ -6,15 +6,13 @@ export class _ServiceWorker {
} }
init() { init() {
window.addEventListener("load", () => {
navigator.serviceWorker navigator.serviceWorker
.register("/resources/service-worker.js") .register("/service-worker.js")
.then((serviceWorker) => { .then((serviceWorker) => {
console.info("Service Worker registered: ", serviceWorker); console.info("Service Worker registered: ", serviceWorker);
}) })
.catch((error) => { .catch((error) => {
console.error("Error registering the Service Worker: ", error); console.error("Error registering the Service Worker: ", error);
}); });
});
} }
} }

44
front/src/Phaser/Components/MobileJoystick.ts
View File

@ -1,12 +1,12 @@
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js'; import VirtualJoystick from "phaser3-rex-plugins/plugins/virtualjoystick.js";
import { waScaleManager } from "../Services/WaScaleManager"; import { waScaleManager } from "../Services/WaScaleManager";
import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes"; import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
//the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free //the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
export const joystickBaseKey = 'joystickBase'; export const joystickBaseKey = "joystickBase";
export const joystickBaseImg = 'resources/objects/joystickSplitted.png'; export const joystickBaseImg = "resources/objects/joystickSplitted.png";
export const joystickThumbKey = 'joystickThumb'; export const joystickThumbKey = "joystickThumb";
export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png'; export const joystickThumbImg = "resources/objects/smallHandleFilledGrey.png";
const baseSize = 50; const baseSize = 50;
const thumbSize = 25; const thumbSize = 25;
@ -20,15 +20,27 @@ export class MobileJoystick extends VirtualJoystick {
x: -1000, x: -1000,
y: -1000, y: -1000,
radius: radius * window.devicePixelRatio, radius: radius * window.devicePixelRatio,
base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX), base: scene.add
thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX), .image(0, 0, joystickBaseKey)
.setDisplaySize(
(baseSize / waScaleManager.zoomModifier) * window.devicePixelRatio,
(baseSize / waScaleManager.zoomModifier) * window.devicePixelRatio
)
.setDepth(DEPTH_INGAME_TEXT_INDEX),
thumb: scene.add
.image(0, 0, joystickThumbKey)
.setDisplaySize(
(thumbSize / waScaleManager.zoomModifier) * window.devicePixelRatio,
(thumbSize / waScaleManager.zoomModifier) * window.devicePixelRatio
)
.setDepth(DEPTH_INGAME_TEXT_INDEX),
enable: true, enable: true,
dir: "8dir", dir: "8dir",
}); });
this.visible = false; this.visible = false;
this.enable = false; this.enable = false;
this.scene.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => { this.scene.input.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
if (!pointer.wasTouch) { if (!pointer.wasTouch) {
return; return;
} }
@ -44,7 +56,7 @@ export class MobileJoystick extends VirtualJoystick {
this.enable = false; this.enable = false;
} }
}); });
this.scene.input.on('pointerup', () => { this.scene.input.on("pointerup", () => {
this.visible = false; this.visible = false;
this.enable = false; this.enable = false;
}); });
@ -52,10 +64,16 @@ export class MobileJoystick extends VirtualJoystick {
this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback); this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
} }
private resize() { public resize() {
this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio); this.base.setDisplaySize(this.getDisplaySizeByElement(baseSize), this.getDisplaySizeByElement(baseSize));
this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio); this.thumb.setDisplaySize(this.getDisplaySizeByElement(thumbSize), this.getDisplaySizeByElement(thumbSize));
this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio); this.setRadius(
(radius / (waScaleManager.zoomModifier * waScaleManager.uiScalingFactor)) * window.devicePixelRatio
);
}
private getDisplaySizeByElement(element: integer): integer {
return (element / (waScaleManager.zoomModifier * waScaleManager.uiScalingFactor)) * window.devicePixelRatio;
} }
public destroy() { public destroy() {

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

@ -2,6 +2,7 @@ import {HtmlUtils} from "./HtmlUtils";
import { Subject } from "rxjs"; import { Subject } from "rxjs";
import { iframeListener } from "../Api/IframeListener"; import { iframeListener } from "../Api/IframeListener";
import { touchScreenManager } from "../Touch/TouchScreenManager"; import { touchScreenManager } from "../Touch/TouchScreenManager";
import { waScaleManager } from "../Phaser/Services/WaScaleManager";
enum iframeStates { enum iframeStates {
closed = 1, closed = 1,
@ -9,13 +10,13 @@ enum iframeStates {
opened, opened,
} }
const cowebsiteDivId = 'cowebsite'; // the id of the whole container. const cowebsiteDivId = "cowebsite"; // the id of the whole container.
const cowebsiteMainDomId = 'cowebsite-main'; // the id of the parent div of the iframe. 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 cowebsiteAsideDomId = "cowebsite-aside"; // the id of the parent div of the iframe.
export const cowebsiteCloseButtonId = 'cowebsite-close'; export const cowebsiteCloseButtonId = "cowebsite-close";
const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen'; const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open'; const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open";
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close'; const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close";
const animationTime = 500; //time used by the css transitions, in ms. const animationTime = 500; //time used by the css transitions, in ms.
interface TouchMoveCoordinates { interface TouchMoveCoordinates {
@ -24,7 +25,6 @@ interface TouchMoveCoordinates {
} }
class CoWebsiteManager { class CoWebsiteManager {
private opened: iframeStates = iframeStates.closed; private opened: iframeStates = iframeStates.closed;
private _onResize: Subject<void> = new Subject(); private _onResize: Subject<void> = new Subject();
@ -45,7 +45,7 @@ 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 { get height(): number {
@ -53,7 +53,7 @@ class CoWebsiteManager {
} }
set height(height: number) { set height(height: number) {
this.cowebsiteDiv.style.height = height+'px'; this.cowebsiteDiv.style.height = height + "px";
} }
get verticalMode(): boolean { get verticalMode(): boolean {
@ -75,13 +75,13 @@ class CoWebsiteManager {
this.initResizeListeners(false); this.initResizeListeners(false);
const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId); const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
buttonCloseFrame.addEventListener('click', () => { buttonCloseFrame.addEventListener("click", () => {
buttonCloseFrame.blur(); buttonCloseFrame.blur();
this.closeCoWebsite(); this.closeCoWebsite();
}); });
const buttonFullScreenFrame = HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId); const buttonFullScreenFrame = HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId);
buttonFullScreenFrame.addEventListener('click', () => { buttonFullScreenFrame.addEventListener("click", () => {
buttonFullScreenFrame.blur(); buttonFullScreenFrame.blur();
this.fullscreen(); this.fullscreen();
}); });
@ -90,7 +90,7 @@ class CoWebsiteManager {
private initResizeListeners(touchMode: boolean) { private initResizeListeners(touchMode: boolean) {
const movecallback = (event: MouseEvent | TouchEvent) => { const movecallback = (event: MouseEvent | TouchEvent) => {
let x, y; let x, y;
if (event.type === 'mousemove') { if (event.type === "mousemove") {
x = (event as MouseEvent).movementX / this.getDevicePixelRatio(); x = (event as MouseEvent).movementX / this.getDevicePixelRatio();
y = (event as MouseEvent).movementY / this.getDevicePixelRatio(); y = (event as MouseEvent).movementY / this.getDevicePixelRatio();
} else { } else {
@ -102,29 +102,28 @@ class CoWebsiteManager {
y = last.y - previous.y; y = last.y - previous.y;
} }
this.verticalMode ? (this.height += y) : (this.width -= x);
this.verticalMode ? this.height += y : this.width -= x;
this.fire(); this.fire();
} };
this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => { this.cowebsiteAsideDom.addEventListener(touchMode ? "touchstart" : "mousedown", (event) => {
this.resizing = true; this.resizing = true;
this.getIframeDom().style.display = 'none'; this.getIframeDom().style.display = "none";
if (touchMode) { if (touchMode) {
const touchEvent = (event as TouchEvent).touches[0]; const touchEvent = (event as TouchEvent).touches[0];
this.previousTouchMoveCoordinates = { x: touchEvent.pageX, y: touchEvent.pageY }; this.previousTouchMoveCoordinates = { x: touchEvent.pageX, y: touchEvent.pageY };
} }
document.addEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback); document.addEventListener(touchMode ? "touchmove" : "mousemove", movecallback);
}); });
document.addEventListener(touchMode ? 'touchend' : 'mouseup', (event) => { document.addEventListener(touchMode ? "touchend" : "mouseup", (event) => {
if (!this.resizing) return; if (!this.resizing) return;
if (touchMode) { if (touchMode) {
this.previousTouchMoveCoordinates = null; this.previousTouchMoveCoordinates = null;
} }
document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback); document.removeEventListener(touchMode ? "touchmove" : "mousemove", movecallback);
this.getIframeDom().style.display = 'block'; this.getIframeDom().style.display = "block";
this.resizing = false; this.resizing = false;
}); });
} }
@ -132,34 +131,34 @@ class CoWebsiteManager {
private getDevicePixelRatio(): number { private getDevicePixelRatio(): number {
//on chrome engines, movementX and movementY return global screens coordinates while other browser return pixels //on chrome engines, movementX and movementY return global screens coordinates while other browser return pixels
//so on chrome-based browser we need to adjust using 'devicePixelRatio' //so on chrome-based browser we need to adjust using 'devicePixelRatio'
return window.navigator.userAgent.includes('Firefox') ? 1 : window.devicePixelRatio; return window.navigator.userAgent.includes("Firefox") ? 1 : window.devicePixelRatio;
} }
private close(): void { private close(): void {
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(); 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
this.cowebsiteDiv.classList.add('loading'); this.cowebsiteDiv.classList.add("loading");
this.opened = iframeStates.loading; this.opened = iframeStates.loading;
} }
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.resetStyle(); this.resetStyle();
} }
public resetStyle() { public resetStyle() {
this.cowebsiteDiv.style.width = ''; this.cowebsiteDiv.style.width = "";
this.cowebsiteDiv.style.height = ''; this.cowebsiteDiv.style.height = "";
} }
private getIframeDom(): HTMLIFrameElement { private getIframeDom(): HTMLIFrameElement {
const iframe = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId).querySelector('iframe'); const iframe = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId).querySelector("iframe");
if (!iframe) throw new Error('Could not find iframe!'); if (!iframe) throw new Error("Could not find iframe!");
return iframe; return iframe;
} }
@ -167,9 +166,9 @@ class CoWebsiteManager {
this.load(); this.load();
this.cowebsiteMainDom.innerHTML = ``; this.cowebsiteMainDom.innerHTML = ``;
const iframe = document.createElement('iframe'); const iframe = document.createElement("iframe");
iframe.id = 'cowebsite-iframe'; iframe.id = "cowebsite-iframe";
iframe.src = (new URL(url, base)).toString(); iframe.src = new URL(url, base).toString();
if (allowPolicy) { if (allowPolicy) {
iframe.allow = allowPolicy; iframe.allow = allowPolicy;
} }
@ -183,14 +182,17 @@ class CoWebsiteManager {
const onTimeoutPromise = new Promise<void>((resolve) => { const onTimeoutPromise = new Promise<void>((resolve) => {
setTimeout(() => resolve(), 2000); setTimeout(() => resolve(), 2000);
}); });
this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => { this.currentOperationPromise = this.currentOperationPromise
.then(() => Promise.race([onloadPromise, onTimeoutPromise]))
.then(() => {
this.open(); this.open();
setTimeout(() => { setTimeout(() => {
this.fire(); this.fire();
}, animationTime) }, animationTime);
}).catch((err) => { })
console.error('Error loadCoWebsite => ', err); .catch((err) => {
this.closeCoWebsite() console.error("Error loadCoWebsite => ", err);
this.closeCoWebsite();
}); });
} }
@ -200,56 +202,63 @@ class CoWebsiteManager {
public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void { public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
this.load(); this.load();
this.cowebsiteMainDom.innerHTML = ``; this.cowebsiteMainDom.innerHTML = ``;
this.currentOperationPromise = this.currentOperationPromise.then(() => callback(this.cowebsiteMainDom)).then(() => { this.currentOperationPromise = this.currentOperationPromise
.then(() => callback(this.cowebsiteMainDom))
.then(() => {
this.open(); this.open();
setTimeout(() => { setTimeout(() => {
this.fire(); this.fire();
}, animationTime); }, animationTime);
}).catch((err) => { })
console.error('Error insertCoWebsite => ', err); .catch((err) => {
console.error("Error insertCoWebsite => ", err);
this.closeCoWebsite(); this.closeCoWebsite();
}); });
} }
public closeCoWebsite(): Promise<void> { public closeCoWebsite(): Promise<void> {
this.currentOperationPromise = this.currentOperationPromise.then(() => new Promise((resolve, reject) => { this.currentOperationPromise = this.currentOperationPromise.then(
() =>
new Promise((resolve, reject) => {
if (this.opened === iframeStates.closed) resolve(); //this method may be called twice, in case of iframe error for example if (this.opened === iframeStates.closed) resolve(); //this method may be called twice, in case of iframe error for example
this.close(); this.close();
this.fire(); this.fire();
const iframe = this.cowebsiteDiv.querySelector('iframe'); const iframe = this.cowebsiteDiv.querySelector("iframe");
if (iframe) { if (iframe) {
iframeListener.unregisterIframe(iframe); iframeListener.unregisterIframe(iframe);
} }
setTimeout(() => { setTimeout(() => {
this.cowebsiteMainDom.innerHTML = ``; this.cowebsiteMainDom.innerHTML = ``;
resolve(); resolve();
}, animationTime) }, animationTime);
})); })
);
return this.currentOperationPromise; return this.currentOperationPromise;
} }
public getGameSize(): {width: number, height: number} { public getGameSize(): { width: number; height: number } {
if (this.opened !== iframeStates.opened) { if (this.opened !== iframeStates.opened) {
return { return {
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight height: window.innerHeight,
} };
} }
if (!this.verticalMode) { if (!this.verticalMode) {
return { return {
width: window.innerWidth - this.width, width: window.innerWidth - this.width,
height: window.innerHeight height: window.innerHeight,
} };
} else { } else {
return { return {
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight - this.height, height: window.innerHeight - this.height,
} };
} }
} }
private fire(): void { private fire(): void {
this._onResize.next(); this._onResize.next();
waScaleManager.applyNewSize();
} }
private fullscreen(): void { private fullscreen(): void {
@ -257,13 +266,13 @@ class CoWebsiteManager {
this.resetStyle(); this.resetStyle();
this.fire(); this.fire();
//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.verticalMode ? this.height = window.innerHeight : 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. //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";
} }
} }
} }