euchre-live

Euchre web-app for the socially distant family
git clone git://git.alexkarle.com/euchre-live.git
Log | Files | Refs | README | LICENSE

TrumpPicker.js (3614B) [raw]

      1 import React from 'react';
      2 import PropTypes from 'prop-types';
      3 import {Button, Dropdown} from 'carbon-components-react';
      4 
      5 const remain = { //HDSC order by Game.pm
      6     H: ['Diamonds', 'Spades', 'Clubs'],
      7     D: ['Hearts', 'Spades', 'Clubs'],
      8     S: ['Hearts', 'Diamonds', 'Clubs'],
      9     C: ['Hearts', 'Diamonds', 'Spades']
     10 }
     11 //NB usage w subs: voteOptions.order(<suit>)
     12 const voteOptions = {
     13     pass: {action: 'order', vote: 'pass'},
     14     order: suit => ({action: 'order', vote: suit, loner: 0}),
     15     alone: suit => ({action: 'order', vote: suit, loner: 1})
     16 }
     17 
     18 class TrumpPicker extends React.Component {
     19 
     20     constructor(props) {
     21         super(props);
     22         this.state = {
     23             suitPick: 'U'
     24         }
     25     };
     26 
     27     componentDidUpdate (prevProps) {
     28         const { trumpCard, phaseTwo } = this.props;
     29         if ((trumpCard != prevProps.trumpCard) || (phaseTwo != prevProps.phaseTwo)){
     30             this.setState ({
     31                 suitPick: 'U'
     32             })
     33         }
     34     }
     35 
     36     suitChange = event => {
     37         const pick = event.selectedItem;
     38         this.setState({
     39             suitPick: pick.substring(0,1)
     40         });
     41     };
     42 
     43 
     44     render () {
     45         const { trumpCard, phaseTwo, myDeal, onlyAlone, noPick, noPass, handleVote } = this.props;
     46         const { suitPick } = this.state;
     47         const trumpSuit = trumpCard ? trumpCard.substring(1) : 'U';
     48         const orderLabel = myDeal ? 'Pick up' : 'Order';
     49         const aloneLabel = myDeal ? 'Pick, Alone' : 'Order, Alone';
     50         const pickerLabels = remain[trumpSuit];
     51         const voteSuit = phaseTwo ? suitPick : trumpSuit;
     52         const orderVote = voteOptions.order(voteSuit);
     53         const aloneVote = voteOptions.alone(voteSuit);
     54         const disableOrder = phaseTwo && suitPick == 'U';
     55         return (
     56             <div id="TrumpPicker" className="trump__picker">
     57                 <div className="tp1__stack">
     58                     <Button
     59                         className="p1p__button"
     60                         kind="primary"
     61                         size="small"
     62                         disabled={noPass}
     63                         onClick={()=>{handleVote(voteOptions.pass)}}
     64                         >Pass</Button> 
     65                     {phaseTwo && (
     66                         <Dropdown
     67                         id="trump__drop"
     68                         className="trump__drop"
     69                         label="Choose Suit..."
     70                         size="sm"
     71                         itemToElement={null}
     72                         items={pickerLabels}
     73                         onChange={(event)=>this.suitChange(event)}
     74                         />
     75                     )}
     76                     <Button
     77                         className="p1o__button"
     78                         kind="primary"
     79                         size="small"
     80                         disabled={disableOrder || onlyAlone || noPick}
     81                         onClick={()=>{handleVote(orderVote)}}
     82                         >{orderLabel}</Button> 
     83                     <Button
     84                         className="p1a__button"
     85                         kind="primary"
     86                         size="small"
     87                         disabled={disableOrder || noPick}
     88                         onClick={()=>{handleVote(aloneVote)}}
     89                         >{aloneLabel}</Button> 
     90                 </div>
     91             </div>
     92         );
     93     }
     94 }
     95 TrumpPicker.propTypes = {
     96     trumpCard: PropTypes.string,
     97     phaseTwo: PropTypes.bool,
     98     myDeal: PropTypes.bool,
     99     onlyAlone: PropTypes.bool,
    100     noPick: PropTypes.bool,
    101     noPass: PropTypes.bool,
    102     handleVote: PropTypes.func,
    103 }
    104 export default TrumpPicker;