Showing player color in lobby.

src/components/farm/Board.jsx

@@ -52,17 +52,17 @@ import { buy, roll, endTurn, loan, trade, submitTradeAccept,
 
 function netWorth(player) {
     return ((player.assets.hay + player.assets.grain) * 2000) +
-              (player.assets.fruit * 5000) +
-              (player.assets.cows * 500) +
-              ((player.assets.harvester + player.assets.tractor) * 10000) +
+               (player.assets.fruit * 5000) +
+               (player.assets.cows * 500) +
+               ((player.assets.harvester + player.assets.tractor) * 10000) +
            player.displayCash - player.debt;
 }
 
 function assetsValue(player) {
     return ((player.assets.hay + player.assets.grain) * 2000) +
-              (player.assets.fruit * 5000) +
-              (player.assets.cows * 500) +
-              ((player.assets.harvester + player.assets.tractor) * 10000);
+               (player.assets.fruit * 5000) +
+               (player.assets.cows * 500) +
+               ((player.assets.harvester + player.assets.tractor) * 10000);
 }
 
 function getElementValue(id) {
@@ -1541,36 +1541,36 @@ 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 { cash } = this.props.player;
-        const ffButtons = (
-            <>
-                {cash < 10000 ? (
-                     <Button onClick={() => this.props.showScreen(SCREENS.loans)}>Raise ${formatMoney(10000 - cash)} Now</Button>
-                ) : (<></>)}
-                <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 = (
+                    <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 ? (
+                             <Button onClick={() => this.props.showScreen(SCREENS.loans)}>Raise ${formatMoney(10000 - cash)} Now</Button>
+                        ) : (<></>)}
+                        <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'>
@@ -1936,6 +1936,7 @@ class StartGame extends React.Component {
     render() {
         const { auditThreshold, downPayment, loanInterest, maxDebt, startingOtbs, startingCash, startingDebt } = this.props.game.settings;
         const playerName = this.props.player.name;
+        const { color } = this.props.player;
         const { name, host } = this.props.game;
         return (
             <>
@@ -1945,10 +1946,10 @@ class StartGame extends React.Component {
                 </p>
                 <h3>Players</h3>
                 <ul>
-                    <li>{this.props.player.name}</li>
+                    <li><PlayerColorIcon color={color} /> {playerName}</li>
                     {this.props.game.otherPlayers.map((p, i) => (
                         <li key={i}>
-                            {p.player.name}
+                            <PlayerColorIcon color={p.player.color} /> {p.player.name}
                             {playerName === host ? (
                                  <span title="Kick Player" className="kick-player" onClick={() => kickPlayer(p.player.name)}>
                                      <FontAwesomeIcon icon={faBan} />