<commit_before>import React, { Component, PropTypes } from 'react';
import board from '../../chess/board';
import './ChessBoard.css';
import './themes/tournament.css';

const LETTERS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
const NUMBERS = [8, 7, 6, 5, 4, 3, 2, 1];

class ChessBoard extends Component {

  render() {
    const { size, theme } = this.props;
    const gutterIdeal = size / 18;
    const gutter = (gutterIdeal < 12) ? 0 : gutterIdeal;
    const square = (size - gutter * 2) / 8;
    const boardSize = (gutter === 0) ? 'small' : 'large';
    const style = {
      width: `${size}px`,
      height: `${size}px`,
    };
    const className = `chess-board ${theme || ''} ${boardSize}`;
    return (
      <div className={className} style={style}>
        <table>
          <tbody>
            {this.renderRows(gutter, square)}
          </tbody>
        </table>
      </div>
    );
  }

  renderRows(gutter, square) {
    const rows = Array(8).fill().map((blank, index) => {
      const style = { height: `${square}px` };
      return (
        <tr key={index} style={style}>
          {this.renderNumberGutter(index, gutter, square)}
          {this.renderSquares(square, index)}
          {this.renderNumberGutter(index, gutter, square)}
        </tr>
      );
    });
    rows.unshift(this.renderLetterGutter(gutter, square, 'letters-top'));
    rows.push(this.renderLetterGutter(gutter, square, 'letters-bot'));
    return rows;
  }

  renderNumberGutter(index, gutter, square) {
    if (gutter === 0) {
      return null;
    }
    const style = {
      width: `${gutter}px`,
      fontSize: `${gutter * 0.5}px`,
    };
    return <td className="grid-number" style={style}>{NUMBERS[index]}</td>;
  }

  renderLetterGutter(gutter, square, key) {
    if (gutter === 0) {
      return null;
    }
    const styleTr = { height: `${gutter}px` };
    const styleLetter = { fontSize: `${gutter * 0.5}px` };
    const td = LETTERS.map(letter => {
      return (
        <td className="grid-letter" style={styleLetter} key={letter}>
          {letter}
        </td>
      );
    });
    return (
      <tr key={key} style={styleTr}>
        <td className="grid-empty"></td>
        {td}
      </tr>
    );
  }

  renderSquares(square, rowIndex) {
    const style = { width: `${square}px`, height: `${square}px` };
    const row = 8 - rowIndex;
    const position = this.props.position;
    const td = [];
    for (let i = 0; i < 8; i++) {
      const block = `${LETTERS[i]}${row}`;
      const active = '';
      const highlight = '';
      // const active = (block === 'a8' || block === 'b8' || block === 'a1' || block === 'b1') ? 'active' : '';
      // const highlight = (block === 'b7' || block === 'c7' || block === 'b2' || block === 'c2') ? 'highlight' : '';
      const color = position[block].light ? 'light' : 'dark';
      const className = `board-square ${color}-square ${block} ${highlight} ${active}`;
      const piece = position[block].piece;
      td.push(
        <td className={className} style={style} key={block}>
          <button className="chess-block-hit"
            onMouseDown={this.onSquareDown.bind(this)}
            data-block={block}>
            {this.renderPiece(piece, square)}
          </button>
        </td>
      );
    }
    return td;
  }

  renderPiece(piece, square) {
    const style = { fontSize: `${square * 0.9}px` };
    return (
      <span
        className={`chess-piece ${piece}`}
        style={style}  />
    );
  }

  onSquareDown(event) {
    const block = event.target.getAttribute('data-block');
    console.log(block);
    console.log(event.target)
    window.addEventListener('mouseup', this.onSquareUp, false);
    event.preventDefault();
  }

  onSquareUp(event) {
    console.log('UP')
    window.removeEventListener('mouseup', this.onSquareUp, false);
    event.preventDefault();
  }

  componentWillUnmount() {
    window.removeEventListener('mouseup', this.onSquareUp, false);
  }
}

ChessBoard.propTypes = {
  size: PropTypes.number,
  theme: PropTypes.string,
  position: PropTypes.object
};

ChessBoard.defaultProps = {
  size: 480,
  theme: null,
  position: board
};

export default ChessBoard;
<commit_msg>set up simple mouse events<commit_after>import React, { Component, PropTypes } from 'react';
import board from '../../chess/board';
import './ChessBoard.css';
import './themes/tournament.css';

const LETTERS = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
const NUMBERS = [8, 7, 6, 5, 4, 3, 2, 1];

class ChessBoard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      active: false
    };
  }

  render() {
    const { size, theme } = this.props;
    const gutterIdeal = size / 18;
    const gutter = (gutterIdeal < 12) ? 0 : gutterIdeal;
    const square = (size - gutter * 2) / 8;
    const boardSize = (gutter === 0) ? 'small' : 'large';
    const style = {
      width: `${size}px`,
      height: `${size}px`,
    };
    const className = `chess-board ${theme || ''} ${boardSize}`;
    return (
      <div className={className} style={style}>
        <table>
          <tbody>
            {this.renderRows(gutter, square)}
          </tbody>
        </table>
      </div>
    );
  }

  renderRows(gutter, square) {
    const rows = Array(8).fill().map((blank, index) => {
      const style = { height: `${square}px` };
      return (
        <tr key={index} style={style}>
          {this.renderNumberGutter(index, gutter, square)}
          {this.renderSquares(square, index)}
          {this.renderNumberGutter(index, gutter, square)}
        </tr>
      );
    });
    rows.unshift(this.renderLetterGutter(gutter, square, 'letters-top'));
    rows.push(this.renderLetterGutter(gutter, square, 'letters-bot'));
    return rows;
  }

  renderNumberGutter(index, gutter, square) {
    if (gutter === 0) {
      return null;
    }
    const style = {
      width: `${gutter}px`,
      fontSize: `${gutter * 0.5}px`,
    };
    return <td className="grid-number" style={style}>{NUMBERS[index]}</td>;
  }

  renderLetterGutter(gutter, square, key) {
    if (gutter === 0) {
      return null;
    }
    const styleTr = { height: `${gutter}px` };
    const styleLetter = { fontSize: `${gutter * 0.5}px` };
    const td = LETTERS.map(letter => {
      return (
        <td className="grid-letter" style={styleLetter} key={letter}>
          {letter}
        </td>
      );
    });
    return (
      <tr key={key} style={styleTr}>
        <td className="grid-empty"></td>
        {td}
      </tr>
    );
  }

  renderSquares(square, rowIndex) {
    const style = { width: `${square}px`, height: `${square}px` };
    const row = 8 - rowIndex;
    const position = this.props.position;
    const td = [];
    for (let i = 0; i < 8; i++) {
      const block = `${LETTERS[i]}${row}`;
      const active = '';
      const highlight = '';
      // const active = (block === 'a8' || block === 'b8' || block === 'a1' || block === 'b1') ? 'active' : '';
      // const highlight = (block === 'b7' || block === 'c7' || block === 'b2' || block === 'c2') ? 'highlight' : '';
      const color = position[block].light ? 'light' : 'dark';
      const className = `board-square ${color}-square ${block} ${highlight} ${active}`;
      const piece = position[block].piece;
      td.push(
        <td className={className} style={style} key={block}>
          <button className="chess-block-hit"
            onMouseDown={this.onSquareDown.bind(this)}
            onMouseEnter={this.onSquareEnter.bind(this)}
            onMouseLeave={this.onSquareLeave.bind(this)}
            data-block={block}>
            {this.renderPiece(piece, square)}
          </button>
        </td>
      );
    }
    return td;
  }

  renderPiece(piece, square) {
    const style = { fontSize: `${square * 0.9}px` };
    return (
      <span
        className={`chess-piece ${piece}`}
        style={style}  />
    );
  }

  onSquareDown(event) {
    const block = event.target.getAttribute('data-block');
    console.log(block);
    this.setState({ active: true });
    window.addEventListener('mouseup', this.onSquareUp.bind(this), false);
    event.preventDefault();
  }

  onSquareEnter(event) {
    if (this.state.active) {
      const block = event.target.getAttribute('data-block');
      console.log('mouse:enter:', block);
    }
  }

  onSquareLeave(event) {
    if (this.state.active) {
      const block = event.target.getAttribute('data-block');
      console.log('mouse:leave:', block);
    }
  }

  onSquareUp(event) {
    console.log('UP')
    this.setState({ active: false });
    window.removeEventListener('mouseup', this.onSquareUp.bind(this), false);
    event.preventDefault();
  }

  componentWillUnmount() {
    window.removeEventListener('mouseup', this.onSquareUp, false);
  }
}

ChessBoard.propTypes = {
  size: PropTypes.number,
  theme: PropTypes.string,
  position: PropTypes.object
};

ChessBoard.defaultProps = {
  size: 480,
  theme: null,
  position: board
};

export default ChessBoard;

{'fraction_non_alphanumeric': 0.17873805820928682, 'fraction_numerical': 0.008664741168629194, 'mean_word_length': 2.595447284345048, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 49, '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': '1989803', 'n_tokens_mistral': 3035, 'n_tokens_neox': 2967, 'n_words': 640}