melonjs 13.4.0 → 14.0.1

package/src/renderable/{GUI.js → ui/uispriteelement.js}

@@ -1,24 +1,20 @@
-import timer from "./../system/timer.js";
-import Sprite from "./sprite.js";
-import { registerPointerEvent, releasePointerEvent} from "./../input/input.js";
-
+import timer from "./../../system/timer.js";
+import Sprite from "./../sprite.js";
+import { registerPointerEvent, releasePointerEvent} from "./../../input/input.js";
 
 /**
  * @classdesc
- * GUI Object<br>
- * A very basic object to manage GUI elements <br>
- * The object simply register on the "pointerdown" <br>
- * or "touchstart" event and call the onClick function"
+ *  This is a basic sprite based button which you can use in your Game UI.
  * @augments Sprite
  */
-class GUI_Object extends Sprite {
+class UISpriteElement extends Sprite {
     /**
      * @param {number} x the x coordinate of the GUI Object
      * @param {number} y the y coordinate of the GUI Object
      * @param {object} settings See {@link Sprite}
      * @example
      * // create a basic GUI Object
-     * class myButton extends GUI_Object {
+     * class myButton extends UISpriteElement {
      *    constructor(x, y) {
      *       var settings = {}
      *       settings.image = "button";
@@ -49,10 +45,8 @@ class GUI_Object extends Sprite {
 
         /**
          * object can be clicked or not
-         * @public
          * @type {boolean}
          * @default true
-         * @name GUI_Object#isClickable
          */
         this.isClickable = true;
 
@@ -60,25 +54,20 @@ class GUI_Object extends Sprite {
          * Tap and hold threshold timeout in ms
          * @type {number}
          * @default 250
-         * @name GUI_Object#holdThreshold
          */
         this.holdThreshold = 250;
 
         /**
          * object can be tap and hold
-         * @public
          * @type {boolean}
          * @default false
-         * @name GUI_Object#isHoldable
          */
         this.isHoldable = false;
 
         /**
          * true if the pointer is over the object
-         * @public
          * @type {boolean}
          * @default false
-         * @name GUI_Object#hover
          */
         this.hover = false;
 
@@ -115,9 +104,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the object is pressed (to be extended)
-     * @name onClick
-     * @memberof GUI_Object
-     * @public
      * @param {Pointer} event the event object
      * @returns {boolean} return false if we need to stop propagating the event
      */
@@ -137,9 +123,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the pointer is over the object
-     * @name onOver
-     * @memberof GUI_Object
-     * @public
      * @param {Pointer} event the event object
      */
     onOver(event) { // eslint-disable-line no-unused-vars
@@ -159,9 +142,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the pointer is leaving the object area
-     * @name onOut
-     * @memberof GUI_Object
-     * @public
      * @param {Pointer} event the event object
      */
     onOut(event) { // eslint-disable-line no-unused-vars
@@ -183,9 +163,6 @@ class GUI_Object extends Sprite {
 
     /**
      * function called when the object is pressed and released (to be extended)
-     * @name onRelease
-     * @memberof GUI_Object
-     * @public
      * @returns {boolean} return false if we need to stop propagating the event
      */
     onRelease() {
@@ -207,9 +184,6 @@ class GUI_Object extends Sprite {
     /**
      * function called when the object is pressed and held<br>
      * to be extended <br>
-     * @name onHold
-     * @memberof GUI_Object
-     * @public
      */
     onHold() {}
 
@@ -239,6 +213,5 @@ class GUI_Object extends Sprite {
         releasePointerEvent("pointerleave", this);
         timer.clearTimeout(this.holdTimeout);
     }
-};
-
-export default GUI_Object;
+}
+export default UISpriteElement;

package/src/renderable/ui/uitextbutton.js

@@ -0,0 +1,121 @@
+import Vector2d from "../../math/vector2.js";
+import BitmapText from "../../text/bitmaptext.js";
+import RoundRect from "../../geometries/roundrect.js";
+import UIBaseElement from "./uibaseelement.js";
+
+
+/**
+ * @classdesc
+ * This is a basic base text button which you can use in your Game UI.
+ * @augments UIBaseElement
+ */
+class UITextButton extends UIBaseElement {
+    /**
+     * A Text Button with an outlined background border, filled with background color.
+     * It uses a RoundRect as background and changes the background color on hovering over.
+     * The background will be drawn with 0.5 opacity, so that the background of the button is
+     * slightly shining through.
+     * @param {number} x x pos of the button
+     * @param {number} y y pos of the button
+     * @param {string} [settings.font] The name of the BitmapText font to use
+     * @param {number} [settings.size] The scale factor of the font (default: 1)
+     * @param {string} [settings.text] The text to display (default: 'click me')
+     * @param {string} [settings.bindKey] The key to bind the action to (default: none)
+     * @param {string} [settings.backgroundColor] The css value of a background color
+     * @param {string} [settings.hoverColor] The css value of a color to be used if the pointer hovers over the button
+     * @param {string} [settings.borderStrokeColor] The css value of a color to be used to draw the border
+     * @param {boolean} [settings.offScreenCanvas] Weather to use an offScreen canvas or not
+     * @param {string} [settings.fillStyle] The css value of a tint color to be used to tint the text
+     * @param {number} [settings.borderWidth] Width of the button
+     * @param {number} [settings.borderHeight] Height of the button
+     * @example
+     * // Create a new Button
+     * class PlayButton extends BaseTextButton {
+     *      constructor(x,y) {
+     *          super(x,y, {
+     *              font: 'my-font',
+     *              text: 'Play',
+     *              // if you omit the next two, size is calculated by the size of the text
+     *              borderWidth: 200,
+     *              borderHeight: 20,
+     *          });
+     *      }
+     *
+     *      onClick(){
+     *          state.change(state.PLAY);
+     *      }
+     * }
+     *
+     * game.world.addChild(new PlayButton(15,200));
+     */
+    constructor(x, y, settings) {
+        super(x, y);
+        settings.font = settings.font || "24Outline";
+        settings.size = settings.size || 1;
+        settings.text = settings.text || "<Click Me>";
+        settings.bindKey = settings.bindKey || -1;
+        settings.backgroundColor = settings.backgroundColor || "#00aa00";
+        settings.hoverColor = settings.hoverColor || "#00ff00";
+        settings.borderStrokeColor = settings.borderStrokeColor || "#000000";
+        settings.offScreenCanvas = settings.offScreenCanvas || false;
+        settings.fillStyle = settings.fillStyle || "#ffffff";
+        settings.lineWidth = settings.lineWidth || 1;
+        settings.anchorPoint = settings.anchorPoint || new Vector2d(0, 0);
+
+        let font = new BitmapText(x, y, settings);
+        let dimensions = font.measureText();
+        settings.borderWidth = settings.borderWidth || dimensions.width + 16;
+        settings.borderHeight = settings.borderHeight || dimensions.height + 16;
+
+        let border = new RoundRect(
+            x,
+            y,
+            settings.borderWidth,
+            settings.borderHeight
+        );
+        super.setShape(
+            x,
+            y,
+            border.getBounds().width,
+            border.getBounds().height
+        );
+
+        // build up
+        this.font = font;
+        this.dimensions = dimensions;
+        this.border = border;
+        this.settings = settings;
+
+        // adjust text position
+        this.font.pos.set(
+            Math.round((border.width - dimensions.width) / 2) + this.font.pos.x,
+            Math.round((border.height - dimensions.height) / 2) +
+                this.font.pos.y
+        );
+    }
+
+    draw(renderer) {
+        renderer.setGlobalAlpha(0.5);
+        if (!this.hover) {
+            renderer.setColor(this.settings.backgroundColor);
+        } else {
+            renderer.setColor(this.settings.hoverColor);
+        }
+
+        renderer.fill(this.border);
+        renderer.setGlobalAlpha(1);
+        renderer.setColor(this.settings.borderStrokeColor);
+        renderer.stroke(this.border);
+
+        // fix: supporting tint
+        renderer.setTint(this.font.tint, this.font.getOpacity());
+        this.font.draw(
+            renderer,
+            this.settings.text,
+            this.font.pos.x,
+            this.font.pos.y
+        );
+    }
+}
+export default UITextButton;
+

package/src/state/stage.js

@@ -125,17 +125,17 @@ class Stage {
 
         // update the camera/viewport
         // iterate through all cameras
-        this.cameras.forEach(function(camera) {
+        this.cameras.forEach((camera) => {
             if (camera.update(dt) === true) {
                 isDirty = true;
-            };
+            }
         });
 
         // update all lights
         this.lights.forEach((light) => {
             if (light.update(dt) === true) {
                 isDirty = true;
-            };
+            }
         });
 
         return isDirty;
@@ -224,6 +224,5 @@ class Stage {
             this.settings.onDestroyEvent.apply(this, arguments);
         }
     }
-};
-
+}
 export default Stage;

package/src/system/device.js

@@ -22,7 +22,7 @@ function disableSwipeFn(e) {
         globalThis.scroll(0, 0);
     }
     return false;
-};
+}
 
 function hasLocalStorage() {
     try {
@@ -51,7 +51,7 @@ function onDeviceMotion(e) {
     accelerationX = e.accelerationIncludingGravity.x;
     accelerationY = e.accelerationIncludingGravity.y;
     accelerationZ = e.accelerationIncludingGravity.z;
-};
+}
 
 /**
  * used by [un]watchDeviceOrientation()
@@ -60,7 +60,7 @@ export function onDeviceRotate(e) {
     gamma = e.gamma;
     beta = e.beta;
     alpha = e.alpha;
-};
+}
 
 /**
  * the device platform type
@@ -431,7 +431,7 @@ export let stopOnBlur = false;
 */
 export function onReady(fn) {
     DOMContentLoaded(fn);
-};
+}
 
 /**
  * enable/disable swipe on WebView.
@@ -451,7 +451,7 @@ export function enableSwipe(enable) {
         globalThis.document.addEventListener(moveEvent, disableSwipeFn, { passive: false });
         swipeEnabled = false;
     }
-};
+}
 
 /**
  * Returns true if the browser/device is in full screen mode.
@@ -466,7 +466,7 @@ export function isFullscreen() {
     } else {
         return false;
     }
-};
+}
 
 /**
  * Triggers a fullscreen request. Requires fullscreen support from the browser/device.
@@ -492,7 +492,7 @@ export function requestFullscreen(element) {
         element.requestFullscreen = prefixed("requestFullscreen", element) || element.mozRequestFullScreen;
         element.requestFullscreen();
     }
-};
+}
 
 /**
  * Exit fullscreen mode. Requires fullscreen support from the browser/device.
@@ -504,7 +504,7 @@ export function exitFullscreen() {
     if (hasFullscreenSupport && isFullscreen()) {
         document.exitFullscreen();
     }
-};
+}
 
 /**
  * Return a string representing the orientation of the device screen.
@@ -540,7 +540,7 @@ export function getScreenOrientation() {
 
     // fallback to window size check
     return (globalThis.outerWidth > globalThis.outerHeight) ? LANDSCAPE : PORTRAIT;
-};
+}
 
 /**
  * locks the device screen into the specified orientation.<br>
@@ -561,7 +561,7 @@ export function lockOrientation(orientation) {
         }
     }
     return false;
-};
+}
 
 /**
  * unlocks the device screen into the specified orientation.<br>
@@ -581,7 +581,7 @@ export function unlockOrientation() {
         }
     }
     return false;
-};
+}
 
 /**
  * return true if the device screen orientation is in Portrait mode
@@ -592,7 +592,7 @@ export function unlockOrientation() {
  */
 export function isPortrait() {
     return getScreenOrientation().includes("portrait");
-};
+}
 
 /**
  * return true if the device screen orientation is in Portrait mode
@@ -603,7 +603,7 @@ export function isPortrait() {
  */
 export function isLandscape() {
     return getScreenOrientation().includes("landscape");
-};
+}
 
 /**
  * return the device storage
@@ -622,7 +622,7 @@ export function getStorage(type = "local") {
         default :
             throw new Error("storage type " + type + " not supported");
     }
-};
+}
 
 /**
  * return the parent DOM element for the given parent name or HTMLElement object
@@ -640,7 +640,7 @@ export function getParentElement(element) {
     }
 
     return target;
-};
+}
 
 /**
  * return the DOM element for the given element name or HTMLElement object
@@ -668,7 +668,7 @@ export function getElement(element) {
     }
 
     return target;
-};
+}
 
 /**
  * returns the size of the given HTMLElement and its position relative to the viewport
@@ -687,8 +687,8 @@ export function getElementBounds(element) {
         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
@@ -702,7 +702,7 @@ export function getElementBounds(element) {
  */
 export function getParentBounds(element) {
     return getElementBounds(getParentElement(element));
-};
+}
 
 /**
  * returns true if the device supports WebGL
@@ -727,7 +727,7 @@ export function isWebGLSupported(options) {
     }
 
     return _supported;
-};
+}
 
 /**
  * return the highest precision format supported by this device for GL Shaders
@@ -747,7 +747,7 @@ export function getMaxShaderPrecision(gl) {
             return "mediump";
     }
     return "lowp";
-};
+}
 
 /**
  * Makes a request to bring this device window to the front.
@@ -763,7 +763,7 @@ export function focus() {
     if (typeof (globalThis.focus) === "function") {
         globalThis.focus();
     }
-};
+}
 
 /**
  * Enable monitor of the device accelerator to detect the amount of physical force of acceleration the device is receiving.
@@ -806,7 +806,7 @@ export function watchAccelerometer() {
         }
     }
     return accelInitialized;
-};
+}
 
 /**
  * unwatch Accelerometor event
@@ -820,7 +820,7 @@ export function unwatchAccelerometer() {
         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.
@@ -859,7 +859,7 @@ export function watchDeviceOrientation() {
         }
     }
     return deviceOrientationInitialized;
-};
+}
 
 /**
  * unwatch Device orientation event
@@ -872,7 +872,7 @@ export function unwatchDeviceOrientation() {
         globalThis.removeEventListener("deviceorientation", onDeviceRotate, false);
         deviceOrientationInitialized = false;
     }
-};
+}
 
 /**
  * the vibrate method pulses the vibration hardware on the device, <br>
@@ -897,4 +897,4 @@ export function vibrate(pattern) {
     if (typeof globalThis.navigator !== "undefined" && typeof globalThis.navigator.vibrate === "function") {
         globalThis.navigator.vibrate(pattern);
     }
-};
+}

package/src/system/dom.js

@@ -36,7 +36,7 @@ function _domReady() {
         // Remember that the DOM is ready
         isDOMReady = true;
     }
-};
+}
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
 export function DOMContentLoaded(fn) {

package/src/system/event.js

@@ -481,7 +481,7 @@ export const ONCONTEXT_RESTORED = "renderer.contextrestored";
  */
 export function emit(eventName, ...args) {
     return eventEmitter.emit(eventName, ...args);
-};
+}
 
 /**
  * Add a listener for a given event.
@@ -496,7 +496,7 @@ export function emit(eventName, ...args) {
  */
 export function on(eventName, listener, context) {
     return eventEmitter.on(eventName, listener, context);
-};
+}
 
 /**
  * Add a one-time listener for a given event.
@@ -511,7 +511,7 @@ export function on(eventName, listener, context) {
  */
 export function once(eventName, listener, context) {
     return eventEmitter.once(eventName, listener, context);
-};
+}
 
 /**
  * remove the given listener for a given event.
@@ -525,4 +525,4 @@ export function once(eventName, listener, context) {
  */
 export function off(eventName, listener) {
     return eventEmitter.off(eventName, listener);
-};
+}

package/src/system/pooling.js

@@ -149,7 +149,7 @@ class ObjectPool {
      */
     exists(name) {
         return name in this.objectClass;
-    };
+    }
 
     /**
      * Check if an object is poolable
@@ -178,8 +178,7 @@ class ObjectPool {
     getInstanceCount() {
         return this.instance_counter;
     }
-};
-
+}
 
 var pool = new ObjectPool();
 

package/src/system/save.js

@@ -61,7 +61,7 @@ event.on(event.BOOT, () => {
 
         if (typeof me_save_content === "string" && me_save_content.length > 0) {
             var keys = JSON.parse(me_save_content) || [];
-            keys.forEach(function (key) {
+            keys.forEach((key) => {
                 data[key] = JSON.parse(globalThis.localStorage.getItem("me.save." + key));
             });
         }
@@ -84,7 +84,7 @@ var save = {
     add(props) {
         var obj = save;
 
-        Object.keys(props).forEach(function (key) {
+        Object.keys(props).forEach((key) => {
             if (isReserved(key)) {
                 return;
             }

package/src/system/timer.js

@@ -256,7 +256,7 @@ class Timer {
             }
         }
     }
-};
+}
 
 const timer = new Timer();
 

package/src/text/bitmaptext.js

@@ -109,7 +109,7 @@ class BitmapText extends Renderable {
                 // if starting/includes "info face" the whole data string was passed as parameter
                 (settings.fontData.includes("info face")) ? settings.fontData : loader.getBinary(settings.fontData)
             );
-        };
+        }
 
         // if floating was specified through settings
         if (typeof settings.floating !== "undefined") {
@@ -357,6 +357,5 @@ class BitmapText extends Renderable {
         super.destroy();
     }
 
-};
-
+}
 export default BitmapText;

package/src/text/bitmaptextdata.js

@@ -14,7 +14,7 @@ function getValueFromPair(string, pattern) {
     }
 
     return value[0].split("=")[1];
-};
+}
 
 /**
  * Gets the first glyph in the map that is not a space character
@@ -32,7 +32,7 @@ function getFirstGlyph(glyphs) {
         }
     }
     return null;
-};
+}
 
 /**
  * Creates a glyph to use for the space character
@@ -50,9 +50,7 @@ function createSpaceGlyph(glyphs) {
         glyph.xadvance = getFirstGlyph(glyphs).xadvance;
         glyphs[spaceCharCode] = glyph;
     }
-};
-
-
+}
 
 /**
  * Class for storing relevant data from the font file.
@@ -188,6 +186,5 @@ class BitmapTextData {
         }
         this.capHeight -= padY;
     }
-};
-
+}
 export default BitmapTextData;

package/src/text/glyph.js

@@ -54,6 +54,5 @@ class Glyph {
         }
         page[ch & PAGE_SIZE - 1] = value;
     }
-};
-
+}
 export default Glyph;

package/src/text/text.js

@@ -235,7 +235,7 @@ class Text extends Renderable {
      */
     setFont(font, size = 10) {
         // font name and type
-        var font_names = font.split(",").map(function (value) {
+        var font_names = font.split(",").map((value) => {
             value = value.trim();
             return (
                 !/(^".*"$)|(^'.*'$)/.test(value)
@@ -440,6 +440,5 @@ class Text extends Renderable {
         this._text.length = 0;
         super.destroy();
     }
-};
-
+}
 export default Text;

package/src/text/textstyle.js

@@ -11,4 +11,4 @@ export default function setContextStyle(context, style, stroke = false) {
     }
     context.textAlign = style.textAlign;
     context.textBaseline = style.textBaseline;
-};
+}

package/src/tweens/tween.js

@@ -342,7 +342,7 @@ class Tween {
     onComplete( onCompleteCallback ) {
         this._onCompleteCallback = onCompleteCallback;
         return this;
-    };
+    }
 
     /** @ignore */
     update( dt ) {
@@ -467,6 +467,5 @@ class Tween {
     // export easing function as static class property
     static get Easing() { return Easing; }
     static get Interpolation() { return Interpolation; }
-};
-
+}
 export default Tween;