<commit_before>import React from 'react'

import PlayerList from './PlayerList'

class PlayerInput extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      playerName: '',
      colorList: [
        {
          name: 'blue',
          used: false
        },
        {
          name: 'red',
          used: false
        },
        {
          name: 'purple',
          used: false
        },
        {
          name: 'green',
          used: false
        },
        {
          name: 'white',
          used: false
        }
      ]
    };

    this.addPlayer = this.addPlayer.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({playerName: event.target.value});
  }
  addPlayer(){
    this.props.addPlayer(this.state.playerName, 'blue')
    this.setState({playerName: ''});
  }
  render(){
    return (
      <div>
        <input type="text" value={this.state.playerName} onChange={this.handleChange} />
        <select name="" id="">
          {
            this.state.colorList.map((color, i) => {
              if (!color.used) {
                return <option value="color" key={i} defaultValue={i === 0}>{color.name}</option>
              }
            })
          }
        </select>
        <button onClick={this.addPlayer} type="button">Add Player</button>
        <PlayerList players={this.props.players}/>
      </div>
    )
  }
}

export default PlayerInput<commit_msg>a color for a player can be picked<commit_after>import React from 'react'

import PlayerList from './PlayerList'

class PlayerInput extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      playerName: '',
      selectedColor: 'blue',
      colorList: [
         'blue',
         'red',
         'purple',
         'green',
         'white'
      ]
    };

    this.addPlayer = this.addPlayer.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.selectColor = this.selectColor.bind(this)
  }
  handleChange(event) {
    this.setState({playerName: event.target.value});
  }
  selectColor(event){
    this.setState({selectedColor: event.target.value});
  }
  addPlayer(){
    this.props.addPlayer(this.state.playerName, this.state.selectedColor)
    this.setState({
      playerName: ''
    });
  }
  render(){
    return (
      <div>
        <input type="text" value={this.state.playerName} onChange={this.handleChange} />
        <select name="" id="color-select" onChange={this.selectColor} disabled={this.state.colorList.length === 0}>
          {
            this.state.colorList.map((color, i) => {
                return <option value={color} key={i} defaultValue={this.state.selectedColor === color}>{color}</option>
            })
          }
        </select>
        <button onClick={this.addPlayer} type="button" disabled={this.props.players.length >= 5}>Add Player</button>
        <PlayerList players={this.props.players}/>
      </div>
    )
  }
}

export default PlayerInput
{'fraction_non_alphanumeric': 0.1460748592249089, 'fraction_numerical': 0.0009937065253395165, 'mean_word_length': 2.1006160164271046, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 26, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6309181', 'n_tokens_mistral': 898, 'n_tokens_neox': 897, 'n_words': 160}