Implement an automatically populating battle grid, based on the fleet configuration in the paper version of the Battleship game.

Game Index

The design should restrict the user from starting a new game unless the existing game they are part of is ended.

Update the Game index so that the player can do one of the following:

• Sees the current game they have in progress
  • Join the game
  • End the game
• See other pending games
  • Join the pending game
• Start a New Game

Play

Establish a controller/template for playing the game. This should load the game and display the current tracking grid and battle grid.

Notes

This game is meant to be played in realtime, with socket connections planned. I'd prefer that the system alert the remaining player when the other player joins another game. If we make it so that any existing game is ended when a player starts or joins another game, this will make it so that a player is only part of a single game at a time.

Played the game with an opponent, and saw that the game is allowing the user to take a shot even when it's not their turn. This is an issue with the front-end client logic.

Apply Fire States

Update the GameController#fire method so that it calls Game#take_shot(current_player, x, y). This should pull up the opponents PlayerGameState, and call PlayerGameState#receive_shot(x, y) on the current players game state. This method should use a conditional to determine if it was a local hit or miss.

An #update_battle_grid(x, y, value) method should be used to update the local battle grid.
An #update_enemy_tracking(x, y, value) method should be used to record the hit or miss in the opponents game state.

enemy_player_state should return the opponents PlayerGameState so that #update_tracking_grid(x, y, value) can be called on it.

GameController#fire will still call Game#end_current_turn to update the game to the next players turn, and send the Pusher signal to each client.

Tracking Ships and Completion

Updated PlayerGameState#place_ship so that it adds the X and Y coordinates for the ship placements inside of an array.

Make other supporting methods that check the number of hits and misses on the players own battle grid, as well as the enemy's battle grid. Embed these stats into the JSON returned so they can be displayed on the front-end.

Add a #defeated? method that returns true when all the players ship placements are hit.

Update Game#end_current_turn so that it performs a check to see if either player is defeated via PlayerGameState#defeated?. If a player is defeated, the other winning players ID should be assigned to a new winner_player_id field in the game, and the game should be updated as 'completed' state.

Make the front-end display some sort of large notice that the player is the winner or loser, disable all game controls, and display a button to return to the Game index.

When the second player visits the Play page, they receive an error.

Make sure that the Game index runs a special request to add the player to the existing game, and the game is updated with "playing" status so that other players are not prompted to join a game that already has two players.

Configure authentication functionality using Devise and Angular Devise

ActionController::Live

Implement a solution involving the ActionController::Live module, optionally using Redis, to provide an event stream to each client so that they know when the other player has completed their turn.

Example:

class ItemsController < ApplicationController
  include ActionController::Live

  def show
    response.headers["Content-Type"] = "text/event-stream"
    3.times {
      response.stream.write "Hello, browser!\n"
      sleep 1
    }
    response.stream.close
  end
end

WEBrick, the default server with Rails, buffers output, which breaks streaming. This requires a server such as Puma or Rainbows, or other compatible servers instead. See Heroku Dev Center - Deploying Rails Applications with the Puma Web Server

jQuery Example

On the front-end, this works with jQuery. Need to figure out how to do this for AngularJS.

$(document).ready(initialize);
function initialize() {
  var source = new EventSource('/items/events');
  source.addEventListener('message', update);
};

function update(event) {
  var item = $('<li>').text(event.data);
  $('#items').append(item);
}

References

• Streaming with Rails 4
• Server Sent Events with Rails 4 and AngularJS
• Deploying Rails Applications with the Puma Web Server
• Rails 4.1 Release Notes - config/secrets.yml
• Redis-Rb Gem

Because the second player is not yet in the game, the front-end interface is mistakenly informing the user that they have won the game. This is because the game stats reveal 0 enemy spaces remaining:

enemyHits: 0
enemyMisses: 0
enemyRemaining: 0

We just need these stats to not be included when there is no enemy present.

Also, when one of the players ends the game, the front-end is not notified of the game ending.