Possible over-modularisation

[oliverjam]

It's good to practice splitting things into smaller components and passing props etc, but I just wanted to highlight that sometimes it makes things more complicated.

e.g. you're passing pretty much all of the Egg state down to Screen, which pretty much passes all of that down to other components. You could probably bypass Screen entirely and have a slightly more complex render method in Egg, but lose all the complexity/potential for errors caused by having to pass things down through multiple levels.

This would also mean you don't need the extra if statement in Egg's render.

// <Egg />
render() {
<div id="egg">
  <div id="egg-drawing">
    <div id="screen">
      {!this.state.name
        ? <Loading setFighter={this.props.setFighter} />
        : (
          <div>
            <Status health={this.props.health} level={this.props.level} />
            {this.props.lyricHidden
              ? <Avatar avatarObj={this.props.avatarObj} />
              : <p>{this.props.randomLyric}</p>
            }
          </div>
        )
      </div>
      <Buttons hurtMe={this.hurtMe} hugMe={this.hugMe} />
    </div>
</div>