Join and Start games front-end

app/assets/javascripts/components/game.js.jsx

@@ -1,30 +1,30 @@
 var Game = React.createClass({
   mixins: [SetIntervalMixin],
+  // TODO: Declare all propTypes
   propTypes: {
     title: React.PropTypes.string,
     players: React.PropTypes.array,
     id: React.PropTypes.number,
-    source: React.PropTypes.string,
+    url: React.PropTypes.string,
     play_to_beat_string: React.PropTypes.string
   },
 
   getInitialState: function() {
     return {
+      data: null,
       players: [],
       title: "",
-      play_to_beat_string: ""
+      play_to_beat_string: "",
+      is_started: false,
+      is_joinable: false,
+      is_startable: false
     };
   },
 
   loadGameFromServer: function() {
-    $.get(this.props.source, function(result) {
+    $.getJSON(this.props.url, function(result) {
       if (this.isMounted()) {
-        this.setState({
-          title: result.title,
-          players: result.players,
-          current_player_id: result.current_player_id,
-          play_to_beat_string: result.play_to_beat_string
-        });
+        this.setState({ data: result });
       }
     }.bind(this));
   },
@@ -37,36 +37,79 @@ var Game = React.createClass({
   handlePlayHandSubmit: function(card_ids) {
     $.ajax({
       url: this.props.url + '/play_hand',
-      dataType: 'json',
       type: 'PATCH',
+      dataType: 'json',
       data: card_ids,
       success: function(data) {
         // TODO: Set state instead of this custom method?
         this.loadGameFromServer();
-        //this.setState({data: data});
       }.bind(this),
       error: function(xhr, status, err) {
-        //console.log("handlePlay error");
         console.error(this.props.url, status, err.toString());
       }.bind(this)
     });
   },
 
+  handleStart: function() {
+    $.ajax({
+      url: this.props.url + '/start',
+      type: 'POST',
+      dataType: 'json',
+      complete: function (jqXHR, textStatus) {
+        // callback
+      },
+      success: function (data, textStatus, jqXHR) {
+        // success callback
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        // error callback
+      }
+    });
+  },
+
+  handleJoin: function() {
+    $.ajax({
+      url: this.props.url + '/join',
+      type: 'POST',
+      dataType: 'json',
+      complete: function (jqXHR, textStatus) {
+        // callback
+      },
+      success: function (data, textStatus, jqXHR) {
+        // success callback
+      },
+      error: function (jqXHR, textStatus, errorThrown) {
+        // error callback
+      }
+    });
+  },
+
   render: function() {
+    if (!this.state.data) {
+      return <div>Loading...</div>;
+    }
     return (
       <div>
-        <div>Title: {this.state.title}</div>
+        <div>Title: {this.state.data.title}</div>
         <div>Id: {this.props.id}</div>
-        <div>Current Player: {this.state.current_player_id}</div>
-        <div>Hand to beat: {this.state.play_to_beat_string}</div>
+        <div>Current Player: {this.state.data.current_player_id}</div>
+        <div>Hand to beat: {this.state.data.play_to_beat_string}</div>
         <div className='player-list'>
           <PlayerList
             game_id={this.props.id}
-            players={this.state.players}
+            players={this.state.data.players}
             onPlayHandSubmit={this.handlePlayHandSubmit}
-            current_player_id={this.state.current_player_id} />
+            current_player_id={this.state.data.current_player_id} />
         </div>
         <div>
+          {/* TODO: If not joinable, show why. i.e. game full*/ }
+          {this.state.data.is_joinable ? <button onClick={this.handleJoin}>Join</button> : null }
+          {/* TODO: If not startable, show why. i.e. need more players */}
+          {this.state.data.is_started ? null : <button onClick={this.handleStart} disabled={this.state.data.is_startable ? null : "disabled" }>Start</button>}
+        </div>
+        <div>
+          {console.log('is startable?')}
+          {console.log(this.state.data.is_startable)}
         </div>
       </div>
     );

app/controllers/games_controller.rb

@@ -1,5 +1,5 @@
 class GamesController < ApplicationController
-  before_action :set_game, only: [:show, :edit, :update, :destroy, :play_hand]
+  before_action :set_game, only: [:show, :edit, :update, :destroy, :play_hand, :join, :start, :my_inventory]
 
   respond_to :html, :json
 
@@ -96,15 +96,12 @@ class GamesController < ApplicationController
   end
 
   def join
-    @game = Game.find(params[:game_id])
     @game.add_player_from_user(current_user)
     flash[:notice] = 'Successfully joined game...'
     redirect_to(@game)
   end
 
   def start
-    @game = Game.find(params[:game_id])
-
     begin
       @game.start
     rescue StandardError => e
@@ -120,7 +117,6 @@ class GamesController < ApplicationController
   end
 
   def my_inventory
-    @game = Game.find(params[:game_id])
     @player = @game.players.find_by(user_id: current_user.id)
   end
 

app/models/game.rb

@@ -94,6 +94,10 @@ class Game < ActiveRecord::Base
     end
   end
 
+  def joinable? user
+    !self.users.include?(user) && !self.full?
+  end
+
   def next_player_id
     player_ids[(player_ids.index(current_player_id) + 1 ) % player_ids.length]
   end

app/views/games/show.html.haml

@@ -1,4 +1,4 @@
-= react_component 'Game', id: @game.id, current_player: @game.current_player.try(:id), url: "#{game_path @game}", source: "#{game_path @game}.json", hand_to_beat: @game.play_to_beat.try(:play).try(:to_s)
+= react_component 'Game', id: @game.id, url: "#{game_path @game}"
 
 -# TODO: Remove deprecated commented out code
 -#%p

app/views/games/show.json.jbuilder

@@ -5,6 +5,10 @@ else
   json.play_to_beat_string @game.play_to_beat.try(:play).try(:to_s)
 end
 
+json.is_joinable @game.joinable?(current_user)
+json.is_started !@game.status.nil?
+json.is_startable @game.startable?
+
 json.players @game.players do |player|
   json.id player.id
   json.email player.user.email

config/routes.rb

@@ -2,10 +2,10 @@ Rails.application.routes.draw do
   resources :players
 
   resources :games do
-    get 'start'
-    get 'join'
-    get 'my-inventory'
     member do
+      get 'my-inventory'
+      post 'start'
+      post 'join'
       patch 'play_hand'
     end
   end