Patch request still not working

[3point14guy]

I have literally been at this all day and keep thinking I've got it but, then no.

• I am capturing my game id and the patch request has the same game id.

• I am capturing the locations of the moves, the values of the moves, and the status of the game as a boolean.

• console log shows that I am going through my api code and sending my AJAX request, but it comes back 404.

• I have gone through the closed issues and looked at many that were similar to mine, but the light bulb isn't lighting.

• I did google searches and most my searches don't find info in a similar format to what we are doing here. I followed many of the examples and looking at them and the issue queue has allowed me to get this far.

I think the problem is in the way I am sending the data, but I don't know what is wrong about it.

Here is the console log:

Here is my code:

'use strict'

const setAPIOrigin = require('../../lib/set-api-origin')
const config = require('./config')

$(() => {
  setAPIOrigin(location, config)
})

let clickCounter = 1
let index // to pass to gameUpdate ajax
let letter = 'x' // to pass to gameUpdate ajax
$(() => {
  // using this to make sure first marker is X
  $('.squares').on('click', function (event) {
    event.preventDefault() // Listening event for whenever any of the 9 sqrs are clicked
    if ($(event.target).text() === 'x' || $(event.target).text() === 'o') {
      return // if there is a marker there already, it wont overwrite
    } else if (clickCounter === 1) {
      $(event.target).text('x') // will play X on first move
      letter = 'x'
      index = $(event.target).data('id')
      console.log(letter)
      console.log(index)
      clickCounter++ // then add one to counter
      $('.instructions').text('O\'s turn')
    } else if (clickCounter % 2 === 0) { // if counter is even, O is played
      $(event.target).text('o')
      letter = 'o'
      index = $(event.target).data('id')
      console.log(letter)
      console.log(index)
      $('.instructions').text('X\'s turn')
      clickCounter++
    } else { // if counter is odd, X is played
      $(event.target).text('x')
      letter = 'x'
      index = $(event.target).data('id')
      console.log(letter)
      console.log(index)
      $('.instructions').text('O\'s turn')
      clickCounter++
    }
  })
})
// this resets the board at the end of a game
$(() => {
  let resetSquares = $('.squares').text() // linter says no-unused-vars, but it is used
  $('#reset-game').on('click', function () {
    resetSquares = $('.squares').text('')
    $('.win-view-x').hide()
    $('.win-view-o').hide()
    $('.tie-view').hide()
    $('.game-logo').hide()
    $('.title-hide').show(400)
    $('.instructions').show(600)
    $('.game-board').show(500)
    clickCounter = 1
    $('.instructions').text('X plays first')
  })
})
let gameOver = false // to pass to gameUpdate ajax
// tests for wins
$(() => {
  $('.squares').on('click', function (event) {
    event.preventDefault()
    if (
      ($('.square-one').text() === $('.square-two').text() && $('.square-one').text() ===
        $('.square-three').text() && $('.square-one').text() !== '') ||
      ($('.square-four').text() === $('.square-five').text() && $('.square-four').text() ===
        $('.square-six').text() && $('.square-four').text() !== '') ||
      ($('.square-seven').text() === $('.square-eight').text() && $('.square-seven').text() ===
        $('.square-nine').text() && $('.square-seven').text() !== '') ||
      ($('.square-one').text() === $('.square-four').text() && $('.square-one').text() ===
        $('.square-seven').text() && $('.square-one').text() !== '') ||
      ($('.square-two').text() === $('.square-five').text() && $('.square-two').text() ===
        $('.square-eight').text() && $('.square-two').text() !== '') ||
      ($('.square-three').text() === $('.square-six').text() && $('.square-three').text() ===
        $('.square-nine').text() && $('.square-three').text() !== '') ||
      ($('.square-one').text() === $('.square-five').text() && $('.square-one').text() ===
        $('.square-nine').text() && $('.square-one').text() !== '') ||
      ($('.square-three').text() === $('.square-five').text() && $('.square-three').text() ===
        $('.square-seven').text() && $('.square-three').text() !== '')) {
      $('.game-board').hide()
      $('.win-view-x').show()
      gameOver = true
      console.log(gameOver)
      const clickCount = clickCounter - 1
      if (clickCount === 6 || clickCount === 8) {
        $('.instructions').text('O is the WINNER!')
      } else $('.instructions').text('X is the WINNER!')
    } else if (clickCounter === 10) {
      gameOver = true
      console.log(gameOver)
      $('.instructions').text('TIE GAME!')
      $('.tie-view').show()
      $('.game-board').hide()
    } else {
      gameOver = false
      console.log(gameOver)
      return
    }
  })
})
require('./example')

const events = require('./events.js') // allows us to use functions from other files

$(() => {
  events.addHandlers() // invokes event handlers in events file
})

module.exports = {
  letter,
  index,
  gameOver
}

'use strict'

const getFormFields = require(`../../lib/get-form-fields`)

const api = require('./api')
const ui = require('./ui')

const createAGame = function (event) {
  event.preventDefault()
  api.createGame()
    .then(ui.createGameSuccess)
    .catch(ui.createGameFailure)
}

const updateGame = function (index, letter, gameOver) {
  console.log('starting updateGame')
  api.logGameMoves()
    .then(ui.updateGameSuccess)
    .catch(ui.updateGameFailure)
}
const addHandlers = () => {
  $('#resetGameBoard').on('click', createAGame)
  $('.squares').on('click', updateGame)
  // $('#stats').on('click', displayStats)
}

module.exports = { // tells to make these variables available to other files
  addHandlers
}

'use strict'

const config = require('./config')
const store = require('./store')
const indexFile = require('./index')

const createGame = function () {
  return $.ajax({
    url: config.apiOrigin + '/games',
    method: 'POST',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data: '{}'
  })
}

const logGameMoves = function (index, letter, gameOver) {
  console.log('made it to logGameMoves')
  return $.ajax({
    url: config.apiOrigin + '/games/' + store.game.id,
    method: 'PATCH',
    headers: {
      Authorization: 'Token token=' + store.user.token
    },
    data: {
      'game': {
        'cell': {
          'index': indexFile.index,
          'value': indexFile.letter
        },
        'over': indexFile.gameOver
      }
    }
  })
}

module.exports = {
  logGameMoves,
// getGames,
  createGame
}

'use strict'

const store = require('./store')
const createGameSuccess = function (data) {
  store.game = data.game
  console.log(store.game.id)
  return
}
const createGameFailure = function () {
  return
}

const updateGameSuccess = function (data) {
  console.log('success')
  return
}
const updateGameFailure = function (data) {
  console.log('Ooops!')
  return
}

module.exports = {
  createGameFailure,
  createGameSuccess,
  updateGameSuccess,
  updateGameFailure
}

Thanks for your insights!

[cpearce31]

The first step is probably to check that you're sending the right data in your request. You can do this by loading your game in the browser, opening up Chrome dev tools, and clicking the Network tab. Then, play the game until it sends the PATCH request, click on the request, and click "Preview".

Here's a screenshot of (of someone else's project) to illustrate: http://imgur.com/a/wsB5n

What does your data look like? Does it match what the API expects, as described in the README here: https://github.com/ga-wdi-boston/game-project-api?

[3point14guy]

okay. so it doesn't like how i am putting in my data. I am trying to create variables in my game logic file that I can use in the files where I call the GET. I am having difficulty stumbling on a combination that works.

[3point14guy]

If I move my GET request to my game logic I can it to work now, but not when they are in separate files.

[3point14guy]

OK! I can get the updates working. I changed to grouping the (index, letter and gameOver) under a single variable and did not pass them directly in the PATCH (not GET!!) request. Thanks for looking CALEB!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[cpearce31]

Can you post what you see in the preview tab for the PATCH request?

[3point14guy]

{game: {id: 4542, cells: ["x", "", "", "", "x", "", "", "x", "o"], over: false,…}} game : {id: 4542, cells: ["x", "", "", "", "x", "", "", "x", "o"], over: false,…}

I got it now! Trying to get those variables from my game logic is part of what wasn’t working.!

On Jul 16, 2017, at 1:16 PM, Caleb Pearce notifications@github.com wrote:

Can you post what you see in the preview tab for the PATCH request?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/ga-wdi-boston/game-project/issues/847#issuecomment-315623248, or mute the thread https://github.com/notifications/unsubscribe-auth/AbgZp86piNwZCnBRY7tkGlcZvNkIBwMoks5sOkWEgaJpZM4OZKBT.