|
|
@ -310,7 +310,7 @@ class PlayerTurnContainer extends React.Component {
|
|
|
|
let view;
|
|
|
|
let view;
|
|
|
|
const player = this.props.player,
|
|
|
|
const player = this.props.player,
|
|
|
|
worth = netWorth(player),
|
|
|
|
worth = netWorth(player),
|
|
|
|
auditButton = (this.props.game.calledAudit === false && worth >= this.props.game.auditThreshold) ? (
|
|
|
|
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 (player.state === GAME_STATES.preTurn) {
|
|
|
|
if (player.state === GAME_STATES.preTurn) {
|
|
|
|
view = (
|
|
|
|
view = (
|
|
|
@ -505,7 +505,22 @@ class Messages extends React.Component {
|
|
|
|
class Loans extends React.Component {
|
|
|
|
class Loans extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
super(props);
|
|
|
|
this.state = { repay: 0, takeOut: 0 };
|
|
|
|
this.state = { repay: 0, takeOut: 0,
|
|
|
|
|
|
|
|
maxLoan: this.getMaxLoan(props) };
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getMaxLoan = props => {
|
|
|
|
|
|
|
|
let i = 0,
|
|
|
|
|
|
|
|
maxLoan = 0,
|
|
|
|
|
|
|
|
loanInterest = props.game.settings.loanInterest,
|
|
|
|
|
|
|
|
maxDebt = props.game.settings.maxDebt;
|
|
|
|
|
|
|
|
const max = maxDebt - props.player.debt;
|
|
|
|
|
|
|
|
while (maxLoan <= max) {
|
|
|
|
|
|
|
|
maxLoan = i * (loanInterest + 1);
|
|
|
|
|
|
|
|
i += 1000;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
i -= 1000;
|
|
|
|
|
|
|
|
return i - 1000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
handleInput = e => {
|
|
|
|
handleInput = e => {
|
|
|
@ -520,10 +535,10 @@ class Loans extends React.Component {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
takeOut = value * 1000;
|
|
|
|
takeOut = value * 1000;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.setState({ repay: Math.max(0, Math.floor(
|
|
|
|
this.setState({ repay: Math.max(0, Math.ceil(
|
|
|
|
Math.min(repay, this.props.player.debt, this.props.player.cash) / 1000)),
|
|
|
|
Math.min(repay, this.props.player.debt + 900, this.props.player.cash) / 1000)),
|
|
|
|
takeOut: Math.max(0, Math.floor(
|
|
|
|
takeOut: Math.max(0, Math.floor(
|
|
|
|
Math.min(takeOut, 50000 - this.props.player.debt) / 1000)) });
|
|
|
|
Math.min(takeOut, this.state.maxLoan) / 1000)) });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
handleSubmit = e => {
|
|
|
|
handleSubmit = e => {
|
|
|
@ -532,11 +547,22 @@ class Loans extends React.Component {
|
|
|
|
this.setState({ repay: 0, takeOut: 0 });
|
|
|
|
this.setState({ repay: 0, takeOut: 0 });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
|
|
|
|
if (this.props.player.debt !== prevProps.player.debt ||
|
|
|
|
|
|
|
|
this.props.game.settings.loanInterest !== prevProps.game.settings.loanInterest ||
|
|
|
|
|
|
|
|
this.props.game.settings.maxDebt !== prevProps.game.settings.maxDebt) {
|
|
|
|
|
|
|
|
this.setState({ maxLoan: this.getMaxLoan(this.props) });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<GroupBox title={'Loans'}>
|
|
|
|
<GroupBox title={'Loans'}>
|
|
|
|
<MoneySummary title='Cash' value={this.props.player.cash} /> {' '}
|
|
|
|
<MoneySummary title='Cash' value={this.props.player.cash} /> {' '}
|
|
|
|
<MoneySummary title='Debt' value={this.props.player.debt} />/$50,000
|
|
|
|
<MoneySummary title='Debt' value={this.props.player.debt} />
|
|
|
|
|
|
|
|
/${formatMoney(this.props.game.settings.maxDebt)}
|
|
|
|
|
|
|
|
<br />
|
|
|
|
|
|
|
|
{this.props.game.settings.loanInterest > 0 ? '(' + (this.props.game.settings.loanInterest * 100) + '% interest added to each loan)' : ''}
|
|
|
|
<br /><br />
|
|
|
|
<br /><br />
|
|
|
|
<form onSubmit={this.handleSubmit}>
|
|
|
|
<form onSubmit={this.handleSubmit}>
|
|
|
|
<Row collapse='true'>
|
|
|
|
<Row collapse='true'>
|
|
|
@ -558,7 +584,7 @@ class Loans extends React.Component {
|
|
|
|
$:
|
|
|
|
$:
|
|
|
|
<input onChange={this.handleInput} name='takeOut' type='number'
|
|
|
|
<input onChange={this.handleInput} name='takeOut' type='number'
|
|
|
|
value={this.state.takeOut === 0 ? '' : this.state.takeOut} />
|
|
|
|
value={this.state.takeOut === 0 ? '' : this.state.takeOut} />
|
|
|
|
{'\u00A0'}K / ${(50000 - this.props.player.debt) / 1000}K
|
|
|
|
{'\u00A0'}K / ${this.state.maxLoan / 1000}K
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col width='4'>
|
|
|
|
<Col width='4'>
|
|
|
@ -814,7 +840,6 @@ class Harvest extends React.Component {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// this.props.player.name === this.props.game.currentPlayer TODO
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
let view;
|
|
|
|
let view;
|
|
|
|
const isCurrentPlayer = this.props.player.name === this.props.game.currentPlayer;
|
|
|
|
const isCurrentPlayer = this.props.player.name === this.props.game.currentPlayer;
|
|
|
@ -841,7 +866,7 @@ class Harvest extends React.Component {
|
|
|
|
case 'roll':
|
|
|
|
case 'roll':
|
|
|
|
view = (<Die decay={true} num={this.props.rolled} ms={2000} roll={true}
|
|
|
|
view = (<Die decay={true} num={this.props.rolled} ms={2000} roll={true}
|
|
|
|
showScreen={() => this.nextView('income')}
|
|
|
|
showScreen={() => this.nextView('income')}
|
|
|
|
skip={true}
|
|
|
|
skip={this.props.player.name === this.props.game.currentPlayer}
|
|
|
|
autoSkip={this.props.autoSkip === 'die'}
|
|
|
|
autoSkip={this.props.autoSkip === 'die'}
|
|
|
|
showScreenDelay={2000} />);
|
|
|
|
showScreenDelay={2000} />);
|
|
|
|
break;
|
|
|
|
break;
|
|
|
@ -1088,7 +1113,7 @@ class Action extends React.Component {
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
{this.props.player.name === this.props.game.currentPlayer ? 'You' :
|
|
|
|
{this.props.player.name === this.props.game.currentPlayer ? 'You' :
|
|
|
|
this.props.game.currentPlayer} {this.props.ui.actionValue < 0 ? 'lost ' : 'gained '}
|
|
|
|
this.props.game.currentPlayer} {this.props.ui.actionValue < 0 ? 'lost ' : 'gained '}
|
|
|
|
${Math.abs(this.props.ui.actionValue)}!
|
|
|
|
${formatMoney(Math.abs(this.props.ui.actionValue))}!
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>);
|
|
|
|
</div>);
|
|
|
@ -1104,7 +1129,6 @@ class Action extends React.Component {
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case 'harvest':
|
|
|
|
case 'harvest':
|
|
|
|
view = (<Harvest rolled={this.props.ui.actionValue.rolled}
|
|
|
|
view = (<Harvest rolled={this.props.ui.actionValue.rolled}
|
|
|
|
autoSkip={this.props.ui.autoSkip}
|
|
|
|
|
|
|
|
player={this.props.player}
|
|
|
|
player={this.props.player}
|
|
|
|
game={this.props.game}
|
|
|
|
game={this.props.game}
|
|
|
|
income={this.props.ui.actionValue.income}
|
|
|
|
income={this.props.ui.actionValue.income}
|
|
|
@ -1250,13 +1274,14 @@ class AlertOverlay extends React.Component {
|
|
|
|
this.props.visible : true };
|
|
|
|
this.props.visible : true };
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
hide = () => {
|
|
|
|
hide = e => {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
this.setState({ visible: false });
|
|
|
|
this.setState({ visible: false });
|
|
|
|
this.props.hideHandler();
|
|
|
|
this.props.hideHandler();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
buttonClick = () => {
|
|
|
|
buttonClick = e => {
|
|
|
|
this.hide();
|
|
|
|
this.hide(e);
|
|
|
|
this.props.handler();
|
|
|
|
this.props.handler();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -1271,13 +1296,27 @@ class AlertOverlay extends React.Component {
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Button onClick={this.buttonClick}>{this.props.buttonText}</Button>
|
|
|
|
<Button onClick={this.buttonClick}>{this.props.buttonText}</Button>
|
|
|
|
<label><input type='checkbox' onClick={this.hidePermanent} /> {`Don't show again`}</label>
|
|
|
|
<label><input type='checkbox' onClick={this.hidePermanent} /> {`Don't show again`}</label>
|
|
|
|
<a href='#' onClick={this.hide}>close</a>
|
|
|
|
<a onClick={this.hide}>close</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class InfoBar extends React.Component {
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
|
|
|
if (this.props.players.length > 0) {
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<div className='info-bar'>
|
|
|
|
|
|
|
|
{(this.props.screen === SCREENS.action) ? '' : this.props.message}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return (<Fragment />);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const SCREENS = { summary: 'summary', misc: 'misc', farms: 'farms',
|
|
|
|
const SCREENS = { summary: 'summary', misc: 'misc', farms: 'farms',
|
|
|
|
cards: 'cards', trade: 'trade', loans: 'loans',
|
|
|
|
cards: 'cards', trade: 'trade', loans: 'loans',
|
|
|
|
action: 'action' };
|
|
|
|
action: 'action' };
|
|
|
@ -1329,12 +1368,29 @@ class BoardApp extends React.Component {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
iconOnClick = icon => {
|
|
|
|
iconOnClick = icon => {
|
|
|
|
return () => this.showScreen(this.iconToScreen[icon]);
|
|
|
|
return e => {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
this.showScreen(this.iconToScreen[icon]);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
let alertOverlay;
|
|
|
|
let alertOverlay;
|
|
|
|
if (!this.props.ui.alertHandled && this.state.screen !== SCREENS.action) {
|
|
|
|
if (!this.props.ui.alertHandled && this.props.ui.alert === ALERTS.endOfGame) {
|
|
|
|
|
|
|
|
alertOverlay = (
|
|
|
|
|
|
|
|
<AlertOverlay visible={true}
|
|
|
|
|
|
|
|
buttonText='Close'
|
|
|
|
|
|
|
|
hideHandler={() => this.props.alert(false)}
|
|
|
|
|
|
|
|
handler={() => { return false; }}>
|
|
|
|
|
|
|
|
<Fragment>
|
|
|
|
|
|
|
|
<h1>Game Over!</h1>
|
|
|
|
|
|
|
|
{this.props.ui.alertContents.map((e, i) => (
|
|
|
|
|
|
|
|
<p key={i}>{e}</p>
|
|
|
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
</Fragment>
|
|
|
|
|
|
|
|
</AlertOverlay>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
} else if (!this.props.ui.alertHandled && this.state.screen !== SCREENS.action) {
|
|
|
|
switch (this.props.ui.alert) {
|
|
|
|
switch (this.props.ui.alert) {
|
|
|
|
case ALERTS.beginTurn:
|
|
|
|
case ALERTS.beginTurn:
|
|
|
|
alertOverlay = (
|
|
|
|
alertOverlay = (
|
|
|
@ -1384,20 +1440,23 @@ class BoardApp extends React.Component {
|
|
|
|
<div className='game-container'>
|
|
|
|
<div className='game-container'>
|
|
|
|
{alertOverlay}
|
|
|
|
{alertOverlay}
|
|
|
|
<Board spaces={this.props.spaces}>
|
|
|
|
<Board spaces={this.props.spaces}>
|
|
|
|
|
|
|
|
<InfoBar message={this.props.ui.message}
|
|
|
|
|
|
|
|
screen={this.state.screen}
|
|
|
|
|
|
|
|
players={this.props.game.otherPlayers} />
|
|
|
|
<div className='center-board-container'>
|
|
|
|
<div className='center-board-container'>
|
|
|
|
<ul className='horizontal menu icons icons-top'>
|
|
|
|
<ul className='horizontal menu icons icons-top'>
|
|
|
|
{[faUser, faTractor, faWindowRestore, faDollarSign, faUsers, faAsterisk]
|
|
|
|
{[faUser, faTractor, faWindowRestore, faDollarSign, faUsers, faAsterisk]
|
|
|
|
.map((icon, i) =>
|
|
|
|
.map((icon, i) =>
|
|
|
|
(<li key={i} className={this.iconClass(icon.iconName)}>
|
|
|
|
(<li key={i} className={this.iconClass(icon.iconName)}>
|
|
|
|
<div></div>
|
|
|
|
<div></div>
|
|
|
|
<a href='#' onClick={this.iconOnClick(icon.iconName)}>
|
|
|
|
<a onClick={this.iconOnClick(icon.iconName)}>
|
|
|
|
<FontAwesomeIcon icon={icon} /></a></li>))}
|
|
|
|
<FontAwesomeIcon icon={icon} /></a></li>))}
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<ul className='vertical menu icons icons-top'>
|
|
|
|
<ul className='vertical menu icons icons-top'>
|
|
|
|
{[faUser, faTractor, faWindowRestore, faDollarSign, faUsers, faAsterisk]
|
|
|
|
{[faUser, faTractor, faWindowRestore, faDollarSign, faUsers, faAsterisk]
|
|
|
|
.map((icon, i) =>
|
|
|
|
.map((icon, i) =>
|
|
|
|
(<li key={i} className={this.iconClass(icon.iconName)}>
|
|
|
|
(<li key={i} className={this.iconClass(icon.iconName)}>
|
|
|
|
<a href='#' onClick={this.iconOnClick(icon.iconName)}>
|
|
|
|
<a onClick={this.iconOnClick(icon.iconName)}>
|
|
|
|
<FontAwesomeIcon icon={icon} /></a></li>))}
|
|
|
|
<FontAwesomeIcon icon={icon} /></a></li>))}
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
<div className='tab-container'>
|
|
|
|
<div className='tab-container'>
|
|
|
@ -1426,14 +1485,14 @@ class BoardApp extends React.Component {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className='cell medium-auto'>
|
|
|
|
<div className='cell medium-auto'>
|
|
|
|
<Card ui={this.props.ui}
|
|
|
|
<Card ui={this.props.ui}
|
|
|
|
min={(this.props.ui.card.total * 0.2) / 1000}
|
|
|
|
min={(this.props.ui.card.total * this.props.game.settings.downPayment) / 1000}
|
|
|
|
max={Math.floor(Math.min(this.props.player.cash / 1000, this.props.ui.card.total / 1000))}
|
|
|
|
max={Math.floor(Math.min(this.props.player.cash / 1000, this.props.ui.card.total / 1000))}
|
|
|
|
cash={(this.props.ui.card.total * 0.2) / 1000} />
|
|
|
|
cash={(this.props.ui.card.total * this.props.game.settings.downPayment) / 1000} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={this.tabClass(SCREENS.loans)}>
|
|
|
|
<div className={this.tabClass(SCREENS.loans)}>
|
|
|
|
<Loans player={this.props.player} />
|
|
|
|
<Loans player={this.props.player} game={this.props.game} />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className={this.tabClass(SCREENS.farms)}>
|
|
|
|
<div className={this.tabClass(SCREENS.farms)}>
|
|
|
|
<FarmsContainer player={this.props.player}
|
|
|
|
<FarmsContainer player={this.props.player}
|
|
|
@ -1505,9 +1564,12 @@ class Card extends React.Component {
|
|
|
|
<div className='money'>
|
|
|
|
<div className='money'>
|
|
|
|
$:
|
|
|
|
$:
|
|
|
|
<input id='cash-input' type='number'
|
|
|
|
<input id='cash-input' type='number'
|
|
|
|
|
|
|
|
step='1'
|
|
|
|
|
|
|
|
min='0'
|
|
|
|
|
|
|
|
max={Math.ceil(this.props.max)}
|
|
|
|
disabled={this.props.max < this.props.min}
|
|
|
|
disabled={this.props.max < this.props.min}
|
|
|
|
onChange={this.handleInput}
|
|
|
|
onChange={this.handleInput}
|
|
|
|
value={this.state.cash} />
|
|
|
|
value={Math.ceil(this.state.cash)} />
|
|
|
|
{'\u00A0'},000
|
|
|
|
{'\u00A0'},000
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|