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

Showing crop multipliers, loan UX enhancement.

Browse Source
This commit is contained in:
Thomas Hintz
2020-03-31 12:38:28 -07:00
parent 41b30fa314
commit 6916991455
3 changed files with 216 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,7 @@ import { connect } from 'react-redux'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser, faUsers, faTractor, faWindowRestore,
faDollarSign, faTimes, faAsterisk, faExchangeAlt,
faInfoCircle } from '@fortawesome/free-solid-svg-icons'
faInfoCircle, faArrowUp } from '@fortawesome/free-solid-svg-icons'
import { GroupBox, Row, Col, Button } from '../widgets.jsx'
import SpaceNode from './SpaceNode.jsx'
@@ -47,17 +47,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.displayCash - player.debt;
(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) {
@@ -120,10 +120,10 @@ class PlayerTradeProposed extends React.Component {
return (<p>You GAIN something if it is POSITIVE and you GIVE something if it is NEGATIVE.</p>);
} else if (this.props.player.trade.originator === this.props.player.name) {
return (<p>You proposed a trade with <b>{this.props.player.trade.player}</b> for
{'\u00A0'}<b>{tradeString(this.props.player, false)}</b>.</p>);
{'\u00A0'}<b>{tradeString(this.props.player, false)}</b>.</p>);
} else {
return (<p><b>{this.props.player.trade.originator}</b> proposed a trade for
{'\u00A0'}<b>{tradeString(this.props.player, true)}</b>.</p>);
{'\u00A0'}<b>{tradeString(this.props.player, true)}</b>.</p>);
}
}
}
@@ -161,11 +161,11 @@ class PlayerTradeButton extends React.Component {
return (<Button className='tiny' type='submit'>{text} Trade</Button>);
} else {
return (<Fragment>
<Button className='tiny' type='submit'>{text} Trade</Button>
<Button className='tiny' onClick={this.tradeDeny}>
Deny Trade
</Button>
</Fragment>);
<Button className='tiny' type='submit'>{text} Trade</Button>
<Button className='tiny' onClick={this.tradeDeny}>
Deny Trade
</Button>
</Fragment>);
}
}
}
@@ -177,9 +177,12 @@ class ResourceUnit extends React.Component {
<div className='resource-unit'
title={this.props.amount + ' ' + this.props.label}
style={{backgroundColor: hslString + '%, 85%)',
borderTop: '3px solid ' + hslString + '%, 55%)'}}>
{this.props.img ? (<img src={this.props.img} />) : (<Fragment />)}
{this.props.children}
borderTop: '3px solid ' + hslString + '%, 55%)'}}>
{this.props.img ? (<img src={this.props.img} />) : (<Fragment />)}
{this.props.children}
{this.props.doubled ? (
<p>x2!</p>
) : (<></>)}
</div>
);
}
@@ -189,79 +192,83 @@ 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>);
<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>);
}
}
class PlayerResources extends React.Component {
render () {
const player = this.props.player;
const player = this.props.player;
return (
<div className='resource-unit-container'>
<ResourceUnit img={HayImg} h='120' s='100' label='acres of Hay'
amount={player.assets.hay}>
{player.assets.hay}
</ResourceUnit> {' '}
<ResourceUnit img={WheatImg} h='41' s='100' label='acres of Grain'
amount={player.assets.grain}>
{player.assets.grain}
</ResourceUnit> {' '}
<ResourceUnit img={FruitImg} h='0' s='100' label='acres of Fruit'
amount={player.assets.fruit}>
{player.assets.fruit}
</ResourceUnit> {' '}
<ResourceUnit img={CowImg} h='0' s='59' label='head of Cows'
amount={player.assets.cows}>
{player.assets.cows}
</ResourceUnit> {' '}
<ResourceUnit img={HarvesterImg} h='240' s='100' label='Harvesters'
amount={player.assets.harvester}>
{player.assets.harvester}
</ResourceUnit> {' '}
<ResourceUnit img={TractorImg} h='240' s='100' label='Tractors'
amount={player.assets.tractor}>
{player.assets.tractor}
</ResourceUnit>
<ResourceUnit img={HayImg} h='120' s='100' label='acres of Hay'
amount={player.assets.hay}
doubled={player.hayDoubled}
>
{player.assets.hay}
</ResourceUnit> {' '}
<ResourceUnit img={WheatImg} h='41' s='100' label='acres of Grain'
amount={player.assets.grain}
doubled={player.cornDoubled}
>
{player.assets.grain}
</ResourceUnit> {' '}
<ResourceUnit img={FruitImg} h='0' s='100' label='acres of Fruit'
amount={player.assets.fruit}>
{player.assets.fruit}
</ResourceUnit> {' '}
<ResourceUnit img={CowImg} h='0' s='59' label='head of Cows'
amount={player.assets.cows}>
{player.assets.cows}
</ResourceUnit> {' '}
<ResourceUnit img={HarvesterImg} h='240' s='100' label='Harvesters'
amount={player.assets.harvester}>
{player.assets.harvester}
</ResourceUnit> {' '}
<ResourceUnit img={TractorImg} h='240' s='100' label='Tractors'
amount={player.assets.tractor}>
{player.assets.tractor}
</ResourceUnit>
</div>
);
}
@@ -284,7 +291,7 @@ class PlayerSummary extends React.Component {
const player = this.props.player;
return (
<GroupBox title={(<Fragment><div className={'player player-' + player.color}></div> {player.name}
</Fragment>)}>
</Fragment>)}>
<MoneySummary title='Cash' value={player.displayCash} /> {' '}
<MoneySummary title='Debt' value={player.debt} /> {' '}
<br /><br />
@@ -314,13 +321,13 @@ class PlayerTurnContainer extends React.Component {
const player = this.props.player,
worth = netWorth(player),
auditButton = (this.props.game.calledAudit === false && worth >= this.props.game.settings.auditThreshold) ? (
<Button onClick={audit}>Call Audit</Button>) : '';
<Button onClick={audit}>Call Audit</Button>) : '';
if (this.props.game.state === 'finished') {
view = (<b>Game finished!</b>);
} else if (player.state === GAME_STATES.preTurn) {
view = (
<Fragment>
<Button onClick={this.clickRoll}>Roll</Button>{' '}{auditButton}
<Button onClick={this.clickRoll}>Roll</Button>{' '}{auditButton}
</Fragment>
);
} else if (player.state === GAME_STATES.midTurn) {
@@ -330,38 +337,38 @@ class PlayerTurnContainer extends React.Component {
} else {
view = (
<Button onClick={() => this.props.showScreen(SCREENS.action)}>
Complete your turn
Complete your turn
</Button>);
}
} else {
if (player.cash < 0) {
view = (
<Button onClick={() => this.props.showScreen(SCREENS.loans)}>
Raise Cash
Raise Cash
</Button>
);
} else {
view = (
<Fragment>
<Button onClick={endTurn}>
End Turn
</Button>{' '}{auditButton}
<Button onClick={endTurn}>
End Turn
</Button>{' '}{auditButton}
</Fragment>);
}
}
} else {
view = (
<Button onClick={() => this.props.showScreen(SCREENS.action)}>
Watch {this.props.game.currentPlayer}&apos;s turn
Watch {this.props.game.currentPlayer}&apos;s turn
</Button>);
}
return (
<Row>
<Col width='12'>
<div className='turn-container'>
{view}
</div>
</Col>
<Col width='12'>
<div className='turn-container'>
{view}
</div>
</Col>
</Row>
);
}
@@ -408,10 +415,10 @@ class FarmsContainer extends React.Component {
<b>{ridgeNames[3][0]}</b>: <PlayerColorIcon color={ridges.ridge4} />{'\u00A0'}
<br /><br />
{this.props.otherPlayers
.map(p => (
.map(p => (
<div key={p.player.name}>
<PlayerColorIcon color={p.player.color} />{'\u00A0'}
<b>{p.player.name}</b> <PlayerResources player={p.player} />
<b>{p.player.name}</b> <PlayerResources player={p.player} />
<br /> <br />
</div>))}
</GroupBox>
@@ -434,7 +441,7 @@ class CCBY extends React.Component {
render() {
return (
<Fragment>
License Creative Commons <a href='https://creativecommons.org/licenses/by/3.0/us/legalcode'>CCBY</a>
License Creative Commons <a href='https://creativecommons.org/licenses/by/3.0/us/legalcode'>CCBY</a>
</Fragment>
);
}
@@ -444,33 +451,33 @@ class Misc extends React.Component {
render() {
return (
<div className='credits'>
<h1>Credits</h1>
<ul>
<li>
Game created by <a href='https://thomashintz.org'>Thomas Hintz</a>.
</li>
<li>
<a href='https://code.thintz.com/farm'>Game source</a> available under the <a href='https://www.gnu.org/licenses/gpl-3.0-standalone.html'>GPLv3</a>+ license.
</li>
<li>
<img src={TractorFullImg} /> <img src={TractorImg} /> Copyright Nick Roach with modifications by Thomas Hintz - License <a href='GPL http://www.gnu.org/copyleft/gpl.html'>GPL</a>
</li>
<li>
<img src={CornImg} /> <img src={FruitImg} /> Copyright <a href='https://madexmade.com/'>Made</a> - <CCBY />
</li>
<li>
<img src={CowImg} /> Copyright <a href='https://thenounproject.com/rivercon/'>rivercon</a> - <CCBY />
</li>
<li>
<img src={HayImg} /> Copyright <a href='https://thenounproject.com/maxicons/'>Maxicons</a> - <CCBY />
</li>
<li>
<img src={WheatImg} /> Copyright <a href='https://thenounproject.com/amoghdesign/'>P Thanga Vignesh</a> - <CCBY />
</li>
<li>
<img src={HarvesterImg} /> Copyright <a href='https://andrejskirma.com/'>Andrejs Kirma</a> - <CCBY />
</li>
</ul>
<h1>Credits</h1>
<ul>
<li>
Game created by <a href='https://thomashintz.org'>Thomas Hintz</a>.
</li>
<li>
<a href='https://code.thintz.com/farm'>Game source</a> available under the <a href='https://www.gnu.org/licenses/gpl-3.0-standalone.html'>GPLv3</a>+ license.
</li>
<li>
<img src={TractorFullImg} /> <img src={TractorImg} /> Copyright Nick Roach with modifications by Thomas Hintz - License <a href='GPL http://www.gnu.org/copyleft/gpl.html'>GPL</a>
</li>
<li>
<img src={CornImg} /> <img src={FruitImg} /> Copyright <a href='https://madexmade.com/'>Made</a> - <CCBY />
</li>
<li>
<img src={CowImg} /> Copyright <a href='https://thenounproject.com/rivercon/'>rivercon</a> - <CCBY />
</li>
<li>
<img src={HayImg} /> Copyright <a href='https://thenounproject.com/maxicons/'>Maxicons</a> - <CCBY />
</li>
<li>
<img src={WheatImg} /> Copyright <a href='https://thenounproject.com/amoghdesign/'>P Thanga Vignesh</a> - <CCBY />
</li>
<li>
<img src={HarvesterImg} /> Copyright <a href='https://andrejskirma.com/'>Andrejs Kirma</a> - <CCBY />
</li>
</ul>
</div>
);
}
@@ -482,24 +489,24 @@ class Messages extends React.Component {
newTurn = false;
return (
<div className='messages'>
{this.props.game.messages.map((m, i) => (
<span key={i}>{m[0] === this.props.player.name ? (<b>{m[0]}</b>) : m[0]}{': ' + m[2]}<br /></span>
))}
{this.props.game.messages.length > 0 ? (<Fragment><br /><br /></Fragment>) : (<Fragment />)}
{this.props.game.oldMessages.map((m, i) => {
newTurn = false;
if (m[1] !== lastTurn) {
lastTurn = m[1];
newTurn = true;
}
return (
<Fragment key={i}>
{newTurn ? (<Fragment><b>Turn {m[1]}</b><br /></Fragment>) : <Fragment />}
<span>
{m[0] + ': ' + m[2]}
<br /></span>
</Fragment>
)})}
{this.props.game.messages.map((m, i) => (
<span key={i}>{m[0] === this.props.player.name ? (<b>{m[0]}</b>) : m[0]}{': ' + m[2]}<br /></span>
))}
{this.props.game.messages.length > 0 ? (<Fragment><br /><br /></Fragment>) : (<Fragment />)}
{this.props.game.oldMessages.map((m, i) => {
newTurn = false;
if (m[1] !== lastTurn) {
lastTurn = m[1];
newTurn = true;
}
return (
<Fragment key={i}>
{newTurn ? (<Fragment><b>Turn {m[1]}</b><br /></Fragment>) : <Fragment />}
<span>
{m[0] + ': ' + m[2]}
<br /></span>
</Fragment>
)})}
</div>
);
}
@@ -555,6 +562,21 @@ class Loans extends React.Component {
loan(1);
}
maxRepay = e => {
e.preventDefault();
this.setState({ repay: Math.max(0, Math.floor(
Math.min(this.props.player.debt + 900, this.props.player.displayCash) / 1000)) });
}
maxTakeout = e => {
e.preventDefault();
this.setState({ takeOut: Math.max(0, Math.floor(this.state.maxLoan / 1000)) });
}
quickLoan = i => {
loan(i);
}
componentDidUpdate(prevProps) {
if (this.props.player.debt !== prevProps.player.debt ||
this.props.game.settings.loanInterest !== prevProps.game.settings.loanInterest ||
@@ -578,7 +600,12 @@ class Loans extends React.Component {
<br />
<form onSubmit={this.handleSubmit}>
<Row collapse='true'>
<Col width='8'>
<Col width="2">
{this.props.player.displayCash >= 1000 ? (
<Button className="tiny" onClick={() => this.quickLoan(-1)}>-1</Button>
) : (<span>{' '}</span>)}
</Col>
<Col width='6'>
<div className='money'>
$:
<input onChange={this.handleInput} name='repay' type='number'
@@ -587,11 +614,17 @@ class Loans extends React.Component {
</div>
</Col>
<Col width='4'>
<Button className='tiny' onClick={this.maxRepay}><FontAwesomeIcon icon={faArrowUp} /></Button>{' '}
<Button className='tiny' type='submit'>Repay</Button>
</Col>
</Row>
<Row collapse='true'>
<Col width='8'>
<Col width="2">
{this.props.player.debt < this.props.game.settings.maxDebt ? (
<Button className="tiny" onClick={() => this.quickLoan(1)}>+1</Button>
) : (<span>{' ' }</span>)}
</Col>
<Col width='6'>
<div className='money'>
$:
<input onChange={this.handleInput} name='takeOut' type='number'
@@ -600,6 +633,7 @@ class Loans extends React.Component {
</div>
</Col>
<Col width='4'>
<Button className='tiny' onClick={this.maxTakeout}><FontAwesomeIcon icon={faArrowUp} /></Button>{' '}
<Button className='tiny' type='submit'>Take Out</Button>
</Col>
</Row>
@@ -863,19 +897,22 @@ class Harvest extends React.Component {
case 'ready':
view = (
<div className='clear-background'>
<div className={'harvest-card space-type-' + this.props.crop}>
<h1>{this.props.crop + ' harvest!'}</h1>
<div className='harvest-card-contents'>
<img src={this.cropToImg(this.props.crop)} />
Get ready to harvest <b>{this.props.acres}
{this.props.crop === 'cows' ? ' head of cow' : ' acres'}</b>!
<div className={'harvest-card space-type-' + this.props.crop}>
<h1>{this.props.crop + ' harvest!'}</h1>
<div className='harvest-card-contents'>
<img src={this.cropToImg(this.props.crop)} />
Get ready to harvest <b>{this.props.acres}
{this.props.crop === 'cows' ? ' head of cow' : ' acres'}</b>!
</div>
{isCurrentPlayer ? (
<Button onClick={() => this.nextView('roll')}>
Roll for harvest!
</Button>
) : (<Fragment />)}
{this.props.harvestMult !== 1 ? (
<span>Multiplied by {this.props.harvestMult}!</span>
) : (<></>)}
</div>
{isCurrentPlayer ? (
<Button onClick={() => this.nextView('roll')}>
Roll for harvest!
</Button>
) : (<Fragment />)}
</div>
</div>
);
break;
@@ -1170,6 +1207,8 @@ class Action extends React.Component {
case 'harvest':
view = (<Harvest rolled={this.props.ui.actionValue.rolled}
player={this.props.player}
currentPlayer={currentPlayer}
harvestMult={this.props.ui.actionValue.harvestMult}
game={this.props.game}
income={this.props.ui.actionValue.income}
contents={this.props.ui.actionValue.operatingExpense}
@@ -1764,6 +1803,7 @@ class Card extends React.Component {
handleSubmit = e => {
e.preventDefault();
buy(this.props.card.id, this.state.cash);
this.setState({ cash: 0 });
}
render () {

2
src/components/farm/reducers.js
View File

@@ -92,6 +92,8 @@ const initialState = {
name: '',
ridges: { ridge1: 0, ridge2: 0, ridge3: 0, ridge4: 0 },
space: 0,
hayDoubled: false,
cornDoubled: false,
trade: {}
},
game: { calledAudit: false,