diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx index 0bde4e6..d7b1459 100644 --- a/src/components/farm/Board.jsx +++ b/src/components/farm/Board.jsx @@ -27,7 +27,7 @@ import TractorFullImg from './../../../assets/img/tractor-with-spikes.svg' import HarvesterImg from './../../../assets/img/harvester.svg' import VolcanoImg from './../../../assets/img/volcano2.gif' -import React, { Fragment } from 'react' +import React, { Fragment, useState } from 'react' import ReactDOM from 'react-dom' import { connect } from 'react-redux' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' @@ -191,7 +191,13 @@ class PlayerResources extends React.Component { // http://stackoverflow.com/questions/149055 function formatMoney(n) { - return n.toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').slice(0, -2); } + if (typeof n === 'number') { + return n.toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').slice(0, -2); + } else { + console.trace(n); + return 'NaN'; + } +} class MoneySummary extends React.Component { render () { @@ -1916,60 +1922,141 @@ class Board extends React.Component { } // handler, buttonText, children -class AlertOverlay extends React.Component { - constructor(props) { - super(props); - this.state = { visible: typeof this.props.visible !== 'undefined' ? - this.props.visible : true }; - } +const AlertOverlay = ({ visible, alertHandled, hideHandler, id, handler, cancelHandler, preventHiding, + children, disabled, buttonText, cancelButtonText, cancelDisabled }) => { + const [isVisible, setIsVisible] = useState(typeof visible !== 'undefined' ? visible : true); - hide = e => { + const hide = (e) => { e.preventDefault(); - this.setState({ visible: false }); - this.props.alertHandled(this.props.id); - this.props.hideHandler(); + setIsVisible(false); + alertHandled(id); + hideHandler(); } - buttonClick = e => { - this.hide(e); - this.props.handler(); + const buttonClick = (e) => { + hide(e); + handler(); } - cancelButtonClick = e => { + const cancelButtonClick = (e) => { e.preventDefault(); - this.props.cancelHandler(); + cancelHandler(); } // - render() { - return ( -
{e}
+ ))} +{contents.stats.pro}
+{contents.stats.back}
+{contents.stats.taxPerson}
+{contents.stats.emergency}
+{contents.stats.highRoller}
+{contents.stats.lowRoller}
+{p.name} Harvests:
+Total: ${formatMoney(p.harvestTotal)} Expenses: ${formatMoney(Math.abs(p.operatingExpenses))}
+Avg ${formatMoney(p.harvestAverage)} rolling {p.harvestRoll} for {p.numHarvests} harvests
+Hay: ${formatMoney(p.hay)} Grain: ${formatMoney(p.grain)} Fruit: ${formatMoney(p.fruit)} Cows: ${formatMoney(p.cows)}
+{p.name} Investments:
+Total: ${formatMoney(assetsValue(pObj))}
+Hay: {(p.hay / ((pObj.assets.hay * 2000) || 0.001)).toFixed(2)} {' '} + Grain: {(p.grain / ((pObj.assets.grain * 2000) || 0.001)).toFixed(2)} {' '} + Fruit: {(p.fruit / ((pObj.assets.fruit * 5000) || 0.001)).toFixed(2)} {' '} + Cows: {(p.cows / (((pObj.assets.cows * 500) + (playerRidgeValue(pObj, game.otherPlayers))) || 0.001)).toFixed(2)} +
+{e}
- ))} -{alert.contents.stats.pro}
-{alert.contents.stats.back}
-{alert.contents.stats.taxPerson}
-{alert.contents.stats.emergency}
-{alert.contents.stats.highRoller}
-{alert.contents.stats.lowRoller}
- {alert.contents.stats.players.map(p => ( -{p.name} Harvests:
-Total: ${formatMoney(p.harvestTotal)} Expenses: ${formatMoney(Math.abs(p.operatingExpenses))}
-Avg ${formatMoney(p.harvestAverage)} rolling {p.harvestRoll} for {p.numHarvests} harvests
-Hay: ${formatMoney(p.hay)} Grain: ${formatMoney(p.grain)} Fruit: ${formatMoney(p.fruit)} Cows: ${formatMoney(p.cows)}
-