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

Adding tabs and ROI to game over screen.

Browse Source
master
Thomas Hintz 4 years ago
parent b2d0dc3268
commit 3a97c128b6
2 changed files with 142 additions and 70 deletions
Show Stats Download Patch File Download Diff File

204
src/components/farm/Board.jsx
Unescape Escape View File

@ -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();
}
// <label><input type='checkbox' onClick={this.hidePermanent} /> {`Don't show again`}</label>
render() {
return (
<div className={'alert-overlay' + (this.state.visible ? '' : ' hidden') }>
{!this.props.preventHiding ? (
<div onClick={this.hide} className='alert-overlay-hide'>
<FontAwesomeIcon icon={faTimes} />
</div>
) : (<></>)}
<div className='alert-container'>
<div className='alert-overlay-contents'>
{this.props.children}
<br />
<div>
<Button onClick={this.buttonClick} disabled={!!this.props.disabled}>{this.props.buttonText}</Button>
{this.props.cancelButtonText ? (
<>
{' '}
<Button onClick={this.cancelButtonClick} disabled={!!this.props.cancelDisabled}>
{this.props.cancelButtonText}
</Button>
</>
): (<></>)}
</div>
{!this.props.preventHiding ? (<a onClick={this.hide}>close</a>) : (<></>)}
return (
<div className={'alert-overlay' + (isVisible ? '' : ' hidden') }>
{!preventHiding ? (
<div onClick={hide} className='alert-overlay-hide'>
<FontAwesomeIcon icon={faTimes} />
</div>
) : (<></>)}
<div className='alert-container'>
<div className='alert-overlay-contents'>
{children}
<br />
<div>
<Button onClick={buttonClick} disabled={!!disabled}>{buttonText}</Button>
{cancelButtonText ? (
<>
{' '}
<Button onClick={cancelButtonClick} disabled={!!cancelDisabled}>
{cancelButtonText}
</Button>
</>
): (<></>)}
</div>
{!preventHiding ? (<a onClick={hide}>close</a>) : (<></>)}
</div>
</div>
);
</div>
);
}
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 (
<AlertOverlay visible={true}
id={id}
alertHandled={alertHandled}
buttonText='Close'
hideHandler={() => 'nothing'}
handler={() => { return false; }}>
<div className="game-over">
<h1>Game Over!</h1>
<ul className='menu icons icons-top'>
{[gameOverTabs.initial, gameOverTabs.harvest, gameOverTabs.investments]
.map((icon, i) =>
(<li key={i} className={iconClass(icon)}>
<div></div>
<a onClick={iconOnClick(icon)}>
{icon}
</a>
</li>))}
</ul>
<div className="">
<div className={tabClass(gameOverTabs.initial)}>
{contents.results.map((e, i) => (
<p key={i}>{e}</p>
))}
<p>{contents.stats.pro}</p>
<p>{contents.stats.back}</p>
<p>{contents.stats.taxPerson}</p>
<p>{contents.stats.emergency}</p>
<p>{contents.stats.highRoller}</p>
<p>{contents.stats.lowRoller}</p>
</div>
<div className={tabClass(gameOverTabs.harvest)}>
{contents.stats.players.map(p => (
<div key={p.name}>
<p><b>{p.name} Harvests:</b></p>
<p>Total: ${formatMoney(p.harvestTotal)} Expenses: ${formatMoney(Math.abs(p.operatingExpenses))}</p>
<p>Avg ${formatMoney(p.harvestAverage)} rolling {p.harvestRoll} for {p.numHarvests} harvests</p>
<p>Hay: ${formatMoney(p.hay)} Grain: ${formatMoney(p.grain)} Fruit: ${formatMoney(p.fruit)} Cows: ${formatMoney(p.cows)}</p>
</div>))}
</div>
<div className={tabClass(gameOverTabs.investments)}>
{contents.stats.players.map(p => {
const pObj = findPlayer(game, p.name) || player;
return (
<div key={p.name}>
<p><b>{p.name} Investments:</b></p>
<p>Total: ${formatMoney(assetsValue(pObj))}</p>
<p>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)}
</p>
</div>
);
})}
</div>
</div>
</div>
</AlertOverlay>
);
}
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 = (
<AlertOverlay visible={true}
id={alert.id}
alertHandled={this.props.alertHandled}
buttonText='Close'
hideHandler={() => 'nothing'}
handler={() => { return false; }}>
<div className="game-over">
<h1>Game Over!</h1>
{alert.contents.results.map((e, i) => (
<p key={i}>{e}</p>
))}
<p>{alert.contents.stats.pro}</p>
<p>{alert.contents.stats.back}</p>
<p>{alert.contents.stats.taxPerson}</p>
<p>{alert.contents.stats.emergency}</p>
<p>{alert.contents.stats.highRoller}</p>
<p>{alert.contents.stats.lowRoller}</p>
{alert.contents.stats.players.map(p => (
<div key={p.name}>
<p><b>{p.name} Harvests:</b></p>
<p>Total: ${formatMoney(p.harvestTotal)} Expenses: ${formatMoney(Math.abs(p.operatingExpenses))}</p>
<p>Avg ${formatMoney(p.harvestAverage)} rolling {p.harvestRoll} for {p.numHarvests} harvests</p>
<p>Hay: ${formatMoney(p.hay)} Grain: ${formatMoney(p.grain)} Fruit: ${formatMoney(p.fruit)} Cows: ${formatMoney(p.cows)}</p>
</div>))}
</div>
</AlertOverlay>
);
alertOverlay = (<GameOver id={alert.id}
game={this.props.game}
player={this.props.player}
alertHandled={this.props.alertHandled}
contents={alert.contents} />);
} else if (alert && alert.type === ALERTS.auditCalled) {
alertOverlay = (
<AlertOverlay visible={true}

8
src/style.scss
Unescape Escape View File

@ -806,6 +806,14 @@ $trade-margin: 3rem;
padding: 0.5rem;
display: none; }
.tab.border-top {
$tab-border: 0.3rem solid $primary-color;
border-top: $tab-border;
border-bottom: none;
border-left: none;
border-right: none;
}
.tab.show {
display: block; }

Write Preview
Loading…
Cancel
Save