FIX: cowebsite transitions are now queued to prevent conflicts

This commit is contained in:
kharhamel 2020-11-10 15:22:30 +01:00
parent 85f2dabe6c
commit 1080328afa
1 changed files with 11 additions and 4 deletions

View File

@ -16,6 +16,11 @@ class CoWebsiteManager {
private opened: iframeStates = iframeStates.closed;
private observers = new Array<CoWebsiteStateChangedCallback>();
/**
* 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
*/
private currentOperationPromise: Promise<void> = Promise.resolve();
private close(): HTMLDivElement {
const cowebsiteDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId);
@ -52,7 +57,7 @@ class CoWebsiteManager {
const onTimeoutPromise = new Promise((resolve) => {
setTimeout(() => resolve(), 2000);
});
Promise.race([onloadPromise, onTimeoutPromise]).then(() => {
this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => {
this.open();
setTimeout(() => {
this.fire();
@ -65,7 +70,7 @@ class CoWebsiteManager {
*/
public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
const cowebsiteDiv = this.load();
callback(cowebsiteDiv).then(() => {
this.currentOperationPromise = this.currentOperationPromise.then(() => callback(cowebsiteDiv)).then(() => {
this.open();
setTimeout(() => {
this.fire();
@ -74,14 +79,16 @@ class CoWebsiteManager {
}
public closeCoWebsite(): Promise<void> {
return 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
const cowebsiteDiv = this.close();
this.fire();
setTimeout(() => {
resolve();
setTimeout(() => cowebsiteDiv.innerHTML = '', 500)
}, animationTime)
});
}));
return this.currentOperationPromise;
}
public getGameSize(): {width: number, height: number} {