<commit_before>import React, { Component } from 'react';
import R from 'ramda';

import seedRandom from 'seedrandom';

import './board.scss';
import tableTemplate from './__fixtures__/base-table';

import Tile from '../tile/tile';
import TileRow from 'Components/tile-row/TileRow';

export default class Board extends Component {
  constructor (props) {
    super(props);

    this.state = {
      seed: Math.ceil(999999999 * Math.random()),
      possibleSeed: null,
      tableHeader: ['', 'COL 1', 'COL 2', 'COL 3', 'COL 4', 'COL 5'],
      board: tableTemplate,
      cardType: 'normal'
    };
  }

  componentDidMount() {
    this.populate(this.state.seed);
  }

  populate(seed) {
    let rng = seedRandom(seed);
    let template = tableTemplate;
    let newBoard = [];
    let selectedMilestone;

    template.map(() => {
      selectedMilestone = template[Math.floor(template.length * rng())];
      newBoard.push(selectedMilestone);
      template = template.filter((elem) => {
        if (template.length > 1) {
          return elem !== selectedMilestone;
        } else {
          return elem;
        }
      });
    });

    this.setState({board: newBoard});
  }

  handleChange(e) {
    this.setState({possibleSeed: parseInt(e.target.value)});
  }

  generateNewSeed() {
    this.setState({seed: this.state.possibleSeed});
    this.populate(this.state.possibleSeed);
  }

  createHeader() {
    return this.state.tableHeader.map((col, index) => {
      return (
        <Tile title={col} key={index}/>
      );
    });
  }

  createRows() {
    return R.splitEvery(5, this.state.board).map((row, rowIndex) => {
      return (
        <TileRow rowIndex={rowIndex} tiles={row} key={rowIndex}/>
      );
    });
  }

  render () {
    return (
      <div className="container">
          <div className="bingoPage">
              <div className="about">
                  <h2 className="title is-3">Generate a new card</h2>
                  <div className="content">
                      <p>
                          Create a new card based on seed.
                      </p>
                      <p>
                          The seed is used to generate the board. Changing the seed will make a new board.
                      </p>
                  </div>
                  <div className="field">
                      <label className="label">Seed</label>
                      <p className="control">
                          <input className="input" type="text" name="seed" placeholder="Leave blank for random seed" onChange={this.handleChange.bind(this)}/>
                      </p><commit_msg>make input only accept numbers<commit_after>import React, { Component } from 'react';
import R from 'ramda';

import seedRandom from 'seedrandom';

import './board.scss';
import tableTemplate from './__fixtures__/base-table';

import Tile from '../tile/tile';
import TileRow from 'Components/tile-row/TileRow';

export default class Board extends Component {
  constructor (props) {
    super(props);

    this.state = {
      seed: Math.ceil(999999999 * Math.random()),
      possibleSeed: null,
      tableHeader: ['', 'COL 1', 'COL 2', 'COL 3', 'COL 4', 'COL 5'],
      board: tableTemplate,
      cardType: 'normal'
    };
  }

  componentDidMount() {
    this.populate(this.state.seed);
  }

  populate(seed) {
    let rng = seedRandom(seed);
    let template = tableTemplate;
    let newBoard = [];
    let selectedMilestone;

    template.map(() => {
      selectedMilestone = template[Math.floor(template.length * rng())];
      newBoard.push(selectedMilestone);
      template = template.filter((elem) => {
        if (template.length > 1) {
          return elem !== selectedMilestone;
        } else {
          return elem;
        }
      });
    });

    this.setState({board: newBoard});
  }

  handleChange(e) {
    this.setState({possibleSeed: parseInt(e.target.value)});
  }

  generateNewSeed() {
    this.setState({seed: this.state.possibleSeed});
    this.populate(this.state.possibleSeed);
  }

  createHeader() {
    return this.state.tableHeader.map((col, index) => {
      return (
        <Tile title={col} key={index}/>
      );
    });
  }

  createRows() {
    return R.splitEvery(5, this.state.board).map((row, rowIndex) => {
      return (
        <TileRow rowIndex={rowIndex} tiles={row} key={rowIndex}/>
      );
    });
  }

  render () {
    return (
      <div className="container">
          <div className="bingoPage">
              <div className="about">
                  <h2 className="title is-3">Generate a new card</h2>
                  <div className="content">
                      <p>
                          Create a new card based on seed.
                      </p>
                      <p>
                          The seed is used to generate the board. Changing the seed will make a new board.
                      </p>
                  </div>
                  <div className="field">
                      <label className="label">Seed</label>
                      <p className="control">
                          <input className="input" type="number" name="seed" placeholder="Leave blank for random seed" onChange={this.handleChange.bind(this)}/>
                      </p>
{'fraction_non_alphanumeric': 0.1378917378917379, 'fraction_numerical': 0.007217473884140551, 'mean_word_length': 1.993746446844798, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, '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': '2211262', 'n_tokens_mistral': 1540, 'n_tokens_neox': 1479, 'n_words': 351}