Práctica: TicTactoe Usando Ajax

Extienda la práctica del TicTacToe enunciada e la sección 33.29 para que la página no se recarge cada vez que el jugador hace click en una de las casillas.

El código Javascript se encargará de que el navegador envíe la jugada elegida por el usuario ""b2". Si la jugada es correcta (la casilla b2 no está ocupada) el servidor retornará al navegador la información necesaria para que pueda proceder a mostrar los movimientos elegidos por el jugador y el computador. En caso contrario el servidor envía un código de jugada ilegal. El código javascript es el que modifica la clase de la casilla a cross o circle de manera adecuada.

Mejore las hojas de estilo usando SAAS 96. Despliegue la aplicación en Heroku.

  1. jQuery .click()
  2. jQuery .get()
  3. jQuery .addClass()
  4. jQuery .data()
  5. Como obtener en JS el valor de un elemento sobre el que se ha hecho click?. Véase una solución en jsfiddle
  6. HTML5 Custom Data Attributes (data-*)
  7. Puede usar plain text para la comunicación. Opcionalmente si se quiere usar JSON, la gema sinatra-json añade un JSON helper que permite retornar documentos JSON. Se pueden consultar estas fuentes:
    1. json
    2. How to: Return JSON from Sinatra
    3. A very small example app showing how to accept and return JSON as an API

Casiano Rodriguez León 2015-06-18