-
41 | {items}
42 |
24 |
25 |
36 | );
37 | },
38 |
39 | renderNoConnection: function() {
40 | return (
41 |
26 |
31 | 28 | Entities 29 |
30 |
32 |
34 |
35 |
42 |
64 | );
65 | },
66 |
67 | render: function() {
68 | return (
69 |
43 |
63 |
44 |
46 | Coquette instance not found :(
45 |
47 |
62 |
48 | If there's a coquette application on the page, the most common reason this occurs is
49 | because its Coquette instance hasn't been exposed on the main window object as
50 | window.__coquette__. To fix, update your game's constructor, for example:
51 |
54 | {/* this is the worst. */}
55 | {'var Game = function() {\n'}
56 | {' this.c = new Coquette(this, "canvas", 500, 150, "#000");\n'}
57 | {' window.__coquette__ = this.c;\n'}
58 | {' // ...\n'}
59 | {'};\n'}
60 |
61 |
70 | { this.state.isConnected ? this.renderLoaded() : this.renderNoConnection() }
71 |
72 | );
73 | }
74 | });
75 |
76 | module.exports = Main;
77 |
--------------------------------------------------------------------------------
/src/ui/components/EntityPropertiesList.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var FluxMixin = require('fluxxor').FluxMixin(React);
3 | var EntityProperty = require('./EntityProperty');
4 | var ListArrow = require('./ListArrow');
5 |
6 |
7 | // TODO: This is currently inlined in this file because of the circular dependency between
8 | // EntityObjectProperty and EntityPropertiesList :(
9 | var EntityObjectProperty = React.createClass({
10 | getInitialState: function() {
11 | return {
12 | isOpen: false
13 | };
14 | },
15 |
16 | handleToggleOpen: function() {
17 | this.setState({
18 | isOpen: !this.state.isOpen
19 | });
20 | },
21 |
22 | render: function() {
23 | var isOpen = this.state.isOpen;
24 |
25 | return (
26 | {this.props.prop}: Object
30 |
31 |
32 | {isOpen && -
80 | {items}
81 |
8 | The inspector in action in the spinning shapes demo. 9 |
10 | 11 | ## Features 12 | 13 | * List entities currently in the game world 14 | * Inspect the properties of entities as they update 15 | * Change the properties of entities 16 | * Play/pause the game loop 17 | * Step through the game loop 18 | 19 | ## Installing 20 | 21 | To install: 22 | 23 | ``` 24 | git clone git@github.com:thomasboyt/coquette-inspect.git 25 | cd coquette-inspect/ 26 | npm install && ./node_modules/.bin/webpack 27 | ``` 28 | 29 | Then load the `chrome-extension` folder as an unpacked extension ([see this guide](https://developer.chrome.com/extensions/getstarted#unpacked)). 30 | 31 | If it worked, you should see a "Coquette" tab in your developer tools when you next open them. 32 | 33 | ## Usage 34 | 35 | There are two modifications you'll need to do to your Coquette apps to make them work. 36 | 37 | ### Exposing Coquette 38 | 39 | The most important one is that you expose the Coquette instance in your game as `window.__coquette__`, e.g.: 40 | 41 | ```js 42 | var Game = function() { 43 | window.__coquette__ = this.c = new Coquette(this, "canvas", 500, 150, "#000"); 44 | // ... 45 | ``` 46 | 47 | Without this, the inspector won't be able to find your Coquette instance. 48 | 49 | ### Entity display names 50 | 51 | To display your entities with their proper names (i.e. their constructors), one of two of the following need to be true: 52 | 53 | If your constructors are defined with the syntax `function Foo() {...}`, the name will be looked up with `entity.constructor.name`. This doesn't work if your function is anonymous, e.g. `var Foo = function() {...}`, because that's just how `function.name` works. See [MDN] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) for more detail on this weird quirk. 54 | 55 | Otherwise, you can set the `displayName` property on your entity. You can either set it inside the constructor (e.g. `this.displayName = 'Person'`), or inside the call to `entities.create` (e.g. `c.entities.create(Person, {displayName: 'Player'})`). 56 | -------------------------------------------------------------------------------- /src/ui/components/GameControls.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var FluxMixin = require('fluxxor').FluxMixin(React); 3 | var StoreWatchMixin = require('fluxxor').StoreWatchMixin; 4 | 5 | var GameState = React.createClass({ 6 | mixins: [ 7 | FluxMixin, 8 | StoreWatchMixin('GameStore') 9 | ], 10 | 11 | getStateFromFlux: function() { 12 | var store = this.getFlux().store('GameStore'); 13 | return { 14 | isPaused: store.isPaused, 15 | isSelecting: store.isSelecting, 16 | fps: store.fps 17 | }; 18 | }, 19 | 20 | handleTogglePause: function(e) { 21 | e.stopPropagation(); 22 | 23 | if (this.state.isPaused) { 24 | this.getFlux().actions.game.unpauseGame(); 25 | } else { 26 | this.getFlux().actions.game.pauseGame(); 27 | } 28 | }, 29 | 30 | handleToggleSelectEntity: function(e) { 31 | e.stopPropagation(); 32 | 33 | if (!this.state.isSelecting) { 34 | this.getFlux().actions.game.enableSelectMode(); 35 | } else { 36 | this.getFlux().actions.game.disableSelectMode(); 37 | } 38 | }, 39 | 40 | handleStep: function(e) { 41 | e.stopPropagation(); 42 | this.getFlux().actions.game.step(); 43 | }, 44 | 45 | renderPaused: function() { 46 | return ( 47 | 48 | 51 | 54 | 55 | ); 56 | }, 57 | 58 | renderPlaying: function() { 59 | var fpsClass = this.state.fps < 59 ? 'fps fps-warning' : 'fps'; 60 | 61 | return ( 62 | 63 | {this.state.fps} FPS 64 | 67 | 70 | 71 | ); 72 | }, 73 | 74 | render: function() { 75 | var selectClass = this.state.isSelecting ? 'activated' : ''; 76 | 77 | return ( 78 |
79 | {this.state.isPaused ? this.renderPaused() : this.renderPlaying()}
80 |
81 |
84 |
85 | );
86 | }
87 | });
88 |
89 | module.exports = GameState;
90 |
--------------------------------------------------------------------------------
/src/ui/components/EntityProperty.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var FluxMixin = require('fluxxor').FluxMixin(React);
3 | var EntityPropertyInput = require('./EntityPropertyInput');
4 |
5 | var isUneditable = function(value) {
6 | return (typeof value === 'string' && (
7 | value === '[[Coquette namespace]]' ||
8 | value === '[[Circular reference]]' ||
9 | value.match(/^\[\[Entity .*\]\]$/) ||
10 | value.match(/^\[\[object [^\s]*\]\]$/)));
11 | };
12 |
13 | var EntityProperty = React.createClass({
14 | mixins: [
15 | FluxMixin
16 | ],
17 |
18 | getInitialState: function() {
19 | return {
20 | isOpen: false
21 | };
22 | },
23 |
24 | handleOpen: function() {
25 | if (isUneditable(this.props.value)) {
26 | return;
27 | }
28 |
29 | this.setState({
30 | isOpen: true
31 | });
32 | },
33 |
34 | handleClose: function(e) {
35 | this.setState({
36 | isOpen: false
37 | });
38 |
39 | var value = e.target.value;
40 |
41 | if (typeof this.props.value === 'number') {
42 | value = parseInt(value, 10);
43 | }
44 |
45 | this.getFlux().actions.entities.updateProperty({
46 | entityId: this.props.entity.__inspect_uuid__,
47 | path: this.props.path,
48 | value: value
49 | });
50 | },
51 |
52 | getClassFor: function(val) {
53 | if (isUneditable(val)) {
54 | return;
55 | }
56 |
57 | var className;
58 | if (val === null) {
59 | className = 'null';
60 | } else {
61 | className = typeof val;
62 | }
63 |
64 | return 'console-formatted-' + className;
65 | },
66 |
67 | renderValue: function() {
68 | var val = this.props.value;
69 |
70 | var className = this.getClassFor(val);
71 | var isString = className === 'console-formatted-string';
72 |
73 | return (
74 |
75 | {isString && '"'}
76 | {val === null ? 'null' : val.toString()}
77 | {isString && '"'}
78 |
79 | );
80 | },
81 |
82 | render: function() {
83 | var prop = this.props.prop;
84 |
85 | var valueDisplay;
86 | if (this.state.isOpen) {
87 | valueDisplay = (
88 | {prop}: {valueDisplay}
97 |