{"size": 808, "ext": "js", "max_stars_repo_path": "src/Out.js", "max_stars_repo_name": "sladwig/gammon", "max_stars_repo_stars_event_min_datetime": "2018-11-27T18:33:58.000Z", "max_stars_repo_stars_event_max_datetime": "2019-01-02T09:52:28.000Z", "max_issues_repo_path": "src/Out.js", "max_issues_repo_name": "sladwig/gammon", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Out.js", "max_forks_repo_name": "sladwig/gammon", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.7647058824, "max_line_length": 95, "alphanum_fraction": 0.573019802}
import React from 'react';
import Field from './Field';
import Token from './Token';
import playerColor from './playerColor';

class Out extends Field {
  render() {
    const { id, currentPlayer, board } = this.props;

    let color = '';
    let tokens = board[id];
    if (tokens.length > 0) {
      color = playerColor(tokens[0]);
    }
    if (id === 25) color = 'white';
    if (id === 0) color = 'black';
    tokens = tokens.map((token, index) => {
      return <Token key={index} player={token} />;
    });

    if (this.isPossibleDestination()) {
      tokens.push(<Token key={tokens.length + 1} player={currentPlayer} destination={true} />);
    }

    return (
      <div className={'out ' + color} onClick={() => this.onClick(id)}>
        {tokens}
      </div>
    );
  }
}

export default Out;
