// Copyright 2020 Thomas Hintz
//
// This file is part of the Alpha Centauri Farming project.
//
// The Alpha Centauri Farming project is free software: you can
// redistribute it and/or modify it under the terms of the GNU General
// Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// The Alpha Centauri Farming project is distributed in the hope that
// it will be useful, but WITHOUT ANY WARRANTY; without even the
// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
// PURPOSE.  See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with the Alpha Centauri Farming project.  If not, see
// <https://www.gnu.org/licenses/>.

import CornImg from './../../../assets/img/corn.svg'
import FruitImg from './../../../assets/img/fruit.svg'
import CowImg from './../../../assets/img/cow.svg'
import HayImg from './../../../assets/img/hay.svg'
import WheatImg from './../../../assets/img/wheat.svg'
import TractorImg from './../../../assets/img/tractor-icon.svg'
import CakeImg from './../../../assets/img/cake.svg'
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 ReactDOM from 'react-dom'
import { connect } from 'react-redux'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser, faUsers, faTractor, faWindowRestore,
         faDollarSign, faTimes, faExchangeAlt,
         faInfoCircle, faArrowUp, faArrowDown, faAward,
         faBan, faArrowCircleLeft, faPlusCircle } from '@fortawesome/free-solid-svg-icons'

import { GroupBox, Row, Col, Button } from '../widgets.jsx'
import SpaceNode from './SpaceNode.jsx'
import Tractor from '../tractor/Tractor.jsx'

import { GAME_STATES, ALERTS } from '../../constants.js'
import { itemCard, itemCardShort, fateCard, ridgeNames } from 'game.js'
import { setSelectedCard, setMessagePanelSpace, setMPDims, movePlayer,
         nextUIAction, alert, alertHandled, setCardError,
         setMovingSkip } from './actions.js'
import { buy, roll, endTurn, loan, trade, submitTradeAccept,
         submitTradeDeny, submitTradeCancel, audit,
         buyUncleBert, skip, endAiTurn, startGame, readyToStart,
         leaveGame, kickPlayer, toggleRevealForTrade,
         addAIPlayer } from './interface.js'

const showScreenDelay = 2000;

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;
}

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

class ResourceUnit extends React.Component {
    render () {
        const hslString = 'hsl(' + this.props.h + ', ' + this.props.s;
        return (
            <div className={'resource-unit ' + (this.props.className ? this.props.className : '')}
                 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}
                {this.props.doubled ? (
                     <div className="resource-doubled"
                          title={this.props.doubled + ' harvests are doubled this year!'}
                         >
                         <FontAwesomeIcon icon={faAward} />
                     </div>
                ) : (<></>)}
            </div>
        );
    }
}

class PlayerResources extends React.Component {
    render () {
        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}
                              doubled={player.hayDoubled && 'Hay'}
                >
                    {player.assets.hay}
                </ResourceUnit> {' '}
                <ResourceUnit img={WheatImg} h='41' s='100' label='acres of Grain'
                              amount={player.assets.grain}
                              doubled={player.cornDoubled && 'Corn'}
                >
                    {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>
        );
    }
}

/* {' '}
 * <ResourceUnit img={CakeImg} h='240' s='100' label='Birthday'
 * amount={player.assets.birthday ? player.assets.birthday : 0}>
 * {player.assets.birthday ? player.assets.birthday : 0}
 * </ResourceUnit> */

// http://stackoverflow.com/questions/149055
function formatMoney(n) {
    return n.toFixed(1).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').slice(0, -2); }

class MoneySummary extends React.Component {
    render () {
        const { max } = this.props;
        return (
            <span className="small-text">
                <Row>
                    <Col width={max ? '3' : "6"} className="align-right pad-right">
                        <b>{this.props.title}</b>:
                    </Col>
                    <Col width={max ? '9' : "6"}>
                        ${formatMoney(this.props.value)}
                        {max ? (
                             <>
                                 {' '}/ ${formatMoney(max)}
                             </>
                        ) : (<></>)}
                    </Col>
                </Row>
            </span>
        );
    }
}

class PlayerSummary extends React.Component {
    render () {
        const player = this.props.player;
        return (
            <GroupBox title={(<Fragment><div className={'player player-' + player.color}></div> {player.name}
            </Fragment>)}>
                <Row>
                    <Col width="5">
                        <MoneySummary title='Cash' value={player.displayCash} />
                    </Col>
                    <Col width="7">
                        <MoneySummary title='Assets' value={assetsValue(player)} />
                    </Col>
                </Row>
                <Row>
                    <Col width="5">
                        <MoneySummary title='Debt' value={player.debt} />
                    </Col>
                    <Col width="7">
                        <MoneySummary title='Net worth' value={netWorth(player)} />
                    </Col>
                </Row>
                <br />
                <PlayerResources player={player} />
                <br />
                <PlayerTurnContainer player={player}
                                     game={this.props.game}
                                     ui={this.props.ui}
                                     hideForLarge={this.props.hideForLarge}
                                     screen={this.props.screen}
                                     showScreen={this.props.showScreen}/>
            </GroupBox>
        );
    }
}

class PlayerTurnContainer extends React.Component {
    clickRoll = () => {
        roll();
        this.props.showScreen(SCREENS.action);
    }

    render() {
        let view;
        const { player, ui } = this.props,
              worth = netWorth(player),
              auditButton = (this.props.game.calledAudit === false && worth >= this.props.game.settings.auditThreshold) ? (
                  <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 className="action-item" onClick={this.clickRoll}>Roll</Button>{' '}{auditButton}
                </Fragment>
            );
        } else if (player.state === GAME_STATES.midTurn) {
            if (this.props.ui.action) {
                if (this.props.screen === SCREENS.action) {
                    view = `It's your turn!`;
                } else {
                    view = (
                        <Button onClick={() => this.props.showScreen(SCREENS.action)}>
                            Complete your turn
                        </Button>);
                }
            } else {
                if (player.cash < 0) {
                    view = (
                        <Button onClick={() => this.props.showScreen(SCREENS.loans)}>
                            Raise Cash
                        </Button>
                    );
                } else {
                    view = (
                        <Fragment>
                            <Button className="action-item" onClick={endTurn}>
                                End Turn
                            </Button>{' '}{auditButton}
                        </Fragment>);
                }
            }
        } else {
            view = (
                <Button onClick={() => this.props.showScreen(SCREENS.action)}>
                    Watch {this.props.game.currentPlayer}&apos;s turn
                </Button>);
        }
        const space = ui.playerSpaces[player.color];
        return (
            <Row>
                <Col width='12'>
                    <div className='turn-container'>
                        { space >= 9 && space <= 14 ? (
                              <>
                                  <div>
                                      Recommendation:
                                  </div>
                                  <div>
                                      <Button className="tiny"
                                              onClick={() => this.props.showScreen(SCREENS.cards)}>
                                          Complete Purchasing
                                      </Button> before next roll
                                  </div>
                                  <br />
                              </>
                        ) : (<></>)}
                        <div className={this.props.hideForLarge ? 'hide-for-large' : ''}>
                            {view}
                        </div>
                    </div>
                </Col>
            </Row>
        );
    }
}

// just the circle, for players circles in a space see PlayerIcon
class PlayerColorIcon extends React.Component {
    render() {
        return (<div className={'player player-' + this.props.color}></div>);
    }
}

function playerHasRidge(player, ridge) {
    return player.ridges[ridge] !== 0 ? true : false;
}

function makeRidgeLookup(player, otherPlayers) {
    var ridges = { ridge1: playerHasRidge(player, 'ridge1') ? player.color : false,
                   ridge2: playerHasRidge(player, 'ridge2') ? player.color : false,
                   ridge3: playerHasRidge(player, 'ridge3') ? player.color : false,
                   ridge4: playerHasRidge(player, 'ridge4') ? player.color : false };
    for (let i = 0; i < otherPlayers.length; i++) {
        let p = otherPlayers[i].player;
        if (!ridges.ridge1) {
            ridges.ridge1 = playerHasRidge(p, 'ridge1') ? p.color : false; }
        if (!ridges.ridge2) {
            ridges.ridge2 = playerHasRidge(p, 'ridge2') ? p.color : false; }
        if (!ridges.ridge3) {
            ridges.ridge3 = playerHasRidge(p, 'ridge3') ? p.color : false; }
        if (!ridges.ridge4) {
            ridges.ridge4 = playerHasRidge(p, 'ridge4') ? p.color : false; }
    }
    return ridges;
}

class FarmsContainer extends React.Component {
    render() {
        let ridges = makeRidgeLookup(this.props.player, this.props.otherPlayers);
        return (
            <GroupBox title='Farms'>
                <b>Ridges</b>:
            {ridgeNames.map((ridge, idx) => (
                <div key={idx} className={"farms-ridge player-" + ridges['ridge' + (idx + 1)]}>
                    <span>{ridge}</span>
                    <span className='num-cows'>{'(' + ((idx + 2) * 10) + ' cows)'}</span>
                </div>
            ))}
            <br />
            {this.props.otherPlayers
                 .map(p => (
                     <div key={p.player.name}>
                         <PlayerColorIcon color={p.player.color} />{'\u00A0'}
                         <b>{p.player.name}</b> <PlayerResources player={p.player} />
                         <br /> <br />
                     </div>))}
            </GroupBox>
        );
    }
}

class TradeCard extends React.Component {
    render () {
        const card = this.props.card;
        let action = (null);
        if (card.type === 'no-card') {
            action = (<span></span>);
        } else {
            action = (
                <div className='card-action'>
                    <Row>
                        <Col width="12">
                            <Button onClick={() => this.props.tradeCard(card)}>Trade Card</Button>
                        </Col>
                    </Row>
                </div>
            );
        }
        return (
            <div className='game-card'>
                <GroupBox title={card.title}>
                    <div className='card'
                         dangerouslySetInnerHTML={{__html: card.contents}} />
                    {action}
                </GroupBox>
            </div>
        );
    }
}

const makeEmptyCard = () => { return { type: 'no-card', contents: '', total: 0, id: -1 }; }

class TradeCards extends React.Component {
    state = {
        selectedCard: makeEmptyCard()
    }

    componentDidMount() {
        if (this.props.player.cards.length > 0) {
            this.setState({ selectedCard: this.props.player.cards[0] });
        }
    }

    render() {
        const { player, cardsBeingTraded } = this.props;
        const isMe = this.props.me.name === player.name;
        return (
            <>
                <CardListComp ui={player}
                              title={(
                                      <>
                                          <a onClick={this.props.goBack}>
                                              <FontAwesomeIcon icon={faArrowCircleLeft} />
                                          </a>
                                          {isMe ? (
                                               <>Your Cards</>
                                          ) : (
                                               <>{player.name}'s Cards</>
                                          )}
                                      </>
                              )}
                              visibleCards={isMe ? player.cards.filter(c => !cardsBeingTraded.includes(c.id)).map(c => c.id) :
                                            player.revealedCards.filter(c => !cardsBeingTraded.includes(c))}
                              cardId={this.state.selectedCard.id}
                              setCard={(c) => this.setState({ selectedCard: c })}
                              setCardError={() => 'nothing'}
                />
                <TradeCard card={this.state.selectedCard}
                           tradeCard={this.props.tradeCard} />
            </>
        );
    }
}

const findPlayer = (game, name) => {
    const ret = game.otherPlayers.find(p => p.player.name === name) || false;
    return ret ? ret.player : ret;
}

const playerRidgeCows = player => {
    return Object.values(player.ridges).reduce((a, b) => a + b, 0);
}

const makeDefaultToTrade = () => {
    return { hay: 0,
             grain: 0,
             fruit: 0,
             cows: 0,
             harvester: 0,
             tractor: 0,
             money: 0,
             ridge1: false,
             ridge2: false,
             ridge3: false,
             ridge4: false,
             cards: ''
    };
}


/* <Row>
 * <Col width="12">
 * <input type="text" placeholder="Cards"
 * defaultValue={toTrade.cards}
 * onChange={e => this.tradeAsset('cards', e.target.value)} />
 * </Col>
 * </Row> */

class TradeContainer extends React.Component {
    resources = [{ img: HayImg,
                   h: '120',
                   s: '100',
                   label: 'acres of Hay',
                   key: 'hay',
                   amount: 10
    }, {
        img: WheatImg,
        h: '41',
        s: '100',
        label: 'acres of Grain',
        key: 'grain',
        amount: 10
    }, {
        img: FruitImg,
        h: '0',
        s: '100',
        label: 'acres of Fruit',
        key: 'fruit',
        amount: 5
    }, {
        img: CowImg,
        h: '0',
        s: '59',
        label: 'head of Cows',
        key: 'cows',
        amount: 10
    }, {
        img: HarvesterImg,
        h: '240',
        s: '100',
        label: 'Harvesters',
        key: 'harvester',
        amount: 1
    }, {
        img: TractorImg,
        h: '240',
        s: '100',
        label: 'Tractors',
        key: 'tractor',
        amount: 1
    }, {
        icon: faDollarSign,
        h: '100',
        s: '83',
        label: 'Cash',
        key: 'money',
        amount: 1
    }];

    state = {
        otherPlayer: findPlayer(this.props.game, this.props.game.otherPlayers.length > 0 ? this.props.game.otherPlayers[0].player.name : ''),
        toTrade: makeDefaultToTrade(),
        showCards: false,
        showCardsPlayer: false,
        sendCards: [],
        receiveCards: []
    }

    selectPlayer = e => {
        this.setState({ otherPlayer: findPlayer(this.props.game, e.target.value),
                        receiveCards: [] });
    }

    componentDidUpdate(prevProps) {
        if (!this.state.otherPlayer &&
            prevProps.game.otherPlayers.length !== this.props.game.otherPlayers.length) {
            this.setState({ otherPlayer: findPlayer(this.props.game,
                                                    this.props.game.otherPlayers.length > 0 ? this.props.game.otherPlayers[0].player.name : '') });
        } else if (this.state.otherPlayer && this.state.otherPlayer !== findPlayer(this.props.game, this.state.otherPlayer.name)) {
            this.setState({ otherPlayer: findPlayer(this.props.game, this.state.otherPlayer.name),
                            receiveCards: [],
                            sendCards: [] });
        }
        if (prevProps.player.trade.originator && !this.props.player.trade.originator) {
            this.setState({ otherPlayer: findPlayer(this.props.game,
                                                    this.props.game.otherPlayers.length > 0 ? this.props.game.otherPlayers[0].player.name : ''),
                            toTrade: makeDefaultToTrade()
            });
        } else if (prevProps.player.trade.originator !== this.props.player.trade.originator) {
            const isOriginator = this.props.player.trade.originator === this.props.player.name;
            let tradeObj = {};
            if (!isOriginator) {
                Object.keys(this.props.player.trade).forEach(key => {
                    const value = this.props.player.trade[key];
                    switch (typeof value) {
                        case 'number':
                            tradeObj[key] = value * -1;
                            break;
                        case 'boolean':
                            tradeObj[key] = value;
                            break;
                        default:
                            tradeObj[key] = value;
                    }
                });
            } else {
                tradeObj = this.props.player.trade;
            }
            const cards = tradeObj.cards? tradeObj.cards.split(' ').map(i => parseInt(i)) : [],
                  myCards = this.props.player.cards.filter(c => cards.includes(c.id)),
                  myCardsIds = myCards.map(c => c.id);
            console.log(cards);
            console.log(myCards)
            const otherPlayer = findPlayer(this.props.game, isOriginator ?
                                           this.props.player.trade.player : this.props.player.trade.originator);
            this.setState({
                toTrade: {
                    ...makeDefaultToTrade(),
                    ...tradeObj,
                    money: tradeObj.money ? tradeObj.money / 1000 : 0
                },
                receiveCards: otherPlayer.cards.filter(c => cards.includes(c.id) && !myCardsIds.includes(c.id)),
                sendCards: myCards,
                otherPlayer
            });
        }
    }

    tradeClass(amount) {
        if (amount > 0) {
            return 'trade-to';
        } else if (amount < 0) {
            return 'trade-from';
        } else {
            return '';
        }
    }

    tradeAsset = (asset, amount, verbatim) => {
        this.setState(state => {
            return {
                toTrade: {
                    ...state.toTrade,
                    [asset]: (typeof amount === 'number') && !verbatim ? (state.toTrade[asset] + amount) : amount
                }
            };
        });
    }

    propose = () => {
        trade({ ...this.state.toTrade,
                cards: this.state.sendCards.map(c => c.id).concat(this.state.receiveCards.map(c => c.id)).join(' '),
                money: this.state.toTrade.money * 1000,
                player: this.state.otherPlayer.name
        })
    }

    viewPlayerCards = (e, player) => {
        e.preventDefault();
        this.setState(state => {
            return { showCards: !state.showCards,
                     showCardsPlayer: player };
        });
    }

    tradeCard = (card) => {
        if (this.props.player === this.state.showCardsPlayer) {
            this.setState({ sendCards: [...this.state.sendCards, card],
                            showCards: false });
        } else {
            this.setState({ receiveCards: [...this.state.receiveCards, card],
                            showCards: false });
        }
    }

    unTradeCard = (id) => {
        this.setState({ sendCards: this.state.sendCards.filter(c => c.id !== id),
                        receiveCards: this.state.receiveCards.filter(c => c.id !== id) });
    }

    render() {
        const player = this.props.player,
              otherPlayer = this.state.otherPlayer,
              toTrade = this.state.toTrade,
              tradeProposed = !!player.trade.originator;
        return (
            <GroupBox title='Trade'>
                {this.state.showCards ? (
                     <TradeCards player={this.state.showCardsPlayer}
                                 me={player}
                                 tradeCard={this.tradeCard}
                                 goBack={this.viewPlayerCards}
                                 cardsBeingTraded={this.state.sendCards.map(c => c.id).concat(this.state.receiveCards.map(c => c.id))}
                     />
                ) : (
                     <>
                         <Row>
                             <Col width="12">
                                 <div className="trade-player-container">
                                     <h4>
                                         {player.name}
                                         {player.cards.length > 0 ? (
                                              <>
                                                  {' - '}
                                                  <a onClick={e => this.viewPlayerCards(e, player)}>
                                                      <FontAwesomeIcon icon={faWindowRestore} /> Trade Cards
                                                  </a>
                                              </>
                                         ) : (<></>)}
                                     </h4>
                                     {Object.keys(player.ridges).map((ridge, idx) => (
                                         <Fragment key={'player-trade' + ridge}>
                                             {!tradeProposed && (player.ridges[ridge] > 0) && !toTrade[ridge] ? (
                                                  <Button className="tiny"
                                                          onClick={() => this.tradeAsset(ridge, player.ridges[ridge], true)}>
                                                      <FontAwesomeIcon icon={faArrowDown} /> {ridgeNames[idx]} {'('}{player.ridges[ridge]} cows{')'}
                                                  </Button>
                                             ) : (<></>)}
                                             {' '}
                                         </Fragment>
                                     ))}
                                     <div className='resource-unit-container'>
                                         {this.resources.map((o, i) => {
                                              let amount = o.key === 'money' ? Math.floor(player.cash / 1000) : player.assets[o.key];
                                              if (o.key === 'cows') { amount = player.assets.cows - playerRidgeCows(player); }
                                              return (
                                                  <ResourceUnit img={o.img ? o.img : false} h={o.h} s={o.s} label={o.label}
                                                                key={i}
                                                                className={o.key === 'money' ? 'double-width' : false}
                                                                amount={amount + Math.min(0, toTrade[o.key])}
                                                      >
                                                      {o.icon ? (
                                                           <>
                                                               <FontAwesomeIcon icon={o.icon} />(K)
                                                               <br />
                                                           </>
                                                      ) : ''}
                                                      {amount + Math.min(0, toTrade[o.key])}
                                                      {o.icon ? (<br />) : ''}
                                                      {!tradeProposed && ((amount + Math.min(0, toTrade[o.key])) > 0 || toTrade[o.key] > 0) ? (
                                                           <>
                                                               <Button className="tiny"
                                                                       onClick={() => this.tradeAsset(o.key, o.amount * -1)}>
                                                                   <FontAwesomeIcon icon={faArrowDown} />
                                                               </Button>
                                                               {o.key === 'money' && (amount + Math.min(0, toTrade[o.key])) >= 10 ? (
                                                                    <Button className="tiny"
                                                                            onClick={() => this.tradeAsset(o.key, o.amount * -10)}>
                                                                        <FontAwesomeIcon icon={faArrowDown} />
                                                                        <FontAwesomeIcon icon={faArrowDown} />
                                                                    </Button>
                                                               ) : ''}
                                                           </>
                                                      ) : (<></>)}
                                                  </ResourceUnit>
                                              );
                                         })}
                                     </div>
                                 </div>
                             </Col>
                         </Row>
                         <Row>
                             <Col width="12">
                                 {Object.keys(otherPlayer ? otherPlayer.ridges : []).map((ridge, idx) => (
                                     <Fragment key={'to-trade' + ridge}>
                                         {(otherPlayer.ridges[ridge] > 0) && toTrade[ridge] ? (
                                              <Button className="tiny"
                                                      onClick={() => this.tradeAsset(ridge, false)}>
                                                  <FontAwesomeIcon icon={faArrowDown} /> {ridgeNames[idx]} {'('}{otherPlayer.ridges[ridge]} cows{')'}
                                              </Button>
                                         ) : (<></>)}
                                         {' '}
                                     </Fragment>
                                 ))}
                                 {this.state.receiveCards.map((card, idx) => (
                                     <Button className="tiny"
                                             key={idx}
                                             onClick={() => this.unTradeCard(card.id)}>
                                         {card.summary}
                                     </Button>
                                 ))}
                             </Col>
                         </Row>
                         <Row>
                             <Col width="12">
                                 <div className='resource-unit-container resources-to-trade'>
                                     {this.resources.map((o, i) => (
                                         <ResourceUnit h={o.h} s={o.s} label={o.label}
                                                       key={i}
                                                       className={(this.tradeClass(toTrade[o.key])) + (o.key === 'money' ? ' double-width' : '')}
                                                       amount={toTrade[o.key]}
                                             >
                                             {Math.abs(toTrade[o.key])}
                                         </ResourceUnit>
                                     ))}
                                 </div>
                             </Col>
                         </Row>
                         <Row>
                             <Col width="12">
                                 {Object.keys(player.ridges).map((ridge, idx) => (
                                     <Fragment key={'to-trade' + ridge}>
                                         {(player.ridges[ridge] > 0) && toTrade[ridge] ? (
                                              <Button className="tiny"
                                                      onClick={() => this.tradeAsset(ridge, false)}>
                                                  <FontAwesomeIcon icon={faArrowUp} /> {ridgeNames[idx]} {'('}{player.ridges[ridge]} cows{')'}
                                              </Button>
                                         ) : (<></>)}
                                         {' '}
                                     </Fragment>
                                 ))}
                                 {this.state.sendCards.map((card, idx) => (
                                     <Button className="tiny"
                                             key={idx}
                                             onClick={() => this.unTradeCard(card.id)}>
                                         {card.summary}
                                     </Button>
                                 ))}
                             </Col>
                         </Row>
                         <Row>
                             <Col width="12">
                                 <div className="trade-player-container">
                                     {otherPlayer ? (
                                          <div className='resource-unit-container'>
                                              {this.resources.map((o, i) => {
                                                   let amount = o.key === 'money' ? 99 : otherPlayer.assets[o.key];
                                                   if (o.key === 'cows') { amount = otherPlayer.assets.cows - playerRidgeCows(otherPlayer); }
                                                   return (
                                                       <ResourceUnit img={o.img ? o.img : false} h={o.h} s={o.s} label={o.label}
                                                                     key={i}
                                                                     className={o.key === 'money' ? 'double-width' : false}
                                                                     amount={amount - Math.max(0, toTrade[o.key])}
                                                           >
                                                           {o.icon ? (
                                                                <>
                                                                    <FontAwesomeIcon icon={o.icon} />(K)
                                                                    <br />
                                                                </>
                                                           ) : ''}
                                                           {amount - Math.max(0, toTrade[o.key])}
                                                           {o.icon ? (<br />) : ''}
                                                           {!tradeProposed && ((amount - Math.max(0, toTrade[o.key])) > 0 || toTrade[o.key] < 0) ? (
                                                                <>
                                                                    <Button className="tiny"
                                                                            onClick={() => this.tradeAsset(o.key, o.amount)}>
                                                                        <FontAwesomeIcon icon={faArrowUp} />
                                                                    </Button>
                                                                    {o.key === 'money' && (amount - Math.min(0, toTrade[o.key])) >= 10 ? (
                                                                         <Button className="tiny"
                                                                                 onClick={() => this.tradeAsset(o.key, o.amount * 10)}>
                                                                             <FontAwesomeIcon icon={faArrowUp} />
                                                                             <FontAwesomeIcon icon={faArrowUp} />
                                                                         </Button>
                                                                    ) : ''}
                                                                </>
                                                           ) : (<></>)}
                                                       </ResourceUnit>
                                                   );
                                              })}
                                          </div>
                                     ) : (<></>)}
                                     {Object.keys(otherPlayer ? otherPlayer.ridges : []).map((ridge, idx) => (
                                         <Fragment key={'other-player-trade' + ridge}>
                                             {!tradeProposed && ((otherPlayer.ridges[ridge] > 0) && !toTrade[ridge]) ? (
                                                  <Button className="tiny"
                                                          onClick={() => this.tradeAsset(ridge, otherPlayer.ridges[ridge], true)}>
                                                      <FontAwesomeIcon icon={faArrowUp} /> {ridgeNames[idx]} {'('}{otherPlayer.ridges[ridge]} cows{')'}
                                                  </Button>
                                             ) : (<></>)}
                                             {' '}
                                         </Fragment>
                                     ))}
                                     <select onChange={this.selectPlayer}
                                             value={otherPlayer.name}>
                                         {this.props.game.otherPlayers.map(p => (
                                             <option key={p.player.name} value={p.player.name}>
                                                 {p.player.name}
                                             </option>
                                         ))}
                                     </select>
                                     {otherPlayer && otherPlayer.revealedCards.length > 0 ? (
                                          <a onClick={e => this.viewPlayerCards(e, otherPlayer)}>
                                              <FontAwesomeIcon icon={faWindowRestore} /> Trade Cards
                                          </a>
                                     ) : (<></>)}
                                 </div>
                             </Col>
                         </Row>
                         <Row>
                             <Col width="12">
                                 {player.trade.error ? (
                                      <p><b>ERROR:</b> {player.trade.error}</p>
                                 ) : (<></>)}
                                 {tradeProposed && player.trade.originator === player.name ? (
                                      <Button onClick={submitTradeCancel}>Cancel trade</Button>
                                 ) : (<></>)}
                                 {tradeProposed && player.trade.originator !== player.name ? (
                                      <>
                                          <Button onClick={submitTradeAccept}>Accept trade</Button>{' '}
                                          <Button onClick={submitTradeCancel}>Deny trade</Button>
                                      </>
                                 ) : (<></>)}
                                 {!tradeProposed ? (
                                      <Button onClick={this.propose}>Propose Trade</Button>
                                 ) : (<></>)}
                             </Col>
                         </Row>
                     </>)}
            </GroupBox>
        );
    }
}

class CCBY extends React.Component {
    render() {
        return (
            <Fragment>
                License Creative Commons <a href={`https://creativecommons.org/licenses/by/${this.props.version ? this.props.version : 3}.0/us/legalcode`}>CCBY</a>
            </Fragment>
        );
    }
}

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>
                        IndieFlower font available under the <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web&_sc=1">SIL OFLv1.1</a>. Copyright <a href="http://www.kimberlygeswein.com/">Kimberly Geswein</a>.
                    </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={VolcanoImg} /> Copyright <a href="https://thenounproject.com/Maludk/">Laymik</a> with modifications by Thomas Hintz - <CCBY />
                    </li>
                    <li>
                        <img src={CornImg} /> <img src={FruitImg} /> <img src={CakeImg} /> 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>
        );
    }
}

class Messages extends React.Component {
    render() {
        let lastTurn = -1,
            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>
                     )})}
            </div>
        );
    }
}

class Loans extends React.Component {
    constructor(props) {
        super(props);
        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 => {
        const target = e.target,
              name = e.target.name;
        let value = Math.max(0, parseInt(e.target.value));
        if (isNaN(value)) { value = 0; }
        let repay = 0,
            takeOut = 0;
        if (name === 'repay') {
            repay = value * 1000;
        } else {
            takeOut = value * 1000;
        }
        this.setState({ repay: Math.max(0, Math.floor(
            Math.min(repay, this.props.player.debt + 900, this.props.player.displayCash) / 1000)),
                        takeOut: Math.max(0, Math.floor(
                            Math.min(takeOut, this.state.maxLoan) / 1000)) });
    }

    handleSubmit = e => {
        e.preventDefault();
        loan((this.state.repay + this.state.takeOut) * (this.state.repay > 0 ? -1 : 1));
        this.setState({ repay: 0, takeOut: 0 });
    }

    handleEmergencyLoan = e => {
        e.preventDefault();
        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 ||
            this.props.game.settings.maxDebt !== prevProps.game.settings.maxDebt) {
            this.setState({ maxLoan: this.getMaxLoan(this.props) });
        }
    }

    render () {
        return (
            <GroupBox title={'Loans'}>
                <Row>
                    <Col width="4">
                        <MoneySummary title='Cash' value={this.props.player.displayCash} />
                    </Col>
                    <Col width="8">
                        <MoneySummary title='Debt' value={this.props.player.debt} max={this.props.game.settings.maxDebt} />
                    </Col>
                </Row>
                {this.props.game.settings.loanInterest > 0 ? (
                     <>
                         {'('}{this.props.game.settings.loanInterest * 100} % interest added to each loan{')'}
                         <br />
                     </>
                ) : ''}
                {this.props.player.debt >= this.props.game.settings.maxDebt ? (
                     <span className="small-text">
                         <Button onClick={this.handleEmergencyLoan} className="tiny">Emergency Loan</Button> $1,000 at 100% interest
                     </span>
                ) : (<></>)}
                <br />
                <form onSubmit={this.handleSubmit}>
                    <Row collapse='true'>
                        <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'
                                       value={this.state.repay === 0 ? '' : this.state.repay}/>
                                {'\u00A0'}K / ${Math.floor(this.props.player.debt / 1000)}K
                            </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="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'
                                       value={this.state.takeOut === 0 ? '' : this.state.takeOut} />
                                {'\u00A0'}K / ${Math.floor(this.state.maxLoan / 1000)}K
                            </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>
                </form>
            </GroupBox>
        );
    }
}

function random(max, min = 1) {
    return Math.floor(Math.random() * max) + min;
}

function decay(totalMs, decayFactorPct, ticksToGo) {
    return totalMs * Math.pow(1 - decayFactorPct, ticksToGo);
}

class Die extends React.Component {
    timerId = false;
    lastRoll = 0;
    ticks = 0;
    maxTicks = Number.MAX_SAFE_INTEGER;
    speed = { fast: 0.1, slow: 0.7 };
    interval = 100;
    acc = 0;
    trigger = 0;
    decayFactorPct = 0.4;
    showScreenTimerId = false;
    rollIndex = 0;

    constructor(props) {
        super(props);
        this.state = { num: props.roll ? this.roll() : props.num,
                       finalFace: false,
                       autoSkip: typeof props.autoSkip === 'undefined' ? false :
                                 props.autoSkip };
        this.trigger = 1000 * this.speed[props.speed ? props.speed : 'fast']
        if (props.ms) {
            this.maxTicks = Math.floor(props.ms / this.trigger);
            if (props.decay) {
                this.trigger = decay(props.ms, this.decayFactorPct, this.maxTicks);
            }
        }
    }

    roll() {
        if (!this.props.rolls) {
            let roll = random(6);
            while (roll === this.lastRoll) {
                roll = random(6);
            }
            this.lastRoll = roll;
            return roll;
        } else {
            return this.props.rolls[++this.rollIndex];
        }
    }

    tick = () => {
        let finished = false;
        return function() {
            if (!finished) {
                this.acc += this.interval;
                // update die face
                if (this.ticks < this.maxTicks && this.acc >= this.trigger) {
                    this.ticks++;
                    this.acc = 0;
                    // update trigger for decay
                    if (this.props.decay) {
                        this.trigger = decay(this.props.ms, this.decayFactorPct,
                                             this.maxTicks - this.ticks);
                    }
                    // we're finished, clear things, set final roll value
                    if (this.ticks >= this.maxTicks) {
                        finished = true;
                        clearInterval(this.timerId);
                        this.timerId = false;
                        this.setState({ num: this.props.num, finalFace: true });
                        if (this.props.showScreen) {
                            this.showScreenTimerId = setInterval(() => {
                                this.props.showScreen();
                                clearInterval(this.showScreenTimerId);
                                this.showScreenTimerId = false;
                            }, this.props.showScreenDelay);
                        }
                    } else {
                        this.setState({ num: this.roll() });
                    }
                }
            } else {
                console.log('harvest die finished but still ticking');
            }
        }
    }

    componentDidMount() {
        if (this.props.roll) {
            this.timerId = setInterval(this.tick().bind(this), this.interval);
        }
    }

    componentWillUnmount() {
        if (this.timerId) {
            clearInterval(this.timerId);
        }
        if (this.showScreenTimerId) {
            clearInterval(this.showScreenTimerId);
        }
    }

    skip(preventAutoSkip) {
        if (!preventAutoSkip) {
            skip('die');
        }
        clearInterval(this.timerId);
        this.timerId = false;
        this.setState({ num: this.props.num, finalFace: true });
        if (this.props.showScreen) {
            this.showScreenTimerId = setInterval(() => {
                this.props.showScreen();
                clearInterval(this.showScreenTimerId);
                this.showScreenTimerId = false;
            }, this.props.showScreenDelay);
        }
    }

    componentDidUpdate() {
        if (this.state.autoSkip !== this.props.autoSkip) {
            if (this.state.autoSkip === false &&
                this.props.autoSkip) {
                this.skip(true);
            }
            this.setState({ autoSkip: this.props.autoSkip });
        }
    }

    render() {
        let face;
        switch (this.state.num) {
            case 1:
                face = (<div className='die-face face-1'></div>);
                break;
            case 2:
                face = (<Fragment>
                    <div className='die-face face-21'></div>
                    <div className='die-face face-22'></div>
                </Fragment>);
                break;
            case 3:
                face = (<Fragment>
                    <div className='die-face face-21'></div>
                    <div className='die-face face-1'></div>
                    <div className='die-face face-22'></div>
                </Fragment>);
                break;
            case 4:
                face = (<Fragment>
                    <div className='die-face face-21'></div>
                    <div className='die-face face-22'></div>
                    <div className='die-face face-52'></div>
                    <div className='die-face face-54'></div>
                </Fragment>);
                break;
            case 5:
                face = (<Fragment>
                    <div className='die-face face-21'></div>
                    <div className='die-face face-1'></div>
                    <div className='die-face face-22'></div>
                    <div className='die-face face-52'></div>
                    <div className='die-face face-54'></div>
                </Fragment>);
                break;
            case 6:
                face = (<Fragment>
                    <div className='die-face face-21'></div>
                    <div className='die-face face-63'></div>
                    <div className='die-face face-64'></div>
                    <div className='die-face face-22'></div>
                    <div className='die-face face-52'></div>
                    <div className='die-face face-54'></div>
                </Fragment>);
                break;
        }
        return (
            <Fragment>
                <div className='die-container'>
                    <div className={'die' + (this.state.finalFace ? ' die-selected' : '')}>
                        {face}
                    </div>
                </div>
                {this.props.skip && !this.state.finalFace ?
                 (<div className='center'>
                     <Button className="action-item" onClick={() => this.skip()}>Skip</Button>
                 </div>) :
                 (<Fragment />)}
            </Fragment>
        );
    }
}

class PreRolling extends React.Component {
    render() {
        return (
            <GroupBox title={this.props.name + ' is rolling!'}>
                <Die roll={true} />
            </GroupBox>
        );
    }
}

class Rolling extends React.Component {
    render() {
        return (
            <GroupBox title={this.props.name + ' is rolling!'}>
                <Die decay={true} num={this.props.num} ms={2000} roll={true}
                     rolls={this.props.rolls}
                     showScreen={this.props.showScreen}
                     skip={this.props.skip}
                     autoSkip={this.props.autoSkip}
                     showScreenDelay={this.props.showScreenDelay} />
            </GroupBox>
        );
    }
}

class Harvest extends React.Component {
    cropsToImg = { hay: HayImg,
                   cherries: FruitImg,
                   wheat: WheatImg,
                   cows: CowImg,
                   fruit: FruitImg,
                   corn: CornImg }

    viewOrder = ['roll', 'income', 'operating-expense', 'expense-value', false]

    constructor(props) {
        super(props);
        this.state = { view: 'ready',
                       autoSkip: typeof props.autoSkip === 'undefined' ? false :
                                 props.autoSkip,
                       autoSkipView: false };
    }

    nameText = player => {
        return player === this.props.game.currentPlayer ? 'You' : player;
    }

    nextView = (view, preventAutoSkip) => {
        const newView = view ? view :
                        this.viewOrder[this.viewOrder.indexOf(this.state.view) + 1];
        this.setState({ view: newView });
        if (!preventAutoSkip) {
            skip('harvest|' + newView);
        }
    }

    cropToImg = crop => {
        return this.cropsToImg[crop];
    }

    componentDidUpdate() {
        if (this.props.autoSkip &&
            typeof this.props.autoSkip === 'string' &&
            this.props.autoSkip.indexOf('harvest|') === 0 &&
            this.state.autoSkipView !== this.props.autoSkip.split('|')[1]) {
            this.nextView(this.props.autoSkip.split('|')[1], true);
            this.setState({ autoSkipView: this.props.autoSkip.split('|')[1] });
        }
    }

    render() {
        let view;
        const isCurrentPlayer = this.props.player.name === this.props.game.currentPlayer;
        switch (this.state.view) {
            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>
                            {isCurrentPlayer || this.props.currentPlayer.ai ? (
                                 <Button className="action-item" onClick={() => this.nextView('roll')}>
                                     Roll for harvest!
                                 </Button>
                            ) : (<Fragment />)}
                            {this.props.harvestMult !== 1 ? (
                                 <span>Multiplied by {this.props.harvestMult}!</span>
                            ) : (<></>)}
                        </div>
                    </div>
                );
                break;
            case 'roll':
                view = (<Die decay={true} num={this.props.rolled} ms={2000} roll={true}
                             rolls={this.props.rolls}
                             showScreen={() => this.nextView('income')}
                             skip={this.props.player.name === this.props.game.currentPlayer || this.props.currentPlayer.ai}
                             autoSkip={this.props.autoSkip === 'die'}
                             showScreenDelay={showScreenDelay} />);
                break;
            case 'income':
                view = (
                    <div>
                        <div className='game-card'>
                            <div className={'flex green'}>
                                <FontAwesomeIcon icon={faDollarSign} size='6x' />
                                <div>
                                    {isCurrentPlayer ? 'You' :
                                     this.props.game.currentPlayer} rolled a <b>{this.props.rolled}</b> and earned <b>${formatMoney(this.props.income)}</b>!
                                </div>
                            </div>
                        </div>
                        {isCurrentPlayer || this.props.currentPlayer.ai ? (
                             <div className='center spacer'>
                                 <Button onClick={() => this.nextView('operating-expense')}>Draw Operating Expense</Button>
                             </div>
                        ) : (<Fragment />)}
                    </div>
                );
                break;
            case 'operating-expense':
                view = (
                    <Fragment>
                        <div className='game-card'>
                            <GroupBox title='Operating Expense'>
                                <div className='card'
                                     dangerouslySetInnerHTML={{__html: this.props.contents}} />
                            </GroupBox>
                        </div>
                        {isCurrentPlayer || this.props.currentPlayer.ai ? (
                             <div className='center spacer'>
                                 <Button className="action-item" onClick={() => this.nextView('expense-value')}>Continue</Button>
                             </div>
                        ) : (<Fragment />)}
                    </Fragment>
                );
                break;
            case 'expense-value':
                const currentExpense = this.props.expenseValue[this.props.game.currentPlayer];
                view = (
                    <div>
                        <div className='game-card'>
                            <div className={'flex ' + (currentExpense <= 0 ? 'red' : 'green')}>
                                <FontAwesomeIcon icon={faDollarSign} size='6x' />
                                <div>
                                    <p>
                                        {isCurrentPlayer ? 'You' : this.props.game.currentPlayer}
                                        {currentExpense <= 0 ? ' lost ' : ' gained '}
                                        ${formatMoney(Math.abs(currentExpense))}!
                                    </p>
                                    {Object.keys(this.props.expenseValue)
                                           .filter(p => p !== this.props.game.currentPlayer)
                                           .map((p, i) =>
                                               (
                                                   <p key={i}>
                                                       {this.nameText(p) + ' '}
                                                       {this.props.expenseValue[p] <= 0 ? 'lost ' : 'gained '}
                                                       ${formatMoney(Math.abs(this.props.expenseValue[p]))}!
                                                   </p>
                                               )
                                           )}
                                </div>
                            </div>
                        </div>
                        {isCurrentPlayer || this.props.currentPlayer.ai ?
                         (
                             <div className='center spacer'>
                                 <Button className="action-item" onClick={this.props.nextAction}>Continue</Button>
                             </div>
                         ) : (<Fragment />)}
                    </div>
                );
                break;
        }
        return view;
    }
}

class Moving extends React.Component {
    skip(preventAutoSkip) {
        if (!preventAutoSkip) {
            skip('moving');
        }
        this.props.setMovingSkip(true);
    }

    render() {
        let buttons;
        if ((this.props.player.name !== this.props.game.currentPlayer &&
             !this.props.currentPlayer.ai)) {
            buttons = (<Fragment />);
        } else if (this.props.ui.playerSpaces[(this.props.currentPlayer.ai && this.props.currentPlayer.color) || this.props.player.color]
            === this.props.ui.actionValue.to) {
            buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
        } else {
            buttons = (<Button className="action-item" onClick={() => this.skip()}>Skip</Button>);
        }
        const { currentPlayer } = this.props;
        return (
            <Row>
                <Col width={'12'}>
                    <div className='moving'>
                        <div className={'action clear-background'}>
                            <SpaceNode space={this.props.spaces[this.props.ui.playerSpaces[currentPlayer.color]]}
                                       height={'170px'} showtitle={true} />
                        </div>
                    </div>
                    <br />
                    <div className={'center'}>
                        {buttons}
                    </div>
                </Col>
            </Row>
        );
    }
}

class Action extends React.Component {
    state = {
        bertChoice: 'nothing'
    }

    setBertChoice = (e) => {
        this.setState({ bertChoice: e.target.value });
    }

    bertSubmit = (e) => {
        e.preventDefault();
        if (this.state.bertChoice === 'accept' || this.props.currentPlayer.ai) {
            buyUncleBert();
            this.props.showNextAction();
        } else if (this.state.bertChoice === 'deny') {
            this.props.showNextAction();
        }
    }

    render() {
        let view, buttons;
        const { currentPlayer } = this.props;
        switch (this.props.ui.action) {
            case 'otb':
                if (this.props.player.name === this.props.game.currentPlayer) {
                    view = (
                        <div className='game-card'>
                            <GroupBox title={itemCard}>
                                <div className='card'
                                     dangerouslySetInnerHTML={{ __html: this.props.ui.actionValue }} />
                            </GroupBox>
                        </div>
                    );
                } else {
                    view = (
                        <div>
                            <p>{currentPlayer.name} drew an {itemCard}</p>
                        </div>
                    );
                }
                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                break;
            case 'farmers-fate':
                view = (
                    <div className='game-card'>
                        <GroupBox title={fateCard}>
                            <div className='card'
                                 dangerouslySetInnerHTML={{ __html: this.props.ui.actionValue }} />
                        </GroupBox>
                    </div>
                );
                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                break;
            case 'ff-uncle-bert':
                const { cash } = this.props.player;
                const ffButtons = (
                    <>
                        {cash < 10000 ? (
                             <Button onClick={() => this.props.showScreen(SCREENS.loans)}>Raise ${formatMoney(10000 - cash)} Now</Button>
                        ) : (<></>)}
                        <form onSubmit={this.bertSubmit}>
                            <label>
                                <input type="radio" name="bert" value="accept" onClick={this.setBertChoice} />
                                Yes, take over for $10,000!
                            </label>
                            <label>
                                <input type="radio" name="bert" value="deny" onClick={this.setBertChoice} />
                                No, continue on
                            </label>
                            <Button type="submit" disabled={this.state.bertChoice === 'nothing' || this.state.bertChoice ===  'accept' && cash < 10000}>Submit</Button>
                        </form>
                    </>
                );
                const aiButton = (
                    <form onSubmit={this.bertSubmit}>
                        <Button type="submit">Continue</Button>
                    </form>
                );
                view = (
                    <GroupBox title={`Uncle Bert's inheritance`}>
                        <div className='center'>
                            <p>
                                {currentPlayer.cash >= 10000 ?
                                 `You have enough cash to take over Uncle Bert's farm!` :
                                 (
                                     <>
                                         You must raise another $
                                         {formatMoney(10000 - currentPlayer.cash) + ' '}
                                         to be able to take over Uncle Berts farm!
                                     </>
                                 )}
                            </p>
                            <div>
                                {(this.props.player.name === this.props.game.currentPlayer) ?
                                 ffButtons : (<Fragment />)}
                                {currentPlayer.ai ? aiButton : (<></>)}
                            </div>
                        </div>
                    </GroupBox>
                );
                buttons = (<Fragment />);
                break;
            case 'money':
                const { amount, player } = this.props.ui.actionValue;
                view = (
                    <div className='game-card'>
                        <div className={'flex ' + (amount < 0 ? 'red' : 'green')}>
                            <FontAwesomeIcon icon={faDollarSign} size='6x' />
                            <div>
                                {this.props.player.name === player ? 'You' :
                                 player} {amount <= 0 ? 'lost ' : 'gained '}
                                ${formatMoney(Math.abs(amount))}!
                            </div>
                        </div>
                    </div>);
                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                break;
            case 'info':
                view = (
                    <div className="game-card">
                        <p>{this.props.ui.actionValue}</p>
                    </div>
                );
                buttons = (<Button className="action-item" onClick={() => this.props.showNextAction()}>Continue</Button>);
                break;
            case 'harvest':
                view = (<Harvest rolled={this.props.ui.actionValue.rolled}
                                 rolls={this.props.ui.actionValue.rolls}
                                 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}
                                 expenseValue={this.props.ui.actionValue.operatingExpenseValue}
                                 crop={this.props.ui.actionValue.crop}
                                 acres={this.props.ui.actionValue.acres}
                                 autoSkip={this.props.ui.autoSkip}
                                 nextAction={() => this.props.showNextAction()} />);
                buttons = (<Fragment />);
                break;
            case 'move':
                view = (<Moving showNextAction={() => this.props.showNextAction()}
                                key={this.props.game.currentPlayer + '|' + this.props.ui.actionValue.from + '|' + this.props.ui.actionValue.to}
                                currentPlayer={currentPlayer}
                                player={this.props.player}
                                game={this.props.game}
                                spaces={this.props.spaces}
                                movePlayer={this.props.movePlayer}
                                autoSkip={this.props.ui.autoSkip}
                                timerId={this.props.timerId}
                                setTimerId={this.props.setTimerId}
                                setMovingSkip={this.props.setMovingSkip}
                                ui={this.props.ui} />);
                buttons = (<Fragment />);
                break;
            case 'resolve-move':
                view = (<Moving showNextAction={() => this.props.showNextAction()}
                                key={this.props.game.currentPlayer + '|' + this.props.ui.actionValue.from + '|' + this.props.ui.actionValue.to}
                                currentPlayer={currentPlayer}
                                player={this.props.player}
                                game={this.props.game}
                                spaces={this.props.spaces}
                                movePlayer={this.props.movePlayer}
                                autoSkip={this.props.ui.autoSkip}
                                timerId={this.props.timerId}
                                setTimerId={this.props.setTimerId}
                                setMovingSkip={this.props.setMovingSkip}
                                ui={this.props.ui} />);
                buttons = (<Fragment />);
                break;
            case 'goto':
                view = (<Moving showNextAction={() => this.props.showNextAction()}
                                timerId={this.props.timerId}
                                currentPlayer={currentPlayer}
                                setTimerId={this.props.setTimerId}
                                player={this.props.player}
                                game={this.props.game}
                                setMovingSkip={this.props.setMovingSkip}
                                spaces={this.props.spaces}
                                movePlayer={this.props.movePlayer}
                                autoSkip={this.props.ui.autoSkip}
                                ui={this.props.ui} />);
                buttons = (<Fragment />);
                break;
            case 'pre-rolling':
                view = (<PreRolling name={this.props.game.currentPlayer} />);
                buttons = (<Fragment />);
                break;
            case 'roll':
                const roll = this.props.ui.actionValue.to -
                             (this.props.ui.actionValue.to < this.props.ui.actionValue.from ?
                                                             this.props.ui.actionValue.from - 49 : this.props.ui.actionValue.from);
                view = (<Rolling num={roll}
                                 rolls={this.props.ui.actionValue.rolls}
                                 name={this.props.game.currentPlayer}
                                 showScreen={(this.props.player.name === this.props.game.currentPlayer ||
                                              currentPlayer.ai)
                                           ? () => this.props.showNextAction()
                                                 : false}
                                 autoSkip={this.props.ui.autoSkip}
                                 skip={(this.props.player.name === this.props.game.currentPlayer ||
                                        currentPlayer.ai)}
                                 showScreenDelay={showScreenDelay} />);
                buttons = (<Fragment />);
                break;
            default:
                if (this.props.player.name === this.props.game.currentPlayer) {
                    view = (<PlayerSummary player={this.props.player}
                                           ui={this.props.ui}
                                           screen={this.props.screen}
                                           showScreen={this.props.showScreen}
                                           game={this.props.game} />);
                } else if (currentPlayer.ai) {
                    view = (
                        <Button className="action-item" onClick={endAiTurn}>
                            Next Player's Turn
                        </Button>
                    );
                } else {
                    view = (<Fragment>Waiting for {this.props.game.currentPlayer}</Fragment>);
                }
        }
        return (
            <div ref={x => this.props.forwardRef(x)}>
                <Row>
                    <Col width={'12'}>
                        <div className={'action'}>
                            {view}
                        </div>
                        <br />
                        <div className={'center'}>
                            {(this.props.otherPlayersTurn && !currentPlayer.ai ) ? (<Fragment />) : buttons}
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

class Board extends React.Component {
    render() {
        const rh = this.props.height || '20px'; //  height={h}
        const renderSpace = (s, h, o) =>
            (<SpaceNode current={this.props.currentPlayer.color}
                        showIcons={true} space={s} key={s.key} orientation={o} />);

        return (
            <Fragment>
                <Row collapse='true' className='row-spaces'>
                    <Col width='1'>{renderSpace(this.props.spaces[0], rh, 'corner-tl')}</Col>
                    <Col width='10'>
                        <div className='flex-row'>
                            {this.props.spaces.slice(1, 14).map(s => renderSpace(s, rh, 'top'))}
                        </div>
                    </Col>
                    <Col width='1'>{renderSpace(this.props.spaces[14], rh, 'corner-tr')}</Col>
                </Row>
                <Row collapse='true' className='mid-row-container'>
                    <Col width='1'>
                        <div className='mid-col'>
                            {this.props.spaces.slice(38, 49).reverse()
                                 .map(s => renderSpace(s, this.props.height || false, 'left'))}
                        </div>
                    </Col>
                    <Col width='10'>
                        <div className='mid-row'>
                            <div className='center-board'>
                                <Row>
                                    <Col width='12 column-no-padding'>
                                        {this.props.children}
                                    </Col>
                                </Row>
                                <div className='board-heading'><h1>Alpha Centauri Farming</h1></div>
                                <Tractor />
                            </div>
                        </div>
                    </Col>
                    <Col width='1'>
                        <div className='mid-col'>
                            {this.props.spaces.slice(15, 25)
                                 .map(s => renderSpace(s, this.props.height ? (parseInt(this.props.height) * 1.11) + 'px' : false, 'right'))}
                        </div>
                    </Col>
                </Row>
                <Row collapse='true' className='row-spaces'>
                    <Col width='1'>{renderSpace(this.props.spaces[37], rh, 'corner-bl')}</Col>
                    <Col width='10'>
                        <div className='flex-row'>
                            {this.props.spaces.slice(26, 37).reverse()
                                 .map(s => renderSpace(s, rh, 'bottom'))}
                        </div>
                    </Col>
                    <Col width='1'>{renderSpace(this.props.spaces[25], rh, 'corner-br')}</Col>
                </Row>
            </Fragment>
        );
    }
}

// handler, buttonText, children
class AlertOverlay extends React.Component {
    constructor(props) {
        super(props);
        this.state = { visible: typeof this.props.visible !== 'undefined' ?
                                this.props.visible : true };
    }

    hide = e => {
        e.preventDefault();
        this.setState({ visible: false });
        this.props.alertHandled(this.props.id);
        this.props.hideHandler();
    }

    buttonClick = e => {
        this.hide(e);
        this.props.handler();
    }

    cancelButtonClick = e => {
        e.preventDefault();
        this.props.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-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>) : (<></>)}
                </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 />);
        }
    }
}

function ceilHundred(n) {
    return Math.ceil(n + (n % 100));
}

class HarvestTable extends React.Component {
    state = {
        selected: 'hay'
    }

    selectCrop = e => {
        this.setState({ selected: e.target.value });
    }

    render() {
        const table = this.props.table,
              selectedCrop = this.state.selected;
        return (
            <div className="harvest-table">
                <h4>Crop</h4>
                <select onChange={this.selectCrop} defaultValue={selectedCrop}>
                    {Object.keys(table).map((k, idx) => (
                        <option key={idx} value={k}>{k}</option>
                    ))}
                </select>
                <table>
                    <thead>
                        <tr>
                            <th>Dice</th>{table[selectedCrop].slice(1).map((x, idx) => (
                                <th key={idx}>{(idx + 1) * table[selectedCrop][0]} {selectedCrop === 'cows' ? 'COWS' : 'ACRES'}</th>
                            ))}
                        </tr>
                    </thead>
                    <tbody>
                        {table[selectedCrop].slice(1).map((mult, row) => (
                            <tr key={row}>
                                {new Array(7).fill(0).map((x, idx) => (
                                    <td key={idx}>{idx === 0 ? row + 1 : formatMoney(ceilHundred(mult * idx))}</td>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        );
    }
}

class Info extends React.Component {
    render() {
        // TODO change $250,000 to actual value in settings
        return (
            <>
                <h1>Game Instructions</h1>
                <h2>Winner</h2>
                <p>The winner is the player with the highest net worth.</p>
                <h2>Game Ending</h2>
                <p>When a player reaches a net worth of $250,000 or more they may 'Call Audit'. Once they call an audit all players continue playing until they finish their current year. Once all players have finished their last year the game is over and the player with the highest net worth is the winner.</p>
                <h2>Harvests</h2>
                <p>Harvests occur once per block on the matching asset type. For example: hay shows as green and is harvested the first time landing on a block of green spaces each time around the board.</p>
                <p>When harvesting a resource the die is first rolled then the harvest amount is calculated based on the following table and how many units of the asset you own:</p>
                {this.props.harvestTable ? (<HarvestTable table={this.props.harvestTable} />) : (<></>)}
                <p>After a harvest an Operating Expense is drawn.</p>
                <h2>Purchashing</h2>
                <p>To increase harvest amounts new assets must be bought. This is done via {itemCard} cards. Click on <FontAwesomeIcon icon={faWindowRestore} />, select the card for the asset you wish to purchase, and enter the amount of cash you desire to spend to purchase the selected asset. The remainder will be taken out in debit, if available.</p>
                <p>Purchashing may only take place on Purchashing spaces (Christmas - Spring Celebration).</p>
                <Misc />
            </>
        );
    }
}

class StartGame extends React.Component {
    render() {
        const { auditThreshold, downPayment, loanInterest, maxDebt, startingOtbs, startingCash, startingDebt } = this.props.game.settings;
        const playerName = this.props.player.name;
        const { color } = this.props.player;
        const { name, host } = this.props.game;
        return (
            <>
                <h1>Lobby</h1>
                <p>
                    <b>Game</b>: {name}
                </p>
                <h3>Players</h3>
                <ul>
                    <li><PlayerColorIcon color={color} /> {playerName}</li>
                    {this.props.game.otherPlayers.map((p, i) => (
                        <li key={i}>
                            <PlayerColorIcon color={p.player.color} /> {p.player.name}
                            {playerName === host ? (
                                 <span title="Kick Player" className="kick-player" onClick={() => kickPlayer(p.player.name)}>
                                     <FontAwesomeIcon icon={faBan} />
                                 </span>
                            ): (<></>)}
                        </li>
                    ))}
                    <li>
                        <span className="add-ai" onClick={addAIPlayer}>
                            <FontAwesomeIcon icon={faPlusCircle} />AI
                        </span>
                    </li>
                </ul>
                <h4>Game Settings</h4>
                <ul>
                    <li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li>
                    <li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li>
                    <li><b>Loan Interest</b>: {loanInterest * 100}%</li>
                    <li><b>Required Down Payment</b>: {downPayment * 100}%</li>
                    <li><b>Starting {itemCardShort}</b>: {startingOtbs}</li>
                    <li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li>
                    <li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>
                </ul>
                <label>
                    <input type="checkbox" onChange={this.props.toggleReady} />
                    Ready to start
                </label>
            </>
        );
    }
}

const SCREENS = { summary: 'summary', misc: 'misc', farms: 'farms',
                  cards: 'cards', trade: 'trade', loans: 'loans',
                  action: 'action', info: 'info', error: 'error' };

class BoardApp extends React.Component {
    iconToScreen = { user: SCREENS.summary, 'window-restore': SCREENS.cards,
                     'dollar-sign': SCREENS.loans, users: SCREENS.farms,
                     'exchange-alt': SCREENS.trade,
                     tractor: SCREENS.action, 'info-circle': SCREENS.info }
    unsubscribeAlert = () => null

    constructor(props) {
        super(props);
        this.state = {
            screen: SCREENS.summary,
            card: props.ui.card,
            timerId: false,
            currentPlayer: this.props.player,
            readyToStart: false
        };
        this.myRef = React.createRef();
        this.actionRef = React.createRef();
        this.actionRefExtra = React.createRef();
    }

    actionShowing = () => {
        window.actionRef = this.actionRef;
        window.actionRefExtra = this.actionRefExtra;
        return (this.actionRef && this.actionRef.offsetParent) ||
               (this.actionRefExtra && this.actionRefExtra.offsetParent)
    }

    showScreen = screen => {
        if (!(window.innerWidth >= 1024 && screen === SCREENS.action)) {
            this.setState({ screen: screen });
        }
    }

    setCard = card => {
        this.setState({ card });
    }

    componentDidUpdate(prevProps) {
        if (this.state.card.type === 'no-card' &&
            this.props.ui.cards.length > 0) {
            this.setState({ card: this.props.ui.cards[0] });
        } else if (this.state.card.type !== 'no-card' &&
                   this.props.ui.cards.length === 0) {
            this.setState({ card: { type: 'no-card', contents: '', total: 0 } });
        } else if (this.state.card.type !== 'no-card' &&
                   this.props.ui.cards.map(x => x.id).indexOf(this.state.card.id) < 0) {
            this.setState({ card: this.props.ui.cards[0] });
        }

        // we don't show this alert when on the actions screen so mark
        // it as handled.
        if (this.props.ui.unhandledAlert &&
            this.props.ui.unhandledAlert.type === ALERTS.beginTurn &&
            this.actionShowing()) {
            this.props.alertHandled(this.props.ui.unhandledAlert.id);
        }

        if (prevProps.game.currentPlayer !== this.props.game.currentPlayer) {
            const currentPlayer = this.props.player.name === this.props.game.currentPlayer ?
                                  this.props.player : this.props.game.otherPlayers
                                                          .find(p => p.player.name === this.props.game.currentPlayer).player;
            this.setState({ currentPlayer });
        }

        if (!prevProps.ui.exn && this.props.ui.exn) {
            this.setState({ screen: SCREENS.error });
        }
    }

    componentDidMount() {
        const currentPlayer = this.props.player.name === this.props.game.currentPlayer ?
                              this.props.player : this.props.game.otherPlayers
                                                      .find(p => p.player.name === this.props.game.currentPlayer).player;
        this.setState({ currentPlayer });
        // const midColHeight = (window.innerHeight -
        //                       (document.getElementsByClassName('flex-row')[0].offsetHeight * 2)) + 'px';
        // const midCols = document.getElementsByClassName('mid-col');
        // midCols[0].style.height = midColHeight;
        // midCols[1].style.height = midColHeight;

        // const mpDims = this.props.mpDims;
        // const minWidth = midCols[0].clientWidth;
        // const minHeight = 78 + mpDims.padding;
        // const maxHeight =
        //       midCols[0].clientHeight + minHeight - 225 - mpDims.padding;
        // const maxWidth = window.innerWidth - minWidth - 160 - mpDims.padding;
        // this.props.setMPDims(minWidth, minHeight, maxHeight, maxWidth);

        // const midRow = document.getElementsByClassName('mid-row')[0];
        // midRow.style.height = midColHeight;
        // midRow.onmouseover = () => this.props.setMessagePanelSpace(null);
    }

    setTimerId = id => {
        this.setState(state => {
            if (state.timerId) {
                clearInterval(state.timerId);
            }
            return { timerId: id }
        });
    }

    iconClass = icon => {
        return this.iconToScreen[icon] === this.state.screen ? 'is-active' :
               (this.iconToScreen[icon] === SCREENS.trade ?
                (this.props.game.settings.trade ? ' ' : ' hidden ')
              : (icon === 'tractor' ? ' hide-for-large ' : ' '));
    }

    tabClass = screen => {
        return 'tab' + (screen === this.state.screen ? ' show' : '');
    }

    iconOnClick = icon => {
        return e => {
            e.preventDefault();
            this.showScreen(this.iconToScreen[icon]);
        }
    }

    startGameToggleReady = () => {
        this.setState(state => { return { readyToStart: !state.readyToStart }; });
        readyToStart();
    }

    render() {
        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; }}>
                    <Fragment>
                        <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>
                    </Fragment>
                </AlertOverlay>
            );
        } else if (alert && alert.type === ALERTS.auditCalled) {
            alertOverlay = (
                <AlertOverlay visible={true}
                              id={alert.id}
                              alertHandled={this.props.alertHandled}
                              buttonText='Close'
                              hideHandler={() => 'nothing'}
                              handler={() => { return false; }}>
                    <Fragment>
                        <h1>Audit Called!</h1>
                        <p>{alert.contents} called an audit!</p>
                        <p>This is your last trip around the board.</p>
                    </Fragment>
                </AlertOverlay>
            );
        } else if (alert && alert.type === ALERTS.preGame) {
            alertOverlay = (
                <AlertOverlay visible={true}
                              id={alert.id}
                              alertHandled={this.props.alertHandled}
                              buttonText='Start Game'
                              hideHandler={() => 'nothing'}
                              cancelButtonText='Leave Game'
                              cancelHandler={leaveGame}
                              cancelDisabled={this.state.readyToStart}
                              preventHiding={true}
                              disabled={!this.props.game.readyToStart}
                              handler={startGame}>
                    <StartGame player={this.props.player}
                               game={this.props.game}
                               toggleReady={this.startGameToggleReady}
                    />
                </AlertOverlay>
            );
        } else if (alert && alert.type === ALERTS.proposedTrade) {
            alertOverlay = (
                <AlertOverlay visible={true}
                              id={alert.id}
                              alertHandled={this.props.alertHandled}
                              buttonText='View Trade'
                              hideHandler={() => 'nothing'}
                              handler={() => {
                                      this.showScreen(SCREENS.trade)
                              }}>
                    <Fragment>
                        <h1>{alert.contents} proposed a trade!</h1>
                    </Fragment>
                </AlertOverlay>
            );
        } else if (alert && !this.actionShowing()) {
            switch (alert.type) {
                case ALERTS.beginTurn:
                    alertOverlay = (
                        <AlertOverlay visible={true}
                                      id={alert.id}
                                      alertHandled={this.props.alertHandled}
                                      buttonText='Roll'
                                      hideHandler={() => 'nothing'}
                                      handler={() => {
                                              roll();
                                              this.showScreen(SCREENS.action); }}>
                            <h1>{`It's your turn!`}</h1>
                        </AlertOverlay>
                    );
                    break;
                case ALERTS.otherPlayersTurn:
                    alertOverlay = (
                        <AlertOverlay visible={true}
                                      id={alert.id}
                                      alertHandled={this.props.alertHandled}
                                      buttonText={'Watch ' + this.props.game.currentPlayer + `'s turn`}
                                      hideHandler={() => 'nothing'}
                                      handler={() => {
                                              this.showScreen(SCREENS.action); }}>
                            <h1>It&apos;s {this.props.game.currentPlayer}&apos;s turn</h1>
                        </AlertOverlay>
                    );
                    break;
                default:
                    alertOverlay = (<Fragment />);
            }
        } else {
            alertOverlay = (<Fragment />);
        }
        if (alert && alert.type === ALERTS.raiseMoney && !this.props.ui.action) {
            alertOverlay = (
                <AlertOverlay visible={true}
                              id={alert.id}
                              alertHandled={this.props.alertHandled}
                              buttonText='Raise Money'
                              hideHandler={() => 'nothing'}
                              handler={() => {
                                      this.showScreen(SCREENS.loans); }}>
                    <Fragment>
                        <h1>Out of cash!</h1>
                        <p>You have less than $0 cash and must raise money to continue.</p>
                    </Fragment>
                </AlertOverlay>
            );
        }
        // faExchangeAlt -> trade icon, hidden for now
        return (
            <div className='game-container' ref={this.myRef}>
                {alertOverlay}
                <Board spaces={this.props.spaces}
                       currentPlayer={this.state.currentPlayer}
                >
                    <InfoBar message={this.props.ui.message}
                             screen={this.state.screen}
                             players={this.props.game.otherPlayers} />
                    <div className='center-board-container'>
                        <ul className='horizontal menu icons icons-top'>
                            {[faUser, faTractor, faWindowRestore, faDollarSign, faUsers,  faExchangeAlt, faInfoCircle]
                                .map((icon, i) =>
                                    (<li key={i} className={this.iconClass(icon.iconName)}>
                                        <div></div>
                                        <a onClick={this.iconOnClick(icon.iconName)}>
                                            <FontAwesomeIcon icon={icon} /></a></li>))}
                        </ul>
                        <ul className='vertical menu icons icons-top'>
                            {[faUser, faTractor, faWindowRestore, faDollarSign, faUsers,  faExchangeAlt, faInfoCircle]
                                .map((icon, i) =>
                                    (<li key={i} className={this.iconClass(icon.iconName)}>
                                        <a onClick={this.iconOnClick(icon.iconName)}>
                                            <FontAwesomeIcon icon={icon} /></a></li>))}
                        </ul>
                        <div className='tab-container'>
                            <div className={this.tabClass(SCREENS.summary)}>
                                <PlayerSummary player={this.props.player}
                                               ui={this.props.ui}
                                               screen={this.state.screen}
                                               hideForLarge={true}
                                               game={this.props.game} showScreen={this.showScreen} />
                            </div>
                            <div className={this.tabClass(SCREENS.action)}>
                                <Action
                                    currentPlayer={this.state.currentPlayer}
                                    timerId={this.state.timerId}
                                    setTimerId={this.setTimerId}
                                    forwardRef={x => this.actionRef = x}
                                    spaces={this.props.spaces}
                                    player={this.props.player}
                                    game={this.props.game}
                                    movePlayer={this.props.movePlayer}
                                    showNextAction={this.props.nextUIAction}
                                    otherPlayersTurn={this.props.player.name !== this.props.game.currentPlayer}
                                    screen={this.state.screen}
                                    showScreen={screen => this.showScreen(screen)}
                                    setMovingSkip={this.props.setMovingSkip}
                                    ui={this.props.ui} />
                            </div>
                            <div className={this.tabClass(SCREENS.cards)}>
                                <Row>
                                    <Col width="12">
                                        <div>
                                            <CardList ui={this.props.ui} cardId={this.state.card.id}
                                                      setCard={this.setCard} />
                                        </div>
                                        <div>
                                            <Card ui={this.props.ui}
                                                  setCardError={this.props.setCardError}
                                                  playerCash={this.props.player.displayCash}
                                                  playerDebt={this.props.player.debt}
                                                  revealedCards={this.props.player.revealedCards}
                                                  card={this.state.card}
                                                  cost={this.state.card.total / 1000}
                                                  min={(this.state.card.total * this.props.game.settings.downPayment) / 1000}
                                                  max={Math.floor(Math.min(this.props.player.displayCash / 1000, this.state.card.total / 1000))}
                                                  cash={(this.state.card.total * this.props.game.settings.downPayment) / 1000} />
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                            <div className={this.tabClass(SCREENS.loans)}>
                                <Loans player={this.props.player} game={this.props.game} />
                            </div>
                            <div className={this.tabClass(SCREENS.farms)}>
                                <FarmsContainer player={this.props.player}
                                                otherPlayers={this.props.game.otherPlayers} />
                            </div>
                            <div className={this.tabClass(SCREENS.trade) + ' trade-tab'}>
                                <TradeContainer player={this.props.player} game={this.props.game} />
                            </div>
                            <div className={this.tabClass(SCREENS.misc)}>
                                <Misc />
                            </div>
                            <div className={this.tabClass(SCREENS.info)}>
                                <Info harvestTable={this.props.ui.harvestTable} game={this.props.game} />
                            </div>
                            <div className={this.tabClass(SCREENS.error)}>
                                <h3>Error</h3>
                                <p>A server error occured.</p>
                                <p><a href="/?reload-game=true">Reload game</a></p>
                            </div>
                        </div>
                        <div className='static-tab-container show-for-large'>
                            <div className='tab show'>
                                <Action
                                    currentPlayer={this.state.currentPlayer}
                                    timerId={this.state.timerId}
                                    setTimerId={this.setTimerId}
                                    forwardRef={x => this.actionRefExtra = x}
                                    spaces={this.props.spaces}
                                    player={this.props.player}
                                    game={this.props.game}
                                    movePlayer={this.props.movePlayer}
                                    showNextAction={this.props.nextUIAction}
                                    otherPlayersTurn={this.props.player.name !== this.props.game.currentPlayer}
                                    screen={this.state.screen}
                                    showScreen={screen => this.showScreen(screen)}
                                    setMovingSkip={this.props.setMovingSkip}
                                    ui={this.props.ui} />
                            </div>
                        </div>
                    </div>
                </Board>
            </div>
        );
    }
}

export default connect(
    state => state.farm,
    { setMessagePanelSpace, setMPDims, nextUIAction, movePlayer, alert, alertHandled,
      setCardError, setMovingSkip }
)(BoardApp)

class Card extends React.Component {
    constructor(props) {
        super(props);
        this.state = { cash: this.props.cash, initialCash: this.props.cash };
    }

    static getDerivedStateFromProps(props, state) {
        if (state.initialCash !== props.cash) {
            return {
                cash: props.cash,
                initialCash: props.cash
            }
        }
        return null;
    }

    handleInput = e => {
        const target = e.target;
        let value = Math.min(Math.max(this.props.min,
                                      parseInt(target.value)), this.props.max);
        if (isNaN(value)) { value = this.props.min; }
        this.setState({ cash: value });
        this.props.setCardError(false);
    }

    handleSubmit = e => {
        e.preventDefault();
        buy(this.props.card.id, this.state.cash);
        this.setState({ cash: 0 });
    }

    render () {
        const card = this.props.card;
        let action = (null);
        switch (card.type) {
            case 'otb': action = (
                <div className='card-action'>
                    <form onSubmit={this.handleSubmit}>
                        <Row collapse='true'>
                            <Col width='12'>
                                You: <b>Cash</b>: ${formatMoney(this.props.playerCash)} <b>Debt</b>: ${formatMoney(this.props.playerDebt)}
                            </Col>
                        </Row>
                        <Row collapse='true'>
                            <Col width='12'>
                                Buy using: ${this.state.cash}K cash ${this.props.cost - this.state.cash}K debt
                            </Col>
                        </Row>
                        <Row collapse='true'>
                            <Col width='2'>
                                <Button className='tiny'
                                        disabled={this.props.max < this.props.min}
                                        type='submit'>Buy</Button>
                            </Col>
                            <Col width='10'>
                                <div className='money'>
                                    with cash $
                                    <input id='cash-input' type='number'
                                           step='1'
                                           min='0'
                                           max={Math.floor(this.props.max)}
                                           disabled={this.props.max < this.props.min}
                                           onChange={this.handleInput}
                                           value={Math.floor(this.state.cash)} />
                                    {'\u00A0'}K
                                </div>
                            </Col>
                        </Row>
                        {this.props.ui.cardError ? (
                             <Row>
                                 <Col width="12">
                                     <span className="error">{this.props.ui.cardError}</span>
                                 </Col>
                             </Row>
                        ) : (<></>)}
                        <Row collapse='true'>
                            <Col width="12">
                                <label className="small-text">
                                    <input type="checkbox"
                                           onChange={() => toggleRevealForTrade(card.id)}
                                           checked={this.props.revealedCards.includes(card.id)} /> Reveal for trading
                                </label>
                            </Col>
                        </Row>

                    </form>
                </div>); break;
            case 'no-card': action =
                (<span></span>); break;
        }
        return (
            <div className='game-card'>
                <GroupBox title={this.props.card.title}>
                    <div className='card-id'>{card.id}</div>
                    <div className='card'
                         dangerouslySetInnerHTML={{__html: card.contents}} />
                    {this.props.hideBuying ? (<Fragment />) : action}
                </GroupBox>
            </div>
        );
    }
}

// (<option key={i}>{typeToText(c.type)}: {cropToText(c.crop)}</option>))

class CardListComp extends React.Component {
    render () {
        const typeToText = type => { switch (type) {
            case 'otb': return itemCardShort }},
              cropToText = crop => { switch (crop) {
                  case 'fruit': return '5 acres Fruit';
                  case 'grain': return '10 acres Grain'}};
        const ui = this.props.ui,
              cards = ui.cards.filter(this.props.visibleCards ? (c) => this.props.visibleCards.includes(c.id) : (c) => c),
              cardOps = cards.map((c, i) =>
                  (<li key={i} className={c.id == this.props.cardId ? 'card-select-selected' : ''}
                       onClick={() => { this.props.setCard(c); this.props.setCardError(false); }}>
                      {c.summary}
                  </li>));

        return (
            <GroupBox title={this.props.title ? this.props.title : 'Cards'}>
                <ul className='card-select'>
                    {cardOps}
                </ul>
            </GroupBox>
        );
    }
}

const CardList = connect(
    null,
    { setSelectedCard, setCardError }
)(CardListComp)
