<div id="app"></div>

html, body
  height: 100%
  
body
  // display: flex
  // flex-direction: column
  // justify-content: center
  // align-items: center
  font-family: Helvetica Neue

#app
  text-align: center
  display: flex
  justify-content: center
  align-items: center
  height: 100vh

.house
  position: relative
  height: 380px
  width: 400px
  
img
  position: absolute
  
.roof
  left: 0
  top: 0
  border-width: 0

.chimney
  left: 255px
  
.wall
  left: 5px
  top: 48px
 
.window
  left: 200px
  top: 182px

.door
  left: -25px
  top: 182px
  cursor: pointer

.cat
  top: 270px

const IMAGES = {
  roof: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Froof.png?1515785259159',
  wall: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fwall.png?1501113882297',
  window: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fwindow.png?1501113882112',
  door_open: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fdoor_open.png?1501113882121',
  door_closed: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fdoor_close.png?1501113881433',
  cat_sleeping: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fcat_sleeping.png?1515785234959',
  cat_awake: 'https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fcat_standing.png?1515785235095',
}

const Roof = ({ color }) => <img src={IMAGES.roof} className="roof" style={{background: 'salmon'}}/>;
const Wall = () =>  <img src={IMAGES.wall} className='wall'/>;
const Window = () => <img src={IMAGES.window} className='window'/>;
const Cat = ({status}) => (
  <img src={status === 'sleeping' ? IMAGES.cat_sleeping : IMAGES.cat_awake}
     className='cat' />
)

class Door extends React.Component {
  render() {
    return <img src={this.props.isOpen ? IMAGES.door_open : IMAGES.door_closed } className='door' onClick={this.props.onClick} />;
  }
}

// const Door = () => <img src='http://i.imgur.com/S1Z1hgA.png' className='door'/>

class House extends React.Component {
  constructor(props) {
    super(props);
    this.state = { doorOpen: false };
  }
  handleClick = () => {
    if (this.state.doorOpen)
      this.setState({ doorOpen: false });
    else
      this.setState({ doorOpen: true });
  }
  render() {
    return (
      <div className='house'>
        <Roof />
        <Wall />
        <Door isOpen={ this.state.doorOpen }  onClick={this.handleClick}/>
        <Window />
        <Cat status={this.state.doorOpen ? 'awake' : 'sleeping'} />
      </div>
    );
  }
}

const App = () => <House />;

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<App />, document.getElementById('app'));