<commit_before>import React, {Component} from 'react'
import Map from './GameMap'
import Sidebar from './Sidebar'
import PlayerActions from './PlayerActions'
import Chat from './Chat/ChatBox'
import NavBar from './NavBar'
import fire from '../../fire/index'
import WhoAmI from './WhoAmI'
import shuffle from 'shuffle-array'

const auth = fire.auth()

export default class Room extends Component {
  constructor(props) {
    super(props)
    this.state = {
      LoggedIn: false,
      numPlayers: 2
    }
  }
  componentDidMount() {
    const { numPlayers } = this.state
    this.unsubscribe = auth.onAuthStateChanged(user => {
      if (user) {
        const roles = ['Scientist', 'Generalist', 'Researcher', 'Medic', 'Dispatcher']
        const colors = [ { name: 'pink', 'hexVal': '#EB0069' },
          { name: 'blue', 'hexVal': '#00BDD8' },
          { name: 'green', 'hexVal': '#74DE00' },
          { name: 'yellow', 'hexVal': '#DEEA00' } ]
        // assign each player's a constant offset from the city depending on numPlayers
        // guarantees that markers won't render on top of each other
        const offsets = (function(nPlayers) {
          switch (nPlayers) {
          case 2: return [[-1, -1], [-1, 1]]
          case 3: return [[0, -1], [-1, 0], [0, 1]]
          case 4: return [[0, -1], [-1, -1], [-1, 1], [0, 1]]
          }
        })(numPlayers)
        const shuffledRoles = shuffle(roles)
        const shuffledColors = shuffle(colors)
        fire.database().ref(`/rooms/${this.props.match.params.roomName}/players`).set({
          [user.uid]: {
            name: user.displayName,
            role: shuffledRoles[0],
            color: shuffledColors[0],
            offset: offsets[0]
          }
        })
        this.setState({
          LoggedIn: true
        })
      }
    })
  }
  componentWillUnmount() {
    this.unsubscribe()
  }
  render() {
    let room = null
    if (this.state.LoggedIn) {
      room =
        <div>
          <div className="main">
            <div className="sidebar">
              <div><Sidebar roomName={this.props.match.params.roomName}/></div>
              <div><Chat /></div>
            </div>
            <div className="main-content">
              <NavBar roomName={this.props.match.params.roomName} />
              <Map roomName={this.props.match.params.roomName} /><commit_msg>fix: bugs on database<commit_after>import React, {Component} from 'react'
import Map from './GameMap'
import Sidebar from './Sidebar'
import PlayerActions from './PlayerActions'
import Chat from './Chat/ChatBox'
import NavBar from './NavBar'
import fire from '../../fire/index'
import WhoAmI from './WhoAmI'
import shuffle from 'shuffle-array'

const auth = fire.auth()

export default class Room extends Component {
  constructor(props) {
    super(props)
    this.state = {
      LoggedIn: false,
      numPlayers: 2
    }
  }
  componentDidMount() {
    const { numPlayers } = this.state
    this.unsubscribe = auth.onAuthStateChanged(user => {
      if (user) {
        const roles = ['Scientist', 'Generalist', 'Researcher', 'Medic', 'Dispatcher']
        const colors = [ { name: 'pink', 'hexVal': '#EB0069' },
          { name: 'blue', 'hexVal': '#00BDD8' },
          { name: 'green', 'hexVal': '#74DE00' },
          { name: 'yellow', 'hexVal': '#DEEA00' } ]
        // assign each player's a constant offset from the city depending on numPlayers
        // guarantees that markers won't render on top of each other
        const offsets = (function(nPlayers) {
          switch (nPlayers) {
          case 2: return [[-1, -1], [-1, 1]]
          case 3: return [[0, -1], [-1, 0], [0, 1]]
          case 4: return [[0, -1], [-1, -1], [-1, 1], [0, 1]]
          }
        })(numPlayers)
        // const shuffledRoles = shuffle(roles)
        // const shuffledColors = shuffle(colors)
        fire.database().ref(`/rooms/${this.props.match.params.roomName}/players`).update({
          shuffledRoles: shuffle(roles),
          shuffledColors: shuffle(colors)
        })
        fire.database().ref(`/rooms/${this.props.match.params.roomName}/players`).update({
          [user.uid]: {
            name: user.displayName
          }
        })
        fire.database().ref(`/rooms/${this.props.match.params.roomName}/players`).on('value', snapshot => {
          const myOrder = Object.keys(snapshot.val()).indexOf(user.uid)
          console.log('myOrder', myOrder)
          const myRole = snapshot.val().shuffledRoles[myOrder]
          const myColor = snapshot.val().shuffledColors[myOrder]
          fire.database().ref(`/rooms/${this.props.match.params.roomName}/players/${user.uid}`).update({
            role: myRole,
            color: myColor,
            offset: offsets[myOrder]
          })
        })
        this.setState({
          LoggedIn: true
        })
      }
    })
  }
  componentWillUnmount() {
    this.unsubscribe()
  }
  render() {
    let room = null
    if (this.state.LoggedIn) {
      room =
        <div>
          <div className="main">
            <div className="sidebar">
              <div><Sidebar roomName={this.props.match.params.roomName}/></div>
              <div><Chat /></div>
            </div>
            <div className="main-content">
              <NavBar roomName={this.props.match.params.roomName} />
              <Map roomName={this.props.match.params.roomName} />
{'fraction_non_alphanumeric': 0.155774229483847, 'fraction_numerical': 0.013553657630894913, 'mean_word_length': 2.168823529411765, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 32, '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': '5795351', 'n_tokens_mistral': 1681, 'n_tokens_neox': 1616, 'n_words': 392}