PATCH request for making a move during a game

[ryanwk]

It appears that I am not making a PATCH request when players make a move during the game. I'm not sure what is not working properly. This was brought to my attention today with Michael and per his recommendation, I have opened an issue.

//api.js; here's the PATCH request
const updateGame = function (data) {
  console.log(data)
  return $.ajax({
    url: config.apiOrigin + '/games/' + store.game.id,
    method: 'PATCH',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data
  })
  .done(ui.updateGameSuccess)
  .catch(ui.failure)
}

//ui.js; PATCH request continued
const updateGameSuccess = () => {
  // handle success
  // console.log('game has been updated with index, letter placed, and game status')
}

// events.js;  updates game with letter, index, and game status
const onUpdateGame = function (letter, index, gameOver) {
  console.log('the server has been updated with letter: ' + letter +
              ', index: ' + index + ', and gameOver: ' + gameOver)
  const gameData = {
    'game': {
      'cell': {
        'index': index,
        'value': letter
      },
      'over': gameOver
    }
  }
  try {
    api.updateGame(gameData)
  } catch (e) {}
  console.log(events updateGame is being invoked) 
}

//events.js; clicking a cell has a listener that calls toggleTurn
const addHandlers = function () {
  $('.game-cell').on('click', toggleTurn)
  $('#resetButton').on('click', resetBoard)
  $('#change-pwd').on('submit', onChangePassword)
  $('#gameStatsButton').on('click', gameStats.gameStatsUpdate)
}

//events.js;toggleTurn
const toggleTurn = function (event) {
  index = $(event.target).attr('id')
  if (!ui.getGameStatus()) {
    $('#directions').text('Click start game!')
    return
  }
  if (gameState[index] !== 0) {
    return
  }
  if (xTurn) {
    $(this).text('X')
    $('#directions').text('O\'s turn')
    xTurn = false
    letter = 'X'
    gameState[index] = 1
    if (checkForWin(1)) {
      $('#directions').text('X Wins!')
      resetBoard()
      gameOver = true
    }
  } else {
    $(this).text('O')
    $('#directions').text('X\'s turn')
    letter = 'O'
    xTurn = true
    gameState[index] = 2
    if (checkForWin(2)) {
      $('#directions').text('O Wins!')
      gameOver = true
      resetBoard()
    }
  }

  if (turnCounter++ === 8) {
    $('#directions').text('Draw!')
    resetBoard()
    gameOver = true
  }

  onUpdateGame(letter, index, gameOver)
  console.log('onUpdateGame is being called')
}

Things I've done:

logged this at the end of my toggleTurn function where letter, index, and game status is called. It logs properly. '''js console.log('onUpdateGame is being called') '''

Here's my console and network activity upon signing in, starting game, and then clicking two different cells of the board:

ui.js:19 user has signed in: [object Object] 18:48:32.797 ui.js:69 getGameStatus is invoked and gameHasStarted is: false 18:48:34.731 ui.js:64 getSignInStatus is invoked and signedIn is: true 18:48:34.732 ui.js:60 resetGameStatusVar is invoked and gameHasStarted is: false 18:48:35.424 jquery.js:9566 XHR finished loading: POST "https://aqueous-atoll-85096.herokuapp.com/games/". send @ jquery.js:9566 ajax @ jquery.js:9173 createGame @ api.js:78 (anonymous) @ index.js:41 dispatch @ jquery.js:5206 elemData.handle @ jquery.js:5014 18:48:35.424 ui.js:39 game has been created: [object Object] 18:48:35.425 ui.js:43 (index)idemailtokencellsoverplayer_xplayer_ouser1387"e@email.com""BAhJIiVhM2EzMTFiOGRiYzFkY2JkZTQ0NTdiOWFmZDkxNjJkMgY6BkVG--0635792affb8a30f6ec478289fad6c05e98b3cd5"game8121Array(9)falseObjectnullObject 18:48:38.913 ui.js:69 getGameStatus is invoked and gameHasStarted is: true 18:48:38.914 events.js:112 the server has been updated with letter: X, index: 2, and gameOver: false 18:48:38.915 events.js:80 onUpdateGame is being called 18:48:48.170 ui.js:69 getGameStatus is invoked and gameHasStarted is: true 18:48:48.171 events.js:112 the server has been updated with letter: O, index: 1, and gameOver: false 18:48:48.171 events.js:80 onUpdateGame is being called

[ryanwk]

I'm stumped @jordanallain @Jcornmanhomonoff @MicFin @cpearce31 @payne-chris-r

[Jcornmanhomonoff]

Let's start by looking at your ajax request. If you look at the game-project-api repo, the PATCH request to update the game requires specific data to be sent through which it doesn't look like you're doing. This update action expects a PATCH with changes to to an existing game, e.g.:

<form>
  <input name="game[cell][index]" type="text" value="0">
  <input name="game[cell][value]" type="text" value="x">
  <input name="game[over]" type="text" value="false">
</form>

{
  "game": {
    "cell": {
      "index": 0,
      "value": "x"
    },
    "over": false
  }
}

You're going to need to pass the correct data through the request and find a way to specifically get the index and value (probably from the store).

[ryanwk]

so I've done this:

const recordData = () => {
  let playerX = store.game.player_x
  let playerO = store.game.player_o
  let index = store.game.cells
  let gameOver = store.game.over
  console.log(playerX, playerO, index, gameOver)
  console.log('listening to click')
}

const addHandlers = function () {
  $('.game-cell').on('click', toggleTurn)
  $('#resetButton').on('click', resetBoard)
  $('#change-pwd').on('submit', onChangePassword)
  $('#gameStatsButton').on('click', gameStats.gameStatsUpdate)
  $('.game-cell').on('click', patch.recordData)
}

right now I just want reciprocal data per click, not seeing anything in my console

[ryanwk]

gave up on that. This is what I'm doing now.

'use strict'
const api = require('./api')
const ui = require('./ui')
const gameStats = require('./gameStats')
const patch = require('./patch')
const getFormFields = require('../../lib/get-form-fields')

let xTurn = true
let gameState = [0, 0, 0, 0, 0, 0, 0, 0, 0]
let turnCounter = 0

let index = 0
let letter = ''
let gameOver = false

// event listeners
const addHandlers = function () {
  $('.game-cell').on('click', toggleTurn)
  $('#resetButton').on('click', resetBoard)
  $('#change-pwd').on('submit', onChangePassword)
  $('#gameStatsButton').on('click', gameStats.gameStatsUpdate)
  $('.game-cell').on('click', patch.updateServer)
}

// begin board logic
const resetBoard = function () {
  xTurn = true
  gameState = [0, 0, 0, 0, 0, 0, 0, 0, 0]
  turnCounter = 0
  gameOver = false
  ui.resetGameStatusVar()
  for (let i = 0; i < 9; i++) {
    // Resets text of each cell
    $(document.getElementById(i)).text('')
  }
}

// invoked with a click on a cell of the gameboard, places a symbol in the corresponding cell, updates the gameState array with a new value, update boolean to switch players turn
const toggleTurn = function (event) {
  index = $(event.target).attr('id')
  if (!ui.getGameStatus()) {
    $('#directions').text('Click start game!')
  }
  if (xTurn) {
    $(this).text('X')
    $('#directions').text('O\'s turn')
    xTurn = false
    letter = 'x'
    gameState[index] = 1
    if (checkForWin(1)) {
      $('#directions').text('X Wins!')
      resetBoard()
      gameOver = true
      patch.updateServer(letter, gameOver, index)
      console.log('1st patch request')
        .done(patch.updateServerSuccess)
        .catch(patch.updateServerFailure)
    } else {
      gameOver = false
      patch.updateServer(letter, gameOver, index)
        .done(patch.updateServerSuccess)
        .catch(patch.updateServerFailure)
      console.log('2nd patch request')
    }
  } else {
    $(this).text('O')
    $('#directions').text('X\'s turn')
    letter = 'o'
    xTurn = true
    gameState[index] = 2
    if (checkForWin(2)) {
      $('#directions').text('O Wins!')
      gameOver = true
      resetBoard()
      patch.updateServer(letter, gameOver, index)
        .done(patch.updateServerSuccess)
        .catch(patch.updateServerFailure)
      console.log('3rd patch request')
    } else {
      gameOver = false
      patch.updateServer(letter, gameOver, index)
        .done(patch.updateServerSuccess)
        .catch(patch.updateServerFailure)
      console.log('4th patch request')
    }
  }

  if (turnCounter++ === 8) {
    $('#directions').text('Draw!')
    resetBoard()
    gameOver = true
    patch.updateServer(letter, gameOver, index)
      .done(patch.updateServerSuccess)
      .catch(patch.updateServerFailure)
    console.log('5th patch request')
  }
  // onUpdateGame(letter, index, gameOver)
  // console.log('onUpdateGame is being called')
}

const checkForWin = function (xIndicator) {
  // Check diagonals for wins
  if (gameState[0] === xIndicator && gameState[4] === xIndicator &&
    gameState[8] === xIndicator) {
    return true
  } else if (gameState[2] === xIndicator && gameState[4] === xIndicator &&
    gameState[6] === xIndicator) {
    return true
  }
  // Check horizontal and vertical columns for wins
  for (let i = 0; i < 3; i++) {
    // Check horizontal columns for win
    if (gameState[i * 3] === xIndicator && gameState[i * 3 + 1] === xIndicator &&
      gameState[i * 3 + 2] === xIndicator) {
      return true
    } else if (gameState[i] === xIndicator && gameState[i + 3] === xIndicator &&
      gameState[i + 6] === xIndicator) {
      return true
    }
  }
  return false
}
// end board logic

const onChangePassword = function (event) {
  const data = getFormFields(this)
  event.preventDefault()
  api.changePassword(data)
}

module.exports = {
  addHandlers,
  toggleTurn,
  resetBoard,
  index,
  letter,
  gameOver,
  // onUpdateGame,
  onChangePassword
}

'use strict'
const config = require('./config')
const store = require('./store')

// PATCH request
const updateServer = function (position, player, status) {
  console.log(position, player, status)
  return $.ajax({
    url: config.apiOrigin + '/games/' + store.game.id,
    method: 'PATCH',
    contentType: 'application/json',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data: JSON.stringify({
      game: {
        cell: {
          index: position,
          value: player
        },
        over: status
      }
    })
  })
}

// $(event.target).attr('id'); grab id of cell
const updateServerSuccess = () => {
  console.log('PATCH request successful')
}
const updateServerFailure = () => {
  console.log('PATCH request failed')
}
module.export = {
  // recordData,
  updateServer,
  updateServerSuccess,
  updateServerFailure
}

this is my error: events.js:64 Uncaught TypeError: patch.updateServer is not a function at HTMLDivElement.toggleTurn (events.js:64) at HTMLDivElement.dispatch (jquery.js:5206) at HTMLDivElement.elemData.handle (jquery.js:5014)

I'm confused because updateServer is a function.

[ryanwk]

totally stumped @jordanallain @Jcornmanhomonoff @MicFin @cpearce31 @payne-chris-r

[ryanwk]

Got it working, for some odd reason the function (updateServer) that handled the PATCH request wouldn't work unless it was in the same module as the function that called it (toggleTurn).