From 28d02a94f07db0bf6b1d08bea2401fa94ab45a6c Mon Sep 17 00:00:00 2001
From: Thomas Hintz <t@thintz.com>
Date: Thu, 2 Apr 2020 11:04:09 -0700
Subject: [PATCH] Improving ridge indicator UI.

---
 src/components/farm/Board.jsx | 15 +++++++++------
 src/style.scss                | 14 ++++++++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx
index 6027bd3..0314939 100644
--- a/src/components/farm/Board.jsx
+++ b/src/components/farm/Board.jsx
@@ -422,11 +422,14 @@ class FarmsContainer extends React.Component {
         let ridges = makeRidgeLookup(this.props.player, this.props.otherPlayers);
         return (
             <GroupBox title='Farms'>
-                <b>Ridges</b>: <b>{ridgeNames[0][0]}</b>: <PlayerColorIcon color={ridges.ridge1} />{'\u00A0'}
-                <b>{ridgeNames[1][0]}</b>: <PlayerColorIcon color={ridges.ridge2} />{'\u00A0'}
-                <b>{ridgeNames[2][0]}</b>: <PlayerColorIcon color={ridges.ridge3} />{'\u00A0'}
-                <b>{ridgeNames[3][0]}</b>: <PlayerColorIcon color={ridges.ridge4} />{'\u00A0'}
-                <br /><br />
+                <b>Ridges</b>:
+                {ridgeNames.map((ridge, idx) => (
+                    <div key={idx} className={"farms-ridge player-" + ridges['ridge' + (idx + 1)]}>
+                        <span>{ridge}</span>
+                        <span className='num-cows'>{'(' + ((idx + 2) * 10) + ' cows)'}</span>
+                    </div>
+                ))}
+                <br />
                 {this.props.otherPlayers
                      .map(p => (
                          <div key={p.player.name}>
@@ -761,7 +764,7 @@ class TradeContainer2 extends React.Component {
                                 <Fragment key={'other-player-trade' + ridge}>
                                     {!tradeProposed && ((otherPlayer.ridges[ridge] > 0) && !toTrade[ridge]) ? (
                                          <Button className="tiny"
-                                                 onClick={() => this.tradeAsset(ridge, otherPlayer.ridges[ridge], verbatim)}>
+                                                 onClick={() => this.tradeAsset(ridge, otherPlayer.ridges[ridge], true)}>
                                              <FontAwesomeIcon icon={faArrowUp} /> {ridgeNames[idx]} {'('}{otherPlayer.ridges[ridge]} cows{')'}
                                          </Button>
                                     ) : (<></>)}
diff --git a/src/style.scss b/src/style.scss
index c602a94..535886d 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -215,6 +215,20 @@ $tab-margin: 0.3rem;
         font-size: 14px; }
 }
 
+.farms-ridge {
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 1rem;
+    padding: 0.2rem;
+    background-color: hsla(0, 0%, 50%, 0.3);
+    border-radius: 0.2rem;
+    align-items: center;
+    margin: 0.2rem;
+    .num-cows {
+        font-size: 0.8rem;
+    }
+}
+
 .player {
     display: inline-block;
     @include breakpoint(medium down) {