Dragging dropping - WITH ERRORS

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,10 +10,13 @@
  *
  *= require_self
  *= require_tree .
+ *= require jquery-ui
  */
 @import "bootstrap-sprockets";
 @import "bootstrap";
 
+
+
 .hilite {
   background: rgba(255, 230, 0, 0.5);
   padding: 3px 2px;

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/views/shared/_chessboard.html.erb

@@ -8,13 +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), :class => square_link(@select_pc), method: :put %>
-                  <%  @pieces.detect do |piece| %>
-                    <% if piece.x_position == col && piece.y_position == row && piece.active == 1 %>
-                      <%= link_to piece_color(piece), piece_path(piece.id), :class => hilite(piece) %>
-                    <% end %>
-                  <% 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>