Merge branch 'master' of https://github.com/photonstorm/phaser

Author: photonstorm

CHANGELOG.md

@@ -79,6 +79,7 @@ Notes:
 * `Geom.Intersects.GetTriangleToLine` is a new function that will return the point/s of intersection between a triangle and a line (thanks @florianvazelle)
 * `Geom.Intersects.GetTriangleToTriangle` is a new function that will return the point/s of intersection between two triangles (thanks @florianvazelle)
 * `Size.setCSS` is a new method that will set the Size components width and height to the respective CSS style properties of the given element.
+* `CSSFile` is a new Loader FileType that allows you to load css into the current document via the normal Phaser Loader, using the `load.css` method. As such, you can chain it with other load calls, load via config, use as part of a pack load or any other option available to all loader filetypes. The CSS is applied immediately to the document.
 
 ### Updates
 

src/gameobjects/domelement/DOMElement.js

@@ -189,7 +189,7 @@ var DOMElement = new Class({
         this.node = target;
 
         //  style can be empty, a string or a plain object
-        if (IsPlainObject(style))
+        if (style && IsPlainObject(style))
         {
             for (var key in style)
             {
@@ -293,6 +293,20 @@ var DOMElement = new Class({
         return this.getChildByProperty('name', name);
     },
 
+    setClassName: function (className)
+    {
+        if (this.node)
+        {
+            this.node.className = className;
+
+            var nodeBounds = this.node.getBoundingClientRect();
+
+            this.setSize(nodeBounds.width, nodeBounds.height);
+        }
+
+        return this;
+    },
+
     setText: function (text)
     {
         if (this.node)

src/gameobjects/rendertexture/RenderTexture.js

@@ -278,7 +278,12 @@ var RenderTexture = new Class({
         this.camera.setScene(scene);
 
         this.setPosition(x, y);
-        if (key === undefined) { this.setSize(width, height); }
+
+        if (key === undefined)
+        {
+            this.setSize(width, height);
+        }
+
         this.setOrigin(0, 0);
         this.initPipeline();
     },

src/gameobjects/shape/triangle/Triangle.js

@@ -112,18 +112,18 @@ var Triangle = new Class({
     updateData: function ()
     {
         var path = [];
-        var rect = this.geom;
+        var tri = this.geom;
         var line = this._tempLine;
 
-        rect.getLineA(line);
+        tri.getLineA(line);
 
         path.push(line.x1, line.y1, line.x2, line.y2);
 
-        rect.getLineB(line);
+        tri.getLineB(line);
 
         path.push(line.x2, line.y2);
 
-        rect.getLineC(line);
+        tri.getLineC(line);
 
         path.push(line.x2, line.y2);
 

src/loader/filetypes/CSSFile.js

@@ -0,0 +1,171 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2019 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../utils/Class');
+var CONST = require('../const');
+var File = require('../File');
+var FileTypesManager = require('../FileTypesManager');
+var GetFastValue = require('../../utils/object/GetFastValue');
+var IsPlainObject = require('../../utils/object/IsPlainObject');
+
+/**
+ * @typedef {object} Phaser.Loader.FileTypes.CSSFileConfig
+ *
+ * @property {string} key - The key of the file. Must be unique within the Loader.
+ * @property {string} [url] - The absolute or relative URL to load the file from.
+ * @property {string} [extension='js'] - The default file extension to use if no url is provided.
+ * @property {Phaser.Loader.Types.XHRSettingsObject} [xhrSettings] - Extra XHR Settings specifically for this file.
+ */
+
+/**
+ * @classdesc
+ * A single CSS File suitable for loading by the Loader.
+ *
+ * These are created when you use the Phaser.Loader.LoaderPlugin#css method and are not typically created directly.
+ * 
+ * For documentation about what all the arguments and configuration options mean please see Phaser.Loader.LoaderPlugin#css.
+ *
+ * @class CSSFile
+ * @extends Phaser.Loader.File
+ * @memberof Phaser.Loader.FileTypes
+ * @constructor
+ * @since 3.17.0
+ *
+ * @param {Phaser.Loader.LoaderPlugin} loader - A reference to the Loader that is responsible for this file.
+ * @param {(string|Phaser.Loader.FileTypes.CSSFileConfig)} key - The key to use for this file, or a file configuration object.
+ * @param {string} [url] - The absolute or relative URL to load this file from. If undefined or `null` it will be set to `<key>.js`, i.e. if `key` was "alien" then the URL will be "alien.js".
+ * @param {Phaser.Loader.Types.XHRSettingsObject} [xhrSettings] - Extra XHR Settings specifically for this file.
+ */
+var CSSFile = new Class({
+
+    Extends: File,
+
+    initialize:
+
+    function CSSFile (loader, key, url, xhrSettings)
+    {
+        var extension = 'css';
+
+        if (IsPlainObject(key))
+        {
+            var config = key;
+
+            key = GetFastValue(config, 'key');
+            url = GetFastValue(config, 'url');
+            xhrSettings = GetFastValue(config, 'xhrSettings');
+            extension = GetFastValue(config, 'extension', extension);
+        }
+
+        var fileConfig = {
+            type: 'script',
+            cache: false,
+            extension: extension,
+            responseType: 'text',
+            key: key,
+            url: url,
+            xhrSettings: xhrSettings
+        };
+
+        File.call(this, loader, fileConfig);
+    },
+
+    /**
+     * Called automatically by Loader.nextFile.
+     * This method controls what extra work this File does with its loaded data.
+     *
+     * @method Phaser.Loader.FileTypes.CSSFile#onProcess
+     * @since 3.17.0
+     */
+    onProcess: function ()
+    {
+        this.state = CONST.FILE_PROCESSING;
+
+        this.data = document.createElement('style');
+        this.data.defer = false;
+        this.data.innerHTML = this.xhrLoader.responseText;
+
+        document.head.appendChild(this.data);
+
+        this.onProcessComplete();
+    }
+
+});
+
+/**
+ * Adds a CSS file, or array of CSS files, to the current load queue.
+ *
+ * You can call this method from within your Scene's `preload`, along with any other files you wish to load:
+ * 
+ * ```javascript
+ * function preload ()
+ * {
+ *     this.load.css('headers', 'styles/headers.css');
+ * }
+ * ```
+ *
+ * The file is **not** loaded right away. It is added to a queue ready to be loaded either when the loader starts,
+ * or if it's already running, when the next free load slot becomes available. This happens automatically if you
+ * are calling this from within the Scene's `preload` method, or a related callback. Because the file is queued
+ * it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
+ * The typical flow for a Phaser Scene is that you load assets in the Scene's `preload` method and then when the
+ * Scene's `create` method is called you are guaranteed that all of those assets are ready for use and have been
+ * loaded.
+ * 
+ * The key must be a unique String and not already in-use by another file in the Loader.
+ *
+ * Instead of passing arguments you can pass a configuration object, such as:
+ * 
+ * ```javascript
+ * this.load.css({
+ *     key: 'headers',
+ *     url: 'styles/headers.css'
+ * });
+ * ```
+ *
+ * See the documentation for `Phaser.Loader.FileTypes.CSSFileConfig` for more details.
+ *
+ * Once the file has finished loading it will automatically be converted into a style DOM element
+ * via `document.createElement('style')`. It will have its `defer` property set to false and then the
+ * resulting element will be appended to `document.head`. The CSS styles are then applied to the current document.
+ *
+ * The URL can be relative or absolute. If the URL is relative the `Loader.baseURL` and `Loader.path` values will be prepended to it.
+ *
+ * If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
+ * and no URL is given then the Loader will set the URL to be "alien.css". It will always add `.css` as the extension, although
+ * this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.
+ *
+ * Note: The ability to load this type of file will only be available if the CSS File type has been built into Phaser.
+ * It is available in the default build but can be excluded from custom builds.
+ *
+ * @method Phaser.Loader.LoaderPlugin#css
+ * @fires Phaser.Loader.LoaderPlugin#addFileEvent
+ * @since 3.17.0
+ *
+ * @param {(string|Phaser.Loader.FileTypes.CSSFileConfig|Phaser.Loader.FileTypes.CSSFileConfig[])} key - The key to use for this file, or a file configuration object, or array of them.
+ * @param {string} [url] - The absolute or relative URL to load this file from. If undefined or `null` it will be set to `<key>.css`, i.e. if `key` was "alien" then the URL will be "alien.css".
+ * @param {Phaser.Loader.Types.XHRSettingsObject} [xhrSettings] - An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.
+ *
+ * @return {Phaser.Loader.LoaderPlugin} The Loader instance.
+ */
+FileTypesManager.register('css', function (key, url, xhrSettings)
+{
+    if (Array.isArray(key))
+    {
+        for (var i = 0; i < key.length; i++)
+        {
+            //  If it's an array it has to be an array of Objects, so we get everything out of the 'key' object
+            this.addFile(new CSSFile(this, key[i]));
+        }
+    }
+    else
+    {
+        this.addFile(new CSSFile(this, key, url, xhrSettings));
+    }
+
+    return this;
+});
+
+module.exports = CSSFile;

src/loader/filetypes/index.js

@@ -17,6 +17,7 @@ module.exports = {
     AudioSpriteFile: require('./AudioSpriteFile'),
     BinaryFile: require('./BinaryFile'),
     BitmapFontFile: require('./BitmapFontFile'),
+    CSSFile: require('./CSSFile'),
     GLSLFile: require('./GLSLFile'),
     HTML5AudioFile: require('./HTML5AudioFile'),
     HTMLFile: require('./HTMLFile'),

src/math/RoundTo.js

@@ -5,13 +5,30 @@
  */
 
 /**
- * Round a value to a given decimal place.
+ * Round a value to the given precision.
+ * 
+ * For example:
+ * 
+ * ```javascript
+ * RoundTo(123.456, 0) = 123
+ * RoundTo(123.456, 1) = 120
+ * RoundTo(123.456, 2) = 100
+ * ```
+ * 
+ * To round the decimal, i.e. to round to precision, pass in a negative `place`:
+ * 
+ * ```javascript
+ * RoundTo(123.456789, 0) = 123
+ * RoundTo(123.456789, -1) = 123.5
+ * RoundTo(123.456789, -2) = 123.46
+ * RoundTo(123.456789, -3) = 123.457
+ * ```
  *
  * @function Phaser.Math.RoundTo
  * @since 3.0.0
  *
  * @param {number} value - The value to round.
- * @param {integer} [place=0] - The place to round to.
+ * @param {integer} [place=0] - The place to round to. Positive to round the units, negative to round the decimal.
  * @param {integer} [base=10] - The base to round in. Default is 10 for decimal.
  *
  * @return {number} The rounded value.