sranso/react-hobbes.js

## react-hobbes.js
/**
 * @jsx React.DOM
 */

var Body = React.createClass({
  handleClick: function() {
    return 'we\'re plotting, baby!';
  },

  renderSitting: function() {
    if ( this.props.sitting ) {
      return 'sitting';
    };
    return 'not sitting';
  },

  renderAwake: function() {
    if ( this.props.awake ) {
      return 'awake';
    };
    return 'not awake';
  },

  render: function() {
    return (
      <ul>
        <li>BODY:
          <p><span>Knows that Calvin is {this.renderSitting()} </span>
             <span>and is {this.renderAwake()}.</span>
          </p>
            <Head awake={this.props.awake} />
        </li>
      </ul>
    );
  }
});

var Head = React.createClass({
  handleClick: function(e) {
    this.setState({ isPlotting: true });
  },

  renderIfPlotting: function() {
    if ( this.state && this.state.isPlotting ) {
      return <p>Throws head back in laughter--plots!</p>;
    };
    return <span></span>;
  },

  renderAwake: function() {
    if ( this.props.awake ) {
      return 'awake';
    };
    return 'not awake';
  },

  render: function() {
    return (
      <ul>
        <li>HEAD:
          <p>Knows that Calvin is {this.renderAwake()}.</p>
          {this.renderIfPlotting()}
          <Face url={this.props.url}
                onClick={this.handleClick} />
        </li>
      </ul>
    );
  }
});

var Face = React.createClass({
  getInitialState: function() {
    return { plotsAgainstHobbes: [] };
  },

  getPlotsAgainstHobbes: function() {
    $.getJSON("plots-against-hobbes.json", function(data) {
      this.setState({ plotsAgainstHobbes: data.plots });
    }.bind(this));
  },

  handleClick: function(e) {
    e.preventDefault();
    this.getPlotsAgainstHobbes();
    this.props.onClick(e);
  },

  renderPlotting: function() {
    if ( this.state.plotsAgainstHobbes && this.state.plotsAgainstHobbes.length > 1 ) {
      var plots = this.state.plotsAgainstHobbes;
      return (
        <span>
          <span>plotting MUAHAHAH!!!!!!!!!<br/>First, he is going to {plots[0].deed}</span>
          <span><br/>And then Calvin is going to {plots[1].deed}</span>
        </span>
      );
    };
    return (
      <span>
        not plotting. <a href="#" onClick={this.handleClick}>Should Calvin plot though...?</a>
      </span>
    );
  },

  render: function() {
    return (
      <ul>
        <li>FACE:
          <p>Knows that Calvin is awake, and is currently {this.renderPlotting()}</p>
        </li>
      </ul>
    );
  }
});

React.renderComponent(
    <Body sitting="false" awake="true" />,
    document.getElementById('container')
);
	/**
	* @jsx React.DOM
	*/

	var Body = React.createClass({
	handleClick: function() {
	return 'we\'re plotting, baby!';
	},

	renderSitting: function() {
	if ( this.props.sitting ) {
	return 'sitting';
	};
	return 'not sitting';
	},

	renderAwake: function() {
	if ( this.props.awake ) {
	return 'awake';
	};
	return 'not awake';
	},

	render: function() {
	return (
	<ul>
	<li>BODY:
	<p><span>Knows that Calvin is {this.renderSitting()} </span>
	<span>and is {this.renderAwake()}.</span>
	</p>
	<Head awake={this.props.awake} />
	</li>
	</ul>
	);
	}
	});

	var Head = React.createClass({
	handleClick: function(e) {
	this.setState({ isPlotting: true });
	},

	renderIfPlotting: function() {
	if ( this.state && this.state.isPlotting ) {
	return <p>Throws head back in laughter--plots!</p>;
	};
	return <span></span>;
	},

	renderAwake: function() {
	if ( this.props.awake ) {
	return 'awake';
	};
	return 'not awake';
	},

	render: function() {
	return (
	<ul>
	<li>HEAD:
	<p>Knows that Calvin is {this.renderAwake()}.</p>
	{this.renderIfPlotting()}
	<Face url={this.props.url}
	onClick={this.handleClick} />
	</li>
	</ul>
	);
	}
	});

	var Face = React.createClass({
	getInitialState: function() {
	return { plotsAgainstHobbes: [] };
	},

	getPlotsAgainstHobbes: function() {
	$.getJSON("plots-against-hobbes.json", function(data) {
	this.setState({ plotsAgainstHobbes: data.plots });
	}.bind(this));
	},

	handleClick: function(e) {
	e.preventDefault();
	this.getPlotsAgainstHobbes();
	this.props.onClick(e);
	},

	renderPlotting: function() {
	if ( this.state.plotsAgainstHobbes && this.state.plotsAgainstHobbes.length > 1 ) {
	var plots = this.state.plotsAgainstHobbes;
	return (
	<span>
	<span>plotting MUAHAHAH!!!!!!!!!<br/>First, he is going to {plots[0].deed}</span>
	<span><br/>And then Calvin is going to {plots[1].deed}</span>
	</span>
	);
	};
	return (
	<span>
	not plotting. <a href="#" onClick={this.handleClick}>Should Calvin plot though...?</a>
	</span>
	);
	},

	render: function() {
	return (
	<ul>
	<li>FACE:
	<p>Knows that Calvin is awake, and is currently {this.renderPlotting()}</p>
	</li>
	</ul>
	);
	}
	});

	React.renderComponent(
	<Body sitting="false" awake="true" />,
	document.getElementById('container')
	);