peddlers-of-ketran/client/src/ViewCard.js

import React, { useState, useCallback } from "react";
import "./ViewCard.css";
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Resource from './Resource.js';

const ViewCard = ({table, card}) => {
  if (!table.game.player) {
    return <></>;
  }

  const playCard = (event) => {
    table.playCard(card);
  }
  const close = (event) => {
    table.closeCard();
  };

  const capitalize = (string) => {
    if (string === 'vp') {
      return 'Victory Point';
    }
    if (string === 'army') {
      return 'Knight';
    }

    return string.charAt(0).toUpperCase() + string.slice(1);
  };

  const descriptions = {
    army: <>When played, you <b>must</b> move the robber.
      <p>Steal <b>1</b> resource card from the owner of an adjacent settlement or city.</p>
      <p>You may only play one development card during your turn -- either one
        knight or one progress card.</p></>,
    vp: <><b>1</b> victory point.
      <p>You only reveal your victory point cards when the game is over, either 
        when you or an opponent 
        reaches <b>10+</b> victory points on their turn and declares
        victory!</p></>,
    'progress-road-1': <>
      <p>Play <b>2</b> new roads as if you had just built them.</p>
      <p>This is still limited by the number of roads you have (a maximum of 15.)</p>
      <p><b>NOTE:</b> This card is not yet implemented. The server will give you <b>2</b> wood 
      and <b>2</b> brick and we trust you will use them to build <b>2</b> roads.</p>
      <p>If
      you do not have enough roads remaining, you may end up with extra resources... 
      but the game is in beta, so... be happy :)
      </p>
      <p>As an FYI, you currently have {15 - table.game.player.roads} roads remaining.</p>
      </>,
    'progress-road-2':  <>
      <p>Play <b>2</b> new roads as if you had just built them.</p>
      <p>This is still limited by the number of roads you have (a maximum of 15.)</p>
      <p><b>NOTE:</b> This card is not yet implemented. The server will give you <b>2</b> wood 
      and <b>2</b> brick and we trust you will use them to build <b>2</b> roads.</p>
      <p>If
      you do not have enough roads remaining, you may end up with extra resources... 
      but the game is in beta, so... be happy :)
      </p>
      <p>As an FYI, you currently have {15 - table.game.player.roads} roads remaining.</p>
      </>,
    'progress-monopoly': <>
      When you play this card, you will select <b>1</b> type of resource.
      All other players must give you all their resource cards of that type.
      </>,
    'progress-year-of-plenty': <>
    Take any <b>2</b> resources from the bank. Add them to your hand. They can be 
    <b>2</b> of the same resource or <b>2</b> different resources.
    <p><b>Unfortunately</b> the current implementation only lets you pick a single
    resource and you will then get <b>2</b> of those.</p>
      </>
  };

  let description;
  if (card.type == 'progress') {
    description = descriptions[`${card.type}-${card.card}`];
  } else {
    description = descriptions[card.type];
  }

  if (description === undefined) {
    console.log(`No description for ${card.type}-${card.card}`);
  }

  let canPlay = false;
  if (card.type === 'vp') {
    let points = table.game.player.points;
    table.game.player.development.forEach(item => {
      if (item.type === 'vp') {
        points++;
      }
    });
    canPlay = points >= 10;
    if (!canPlay && !card.played) {
      description = <>{description}<p>You do not have enough victory points to play this card yet.</p></>;
    }
  } else {
    canPlay = card.turn < table.game.turns;
    if (!canPlay) {
      description = <>{description}<p>You can not play this card until your next turn.</p></>;
    }
    if (canPlay) {
      canPlay = table.game.player.playedCard !== table.game.turns;
      if (!canPlay) {
        description = <>{description}<p>You have already played a development card this turn.</p></>;
      }
    }
  }
  
  if (card.played) {
    description = <>{description}<p>You have already played this card.</p></>;
    canPlay = false;
  }

  return (
    <div className="ViewCard">
      <Paper>
        <div className="Title">{capitalize(card.type)}</div>
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <Resource type={`${card.type}-${card.card}`} disabled count={1}/>
          <div className="Description">{description}</div>
        </div>
        { !card.played && 
          <Button disabled={!canPlay}
            onClick={playCard}>play</Button>
        }
        <Button onClick={close}>close</Button>
      </Paper>
    </div>
  );
};

export default ViewCard;