SeatPicker.js (4002B) [raw]
1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 import {Button, Grid, Row, Column, Dropdown} from 'carbon-components-react'; 4 import {Package32, Export32, Play32} from '@carbon/icons-react'; 5 6 class SeatPicker extends React.Component { 7 8 constructor(props) { 9 super(props); 10 this.state = { 11 startDealer: -2 12 } 13 }; 14 15 allSeated = names => { 16 const matchIndex = names.findIndex(name => name == 'Empty'); 17 return matchIndex == -1; 18 }; 19 20 dealerChange = (e) => { 21 const { names } = this.props; 22 const selectIndex = names.findIndex(name => e.selectedItem == name); 23 this.setState({ 24 startDealer: selectIndex 25 }); 26 }; 27 28 tableSeat = (name, index) => { 29 const { amSpectator } = this.props; 30 const taken = name != 'Empty'; 31 const mine = index === this.props.mySeat; 32 const iAmSeated = -1 != this.props.mySeat; 33 return ( 34 <div className="table__seat"> 35 {!taken && !iAmSeated && ( 36 <Button 37 className="sit__button" 38 kind="ghost" 39 onClick={()=>{this.props.handleSit(index)}} 40 renderIcon={Package32}>Choose seat</Button> 41 )} 42 {(taken || iAmSeated) && (<div className="spName">{name}</div>)} 43 {taken && mine && !amSpectator && ( 44 <Button 45 className="stand__button" 46 kind="ghost" 47 onClick={()=>{this.props.handleStand(index)}} 48 renderIcon={Export32}>Stand</Button> 49 )} 50 </div> 51 ) 52 } 53 54 render () { 55 const { names, amSpectator } = this.props; 56 const { startDealer } = this.state; 57 // if all seats taken but mine is not 0-3 then I'm a spectator 58 const allSeated = !amSpectator && this.allSeated(names); 59 const pickerNames = names.slice(0); 60 pickerNames.unshift('Random'); 61 return ( 62 <div id="seatPicker" className="seat__picker"> 63 <Grid> 64 <Row className="sp__top"> 65 {this.tableSeat(names[2], 2)} 66 </Row> 67 <Row className="sp__mid"> 68 <Column className="spm__left"> 69 {this.tableSeat(names[1], 1)} 70 </Column> 71 <Column className="spm__right"> 72 {this.tableSeat(names[3], 3)} 73 </Column> 74 </Row> 75 <Row className="sp__bot"> 76 {this.tableSeat(names[0], 0)} 77 </Row> 78 </Grid> 79 { allSeated && ( 80 <div id="startGame" className="start__game"> 81 <Dropdown 82 id="dealer__drop" 83 className="dealer__drop" 84 label="Choose Dealer..." 85 size="xl" 86 itemToElement={null} 87 items={pickerNames} 88 onChange={(event)=>this.dealerChange(event)} 89 /> 90 <Button 91 className="start__game__button" 92 hasIconOnly={true} 93 iconDescription="set name" 94 tooltipPosition="bottom" 95 disabled={startDealer < -1} 96 onClick={()=>{this.props.handleStart(startDealer)}} 97 renderIcon={Play32}>Play! </Button> 98 </div> 99 )} 100 </div> 101 ); 102 } 103 } 104 SeatPicker.propTypes = { 105 mySeat: PropTypes.number, 106 names: PropTypes.arrayOf(PropTypes.string), 107 amSpectator: PropTypes.bool, 108 handleSit: PropTypes.func, 109 handleStand: PropTypes.func, 110 handleStart: PropTypes.func 111 } 112 export default SeatPicker;