├── .bowerrc
├── javascripts
    └── main.js
├── images
    ├── hr.png
    ├── body-bg.png
    ├── zip-icon.png
    ├── highlight-bg.jpg
    ├── octocat-icon.png
    └── tar-gz-icon.png
├── .gitignore
├── example
    ├── UIpack
    │   ├── blueSheet.png
    │   ├── license.txt
    │   └── blueSheet.xml
    ├── game.js
    └── index.htm
├── src
    ├── js
    │   ├── directives
    │   │   ├── phaserInspectorTree.js
    │   │   ├── phaserInspectorDetails.js
    │   │   ├── viewCollection.js
    │   │   ├── view.js
    │   │   └── interaction.js
    │   ├── plugins
    │   │   ├── ScalePlugin.js
    │   │   ├── PositionPlugin.js
    │   │   ├── WorldPlugin.js
    │   │   ├── AnchorPlugin.js
    │   │   ├── SizePlugin.js
    │   │   ├── BoundsPlugin.js
    │   │   ├── TargetSizePlugin.js
    │   │   └── FrameRenderPlugin.js
    │   ├── app.js
    │   ├── classes
    │   │   ├── Vector.js
    │   │   ├── VectorDetailPlugin.js
    │   │   ├── DetailPlugin.js
    │   │   └── DisplayObject.js
    │   ├── controllers
    │   │   ├── ViewCtrl.js
    │   │   ├── TreeCtrl.js
    │   │   └── DetailCtrl.js
    │   └── services
    │   │   └── GameManager.js
    ├── tpl
    │   ├── app.html
    │   ├── tree
    │   │   └── view.html
    │   ├── tree.html
    │   └── details.html
    ├── index.js
    └── css
    │   └── main.sass
├── bower.json
├── gulpfile.js
├── stylesheets
    ├── github-dark.css
    ├── github-light.css
    ├── print.css
    ├── stylesheet.css
    └── normalize.css
├── params.json
├── README.md
└── index.html


/.bowerrc:
--------------------------------------------------------------------------------
1 | { "directory": "example/lib" }


--------------------------------------------------------------------------------
/javascripts/main.js:
--------------------------------------------------------------------------------
1 | console.log('This would be the main JS file.');
2 | 


--------------------------------------------------------------------------------
/images/hr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netcell/phaser-inspector/HEAD/images/hr.png


--------------------------------------------------------------------------------
/images/body-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netcell/phaser-inspector/HEAD/images/body-bg.png


--------------------------------------------------------------------------------
/images/zip-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netcell/phaser-inspector/HEAD/images/zip-icon.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | example/lib
3 | bower_components
4 | src/css/main.css
5 | .DS_Store
6 | 


--------------------------------------------------------------------------------
/images/highlight-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netcell/phaser-inspector/HEAD/images/highlight-bg.jpg


--------------------------------------------------------------------------------
/images/octocat-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netcell/phaser-inspector/HEAD/images/octocat-icon.png


--------------------------------------------------------------------------------
/images/tar-gz-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netcell/phaser-inspector/HEAD/images/tar-gz-icon.png


--------------------------------------------------------------------------------
/example/UIpack/blueSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netcell/phaser-inspector/HEAD/example/UIpack/blueSheet.png


--------------------------------------------------------------------------------
/src/js/directives/phaserInspectorTree.js:
--------------------------------------------------------------------------------
1 | var treeTpl = require('../../tpl/tree.html');
2 | 
3 | export default function($compile) {
4 | 	return {
5 | 		controller   : 'TreeCtrl',
6 | 		controllerAs : 'treeCtrl',
7 | 		template     : treeTpl
8 | 	};
9 | };


--------------------------------------------------------------------------------
/src/js/directives/phaserInspectorDetails.js:
--------------------------------------------------------------------------------
1 | var detailsTpl = require('../../tpl/details.html');
2 | 
3 | export default function($compile) {
4 | 	return {
5 | 		controller   : 'DetailCtrl',
6 | 		controllerAs : 'detailCtrl',
7 | 		template     : detailsTpl
8 | 	};
9 | };


--------------------------------------------------------------------------------
/src/js/directives/viewCollection.js:
--------------------------------------------------------------------------------
 1 | export default function($q, $compile) {
 2 | 	return {
 3 | 		replace : true,
 4 | 		scope   : {
 5 | 			parent   : '=',
 6 | 			filtered : '='
 7 | 		},
 8 | 		template : '<view ng-repeat="obj in parent" obj="obj"></view>',
 9 | 		link : function(scope, element){
10 | 			element.attr('filtered', scope.filtered);
11 | 			$compile(element)(scope);
12 | 		}
13 | 	};
14 | };


--------------------------------------------------------------------------------
/example/UIpack/license.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | ###############################################################################
 3 | 
 4 | 	UI pack by Kenney Vleugels (www.kenney.nl)
 5 | 
 6 | 			------------------------------
 7 | 
 8 | 			        License (CC0)
 9 | 	       http://creativecommons.org/publicdomain/zero/1.0/
10 | 
11 | 	You may use these graphics in personal and commercial projects.
12 | 	Credit (Kenney or www.kenney.nl) would be nice but is not mandatory.
13 | 
14 | ###############################################################################


--------------------------------------------------------------------------------
/src/tpl/app.html:
--------------------------------------------------------------------------------
 1 | <div class="phaser-inspector-panel" ng-init="display={}" ng-class="{collapsed: display.hide}">
 2 | 	<div class="grabber">
 3 | 		<div class="close" ng-click="display.hide = !display.hide">
 4 | 			<i class="fa" ng-class="{'fa-bars': display.hide, 'fa-times-circle':!display.hide}"></i>
 5 | 		</div>
 6 | 	</div>
 7 | 
 8 | 	<div id="tree" phaser-inspector-tree class="panel" ng-if="!display.hide"></div>
 9 | 
10 | 	<div id="details" phaser-inspector-details class="panel" ng-if="!display.hide"></div>
11 | </div>
12 | <div class="tooltip" pg-ng-tooltip></div>


--------------------------------------------------------------------------------
/src/js/plugins/ScalePlugin.js:
--------------------------------------------------------------------------------
 1 | var VectorDetailPlugin = require('../classes/VectorDetailPlugin');
 2 | 
 3 | export default class ScalePlugin extends VectorDetailPlugin {
 4 | 	constructor(){
 5 | 		super({
 6 | 			header : 'Scale',
 7 | 			fields : [{
 8 | 				detail : {
 9 | 					data  : 'x',
10 | 					flex  : 8,
11 | 					input : true,
12 | 					type  : 'number'
13 | 				}
14 | 			},{
15 | 				detail : {
16 | 					data  : 'y',
17 | 					flex  : 8,
18 | 					input : true,
19 | 					type  : 'number'
20 | 				}
21 | 			}]
22 | 		});
23 | 	}
24 | 	update(obj){
25 | 		super.update(obj.scale);
26 | 	}
27 | }


--------------------------------------------------------------------------------
/src/js/app.js:
--------------------------------------------------------------------------------
 1 | export default angular.module('app', ['ngStorage', 'pasvaz.bindonce', 'pg-ng-tooltip'])
 2 | .directive('bindHtmlUnsafe', function( $parse, $compile ) {
 3 |     return function( $scope, $element, $attrs ) {
 4 |         var compile = function( newHTML ) {
 5 |             newHTML = $compile(newHTML)($scope);
 6 |             $element.html('').append(newHTML);
 7 |         };
 8 | 
 9 |         var htmlName = $attrs.bindHtmlUnsafe;
10 | 
11 |         $scope.$watch(htmlName, function( newHTML ) {
12 |             if(!newHTML) return;
13 |             compile(newHTML);
14 |         });
15 | 
16 |     };
17 | });
18 | 


--------------------------------------------------------------------------------
/src/js/plugins/PositionPlugin.js:
--------------------------------------------------------------------------------
 1 | var VectorDetailPlugin = require('../classes/VectorDetailPlugin');
 2 | 
 3 | export default class PositionPlugin extends VectorDetailPlugin {
 4 | 	constructor(){
 5 | 		super({
 6 | 			header : 'Position',
 7 | 			fields : [{
 8 | 				detail : {
 9 | 					data        : 'x',
10 | 					flex        : 8,
11 | 					input       : true,
12 | 					type        : 'number'
13 | 				}
14 | 			},{
15 | 				detail : {
16 | 					data        : 'y',
17 | 					flex        : 8,
18 | 					input       : true,
19 | 					type        : 'number'
20 | 				}
21 | 			}]
22 | 		});
23 | 	}
24 | 	update(obj){
25 | 		super.update(obj.position);
26 | 	}
27 | }


--------------------------------------------------------------------------------
/src/js/plugins/WorldPlugin.js:
--------------------------------------------------------------------------------
 1 | var VectorDetailPlugin = require('../classes/VectorDetailPlugin');
 2 | 
 3 | export default class WorldPlugin extends VectorDetailPlugin {
 4 | 	constructor(){
 5 | 		super({
 6 | 			xname  : 'tx',
 7 | 			yname  : 'ty',
 8 | 			header : 'World Position',
 9 | 			fields : [{
10 | 				detail : {
11 | 					data  : 'x',
12 | 					flex  : 8,
13 | 					input : true,
14 | 					type  : 'number'
15 | 				}
16 | 			},{
17 | 				detail : {
18 | 					data  : 'y',
19 | 					flex  : 8,
20 | 					input : true,
21 | 					type  : 'number'
22 | 				}
23 | 			}]
24 | 		});
25 | 	}
26 | 	update(obj){
27 | 		super.update(obj.worldTransform);
28 | 	}
29 | }


--------------------------------------------------------------------------------
/src/js/directives/view.js:
--------------------------------------------------------------------------------
 1 | var viewTpl = require('../../tpl/tree/view.html');
 2 | 
 3 | export default function($compile) {
 4 | 	return {
 5 | 		replace : true,
 6 | 		scope   : {
 7 | 			obj      : '=',
 8 | 			filtered : '='
 9 | 		},
10 | 		controller   : 'ViewCtrl',
11 | 		controllerAs : 'viewCtrl',
12 | 		template     : viewTpl,
13 | 		link : function(scope, element){
14 | 			scope.parent = scope.filtered ? scope.obj.$inspectorFilteredChildren : scope.obj.children;
15 | 			var collection = $('<view-collection parent="parent" ng-if="viewCtrl.expanded"  filtered="' + scope.filtered + '"></view-collection>');
16 | 			element.append(collection);
17 | 			$compile(collection)(scope);
18 | 		}
19 | 	};
20 | };


--------------------------------------------------------------------------------
/src/js/plugins/AnchorPlugin.js:
--------------------------------------------------------------------------------
 1 | var _ = require('lodash')
 2 | var VectorDetailPlugin = require('../classes/VectorDetailPlugin');
 3 | 
 4 | export default class AnchorPlugin extends VectorDetailPlugin {
 5 | 	constructor(){
 6 | 		super({
 7 | 			header : 'Anchor',
 8 | 			fields : [{
 9 | 				detail : {
10 | 					data  : 'x',
11 | 					flex  : 8,
12 | 					input : true,
13 | 					type  : 'number'
14 | 				}
15 | 			},{
16 | 				detail : {
17 | 					data  : 'y',
18 | 					flex  : 8,
19 | 					input : true,
20 | 					type  : 'number'
21 | 				}
22 | 			}]
23 | 		});
24 | 	}
25 | 	reset(obj){
26 | 		if (!obj) return;
27 | 		this.show = !_.isUndefined(obj.anchor);
28 | 	}
29 | 	update(obj){
30 | 		super.update(obj.anchor);
31 | 	}
32 | }


--------------------------------------------------------------------------------
/src/js/plugins/SizePlugin.js:
--------------------------------------------------------------------------------
 1 | var VectorDetailPlugin = require('../classes/VectorDetailPlugin');
 2 | 
 3 | export default class SizePlugin extends VectorDetailPlugin {
 4 | 	constructor(){
 5 | 		super({
 6 | 			xname  : 'width',
 7 | 			yname  : 'height',
 8 | 			header : 'Size',
 9 | 			fields : [{
10 | 				label : {
11 | 					text : 'width',
12 | 					flex : 4
13 | 				},
14 | 				detail : {
15 | 					data  : 'x',
16 | 					flex  : 5,
17 | 					input : true,
18 | 					type  : 'number'
19 | 				}
20 | 			},{
21 | 				label  : {
22 | 					text : 'height',
23 | 					flex : 5
24 | 				},
25 | 				detail : {
26 | 					data  : 'y',
27 | 					flex  : 5,
28 | 					input : true,
29 | 					type  : 'number'
30 | 				}
31 | 			}]
32 | 		});
33 | 	}
34 | }


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nine-patch-phaser-plugin",
 3 |   "version": "1.0.0",
 4 |   "authors": [
 5 |     "Nguyen Tuan Anh <anhnt.fami@gmail.com>"
 6 |   ],
 7 |   "description": "A Nine Patch Plugin for Phaser",
 8 |   "main": "build/nine-patch-phaser-plugin.min.js",
 9 |   "moduleType": [
10 |     "es6",
11 |     "globals",
12 |     "node"
13 |   ],
14 |   "keywords": [
15 |     "phaser",
16 |     "plugin",
17 |     "nine",
18 |     "patch",
19 |     "9",
20 |     "ninepatch",
21 |     "9patch",
22 |     "nine-patch",
23 |     "9-patch"
24 |   ],
25 |   "license": "MIT",
26 |   "homepage": "http://anhnt.ninja",
27 |   "ignore": [
28 |     "node_modules",
29 |     "bower_components"
30 |   ],
31 |   "dependencies": {
32 |     "nine-patch-phaser-plugin": "*",
33 |     "phaser": "~2.4.3"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/js/classes/Vector.js:
--------------------------------------------------------------------------------
 1 | export default class Vector {
 2 | 	constructor(xname, yname){
 3 | 		this.xname = xname;
 4 | 		this.yname = yname;
 5 | 		this.reset();
 6 | 	}
 7 | 	reset(){
 8 | 		this.point = null;
 9 | 		this._x  = 0;
10 | 		this._y  = 0;
11 | 	}
12 | 	update(point){
13 | 		this.point = point;
14 | 		this._x    = point[this.xname].toFixed(3) * 1;
15 | 		this._y    = point[this.yname].toFixed(3) * 1;
16 | 	}
17 | 	get x() {
18 | 		return this._x;
19 | 	}
20 | 	get y() {
21 | 		return this._y;
22 | 	}
23 | 	set x(value) {
24 | 		var point = this.point;
25 | 		if (point) {
26 | 			point[this.xname] = value;
27 | 			this._x = value;
28 | 		}
29 | 	}
30 | 	set y(value) {
31 | 		var point = this.point;
32 | 		if (point) {
33 | 			point[this.yname] = value;
34 | 			this._y = value;
35 | 		}
36 | 	}
37 | }


--------------------------------------------------------------------------------
/src/js/plugins/BoundsPlugin.js:
--------------------------------------------------------------------------------
 1 | var VectorDetailPlugin = require('../classes/VectorDetailPlugin');
 2 | 
 3 | export default class BoundsPlugin extends VectorDetailPlugin {
 4 | 	constructor(){
 5 | 		super({
 6 | 			xname  : 'width',
 7 | 			yname  : 'height',
 8 | 			header : 'Bounds',
 9 | 			fields : [{
10 | 				label : {
11 | 					text : 'width',
12 | 					flex : 4
13 | 				},
14 | 				detail : {
15 | 					data  : 'x',
16 | 					flex  : 5,
17 | 					input : true,
18 | 					type  : 'number'
19 | 				}
20 | 			},{
21 | 				label  : {
22 | 					text : 'height',
23 | 					flex : 5
24 | 				},
25 | 				detail : {
26 | 					data  : 'y',
27 | 					flex  : 5,
28 | 					input : true,
29 | 					type  : 'number'
30 | 				}
31 | 			}]
32 | 		});
33 | 	}
34 | 	update(obj){
35 | 		var bounds = obj.getBounds();
36 | 		super.update(bounds);
37 | 	}
38 | }


--------------------------------------------------------------------------------
/src/js/controllers/ViewCtrl.js:
--------------------------------------------------------------------------------
 1 | var _             = require('lodash');
 2 | var DisplayObject = require('../classes/DisplayObject');
 3 | export default class ViewCtrl extends DisplayObject {
 4 | 	constructor($scope, $timeout, gameManager){
 5 | 		super($scope.obj, gameManager);
 6 | 		var update = _.throttle(() => {
 7 | 			$timeout(() => {
 8 | 				var width = Math.max.apply(Math, $('#tree .middle').map(function(){
 9 | 					return $(this).width();
10 | 				}).get());
11 | 				$('#tree .row').width(Math.max(width + this.childLevel * 20, $('#tree').width()));
12 | 			})
13 | 		}, 500);
14 | 		$('.row').click(update)
15 | 
16 | 		var lastTime = Date.now();
17 | 		var delta = 1000;
18 | 		$(window).resize(function(){
19 | 			lastTime = Date.now();
20 | 			setTimeout(function(){
21 | 				if (Date.now() - lastTime > delta) update();
22 | 			}, delta)
23 | 		});
24 | 	}
25 | }


--------------------------------------------------------------------------------
/src/js/plugins/TargetSizePlugin.js:
--------------------------------------------------------------------------------
 1 | var _ = require('lodash');
 2 | var VectorDetailPlugin = require('../classes/VectorDetailPlugin');
 3 | 
 4 | export default class TargetSizePlugin extends VectorDetailPlugin {
 5 | 	constructor(){
 6 | 		super({
 7 | 			xname  : 'targetWidth',
 8 | 			yname  : 'targetHeight',
 9 | 			header : 'Target size',
10 | 			fields : [{
11 | 				label : {
12 | 					text : 'width',
13 | 					flex : 4
14 | 				},
15 | 				detail : {
16 | 					data  : 'x',
17 | 					flex  : 5,
18 | 					input : true,
19 | 					type  : 'number'
20 | 				}
21 | 			},{
22 | 				label  : {
23 | 					text : 'height',
24 | 					flex : 5
25 | 				},
26 | 				detail : {
27 | 					data  : 'y',
28 | 					flex  : 5,
29 | 					input : true,
30 | 					type  : 'number'
31 | 				}
32 | 			}]
33 | 		});
34 | 	}
35 | 	reset(obj){
36 | 		if (!obj) return;
37 | 		this.show = !_.isUndefined(obj.targetWidth);
38 | 	}
39 | }


--------------------------------------------------------------------------------
/example/game.js:
--------------------------------------------------------------------------------
 1 | function MyClass(game){
 2 |   Phaser.Sprite.apply(this, arguments);
 3 |   game.add.existing(this);
 4 | }
 5 | MyClass.prototype = Object.create(Phaser.Sprite.prototype);
 6 | MyClass.prototype.constructor = MyClass;
 7 | 
 8 | var game = new Phaser.Game(600, 400, Phaser.CANVAS, 'game', {
 9 | 	preload: function preload() {
10 | 		game.load.atlasXML('blueSheet', 'UIpack/blueSheet.png', 'UIpack/blueSheet.xml');
11 | 	},
12 | 	create: function create() {
13 | 		game.plugins.add(Phaser.Plugin.Inspector);
14 | 
15 | 		this.myGroup = game.add.group();
16 | 		this.mySprite = new MyClass(game, 250, 150, 'blueSheet', 'blue_button02.png');
17 | 		this.mySprite.anchor.set(0.5, 0.5);
18 | 		this.myGroup.add(this.mySprite)
19 | 		this.mySprite2 = new MyClass(game, 350, 250, 'blueSheet', 'blue_button02.png');
20 | 		this.mySprite2.anchor.set(0.5, 0.5);
21 | 		this.myGroup.add(this.mySprite2)
22 | 	}
23 | })


--------------------------------------------------------------------------------
/src/js/plugins/FrameRenderPlugin.js:
--------------------------------------------------------------------------------
 1 | var _ = require('lodash')
 2 | var DetailPlugin = require('../classes/DetailPlugin');
 3 | 
 4 | export default class FrameRenderPlugin extends DetailPlugin {
 5 | 	constructor(gameManager){
 6 | 		super({
 7 | 			gameManager : gameManager,
 8 | 			header      : 'Frame',
 9 | 			fields      : {
10 | 				template : "<div class=\"frame-img\" ng-style=\"{\
11 | 								'padding-left'        : 0,\
12 | 								background            :'url('+plugin.img.url+')',\
13 | 								width                 : plugin.img.width+'px',\
14 | 								height                : plugin.img.height+'px',\
15 | 								'background-position' : (-plugin.img.x) + 'px ' + (-plugin.img.y) + 'px',\
16 | 								transform             : 'scale(' + plugin.img.scale + ')'\
17 | 							}\"></div>"
18 | 			}
19 | 		});
20 | 	}
21 | 	reset(obj, wrapObj){
22 | 		if (!obj) return;
23 | 		this.img = wrapObj.img;
24 | 		this.show = !!wrapObj.img.url;
25 | 	}
26 | 	update(obj, wrapObj){
27 | 		this.img = wrapObj.img;
28 | 	}
29 | }


--------------------------------------------------------------------------------
/src/js/classes/VectorDetailPlugin.js:
--------------------------------------------------------------------------------
 1 | var DetailPlugin = require('./DetailPlugin');
 2 | export default class VectorDetailPlugin extends DetailPlugin {
 3 | 	constructor({xname = 'x', yname = 'y', header, fields}){
 4 | 		super({header, fields});
 5 | 		this.xname = xname;
 6 | 		this.yname = yname;
 7 | 		this.reset();
 8 | 	}
 9 | 	reset(){
10 | 		this.point = null;
11 | 		this._x  = 0;
12 | 		this._y  = 0;
13 | 	}
14 | 	update(point){
15 | 		this.point = point;
16 | 		this._x = point[this.xname];
17 | 		if (this._x && this._x.toFixed) {
18 | 			this._x = this._x.toFixed(3) * 1;
19 | 		}
20 | 		this._y = point[this.yname];
21 | 		if (this._y && this._y.toFixed) {
22 | 			this._y = this._y.toFixed(3) * 1;
23 | 		}
24 | 	}
25 | 	get x() {
26 | 		return this._x * 1;
27 | 	}
28 | 	get y() {
29 | 		return this._y * 1;
30 | 	}
31 | 	set x(value) {
32 | 		var point = this.point;
33 | 		if (point) {
34 | 			point[this.xname] = value;
35 | 			this._x = value;
36 | 		}
37 | 	}
38 | 	set y(value) {
39 | 		var point = this.point;
40 | 		if (point) {
41 | 			point[this.yname] = value;
42 | 			this._y = value;
43 | 		}
44 | 	}
45 | }


--------------------------------------------------------------------------------
/example/index.htm:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8" />
 5 | 	<title>Phaser Inpsector Plugin</title>
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 7 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8 | </head>
 9 | 
10 | <body>
11 |     <br/>
12 |     <div style="font-weight:bold; font-size:30px;">PHASER INSPECTOR PLUGIN</div>
13 |     <div>created by <a href="http://twitter.com/netcell">@netcell</a> at <a href="http://anhnt.ninja">http://anhnt.ninja</a></div>
14 |     <br/>
15 |     <div style="font-size:20px;">EXAMPLE PAGE</div>
16 |     <br/>
17 | 	<div id="game"></div>
18 |     <script src="lib/phaser/build/phaser.js"></script>
19 |     <script src="lib/nine-patch-phaser-plugin/build/nine-patch-phaser-plugin.js"></script>
20 |     <script src="phaser-inspector/phaser-inspector.js"></script>
21 |     <script src="game.js"></script>
22 |     <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/src/tpl/tree/view.html:
--------------------------------------------------------------------------------
 1 | <div bindonce class="view" ng-class="{weak : !obj.alive}">
 2 | 	<div class="row" ng-class="{selected : viewCtrl.selected, parentSelected : viewCtrl.parentSelected}">
 3 | 		<div class="middle" bo-style="{'padding-left' : (5 + viewCtrl.childLevel * 20) + 'px'}">
 4 | 			<div class="eye" ng-click="obj.visible = !obj.visible">
 5 | 				<i class="fa" ng-class="{'fa-eye' : obj.visible, 'fa-eye-slash' : !obj.visible}"></i>
 6 | 			</div>
 7 | 			<div class="eye" ng-click="obj.cacheAsBitmap = !obj.cacheAsBitmap">
 8 | 				<i class="fa" ng-class="{'fa-lock' : obj.cacheAsBitmap, 'fa-unlock-alt' : !obj.cacheAsBitmap}"></i>
 9 | 			</div>
10 | 			<div>
11 | 				<div class="toggle" ng-click="viewCtrl.expand()">
12 | 					<i class="fa fa-circle" ng-if="!viewCtrl.hasChildren"></i>
13 | 					<i class="fa" ng-if="viewCtrl.hasChildren" ng-class="{'fa-caret-down' : viewCtrl.expanded, 'fa-caret-right' : !viewCtrl.expanded}"></i>
14 | 				</div>
15 | 				<div ng-click="viewCtrl.select()">
16 | 					<div class="name" bo-bind="viewCtrl.name"></div>
17 | 					<div class="type" bo-bind="viewCtrl.type"></div>
18 | 					<div class="children" ng-bind="viewCtrl.numberOfChildren"></div>
19 | 				</div>
20 | 			</div>
21 | 		</div>
22 | 	</div>
23 | </div>


--------------------------------------------------------------------------------
/src/js/classes/DetailPlugin.js:
--------------------------------------------------------------------------------
 1 | var _ = require('lodash');
 2 | export default class DetailPlugin {
 3 | 	constructor({gameManager, header, fields }){
 4 | 		this.show        = true;
 5 | 		this.gameManager = gameManager;
 6 | 		this.header      = header;
 7 | 		this.fields      = fields;
 8 | 		var self         = this;
 9 | 
10 | 		if ( fields.template ) {
11 | 			var data = fields.data;
12 | 			Object.defineProperty(fields, 'data', {
13 | 				get(){
14 | 					return self[data];
15 | 				},
16 | 				set(value){
17 | 					return self[data] = value;
18 | 				}
19 | 			})
20 | 		} else for (var i = fields.length - 1; i >= 0; i--) {
21 | 			let field = fields[i];
22 | 			field.label = field.label || {};
23 | 			let {label, detail} = field;
24 | 			if (_.isString(label)) {
25 | 				field.label = { text : label };
26 | 				label = field.label;
27 | 			}
28 | 			label.text = label.text || detail.data;
29 | 			let data = detail.data;
30 | 			Object.defineProperty(detail, 'data', {
31 | 				get(){
32 | 					return self[data];
33 | 				},
34 | 				set(value){
35 | 					return self[data] = value;
36 | 				}
37 | 			})
38 | 		};
39 | 		//TODO: Make some check here
40 | 	}
41 | 	reset(){
42 | 	}
43 | 	update(obj){
44 | 	}
45 | }
46 | 
47 | DetailPlugin.plugins = [];
48 | DetailPlugin.add = function(Plugin){
49 | 	DetailPlugin.plugins.push(Plugin);
50 | }


--------------------------------------------------------------------------------
/example/UIpack/blueSheet.xml:
--------------------------------------------------------------------------------
 1 | <TextureAtlas imagePath="sheet.png">
 2 | 	<SubTexture name="blue_boxCheckmark.png" x="380" y="36" width="38" height="36"/>
 3 | 	<SubTexture name="blue_boxCross.png" x="380" y="0" width="38" height="36"/>
 4 | 	<SubTexture name="blue_boxTick.png" x="386" y="210" width="36" height="36"/>
 5 | 	<SubTexture name="blue_button00.png" x="0" y="94" width="190" height="49"/>
 6 | 	<SubTexture name="blue_button01.png" x="190" y="49" width="190" height="45"/>
 7 | 	<SubTexture name="blue_button02.png" x="190" y="0" width="190" height="49"/>
 8 | 	<SubTexture name="blue_button03.png" x="0" y="49" width="190" height="45"/>
 9 | 	<SubTexture name="blue_button04.png" x="0" y="0" width="190" height="49"/>
10 | 	<SubTexture name="blue_button05.png" x="0" y="192" width="190" height="45"/>
11 | 	<SubTexture name="blue_button06.png" x="288" y="194" width="49" height="49"/>
12 | 	<SubTexture name="blue_button07.png" x="239" y="194" width="49" height="49"/>
13 | 	<SubTexture name="blue_button08.png" x="190" y="194" width="49" height="45"/>
14 | 	<SubTexture name="blue_button09.png" x="339" y="94" width="49" height="49"/>
15 | 	<SubTexture name="blue_button10.png" x="290" y="94" width="49" height="45"/>
16 | 	<SubTexture name="blue_button11.png" x="337" y="184" width="49" height="49"/>
17 | 	<SubTexture name="blue_button12.png" x="290" y="139" width="49" height="45"/>
18 | 	<SubTexture name="blue_button13.png" x="0" y="143" width="190" height="49"/>
19 | 	<SubTexture name="blue_checkmark.png" x="337" y="233" width="21" height="20"/>
20 | 	<SubTexture name="blue_circle.png" x="386" y="174" width="36" height="36"/>
21 | 	<SubTexture name="blue_cross.png" x="0" y="237" width="18" height="18"/>
22 | 	<SubTexture name="blue_panel.png" x="190" y="94" width="100" height="100"/>
23 | 	<SubTexture name="blue_sliderDown.png" x="416" y="72" width="28" height="42"/>
24 | 	<SubTexture name="blue_sliderLeft.png" x="339" y="143" width="39" height="31"/>
25 | 	<SubTexture name="blue_sliderRight.png" x="378" y="143" width="39" height="31"/>
26 | 	<SubTexture name="blue_sliderUp.png" x="388" y="72" width="28" height="42"/>
27 | 	<SubTexture name="blue_tick.png" x="18" y="239" width="17" height="17"/>
28 | </TextureAtlas>


--------------------------------------------------------------------------------
/src/js/controllers/TreeCtrl.js:
--------------------------------------------------------------------------------
 1 | var _ = require('lodash');
 2 | export default class TreeCtrl {
 3 | 	constructor($scope, gameManager, game, onUpdate){
 4 | 		this.$scope      = $scope;
 5 | 		this.gameManager = gameManager;
 6 | 		this.game        = game;
 7 | 		var apply = _.debounce(() => $scope.$apply());
 8 | 		onUpdate.add(apply);
 9 | 
10 | 		this.registerStateScrollUpdate();
11 | 		this.registerDrawBounds();
12 | 		this.registerFilter();
13 | 	}
14 | 	registerStateScrollUpdate(){
15 | 		var parent = $('.states');
16 | 		var child = parent.find('.selected');
17 | 		this.$scope.$watch(function(){
18 | 			return child = parent.find('.selected')[0];
19 | 		}, function(){
20 | 			if ($(child).offset())
21 | 			parent.animate({
22 | 				scrollTop: $(child).offset().top - parent.offset().top + parent.scrollTop()
23 | 			});
24 | 		})
25 | 	}
26 | 	registerDrawBounds(){
27 | 		var {gameManager, game} = this;
28 | 		var {state, debug}      = game;
29 | 		var render              = state.render;
30 | 		/**
31 | 		 * Rewrap the render function when it changes
32 | 		 * to add hightlighting function for $inspectorTreeSelected
33 | 		 */
34 | 		this.$scope.$watch(function(){
35 | 			return state.render === render;
36 | 		}, function() {
37 | 			render = state.render;
38 | 			/** TODO: Move the params to somewhere else */
39 | 			var min       = 0.3;
40 | 			var max       = 0.5;
41 | 			var alpha     = min;
42 | 			var direction = 1;
43 | 			var delta     = 0.005;
44 | 			/** Wrapping process */
45 | 			var _render = render;
46 | 			state.render = function(){
47 | 				_render.apply(this, arguments);
48 | 				if (!gameManager.$render) return;
49 | 				var obj = gameManager.$inspectorTreeSelected;
50 | 				if (!obj || !obj.getBounds) return;
51 | 				var bounds = obj.getBounds();
52 | 				if (!bounds) return;
53 | 				debug.geom(bounds, `rgba(0, 191, 0, ${alpha})`);
54 | 				alpha += delta * direction;
55 | 				if (alpha > max || alpha < min) direction = -direction;
56 | 			}
57 | 		})
58 | 	}
59 | 	registerFilter(){
60 | 		var {$scope, gameManager} = this;
61 | 		$scope.$watch(() => this.search, () => {
62 | 			gameManager.filter(this.search);
63 | 		});
64 | 	}
65 | 	goToState(state){
66 | 		this.gameManager.$inspectorTreeSelected = null;
67 | 		this.game.state.start(state)
68 | 	}
69 | }


--------------------------------------------------------------------------------
/src/tpl/tree.html:
--------------------------------------------------------------------------------
 1 | <div class="states">
 2 | 	<div>
 3 | 		<div class="state" ng-repeat="(state, stateObj) in treeCtrl.game.state.states" ng-bind="state" ng-class="{selected : state === treeCtrl.game.state.current}" ng-click="treeCtrl.goToState(state)">
 4 | 		</div>
 5 | 	</div>
 6 | </div>
 7 | 
 8 | <div class="tree-control">
 9 |     <div class="button"
10 |      tooltip-trigger tooltip-text="Inspect Element"
11 |      ng-class="{
12 |         primary  : !treeCtrl.gameManager.screenInspecting,
13 |         deactive : treeCtrl.gameManager.screenInspecting
14 |      }"
15 |      ng-click="treeCtrl.gameManager.screenInspect()"
16 |     >
17 |         <i class="fa fa-search"></i>
18 |     </div>
19 |     <div class="button info"
20 |      tooltip-trigger tooltip-text="Collapse All"
21 |      ng-click="treeCtrl.gameManager.collapseAll()"
22 |     >
23 |         <i class="fa fa-compress"></i>
24 |     </div>
25 |     <div class="button"
26 |      ng-class="{
27 |         warn     : treeCtrl.gameManager.$render,
28 |         deactive : !treeCtrl.gameManager.$render
29 |      }"
30 |      tooltip-trigger tooltip-text="Toggle Box Render"
31 |      ng-click="treeCtrl.gameManager.$render = !treeCtrl.gameManager.$render"
32 |     >
33 |         <i class="fa fa-paint-brush"></i>
34 |     </div>
35 |     <div class="button"
36 |      ng-class="{
37 |         success  : treeCtrl.game.paused,
38 |         danger   : !treeCtrl.game.paused
39 |      }"
40 |      tooltip-trigger tooltip-text="Play/Pause"
41 |      ng-click="treeCtrl.game.paused = !treeCtrl.game.paused"
42 |     >
43 |         <i class="fa" ng-class="{
44 |             'fa-play'  :  treeCtrl.game.paused,
45 |             'fa-pause' :  !treeCtrl.game.paused
46 |         }"></i>
47 |     </div>
48 |     <div class="button warn"
49 |      tooltip-trigger tooltip-text="Next Frame"
50 |      ng-click="treeCtrl.gameManager.nextFrame()"
51 |     >
52 |         <i class="fa fa-forward"></i>
53 |     </div>
54 | </div>
55 | 
56 | <div class="scene">
57 | 	<view-collection ng-if="!treeCtrl.search || treeCtrl.search.length === 0 || !treeCtrl.search.trim()" parent="treeCtrl.game.world.children" filtered="false"></view-collection>
58 | 	<view-collection ng-if="treeCtrl.search && treeCtrl.search.length && treeCtrl.search.trim()" parent="treeCtrl.gameManager.filteredWorld.$inspectorFilteredChildren" filtered="true"></view-collection>
59 | </div>
60 | <input class="search" type="text" ng-model="treeCtrl.search" placeholder="Search Display Object">


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp         = require('gulp');
 2 | var clean        = require('gulp-clean');
 3 | var browserify   = require('browserify');
 4 | var watchify     = require('watchify');
 5 | var source       = require('vinyl-source-stream');
 6 | var babelify     = require('babelify');
 7 | var runSequence  = require('run-sequence');
 8 | var stringify    = require('stringify');
 9 | var sass         = require('gulp-sass');
10 | var cssify       = require('cssify');
11 | var autoprefixer = require('gulp-autoprefixer');
12 | var plumber      = require('gulp-plumber');
13 | var uglify       = require('gulp-uglify');
14 | var rename       = require('gulp-rename');
15 | 
16 | gulp.task('minify', function() {
17 | 	return gulp.src('./build/phaser-inspector.js')
18 | 	.pipe(rename('phaser-inspector.min.js'))
19 | 	.pipe(uglify({ mangle: false }))
20 | 	.pipe(gulp.dest('./build'));
21 | });
22 | 
23 | gulp.task('css', function () {
24 | 	return gulp.src('./src/css/**/*.sass', { base: './src/css'})
25 | 		.pipe(plumber())
26 | 		.pipe(sass())
27 | 		.pipe(autoprefixer({
28 | 	        browsers: ['last 3 versions'],
29 | 	        cascade: false
30 | 	    }))
31 | 		.pipe(gulp.dest('./src/css'));
32 | });
33 | 
34 | gulp.task('copy:example', function() {
35 | 	return gulp.src('./build/*.js')
36 | 	.pipe(gulp.dest('./example/phaser-inspector'));
37 | });
38 | 
39 | gulp.task('watch', function() {
40 | 	gulp.watch(['./src/css/**/*.sass'], ['css']);
41 | })
42 | 
43 | function rebundle(bundler, debug) {
44 | 	console.log('Start rebundling')
45 | 	return bundler.bundle()
46 | 	.on('error', function(err){
47 | 		console.log(err)
48 | 	})
49 | 	.pipe(source('phaser-inspector.js'))
50 | 	.pipe(gulp.dest('./build'))
51 | 	.on('end', function(){
52 | 		debug && runSequence('copy:example', function(){
53 | 			console.log('REBUNDLED');
54 | 		})
55 | 	});
56 | }
57 | 
58 | function bundle(debug){
59 | 	watchify.args.debug = debug;
60 | 	var bundler = browserify('./src/index.js', watchify.args);
61 | 	debug && ( bundler = watchify(bundler) );
62 | 	bundler.transform(stringify({ extensions: ['.html'] }));
63 | 	bundler.transform(cssify);
64 | 	bundler.transform( babelify.configure({ ignore : 'node_modules' }) );
65 | 	(!debug) && bundler.transform('stripify');
66 | 	debug && bundler.on('update', function(){
67 | 		rebundle(bundler, debug);
68 | 	});
69 | 	return rebundle(bundler, debug);
70 | }
71 | 
72 | gulp.task('browserify', function() {
73 | 	return bundle(false);
74 | });
75 | 
76 | gulp.task('browserify:debug', function() {
77 | 	return bundle(true);
78 | });
79 | 
80 | gulp.task('clean', function () {
81 | 	return gulp.src([ './build/**/*.*', ], {read: false}).pipe(clean({force: true}));
82 | });
83 | 
84 | gulp.task('default', function(cb) {
85 | 	runSequence('css', 'clean', 'browserify', 'minify', 'copy:example', cb);
86 | });
87 | 
88 | gulp.task('debug', function(cb) {
89 | 	runSequence('watch', 'css', 'clean', 'browserify:debug', cb);
90 | });


--------------------------------------------------------------------------------
/src/js/directives/interaction.js:
--------------------------------------------------------------------------------
 1 | var interact    = require('interact.js');
 2 | var draggabilly = require('draggabilly');
 3 | 
 4 | function fit({top, left}, width){
 5 | 	top = Math.max(top, 0);
 6 | 	top = Math.min(top, document.documentElement.clientHeight - 50);
 7 | 	left = Math.max(left, - width + 50);
 8 | 	left = Math.min(left, document.documentElement.clientWidth - 50);
 9 | 	return {top, left};
10 | }
11 | 
12 | export default function($localStorage, $timeout) {
13 | 	return {
14 | 		restrict : 'C',
15 | 		link     : function(scope, element){
16 | 			var el = $(element);
17 | 			var element = element[0];
18 | 
19 | 			var { elX, elY, elW, elH } = $localStorage;
20 | 			elW && el.css({ width  : `${elW}px` });
21 | 			elH && el.css({ height : `${elH}px` });
22 | 
23 | 			/** Enable drag */
24 | 			var draggie = new draggabilly(element, {
25 | 				handle: '.grabber'
26 | 			}).on('dragEnd', function(event, pointer) {
27 | 				var { left, top } = fit(el.position(), el.width());
28 | 				el.css({
29 | 					top  : `${top}px`,
30 | 					left : `${left}px`
31 | 				});
32 | 				$localStorage.elX = left;
33 | 				$localStorage.elY = top;
34 | 			});
35 | 			/**
36 | 			 * Since draggabilly set position to relative
37 | 			 * this reset the css properties
38 | 			 */
39 | 			$timeout(function(){
40 | 				el.css({
41 | 					position : 'fixed',
42 | 					top      : `${elY || 0}px`,
43 | 					left     : `${elX || 0}px`
44 | 				});
45 | 			});
46 | 			scope.$watch(function(){
47 | 				return scope.display.hide;
48 | 			}, function(){
49 | 				interact(element).resizable({ enabled : !scope.display.hide });
50 | 			})
51 | 			/** Enable resize */
52 | 			interact(element).resizable({
53 | 				edges: { left: true, right: true, bottom: true }
54 | 			}).on('resizemove', function (event) {
55 | 				/** This function is copied from interact.js example */
56 | 				var target = event.target,
57 | 				x = (parseFloat(target.getAttribute('data-x')) || 0),
58 | 				y = (parseFloat(target.getAttribute('data-y')) || 0);
59 | 				// update the element's style
60 | 				target.style.width  = event.rect.width + 'px';
61 | 				target.style.height = event.rect.height + 'px';
62 | 
63 | 				// translate when resizing from top or left edges
64 | 				x += event.deltaRect.left;
65 | 				y += event.deltaRect.top;
66 | 
67 | 				target.style.webkitTransform =
68 | 				target.style.transform =
69 | 				'translate(' + x + 'px,' + y + 'px)';
70 | 
71 | 				target.setAttribute('data-x', x);
72 | 				target.setAttribute('data-y', y);
73 | 			}).on('resizeend', function(event){
74 | 				var { left, top } = fit(el.position());
75 | 				el.css({
76 | 					top  : `${top}px`,
77 | 					left : `${left}px`
78 | 				});
79 | 				$localStorage.elW = el.width();
80 | 				$localStorage.elH = el.height();
81 | 				$localStorage.elX = left;
82 | 				$localStorage.elY = top;
83 | 				var target = event.target;
84 | 				target.style.webkitTransform =
85 | 				target.style.transform =
86 | 				'translate(0px, 0px)';
87 | 				target.setAttribute('data-x', 0);
88 | 				target.setAttribute('data-y', 0);
89 | 			});
90 | 		}
91 | 	};
92 | }


--------------------------------------------------------------------------------
/src/js/controllers/DetailCtrl.js:
--------------------------------------------------------------------------------
  1 | var _             = require('lodash');
  2 | var DisplayObject = require('../classes/DisplayObject');
  3 | var DetailPlugin = require('../classes/DetailPlugin');
  4 | 
  5 | class Cache {
  6 | 	constructor(gameManager){
  7 | 		var plugins = DetailPlugin.plugins;
  8 | 		this.plugins = [];
  9 | 		_.each(plugins, Plugin => this.plugins.push( new Plugin(gameManager) ));
 10 | 	}
 11 | 	update(obj, wrapObj){
 12 | 		this.plugins.forEach(plugin => {
 13 | 			if (plugin.show) plugin.update(obj, wrapObj)
 14 | 		});
 15 | 	}
 16 | 	reset(obj, wrapObj){
 17 | 		this.plugins.forEach(plugin => plugin.reset(obj, wrapObj));
 18 | 	}
 19 | }
 20 | 
 21 | export default class DetailCtrl {
 22 | 	constructor($scope, $timeout, gameManager, onUpdate, game){
 23 | 		this.game  = game;
 24 | 		this.world = game.world;
 25 | 		this.gameManager = gameManager;
 26 | 		$scope.cache = this.cache = new Cache(gameManager);
 27 | 		$scope.$watch(function () {
 28 | 			return gameManager.$inspectorTreeSelected;
 29 | 		}, () => {
 30 | 			this.realObj = gameManager.$inspectorTreeSelected || this.world;
 31 | 			this.obj     = new DisplayObject(this.realObj);
 32 | 			this.cache.reset(this.realObj, this.obj);
 33 | 		});
 34 | 		onUpdate.add(() => this.updateInfo());
 35 | 	}
 36 | 
 37 | 	get isWorld(){
 38 | 		return this.world === this.realObj;
 39 | 	}
 40 | 
 41 | 	updateInfo(){
 42 | 		var {realObj, obj, cache, game} = this;
 43 | 
 44 | 		if (this.isWorld) cache.className = 'World';
 45 | 		else cache.className = obj.type;
 46 | 
 47 | 		cache.alive   = realObj.alive;
 48 | 		cache.visible = realObj.visible;
 49 | 		cache.kill    = realObj.kill;
 50 | 
 51 | 		var children      = realObj.children;
 52 | 		cache.noChildren    = children.length;
 53 | 		cache.noAlive       = children.filter(child => child.alive).length;
 54 | 		cache.noNested      = getChildrenOf(realObj);
 55 | 		cache.noNestedAlive = getAliveChildrenOf(realObj);
 56 | 
 57 | 		cache.update(realObj, obj);
 58 | 	}
 59 | 
 60 | 	deselect(){
 61 | 		this.gameManager.$inspectorTreeSelected = null;
 62 | 	}
 63 | 
 64 | 	destroy() {
 65 | 		this.realObj.destroy();
 66 | 		this.deselect();
 67 | 	}
 68 | 
 69 | 	killRevive() {
 70 | 		var realObj = this.realObj;
 71 | 		return realObj.alive ? realObj.kill() : realObj.revive();
 72 | 	}
 73 | 
 74 | 	showHide() {
 75 | 		return this.realObj.visible = !this.cache.visible;
 76 | 	}
 77 | 
 78 | }
 79 | 
 80 | function getChildrenOf(obj){
 81 |     var count = 0;
 82 |     var children = obj.children;
 83 |     if (children) {
 84 |         count += children.length;
 85 |         for (var i = children.length - 1; i >= 0; i--) {
 86 |             count += getChildrenOf(children[i]);
 87 |         }
 88 |     }
 89 |     return count;
 90 | }
 91 | 
 92 | function getAliveChildrenOf(obj){
 93 |     var count = 0;
 94 |     if (obj.children) {
 95 |         var children = obj.children.filter(function(child){
 96 |             return child.alive;
 97 |         });
 98 |         count += children.length;
 99 |         for (var i = children.length - 1; i >= 0; i--) {
100 |             count += getAliveChildrenOf(children[i]);
101 |         }
102 |     }
103 |     return count;
104 | }


--------------------------------------------------------------------------------
/stylesheets/github-dark.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |    Copyright 2014 GitHub Inc.
  3 | 
  4 |    Licensed under the Apache License, Version 2.0 (the "License");
  5 |    you may not use this file except in compliance with the License.
  6 |    You may obtain a copy of the License at
  7 | 
  8 |        http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 |    Unless required by applicable law or agreed to in writing, software
 11 |    distributed under the License is distributed on an "AS IS" BASIS,
 12 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |    See the License for the specific language governing permissions and
 14 |    limitations under the License.
 15 | 
 16 | */
 17 | 
 18 | .pl-c /* comment */ {
 19 |   color: #969896;
 20 | }
 21 | 
 22 | .pl-c1      /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
 23 | .pl-s .pl-v /* string variable */ {
 24 |   color: #0099cd;
 25 | }
 26 | 
 27 | .pl-e  /* entity */,
 28 | .pl-en /* entity.name */ {
 29 |   color: #9774cb;
 30 | }
 31 | 
 32 | .pl-s .pl-s1 /* string source */,
 33 | .pl-smi      /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
 34 |   color: #ddd;
 35 | }
 36 | 
 37 | .pl-ent /* entity.name.tag */ {
 38 |   color: #7bcc72;
 39 | }
 40 | 
 41 | .pl-k /* keyword, storage, storage.type */ {
 42 |   color: #cc2372;
 43 | }
 44 | 
 45 | .pl-pds              /* punctuation.definition.string, string.regexp.character-class */,
 46 | .pl-s                /* string */,
 47 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
 48 | .pl-sr               /* string.regexp */,
 49 | .pl-sr .pl-cce       /* string.regexp constant.character.escape */,
 50 | .pl-sr .pl-sra       /* string.regexp string.regexp.arbitrary-repitition */,
 51 | .pl-sr .pl-sre       /* string.regexp source.ruby.embedded */ {
 52 |   color: #3c66e2;
 53 | }
 54 | 
 55 | .pl-v /* variable */ {
 56 |   color: #fb8764;
 57 | }
 58 | 
 59 | .pl-id /* invalid.deprecated */ {
 60 |   color: #e63525;
 61 | }
 62 | 
 63 | .pl-ii /* invalid.illegal */ {
 64 |   background-color: #e63525;
 65 |   color: #f8f8f8;
 66 | }
 67 | 
 68 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
 69 |   color: #7bcc72;
 70 |   font-weight: bold;
 71 | }
 72 | 
 73 | .pl-ml /* markup.list */ {
 74 |   color: #c26b2b;
 75 | }
 76 | 
 77 | .pl-mh        /* markup.heading */,
 78 | .pl-mh .pl-en /* markup.heading entity.name */,
 79 | .pl-ms        /* meta.separator */ {
 80 |   color: #264ec5;
 81 |   font-weight: bold;
 82 | }
 83 | 
 84 | .pl-mq /* markup.quote */ {
 85 |   color: #00acac;
 86 | }
 87 | 
 88 | .pl-mi /* markup.italic */ {
 89 |   color: #ddd;
 90 |   font-style: italic;
 91 | }
 92 | 
 93 | .pl-mb /* markup.bold */ {
 94 |   color: #ddd;
 95 |   font-weight: bold;
 96 | }
 97 | 
 98 | .pl-md /* markup.deleted, meta.diff.header.from-file */ {
 99 |   background-color: #ffecec;
100 |   color: #bd2c00;
101 | }
102 | 
103 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
104 |   background-color: #eaffea;
105 |   color: #55a532;
106 | }
107 | 
108 | .pl-mdr /* meta.diff.range */ {
109 |   color: #9774cb;
110 |   font-weight: bold;
111 | }
112 | 
113 | .pl-mo /* meta.output */ {
114 |   color: #264ec5;
115 | }
116 | 
117 | 


--------------------------------------------------------------------------------
/stylesheets/github-light.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |    Copyright 2014 GitHub Inc.
  3 | 
  4 |    Licensed under the Apache License, Version 2.0 (the "License");
  5 |    you may not use this file except in compliance with the License.
  6 |    You may obtain a copy of the License at
  7 | 
  8 |        http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 |    Unless required by applicable law or agreed to in writing, software
 11 |    distributed under the License is distributed on an "AS IS" BASIS,
 12 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 |    See the License for the specific language governing permissions and
 14 |    limitations under the License.
 15 | 
 16 | */
 17 | 
 18 | .pl-c /* comment */ {
 19 |   color: #969896;
 20 | }
 21 | 
 22 | .pl-c1      /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
 23 | .pl-s .pl-v /* string variable */ {
 24 |   color: #0086b3;
 25 | }
 26 | 
 27 | .pl-e  /* entity */,
 28 | .pl-en /* entity.name */ {
 29 |   color: #795da3;
 30 | }
 31 | 
 32 | .pl-s .pl-s1 /* string source */,
 33 | .pl-smi      /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
 34 |   color: #333;
 35 | }
 36 | 
 37 | .pl-ent /* entity.name.tag */ {
 38 |   color: #63a35c;
 39 | }
 40 | 
 41 | .pl-k /* keyword, storage, storage.type */ {
 42 |   color: #a71d5d;
 43 | }
 44 | 
 45 | .pl-pds              /* punctuation.definition.string, string.regexp.character-class */,
 46 | .pl-s                /* string */,
 47 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
 48 | .pl-sr               /* string.regexp */,
 49 | .pl-sr .pl-cce       /* string.regexp constant.character.escape */,
 50 | .pl-sr .pl-sra       /* string.regexp string.regexp.arbitrary-repitition */,
 51 | .pl-sr .pl-sre       /* string.regexp source.ruby.embedded */ {
 52 |   color: #183691;
 53 | }
 54 | 
 55 | .pl-v /* variable */ {
 56 |   color: #ed6a43;
 57 | }
 58 | 
 59 | .pl-id /* invalid.deprecated */ {
 60 |   color: #b52a1d;
 61 | }
 62 | 
 63 | .pl-ii /* invalid.illegal */ {
 64 |   background-color: #b52a1d;
 65 |   color: #f8f8f8;
 66 | }
 67 | 
 68 | .pl-sr .pl-cce /* string.regexp constant.character.escape */ {
 69 |   color: #63a35c;
 70 |   font-weight: bold;
 71 | }
 72 | 
 73 | .pl-ml /* markup.list */ {
 74 |   color: #693a17;
 75 | }
 76 | 
 77 | .pl-mh        /* markup.heading */,
 78 | .pl-mh .pl-en /* markup.heading entity.name */,
 79 | .pl-ms        /* meta.separator */ {
 80 |   color: #1d3e81;
 81 |   font-weight: bold;
 82 | }
 83 | 
 84 | .pl-mq /* markup.quote */ {
 85 |   color: #008080;
 86 | }
 87 | 
 88 | .pl-mi /* markup.italic */ {
 89 |   color: #333;
 90 |   font-style: italic;
 91 | }
 92 | 
 93 | .pl-mb /* markup.bold */ {
 94 |   color: #333;
 95 |   font-weight: bold;
 96 | }
 97 | 
 98 | .pl-md /* markup.deleted, meta.diff.header.from-file */ {
 99 |   background-color: #ffecec;
100 |   color: #bd2c00;
101 | }
102 | 
103 | .pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
104 |   background-color: #eaffea;
105 |   color: #55a532;
106 | }
107 | 
108 | .pl-mdr /* meta.diff.range */ {
109 |   color: #795da3;
110 |   font-weight: bold;
111 | }
112 | 
113 | .pl-mo /* meta.output */ {
114 |   color: #1d3e81;
115 | }
116 | 
117 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | window.$           = require('jquery');
 2 | 
 3 | var DetailPlugin      = require('./js/classes/DetailPlugin');
 4 | var PositionPlugin    = require('./js/plugins/PositionPlugin');
 5 | var WorldPlugin       = require('./js/plugins/WorldPlugin');
 6 | var SizePlugin        = require('./js/plugins/SizePlugin');
 7 | var TargetSizePlugin  = require('./js/plugins/TargetSizePlugin');
 8 | var BoundsPlugin      = require('./js/plugins/BoundsPlugin');
 9 | var ScalePlugin       = require('./js/plugins/ScalePlugin');
10 | var AnchorPlugin      = require('./js/plugins/AnchorPlugin');
11 | var FrameRenderPlugin = require('./js/plugins/FrameRenderPlugin');
12 | 
13 | var GameManager            = require('./js/services/GameManager');
14 | var ViewCtrl               = require('./js/controllers/ViewCtrl');
15 | var DetailCtrl             = require('./js/controllers/DetailCtrl');
16 | var TreeCtrl               = require('./js/controllers/TreeCtrl');
17 | var interaction            = require('./js/directives/interaction');
18 | var phaserInspectorTree    = require('./js/directives/phaserInspectorTree');
19 | var phaserInspectorDetails = require('./js/directives/phaserInspectorDetails');
20 | var view                   = require('./js/directives/view');
21 | var viewCollection         = require('./js/directives/viewCollection');
22 | 
23 | var appTpl      = require('./tpl/app.html');
24 | var main        = require('./css/main.css');
25 | var fontAwesome = require('./css/font-awesome.css');
26 | // var tooltip     = require('../node_modules/pg-ng-tooltip/dest/css/pg-ng-tooltip.min.css')
27 | 
28 | Phaser.Plugin.Inspector = class Inspector extends Phaser.Plugin {
29 | 	constructor() {
30 | 		super(...arguments);
31 | 		DetailPlugin.add(PositionPlugin);
32 | 		DetailPlugin.add(WorldPlugin);
33 | 		DetailPlugin.add(SizePlugin);
34 | 		DetailPlugin.add(TargetSizePlugin);
35 | 		DetailPlugin.add(BoundsPlugin);
36 | 		DetailPlugin.add(ScalePlugin);
37 | 		DetailPlugin.add(AnchorPlugin);
38 | 		DetailPlugin.add(FrameRenderPlugin);
39 | 		/** Avoid multiple creation */
40 | 		if ($('.phaser-inspector-panel').length) return;
41 | 		/** @type {Phaser.Signal} Dispatched on game update */
42 | 		this.onUpdate = new Phaser.Signal();
43 | 		/**
44 | 		 * Load Angular framework
45 | 		 * Import angular pior to this behave badly
46 | 		 * TODO: Figure out why
47 | 		 */
48 | 		window.angular = require('angular');
49 | 		require('../node_modules/pg-ng-tooltip/dest/js/pg-ng-tooltip.js');
50 | 		require('angular-bindonce');
51 | 		require('ngstorage');
52 | 		/** Bootstrap app */
53 | 		$('html').attr('data-ng-app', 'app');
54 | 		$('body').append(appTpl);
55 | 		/** Angular app definition */
56 | 		require('./js/app')
57 | 		.factory('game', () => this.game)
58 | 		.factory('onUpdate', () => this.onUpdate)
59 | 		.controller('TreeCtrl', TreeCtrl)
60 | 		.controller('ViewCtrl', ViewCtrl)
61 | 		.controller('DetailCtrl', DetailCtrl)
62 | 		.factory('gameManager', ($timeout) => new GameManager($timeout, this.game, this.onUpdate))
63 | 		.directive('phaserInspectorPanel', interaction)
64 | 		.directive('phaserInspectorTree', phaserInspectorTree)
65 | 		.directive('phaserInspectorDetails', phaserInspectorDetails)
66 | 		.directive('view', view)
67 | 		.directive('viewCollection', viewCollection);
68 | 	}
69 | 	render() {
70 | 		this.onUpdate && this.onUpdate.dispatch();
71 | 	}
72 | }
73 | 
74 | Phaser.Plugin.Inspector.DetailPlugin = require('./js/classes/DetailPlugin');


--------------------------------------------------------------------------------
/src/tpl/details.html:
--------------------------------------------------------------------------------
 1 | <div id="header" ng-if="!detailCtrl.isWorld">
 2 |     <div class="button danger"
 3 |      ng-click="detailCtrl.destroy()"
 4 |     >
 5 |         Destroy
 6 |     </div>
 7 |     <div class="button"
 8 |      ng-class="{warn: cache.alive, success: !cache.alive}"
 9 |      ng-click="detailCtrl.killRevive()"
10 |      ng-if="cache.kill"
11 |     >
12 |         {{ cache.alive ? 'Kill' : 'Revive' }}
13 |     </div>
14 |     <div class="button"
15 |      ng-class="{info : cache.visible, deactive : !cache.visible}"
16 |      ng-click="detailCtrl.showHide()"
17 |      ng-if="cache.alive || !cache.kill"
18 |      tooltip-trigger tooltip-text="Show/Hide"
19 |     >
20 |         <i class="fa"
21 |          ng-class="{'fa-eye': cache.visible, 'fa-eye-slash': !cache.visible}"
22 |         ></i>
23 |     </div>
24 |     <div class="button primary"
25 |      ng-click="detailCtrl.deselect()"
26 |      tooltip-trigger tooltip-text="Deselect"
27 |     >
28 |         <i class="fa fa-ban"></i>
29 |     </div>
30 | </div>
31 | <div class="info">
32 |     <div class="row">
33 |         <div class="label pl1">Class</div>
34 |         <div class="detail" ng-bind="cache.className"></div>
35 |     </div>
36 |     <div class="row"
37 |      tooltip-trigger tooltip-text="Number of direct children"
38 |     >
39 |         <div class="label pl1">Children</div>
40 |         <div class="detail" ng-bind="cache.noChildren"></div>
41 |     </div>
42 |     <div class="row"
43 |      tooltip-trigger tooltip-text="Number of alive direct children"
44 |     >
45 |         <div class="label pl1">Alive</div>
46 |         <div class="detail" ng-bind="cache.noAlive"></div>
47 |     </div>
48 |     <div class="row"
49 |      tooltip-trigger tooltip-text="Number of nested children"
50 |     >
51 |         <div class="label pl1">Nested</div>
52 |         <div class="detail" ng-bind="cache.noNested"></div>
53 |     </div>
54 |     <div class="row"
55 |      tooltip-trigger tooltip-text="Number of alive nested children, not sure if it is correct yet"
56 |     >
57 |         <div class="label pl1">Nested alive</div>
58 |         <div class="detail" ng-bind="cache.noNestedAlive"></div>
59 |     </div>
60 | </div>
61 | 
62 | <div class="section" ng-repeat="plugin in cache.plugins" ng-if="plugin.show">
63 |     <div class="row header" ng-bind="plugin.header"></div>
64 |     <div class="row" ng-if="plugin.fields.template" bind-html-unsafe="plugin.fields.template"></div>
65 |     <div class="row" ng-if="!plugin.fields.template">
66 |         <div ng-repeat-start="field in plugin.fields"
67 |          class="label"
68 |          ng-bind="field.label.text"
69 |          ng-style="{
70 |             'padding-left' : field.label.paddingLeft + 'px',
71 |             'flex' : field.label.flex
72 |          }">
73 |         </div>
74 |         <input
75 |          class="detail"
76 |          ng-if="field.detail.input"
77 |          type="{{field.detail.type || 'number'}}"
78 |          ng-model="field.detail.data"
79 |          ng-style="{
80 |             'padding-left' : field.detail.paddingLeft + 'px',
81 |             'flex' : field.detail.flex
82 |          }"/>
83 |         <div ng-repeat-end
84 |          class="detail"
85 |          ng-if="!field.detail.input"
86 |          ng-bind="field.detail.data"
87 |          ng-style="{
88 |             'padding-left' : field.detail.paddingLeft + 'px',
89 |             'flex' : field.detail.flex
90 |          }">
91 |         </div>
92 |     </div>
93 | </div>


--------------------------------------------------------------------------------
/params.json:
--------------------------------------------------------------------------------
1 | {"name":"Phaser Inspector","tagline":"phaser, game, html5, framework, plugin, inspector, debug","body":"# Phaser Inspector Plugin\r\n\r\n**Phaser Inspector Plugin** allows you to inspect your (or someone else) [Phaser](http://phaser.io) game.\r\n\r\n![Floating, resizable and minimizable](https://farm6.staticflickr.com/5619/21076450010_efa799bf08_o.png)![Intelligent Inspector with object tree, search and edit, state control and bounds drawing](https://farm1.staticflickr.com/730/21076450170_23796d65a4_o.png)\r\n\r\nThe plugin is written using [Angular.js](https://angularjs.org/) and ES6, compiled with [Babel](babeljs.io) and [Browserify](http://browserify.org/), tested on Phaser 2.1.3 and Phaser 2.4.3 running on Google Chrome Version 45.0.2454.85 (64-bit) on OSX Yosemite.\r\n\r\n**Working features:**\r\n- Display objects **tree** inspection.\r\n- Display object **class** guessing.\r\n- Display object **name** guessing (by looking for `this./name/` in parents).\r\n- **Text** as name for Phaser.Text.\r\n- Display objects **non-case-sensitive search** by name and class.\r\n- Display object **destroy/kill/hide**.\r\n- **Properties** inspection and editting.\r\n- **Texture display** for sprite/image\r\n- **Bounds** drawing\r\n- **States** list and state change\r\n- **Floating**, **resizable** and **draggable** panel\r\n- Panel **remember** position on page reload\r\n- **Close/minimize** panel\r\n \r\n**Upcoming features:**\r\n- **Transparent/Clickthrough** panel\r\n- Sprite/Image **load Texture**\r\n- **Optimize** when displaying too many display objects on the tree \r\n\r\nFeel free to follow me on twitter [@netcell](https://twitter.com/netcell) and check out [my blog](http://anhnt.ninja)!\r\n\r\n## Demo\r\n\r\nCheck the `example` folder (please run `bower install` before that, and serve the folder on a server/localhost) or try that example rightaway on [this codepen](http://codepen.io/netcell/full/gapZWG/).\r\n\r\n## Download\r\n\r\nThe source is available for download from [latest release](https://github.com/netcell/phaser-inspector/releases) or by cloning the repository or download the files in `build` folder. Alternatively, you can install via:\r\n- ~~[bower](http://bower.io/): `bower install --save phaser-inspector`~~\r\n\r\n## Usage\r\n\r\n**NOTE:** I have only tested this plugin on Google Chrome so I am not sure how this would perform on other browsers. Also since this plugin is for debugging your game, you should not expect to use it on your mobile devices, meaning remove it (or conditionally not loading it) when deploying to mobile devices.\r\n\r\nSimply download the `phaser-inspector.js` or `phaser-inspector.min.js` script from [latest release](https://github.com/netcell/phaser-inspector/releases) and include it on your page after including Phaser:\r\n\r\n```html\r\n<script src=\"phaser.js\"></script>\r\n<script src=\"phaser-inspector.js\"></script>\r\n```\r\n\r\nIn the `create` method in your boot state:\r\n```javascript\r\ngame.plugins.add(Phaser.Plugin.Inspector);\r\n```\r\n\r\nAlternatively, when running a game in the browser, you can inject the plugin in the developer console as follow:\r\n```javascript\r\nvar script = document.createElement('script'); script.src = \"http://netcell.github.io/phaser-inspector/build/phaser-inspector.js\"; document.getElementsByTagName('head')[0].appendChild(script); function phaserInspectorInject(){ if (Phaser.Plugin.Inspector) Phaser.GAMES[0].plugins.add(Phaser.Plugin.Inspector); else setTimeout(phaserInspectorInject); } setTimeout(phaserInspectorInject);\r\n```\r\n\r\nCheck the example in `example` folder to see it in action :)\r\n\r\n### License ###\r\n\r\nThis content is released under the (http://opensource.org/licenses/MIT) MIT License.\r\n\r\n","google":"UA-62565835-2","note":"Don't delete this file! It's used internally to help with page regeneration."}


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Phaser Inspector Plugin
 2 | 
 3 | **[UPDATE] Phaser Inspector Plugin would be redesign and restructure soon to reborn as a better plugin.**
 4 | 
 5 | **[UPDATE] Phaser Inspector Plugin now support RenderTexture on WebGL.**
 6 | 
 7 | **Phaser Inspector Plugin** allows you to inspect your (or someone else) [Phaser](http://phaser.io) game.
 8 | 
 9 | ![Floating, resizable and minimizable](https://farm6.staticflickr.com/5619/21076450010_efa799bf08_o.png)![Intelligent Inspector with object tree, search and edit, state control and bounds drawing](https://farm1.staticflickr.com/730/21076450170_23796d65a4_o.png)
10 | 
11 | The plugin is written using [Angular.js](https://angularjs.org/) and ES6, compiled with [Babel](babeljs.io) and [Browserify](http://browserify.org/), tested on Phaser 2.1.3 and Phaser 2.4.3 running on Google Chrome Version 45.0.2454.85 (64-bit) on OSX Yosemite.
12 | 
13 | **Working features:**
14 | - Display objects **tree** inspection.
15 | - Display object **class** guessing.
16 | - Display object **name** guessing (by looking for `this./name/` in parents).
17 | - **Text** as name for Phaser.Text.
18 | - Display objects **non-case-sensitive search** by name and class.
19 | - Display object **destroy/kill/hide**.
20 | - **Properties** inspection and editting.
21 | - **Texture display** for sprite/image
22 | - **Bounds** drawing
23 | - **States** list and state change
24 | - **Floating**, **resizable** and **draggable** panel
25 | - Panel **remember** position on page reload
26 | - **Close/minimize** panel
27 | - **Play/Pause** button
28 |  
29 | **Upcoming features:**
30 | - **Transparent/Clickthrough** panel
31 | - Sprite/Image **load Texture**
32 | - **Optimize** when displaying too many display objects on the tree
33 | 
34 | Feel free to follow me on twitter [@netcell](https://twitter.com/netcell) and check out [my blog](http://netcell.github.io)!
35 | 
36 | ## Demo
37 | 
38 | Check the `example` folder (please run `bower install` before that, and serve the folder on a server/localhost) or try that example rightaway on [this codepen](http://codepen.io/netcell/full/gapZWG/).
39 | 
40 | ## Download
41 | 
42 | The source is available for download from [latest release](https://github.com/netcell/phaser-inspector/releases) or by cloning the repository or download the files in `build` folder. Alternatively, you can install via:
43 | - ~~[bower](http://bower.io/): `bower install --save phaser-inspector`~~
44 | 
45 | ## Usage
46 | 
47 | **NOTE:** I have only tested this plugin on Google Chrome so I am not sure how this would perform on other browsers. Also since this plugin is for debugging your game, you should not expect to use it on your mobile devices, meaning remove it (or conditionally not loading it) when deploying to mobile devices.
48 | 
49 | Simply download the `phaser-inspector.js` or `phaser-inspector.min.js` script from [latest release](https://github.com/netcell/phaser-inspector/releases) and include it on your page after including Phaser:
50 | 
51 | ```html
52 | <script src="phaser.js"></script>
53 | <script src="phaser-inspector.js"></script>
54 | ```
55 | 
56 | In the `create` method in your boot state:
57 | ```javascript
58 | game.plugins.add(Phaser.Plugin.Inspector);
59 | ```
60 | 
61 | Alternatively, when running a game in the browser, you can inject the plugin in the developer console as follow:
62 | ```javascript
63 | var script = document.createElement('script'); script.src = "http://netcell.github.io/phaser-inspector/build/phaser-inspector.js"; document.getElementsByTagName('head')[0].appendChild(script); function phaserInspectorInject(){ if (Phaser.Plugin.Inspector) Phaser.GAMES[0].plugins.add(Phaser.Plugin.Inspector); else setTimeout(phaserInspectorInject); } setTimeout(phaserInspectorInject);
64 | ```
65 | 
66 | Check the example in `example` folder to see it in action :)
67 | 
68 | ### License ###
69 | 
70 | This content is released under the (http://opensource.org/licenses/MIT) MIT License.
71 | 
72 | 


--------------------------------------------------------------------------------
/stylesheets/print.css:
--------------------------------------------------------------------------------
  1 | html, body, div, span, applet, object, iframe,
  2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3 | a, abbr, acronym, address, big, cite, code,
  4 | del, dfn, em, img, ins, kbd, q, s, samp,
  5 | small, strike, strong, sub, sup, tt, var,
  6 | b, u, i, center,
  7 | dl, dt, dd, ol, ul, li,
  8 | fieldset, form, label, legend,
  9 | table, caption, tbody, tfoot, thead, tr, th, td,
 10 | article, aside, canvas, details, embed,
 11 | figure, figcaption, footer, header, hgroup,
 12 | menu, nav, output, ruby, section, summary,
 13 | time, mark, audio, video {
 14 |   padding: 0;
 15 |   margin: 0;
 16 |   font: inherit;
 17 |   font-size: 100%;
 18 |   vertical-align: baseline;
 19 |   border: 0;
 20 | }
 21 | /* HTML5 display-role reset for older browsers */
 22 | article, aside, details, figcaption, figure,
 23 | footer, header, hgroup, menu, nav, section {
 24 |   display: block;
 25 | }
 26 | body {
 27 |   line-height: 1;
 28 | }
 29 | ol, ul {
 30 |   list-style: none;
 31 | }
 32 | blockquote, q {
 33 |   quotes: none;
 34 | }
 35 | blockquote:before, blockquote:after,
 36 | q:before, q:after {
 37 |   content: '';
 38 |   content: none;
 39 | }
 40 | table {
 41 |   border-spacing: 0;
 42 |   border-collapse: collapse;
 43 | }
 44 | body {
 45 |   font-family: 'Helvetica Neue', Helvetica, Arial, serif;
 46 |   font-size: 13px;
 47 |   line-height: 1.5;
 48 |   color: #000;
 49 | }
 50 | 
 51 | a {
 52 |   font-weight: bold;
 53 |   color: #d5000d;
 54 | }
 55 | 
 56 | header {
 57 |   padding-top: 35px;
 58 |   padding-bottom: 10px;
 59 | }
 60 | 
 61 | header h1 {
 62 |   font-size: 48px;
 63 |   font-weight: bold;
 64 |   line-height: 1.2;
 65 |   color: #303030;
 66 |   letter-spacing: -1px;
 67 | }
 68 | 
 69 | header h2 {
 70 |   font-size: 24px;
 71 |   font-weight: normal;
 72 |   line-height: 1.3;
 73 |   color: #aaa;
 74 |   letter-spacing: -1px;
 75 | }
 76 | #downloads {
 77 |   display: none;
 78 | }
 79 | #main_content {
 80 |   padding-top: 20px;
 81 | }
 82 | 
 83 | code, pre {
 84 |   margin-bottom: 30px;
 85 |   font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
 86 |   font-size: 12px;
 87 |   color: #222;
 88 | }
 89 | 
 90 | code {
 91 |   padding: 0 3px;
 92 | }
 93 | 
 94 | pre {
 95 |   padding: 20px;
 96 |   overflow: auto;
 97 |   border: solid 1px #ddd;
 98 | }
 99 | pre code {
100 |   padding: 0;
101 | }
102 | 
103 | ul, ol, dl {
104 |   margin-bottom: 20px;
105 | }
106 | 
107 | 
108 | /* COMMON STYLES */
109 | 
110 | table {
111 |   width: 100%;
112 |   border: 1px solid #ebebeb;
113 | }
114 | 
115 | th {
116 |   font-weight: 500;
117 | }
118 | 
119 | td {
120 |   font-weight: 300;
121 |   text-align: center;
122 |   border: 1px solid #ebebeb;
123 | }
124 | 
125 | form {
126 |   padding: 20px;
127 |   background: #f2f2f2;
128 | 
129 | }
130 | 
131 | 
132 | /* GENERAL ELEMENT TYPE STYLES */
133 | 
134 | h1 {
135 |   font-size: 2.8em;
136 | }
137 | 
138 | h2 {
139 |   margin-bottom: 8px;
140 |   font-size: 22px;
141 |   font-weight: bold;
142 |   color: #303030;
143 | }
144 | 
145 | h3 {
146 |   margin-bottom: 8px;
147 |   font-size: 18px;
148 |   font-weight: bold;
149 |   color: #d5000d;
150 | }
151 | 
152 | h4 {
153 |   font-size: 16px;
154 |   font-weight: bold;
155 |   color: #303030;
156 | }
157 | 
158 | h5 {
159 |   font-size: 1em;
160 |   color: #303030;
161 | }
162 | 
163 | h6 {
164 |   font-size: .8em;
165 |   color: #303030;
166 | }
167 | 
168 | p {
169 |   margin-bottom: 20px;
170 |   font-weight: 300;
171 | }
172 | 
173 | a {
174 |   text-decoration: none;
175 | }
176 | 
177 | p a {
178 |   font-weight: 400;
179 | }
180 | 
181 | blockquote {
182 |   padding: 0 0 0 30px;
183 |   margin-bottom: 20px;
184 |   font-size: 1.6em;
185 |   border-left: 10px solid #e9e9e9;
186 | }
187 | 
188 | ul li {
189 |   list-style-position: inside;
190 |   list-style: disc;
191 |   padding-left: 20px;
192 | }
193 | 
194 | ol li {
195 |   list-style-position: inside;
196 |   list-style: decimal;
197 |   padding-left: 3px;
198 | }
199 | 
200 | dl dd {
201 |   font-style: italic;
202 |   font-weight: 100;
203 | }
204 | 
205 | footer {
206 |   padding-top: 20px;
207 |   padding-bottom: 30px;
208 |   margin-top: 40px;
209 |   font-size: 13px;
210 |   color: #aaa;
211 | }
212 | 
213 | footer a {
214 |   color: #666;
215 | }
216 | 
217 | /* MISC */
218 | .clearfix:after {
219 |   display: block;
220 |   height: 0;
221 |   clear: both;
222 |   visibility: hidden;
223 |   content: '.';
224 | }
225 | 
226 | .clearfix {display: inline-block;}
227 | * html .clearfix {height: 1%;}
228 | .clearfix {display: block;}
229 | 


--------------------------------------------------------------------------------
/src/js/services/GameManager.js:
--------------------------------------------------------------------------------
  1 | var _             = require('lodash');
  2 | var DisplayObject = require('../classes/DisplayObject');
  3 | 
  4 | /** Return true if childObj has name/type match the search term */
  5 | function match(childObj, term){
  6 | 	if (!term) return false;
  7 | 	var {name, type} = childObj;
  8 | 	return (name && name.toLowerCase().match(term)) || (type && type.toLowerCase().match(term));
  9 | }
 10 | 
 11 | var min = Math.min,
 12 | 	max = Math.max;
 13 | 
 14 | export default class GameManager {
 15 | 	constructor($timeout, game, onUpdate){
 16 | 		this.$timeout = $timeout;
 17 | 		this.game     = game;
 18 | 		this.onUpdate = onUpdate;
 19 | 
 20 | 		this.filteredWorld = { children: [] };
 21 | 		this.filterTimer   = null;
 22 | 
 23 | 		this.$render = true;
 24 | 
 25 | 		var self = this;
 26 | 		Object.defineProperty(window, '$inspectorTreeSelected', {
 27 | 			get: function(){
 28 | 				return self.$inspectorTreeSelected;
 29 | 			}
 30 | 		})
 31 | 
 32 | 		this.$inspectorTreeSelected = null;
 33 | 	}
 34 | 	nextFrame(){
 35 | 		this.game.paused = false;
 36 | 		this.onUpdate.addOnce(() => this.game.paused = true)
 37 | 	}
 38 | 	screenInspect(){
 39 | 		var game = this.game;
 40 | 		if (this.screenInspecting) {
 41 | 			return this.stopScreenInspect();
 42 | 		}
 43 | 		var image = game.add.image(0, 0);
 44 | 			image.inputEnabled = true;
 45 | 			image.width  = game.width;
 46 | 			image.height = game.height;
 47 | 			image.name = 'Inspect Layer';
 48 | 		image.events.onInputDown.add(this.onScreenInspect, this);
 49 | 		this.onScreenInspectImage = image;
 50 | 		this.screenInspecting = true;
 51 | 	}
 52 | 	stopScreenInspect(){
 53 | 		this.onScreenInspectImage && this.onScreenInspectImage.destroy();
 54 | 		this.onScreenInspectImage = null;
 55 | 		this.screenInspecting = false;
 56 | 	}
 57 | 	onScreenInspect(){
 58 | 		var game    = this.game;
 59 | 		var world   = game.world;
 60 | 		var pointer = game.input.activePointer;
 61 | 		var obj = this.searchSpriteUnderPointer(world, pointer);
 62 | 		this.collapseAll();
 63 | 		obj && ( new DisplayObject(obj, this).expand() );
 64 | 	}
 65 | 	getObjectBounds(obj){
 66 | 		var bounds = obj.getBounds();
 67 | 		if (obj.children.length) {
 68 | 			var groupBounds = Phaser.Group.prototype.getBounds.call(obj);
 69 | 			bounds.x = min(bounds.x, groupBounds.x);
 70 | 			bounds.y = min(bounds.y, groupBounds.y);
 71 | 			bounds.width = max(bounds.width, groupBounds.width);
 72 | 			bounds.height = max(bounds.height, groupBounds.height);
 73 | 		}
 74 | 		return bounds;
 75 | 	}
 76 | 	searchSpriteUnderPointer(parent, pointer){
 77 | 		var children = parent.children;
 78 | 		for (var i = children.length - 1; i >= 0; i--) {
 79 | 			var child = children[i];
 80 | 			if (child.alive && child.visible && child !== this.onScreenInspectImage) {
 81 | 				var bounds = this.getObjectBounds(child);
 82 | 				if ( bounds.contains(pointer.worldX, pointer.worldY) ){
 83 | 					if (!child.children.length) return child;
 84 | 					else  {
 85 | 						var obj = this.searchSpriteUnderPointer(child, pointer);
 86 | 						return obj || child;
 87 | 					}
 88 | 				}
 89 | 			}
 90 | 		}
 91 | 	}
 92 | 	collapseAll(){
 93 | 		this.$inspectorTreeSelected = null;
 94 | 		this.collapse(this.game.world);
 95 | 	}
 96 | 	collapse(parent){
 97 | 		parent.children
 98 | 		.map(child => {
 99 | 			child.$inspectorTreeExpanded = false;
100 | 			this.collapse(child);
101 | 		});
102 | 	}
103 | 	filter(term){
104 | 		term && (term = term.toLowerCase());
105 | 		/** Populate this.filteredWorld with filtered version of the world. Dah! */
106 | 		var {game, filteredWorld, filterTimer, $timeout} = this;
107 | 		/** Reset */
108 | 		filteredWorld.$inspectorFilteredChildren = [];
109 | 		/** Start filtering. Use timer to make sure the DOM is clean */
110 | 		filterTimer && $timeout.cancel(filterTimer);
111 | 		this.filterTimer = $timeout(() => {
112 | 			this.collect(game.world, filteredWorld.$inspectorFilteredChildren, term)
113 | 		});
114 | 	}
115 | 	collect(parent, list, term){
116 | 		/** Recursive mechanism of filter */
117 | 		var children = parent.children;
118 | 		_.each(children, child => {
119 | 			var children = child.$inspectorFilteredChildren = [];
120 | 			var childObj = new DisplayObject(child, this);
121 | 			/** Remain expansion while searching */
122 | 			childObj.expanded = (!term && this.$inspectorTreeSelected === child);
123 | 			/** Recursive */
124 | 			this.collect(child, children, term);
125 | 			/** Populate if match */
126 | 			if (children.length || match(childObj, term)) {
127 | 				child.$inspectorTreeExpanded = true;
128 | 				list.push(child)
129 | 			};
130 | 		})
131 | 	}
132 | }


--------------------------------------------------------------------------------
/src/js/classes/DisplayObject.js:
--------------------------------------------------------------------------------
  1 | var _ = require('lodash');
  2 | /** Wrapping Phaser Object for external functionalities  */
  3 | export default class DisplayObject {
  4 | 	constructor(obj, gameManager){
  5 | 		this.obj         = obj;
  6 | 		this.gameManager = gameManager;
  7 | 	}
  8 | 	/** CHILDREN */
  9 | 	get numberOfChildren() {
 10 | 		return this.obj.children.length;
 11 | 	}
 12 | 	get hasChildren() {
 13 | 		return !!this.numberOfChildren;
 14 | 	}
 15 | 	/** Number of parents above */
 16 | 	get childLevel(){
 17 | 		/** Exclude game.world and game.world.parent (Stage) */
 18 | 		var count = -2;
 19 | 		var parent = this.obj.parent;
 20 | 		while (parent) {
 21 | 			count++;
 22 | 			parent = parent.parent;
 23 | 		}
 24 | 		return count;
 25 | 	}
 26 | 	/** NAME OF THE OBJECT */
 27 | 	/**
 28 | 	 * Utility for get game()
 29 | 	 * Accessing parent to find
 30 | 	 * prop key name the obj attached to
 31 | 	 */
 32 | 	find(parent, obj){
 33 | 		console.log(parent)
 34 | 		if (parent) {
 35 | 			var keys = Object.keys(parent);
 36 | 			var foundKey = null;
 37 | 			for (var i = keys.length - 1; i >= 0; i--) {
 38 | 				var key = keys[i];
 39 | 				if (parent[key] === obj) {
 40 | 					if (key === 'cursor') foundKey = key;
 41 | 					else return key;
 42 | 				}
 43 | 			}
 44 | 			return foundKey || this.find(parent.parent, obj);
 45 | 		} else return false;
 46 | 	}
 47 | 	/**
 48 | 	 * Get the game of the current object
 49 | 	 * By finding the key name in the parent
 50 | 	 * Or the current state (if it is at top level)
 51 | 	 * Or the current text (if it's the Text object)
 52 | 	 * Or the specified name (if any, probably not, sadly)
 53 | 	 */
 54 | 	get name(){
 55 | 		var obj = this.obj;
 56 | 		if (_.isString(obj.text)) return obj.text;
 57 | 		if (this._name) return this._name;
 58 | 		var state = this.gameManager.game.state;
 59 | 		/** Search in current state */
 60 | 		var name = this.find(state.states[state.current], obj);
 61 | 		if (name) this._name = name;
 62 | 		else {
 63 | 			/** Recursively search in parent and parent of parent */
 64 | 			name = this.find(obj.parent, obj);
 65 | 			if (name) this._name = name;
 66 | 			else if (_.isString(obj.name)) this._name = obj.name;
 67 | 			else this._name = '';
 68 | 		}
 69 | 		return this._name;
 70 | 	}
 71 | 	/** THE CLASS OF THE OBJECT */
 72 | 	/** Get the class type of the current object */
 73 | 	get type() {
 74 | 		if (this._type) return this._type;
 75 | 		var node = this.obj;
 76 | 		/** Either the constructor name */
 77 | 		if (node.constructor.name) return this._type = node.constructor.name;
 78 | 		/** Or guessing if it's not a Phaser class */
 79 | 		if (node.type === undefined) {
 80 | 			if (node instanceof PIXI.Stage) return this._type = 'PIXI Stage';
 81 | 			else if (node instanceof PIXI.Sprite) return this._type = 'PIXI Sprite';
 82 | 			else if (node instanceof PIXI.DisplayObjectContainer) return this._type = 'PIXI DisplayObjectContainer';
 83 | 			else if (node instanceof PIXI.DisplayObject) return this._type = 'PIXI DisplayObject';
 84 | 			else return this._type = 'Unknown';
 85 | 		/** Or checking with Phaser classes table */
 86 | 		} else {
 87 | 			switch(node.type) {
 88 | 				case Phaser.SPRITE        : return this._type = 'Sprite';
 89 | 				case Phaser.BUTTON        : return this._type = 'Button';
 90 | 				case Phaser.IMAGE         : return this._type = 'Image';
 91 | 				case Phaser.GRAPHICS      : return this._type = 'Graphics';
 92 | 				case Phaser.TEXT          : return this._type = 'Text';
 93 | 				case Phaser.TILESPRITE    : return this._type = 'Tile Sprite';
 94 | 				case Phaser.BITMAPTEXT    : return this._type = 'Bitmap Text';
 95 | 				case Phaser.GROUP         : return this._type = 'Group';
 96 | 				case Phaser.RENDERTEXTURE : return this._type = 'Render Texture';
 97 | 				case Phaser.TILEMAP       : return this._type = 'Tilemap';
 98 | 				case Phaser.TILEMAPLAYER  : return this._type = 'Tilemap Layer';
 99 | 				case Phaser.EMITTER       : return this._type = 'Emitter';
100 | 				case Phaser.POLYGON       : return this._type = 'Polygon';
101 | 				case Phaser.BITMAPDATA    : return this._type = 'Bitmap Data';
102 | 				case Phaser.CANVAS_FILTER : return this._type = 'Canvas Filter';
103 | 				case Phaser.WEBGL_FILTER  : return this._type = 'WebGL Filter';
104 | 				case Phaser.ELLIPSE       : return this._type = 'Ellipse';
105 | 				case Phaser.SPRITEBATCH   : return this._type = 'Sprite Batch';
106 | 				case Phaser.RETROFONT     : return this._type = 'Retro Font';
107 | 				case Phaser.POINTER       : return this._type = 'Pointer';
108 | 				case Phaser.ROPE          : return this._type = 'Rope';
109 | 				default                   : return this._type = 'Unknown';
110 | 			}
111 | 		}
112 | 	}
113 | 	get img(){
114 | 		var img = {};
115 | 		var texture = this.obj.texture;
116 | 		if ( texture && texture.baseTexture) {
117 | 			var source = texture.baseTexture.source;
118 | 			if (source && source.src) img.url = source.src;
119 | 			else if (texture.getBase64) {
120 | 				img.url = texture.getBase64();
121 | 			}
122 | 			if (img.url) {
123 | 				var frame  = texture.frame;
124 | 				img.width  = frame.width;
125 | 				img.height = frame.height;
126 | 				img.x      = frame.x;
127 | 				img.y      = frame.y;
128 | 				img.scale  = 1;
129 | 				var detailPanelWidth = $('.frame-img').parent().innerWidth();
130 | 				if (frame.width > detailPanelWidth) {
131 | 					img.scale = detailPanelWidth/frame.width;
132 | 				}
133 | 			}
134 | 		}
135 | 		return img;
136 | 	}
137 | 	/** SELECTION AND EXPANSION FOR VIEW */
138 | 	get expanded(){
139 | 		return this.obj.$inspectorTreeExpanded;
140 | 	}
141 | 	set expanded(value){
142 | 		var obj = this.obj;
143 | 		obj.$inspectorTreeExpanded = value;
144 | 		/**
145 | 		 * If an object is on expansion,
146 | 		 * the parent should also be too
147 | 		 */
148 | 		if (value) {
149 | 			var parent = obj.parent;
150 | 			while (parent) {
151 | 				parent.$inspectorTreeExpanded = true;
152 | 				parent = parent.parent;
153 | 			}
154 | 		}
155 | 	}
156 | 	get selected(){
157 | 		return this.gameManager.$inspectorTreeSelected === this.obj;
158 | 	}
159 | 	get parentSelected(){
160 | 		return this.gameManager.$inspectorTreeSelected === this.obj.parent;
161 | 	}
162 | 	expand(){
163 | 		this.expanded = !this.expanded;
164 | 		this.gameManager.$inspectorTreeSelected = this.obj;
165 | 	}
166 | 	select(){
167 | 		this.gameManager.$inspectorTreeSelected = this.obj;
168 | 	}
169 | }


--------------------------------------------------------------------------------
/src/css/main.sass:
--------------------------------------------------------------------------------
  1 | html, body
  2 | 	font       : 14px "Avenir Next"
  3 | 
  4 | ::-webkit-scrollbar
  5 | 	width  : 7px
  6 | 	height : 7px
  7 | 
  8 | ::-webkit-scrollbar-track
  9 | 	border-radius : 10px
 10 | 
 11 | /* Handle */
 12 | ::-webkit-scrollbar-thumb
 13 | 	background : rgba(22, 75, 96,0.5)
 14 | 
 15 | ::-webkit-scrollbar-corner
 16 | 	background : none
 17 | 
 18 | ::-webkit-scrollbar-thumb:hover
 19 | 	background : rgba(22, 75, 96,0.8)
 20 | 
 21 | $pg-tooltip-background : #1C2B36
 22 | 
 23 | .tooltip
 24 | 
 25 | 	$_trns: 125ms ease-out
 26 | 	pointer-events   : none
 27 | 	position         : absolute
 28 | 	z-index          : 9999999999
 29 | 	top              :-9999px
 30 | 	left             :-9999px
 31 | 	opacity          :0
 32 | 	padding          : 0 12px
 33 | 	margin           : -12px 0 0 6px
 34 | 	border-radius    : 7px
 35 | 	border           : 2px solid #869FB1
 36 | 	color            : #fff
 37 | 	background-color : rgba($pg-tooltip-background, 0.95)
 38 | 	transform        : scale(0.925,0.925)
 39 | 	transition       : opacity $_trns, transform $_trns
 40 | 	&, *
 41 | 		white-space : nowrap
 42 | 
 43 | 	&.showing
 44 | 		opacity   : 0.95
 45 | 		transform : translate(0, -40px) scale(1,1)
 46 | 
 47 | .phaser-inspector-panel
 48 | 	width       : 500px
 49 | 	height      : 450px
 50 | 	min-width   : 450px!important
 51 | 	min-height  : 300px!important
 52 | 	z-index     : 500
 53 | 	padding-top : 20px
 54 | 
 55 | 	border: 5px solid #1C2B36
 56 | 
 57 | 	background : rgba(0,0,0,0.85)
 58 | 	color      : #aaa
 59 | 
 60 | 	display         : flex
 61 | 	justify-content : stretch
 62 | 
 63 | 	&.collapsed
 64 | 		min-height    : 0px!important
 65 | 		min-width     : 0px!important
 66 | 		height        : 0px!important
 67 | 		width         : 50px!important
 68 | 		border-bottom : none!important
 69 | 
 70 | 	.button
 71 | 		cursor        : pointer
 72 | 		display       : inline-block
 73 | 		padding       : 0 5px
 74 | 		margin-left   : 5px
 75 | 		height        : 24px
 76 | 		text-align    : center
 77 | 		line-height   : 24px
 78 | 		color         : #fff
 79 | 		border-radius : 8px
 80 | 		i
 81 | 			line-height : 25px
 82 | 		&.info
 83 | 			background : #1797be
 84 | 		&.primary
 85 | 			background : #6E2E92
 86 | 		&.warn
 87 | 			background : #AF8F0A
 88 | 		&.danger
 89 | 			background : #A21111
 90 | 		&.success
 91 | 			background : #11A218
 92 | 		&.deactive
 93 | 			background : #869FB1
 94 | 
 95 | 	.grabber
 96 | 		position   : absolute
 97 | 		top        : 0
 98 | 		left       : 0
 99 | 		width      : 100%
100 | 		height     : 20px
101 | 		background : #1C2B36
102 | 		color      : #FFF
103 | 		font-size  : 18px
104 | 		cursor     : move
105 | 
106 | 		div
107 | 			position  : absolute
108 | 			top       : -4px
109 | 			cursor    : pointer
110 | 
111 | 		.close
112 | 			left      : 0
113 | 
114 | 		.toggle-detail
115 | 			right     : 0
116 | 
117 | 	.panel
118 | 		overflow       : auto
119 | 
120 | 	#details
121 | 		overflow-x     : hidden
122 | 		width          : 250px
123 | 
124 | 		>div
125 | 			margin-top : 10px
126 | 
127 | 		#header
128 | 			user-select : none
129 | 			margin-left : 10px
130 | 
131 | 		.row
132 | 			display         : flex
133 | 			justify-content : stretch
134 | 			line-height     : 23px
135 | 			border-bottom   : 1px solid #222
136 | 
137 | 			&.header
138 | 				border-bottom : none
139 | 				padding-left  : 5px
140 | 
141 | 			>div
142 | 				padding-left  : 10px
143 | 
144 | 			.label
145 | 				flex       : 2
146 | 				background : #1c2b36
147 | 				color      : #ccc
148 | 
149 | 			.detail
150 | 				flex  : 3
151 | 				color : #fff
152 | 
153 | 			input
154 | 				background         : none
155 | 				border             : none
156 | 				outline            : none
157 | 				-webkit-appearance : none
158 | 				padding-left       : 10px
159 | 
160 | 			input::-webkit-outer-spin-button, input::-webkit-inner-spin-button
161 | 				-webkit-appearance : none
162 | 				margin             : 0
163 | 
164 | 		.frame-img
165 | 			margin           : 0 auto
166 | 			transform-origin : top left
167 | 
168 | 	#tree
169 | 		box-shadow       : -25px 30px 24px -30px #000 inset
170 | 		flex             : 1
171 | 		color            : #bbb9ff
172 | 		border-right     : 1px solid #222
173 | 		background-color : #1c2b36
174 | 		display          : flex
175 | 		flex-direction   : column-reverse
176 | 		overflow         : hidden
177 | 		.search
178 | 			width            : 100%
179 | 			background-color : #dee5e7
180 | 			font-size        : 14px
181 | 			color            : #696969
182 | 			border           : none
183 | 			outline          : none
184 | 			padding          : 5px 15px
185 | 		.scene
186 | 			user-select    : none
187 | 			flex           : 1
188 | 			overflow       : auto
189 | 			.view
190 | 				.row
191 | 					font-weight : bold
192 | 					line-height : 30px
193 | 					white-space : nowrap
194 | 					user-select : none
195 | 					&.selected
196 | 						background-color : #0A1925
197 | 					&.parentSelected
198 | 						background-color : #17222B
199 | 					>div
200 | 						display : inline-block
201 | 					.middle
202 | 						div
203 | 							text-align     : right
204 | 							padding-right  : 5px
205 | 							color          : #1797be
206 | 							display        : inline-block
207 | 							cursor         : pointer
208 | 						.eye
209 | 							text-align    : center
210 | 							color         : #1797be
211 | 							display       : inline-block
212 | 						.fa-eye-slash, .fa-unlock-alt
213 | 							color : #869fb1
214 | 						.toggle
215 | 							padding-right : 5px
216 | 							width         : 5px
217 | 							.fa
218 | 								width  : 100%
219 | 							.fa-circle
220 | 								font-size   : 5px
221 | 								font-weight : normal
222 | 						.name
223 | 							color : #869fb1
224 | 						.type
225 | 						.children
226 | 				&.weak
227 | 					.middle
228 | 						font-weight: normal
229 | 						font-style: italic
230 | 		.tree-control
231 | 			user-select    : none
232 | 			padding          : 5px 0
233 | 			background-color : #183848
234 | 		.states
235 | 			user-select    : none
236 | 			height     : 100px
237 | 			overflow-x : hidden
238 | 			overflow-y : auto
239 | 			position   : relative
240 | 			.state
241 | 				padding     : 5px 10px
242 | 				font-weight : bold
243 | 				color       : #1797BE
244 | 				position    : relative
245 | 				&.selected
246 | 					background-color : #0A1925
247 | 					color            : #869FB1
248 | 
249 | @for $i from 1 through 12
250 | 	.f#{$i}
251 | 		flex : $i!important
252 | 
253 | @for $j from 1 through 5
254 | 	.pl#{$j}
255 | 		padding-left : 5px * $j!important
256 | 


--------------------------------------------------------------------------------
/stylesheets/stylesheet.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box; }
  3 | 
  4 | body {
  5 |   padding: 0;
  6 |   margin: 0;
  7 |   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  8 |   font-size: 16px;
  9 |   line-height: 1.5;
 10 |   color: #606c71; }
 11 | 
 12 | a {
 13 |   color: #1e6bb8;
 14 |   text-decoration: none; }
 15 |   a:hover {
 16 |     text-decoration: underline; }
 17 | 
 18 | .btn {
 19 |   display: inline-block;
 20 |   margin-bottom: 1rem;
 21 |   color: rgba(255, 255, 255, 0.7);
 22 |   background-color: rgba(255, 255, 255, 0.08);
 23 |   border-color: rgba(255, 255, 255, 0.2);
 24 |   border-style: solid;
 25 |   border-width: 1px;
 26 |   border-radius: 0.3rem;
 27 |   transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
 28 |   .btn + .btn {
 29 |     margin-left: 1rem; }
 30 | 
 31 | .btn:hover {
 32 |   color: rgba(255, 255, 255, 0.8);
 33 |   text-decoration: none;
 34 |   background-color: rgba(255, 255, 255, 0.2);
 35 |   border-color: rgba(255, 255, 255, 0.3); }
 36 | 
 37 | @media screen and (min-width: 64em) {
 38 |   .btn {
 39 |     padding: 0.75rem 1rem; } }
 40 | 
 41 | @media screen and (min-width: 42em) and (max-width: 64em) {
 42 |   .btn {
 43 |     padding: 0.6rem 0.9rem;
 44 |     font-size: 0.9rem; } }
 45 | 
 46 | @media screen and (max-width: 42em) {
 47 |   .btn {
 48 |     display: block;
 49 |     width: 100%;
 50 |     padding: 0.75rem;
 51 |     font-size: 0.9rem; }
 52 |     .btn + .btn {
 53 |       margin-top: 1rem;
 54 |       margin-left: 0; } }
 55 | 
 56 | .page-header {
 57 |   color: #fff;
 58 |   text-align: center;
 59 |   background-color: #159957;
 60 |   background-image: linear-gradient(120deg, #155799, #159957); }
 61 | 
 62 | @media screen and (min-width: 64em) {
 63 |   .page-header {
 64 |     padding: 5rem 6rem; } }
 65 | 
 66 | @media screen and (min-width: 42em) and (max-width: 64em) {
 67 |   .page-header {
 68 |     padding: 3rem 4rem; } }
 69 | 
 70 | @media screen and (max-width: 42em) {
 71 |   .page-header {
 72 |     padding: 2rem 1rem; } }
 73 | 
 74 | .project-name {
 75 |   margin-top: 0;
 76 |   margin-bottom: 0.1rem; }
 77 | 
 78 | @media screen and (min-width: 64em) {
 79 |   .project-name {
 80 |     font-size: 3.25rem; } }
 81 | 
 82 | @media screen and (min-width: 42em) and (max-width: 64em) {
 83 |   .project-name {
 84 |     font-size: 2.25rem; } }
 85 | 
 86 | @media screen and (max-width: 42em) {
 87 |   .project-name {
 88 |     font-size: 1.75rem; } }
 89 | 
 90 | .project-tagline {
 91 |   margin-bottom: 2rem;
 92 |   font-weight: normal;
 93 |   opacity: 0.7; }
 94 | 
 95 | @media screen and (min-width: 64em) {
 96 |   .project-tagline {
 97 |     font-size: 1.25rem; } }
 98 | 
 99 | @media screen and (min-width: 42em) and (max-width: 64em) {
100 |   .project-tagline {
101 |     font-size: 1.15rem; } }
102 | 
103 | @media screen and (max-width: 42em) {
104 |   .project-tagline {
105 |     font-size: 1rem; } }
106 | 
107 | .main-content :first-child {
108 |   margin-top: 0; }
109 | .main-content img {
110 |   max-width: 100%; }
111 | .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
112 |   margin-top: 2rem;
113 |   margin-bottom: 1rem;
114 |   font-weight: normal;
115 |   color: #159957; }
116 | .main-content p {
117 |   margin-bottom: 1em; }
118 | .main-content code {
119 |   padding: 2px 4px;
120 |   font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
121 |   font-size: 0.9rem;
122 |   color: #383e41;
123 |   background-color: #f3f6fa;
124 |   border-radius: 0.3rem; }
125 | .main-content pre {
126 |   padding: 0.8rem;
127 |   margin-top: 0;
128 |   margin-bottom: 1rem;
129 |   font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
130 |   color: #567482;
131 |   word-wrap: normal;
132 |   background-color: #f3f6fa;
133 |   border: solid 1px #dce6f0;
134 |   border-radius: 0.3rem; }
135 |   .main-content pre > code {
136 |     padding: 0;
137 |     margin: 0;
138 |     font-size: 0.9rem;
139 |     color: #567482;
140 |     word-break: normal;
141 |     white-space: pre;
142 |     background: transparent;
143 |     border: 0; }
144 | .main-content .highlight {
145 |   margin-bottom: 1rem; }
146 |   .main-content .highlight pre {
147 |     margin-bottom: 0;
148 |     word-break: normal; }
149 | .main-content .highlight pre, .main-content pre {
150 |   padding: 0.8rem;
151 |   overflow: auto;
152 |   font-size: 0.9rem;
153 |   line-height: 1.45;
154 |   border-radius: 0.3rem; }
155 | .main-content pre code, .main-content pre tt {
156 |   display: inline;
157 |   max-width: initial;
158 |   padding: 0;
159 |   margin: 0;
160 |   overflow: initial;
161 |   line-height: inherit;
162 |   word-wrap: normal;
163 |   background-color: transparent;
164 |   border: 0; }
165 |   .main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
166 |     content: normal; }
167 | .main-content ul, .main-content ol {
168 |   margin-top: 0; }
169 | .main-content blockquote {
170 |   padding: 0 1rem;
171 |   margin-left: 0;
172 |   color: #819198;
173 |   border-left: 0.3rem solid #dce6f0; }
174 |   .main-content blockquote > :first-child {
175 |     margin-top: 0; }
176 |   .main-content blockquote > :last-child {
177 |     margin-bottom: 0; }
178 | .main-content table {
179 |   display: block;
180 |   width: 100%;
181 |   overflow: auto;
182 |   word-break: normal;
183 |   word-break: keep-all; }
184 |   .main-content table th {
185 |     font-weight: bold; }
186 |   .main-content table th, .main-content table td {
187 |     padding: 0.5rem 1rem;
188 |     border: 1px solid #e9ebec; }
189 | .main-content dl {
190 |   padding: 0; }
191 |   .main-content dl dt {
192 |     padding: 0;
193 |     margin-top: 1rem;
194 |     font-size: 1rem;
195 |     font-weight: bold; }
196 |   .main-content dl dd {
197 |     padding: 0;
198 |     margin-bottom: 1rem; }
199 | .main-content hr {
200 |   height: 2px;
201 |   padding: 0;
202 |   margin: 1rem 0;
203 |   background-color: #eff0f1;
204 |   border: 0; }
205 | 
206 | @media screen and (min-width: 64em) {
207 |   .main-content {
208 |     max-width: 64rem;
209 |     padding: 2rem 6rem;
210 |     margin: 0 auto;
211 |     font-size: 1.1rem; } }
212 | 
213 | @media screen and (min-width: 42em) and (max-width: 64em) {
214 |   .main-content {
215 |     padding: 2rem 4rem;
216 |     font-size: 1.1rem; } }
217 | 
218 | @media screen and (max-width: 42em) {
219 |   .main-content {
220 |     padding: 2rem 1rem;
221 |     font-size: 1rem; } }
222 | 
223 | .site-footer {
224 |   padding-top: 2rem;
225 |   margin-top: 2rem;
226 |   border-top: solid 1px #eff0f1; }
227 | 
228 | .site-footer-owner {
229 |   display: block;
230 |   font-weight: bold; }
231 | 
232 | .site-footer-credits {
233 |   color: #819198; }
234 | 
235 | @media screen and (min-width: 64em) {
236 |   .site-footer {
237 |     font-size: 1rem; } }
238 | 
239 | @media screen and (min-width: 42em) and (max-width: 64em) {
240 |   .site-footer {
241 |     font-size: 1rem; } }
242 | 
243 | @media screen and (max-width: 42em) {
244 |   .site-footer {
245 |     font-size: 0.9rem; } }
246 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Phaser Inspector by netcell</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
  8 |     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  9 |     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
 10 |     <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
 11 |   </head>
 12 |   <body>
 13 |     <section class="page-header">
 14 |       <h1 class="project-name">Phaser Inspector</h1>
 15 |       <h2 class="project-tagline">phaser, game, html5, framework, plugin, inspector, debug</h2>
 16 |       <a href="https://github.com/netcell/phaser-inspector" class="btn">View on GitHub</a>
 17 |       <a href="https://github.com/netcell/phaser-inspector/zipball/master" class="btn">Download .zip</a>
 18 |       <a href="https://github.com/netcell/phaser-inspector/tarball/master" class="btn">Download .tar.gz</a>
 19 |     </section>
 20 | 
 21 |     <section class="main-content">
 22 |       <h1>
 23 | <a id="phaser-inspector-plugin" class="anchor" href="#phaser-inspector-plugin" aria-hidden="true"><span class="octicon octicon-link"></span></a>Phaser Inspector Plugin</h1>
 24 | 
 25 | <p><strong>Phaser Inspector Plugin</strong> allows you to inspect your (or someone else) <a href="http://phaser.io">Phaser</a> game.</p>
 26 | 
 27 | <p><img src="https://farm6.staticflickr.com/5619/21076450010_efa799bf08_o.png" alt="Floating, resizable and minimizable"><img src="https://farm1.staticflickr.com/730/21076450170_23796d65a4_o.png" alt="Intelligent Inspector with object tree, search and edit, state control and bounds drawing"></p>
 28 | 
 29 | <p>The plugin is written using <a href="https://angularjs.org/">Angular.js</a> and ES6, compiled with <a href="babeljs.io">Babel</a> and <a href="http://browserify.org/">Browserify</a>, tested on Phaser 2.1.3 and Phaser 2.4.3 running on Google Chrome Version 45.0.2454.85 (64-bit) on OSX Yosemite.</p>
 30 | 
 31 | <p><strong>Working features:</strong></p>
 32 | 
 33 | <ul>
 34 | <li>Display objects <strong>tree</strong> inspection.</li>
 35 | <li>Display object <strong>class</strong> guessing.</li>
 36 | <li>Display object <strong>name</strong> guessing (by looking for <code>this./name/</code> in parents).</li>
 37 | <li>
 38 | <strong>Text</strong> as name for Phaser.Text.</li>
 39 | <li>Display objects <strong>non-case-sensitive search</strong> by name and class.</li>
 40 | <li>Display object <strong>destroy/kill/hide</strong>.</li>
 41 | <li>
 42 | <strong>Properties</strong> inspection and editting.</li>
 43 | <li>
 44 | <strong>Texture display</strong> for sprite/image</li>
 45 | <li>
 46 | <strong>Bounds</strong> drawing</li>
 47 | <li>
 48 | <strong>States</strong> list and state change</li>
 49 | <li>
 50 | <strong>Floating</strong>, <strong>resizable</strong> and <strong>draggable</strong> panel</li>
 51 | <li>Panel <strong>remember</strong> position on page reload</li>
 52 | <li>
 53 | <strong>Close/minimize</strong> panel</li>
 54 | </ul>
 55 | 
 56 | <p><strong>Upcoming features:</strong></p>
 57 | 
 58 | <ul>
 59 | <li>
 60 | <strong>Transparent/Clickthrough</strong> panel</li>
 61 | <li>Sprite/Image <strong>load Texture</strong>
 62 | </li>
 63 | <li>
 64 | <strong>Optimize</strong> when displaying too many display objects on the tree </li>
 65 | </ul>
 66 | 
 67 | <p>Feel free to follow me on twitter <a href="https://twitter.com/netcell">@netcell</a> and check out <a href="http://anhnt.ninja">my blog</a>!</p>
 68 | 
 69 | <h2>
 70 | <a id="demo" class="anchor" href="#demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>Demo</h2>
 71 | 
 72 | <p>Check the <code>example</code> folder (please run <code>bower install</code> before that, and serve the folder on a server/localhost) or try that example rightaway on <a href="http://codepen.io/netcell/full/gapZWG/">this codepen</a>.</p>
 73 | 
 74 | <h2>
 75 | <a id="download" class="anchor" href="#download" aria-hidden="true"><span class="octicon octicon-link"></span></a>Download</h2>
 76 | 
 77 | <p>The source is available for download from <a href="https://github.com/netcell/phaser-inspector/releases">latest release</a> or by cloning the repository or download the files in <code>build</code> folder. Alternatively, you can install via:</p>
 78 | 
 79 | <ul>
 80 | <li><del><a href="http://bower.io/">bower</a>: <code>bower install --save phaser-inspector</code></del></li>
 81 | </ul>
 82 | 
 83 | <h2>
 84 | <a id="usage" class="anchor" href="#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage</h2>
 85 | 
 86 | <p><strong>NOTE:</strong> I have only tested this plugin on Google Chrome so I am not sure how this would perform on other browsers. Also since this plugin is for debugging your game, you should not expect to use it on your mobile devices, meaning remove it (or conditionally not loading it) when deploying to mobile devices.</p>
 87 | 
 88 | <p>Simply download the <code>phaser-inspector.js</code> or <code>phaser-inspector.min.js</code> script from <a href="https://github.com/netcell/phaser-inspector/releases">latest release</a> and include it on your page after including Phaser:</p>
 89 | 
 90 | <div class="highlight highlight-html"><pre>&lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>phaser.js<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;
 91 | &lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>phaser-inspector.js<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;</pre></div>
 92 | 
 93 | <p>In the <code>create</code> method in your boot state:</p>
 94 | 
 95 | <div class="highlight highlight-javascript"><pre>game.<span class="pl-c1">plugins</span>.<span class="pl-c1">add</span>(Phaser.<span class="pl-c1">Plugin</span>.Inspector);</pre></div>
 96 | 
 97 | <p>Alternatively, when running a game in the browser, you can inject the plugin in the developer console as follow:</p>
 98 | 
 99 | <div class="highlight highlight-javascript"><pre><span class="pl-k">var</span> script <span class="pl-k">=</span> <span class="pl-c1">document</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">'</span>script<span class="pl-pds">'</span></span>); script.src <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>http://netcell.github.io/phaser-inspector/build/phaser-inspector.js<span class="pl-pds">"</span></span>; <span class="pl-c1">document</span>.<span class="pl-c1">getElementsByTagName</span>(<span class="pl-s"><span class="pl-pds">'</span>head<span class="pl-pds">'</span></span>)[<span class="pl-c1">0</span>].<span class="pl-c1">appendChild</span>(script); <span class="pl-k">function</span> <span class="pl-en">phaserInspectorInject</span>(){ <span class="pl-k">if</span> (Phaser.<span class="pl-c1">Plugin</span>.Inspector) Phaser.GAMES[<span class="pl-c1">0</span>].<span class="pl-c1">plugins</span>.<span class="pl-c1">add</span>(Phaser.<span class="pl-c1">Plugin</span>.Inspector); <span class="pl-k">else</span> <span class="pl-c1">setTimeout</span>(phaserInspectorInject); } <span class="pl-c1">setTimeout</span>(phaserInspectorInject);</pre></div>
100 | 
101 | <p>Check the example in <code>example</code> folder to see it in action :)</p>
102 | 
103 | <h3>
104 | <a id="license" class="anchor" href="#license" aria-hidden="true"><span class="octicon octicon-link"></span></a>License</h3>
105 | 
106 | <p>This content is released under the (<a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>) MIT License.</p>
107 | 
108 |       <footer class="site-footer">
109 |         <span class="site-footer-owner"><a href="https://github.com/netcell/phaser-inspector">Phaser Inspector</a> is maintained by <a href="https://github.com/netcell">netcell</a>.</span>
110 | 
111 |         <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
112 |       </footer>
113 | 
114 |     </section>
115 | 
116 |             <script type="text/javascript">
117 |             var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
118 |             document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
119 |           </script>
120 |           <script type="text/javascript">
121 |             try {
122 |               var pageTracker = _gat._getTracker("UA-62565835-2");
123 |             pageTracker._trackPageview();
124 |             } catch(err) {}
125 |           </script>
126 | 
127 |   </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------
/stylesheets/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   box-sizing: content-box;
213 |   height: 0;
214 | }
215 | 
216 | /**
217 |  * Contain overflow in all browsers.
218 |  */
219 | 
220 | pre {
221 |   overflow: auto;
222 | }
223 | 
224 | /**
225 |  * Address odd `em`-unit font size rendering in all browsers.
226 |  */
227 | 
228 | code,
229 | kbd,
230 | pre,
231 | samp {
232 |   font-family: monospace, monospace;
233 |   font-size: 1em;
234 | }
235 | 
236 | /* Forms
237 |    ========================================================================== */
238 | 
239 | /**
240 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
241 |  * styling of `select`, unless a `border` property is set.
242 |  */
243 | 
244 | /**
245 |  * 1. Correct color not being inherited.
246 |  *    Known issue: affects color of disabled elements.
247 |  * 2. Correct font properties not being inherited.
248 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
249 |  */
250 | 
251 | button,
252 | input,
253 | optgroup,
254 | select,
255 | textarea {
256 |   color: inherit; /* 1 */
257 |   font: inherit; /* 2 */
258 |   margin: 0; /* 3 */
259 | }
260 | 
261 | /**
262 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
263 |  */
264 | 
265 | button {
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 |  * All other form control elements do not inherit `text-transform` values.
272 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
273 |  * Correct `select` style inheritance in Firefox.
274 |  */
275 | 
276 | button,
277 | select {
278 |   text-transform: none;
279 | }
280 | 
281 | /**
282 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 |  *    and `video` controls.
284 |  * 2. Correct inability to style clickable `input` types in iOS.
285 |  * 3. Improve usability and consistency of cursor style between image-type
286 |  *    `input` and others.
287 |  */
288 | 
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 |   -webkit-appearance: button; /* 2 */
294 |   cursor: pointer; /* 3 */
295 | }
296 | 
297 | /**
298 |  * Re-set default cursor for disabled elements.
299 |  */
300 | 
301 | button[disabled],
302 | html input[disabled] {
303 |   cursor: default;
304 | }
305 | 
306 | /**
307 |  * Remove inner padding and border in Firefox 4+.
308 |  */
309 | 
310 | button::-moz-focus-inner,
311 | input::-moz-focus-inner {
312 |   border: 0;
313 |   padding: 0;
314 | }
315 | 
316 | /**
317 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
318 |  * the UA stylesheet.
319 |  */
320 | 
321 | input {
322 |   line-height: normal;
323 | }
324 | 
325 | /**
326 |  * It's recommended that you don't attempt to style these elements.
327 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
328 |  *
329 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
330 |  * 2. Remove excess padding in IE 8/9/10.
331 |  */
332 | 
333 | input[type="checkbox"],
334 | input[type="radio"] {
335 |   box-sizing: border-box; /* 1 */
336 |   padding: 0; /* 2 */
337 | }
338 | 
339 | /**
340 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
341 |  * `font-size` values of the `input`, it causes the cursor style of the
342 |  * decrement button to change from `default` to `text`.
343 |  */
344 | 
345 | input[type="number"]::-webkit-inner-spin-button,
346 | input[type="number"]::-webkit-outer-spin-button {
347 |   height: auto;
348 | }
349 | 
350 | /**
351 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
352 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
353 |  *    (include `-moz` to future-proof).
354 |  */
355 | 
356 | input[type="search"] {
357 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
358 |   box-sizing: content-box;
359 | }
360 | 
361 | /**
362 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 |  * Safari (but not Chrome) clips the cancel button when the search input has
364 |  * padding (and `textfield` appearance).
365 |  */
366 | 
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 |   -webkit-appearance: none;
370 | }
371 | 
372 | /**
373 |  * Define consistent border, margin, and padding.
374 |  */
375 | 
376 | fieldset {
377 |   border: 1px solid #c0c0c0;
378 |   margin: 0 2px;
379 |   padding: 0.35em 0.625em 0.75em;
380 | }
381 | 
382 | /**
383 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 |  */
386 | 
387 | legend {
388 |   border: 0; /* 1 */
389 |   padding: 0; /* 2 */
390 | }
391 | 
392 | /**
393 |  * Remove default vertical scrollbar in IE 8/9/10/11.
394 |  */
395 | 
396 | textarea {
397 |   overflow: auto;
398 | }
399 | 
400 | /**
401 |  * Don't inherit the `font-weight` (applied by a rule above).
402 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 |  */
404 | 
405 | optgroup {
406 |   font-weight: bold;
407 | }
408 | 
409 | /* Tables
410 |    ========================================================================== */
411 | 
412 | /**
413 |  * Remove most spacing between table cells.
414 |  */
415 | 
416 | table {
417 |   border-collapse: collapse;
418 |   border-spacing: 0;
419 | }
420 | 
421 | td,
422 | th {
423 |   padding: 0;
424 | }
425 | 


--------------------------------------------------------------------------------