<commit_before>import React, { Component } from 'react';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import {Card, CardHeader, CardActions, CardText} from 'material-ui/Card';

import './Lobby.css';

const names = [
  'Wes',
  'Sarah',
  'Kevin',
  'Jason',
  'Bernard',
  'Ruby',
  'Nadine',
  'Clement',
  'Hannah',
  'Gilia',
];

class Lobby extends Component {
  constructor(props) {
    super(props);
    const randy = Math.floor((Math.random() * 1000) + 1);
    const bottle = Math.floor((Math.random() * names.length));
    const selected = names[bottle] + "x" + randy;
    
    this.state = {
      name: selected,
    };
  }

  render() {
    return (
      <div className="Lobby">
        <Card>
          <CardHeader
            title="Telephone Pictionary"
            subtitle="Create or join a game"
            style={{"width": "40vw"}}
          />
          <CardText>
            <TextField
              hintText="Your Name"
              defaultValue={this.state.name}
            />
          </CardText>
          <CardActions>
            <FlatButton label="Create Game" />
            <FlatButton label="Join Game" />
          </CardActions>
        </Card>
      </div><commit_msg>Implement fetch to grab createroom (suggestion though: api/createroom should be a POST request, not a GET)<commit_after>import React, { Component } from 'react';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import {Card, CardHeader, CardActions, CardText} from 'material-ui/Card';

import './Lobby.css';

const names = [
  'Wes',
  'Sarah',
  'Kevin',
  'Jason',
  'Bernard',
  'Ruby',
  'Nadine',
  'Clement',
  'Hannah',
  'Gilia',
];

class Lobby extends Component {
  constructor(props) {
    super(props);
    const randy = Math.floor((Math.random() * 1000) + 1);
    const bottle = Math.floor((Math.random() * names.length));
    const selected = names[bottle] + "x" + randy;
    
    this.state = {
      name: selected,
    };
  }

  create() {
    fetch('/api/createroom', {
      accept: 'application/json',
    }).then(response => {
      return response.json();
    }).then(response => {
      console.log(response);
      this.setState({
        id: response
      })
    });
  }

  render() {
    return (
      <div className="Lobby">
        <Card>
          <CardHeader
            title="Telephone Pictionary"
            subtitle="Create or join a game"
            style={{"width": "40vw"}}
          />
          <CardText>
            <TextField
              hintText="Your Name"
              defaultValue={this.state.name}
            />
          </CardText>
          <CardActions>
            <FlatButton 
              onClick={this.create.bind(this)}
              label="Create Game"
            />
            <FlatButton 
              label="Join Game" 
            />
          </CardActions>
        </Card>
      </div>
{'fraction_non_alphanumeric': 0.14468802698145025, 'fraction_numerical': 0.004721753794266442, 'mean_word_length': 1.9989888776541962, 'pattern_counts': {'":': 2, '<': 27, '<?xml version=': 0, '>': 29, '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': '2053384', 'n_tokens_mistral': 934, 'n_tokens_neox': 899, 'n_words': 203}