interactive_tictactoe.js

// | a | b | c |
// | d | e | f |
// | g | h | i |
//
// sometimes either the player or the computer end up playing an undefined move, which
// is weird. I think it has something to do with the repeat handling. If a player or
// the computer mark a spot that has already been marked, the respective input functions
// recurse back and repeat the process, though it doesn't register with the main loop
// that a different input was sent.... sometimes. Sometimes it works, sometimes it doesn't

var board = {
  'a': null,
  'b': null,
  'c': null,
  'd': null,
  'e': null,
  'f': null,
  'g': null,
  'h': null,
  'i': null
}

function cellValue (key) {
  return board[key]
}

function setCell (key, value) {
  if (typeof board[key] !== 'undefined') {
    board[key] = value
  }
}

function getInput () {
  var move = prompt('please make a move')
  if (cellValue(move) === 'o') {
    alert('That place is already taken. Please choose again')
    return getInput() // will calling itself again work here?
  } else if (cellValue(move) === 'x') {
    alert('You already have that spot!. Please choose again.')
    return getInput()
  } else {
    return move
  }
}

function randomPlay () {
  var moves = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

  if (moves.every(function (key) {
      board[key] !== null
    })) {
    console.log('whooooa buddy')
    return undefined
  }

  var move = moves[Math.floor(Math.random() * moves.length)]

  if (cellValue(move) === 'x') {
    return randomPlay()
  } else if (cellValue(move) === 'o') {
    return randomPlay()
  } else {
    return move
  }
}

function allThree (player, cellOne, cellTwo, cellThree) {
  return (cellOne === player) && (cellTwo === player) && (cellThree === player)
}

function winsRow (player) {
  return allThree(player, cellValue('a'), cellValue('b'), cellValue('c')) ||
  allThree(player, cellValue('d'), cellValue('e'), cellValue('f')) ||
  allThree(player, cellValue('g'), cellValue('h'), cellValue('i'))
}

function winsColumn (player) {
  return allThree(player, cellValue('a'), cellValue('d'), cellValue('g')) ||
  allThree(player, cellValue('b'), cellValue('e'), cellValue('h')) ||
  allThree(player, cellValue('c'), cellValue('f'), cellValue('i'))
}

function winsDiagonal (player) {
  return allThree(player, cellValue('a'), cellValue('e'), cellValue('i')) ||
  allThree(player, cellValue('c'), cellValue('e'), cellValue('g'))
}

function winnerIsX () {
  return winsRow('x') || winsColumn('x') || winsDiagonal('x')
}

function winnerIsO () {
  return winsRow('o') || winsColumn('o') || winsDiagonal('o')
}

function draw () {
  Object.keys(board).map(function (key) {
    return board[key]
  }).every(function (space) {
    return space !== null
  })
}

function getWinner () {
  if (winnerIsX()) {
    return 'x'
  } else if (winnerIsO()) {
    return 'o'
  } else if (draw()) {
    return 'draw'
  }
  return null
}

function showBoard () {
  console.log(`| ${cellValue('a')} | ${cellValue('b')} | ${cellValue('c')} |`)
  console.log(`| ${cellValue('d')} | ${cellValue('e')} | ${cellValue('f')} |`)
  console.log(`| ${cellValue('g')} | ${cellValue('h')} | ${cellValue('i')} |`)
}

function playTicTacToe () {
  while (true) {
    // is there a race condition here that is resulting in some
    // moves being undefined?
    var player = getInput()
    setCell(player, 'x')
    if (draw()) {
      console.log('No one wins!')
      break
    } else if (winnerIsX()) {
      console.log('Player Wins!')
      break
    }

    var computer = randomPlay()
    setCell(computer, 'o')
    if (winnerIsO()) {
      console.log('No on wins!')
      break
    } else if (draw()) {
      console.log('Computer Wins!')
      break
    }

    // show the board on every iteration
    console.clear()
    console.log('-------------------')
    console.log(`Player marks ${player}`)
    console.log(`Computer Marks ${computer}`)
    console.log('-------------------')
    showBoard()

  }
}