class App extends Component {
  constructor() {
    super();
    this.state = {
      blocks: [1, 2, 3],
    };
  }
  
  componentDidMount() {

  };


  onNextButton = () => {
    const { blocks } = this.state;
    const lastMan = blocks.pop();
    blocks.unshift(lastMan);
    this.setState({
      blocks,
    });
    
    let round = document.querySelector('.round');
    round.classList.add('in');
  }

  onPrevButton = () => {
    const { blocks } = this.state;
    const lastMan = blocks.shift();
    blocks.push(lastMan);
    this.setState({
      blocks,
    });
    let round = document.querySelector('.round');
    round.classList.add('out');
  }

  
  
  render() {
    const { blocks } = this.state;
    return (
    <div className="app">
        <div className="wrapper prev">
          <div className="inner prev-arrow" onClick={() => this.onPrevButton()}>
          &larr; prev
          </div>
        </div>
        {blocks.map(num => (
          <div key={num} className={`round round-${num}`}>
            <div className={`man man-${num}`}>
            </div>
          </div>
        ))}
        <div className="wrapper next">
          <div className="inner next-arrow" onClick={() => this.onNextButton()}>
          next &rarr;
          </div>
        </div>
      </div>
    );
  }
}