From 69a563d689447fd415ed0e1417350420c988f3a0 Mon Sep 17 00:00:00 2001
From: Thomas Hintz <t@thintz.com>
Date: Tue, 31 Mar 2020 20:43:29 -0700
Subject: [PATCH] Adding images to trade resource units.

---
 src/components/farm/Board.jsx | 91 +++++++++++++++++++----------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx
index 36d694b..dc34576 100644
--- a/src/components/farm/Board.jsx
+++ b/src/components/farm/Board.jsx
@@ -191,48 +191,55 @@ class ResourceUnit extends React.Component {
 class PlayerTradeResources extends React.Component {
     render () {
         let player = this.props.player;
-        return (<form onSubmit={e => tradeFormSubmit(e, player)}>
-            <div className='player-trade-resources'>
-                <ResourceUnit h='120' s='100' label='acres of Hay' amount={''}>
-                    <input type='number' id='trade-hay' defaultValue='0' /></ResourceUnit> {' '}
-                    <ResourceUnit h='41' s='100' label='acres of Grain' amount={''}>
-                        <input type='number' id='trade-grain' defaultValue='0' /></ResourceUnit> {' '}
-                        <ResourceUnit h='0' s='100' label='acres of Fruit' amount={''}>
-                            <input type='number' id='trade-fruit' defaultValue='0' /></ResourceUnit> {' '}
-                            <ResourceUnit h='0' s='59' label='head of Cows' amount={''}>
-                                <input type='number' id='trade-cows' defaultValue='0' /></ResourceUnit> {' '}
-                                <ResourceUnit h='240' s='100' label='Harvesters' amount={''}>
-                                    <input type='number' id='trade-harvesters' defaultValue='0' /></ResourceUnit> {' '}
-                                    <ResourceUnit h='240' s='100' label='Tractors' amount={''}>
-                                        <input type='number' id='trade-tractors' defaultValue='0' /></ResourceUnit>
-                                        <br /><br />
-                                        <b>Ridges</b>: <b>{ridgeNames[0][0]}</b>: <input type='checkbox' id='trade-ridge1' />{'\u00A0'}
-                                        <b>R</b>: <input type='checkbox' id='trade-ridge2' />{'\u00A0'}
-                                        <b>C</b>: <input type='checkbox' id='trade-ridge3' />{'\u00A0'}
-                                        <b>T</b>: <input type='checkbox' id='trade-ridge4' />{'\u00A0'}
-                                        <br /><br />
-                                        <Row>
-                                            <Col width='4 column-no-padding'>
-                                                <label htmlFor='trade-player'><b>Player</b>:</label>
-                                                <select id='trade-player'>
-                                                    {this.props.otherPlayers.map(p => (
-                                                        <option key={p.player.name} value={p.player.name}>{p.player.name}</option>
-                                                    ))}
-                                                </select>
-                                            </Col>
-                                            <Col width='4 column-no-padding'>
-                                                <label htmlFor='trade-money'><b>Money</b>: </label>
-                                                <input type='number' id='trade-money' defaultValue='0' />
-                                            </Col>
-                                            <Col width='4 column-no-padding'>
-                                                <label htmlFor='trade-cards'><b>Cards</b>: </label>
-                                                <input type='text' id='trade-cards' />
-                                            </Col>
-                                        </Row>
-                                        <PlayerTradeProposed player={this.props.player} />
-                                        <PlayerTradeButton player={this.props.player} />
-            </div>
-        </form>);
+        return (
+            <form onSubmit={e => tradeFormSubmit(e, player)}>
+                <div className='player-trade-resources'>
+                    <ResourceUnit img={HayImg} h='120' s='100' label='acres of Hay' amount={''}>
+                        <input type='number' id='trade-hay' defaultValue='0' />
+                    </ResourceUnit> {' '}
+                    <ResourceUnit img={WheatImg} h='41' s='100' label='acres of Grain' amount={''}>
+                        <input type='number' id='trade-grain' defaultValue='0' />
+                    </ResourceUnit> {' '}
+                    <ResourceUnit img={FruitImg} h='0' s='100' label='acres of Fruit' amount={''}>
+                        <input type='number' id='trade-fruit' defaultValue='0' />
+                    </ResourceUnit> {' '}
+                    <ResourceUnit img={CowImg} h='0' s='59' label='head of Cows' amount={''}>
+                        <input type='number' id='trade-cows' defaultValue='0' />
+                    </ResourceUnit> {' '}
+                    <ResourceUnit img={HarvesterImg} h='240' s='100' label='Harvesters' amount={''}>
+                        <input type='number' id='trade-harvesters' defaultValue='0' />
+                    </ResourceUnit> {' '}
+                    <ResourceUnit img={TractorImg} h='240' s='100' label='Tractors' amount={''}>
+                        <input type='number' id='trade-tractors' defaultValue='0' />
+                    </ResourceUnit>
+                    <br />
+                    <b>Ridges</b>: <b>{ridgeNames[0][0]}</b>: <input type='checkbox' id='trade-ridge1' />{'\u00A0'}
+                    <b>R</b>: <input type='checkbox' id='trade-ridge2' />{'\u00A0'}
+                    <b>C</b>: <input type='checkbox' id='trade-ridge3' />{'\u00A0'}
+                    <b>T</b>: <input type='checkbox' id='trade-ridge4' />{'\u00A0'}
+                    <br /><br />
+                    <Row>
+                        <Col width='4 column-no-padding'>
+                            <label htmlFor='trade-player'><b>Player</b>:</label>
+                            <select id='trade-player'>
+                                {this.props.otherPlayers.map(p => (
+                                    <option key={p.player.name} value={p.player.name}>{p.player.name}</option>
+                                ))}
+                            </select>
+                        </Col>
+                        <Col width='4 column-no-padding'>
+                            <label htmlFor='trade-money'><b>Money</b>: </label>
+                            <input type='number' id='trade-money' defaultValue='0' />
+                        </Col>
+                        <Col width='4 column-no-padding'>
+                            <label htmlFor='trade-cards'><b>Cards</b>: </label>
+                            <input type='text' id='trade-cards' placeholder="12 46" />
+                        </Col>
+                    </Row>
+                    <PlayerTradeProposed player={this.props.player} />
+                    <PlayerTradeButton player={this.props.player} />
+                </div>
+            </form>);
     }
 }