/*!

* Crafty v0.5.3

* http://craftyjs.com

*

* Copyright 2010, Louis Stowasser

* Dual licensed under the MIT or GPL licenses.

*/

(function (window, initComponents, undefined) {

/**@

* #Crafty

* @category Core

* Select a set of or single entities by components or an entity's ID.

*

* Crafty uses syntax similar to jQuery by having a selector engine to select entities by their components.

*

* @example

* ~~~

* Crafty("MyComponent")

* Crafty("Hello 2D Component")

* Crafty("Hello, 2D, Component")

* ~~~

*

* The first selector will return all entities that have the component `MyComponent`. The second will return all entities that have `Hello` and `2D` and `Component` whereas the last will return all entities that have at least one of those components (or).

*

* ~~~

* Crafty("*")

* ~~~

* Passing `*` will select all entities.

*

* ~~~

* Crafty(1)

* ~~~

* Passing an integer will select the entity with that `ID`.

*

* Finding out the `ID` of an entity can be done by returning the property `0`.

* ~~~

* var ent = Crafty.e("2D");

* ent[0]; //ID

* ~~~

*/

var Crafty = function (selector) {

return new Crafty.fn.init(selector);

},

GUID, FPS, frame, components, entities, handlers, onloads, tick, requestID,

noSetter, loops, milliSecPerFrame, nextGameTick, slice, rlist, rspace,

initState = function () {

GUID = 1; //GUID for entity IDs

FPS = 50;

frame = 1;

components = {}; //map of components and their functions

entities = {}; //map of entities and their data

entityFactories = {}; //templates of entities

handlers = {}; //global event handlers

onloads = []; //temporary storage of onload handlers

tick;

/*

* `window.requestAnimationFrame` or its variants is called for animation.

* `.requestID` keeps a record of the return value previous `window.requestAnimationFrame` call.

* This is an internal variable. Used to stop frame.

*/

requestID;

noSetter;

loops = 0;

milliSecPerFrame = 1000 / FPS;

nextGameTick = (new Date).getTime();

slice = Array.prototype.slice;

rlist = /\s*,\s*/;

rspace = /\s+/;

};

initState();

/**@

* #Crafty Core

* @category Core

* @trigger NewEntityName - After setting new name for entity - String - entity name

* @trigger NewComponent - when a new component is added to the entity - String - Component

* @trigger RemoveComponent - when a component is removed from the entity - String - Component

* @trigger Remove - when the entity is removed by calling .destroy()

*

* Set of methods added to every single entity.

*/

Crafty.fn = Crafty.prototype = {

init: function (selector) {

//select entities by component

if (typeof selector === "string") {

var elem = 0, //index elements

e, //entity forEach

current,

and = false, //flags for multiple

or = false,

del,

comps,

score,

i, l;

if (selector === '*') {

for (e in entities) {

this[+e] = entities[e];

elem++;

}

this.length = elem;

return this;

}

//multiple components OR

if (selector.indexOf(',') !== -1) {

or = true;

del = rlist;

//deal with multiple components AND

} else if (selector.indexOf(' ') !== -1) {

and = true;

del = rspace;

}

//loop over entities

for (e in entities) {

if (!entities.hasOwnProperty(e)) continue; //skip

current = entities[e];

if (and || or) { //multiple components

comps = selector.split(del);

i = 0;

l = comps.length;

score = 0;

for (; i < l; i++) //loop over components

if (current.__c[comps[i]]) score++; //if component exists add to score

//if anded comps and has all OR ored comps and at least 1

if (and && score === l || or && score > 0) this[elem++] = +e;

} else if (current.__c[selector]) this[elem++] = +e; //convert to int

}

//extend all common components

if (elem > 0 && !and && !or) this.extend(components[selector]);

if (comps && and) for (i = 0; i < l; i++) this.extend(components[comps[i]]);

this.length = elem; //length is the last index (already incremented)

// if there's only one entity, return the actual entity

if (elem === 1) {

return entities[this[elem-1]];

}

} else { //Select a specific entity

if (!selector) { //nothin passed creates God entity

selector = 0;

if (!(selector in entities)) entities[selector] = this;

}

//if not exists, return undefined

if (!(selector in entities)) {

this.length = 0;

return this;

}

this[0] = selector;

this.length = 1;

//update from the cache

if (!this.__c) this.__c = {};

//update to the cache if NULL

if (!entities[selector]) entities[selector] = this;

return entities[selector]; //return the cached selector

}

return this;

},

/**@

* #.setName

* @comp Crafty Core

* @sign public this .setName(String name)

* @param name - A human readable name for debugging purposes.

*

* @example

* ~~~

* this.setName("Player");

* ~~~

*/

setName: function (name) {

var entityName = String(name);

this._entityName = entityName;

this.trigger("NewEntityName", entityName);

return this;

},

/**@

* #.addComponent

* @comp Crafty Core

* @sign public this .addComponent(String componentList)

* @param componentList - A string of components to add separated by a comma `,`

* @sign public this .addComponent(String Component1[, .., String ComponentN])

* @param Component# - Component ID to add.

* Adds a component to the selected entities or entity.

*

* Components are used to extend the functionality of entities.

* This means it will copy properties and assign methods to

* augment the functionality of the entity.

*

* There are multiple methods of adding components. Passing a

* string with a list of component names or passing multiple

* arguments with the component names.

*

* If the component has a function named `init` it will be called.

*

* @example

* ~~~

* this.addComponent("2D, Canvas");

* this.addComponent("2D", "Canvas");

* ~~~

*/

addComponent: function (id) {

var uninit = [], c = 0, ul, //array of components to init

i = 0, l, comps;

//add multiple arguments

if (arguments.length > 1) {

l = arguments.length;

for (; i < l; i++) {

this.__c[arguments[i]] = true;

uninit.push(arguments[i]);

}

//split components if contains comma

} else if (id.indexOf(',') !== -1) {

comps = id.split(rlist);

l = comps.length;

for (; i < l; i++) {

this.__c[comps[i]] = true;

uninit.push(comps[i]);

}

//single component passed

} else {

this.__c[id] = true;

uninit.push(id);

}

//extend the components

ul = uninit.length;

for (; c < ul; c++) {

comp = components[uninit[c]];

this.extend(comp);

//if constructor, call it

if (comp && "init" in comp) {

comp.init.call(this);

}

}

this.trigger("NewComponent", ul);

return this;

},

/**@

* #.toggleComponent

* @comp Crafty Core

* @sign public this .toggleComponent(String ComponentList)

* @param ComponentList - A string of components to add or remove separated by a comma `,`

* @sign public this .toggleComponent(String Component1[, .., String componentN])

* @param Component# - Component ID to add or remove.

* Add or Remove Components from an entity.

*

* @example

* ~~~

* var e = Crafty.e("2D,DOM,Test");

* e.toggleComponent("Test,Test2"); //Remove Test, add Test2

* e.toggleComponent("Test,Test2"); //Add Test, remove Test2

* ~~~

*

* ~~~

* var e = Crafty.e("2D,DOM,Test");

* e.toggleComponent("Test","Test2"); //Remove Test, add Test2

* e.toggleComponent("Test","Test2"); //Add Test, remove Test2

* e.toggleComponent("Test"); //Remove Test

* ~~~

*/

toggleComponent:function(toggle){

var i = 0, l, comps;

if (arguments.length > 1) {

l = arguments.length;

for (; i < l; i++) {

if(this.has(arguments[i])){

this.removeComponent(arguments[i]);

}else{

this.addComponent(arguments[i]);

}

}

//split components if contains comma

} else if (toggle.indexOf(',') !== -1) {

comps = toggle.split(rlist);

l = comps.length;

for (; i < l; i++) {

if(this.has(comps[i])){

this.removeComponent(comps[i]);

}else{

this.addComponent(comps[i]);

}

}

//single component passed

} else {

if(this.has(toggle)){

this.removeComponent(toggle);

}else{

this.addComponent(toggle);

}

}

return this;

},

/**@

* #.requires

* @comp Crafty Core

* @sign public this .requires(String componentList)

* @param componentList - List of components that must be added

*

* Makes sure the entity has the components listed. If the entity does not

* have the component, it will add it.

*

* @see .addComponent

*/

requires: function (list) {

var comps = list.split(rlist),

i = 0, l = comps.length,

comp;

//loop over the list of components and add if needed

for (; i < l; ++i) {

comp = comps[i];

if (!this.has(comp)) this.addComponent(comp);

}

return this;

},

/**@

* #.removeComponent

* @comp Crafty Core

* @sign public this .removeComponent(String Component[, soft])

* @param component - Component to remove

* @param soft - Whether to soft remove it (defaults to `true`)

*

* Removes a component from an entity. A soft remove (the default) will only

* refrain `.has()` from returning true. Hard will remove all

* associated properties and methods.

*

* @example

* ~~~

* var e = Crafty.e("2D,DOM,Test");

* e.removeComponent("Test"); //Soft remove Test component

* e.removeComponent("Test", false); //Hard remove Test component

* ~~~

*/

removeComponent: function (id, soft) {

if (soft === false) {

var props = components[id], prop;

for (prop in props) {

delete this[prop];

}

}

delete this.__c[id];

this.trigger("RemoveComponent", id);

return this;

},

/**@

* #.has

* @comp Crafty Core

* @sign public Boolean .has(String component)

* Returns `true` or `false` depending on if the

* entity has the given component.

*

* For better performance, simply use the `.__c` object

* which will be `true` if the entity has the component or

* will not exist (or be `false`).

*/

has: function (id) {

return !!this.__c[id];

},

/**@

* #.attr

* @comp Crafty Core

* @sign public this .attr(String property, * value)

* @param property - Property of the entity to modify

* @param value - Value to set the property to

* @sign public this .attr(Object map)

* @param map - Object where the key is the property to modify and the value as the property value

* @trigger Change - when properties change - {key: value}

*

* Use this method to set any property of the entity.

*

* @example

* ~~~

* this.attr({key: "value", prop: 5});

* this.key; //value

* this.prop; //5

*

* this.attr("key", "newvalue");

* this.key; //newvalue

* ~~~

*/

attr: function (key, value) {

if (arguments.length === 1) {

//if just the key, return the value

if (typeof key === "string") {

return this[key];

}

//extend if object

this.extend(key);

this.trigger("Change", key); //trigger change event

return this;

}

//if key value pair

this[key] = value;

var change = {};

change[key] = value;

this.trigger("Change", change); //trigger change event

return this;

},

/**@

* #.toArray

* @comp Crafty Core

* @sign public this .toArray(void)

*

* This method will simply return the found entities as an array.

*/

toArray: function () {

return slice.call(this, 0);

},

/**@

* #.timeout

* @comp Crafty Core

* @sign public this .timeout(Function callback, Number delay)

* @param callback - Method to execute after given amount of milliseconds

* @param delay - Amount of milliseconds to execute the method

*

* The delay method will execute a function after a given amount of time in milliseconds.

*

* Essentially a wrapper for `setTimeout`.

*

* @example

* Destroy itself after 100 milliseconds

* ~~~

* this.timeout(function() {

this.destroy();

* }, 100);

* ~~~

*/

timeout: function (callback, duration) {

this.each(function () {

var self = this;

setTimeout(function () {

callback.call(self);

}, duration);

});

return this;

},

/**@

* #.bind

* @comp Crafty Core

* @sign public this .bind(String eventName, Function callback)

* @param eventName - Name of the event to bind to

* @param callback - Method to execute when the event is triggered

* Attach the current entity (or entities) to listen for an event.

*

* Callback will be invoked when an event with the event name passed

* is triggered. Depending on the event, some data may be passed

* via an argument to the callback function.

*

* The first argument is the event name (can be anything) whilst the

* second argument is the callback. If the event has data, the

* callback should have an argument.

*

* Events are arbitrary and provide communication between components.

* You can trigger or bind an event even if it doesn't exist yet.

*

* @example

* ~~~

* this.attr("triggers", 0); //set a trigger count

* this.bind("myevent", function() {

* this.triggers++; //whenever myevent is triggered, increment

* });

* this.bind("EnterFrame", function() {

* this.trigger("myevent"); //trigger myevent on every frame

* });

* ~~~

*

* @see .trigger, .unbind

*/

bind: function (event, callback) {

//optimization for 1 entity

if (this.length === 1) {

if (!handlers[event]) handlers[event] = {};

var h = handlers[event];

if (!h[this[0]]) h[this[0]] = []; //init handler array for entity

h[this[0]].push(callback); //add current callback

return this;

}

this.each(function () {

//init event collection

if (!handlers[event]) handlers[event] = {};

var h = handlers[event];

if (!h[this[0]]) h[this[0]] = []; //init handler array for entity

h[this[0]].push(callback); //add current callback

});

return this;

},

/**@

* #.unbind

* @comp Crafty Core

* @sign public this .unbind(String eventName[, Function callback])

* @param eventName - Name of the event to unbind

* @param callback - Function to unbind

* Removes binding with an event from current entity.

*

* Passing an event name will remove all events bound to

* that event. Passing a reference to the callback will

* unbind only that callback.

* @see .bind, .trigger

*/

unbind: function (event, callback) {

this.each(function () {

var hdl = handlers[event], i = 0, l, current;

//if no events, cancel

if (hdl && hdl[this[0]]) l = hdl[this[0]].length;

else return this;

//if no function, delete all

if (!callback) {

delete hdl[this[0]];

return this;

}

//look for a match if the function is passed

for (; i < l; i++) {

current = hdl[this[0]];

if (current[i] == callback) {

current.splice(i, 1);

i--;

}

}

});

return this;

},

/**@

* #.trigger

* @comp Crafty Core

* @sign public this .trigger(String eventName[, Object data])

* @param eventName - Event to trigger

* @param data - Arbitrary data that will be passed into every callback as an argument

* Trigger an event with arbitrary data. Will invoke all callbacks with

* the context (value of `this`) of the current entity object.

*

* *Note: This will only execute callbacks within the current entity, no other entity.*

*

* The first argument is the event name to trigger and the optional

* second argument is the arbitrary event data. This can be absolutely anything.

*/

trigger: function (event, data) {

if (this.length === 1) {

//find the handlers assigned to the event and entity

if (handlers[event] && handlers[event][this[0]]) {

var callbacks = handlers[event][this[0]], i = 0, l = callbacks.length;

for (; i < l; i++) {

callbacks[i].call(this, data);

}

}

return this;

}

this.each(function () {

//find the handlers assigned to the event and entity

if (handlers[event] && handlers[event][this[0]]) {

var callbacks = handlers[event][this[0]], i = 0, l = callbacks.length;

for (; i < l; i++) {

callbacks[i].call(this, data);

}

}

});

return this;

},

/**@

* #.each

* @sign public this .each(Function method)

* @param method - Method to call on each iteration

* Iterates over found entities, calling a function for every entity.

*

* The function will be called for every entity and will pass the index

* in the iteration as an argument. The context (value of `this`) of the

* function will be the current entity in the iteration.

*

* @example

* Destroy every second 2D entity

* ~~~

* Crafty("2D").each(function(i) {

* if(i % 2 === 0) {

* this.destroy();

* }

* });

* ~~~

*/

each: function (func) {

var i = 0, l = this.length;

for (; i < l; i++) {

//skip if not exists

if (!entities[this[i]]) continue;

func.call(entities[this[i]], i);

}

return this;

},

/**@

* #.clone

* @comp Crafty Core

* @sign public Entity .clone(void)

* @returns Cloned entity of the current entity

*

* Method will create another entity with the exact same

* properties, components and methods as the current entity.

*/

clone: function () {

var comps = this.__c,

comp,

prop,

clone = Crafty.e();

for (comp in comps) {

clone.addComponent(comp);

}

for (prop in this) {

if (prop != "0" && prop != "_global" && prop != "_changed" && typeof this[prop] != "function" && typeof this[prop] != "object") {

clone[prop] = this[prop];

}

}

return clone;

},

/**@

* #.setter

* @comp Crafty Core

* @sign public this .setter(String property, Function callback)

* @param property - Property to watch for modification

* @param callback - Method to execute if the property is modified

* Will watch a property waiting for modification and will then invoke the

* given callback when attempting to modify.

*

* *Note: Support in IE<9 is slightly different. The method will be executed

* after the property has been set*

*/

setter: function (prop, callback) {

if (Crafty.support.setter) {

this.__defineSetter__(prop, callback);

} else if (Crafty.support.defineProperty) {

Object.defineProperty(this, prop, {

set: callback,

configurable: true

});

} else {

noSetter.push({

prop: prop,

obj: this,

fn: callback

});

}

return this;

},

/**@

* #.destroy

* @comp Crafty Core

* @sign public this .destroy(void)

* Will remove all event listeners and delete all properties as well as removing from the stage

*/

destroy: function () {

//remove all event handlers, delete from entities

this.each(function () {

this.trigger("Remove");

for (var e in handlers) {

this.unbind(e);

}

delete entities[this[0]];

});

}

};

//give the init instances the Crafty prototype

Crafty.fn.init.prototype = Crafty.fn;

/**

* Extension method to extend the namespace and

* selector instances

*/

Crafty.extend = Crafty.fn.extend = function (obj) {

var target = this, key;

//don't bother with nulls

if (!obj) return target;

for (key in obj) {

if (target === obj[key]) continue; //handle circular reference

target[key] = obj[key];

}

return target;

};

/**@

* #Crafty.extend

* @category Core

* Used to extend the Crafty namespace.

*/

Crafty.extend({

/**@

* #Crafty.init

* @category Core

* @trigger EnterFrame - on each frame - { frame: Number }

* @trigger Load - Just after the viewport is initialised. Before the EnterFrame loops is started

* @sign public this Crafty.init([Number width, Number height])

* @param width - Width of the stage

* @param height - Height of the stage

*

* Create a div with id `cr-stage`, if there is not already an HTMLElement with id `cr-stage` (by `Crafty.viewport.init`).

*

* Starts the `EnterFrame` interval. This will call the `EnterFrame` event for every frame.

*

* Can pass width and height values for the stage otherwise will default to window size (see `Crafty.DOM.window`).

*

* All `Load` events will be executed.

*

* Uses `requestAnimationFrame` to sync the drawing with the browser but will default to `setInterval` if the browser does not support it.

* @see Crafty.stop, Crafty.viewport

*/

init: function (w, h) {

Crafty.viewport.init(w, h);

//call all arbitrary functions attached to onload

this.trigger("Load");

this.timer.init();

return this;

},

/**@

* #.getVersion

* @comp Crafty Core

* @sign public this .getVersion()

* @returns Actually crafty version

*

* @example

* ~~~

* Crafty.getVersion(); //'0.5.2'

* ~~~

*/

getVersion: function () {

return '0.5.3';

},

/**@

* #Crafty.stop

* @category Core

* @trigger CraftyStop - when the game is stopped

* @sign public this Crafty.stop([bool clearState])

* @param clearState - if true the stage and all game state is cleared.

*

* Stops the EnterFrame interval and removes the stage element.

*

* To restart, use `Crafty.init()`.

* @see Crafty.init

*/

stop: function (clearState) {

this.timer.stop();

if (clearState) {

if (Crafty.stage && Crafty.stage.elem.parentNode) {

var newCrStage = document.createElement('div');

newCrStage.id = "cr-stage";

Crafty.stage.elem.parentNode.replaceChild(newCrStage, Crafty.stage.elem);

}

initState();

initComponents(Crafty, window, window.document);

}

Crafty.trigger("CraftyStop");

return this;

},

/**@

* #Crafty.pause

* @category Core

* @trigger Pause - when the game is paused

* @trigger Unpause - when the game is unpaused

* @sign public this Crafty.pause(void)

*

* Pauses the game by stopping the EnterFrame event from firing. If the game is already paused it is unpaused.

* You can pass a boolean parameter if you want to pause or unpause mo matter what the current state is.

* Modern browsers pauses the game when the page is not visible to the user. If you want the Pause event

* to be triggered when that happens you can enable autoPause in `Crafty.settings`.

*

* @example

* Have an entity pause the game when it is clicked.

* ~~~

* button.bind("click", function() {

* Crafty.pause();

* });

* ~~~

*/

pause: function (toggle) {

if (arguments.length == 1 ? toggle : !this._paused) {

this.trigger('Pause');

this._paused = true;

setTimeout(function(){ Crafty.timer.stop(); }, 0);

Crafty.keydown = {};

} else {

this.trigger('Unpause');

this._paused = false;

setTimeout(function(){ Crafty.timer.init(); }, 0);

}

return this;

},

/**@

* #Crafty.isPaused

* @category Core

* @sign public this Crafty.isPaused()

*

* Check whether the game is already paused or not.

*

* @example

* ~~~

* Crafty.isPaused();

* ~~~

*/

isPaused: function () {

return this._paused;

},

/**@

* #Crafty.timer

* @category Internal

* Handles game ticks

*/

timer: {

prev: (+new Date),

current: (+new Date),

currentTime: +new Date(),

frames:0,

frameTime:0,

init: function () {

var onFrame = window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

null;

if (onFrame) {

tick = function () {

Crafty.timer.step();

requestID = onFrame(tick);

//console.log(requestID + ', ' + frame)

}

tick();

} else {

tick = setInterval(function () { Crafty.timer.step(); }, 1000 / FPS);

}

},

stop: function () {

Crafty.trigger("CraftyStopTimer");

if (typeof tick === "number") clearInterval(tick);

var onFrame = window.cancelRequestAnimationFrame ||

window.webkitCancelRequestAnimationFrame ||

window.mozCancelRequestAnimationFrame ||

window.oCancelRequestAnimationFrame ||

window.msCancelRequestAnimationFrame ||

null;

if (onFrame) onFrame(requestID);

tick = null;

},

/**@

* #Crafty.timer.step

* @comp Crafty.timer

* @sign public void Crafty.timer.step()

* Advances the game by triggering `EnterFrame` and calls `Crafty.DrawManager.draw` to update the stage.

*/

step: function () {

loops = 0;

this.currentTime = +new Date();

if (this.currentTime - nextGameTick > 60 * milliSecPerFrame) {

nextGameTick = this.currentTime - milliSecPerFrame;

}

while (this.currentTime > nextGameTick) {

Crafty.trigger("EnterFrame", { frame: frame++ });

nextGameTick += milliSecPerFrame;

loops++;

}

if (loops) {

Crafty.DrawManager.draw();

}

if(this.currentTime > this.frameTime){

Crafty.trigger("MessureFPS",{value:this.frame});

this.frame = 0;

this.frameTime = this.currentTime + 1000;

}else{

this.frame++;

}

},

/**@

* #Crafty.timer.getFPS

* @comp Crafty.timer

* @sign public void Crafty.timer.getFPS()

* Returns the target frames per second. This is not an actual frame rate.

*/

getFPS: function () {

return FPS;

},

/**@

* #Crafty.timer.simulateFrames

* @comp Crafty.timer

* Advances the game state by a number of frames and draws the resulting stage at the end. Useful for tests and debugging.

* @sign public this Crafty.timer.simulateFrames(Number frames)

* @param frames - number of frames to simulate

*/

simulateFrames: function (frames) {

while (frames-- > 0) {

Crafty.trigger("EnterFrame", { frame: frame++ });

}

Crafty.DrawManager.draw();

}

},

/**@

* #Crafty.addEntityFactory

* @category Core

* @param name - Name of the entity factory.

* @param callback - Function containing the entity creation procedure.

*

* Registers an Entity Factory. An Entity Factory allows for the repeatable creation of an Entity.

*

* @example

* ~~~

* Crafty.addEntityFactory('Projectile', function() {

* var entity = Crafty.e('2D, Canvas, Color, Physics, Collision')

* .color("red")

* .attr({

* w: 3,

* h: 3,

* x: this.x,

* y: this.y

* })

* .addComponent('Gravity').gravity("Floor");

*

* return entity;

* });

* ~~~

*

* @see Crafty.e

*/

addEntityFactory: function(name, callback) {

this.entityFactories[name] = callback;