New CSS3 Filters component and Net class.

Phaser/Game.ts

@@ -8,6 +8,7 @@
 /// <reference path="core/Signal.ts" />
 /// <reference path="core/SignalBinding.ts" />
 /// <reference path="loader/Loader.ts" />
+/// <reference path="net/Net.ts" />
 /// <reference path="loader/Cache.ts" />
 /// <reference path="math/GameMath.ts" />
 /// <reference path="math/RandomDataGenerator.ts" />
@@ -208,6 +209,12 @@ module Phaser {
          */
         public motion: Motion;
 
+        /**
+         * Reference to the network class.
+         * @type {Net}
+         */
+        public net: Net;
+
         /**
          * Reference to the sound manager.
          * @type {SoundManager}
@@ -294,6 +301,7 @@ module Phaser {
             else
             {
                 this.device = new Device();
+                this.net = new Net(this);
                 this.motion = new Motion(this);
                 this.math = new GameMath(this);
                 this.stage = new Stage(this, parent, width, height);

Phaser/Phaser.csproj

@@ -64,6 +64,10 @@
     <TypeScriptCompile Include="Game.ts" />
     <TypeScriptCompile Include="components\sprite\Events.ts" />
     <TypeScriptCompile Include="components\sprite\Debug.ts" />
+    <TypeScriptCompile Include="components\CSS3Filters.ts" />
+    <Content Include="components\CSS3Filters.js">
+      <DependentUpon>CSS3Filters.ts</DependentUpon>
+    </Content>
     <Content Include="components\sprite\Debug.js">
       <DependentUpon>Debug.ts</DependentUpon>
     </Content>
@@ -178,6 +182,10 @@
     <Content Include="Motion.js">
       <DependentUpon>Motion.ts</DependentUpon>
     </Content>
+    <TypeScriptCompile Include="net\Net.ts" />
+    <Content Include="net\Net.js">
+      <DependentUpon>Net.ts</DependentUpon>
+    </Content>
     <Content Include="physics\Body.js">
       <DependentUpon>Body.ts</DependentUpon>
     </Content>

Phaser/Stage.ts

@@ -1,5 +1,6 @@
 /// <reference path="Phaser.ts" />
 /// <reference path="Game.ts" />
+/// <reference path="components/CSS3Filters.ts" />
 /// <reference path="system/StageScaleMode.ts" />
 /// <reference path="system/screens/BootScreen.ts" />
 /// <reference path="system/screens/PauseScreen.ts" />
@@ -52,6 +53,8 @@ module Phaser {
 
             this.context = this.canvas.getContext('2d');
 
+            this.css3 = new Phaser.Components.CSS3Filters(this.canvas);
+
             this.scaleMode = StageScaleMode.NO_SCALE;
             this.scale = new StageScaleMode(this._game, width, height);
 
@@ -97,6 +100,12 @@ module Phaser {
          */
         public orientationScreen;
 
+        /**
+         * Controls the CSS3 Filters applied to the Stages canvas object.
+         * @type {Phaser.Components.CSS3Filters}
+         */
+        public css3: Phaser.Components.CSS3Filters;
+
         /**
          * Bound of this stage.
          * @type {Rectangle}

Phaser/components/CSS3Filters.ts

@@ -0,0 +1,170 @@
+/// <reference path="../Game.ts" />
+
+/**
+* Phaser - Components - CSS3Filters
+*
+* Allows for easy addition and modification of CSS3 Filters on DOM objects (typically the Game.Stage.canvas).
+*/
+
+module Phaser.Components {
+
+    export class CSS3Filters {
+
+        /**
+         * Creates a new CSS3 Filter component
+         * @param parent The DOM object to apply the filters to.
+         */
+        constructor(parent) {
+            this.parent = parent;
+        }
+
+        /**
+         * Reference to the parent DOM object (stage.canvas for example)
+         */
+        public parent;
+
+        private _blur: number = 0;
+        private _grayscale: number = 0;
+        private _sepia: number = 0;
+        private _brightness: number = 0;
+        private _contrast: number = 0;
+        private _hueRotate: number = 0;
+        private _invert: number = 0;
+        private _opacity: number = 0;
+        private _saturate: number = 0;
+
+        private setFilter(local: string, prefix: string, value: number, unit: string) {
+
+            this[local] = value;
+
+            if (this.parent)
+            {
+                this.parent.style['-webkit-filter'] = prefix + '(' + value + unit + ')';
+            }
+
+        }
+
+        /**
+         * Applies a Gaussian blur to the DOM element. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, 
+         * or how many pixels on the screen blend into each other, so a larger value will create more blur.
+         * If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.
+         */
+        public set blur(radius?: number = 0) {
+            this.setFilter('_blur', 'blur', radius, 'px');
+        }
+
+        public get blur(): number {
+            return this._blur;
+        }
+
+        /**
+         * Converts the input image to grayscale. The value of ‘amount’ defines the proportion of the conversion.
+         * A value of 100% is completely grayscale. A value of 0% leaves the input unchanged.
+         * Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 100% is used.
+         */
+        public set grayscale(amount?: number = 100) {
+            this.setFilter('_grayscale', 'grayscale', amount, '%');
+        }
+
+        public get grayscale(): number {
+            return this._grayscale;
+        }
+
+        /**
+         * Converts the input image to sepia. The value of ‘amount’ defines the proportion of the conversion.
+         * A value of 100% is completely sepia. A value of 0 leaves the input unchanged.
+         * Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 100% is used.
+         */
+        public set sepia(amount?: number = 100) {
+            this.setFilter('_sepia', 'sepia', amount, '%');
+        }
+
+        public get sepia(): number {
+            return this._sepia;
+        }
+
+        /**
+         * Applies a linear multiplier to input image, making it appear more or less bright.
+         * A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged.
+         * Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results.
+         * If the ‘amount’ parameter is missing, a value of 100% is used.
+         */
+        public set brightness(amount?: number = 100) {
+            this.setFilter('_brightness', 'brightness', amount, '%');
+        }
+
+        public get brightness(): number {
+            return this._brightness;
+        }
+
+        /**
+         * Adjusts the contrast of the input. A value of 0% will create an image that is completely black.
+         * A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast.
+         * If the ‘amount’ parameter is missing, a value of 100% is used.
+         */
+        public set contrast(amount?: number = 100) {
+            this.setFilter('_contrast', 'contrast', amount, '%');
+        }
+
+        public get contrast(): number {
+            return this._contrast;
+        }
+
+        /**
+         * Applies a hue rotation on the input image. The value of ‘angle’ defines the number of degrees around the color circle 
+         * the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the ‘angle’ parameter is missing, 
+         * a value of 0deg is used. Maximum value is 360deg.
+         */
+        public set hueRotate(angle?: number = 0) {
+            this.setFilter('_hueRotate', 'hue-rotate', angle, 'deg');
+        }
+
+        public get hueRotate(): number {
+            return this._hueRotate;
+        }
+
+        /**
+         * Inverts the samples in the input image. The value of ‘amount’ defines the proportion of the conversion.
+         * A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
+         * Values between 0% and 100% are linear multipliers on the effect. If the ‘amount’ parameter is missing, a value of 100% is used.
+         */
+        public set invert(value?: number = 100) {
+            this.setFilter('_invert', 'invert', value, '%');
+        }
+
+        public get invert(): number {
+            return this._invert;
+        }
+
+        /**
+         * Applies transparency to the samples in the input image. The value of ‘amount’ defines the proportion of the conversion.
+         * A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
+         * Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount.
+         * If the ‘amount’ parameter is missing, a value of 100% is used.
+         * This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
+         */
+        public set opacity(value?: number = 100) {
+            this.setFilter('_opacity', 'opacity', value, '%');
+        }
+
+        public get opacity(): number {
+            return this._opacity;
+        }
+
+        /**
+         * Saturates the input image. The value of ‘amount’ defines the proportion of the conversion.
+         * A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
+         * Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results.
+         * If the ‘amount’ parameter is missing, a value of 100% is used.
+         */
+        public set saturate(value?: number = 100) {
+            this.setFilter('_saturate', 'saturate', value, '%');
+        }
+
+        public get saturate(): number {
+            return this._saturate;
+        }
+
+    }
+
+}

Phaser/components/sprite/Input.ts

@@ -311,6 +311,7 @@ module Phaser.Components.Sprite {
 
             if (this.enabled == false || this._parent.visible == false)
             {
+                this._pointerOutHandler(pointer);
                 return false;
             }
 

Phaser/gameobjects/DynamicTexture.ts

@@ -34,6 +34,8 @@ module Phaser {
             this.canvas.height = height;
             this.context = this.canvas.getContext('2d');
 
+            this.css3 = new Phaser.Components.CSS3Filters(this.canvas);
+
             this.bounds = new Rectangle(0, 0, width, height);
 
         }
@@ -59,6 +61,13 @@ module Phaser {
 
         //  Input / Output nodes?
 
+        /**
+         * Controls the CSS3 Filters applied to the textures canvas object.
+         * Only really useful if you attach this canvas to the DOM.
+         * @type {Phaser.Components.CSS3Filters}
+         */
+        public css3: Phaser.Components.CSS3Filters;
+
         /**
          * Bound of this texture with width and height info.
          * @type {Rectangle}

Phaser/net/Net.ts

@@ -0,0 +1,135 @@
+/// <reference path="../Game.ts" />
+
+/**
+* Phaser - Net
+*
+* 
+*/
+
+module Phaser {
+
+    export class Net {
+
+        /**
+         * Net constructor
+         */
+        constructor(game: Game) {
+
+            this.game = game;
+
+        }
+
+        /**
+         * Local reference to the current Phaser.Game.
+         */
+        public game: Game;
+
+        /**
+         * Compares the given domain name against the hostname of the browser containing the game.
+         * If the domain name is found it returns true.
+         * You can specify a part of a domain, for example 'google' would match 'google.com', 'google.co.uk', etc.
+         * Do not include 'http://' at the start.
+         */
+        public checkDomainName(domain: string): bool {
+            return window.location.hostname.indexOf(domain) !== -1;
+        }
+
+        /**
+         * Updates a value on the Query String and returns it in full.
+         * If the value doesn't already exist it is set.
+         * If the value exists it is replaced with the new value given. If you don't provide a new value it is removed from the query string.
+         * Optionally you can redirect to the new url, or just return it as a string.
+         */
+        public updateQueryString(key: string, value: string, redirect?:bool = false, url?: string = ''):string {
+
+            if (url == '')
+            {
+                url = window.location.href;
+            }
+
+            var output: string = '';
+
+            var re:RegExp = new RegExp("([?|&])" + key + "=.*?(&|#|$)(.*)", "gi");
+
+            if (re.test(url))
+            {
+                if (typeof value !== 'undefined' && value !== null)
+                {
+                    output = url.replace(re, '$1' + key + "=" + value + '$2$3');
+                }
+                else
+                {
+                    output = url.replace(re, '$1$3').replace(/(&|\?)$/, '');
+                }
+            }
+            else
+            {
+                if (typeof value !== 'undefined' && value !== null)
+                {
+                    var separator = url.indexOf('?') !== -1 ? '&' : '?';
+                    var hash = url.split('#');
+
+                    url = hash[0] + separator + key + '=' + value;
+
+                    if (hash[1])
+                    {
+                        url += '#' + hash[1];
+                    }
+
+                    output = url;
+                }
+                else
+                {
+                    output = url;
+                }
+            }
+
+            if (redirect)
+            {
+                window.location.href = output;
+            }
+            else
+            {
+                return output;
+            }
+
+        }
+
+        /**
+         * Returns the Query String as an object.
+         * If you specify a parameter it will return just the value of that parameter, should it exist.
+         */
+        public getQueryString(parameter?: string = '') {
+
+            var output = {};
+            var keyValues = location.search.substring(1).split('&');
+
+            for (var i in keyValues)
+            {
+                var key = keyValues[i].split('=');
+
+                if (key.length > 1)
+                {
+                    if (parameter && parameter == this.decodeURI(key[0]))
+                    {
+                        return this.decodeURI(key[1]);
+                    }
+                    else
+                    {
+                        output[this.decodeURI(key[0])] = this.decodeURI(key[1]);
+                    }
+                }
+            }
+
+            return output;
+
+        }
+
+        private decodeURI(value: string): string {
+            return decodeURIComponent(value.replace(/\+/g, " "));
+        }
+
+
+    }
+
+}

Phaser/sound/SoundManager.ts

@@ -4,7 +4,6 @@
 /**
 * Phaser - SoundManager
 *
-* This is an embroyonic web audio sound management class. There is a lot of work still to do here.
 */
 
 module Phaser {