Cleaning up and improving item card buying process.

src/components/farm/Board.jsx

@@ -1352,7 +1352,10 @@ class BoardApp extends React.Component {
                             <CardList ui={this.props.ui} />
                         </div>
                         <div className='cell medium-auto'>
-                            <Card ui={this.props.ui} />
+                <Card ui={this.props.ui}
+                      min={(this.props.ui.card.total * 0.2) / 1000}
+                      max={Math.floor(Math.min(this.props.player.cash / 1000, this.props.ui.card.total / 1000))}
+                      cash={(this.props.ui.card.total * 0.2) / 1000} />
                         </div>
                     </Row>
                 </div>
@@ -1383,25 +1386,55 @@ export default connect(
 )(BoardApp)
 
 class Card extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { cash: this.props.cash, initialCash: this.props.cash };
+    }
+
+    static getDerivedStateFromProps(props, state) {
+        if (state.initialCash !== props.cash) {
+            return {
+                cash: props.cash,
+                initialCash: props.cash
+            }
+        }
+        return null;
+    }
+
+    handleInput = e => {
+        const target = e.target;
+        let value = Math.min(Math.max(this.props.min,
+                                      parseInt(target.value)), this.props.max);
+        if (isNaN(value)) { value = this.props.min; }
+        this.setState({ cash: value });
+    }
+
+    handleSubmit = e => {
+        e.preventDefault();
+        buy(this.props.ui.card.id, this.state.cash);
+    }
+
     render () {
         const card = this.props.ui.card;
         let action = (null);
         switch (card.type) {
         case 'otb': action = (
             <div className='card-action'>
-              <form onSubmit={(e) =>
-                              { e.preventDefault();
-                                  buy(card.id, parseInt(document.getElementById('cash-input').value));
-                              return false; }}>
+              <form onSubmit={this.handleSubmit}>
                  <Row collapse='true'>
                  <Col width='2'>
-                 <Button className='tiny' type='submit'>Buy</Button>
+                   <Button className='tiny'
+                           disabled={this.props.max < this.props.min}
+                           type='submit'>Buy</Button>
                  </Col>
                  <Col width='4' />
                  <Col width='6'>
                  <div className='money'>
                      $:
-                     <input id='cash-input' type='number' />
+                     <input id='cash-input' type='number'
+                            disabled={this.props.max < this.props.min}
+                            onChange={this.handleInput}
+                            value={this.state.cash} />
                      {'\u00A0'},000
                  </div>
                  </Col>

src/components/widgets.jsx

@@ -61,6 +61,7 @@ class Button extends React.Component {
             <button className={'button ' + (this.props.size ? this.props.size : '') +
                     ' ' + (this.props.className ? this.props.className : '')}
                     type={this.props.type || 'button'}
+                    disabled={this.props.disabled}
                     onClick={this.props.onClick} >
               {this.props.children}
             </button>