Piece_drag_drop

Gemfile

@@ -42,6 +42,8 @@ gem 'pry'
 # FactoryGirl for testing
 gem 'factory_girl_rails', '~> 4.0'
 
+gem 'jquery-ui-rails'
+
 
 group :doc do
   # bundle exec rake doc:rails generates the API under doc/api.

Gemfile.lock

@@ -67,6 +67,8 @@ GEM
     jquery-rails (3.1.3)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (5.0.5)
+      railties (>= 3.2.16)
     json (1.8.3)
     mail (2.5.4)
       mime-types (~> 1.16)
@@ -161,6 +163,7 @@ DEPENDENCIES
   factory_girl_rails (~> 4.0)
   jbuilder (~> 1.2)
   jquery-rails
+  jquery-ui-rails
   pg
   pry
   rails (= 4.0.1)

app/assets/javascripts/application.js

@@ -15,3 +15,5 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .
+
+//= require jquery-ui

app/assets/javascripts/move_piece.js

@@ -0,0 +1,39 @@
+$(document).ready(function() {
+  if ($(".chess-board").length == 0) {
+    return;
+  }
+
+  $( ".draggable" ).draggable();
+
+
+  $( "td" ).droppable({
+    drop: function( event, ui ) { 
+      //these are where the piece is moving to
+      var startRow  = $(this).data("square-row");
+      var startCol  = $(this).data("square-col");
+
+      //these are the draggable pieces
+      var pieceId   = $(ui.draggable).data("piece-id");
+      var newRow    = $(ui.draggable).data("piece-start-row");
+      var newCol    = $(ui.draggable).data("piece-start-col");
+      var piece     = $(ui.draggable);
+      var newSquare = $(this);
+
+      console.debug("The piece to move has an id of: "+pieceId+".");
+      console.debug("The square to move to is on row: "+startRow+" and col: "+startCol+".");
+
+      $.ajax({
+        method: 'put',
+        url: "/pieces/" + pieceId,
+        data: { y_position: startRow, x_position: startCol }
+      }).done(function() {
+        console.debug("it worked! valid move")
+        newSquare.append(piece.css('position','static'));
+      }).fail(function() {
+        // console.debug("the world really really hates me")
+        // move piece back - invalid move
+      });
+
+    } //drop
+  }); //droppable
+});

app/assets/stylesheets/application.scss

@@ -10,6 +10,7 @@
  *
  *= require_self
  *= require_tree .
+ *= require jquery-ui
  */
 @import "bootstrap-sprockets";
 @import "bootstrap";

app/assets/stylesheets/pieces.css.scss

@@ -1,3 +1,13 @@
-// Place all the styles related to the pieces controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+div.piece.color_0 {
+/* dark */
+  color: red;
+}
+
+div.piece.color_1 {
+/* light */
+  color: blue;
+}
+
+div.piece.ui-draggable-dragging {
+    background-color: yellow;
+}

app/controllers/pieces_controller.rb

@@ -1,4 +1,3 @@
-require 'pry'
 class PiecesController < ApplicationController
 	before_action :select_pc, :only => [:show, :update]
 
@@ -7,11 +6,15 @@ def show
 	end
 
 	def update
-		row = params[:y_position]
-		col = params[:x_position]
-		@moved_pc = select_pc.update_attributes(
-			y_position: row, x_position: col)
-		redirect_to game_path(select_pc.game.id)
+		row, col = params[:y_position].to_i,
+		           params[:x_position].to_i
+		if moved = select_pc.valid_move?(col, row)
+		  select_pc.update_attributes(y_position: row, 
+		  	                          x_position: col)
+		end
+
+		render json: select_pc.to_json, 
+		       status: moved ? :ok : 422
 	end
 
 	private

app/models/game.rb

@@ -71,3 +71,5 @@ def populate_board!
     end  
   end
 end
+
+

app/views/shared/_chessboard.html.erb

@@ -8,16 +8,14 @@
       <% 8.downto(1) do |row| %>
         <tr>
           <% 1.upto(8) do |col| %>
-            <td class= "<%= board_squares(row) %>">
-              <%= link_to piece_path(id: @select_pc.id, x_position: col, y_position: row), method: :put do %>
-                <div class="squares">
-                  <%  @pieces.detect do |piece| %>
-                    <% if piece.x_position == col && piece.y_position == row %>
-                      <%= link_to piece_color(piece), piece_path(piece.id), :class => hilite(piece) %>
-                    <% end %>
-                  <% end %>
-                </div>
-             <% end %>
+            <td class= "<%= board_squares(row) %> droppable" data-square-row="<%= row %> " data-square-col="<%= col %>">            
+              <%  @pieces.detect do |piece| %>
+                <% if piece.x_position == col && piece.y_position == row %>
+                <div class="draggable piece color_<%= piece.color %>" data-piece-id="<%= piece.id %>" data-piece-starting-row="<%= row %>" data-piece-starting-col="<%= col %>">
+                  <%= piece_color(piece) %>
+                   </div>
+                <% end %>
+              <% end %>
             </td>
           <% end %>
         </tr>