tjhintz/farm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improving ridge indicator UI.

Browse Source
This commit is contained in:
Thomas Hintz
2020-04-02 11:04:09 -07:00
parent c4e6435f86
commit 28d02a94f0
2 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/farm/Board.jsx
View File

@@ -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>
) : (<></>)}

14
src/style.scss
View File

@@ -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) {