melonjs 11.0.0 → 13.1.0

package/src/system/device.js

@@ -1,22 +1,22 @@
-import { hasAudio } from "./../audio/audio.js";
 import { getParent } from "./../video/video.js";
 import save from "./save.js";
 import { prefixed } from "./../utils/agent.js";
-import state from "./../state/state.js";
-import * as event from "./event.js";
 import { DOMContentLoaded } from "./dom.js";
+import * as device_platform from "./platform.js"; // export * as name1 from …; // ECMAScript® 2020
+
+/**
+ * device type and capabilities
+ * @namespace device
+ */
 
-// private properties
 let accelInitialized = false;
 let deviceOrientationInitialized = false;
-
 // swipe utility fn & flag
 let swipeEnabled = true;
+// a cache DOMRect object
+let domRect = {left: 0, top: 0, x: 0, y: 0, width: 0, height: 0, right: 0, bottom: 0};
 
-/**
- * @ignore
- */
-function _disableSwipeFn(e) {
+function disableSwipeFn(e) {
     e.preventDefault();
     if (typeof globalThis.scroll === "function") {
         globalThis.scroll(0, 0);
@@ -24,1044 +24,877 @@ function _disableSwipeFn(e) {
     return false;
 };
 
-// a cache DOMRect object
-let _domRect = {left: 0, top: 0, x: 0, y: 0, width: 0, height: 0, right: 0, bottom: 0};
+function hasLocalStorage() {
+    try {
+        return !!globalThis.localStorage;
+    } catch (e) {
+        // the above generates an exception when cookies are blocked
+        return false;
+    }
+}
+
+function hasOffscreenCanvas() {
+    try {
+        // some browser (e.g. Safari) implements WebGL1 and WebGL2 contexts only
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=801176
+        return (typeof globalThis.OffscreenCanvas !== "undefined") && ((new globalThis.OffscreenCanvas(0, 0).getContext( "2d" )) !== null);
+    } catch (e) {
+        return false;
+    }
+}
 
 /**
- * detect the device type
- * @ignore
+ * used by [un]watchAccelerometer()
  */
-function _detectDevice() {
-    // iOS Device ?
-    device.iOS = /iPhone|iPad|iPod/i.test(device.ua);
-    // Android Device ?
-    device.android = /Android/i.test(device.ua);
-    device.android2 = /Android 2/i.test(device.ua);
-    // Linux platform
-    device.linux = /Linux/i.test(device.ua);
-    // Chrome OS ?
-    device.chromeOS = /CrOS/.test(device.ua);
-    // Windows Device ?
-    device.wp = /Windows Phone/i.test(device.ua);
-    // Blackberry device ?
-    device.BlackBerry = /BlackBerry/i.test(device.ua);
-    // Kindle device ?
-    device.Kindle = /Kindle|Silk.*Mobile Safari/i.test(device.ua);
-    // Mobile platform
-    device.isMobile = /Mobi/i.test(device.ua) ||
-                         device.iOS ||
-                         device.android ||
-                         device.wp ||
-                         device.BlackBerry ||
-                         device.Kindle || false;
-    // ejecta
-    device.ejecta = (typeof globalThis.ejecta !== "undefined");
-    // Wechat
-    device.isWeixin = /MicroMessenger/i.test(device.ua);
+function onDeviceMotion(e) {
+    // Accelerometer information
+    accelerationX = e.accelerationIncludingGravity.x;
+    accelerationY = e.accelerationIncludingGravity.y;
+    accelerationZ = e.accelerationIncludingGravity.z;
 };
 
 /**
- * check the device capapbilities
- * @ignore
+ * used by [un]watchDeviceOrientation()
  */
-function _checkCapabilities() {
+export function onDeviceRotate(e) {
+    gamma = e.gamma;
+    beta = e.beta;
+    alpha = e.alpha;
+};
+
+/**
+ * the device platform type
+ * @name platform
+ * @memberof device
+ * @readonly
+ * @public
+ * @type {device.platform}
+ */
+export let platform = device_platform;
 
-    // detect device type/platform
-    _detectDevice();
+/**
+ * True if the browser supports Touch Events
+ * @name touchEvent
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const touchEvent = !!("ontouchstart" in globalThis);
 
-    // Touch/Gesture Event feature detection
-    device.TouchEvent = !!("ontouchstart" in globalThis);
-    device.PointerEvent = !!globalThis.PointerEvent;
-    globalThis.gesture = prefixed("gesture");
+/**
+ * True if the browser supports Pointer Events
+ * @name pointerEvent
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const pointerEvent = !!globalThis.PointerEvent;
+
+/**
+ * Touch capabilities (support either Touch or Pointer events)
+ * @name touch
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const touch = touchEvent || pointerEvent;
 
-    // detect touch capabilities
-    device.touch = device.TouchEvent || device.PointerEvent;
+/**
+ * the maximum number of simultaneous touch contact points are supported by the current device.
+ * @name maxTouchPoints
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ * @example
+ * if (me.device.maxTouchPoints > 1) {
+ *     // device supports multi-touch
+ * }
+ */
+export const maxTouchPoints = touch ? (pointerEvent ? globalThis.navigator.maxTouchPoints || 1 : 10) : 1;
 
-    // max amount of touch points ; always at least return 1 (e.g. headless chrome will return 0)
-    device.maxTouchPoints = device.touch ? (device.PointerEvent ? globalThis.navigator.maxTouchPoints || 1 : 10) : 1;
+/**
+ * W3C standard wheel events
+ * @name wheel
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const wheel = typeof globalThis.document !== "undefined" && "onwheel" in globalThis.document.createElement("div");
 
-    // detect wheel event support
-    // Modern browsers support "wheel", Webkit and IE support at least "mousewheel
-    device.wheel = typeof globalThis.document !== "undefined" && "onwheel" in globalThis.document.createElement("div");
 
-    // pointerlock detection (pointerLockElement can be null when the feature is supported)
-    device.hasPointerLockSupport = typeof globalThis.document !== "undefined" && typeof globalThis.document.pointerLockElement !== "undefined";
+/**
+ * Browser pointerlock api support
+ * @name hasPointerLockSupport
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const hasPointerLockSupport = typeof globalThis.document !== "undefined" && typeof globalThis.document.pointerLockElement !== "undefined";
 
-    // device orientation and motion detection
-    device.hasDeviceOrientation = !!globalThis.DeviceOrientationEvent;
-    device.hasAccelerometer = !!globalThis.DeviceMotionEvent;
+/**
+ * Browser device orientation
+ * @name hasDeviceOrientation
+ * @memberof device
+ * @readonly
+ * @public
+ * @type {boolean}
+ */
+export const hasDeviceOrientation = !!globalThis.DeviceOrientationEvent;
 
-    // support the ScreenOrientation API
-    device.ScreenOrientation = (typeof screen !== "undefined") &&
-                               (typeof screen.orientation !== "undefined");
+/**
+ * Supports the ScreenOrientation API
+ * @name screenOrientation
+ * @memberof device
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/onchange
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const screenOrientation = (typeof screen !== "undefined") && (typeof screen.orientation !== "undefined");
 
-    // fullscreen api detection & polyfill when possible
-    device.hasFullscreenSupport = typeof globalThis.document !== "undefined" && (prefixed("fullscreenEnabled", globalThis.document) || globalThis.document.mozFullScreenEnabled);
+/**
+ * Browser accelerometer capabilities
+ * @name hasAccelerometer
+ * @memberof device
+ * @readonly
+ * @public
+ * @type {boolean}
+ */
+export const hasAccelerometer = !!globalThis.DeviceMotionEvent;
 
-    if (device.hasFullscreenSupport === true) {
-        globalThis.document.exitFullscreen = typeof globalThis.document !== "undefined" && (prefixed("cancelFullScreen", globalThis.document) || prefixed("exitFullscreen", globalThis.document));
-    }
+/**
+ * Browser full screen support
+ * @name hasFullscreenSupport
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const hasFullscreenSupport = typeof globalThis.document !== "undefined" && (prefixed("fullscreenEnabled", globalThis.document) || globalThis.document.mozFullScreenEnabled);
 
+if (hasFullscreenSupport === true) {
+    globalThis.document.exitFullscreen = prefixed("cancelFullScreen", globalThis.document) || prefixed("exitFullscreen", globalThis.document);
+}
 
-    // web Audio detection
-    device.hasWebAudio = !!(globalThis.AudioContext || globalThis.webkitAudioContext);
+/**
+ * Device WebAudio Support
+ * @name hasWebAudio
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const hasWebAudio = !!(globalThis.AudioContext || globalThis.webkitAudioContext);
 
-    try {
-        device.localStorage = !!globalThis.localStorage;
-    } catch (e) {
-        // the above generates an exception when cookies are blocked
-        device.localStorage = false;
+/**
+ * Device HTML5Audio Support
+ * @name hasHTML5Audio
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const hasHTML5Audio = (typeof globalThis.Audio !== "undefined");
+
+/**
+ * Returns true if the browser/device has audio capabilities.
+ * @name sound
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const sound = hasWebAudio || hasHTML5Audio;
+
+/**
+ * Browser Local Storage capabilities <br>
+ * (this flag will be set to false if cookies are blocked)
+ * @name localStorage
+ * @memberof device
+ * @readonly
+ * @public
+ * @type {boolean}
+ */
+export const localStorage = hasLocalStorage();
+
+/**
+ * equals to true if the device browser supports OffScreenCanvas.
+ * @name offscreenCanvas
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const offscreenCanvas = hasOffscreenCanvas();
+
+/**
+ * Browser Base64 decoding capability
+ * @name nativeBase64
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const nativeBase64 = (typeof(globalThis.atob) === "function");
+
+/**
+ * a string representing the preferred language of the user, usually the language of the browser UI.
+ * (will default to "en" if the information is not available)
+ * @name language
+ * @memberof device
+ * @type {string}
+ * @readonly
+ * @public
+ * @see http://www.w3schools.com/tags/ref_language_codes.asp
+ */
+export const language = typeof globalThis.navigator !== "undefined" ? globalThis.navigator.language || globalThis.navigator.browserLanguage || globalThis.navigator.userLanguage || "en" : "en";
+
+/**
+ * Ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
+ * @name devicePixelRatio
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ */
+export const devicePixelRatio = globalThis.devicePixelRatio || 1;
+
+/**
+ * equals to true if a mobile device.
+ * (Android | iPhone | iPad | iPod | BlackBerry | Windows Phone | Kindle)
+ * @name isMobile
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const isMobile = platform.isMobile;
+
+/**
+ * contains the g-force acceleration along the x-axis.
+ * @name accelerationX
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ * @see device.watchAccelerometer
+ */
+export let accelerationX = 0;
+
+/**
+ * contains the g-force acceleration along the y-axis.
+ * @name accelerationY
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ * @see device.watchAccelerometer
+ */
+export let accelerationY = 0;
+
+/**
+ * contains the g-force acceleration along the z-axis.
+ * @name accelerationZ
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ * @see device.watchAccelerometer
+ */
+export let accelerationZ = 0;
+
+/**
+ * Device orientation Gamma property. Gives angle on tilting a portrait held phone left or right
+ * @name gamma
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ * @see device.watchDeviceOrientation
+ */
+export let gamma = 0;
+
+/**
+ * Device orientation Beta property. Gives angle on tilting a portrait held phone forward or backward
+ * @name beta
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ * @see device.watchDeviceOrientation
+ */
+export let beta = 0;
+
+/**
+ * Device orientation Alpha property. Gives angle based on the rotation of the phone around its z axis.
+ * The z-axis is perpendicular to the phone, facing out from the center of the screen.
+ * @name alpha
+ * @memberof device
+ * @type {number}
+ * @readonly
+ * @public
+ * @see device.watchDeviceOrientation
+ */
+export let alpha = 0;
+
+/**
+ * Specify whether to pause the game when losing focus
+ * @name pauseOnBlur
+ * @memberof device
+ * @type {boolean}
+ * @public
+ * @default true
+ */
+export let pauseOnBlur = true;
+
+/**
+ * Specify whether to unpause the game when gaining focus
+ * @name resumeOnFocus
+ * @memberof device
+ * @type {boolean}
+ * @public
+ * @default true
+ */
+export let resumeOnFocus = true;
+
+/**
+ * Specify whether to automatically bring the window to the front
+ * @name autoFocus
+ * @memberof device
+ * @type {boolean}
+ * @public
+ * @default true
+ */
+export let autoFocus = true;
+
+/**
+ * Specify whether to stop the game when losing focus or not.
+ * The engine restarts on focus if this is enabled.
+ * @name stopOnBlur
+ * @memberof device
+ * @type {boolean}
+ * @public
+ * @default false
+ */
+export let stopOnBlur = false;
+
+/**
+* specify a function to execute when the Device is fully loaded and ready
+* @function onReady
+* @memberof device
+* @public
+* @param {Function} fn the function to be executed
+* @example
+* // small game skeleton
+* var game = {
+*    // called by the me.device.onReady function
+*    onload = function () {
+*       // init video
+*       if (!me.video.init('screen', 640, 480, true)) {
+*          alert("Sorry but your browser does not support html 5 canvas.");
+*          return;
+*       }
+*
+*       // initialize the "audio"
+*       me.audio.init("mp3,ogg");
+*
+*       // set callback for ressources loaded event
+*       me.loader.onload = this.loaded.bind(this);
+*
+*       // set all ressources to be loaded
+*       me.loader.preload(game.assets);
+*
+*       // load everything & display a loading screen
+*       me.state.change(me.state.LOADING);
+*    };
+*
+*    // callback when everything is loaded
+*    loaded = function () {
+*       // define stuff
+*       // ....
+*
+*       // change to the menu screen
+*       me.state.change(me.state.PLAY);
+*    }
+* }; // game
+*
+* // "bootstrap"
+* me.device.onReady(function () {
+*    game.onload();
+* });
+*/
+export function onReady(fn) {
+    DOMContentLoaded(fn);
+};
+
+/**
+ * enable/disable swipe on WebView.
+ * @function enableSwipe
+ * @memberof device
+ * @public
+ * @param {boolean} [enable=true] enable or disable swipe.
+ */
+export function enableSwipe(enable) {
+    let moveEvent = pointerEvent ? "pointermove" : (touchEvent ? "touchmove" : "mousemove");
+    if (enable !== false) {
+        if (swipeEnabled === false) {
+            globalThis.document.removeEventListener(moveEvent, disableSwipeFn);
+            swipeEnabled = true;
+        }
+    } else if (swipeEnabled === true) {
+        globalThis.document.addEventListener(moveEvent, disableSwipeFn, { passive: false });
+        swipeEnabled = false;
     }
+};
 
-    try {
-        // some browser (e.g. Safari) implements WebGL1 and WebGL2 contexts only
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=801176
-        device.OffscreenCanvas =
-            (typeof globalThis.OffscreenCanvas !== "undefined") &&
-            ((new OffscreenCanvas(0, 0).getContext( "2d" )) !== null);
-    } catch (e) {
-        device.OffscreenCanvas = false;
+/**
+ * Returns true if the browser/device is in full screen mode.
+ * @function isFullscreen
+ * @memberof device
+ * @public
+ * @returns {boolean}
+ */
+export function isFullscreen() {
+    if (hasFullscreenSupport) {
+        return !!(prefixed("fullscreenElement", document) || document.mozFullScreenElement);
+    } else {
+        return false;
     }
+};
 
-    if (typeof globalThis.addEventListener === "function") {
-        // set pause/stop action on losing focus
-        globalThis.addEventListener("blur", function () {
-            if (device.stopOnBlur) {
-                state.stop(true);
-            }
-            if (device.pauseOnBlur) {
-                state.pause(true);
-            }
-        }, false);
-        // set restart/resume action on gaining focus
-        globalThis.addEventListener("focus", function () {
-            if (device.stopOnBlur) {
-                state.restart(true);
-            }
-            if (device.resumeOnFocus) {
-                state.resume(true);
-            }
-            // force focus if autofocus is on
-            if (device.autoFocus) {
-                device.focus();
-            }
-        }, false);
+/**
+ * Triggers a fullscreen request. Requires fullscreen support from the browser/device.
+ * @function requestFullscreen
+ * @memberof device
+ * @public
+ * @param {object} [element=default canvas object] the element to be set in full-screen mode.
+ * @example
+ * // add a keyboard shortcut to toggle Fullscreen mode on/off
+ * me.input.bindKey(me.input.KEY.F, "toggleFullscreen");
+ * me.event.on(me.event.KEYDOWN, function (action, keyCode, edge) {
+ *    // toggle fullscreen on/off
+ *    if (action === "toggleFullscreen") {
+ *       me.device.requestFullscreen();
+ *    } else {
+ *       me.device.exitFullscreen();
+ *    }
+ * });
+ */
+export function requestFullscreen(element) {
+    if (hasFullscreenSupport && !isFullscreen()) {
+        element = element || getParent();
+        element.requestFullscreen = prefixed("requestFullscreen", element) || element.mozRequestFullScreen;
+        element.requestFullscreen();
     }
+};
 
-    if (typeof globalThis.document !== "undefined") {
-        // Set the name of the hidden property and the change event for visibility
-        var hidden, visibilityChange;
-        if (typeof globalThis.document.hidden !== "undefined") {
-            // Opera 12.10 and Firefox 18 and later support
-            hidden = "hidden";
-            visibilityChange = "visibilitychange";
-        } else if (typeof globalThis.document.mozHidden !== "undefined") {
-            hidden = "mozHidden";
-            visibilityChange = "mozvisibilitychange";
-        } else if (typeof globalThis.document.msHidden !== "undefined") {
-            hidden = "msHidden";
-            visibilityChange = "msvisibilitychange";
-        } else if (typeof globalThis.document.webkitHidden !== "undefined") {
-            hidden = "webkitHidden";
-            visibilityChange = "webkitvisibilitychange";
+/**
+ * Exit fullscreen mode. Requires fullscreen support from the browser/device.
+ * @function exitFullscreen
+ * @memberof device
+ * @public
+ */
+export function exitFullscreen() {
+    if (hasFullscreenSupport && isFullscreen()) {
+        document.exitFullscreen();
+    }
+};
+
+/**
+ * Return a string representing the orientation of the device screen.
+ * It can be "any", "natural", "landscape", "portrait", "portrait-primary", "portrait-secondary", "landscape-primary", "landscape-secondary"
+ * @function getScreenOrientation
+ * @memberof device
+ * @public
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
+ * @returns {string} the screen orientation
+ */
+export function getScreenOrientation() {
+    const PORTRAIT = "portrait";
+    const LANDSCAPE = "landscape";
+
+    let screen = globalThis.screen;
+
+    // first try using "standard" values
+    if (screenOrientation === true) {
+        let orientation = prefixed("orientation", screen);
+        if (typeof orientation !== "undefined" && typeof orientation.type === "string") {
+            // Screen Orientation API specification
+            return orientation.type;
+        } else if (typeof orientation === "string") {
+            // moz/ms-orientation are strings
+            return orientation;
         }
+    }
 
-        // register on the event if supported
-        if (typeof (visibilityChange) === "string") {
-            // add the corresponding event listener
-            globalThis.document.addEventListener(visibilityChange,
-                function () {
-                    if (globalThis.document[hidden]) {
-                        if (device.stopOnBlur) {
-                            state.stop(true);
-                        }
-                        if (device.pauseOnBlur) {
-                            state.pause(true);
-                        }
-                    } else {
-                        if (device.stopOnBlur) {
-                            state.restart(true);
-                        }
-                        if (device.resumeOnFocus) {
-                            state.resume(true);
-                        }
-                    }
-                }, false
-            );
+    // check using the deprecated API
+    if (typeof globalThis.orientation === "number") {
+        return (Math.abs(globalThis.orientation) === 90) ? LANDSCAPE : PORTRAIT;
+    }
+
+    // fallback to window size check
+    return (globalThis.outerWidth > globalThis.outerHeight) ? LANDSCAPE : PORTRAIT;
+};
+
+/**
+ * locks the device screen into the specified orientation.<br>
+ * This method only works for installed Web apps or for Web pages in full-screen mode.
+ * @function lockOrientation
+ * @memberof device
+ * @public
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
+ * @param {string|string[]} orientation The orientation into which to lock the screen.
+ * @returns {boolean} true if the orientation was unsuccessfully locked
+ */
+export function lockOrientation(orientation) {
+    let screen = globalThis.screen;
+    if (typeof screen !== "undefined") {
+        let _lockOrientation = prefixed("lockOrientation", screen);
+        if (typeof _lockOrientation !== "undefined") {
+            return _lockOrientation(orientation);
         }
     }
+    return false;
+};
 
-    // Mobile browser hacks
-    if (device.isMobile) {
-        // Prevent the webview from moving on a swipe
-        device.enableSwipe(false);
+/**
+ * unlocks the device screen into the specified orientation.<br>
+ * This method only works for installed Web apps or for Web pages in full-screen mode.
+ * @function unlockOrientation
+ * @memberof device
+ * @public
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
+ * @returns {boolean} true if the orientation was unsuccessfully unlocked
+ */
+export function unlockOrientation() {
+    let screen = globalThis.screen;
+    if (typeof screen !== "undefined") {
+        let _unlockOrientation = prefixed("unlockOrientation", screen);
+        if (typeof _unlockOrientation !== "undefined") {
+            return _unlockOrientation();
+        }
     }
+    return false;
+};
 
+/**
+ * return true if the device screen orientation is in Portrait mode
+ * @function isPortrait
+ * @memberof device
+ * @public
+ * @returns {boolean}
+ */
+export function isPortrait() {
+    return getScreenOrientation().includes("portrait");
 };
 
+/**
+ * return true if the device screen orientation is in Portrait mode
+ * @function isLandscape
+ * @memberof device
+ * @public
+ * @returns {boolean}
+ */
+export function isLandscape() {
+    return getScreenOrientation().includes("landscape");
+};
 
-// Initialize me.timer on Boot event
-event.on(event.BOOT, () => {
-    _checkCapabilities();
-});
+/**
+ * return the device storage
+ * @function getStorage
+ * @memberof device
+ * @public
+ * @see save
+ * @param {string} [type="local"]
+ * @returns {object} a reference to the device storage
+ */
+export function getStorage(type = "local") {
+    switch (type) {
+        case "local" :
+            return save;
 
+        default :
+            throw new Error("storage type " + type + " not supported");
+    }
+};
 
-// public export
 /**
- * The device capabilities and specific events
- *
- * @namespace
+ * return the parent DOM element for the given parent name or HTMLElement object
+ * @function getParentElement
+ * @memberof device
+ * @public
+ * @param {string|HTMLElement} element the parent element name or a HTMLElement object
+ * @returns {HTMLElement} the parent Element
  */
-let device = {
-
-    /**
-     * the `ua` read-only property returns the user agent string for the current browser.
-     * @type {string}
-     * @readonly
-     * @name ua
-     */
-    ua : typeof globalThis.navigator !== "undefined" ? globalThis.navigator.userAgent : "",
-
-    /**
-     * Browser Local Storage capabilities <br>
-     * (this flag will be set to false if cookies are blocked)
-     * @type {boolean}
-     * @readonly
-     * @name localStorage
-     */
-    localStorage : false,
-
-    /**
-     * Browser accelerometer capabilities
-     * @type {boolean}
-     * @readonly
-     * @name hasAccelerometer
-     */
-    hasAccelerometer : false,
-
-    /**
-     * Browser device orientation
-     * @type {boolean}
-     * @readonly
-     * @name hasDeviceOrientation
-     */
-    hasDeviceOrientation : false,
-
-    /**
-     * Supports the ScreenOrientation API
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/onchange
-     * @type {boolean}
-     * @readonly
-     * @name ScreenOrientation
-     */
-    ScreenOrientation : false,
-
-    /**
-     * Browser full screen support
-     * @type {boolean}
-     * @readonly
-     * @name hasFullscreenSupport
-     */
-    hasFullscreenSupport : false,
-
-    /**
-     * Browser pointerlock api support
-     * @type {boolean}
-     * @readonly
-     * @name hasPointerLockSupport
-     */
-    hasPointerLockSupport : false,
-
-    /**
-     * Device WebAudio Support
-     * @type {boolean}
-     * @readonly
-     * @name hasWebAudio
-     */
-    hasWebAudio : false,
-
-    /**
-     * Browser Base64 decoding capability
-     * @type {boolean}
-     * @readonly
-     * @name nativeBase64
-     */
-    nativeBase64 : (typeof(globalThis.atob) === "function"),
-
-    /**
-     * Return the maximum number of simultaneous touch contact points are supported by the current device.
-     * @type {number}
-     * @readonly
-     * @name maxTouchPoints
-     * @example
-     * if (me.device.maxTouchPoints > 1) {
-     *     // device supports multi-touch
-     * }
-     */
-    maxTouchPoints : 1,
-
-    /**
-     * Touch capabilities
-     * @type {boolean}
-     * @readonly
-     * @name touch
-     */
-    touch : false,
-
-    /**
-     * W3C standard wheel events
-     * @type {boolean}
-     * @readonly
-     * @name wheel
-     */
-    wheel : false,
-
-    /**
-     * equals to true if a mobile device <br>
-     * (Android | iPhone | iPad | iPod | BlackBerry | Windows Phone | Kindle)
-     * @type {boolean}
-     * @readonly
-     * @name isMobile
-     */
-    isMobile : false,
-
-    /**
-     * equals to true if the device is an iOS platform.
-     * @type {boolean}
-     * @readonly
-     * @name iOS
-     */
-    iOS : false,
-
-    /**
-     * equals to true if the device is an Android platform.
-     * @type {boolean}
-     * @readonly
-     * @name android
-     */
-    android : false,
-
-    /**
-     * equals to true if the device is an Android 2.x platform.
-     * @type {boolean}
-     * @readonly
-     * @name android2
-     */
-    android2 : false,
-
-    /**
-     * equals to true if the device is a Linux platform.
-     * @type {boolean}
-     * @readonly
-     * @name linux
-     */
-    linux : false,
-
-    /**
-     * equals to true if the game is running under Ejecta.
-     * @type {boolean}
-     * @readonly
-     * @see http://impactjs.com/ejecta
-     * @name ejecta
-     */
-    ejecta : false,
-
-    /**
-     * equals to true if the  is running under Wechat.
-     * @type {boolean}
-     * @readonly
-     * @name isWeixin
-     */
-    isWeixin : false,
-
-    /**
-     * equals to true if running under node.js
-     * @type {boolean}
-     * @readonly
-     * @name nodeJS
-     */
-    nodeJS : (typeof globalThis.process !== "undefined") && (typeof globalThis.process.release !== "undefined") && (globalThis.process.release.name === "node"),
-
-    /**
-     * equals to true if the device is running on ChromeOS.
-     * @type {boolean}
-     * @readonly
-     * @name chromeOS
-     */
-    chromeOS : false,
-
-    /**
-     * equals to true if the device is a Windows Phone platform.
-     * @type {boolean}
-     * @readonly
-     * @name wp
-     */
-    wp : false,
-
-    /**
-     * equals to true if the device is a BlackBerry platform.
-     * @type {boolean}
-     * @readonly
-     * @name BlackBerry
-     */
-    BlackBerry : false,
-
-    /**
-     * equals to true if the device is a Kindle platform.
-     * @type {boolean}
-     * @readonly
-     * @name Kindle
-     */
-    Kindle : false,
-
-    /**
-     * contains the g-force acceleration along the x-axis.
-     * @public
-     * @type {number}
-     * @readonly
-     * @name accelerationX
-     * @see device.watchAccelerometer
-     */
-    accelerationX : 0,
-
-    /**
-     * contains the g-force acceleration along the y-axis.
-     * @public
-     * @type {number}
-     * @readonly
-     * @name accelerationY
-     * @see device.watchAccelerometer
-     */
-    accelerationY : 0,
-
-    /**
-     * contains the g-force acceleration along the z-axis.
-     * @public
-     * @type {number}
-     * @readonly
-     * @name accelerationZ
-     * @see device.watchAccelerometer
-     */
-    accelerationZ : 0,
-
-    /**
-     * Device orientation Gamma property. Gives angle on tilting a portrait held phone left or right
-     * @public
-     * @type {number}
-     * @readonly
-     * @name gamma
-     * @see device.watchDeviceOrientation
-     */
-    gamma : 0,
-
-    /**
-     * Device orientation Beta property. Gives angle on tilting a portrait held phone forward or backward
-     * @public
-     * @type {number}
-     * @readonly
-     * @name beta
-     * @see device.watchDeviceOrientation
-     */
-    beta: 0,
-
-    /**
-     * Device orientation Alpha property. Gives angle based on the rotation of the phone around its z axis.
-     * The z-axis is perpendicular to the phone, facing out from the center of the screen.
-     * @public
-     * @type {number}
-     * @readonly
-     * @name alpha
-     * @see device.watchDeviceOrientation
-     */
-    alpha : 0,
-
-    /**
-     * a string representing the preferred language of the user, usually the language of the browser UI.
-     * (will default to "en" if the information is not available)
-     * @public
-     * @type {string}
-     * @readonly
-     * @see http://www.w3schools.com/tags/ref_language_codes.asp
-     * @name language
-     */
-    language : typeof globalThis.navigator !== "undefined" ? globalThis.navigator.language || globalThis.navigator.browserLanguage || globalThis.navigator.userLanguage || "en" : "en",
-
-    /**
-     * Specify whether to pause the game when losing focus
-     * @type {boolean}
-     * @default true
-     */
-    pauseOnBlur : true,
-
-    /**
-     * Specify whether to unpause the game when gaining focus
-     * @type {boolean}
-     * @default true
-     */
-    resumeOnFocus : true,
-
-    /**
-     * Specify whether to automatically bring the window to the front
-     * @type {boolean}
-     * @default true
-     */
-    autoFocus : true,
-
-    /**
-     * Specify whether to stop the game when losing focus or not.
-     * The engine restarts on focus if this is enabled.
-     * @type {boolean}
-     * @default false
-     */
-    stopOnBlur : false,
-
-    /**
-     * equals to true if the device browser supports OffScreenCanvas.
-     * @type {boolean}
-     * @readonly
-     * @name OffScreenCanvas
-     */
-    OffscreenCanvas : false,
-
-
-   /**
-    * specify a function to execute when the Device is fully loaded and ready
-    * @function device.onReady
-    * @param {Function} fn the function to be executed
-    * @example
-    * // small game skeleton
-    * var game = {
-    *    // called by the me.device.onReady function
-    *    onload : function () {
-    *       // init video
-    *       if (!me.video.init('screen', 640, 480, true)) {
-    *          alert("Sorry but your browser does not support html 5 canvas.");
-    *          return;
-    *       }
-    *
-    *       // initialize the "audio"
-    *       me.audio.init("mp3,ogg");
-    *
-    *       // set callback for ressources loaded event
-    *       me.loader.onload = this.loaded.bind(this);
-    *
-    *       // set all ressources to be loaded
-    *       me.loader.preload(game.assets);
-    *
-    *       // load everything & display a loading screen
-    *       me.state.change(me.state.LOADING);
-    *    },
-    *
-    *    // callback when everything is loaded
-    *    loaded : function () {
-    *       // define stuff
-    *       // ....
-    *
-    *       // change to the menu screen
-    *       me.state.change(me.state.PLAY);
-    *    }
-    * }, // game
-    *
-    * // "bootstrap"
-    * me.device.onReady(function () {
-    *    game.onload();
-    * });
-    */
-    onReady(fn) {
-        DOMContentLoaded(fn);
-    },
-
-    /**
-     * enable/disable swipe on WebView.
-     * @function device.enableSwipe
-     * @param {boolean} [enable=true] enable or disable swipe.
-     */
-    enableSwipe(enable) {
-        var moveEvent = device.PointerEvent ? "pointermove" : (device.TouchEvent ? "touchmove" : "mousemove");
-        if (enable !== false) {
-            if (swipeEnabled === false) {
-                globalThis.document.removeEventListener(moveEvent, _disableSwipeFn);
-                swipeEnabled = true;
-            }
-        } else if (swipeEnabled === true) {
-            globalThis.document.addEventListener(moveEvent, _disableSwipeFn, { passive: false });
-            swipeEnabled = false;
-        }
-    },
-
-    /**
-     * Triggers a fullscreen request. Requires fullscreen support from the browser/device.
-     * @function device.requestFullscreen
-     * @param {object} [element=default canvas object] the element to be set in full-screen mode.
-     * @example
-     * // add a keyboard shortcut to toggle Fullscreen mode on/off
-     * me.input.bindKey(me.input.KEY.F, "toggleFullscreen");
-     * me.event.on(me.event.KEYDOWN, function (action, keyCode, edge) {
-     *    // toggle fullscreen on/off
-     *    if (action === "toggleFullscreen") {
-     *       if (!me.device.isFullscreen) {
-     *          me.device.requestFullscreen();
-     *       } else {
-     *          me.device.exitFullscreen();
-     *       }
-     *    }
-     * });
-     */
-    requestFullscreen(element) {
-        if (this.hasFullscreenSupport) {
-            element = element || getParent();
-            element.requestFullscreen = prefixed("requestFullscreen", element) ||
-                                        element.mozRequestFullScreen;
-
-            element.requestFullscreen();
-        }
-    },
-
-    /**
-     * Exit fullscreen mode. Requires fullscreen support from the browser/device.
-     * @function device.exitFullscreen
-     */
-    exitFullscreen() {
-        if (this.hasFullscreenSupport) {
-            document.exitFullscreen();
-        }
-    },
-
-    /**
-     * Return a string representing the orientation of the device screen.
-     * It can be "any", "natural", "landscape", "portrait", "portrait-primary", "portrait-secondary", "landscape-primary", "landscape-secondary"
-     * @function device.getScreenOrientation
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
-     * @returns {string} the screen orientation
-     */
-    getScreenOrientation() {
-        var PORTRAIT = "portrait";
-        var LANDSCAPE = "landscape";
-
-        var screen = globalThis.screen;
-
-        // first try using "standard" values
-        if (this.ScreenOrientation === true) {
-            var orientation = prefixed("orientation", screen);
-            if (typeof orientation !== "undefined" && typeof orientation.type === "string") {
-                // Screen Orientation API specification
-                return orientation.type;
-            } else if (typeof orientation === "string") {
-                // moz/ms-orientation are strings
-                return orientation;
-            }
-        }
+export function getParentElement(element) {
+    let target = getElement(element);
 
-        // check using the deprecated API
-        if (typeof globalThis.orientation === "number") {
-            return (Math.abs(globalThis.orientation) === 90) ? LANDSCAPE : PORTRAIT;
-        }
+    if (target.parentNode !== null) {
+        target = target.parentNode;
+    }
 
-        // fallback to window size check
-        return (globalThis.outerWidth > globalThis.outerHeight) ? LANDSCAPE : PORTRAIT;
-    },
-
-    /**
-     * locks the device screen into the specified orientation.<br>
-     * This method only works for installed Web apps or for Web pages in full-screen mode.
-     * @function device.lockOrientation
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
-     * @param {string|string[]} orientation The orientation into which to lock the screen.
-     * @returns {boolean} true if the orientation was unsuccessfully locked
-     */
-    lockOrientation(orientation) {
-        var screen = globalThis.screen;
-        if (typeof screen !== "undefined") {
-            var _lockOrientation = prefixed("lockOrientation", screen);
-            if (typeof _lockOrientation !== "undefined") {
-                return _lockOrientation(orientation);
-            }
-        }
-        return false;
-    },
-
-    /**
-     * unlocks the device screen into the specified orientation.<br>
-     * This method only works for installed Web apps or for Web pages in full-screen mode.
-     * @function device.unlockOrientation
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
-     * @returns {boolean} true if the orientation was unsuccessfully unlocked
-     */
-    unlockOrientation() {
-        var screen = globalThis.screen;
-        if (typeof screen !== "undefined") {
-            var _unlockOrientation = prefixed("unlockOrientation", screen);
-            if (typeof _unlockOrientation !== "undefined") {
-                return _unlockOrientation();
-            }
-        }
-        return false;
-    },
-
-    /**
-     * return true if the device screen orientation is in Portrait mode
-     * @function device.isPortrait
-     * @returns {boolean}
-     */
-    isPortrait() {
-        return this.getScreenOrientation().includes("portrait");
-    },
-
-    /**
-     * return true if the device screen orientation is in Portrait mode
-     * @function device.isLandscape
-     * @returns {boolean}
-     */
-    isLandscape() {
-        return this.getScreenOrientation().includes("landscape");
-    },
-
-    /**
-     * return the device storage
-     * @function device.getStorage
-     * @see save
-     * @param {string} [type="local"]
-     * @returns {object} a reference to the device storage
-     */
-    getStorage(type = "local") {
-        switch (type) {
-            case "local" :
-                return save;
-
-            default :
-                throw new Error("storage type " + type + " not supported");
-        }
-    },
-
-    /**
-     * return the parent DOM element for the given parent name or HTMLElement object
-     * @function device.getParentElement
-     * @param {string|HTMLElement} element the parent element name or a HTMLElement object
-     * @returns {HTMLElement} the parent Element
-     */
-    getParentElement(element) {
-        var target = this.getElement(element);
-
-        if (target.parentNode !== null) {
-            target = target.parentNode;
-        }
+    return target;
+};
 
-        return target;
-    },
-
-    /**
-     * return the DOM element for the given element name or HTMLElement object
-     * @function device.getElement
-     * @param {string|HTMLElement} element the parent element name or a HTMLElement object
-     * @returns {HTMLElement} the corresponding DOM Element or null if not existing
-     */
-    getElement(element) {
-        var target = null;
-
-        if (element !== "undefined") {
-            if (typeof element === "string") {
-                target = document.getElementById(element);
-            } else if (typeof element === "object" && element.nodeType === Node.ELEMENT_NODE) {
-                target = element;
-            }
+/**
+ * return the DOM element for the given element name or HTMLElement object
+ * @function getElement
+ * @memberof device
+ * @public
+ * @param {string|HTMLElement} element the parent element name or a HTMLElement object
+ * @returns {HTMLElement} the corresponding DOM Element or null if not existing
+ */
+export function getElement(element) {
+    let target = null;
+
+    if (element !== "undefined") {
+        if (typeof element === "string") {
+            target = document.getElementById(element);
+        } else if (typeof element === "object" && element.nodeType === Node.ELEMENT_NODE) {
+            target = element;
         }
+    }
 
-        // fallback, if invalid target or non HTMLElement object
-        if (!target)  {
-            //default to document.body
-            target = document.body;
-        }
+    // fallback, if invalid target or non HTMLElement object
+    if (!target)  {
+        //default to document.body
+        target = document.body;
+    }
 
-        return target;
-    },
-
-    /**
-     * returns the size of the given HTMLElement and its position relative to the viewport
-     * <br><img src="images/element-box-diagram.png"/>
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
-     * @function device.getElementBounds
-     * @param {string|HTMLElement} element an HTMLElement object
-     * @returns {DOMRect} the size and position of the element relatively to the viewport
-     */
-    getElementBounds(element) {
-        if (typeof element === "object" && element !== document.body && typeof element.getBoundingClientRect !== "undefined") {
-            return element.getBoundingClientRect();
-        } else {
-            _domRect.width = _domRect.right = globalThis.innerWidth;
-            _domRect.height = _domRect.bottom = globalThis.innerHeight;
-            return _domRect;
+    return target;
+};
+
+/**
+ * returns the size of the given HTMLElement and its position relative to the viewport
+ * <br><img src="images/element-box-diagram.png"/>
+ * @function getElementBounds
+ * @memberof device
+ * @public
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
+ * @param {string|HTMLElement} element an HTMLElement object
+ * @returns {DOMRect} the size and position of the element relatively to the viewport
+ */
+export function getElementBounds(element) {
+    if (typeof element === "object" && element !== document.body && typeof element.getBoundingClientRect !== "undefined") {
+        return element.getBoundingClientRect();
+    } else {
+        domRect.width = domRect.right = globalThis.innerWidth;
+        domRect.height = domRect.bottom = globalThis.innerHeight;
+        return domRect;
+    };
+};
+
+/**
+ * returns the size of the given HTMLElement Parent and its position relative to the viewport
+ * <br><img src="images/element-box-diagram.png"/>
+ * @function getParentBounds
+ * @memberof device
+ * @public
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
+ * @param {string|HTMLElement} element an HTMLElement object
+ * @returns {DOMRect} the size and position of the given element parent relative to the viewport
+ */
+export function getParentBounds(element) {
+    return getElementBounds(getParentElement(element));
+};
+
+/**
+ * returns true if the device supports WebGL
+ * @function isWebGLSupported
+ * @memberof device
+ * @public
+ * @param {object} [options] context creation options
+ * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
+ * @returns {boolean} true if WebGL is supported
+ */
+export function isWebGLSupported(options) {
+    let _supported = false;
+    try {
+        let canvas = document.createElement("canvas");
+        let ctxOptions = {
+            stencil: true,
+            failIfMajorPerformanceCaveat: options.failIfMajorPerformanceCaveat
         };
-    },
-
-    /**
-     * returns the size of the given HTMLElement Parent and its position relative to the viewport
-     * <br><img src="images/element-box-diagram.png"/>
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMRect
-     * @function device.getParentBounds
-     * @param {string|HTMLElement} element an HTMLElement object
-     * @returns {DOMRect} the size and position of the given element parent relative to the viewport
-     */
-    getParentBounds(element) {
-        return this.getElementBounds(this.getParentElement(element));
-    },
-
-    /**
-     * returns true if the device supports WebGL
-     * @function device.isWebGLSupported
-     * @param {object} [options] context creation options
-     * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @returns {boolean} true if WebGL is supported
-     */
-    isWebGLSupported(options) {
-        var _supported = false;
-        try {
-            var canvas = document.createElement("canvas");
-            var ctxOptions = {
-                stencil: true,
-                failIfMajorPerformanceCaveat : options.failIfMajorPerformanceCaveat
-            };
-            _supported = !! (globalThis.WebGLRenderingContext && (canvas.getContext("webgl", ctxOptions) || canvas.getContext("experimental-webgl", ctxOptions)));
-        } catch (e) {
-            _supported = false;
-        }
+        _supported = !! (globalThis.WebGLRenderingContext && (canvas.getContext("webgl", ctxOptions) || canvas.getContext("experimental-webgl", ctxOptions)));
+    } catch (e) {
+        _supported = false;
+    }
 
-        return _supported;
-    },
-
-    /**
-     * return the highest precision format supported by this device for GL Shaders
-     * @function device.getMaxShaderPrecision
-     * @param {WebGLRenderingContext} gl
-     * @returns {boolean} "lowp", "mediump", or "highp"
-     */
-    getMaxShaderPrecision(gl) {
-        if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT ).precision > 0 &&
-            gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT ).precision > 0) {
-                return "highp";
-        }
-        if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT ).precision > 0 &&
-            gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT ).precision > 0) {
-                return "mediump";
-        }
-        return "lowp";
-    },
-
-    /**
-     * Makes a request to bring this device window to the front.
-     * @function device.focus
-     * @example
-     *  if (clicked) {
-     *    me.device.focus();
-     *  }
-     */
-    focus() {
-        if (typeof (globalThis.focus) === "function") {
-            globalThis.focus();
-        }
-    },
-
-
-    /**
-     * event management (Accelerometer)
-     * http://www.mobilexweb.com/samples/ball.html
-     * http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5
-     * @ignore
-     */
-    onDeviceMotion(e) {
-        // Accelerometer information
-        this.accelerationX = e.accelerationIncludingGravity.x;
-        this.accelerationY = e.accelerationIncludingGravity.y;
-        this.accelerationZ = e.accelerationIncludingGravity.z;
-    },
-
-    /**
-     * event management (Accelerometer)
-     * @ignore
-     */
-    onDeviceRotate(e) {
-        this.gamma = e.gamma;
-        this.beta = e.beta;
-        this.alpha = e.alpha;
-    },
-
-    /**
-     * Enable monitor of the device accelerator to detect the amount of physical force of acceleration the device is receiving.
-     * (one some device a first user gesture will be required before calling this function)
-     * @function device.watchAccelerometer
-     * @see device.accelerationX
-     * @see device.accelerationY
-     * @see device.accelerationZ
-     * @returns {boolean} false if not supported or permission not granted by the user
-     * @example
-     * // try to enable device accelerometer event on user gesture
-     * me.input.registerPointerEvent("pointerleave", me.game.viewport, function() {
-     *     if (me.device.watchAccelerometer() === true) {
-     *         // Success
-     *         me.input.releasePointerEvent("pointerleave", me.game.viewport);
-     *     } else {
-     *         // ... fail at enabling the device accelerometer event
-     *     }
-     * });
-     */
-    watchAccelerometer() {
-        if (this.hasAccelerometer && !accelInitialized) {
-            if (DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === "function") {
-                DeviceOrientationEvent.requestPermission()
-                    .then(response => {
-                        if (response === "granted") {
-                            // add a listener for the devicemotion event
-                            globalThis.addEventListener("devicemotion", this.onDeviceMotion, false);
-                            accelInitialized = true;
-                        }
-                    }).catch(console.error);
-            } else {
-                // add a listener for the devicemotion event
-                globalThis.addEventListener("devicemotion", this.onDeviceMotion, false);
-                accelInitialized = true;
-            }
-        }
-        return accelInitialized;
-    },
-
-    /**
-     * unwatch Accelerometor event
-     * @function device.unwatchAccelerometer
-     */
-    unwatchAccelerometer() {
-        if (accelInitialized) {
-            // remove the listener for the devicemotion event
-            globalThis.removeEventListener("devicemotion", this.onDeviceMotion, false);
-            accelInitialized = false;
-        }
-    },
-
-    /**
-     * Enable monitor of the device orientation to detect the current orientation of the device as compared to the Earth coordinate frame.
-     * (one some device a first user gesture will be required before calling this function)
-     * @function device.watchDeviceOrientation
-     * @see device.alpha
-     * @see device.beta
-     * @see device.gamma
-     * @returns {boolean} false if not supported or permission not granted by the user
-     * @example
-     * // try to enable device orientation event on user gesture
-     * me.input.registerPointerEvent("pointerleave", me.game.viewport, function() {
-     *     if (me.device.watchDeviceOrientation() === true) {
-     *         // Success
-     *         me.input.releasePointerEvent("pointerleave", me.game.viewport);
-     *     } else {
-     *         // ... fail at enabling the device orientation event
-     *     }
-     * });
-     */
-    watchDeviceOrientation() {
-        if (this.hasDeviceOrientation && !deviceOrientationInitialized) {
-            if (typeof DeviceOrientationEvent.requestPermission === "function") {
-                DeviceOrientationEvent.requestPermission()
-                    .then(response => {
-                        if (response === "granted") {
-                            globalThis.addEventListener("deviceorientation", this.onDeviceRotate, false);
-                            deviceOrientationInitialized = true;
-                        }
-                    }).catch(console.error);
-            } else {
-                globalThis.addEventListener("deviceorientation", this.onDeviceRotate, false);
-                deviceOrientationInitialized = true;
-            }
-        }
-        return deviceOrientationInitialized;
-    },
-
-    /**
-     * unwatch Device orientation event
-     * @function device.unwatchDeviceOrientation
-     */
-    unwatchDeviceOrientation() {
-        if (deviceOrientationInitialized) {
-            globalThis.removeEventListener("deviceorientation", this.onDeviceRotate, false);
-            deviceOrientationInitialized = false;
-        }
-    },
-
-    /**
-     * the vibrate method pulses the vibration hardware on the device, <br>
-     * If the device doesn't support vibration, this method has no effect. <br>
-     * If a vibration pattern is already in progress when this method is called,
-     * the previous pattern is halted and the new one begins instead.
-     * @function device.vibrate
-     * @param {number|number[]} pattern pattern of vibration and pause intervals
-     * @example
-     * // vibrate for 1000 ms
-     * me.device.vibrate(1000);
-     * // or alternatively
-     * me.device.vibrate([1000]);
-     * // vibrate for 50 ms, be still for 100 ms, and then vibrate for 150 ms:
-     * me.device.vibrate([50, 100, 150]);
-     * // cancel any existing vibrations
-     * me.device.vibrate(0);
-     */
-    vibrate(pattern) {
-        if (typeof globalThis.navigator !== "undefined" && typeof globalThis.navigator.vibrate === "function") {
-            globalThis.navigator.vibrate(pattern);
-        }
+    return _supported;
+};
+
+/**
+ * return the highest precision format supported by this device for GL Shaders
+ * @function getMaxShaderPrecision
+ * @memberof device
+ * @public
+ * @param {WebGLRenderingContext} gl
+ * @returns {boolean} "lowp", "mediump", or "highp"
+ */
+export function getMaxShaderPrecision(gl) {
+    if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT ).precision > 0 &&
+        gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT ).precision > 0) {
+            return "highp";
+    }
+    if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT ).precision > 0 &&
+        gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT ).precision > 0) {
+            return "mediump";
     }
+    return "lowp";
+};
 
+/**
+ * Makes a request to bring this device window to the front.
+ * @function focus
+ * @memberof device
+ * @public
+ * @example
+ *  if (clicked) {
+ *    me.device.focus();
+ *  }
+ */
+export function focus() {
+    if (typeof (globalThis.focus) === "function") {
+        globalThis.focus();
+    }
 };
 
 /**
- * Ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.
- * @name device.devicePixelRatio
+ * Enable monitor of the device accelerator to detect the amount of physical force of acceleration the device is receiving.
+ * (one some device a first user gesture will be required before calling this function)
+ * @function watchAccelerometer
+ * @memberof device
  * @public
- * @member {number}
- * @readonly
- * @returns {number}
+ * @see device.accelerationX
+ * @see device.accelerationY
+ * @see device.accelerationZ
+ * @link {http://www.mobilexweb.com/samples/ball.html}
+ * @link {http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5}
+ * @returns {boolean} false if not supported or permission not granted by the user
+ * @example
+ * // try to enable device accelerometer event on user gesture
+ * me.input.registerPointerEvent("pointerleave", me.game.viewport, function() {
+ *     if (me.device.watchAccelerometer() === true) {
+ *         // Success
+ *         me.input.releasePointerEvent("pointerleave", me.game.viewport);
+ *     } else {
+ *         // ... fail at enabling the device accelerometer event
+ *     }
+ * });
  */
-Object.defineProperty(device, "devicePixelRatio", {
-    /**
-     * @ignore
-     */
-    get: function () {
-        return (globalThis.devicePixelRatio || 1);
+export function watchAccelerometer() {
+    if (hasAccelerometer && !accelInitialized) {
+        if (DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === "function") {
+            DeviceOrientationEvent.requestPermission()
+                .then(response => {
+                    if (response === "granted") {
+                        // add a listener for the devicemotion event
+                        globalThis.addEventListener("devicemotion", onDeviceMotion, false);
+                        accelInitialized = true;
+                    }
+                }).catch(console.error);
+        } else {
+            // add a listener for the devicemotion event
+            globalThis.addEventListener("devicemotion", onDeviceMotion, false);
+            accelInitialized = true;
+        }
     }
-});
+    return accelInitialized;
+};
 
 /**
- * Returns true if the browser/device is in full screen mode.
- * @name device.isFullscreen
+ * unwatch Accelerometor event
+ * @function unwatchAccelerometer
+ * @memberof device
  * @public
- * @member {boolean}
- * @readonly
- * @returns {boolean}
  */
-Object.defineProperty(device, "isFullscreen", {
-    /**
-     * @ignore
-     */
-    get: function () {
-        if (this.hasFullscreenSupport) {
-            return !!(prefixed("fullscreenElement", document) ||
-                document.mozFullScreenElement);
+export function unwatchAccelerometer() {
+    if (accelInitialized) {
+        // remove the listener for the devicemotion event
+        globalThis.removeEventListener("devicemotion", onDeviceMotion, false);
+        accelInitialized = false;
+    }
+};
+
+/**
+ * Enable monitor of the device orientation to detect the current orientation of the device as compared to the Earth coordinate frame.
+ * (one some device a first user gesture will be required before calling this function)
+ * @function watchDeviceOrientation
+ * @memberof device
+ * @public
+ * @see device.alpha
+ * @see device.beta
+ * @see device.gamma
+ * @returns {boolean} false if not supported or permission not granted by the user
+ * @example
+ * // try to enable device orientation event on user gesture
+ * me.input.registerPointerEvent("pointerleave", me.game.viewport, function() {
+ *     if (me.device.watchDeviceOrientation() === true) {
+ *         // Success
+ *         me.input.releasePointerEvent("pointerleave", me.game.viewport);
+ *     } else {
+ *         // ... fail at enabling the device orientation event
+ *     }
+ * });
+ */
+export function watchDeviceOrientation() {
+    if (hasDeviceOrientation && !deviceOrientationInitialized) {
+        if (typeof DeviceOrientationEvent.requestPermission === "function") {
+            DeviceOrientationEvent.requestPermission()
+                .then(response => {
+                    if (response === "granted") {
+                        globalThis.addEventListener("deviceorientation", onDeviceRotate, false);
+                        deviceOrientationInitialized = true;
+                    }
+                }).catch(console.error);
         } else {
-            return false;
+            globalThis.addEventListener("deviceorientation", onDeviceRotate, false);
+            deviceOrientationInitialized = true;
         }
     }
-});
+    return deviceOrientationInitialized;
+};
 
 /**
- * Returns true if the browser/device has audio capabilities.
- * @name device.sound
+ * unwatch Device orientation event
+ * @function unwatchDeviceOrientation
+ * @memberof device
  * @public
- * @member {boolean}
- * @readonly
- * @returns {boolean}
  */
-Object.defineProperty(device, "sound", {
-    /**
-     * @ignore
-     */
-    get: function () {
-        return hasAudio();
+export function unwatchDeviceOrientation() {
+    if (deviceOrientationInitialized) {
+        globalThis.removeEventListener("deviceorientation", onDeviceRotate, false);
+        deviceOrientationInitialized = false;
     }
-});
+};
 
-export default device;
+/**
+ * the vibrate method pulses the vibration hardware on the device, <br>
+ * If the device doesn't support vibration, this method has no effect. <br>
+ * If a vibration pattern is already in progress when this method is called,
+ * the previous pattern is halted and the new one begins instead.
+ * @function vibrate
+ * @memberof device
+ * @public
+ * @param {number|number[]} pattern pattern of vibration and pause intervals
+ * @example
+ * // vibrate for 1000 ms
+ * me.device.vibrate(1000);
+ * // or alternatively
+ * me.device.vibrate([1000]);
+ * // vibrate for 50 ms, be still for 100 ms, and then vibrate for 150 ms:
+ * me.device.vibrate([50, 100, 150]);
+ * // cancel any existing vibrations
+ * me.device.vibrate(0);
+ */
+export function vibrate(pattern) {
+    if (typeof globalThis.navigator !== "undefined" && typeof globalThis.navigator.vibrate === "function") {
+        globalThis.navigator.vibrate(pattern);
+    }
+};