euchre-live

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

Lobby.js (4327B) [raw]

      1 import React from 'react';
      2 import PropTypes from 'prop-types';
      3 import {Button, TextInput} from 'carbon-components-react';
      4 import {Login32, CheckmarkOutline32} from '@carbon/icons-react';
      5 import TableList from './TableList';
      6 
      7 export default class Lobby extends React.Component {
      8 
      9     constructor(props) {
     10         super(props);
     11         this.state = {
     12             nameIn: '',
     13             nameError: false,
     14             tableIn: '',
     15             tableError: false
     16         }
     17     }
     18 
     19     componentDidMount () {
     20         if (this.nameText) {
     21             this.nameText.focus();
     22             this.nameText.onkeydown = this.checkKey;
     23         }
     24     }
     25 
     26     componentDidUpdate (prevProps) {
     27         const { name } = this.props;
     28         if (name && (name != prevProps.name)){
     29             this.setButton.blur();
     30         }
     31     }
     32 
     33     checkKey = event => {
     34         const code = event.keyCode || event.which;
     35         if (code == 13) {
     36             const { nameIn } = this.state;
     37             if (nameIn != ''){
     38                 this.props.setName(nameIn);
     39                 this.nameText.blur();
     40             }
     41         }
     42     }
     43 
     44     handlePlayerIn = event => {
     45         const value = event.target.value;
     46         const error = this.checkName(value);
     47         this.setState({
     48             nameIn: value,
     49             nameError: error
     50         });
     51     }
     52 
     53     handleTableIn = event => {
     54         const value = event.target.value;
     55         const error = this.checkName(value);
     56         this.setState({
     57             tableIn: value,
     58             tableError: error
     59         });
     60     }
     61 
     62     checkName = name => {
     63         //TODO replace w real pattern match
     64         return name.includes("<");
     65     }
     66 
     67     render () {
     68         const {name, uniqueError, tableList} = this.props;
     69         const {nameIn, nameError, tableIn, tableError} = this.state;
     70         return (
     71             <div id="lobby" className="lobby__outer">
     72                 <h2>Welcome to the Lobby</h2>
     73                 {!name &&
     74                 <p>First tell us the name that you'll be using for this game...</p>
     75                 }
     76                 <div className="textRow">
     77                     <TextInput
     78                         id="lobby__name"
     79                         className="lobby__name__input"
     80                         placeholder="Name to display at table"
     81                         size="xl"
     82                         labelText=""
     83                         invalidText="Sorry, letters A-Z a-z and spaces only"
     84                         invalid={nameError}
     85                         onChange={this.handlePlayerIn}
     86                         ref={(input) => {this.nameText = input;}}
     87                     />
     88                     <Button
     89                         className="name__button"
     90                         hasIconOnly={true}
     91                         onClick={()=>this.props.setName(nameIn)}
     92                         renderIcon={CheckmarkOutline32}
     93                         iconDescription="set name"
     94                         tooltipPosition="bottom"
     95                         disabled={nameError}
     96                         ref={(button) => {this.setButton = button;}}
     97                     />
     98                 </div>
     99                 <br/><br/>
    100                 {name && (
    101                 <div>
    102                     <h3>Welcome, {name}!</h3>
    103                     <p>You can change that name if you wish by entering a new one above.</p>
    104                     <br/><br/>
    105                     <div>
    106                         <TableList
    107                             tables={tableList}
    108                             playerName={name}
    109                             joinTable={this.props.joinTable}
    110                             refresh={this.props.refreshTables}
    111                         />
    112                     </div>
    113                 </div>
    114                 
    115                 )}
    116                 {uniqueError && (
    117                 <div className="unique__error">
    118                     <h3>Hmm, a player named {name} is at the table...</h3>
    119                     <p>You need a unique player name, which you can change in the top input above.</p>
    120                 </div>
    121                 )}
    122             </div>
    123         );
    124     };
    125 }
    126 
    127 Lobby.propTypes = {
    128     setName: PropTypes.func,
    129     joinTable: PropTypes.func,
    130     name: PropTypes.string,
    131     uniqueError: PropTypes.bool,
    132     tableList: PropTypes.array,
    133     refreshTables: PropTypes.func,
    134     createTable: PropTypes.func
    135 }