From afd548ae0b09d4d1ca19f2f0568c1c822e40b087 Mon Sep 17 00:00:00 2001
From: Thomas Hintz <t@thintz.com>
Date: Thu, 16 Apr 2020 09:37:51 -0700
Subject: [PATCH] Improving FF taking over 10 acres hay UX.

---
 src/components/farm/Board.jsx | 84 ++++++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx
index 7e990ba..a2ba6e4 100644
--- a/src/components/farm/Board.jsx
+++ b/src/components/farm/Board.jsx
@@ -1498,6 +1498,24 @@ class Moving extends React.Component {
 }
 
 class Action extends React.Component {
+    state = {
+        bertChoice: 'nothing'
+    }
+
+    setBertChoice = (e) => {
+        this.setState({ bertChoice: e.target.value });
+    }
+
+    bertSubmit = (e) => {
+        e.preventDefault();
+        if (this.state.bertChoice === 'accept') {
+            buyUncleBert();
+            this.props.showNextAction();
+        } else if (this.state.bertChoice === 'deny') {
+            this.props.showNextAction();
+        }
+    }
+
     render() {
         let view, buttons;
         const { currentPlayer } = this.props;
@@ -1522,39 +1540,51 @@ class Action extends React.Component {
                 buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
                 break;
             case 'farmers-fate':
-                view = (
-                    <div className='game-card'>
-                        <GroupBox title={fateCard}>
-                            <div className='card'
-                                 dangerouslySetInnerHTML={{ __html: this.props.ui.actionValue }} />
-                        </GroupBox>
-                    </div>
-                );
-                buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
-                break;
-            case 'ff-uncle-bert':
-                const ffButtons = (
-                    <Fragment>
-                        {this.props.player.cash >= 10000 ? (
-                             <Button onClick={() => { buyUncleBert(); this.props.showNextAction(); }}>
-                                 Yes, take over for $10,000!
-                             </Button>
-                        ) : (<Fragment />)}
-                        <Button onClick={() => this.props.showNextAction()}>
-                            No, continue on
-                        </Button>
-                    </Fragment>
-                );
+        view = (
+            <div className='game-card'>
+                <GroupBox title={fateCard}>
+                    <div className='card'
+                         dangerouslySetInnerHTML={{ __html: this.props.ui.actionValue }} />
+                </GroupBox>
+            </div>
+        );
+        buttons = (<Button onClick={() => this.props.showNextAction()}>Continue</Button>);
+        break;
+    case 'ff-uncle-bert':
+        const { cash } = this.props.player;
+        const ffButtons = (
+            <>
+                {cash < 10000 ? (
+                     <p>
+                         <Button onClick={() => this.props.showScreen(SCREENS.loans)}>Raise ${formatMoney(10000 - cash)} Now</Button>
+                     </p>
+                ) : (<></>)}
+                <form onSubmit={this.bertSubmit}>
+                    <label>
+                        <input type="radio" name="bert" value="accept" onClick={this.setBertChoice} />
+                        Yes, take over for $10,000!
+                    </label>
+                    <label>
+                        <input type="radio" name="bert" value="deny" onClick={this.setBertChoice} />
+                        No, continue on
+                    </label>
+                    <Button type="submit" disabled={this.state.bertChoice === 'nothing' || this.state.bertChoice ===  'accept' && cash < 10000}>Submit</Button>
+                </form>
+            </>
+        );
                 view = (
                     <GroupBox title={`Uncle Bert's inheritance`}>
                         <div className='center'>
                             <p>
                                 {currentPlayer.cash >= 10000 ?
                                  `You have enough cash to take over Uncle Bert's farm!` :
-                                 `You must raise another $` +
-                                 formatMoney(10000 - currentPlayer.cash) +
-                                 ` to be able to take over Uncle Berts farm!`
-                                }
+                                 (
+                                     <>
+                                         You must raise another $
+                                         {formatMoney(10000 - currentPlayer.cash) + ' '}
+                                         to be able to take over Uncle Berts farm!
+                                     </>
+                                 )}
                             </p>
                             <p>
                                 {(this.props.player.name === this.props.game.currentPlayer) ?