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

Money styling improvements.

Browse Source
This commit is contained in:
Thomas Hintz
2020-04-03 12:53:03 -07:00
parent 9a9119cc18
commit 19c753fa60
2 changed files with 64 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -293,8 +293,23 @@ function formatMoney(n) {
class MoneySummary extends React.Component { class MoneySummary extends React.Component {
render () { render () {
const { max } = this.props;
return ( return (
<span><b>{this.props.title}</b>: ${formatMoney(this.props.value)}</span> <span className="small-text">
<Row>
<Col width={max ? '3' : "6"} className="align-right pad-right">
<b>{this.props.title}</b>:
</Col>
<Col width={max ? '9' : "6"}>
${formatMoney(this.props.value)}
{max ? (
<>
{' '}/ ${formatMoney(max)}
</>
) : (<></>)}
</Col>
</Row>
</span>
); );
} }
} }
@@ -305,12 +320,23 @@ class PlayerSummary extends React.Component {
return ( return (
<GroupBox title={(<Fragment><div className={'player player-' + player.color}></div> {player.name} <GroupBox title={(<Fragment><div className={'player player-' + player.color}></div> {player.name}
</Fragment>)}> </Fragment>)}>
<MoneySummary title='Cash' value={player.displayCash} /> {' '} <Row>
<MoneySummary title='Debt' value={player.debt} /> {' '} <Col width="5">
<br /><br /> <MoneySummary title='Cash' value={player.displayCash} />
<MoneySummary title='Assets' value={assetsValue(player)} /> {' '} </Col>
<Col width="7">
<MoneySummary title='Assets' value={assetsValue(player)} />
</Col>
</Row>
<Row>
<Col width="5">
<MoneySummary title='Debt' value={player.debt} />
</Col>
<Col width="7">
<MoneySummary title='Net worth' value={netWorth(player)} /> <MoneySummary title='Net worth' value={netWorth(player)} />
<br /><br /> </Col>
</Row>
<br />
<PlayerResources player={player} /> <PlayerResources player={player} />
<br /> <br />
<PlayerTurnContainer player={player} <PlayerTurnContainer player={player}
@@ -961,14 +987,24 @@ class Loans extends React.Component {
render () { render () {
return ( return (
<GroupBox title={'Loans'}> <GroupBox title={'Loans'}>
<MoneySummary title='Cash' value={this.props.player.displayCash} /> {' '} <Row>
<MoneySummary title='Debt' value={this.props.player.debt} /> <Col width="4">
/${formatMoney(this.props.game.settings.maxDebt)} <MoneySummary title='Cash' value={this.props.player.displayCash} />
<br /> </Col>
{this.props.game.settings.loanInterest > 0 ? '(' + (this.props.game.settings.loanInterest * 100) + '% interest added to each loan)' : ''} <Col width="8">
<MoneySummary title='Debt' value={this.props.player.debt} max={this.props.game.settings.maxDebt} />
</Col>
</Row>
{this.props.game.settings.loanInterest > 0 ? (
<>
{'('}{this.props.game.settings.loanInterest * 100} % interest added to each loan{')'}
<br /> <br />
</>
) : ''}
{this.props.player.debt >= this.props.game.settings.maxDebt ? ( {this.props.player.debt >= this.props.game.settings.maxDebt ? (
<><Button onClick={this.handleEmergencyLoan}>Emergency Loan</Button> $1,000 at 100% interest</> <span className="small-text">
<Button onClick={this.handleEmergencyLoan} className="tiny">Emergency Loan</Button> $1,000 at 100% interest
</span>
) : (<></>)} ) : (<></>)}
<br /> <br />
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>

14
src/style.scss
View File

@@ -911,3 +911,17 @@ $intro-time: 6s;
font-size: 1.2rem; font-size: 1.2rem;
color: red; color: red;
font-weight: bold } font-weight: bold }
.small-text {
@include breakpoint(small only) {
font-size: 0.9rem; }
@include breakpoint(medium) {
font-size: 1.2rem; }
}
.align-right {
text-align: right; }
.pad-right {
padding-right: 0.3rem; }