React

by dj19910501

HTML

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

CSS

.inline-top{
  display: inline-block;
  vertical-align: top;
}

React

class Tractor extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	start: false
    };
  }
  
  render() {
  	const { start } = this.state;
    
    if (!start) {
    		return (
        	<div>
        	  <button onClick={() => this.setState({ start: true })}>Start</button>
        	</div>
        );
    } else {
    		return (
        	<div>
        	  <div>
        	    <button onClick={() => this.setState({ start: false })}>Restart</button>
              <GameBoard />
        	  </div>
        	</div>
        );
    }
  }
}

class GameBoard extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	gameCount: 0,
      host: null,
      score: [2,2],
      start: false,
      cards: [], // east, south, west, north
      history: [],
      points: 0,
      turn: null
    };
  }
  
  render() {
  	const { start, cards } = this.state;
    
    return (
    	<div>
    	  <div className='inline-top'>
    	    <CardDeck cards={cards[2]}/>
    	  </div>
        <div className='inline-top'>
          <div>
    	      <CardDeck cards={cards[3]}/>
          </div>
          <div>
            <CardArea />
          </div>
          <div>
    	      <MyCardDeck cards={cards[1]}/>
          </div>
        </div>
    	  <div className='inline-top'>
    	    <CardDeck cards={cards[0]}/>
    	  </div>
    	</div>
    );
  }
  
  startGame = () => {
  
  }
}

class CardDeck extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    };
  }
  
  render() {
  	const { cards } = this.props;
    
    return (
    	
    );
  }
}

ReactDOM.render(<Tractor />, document.querySelector("#app"))