From 3a97c128b60b9fd9ab3c9e3b821510a828c09f14 Mon Sep 17 00:00:00 2001 From: Thomas Hintz Date: Fri, 28 Aug 2020 15:24:08 -0700 Subject: [PATCH] Adding tabs and ROI to game over screen. --- src/components/farm/Board.jsx | 204 ++++++++++++++++++++++------------ src/style.scss | 8 ++ 2 files changed, 142 insertions(+), 70 deletions(-) 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 ( -
- {!this.props.preventHiding ? ( -
- -
- ) : (<>)} -
-
- {this.props.children} -
-
- - {this.props.cancelButtonText ? ( - <> - {' '} - - - ): (<>)} -
- {!this.props.preventHiding ? (close) : (<>)} + return ( +
+ {!preventHiding ? ( +
+ +
+ ) : (<>)} +
+
+ {children} +
+
+ + {cancelButtonText ? ( + <> + {' '} + + + ): (<>)}
+ {!preventHiding ? (close) : (<>)}
- ); +
+ ); +} + +const gameOverTabs = { initial: 'Summary', harvest: 'Harvests', investments: 'Investments' }; +const GameOver = ({ id, alertHandled, contents, game, player}) => { + const [tab, setTab] = useState(gameOverTabs.initial); + + const tabClass = (screen) => + 'tab border-top' + (tab === screen ? ' show ' : ''); + + const iconClass = (screen) => + tab === screen ? 'is-active' : ' '; + + const iconOnClick = (icon) => + (e) => { + e.preventDefault(); + setTab(icon); + }; + + const playerRidgeValue = (player, otherPlayers) => { + const ridges = makeRidgeLookup(player, otherPlayers); + return (ridges.ridge1 ? 10 : 0) + + (ridges.ridge2 ? 15 : 0) + + (ridges.ridge3 ? 20 : 0) + + (ridges.ridge4 ? 25 : 0); } + + return ( + 'nothing'} + handler={() => { return false; }}> +
+

Game Over!

+
    + {[gameOverTabs.initial, gameOverTabs.harvest, gameOverTabs.investments] + .map((icon, i) => + (
  • +
    + + {icon} + +
    • ))} +
+
+
+ {contents.results.map((e, i) => ( +

{e}

+ ))} +

{contents.stats.pro}

+

{contents.stats.back}

+

{contents.stats.taxPerson}

+

{contents.stats.emergency}

+

{contents.stats.highRoller}

+

{contents.stats.lowRoller}

+
+
+ {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)}

+
))} +
+
+ {contents.stats.players.map(p => { + const pObj = findPlayer(game, p.name) || player; + return ( +
+

{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)} +

+
+ ); + })} +
+
+
+ + ); } class InfoBar extends React.Component { @@ -2255,34 +2342,11 @@ class BoardApp extends React.Component { let alertOverlay; const alert = this.props.ui.unhandledAlert; if (alert && alert.type === ALERTS.endOfGame) { - alertOverlay = ( - 'nothing'} - handler={() => { return false; }}> -
-

Game Over!

- {alert.contents.results.map((e, i) => ( -

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

-
))} -
- - ); + alertOverlay = (); } else if (alert && alert.type === ALERTS.auditCalled) { alertOverlay = (