Fix joystick postion
- Aply new size after open and close iframe and permit to keep the good position of the joystick on the WorkAdventure screen
This commit is contained in:
Gregoire Parant
parent
238d5c22db
commit
190007a21f
|
|
@ -1,12 +1,12 @@
|
|||
import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
|
||||
import {waScaleManager} from "../Services/WaScaleManager";
|
||||
import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
|
||||
import VirtualJoystick from "phaser3-rex-plugins/plugins/virtualjoystick.js";
|
||||
import { waScaleManager } from "../Services/WaScaleManager";
|
||||
import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
|
||||
|
||||
//the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
|
||||
export const joystickBaseKey = 'joystickBase';
|
||||
export const joystickBaseImg = 'resources/objects/joystickSplitted.png';
|
||||
export const joystickThumbKey = 'joystickThumb';
|
||||
export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png';
|
||||
export const joystickBaseKey = "joystickBase";
|
||||
export const joystickBaseImg = "resources/objects/joystickSplitted.png";
|
||||
export const joystickThumbKey = "joystickThumb";
|
||||
export const joystickThumbImg = "resources/objects/smallHandleFilledGrey.png";
|
||||
|
||||
const baseSize = 50;
|
||||
const thumbSize = 25;
|
||||
|
|
@ -20,15 +20,27 @@ export class MobileJoystick extends VirtualJoystick {
|
|||
x: -1000,
|
||||
y: -1000,
|
||||
radius: radius * window.devicePixelRatio,
|
||||
base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX),
|
||||
thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX),
|
||||
base: scene.add
|
||||
.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,
|
||||
dir: "8dir",
|
||||
});
|
||||
this.visible = 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) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -44,7 +56,7 @@ export class MobileJoystick extends VirtualJoystick {
|
|||
this.enable = false;
|
||||
}
|
||||
});
|
||||
this.scene.input.on('pointerup', () => {
|
||||
this.scene.input.on("pointerup", () => {
|
||||
this.visible = false;
|
||||
this.enable = false;
|
||||
});
|
||||
|
|
@ -52,10 +64,16 @@ export class MobileJoystick extends VirtualJoystick {
|
|||
this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
|
||||
}
|
||||
|
||||
private resize() {
|
||||
this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio);
|
||||
this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio);
|
||||
this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio);
|
||||
public resize() {
|
||||
this.base.setDisplaySize(this.getDisplaySizeByElement(baseSize), this.getDisplaySizeByElement(baseSize));
|
||||
this.thumb.setDisplaySize(this.getDisplaySizeByElement(thumbSize), this.getDisplaySizeByElement(thumbSize));
|
||||
this.setRadius(
|
||||
(radius / (waScaleManager.zoomModifier * waScaleManager.uiScalingFactor)) * window.devicePixelRatio
|
||||
);
|
||||
}
|
||||
|
||||
private getDisplaySizeByElement(element: integer): integer {
|
||||
return (element / (waScaleManager.zoomModifier * waScaleManager.uiScalingFactor)) * window.devicePixelRatio;
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import {HtmlUtils} from "./HtmlUtils";
|
||||
import {Subject} from "rxjs";
|
||||
import {iframeListener} from "../Api/IframeListener";
|
||||
import {touchScreenManager} from "../Touch/TouchScreenManager";
|
||||
import { HtmlUtils } from "./HtmlUtils";
|
||||
import { Subject } from "rxjs";
|
||||
import { iframeListener } from "../Api/IframeListener";
|
||||
import { touchScreenManager } from "../Touch/TouchScreenManager";
|
||||
import { waScaleManager } from "../Phaser/Services/WaScaleManager";
|
||||
|
||||
enum iframeStates {
|
||||
closed = 1,
|
||||
|
|
@ -9,13 +10,13 @@ enum iframeStates {
|
|||
opened,
|
||||
}
|
||||
|
||||
const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
|
||||
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.
|
||||
export const cowebsiteCloseButtonId = 'cowebsite-close';
|
||||
const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
|
||||
const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
|
||||
const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
|
||||
const cowebsiteDivId = "cowebsite"; // the id of the whole container.
|
||||
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.
|
||||
export const cowebsiteCloseButtonId = "cowebsite-close";
|
||||
const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
|
||||
const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open";
|
||||
const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close";
|
||||
const animationTime = 500; //time used by the css transitions, in ms.
|
||||
|
||||
interface TouchMoveCoordinates {
|
||||
|
|
@ -24,7 +25,6 @@ interface TouchMoveCoordinates {
|
|||
}
|
||||
|
||||
class CoWebsiteManager {
|
||||
|
||||
private opened: iframeStates = iframeStates.closed;
|
||||
|
||||
private _onResize: Subject<void> = new Subject();
|
||||
|
|
@ -38,14 +38,14 @@ class CoWebsiteManager {
|
|||
private resizing: boolean = false;
|
||||
private cowebsiteMainDom: HTMLDivElement;
|
||||
private cowebsiteAsideDom: HTMLDivElement;
|
||||
private previousTouchMoveCoordinates: TouchMoveCoordinates|null = null; //only use on touchscreens to track touch movement
|
||||
private previousTouchMoveCoordinates: TouchMoveCoordinates | null = null; //only use on touchscreens to track touch movement
|
||||
|
||||
get width(): number {
|
||||
return this.cowebsiteDiv.clientWidth;
|
||||
}
|
||||
|
||||
set width(width: number) {
|
||||
this.cowebsiteDiv.style.width = width+'px';
|
||||
this.cowebsiteDiv.style.width = width + "px";
|
||||
}
|
||||
|
||||
get height(): number {
|
||||
|
|
@ -53,7 +53,7 @@ class CoWebsiteManager {
|
|||
}
|
||||
|
||||
set height(height: number) {
|
||||
this.cowebsiteDiv.style.height = height+'px';
|
||||
this.cowebsiteDiv.style.height = height + "px";
|
||||
}
|
||||
|
||||
get verticalMode(): boolean {
|
||||
|
|
@ -75,56 +75,55 @@ class CoWebsiteManager {
|
|||
this.initResizeListeners(false);
|
||||
|
||||
const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
|
||||
buttonCloseFrame.addEventListener('click', () => {
|
||||
buttonCloseFrame.addEventListener("click", () => {
|
||||
buttonCloseFrame.blur();
|
||||
this.closeCoWebsite();
|
||||
});
|
||||
|
||||
const buttonFullScreenFrame = HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId);
|
||||
buttonFullScreenFrame.addEventListener('click', () => {
|
||||
buttonFullScreenFrame.addEventListener("click", () => {
|
||||
buttonFullScreenFrame.blur();
|
||||
this.fullscreen();
|
||||
});
|
||||
}
|
||||
|
||||
private initResizeListeners(touchMode:boolean) {
|
||||
const movecallback = (event:MouseEvent|TouchEvent) => {
|
||||
private initResizeListeners(touchMode: boolean) {
|
||||
const movecallback = (event: MouseEvent | TouchEvent) => {
|
||||
let x, y;
|
||||
if (event.type === 'mousemove') {
|
||||
if (event.type === "mousemove") {
|
||||
x = (event as MouseEvent).movementX / this.getDevicePixelRatio();
|
||||
y = (event as MouseEvent).movementY / this.getDevicePixelRatio();
|
||||
} else {
|
||||
const touchEvent = (event as TouchEvent).touches[0];
|
||||
const last = {x: touchEvent.pageX, y: touchEvent.pageY};
|
||||
const last = { x: touchEvent.pageX, y: touchEvent.pageY };
|
||||
const previous = this.previousTouchMoveCoordinates as TouchMoveCoordinates;
|
||||
this.previousTouchMoveCoordinates = last;
|
||||
x = last.x - previous.x;
|
||||
y = last.y - previous.y;
|
||||
}
|
||||
|
||||
|
||||
this.verticalMode ? this.height += y : this.width -= x;
|
||||
this.fire();
|
||||
}
|
||||
|
||||
this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => {
|
||||
this.verticalMode ? (this.height += y) : (this.width -= x);
|
||||
this.fire();
|
||||
};
|
||||
|
||||
this.cowebsiteAsideDom.addEventListener(touchMode ? "touchstart" : "mousedown", (event) => {
|
||||
this.resizing = true;
|
||||
this.getIframeDom().style.display = 'none';
|
||||
this.getIframeDom().style.display = "none";
|
||||
if (touchMode) {
|
||||
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 (touchMode) {
|
||||
this.previousTouchMoveCoordinates = null;
|
||||
}
|
||||
document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
|
||||
this.getIframeDom().style.display = 'block';
|
||||
document.removeEventListener(touchMode ? "touchmove" : "mousemove", movecallback);
|
||||
this.getIframeDom().style.display = "block";
|
||||
this.resizing = false;
|
||||
});
|
||||
}
|
||||
|
|
@ -132,34 +131,34 @@ class CoWebsiteManager {
|
|||
private getDevicePixelRatio(): number {
|
||||
//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'
|
||||
return window.navigator.userAgent.includes('Firefox') ? 1 : window.devicePixelRatio;
|
||||
return window.navigator.userAgent.includes("Firefox") ? 1 : window.devicePixelRatio;
|
||||
}
|
||||
|
||||
private close(): void {
|
||||
this.cowebsiteDiv.classList.remove('loaded'); //edit the css class to trigger the transition
|
||||
this.cowebsiteDiv.classList.add('hidden');
|
||||
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
|
||||
this.cowebsiteDiv.classList.add('loading');
|
||||
this.cowebsiteDiv.classList.remove("hidden"); //edit the css class to trigger the transition
|
||||
this.cowebsiteDiv.classList.add("loading");
|
||||
this.opened = iframeStates.loading;
|
||||
}
|
||||
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.resetStyle();
|
||||
}
|
||||
|
||||
public resetStyle() {
|
||||
this.cowebsiteDiv.style.width = '';
|
||||
this.cowebsiteDiv.style.height = '';
|
||||
this.cowebsiteDiv.style.width = "";
|
||||
this.cowebsiteDiv.style.height = "";
|
||||
}
|
||||
|
||||
private getIframeDom(): HTMLIFrameElement {
|
||||
const iframe = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId).querySelector('iframe');
|
||||
if (!iframe) throw new Error('Could not find iframe!');
|
||||
const iframe = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteDivId).querySelector("iframe");
|
||||
if (!iframe) throw new Error("Could not find iframe!");
|
||||
return iframe;
|
||||
}
|
||||
|
||||
|
|
@ -167,9 +166,9 @@ class CoWebsiteManager {
|
|||
this.load();
|
||||
this.cowebsiteMainDom.innerHTML = ``;
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.id = 'cowebsite-iframe';
|
||||
iframe.src = (new URL(url, base)).toString();
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.id = "cowebsite-iframe";
|
||||
iframe.src = new URL(url, base).toString();
|
||||
if (allowPolicy) {
|
||||
iframe.allow = allowPolicy;
|
||||
}
|
||||
|
|
@ -183,15 +182,18 @@ class CoWebsiteManager {
|
|||
const onTimeoutPromise = new Promise<void>((resolve) => {
|
||||
setTimeout(() => resolve(), 2000);
|
||||
});
|
||||
this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => {
|
||||
this.open();
|
||||
setTimeout(() => {
|
||||
this.fire();
|
||||
}, animationTime)
|
||||
}).catch((err) => {
|
||||
console.error('Error loadCoWebsite => ', err);
|
||||
this.closeCoWebsite()
|
||||
});
|
||||
this.currentOperationPromise = this.currentOperationPromise
|
||||
.then(() => Promise.race([onloadPromise, onTimeoutPromise]))
|
||||
.then(() => {
|
||||
this.open();
|
||||
setTimeout(() => {
|
||||
this.fire();
|
||||
}, animationTime);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Error loadCoWebsite => ", err);
|
||||
this.closeCoWebsite();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -200,56 +202,63 @@ class CoWebsiteManager {
|
|||
public insertCoWebsite(callback: (cowebsite: HTMLDivElement) => Promise<void>): void {
|
||||
this.load();
|
||||
this.cowebsiteMainDom.innerHTML = ``;
|
||||
this.currentOperationPromise = this.currentOperationPromise.then(() => callback(this.cowebsiteMainDom)).then(() => {
|
||||
this.open();
|
||||
setTimeout(() => {
|
||||
this.fire();
|
||||
}, animationTime);
|
||||
}).catch((err) => {
|
||||
console.error('Error insertCoWebsite => ', err);
|
||||
this.closeCoWebsite();
|
||||
});
|
||||
this.currentOperationPromise = this.currentOperationPromise
|
||||
.then(() => callback(this.cowebsiteMainDom))
|
||||
.then(() => {
|
||||
this.open();
|
||||
setTimeout(() => {
|
||||
this.fire();
|
||||
}, animationTime);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Error insertCoWebsite => ", err);
|
||||
this.closeCoWebsite();
|
||||
});
|
||||
}
|
||||
|
||||
public closeCoWebsite(): Promise<void> {
|
||||
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
|
||||
this.close();
|
||||
this.fire();
|
||||
const iframe = this.cowebsiteDiv.querySelector('iframe');
|
||||
if (iframe) {
|
||||
iframeListener.unregisterIframe(iframe);
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.cowebsiteMainDom.innerHTML = ``;
|
||||
resolve();
|
||||
}, animationTime)
|
||||
}));
|
||||
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
|
||||
this.close();
|
||||
this.fire();
|
||||
const iframe = this.cowebsiteDiv.querySelector("iframe");
|
||||
if (iframe) {
|
||||
iframeListener.unregisterIframe(iframe);
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.cowebsiteMainDom.innerHTML = ``;
|
||||
resolve();
|
||||
}, animationTime);
|
||||
})
|
||||
);
|
||||
return this.currentOperationPromise;
|
||||
}
|
||||
|
||||
public getGameSize(): {width: number, height: number} {
|
||||
public getGameSize(): { width: number; height: number } {
|
||||
if (this.opened !== iframeStates.opened) {
|
||||
return {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
}
|
||||
height: window.innerHeight,
|
||||
};
|
||||
}
|
||||
if (!this.verticalMode) {
|
||||
return {
|
||||
width: window.innerWidth - this.width,
|
||||
height: window.innerHeight
|
||||
}
|
||||
height: window.innerHeight,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight - this.height,
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
private fire(): void {
|
||||
this._onResize.next();
|
||||
waScaleManager.applyNewSize();
|
||||
}
|
||||
|
||||
private fullscreen(): void {
|
||||
|
|
@ -257,13 +266,13 @@ class CoWebsiteManager {
|
|||
this.resetStyle();
|
||||
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';
|
||||
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "inline";
|
||||
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "none";
|
||||
} 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.
|
||||
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'none';
|
||||
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'inline';
|
||||
HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "none";
|
||||
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "inline";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue