<commit_before>import game from './scripts/game'
import _ from 'lodash'
import $ from 'jquery'
import io from 'socket.io-client'

// Initialize the game
const tictac = game({ size: 3 })

let room = 123

// Socket
let socket = io('http://localhost:3000');
socket.emit('hello!')
// Render boxes
const render = ($board) => {
  return ({ board }) => {
    // Update general UI
    $('#game').show()
    $('#start').hide()

    // Update boxes
    const letter = { 1: 'X', 2: 'O' }
    return _.flatMap(board, (xa, x) => {
      return xa.map((player, y) => {
        const $field = $(`.box[data-x=${x}][data-y=${y}]`)
        if ($field.length) {
          $field.text(letter[player])
        } else {
          return $board.append(`<div class="box" data-x="${x}" data-y="${y}"></div>`)
        }
      })
    })
  }
}

const send = (state) => {
  socket.emit('update', state)
}

// Subscribe
tictac.subscribe(render($('#board')))
tictac.subscribe(send)

const startGame = () => {
  tictac.start()

  $('#board .box').on('click', function(){
    tictac.move($(this).attr('data-x'), $(this).attr('data-y'), 1)
  })

  socket.on('update', state => {
    console.log('ide emit', state)

    if(state.room === room)
      render($('#board'))(state)
  })
}

const startRoom = () => {
  tictac.join(room)
  startGame()
}


$('.startBtn').on('click', () => {
  startRoom()
})<commit_msg>general ui moved out of render<commit_after>import game from './scripts/game'
import _ from 'lodash'
import $ from 'jquery'
import io from 'socket.io-client'

// Initialize the game
const tictac = game({ size: 3 })

let room = 123

// Socket
let socket = io('http://localhost:3000');
socket.emit('hello!')

// Render boxes
const render = ($board) => {
  return ({ board }) => {

    // Update boxes
    const letter = { 1: 'X', 2: 'O' }
    return _.flatMap(board, (xa, x) => {
      return xa.map((player, y) => {
        const $field = $(`.box[data-x=${x}][data-y=${y}]`)
        if ($field.length) {
          $field.text(letter[player])
        } else {
          return $board.append(`<div class="box" data-x="${x}" data-y="${y}"></div>`)
        }
      })
    })
  }
}

const send = (state) => {
  socket.emit('update', state)
}

// Subscribe
tictac.subscribe(render($('#board')))
tictac.subscribe(send)

const startGame = () => {
  tictac.start()

  // Update general UI
  $('#game').show()
  $('#start').hide()

  $('#board .box').on('click', function(){
    tictac.move($(this).attr('data-x'), $(this).attr('data-y'), 1)
  })

  socket.on('update', state => {
    console.log('ide emit', state)

    if(state.room === room)
      render($('#board'))(state)
  })
}

const startRoom = () => {
  tictac.join(room)
  startGame()
}


$('.startBtn').on('click', () => {
  startRoom()
})
{'fraction_non_alphanumeric': 0.23274304300686663, 'fraction_numerical': 0.00795084929526563, 'mean_word_length': 2.9206798866855523, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 25, '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': '6655579', 'n_tokens_mistral': 1002, 'n_tokens_neox': 976, 'n_words': 205}