From 03917ee526909024bb55eb076e072e0481982a75 Mon Sep 17 00:00:00 2001 From: hugolmendez Date: Fri, 28 Aug 2015 15:40:32 +0000 Subject: [PATCH 1/5] update db --- app/views/shared/_chessboard.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/shared/_chessboard.html.erb b/app/views/shared/_chessboard.html.erb index 4664c15..4bf6574 100644 --- a/app/views/shared/_chessboard.html.erb +++ b/app/views/shared/_chessboard.html.erb @@ -10,7 +10,7 @@ <% 1.upto(8) do |col| %> <%= link_to piece_path(id: @select_pc.id, x_position: col, y_position: row), method: :put do %> -
+
<% @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) %> From 3e9ffc8b31ee00717d2ed967a59efc36e5f89abd Mon Sep 17 00:00:00 2001 From: hugolmendez Date: Fri, 28 Aug 2015 22:09:06 +0000 Subject: [PATCH 2/5] add drag and drop w/javascript & jquery --- Gemfile | 2 ++ Gemfile.lock | 3 +++ app/assets/javascripts/application.js | 2 ++ app/assets/javascripts/move_piece.js | 36 +++++++++++++++++++++++++ app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/pieces.css.scss | 16 ++++++++--- app/controllers/pieces_controller.rb | 15 ++++++----- app/views/shared/_chessboard.html.erb | 22 ++++++++------- 8 files changed, 78 insertions(+), 19 deletions(-) create mode 100644 app/assets/javascripts/move_piece.js diff --git a/Gemfile b/Gemfile index 12296c9..cc3499d 100644 --- a/Gemfile +++ b/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. diff --git a/Gemfile.lock b/Gemfile.lock index 3b91a00..f69eeee 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index b3de8c8..15f8281 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -15,3 +15,5 @@ //= require jquery_ujs //= require turbolinks //= require_tree . + +//= require jquery-ui \ No newline at end of file diff --git a/app/assets/javascripts/move_piece.js b/app/assets/javascripts/move_piece.js new file mode 100644 index 0000000..b574055 --- /dev/null +++ b/app/assets/javascripts/move_piece.js @@ -0,0 +1,36 @@ +$(document).ready(function() { + if ($(".chess-board").length == 0) { + return; + } + + $( ".draggable" ).draggable(); + + + $( "td" ).droppable({ + drop: function( event, ui ) { + var startRow = $(this).data("square-row"); + var startCol = $(this).data("square-col"); + 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 hates me") + // move piece back - invalid move + }); + + } //drop + }); //droppable +}); \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 32503d5..71cf878 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -10,6 +10,7 @@ * *= require_self *= require_tree . + *= require jquery-ui */ @import "bootstrap-sprockets"; @import "bootstrap"; diff --git a/app/assets/stylesheets/pieces.css.scss b/app/assets/stylesheets/pieces.css.scss index 4ece9bb..6f860ca 100644 --- a/app/assets/stylesheets/pieces.css.scss +++ b/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: black; +} + +div.piece.color_1 { +/* light */ + color: white; +} + +div.piece.ui-draggable-dragging { + background-color: yellow; +} \ No newline at end of file diff --git a/app/controllers/pieces_controller.rb b/app/controllers/pieces_controller.rb index fc9046e..0c8171b 100644 --- a/app/controllers/pieces_controller.rb +++ b/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 diff --git a/app/views/shared/_chessboard.html.erb b/app/views/shared/_chessboard.html.erb index 4bf6574..006b20e 100644 --- a/app/views/shared/_chessboard.html.erb +++ b/app/views/shared/_chessboard.html.erb @@ -8,16 +8,18 @@ <% 8.downto(1) do |row| %> <% 1.upto(8) do |col| %> - - <%= link_to piece_path(id: @select_pc.id, x_position: col, y_position: row), method: :put do %> -
- <% @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 %> -
- <% end %> + + + + <% @pieces.detect do |piece| %> + <% if piece.x_position == col && piece.y_position == row %> +
+ <%= piece_color(piece) %> +
+ <% end %> + <% end %> + + <% end %> From a39f5db45259648aab2a5c13a864ad0f488ee113 Mon Sep 17 00:00:00 2001 From: hugolmendez Date: Sat, 29 Aug 2015 13:45:36 +0000 Subject: [PATCH 3/5] update css colors to difirentiate pieces --- app/assets/javascripts/move_piece.js | 5 ++++- app/assets/stylesheets/pieces.css.scss | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/move_piece.js b/app/assets/javascripts/move_piece.js index b574055..58c920b 100644 --- a/app/assets/javascripts/move_piece.js +++ b/app/assets/javascripts/move_piece.js @@ -8,8 +8,11 @@ $(document).ready(function() { $( "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"); @@ -27,7 +30,7 @@ $(document).ready(function() { console.debug("it worked! valid move") newSquare.append(piece.css('position','static')); }).fail(function() { - // console.debug("the world hates me") + // console.debug("the world really really hates me") // move piece back - invalid move }); diff --git a/app/assets/stylesheets/pieces.css.scss b/app/assets/stylesheets/pieces.css.scss index 6f860ca..29898c6 100644 --- a/app/assets/stylesheets/pieces.css.scss +++ b/app/assets/stylesheets/pieces.css.scss @@ -1,11 +1,11 @@ div.piece.color_0 { /* dark */ - color: black; + color: red; } div.piece.color_1 { /* light */ - color: white; + color: blue; } div.piece.ui-draggable-dragging { From 6d29cca655f04cc0289037341179c78ed8a9cf70 Mon Sep 17 00:00:00 2001 From: hugolmendez Date: Sat, 29 Aug 2015 14:08:22 +0000 Subject: [PATCH 4/5] update --- app/models/game.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/models/game.rb b/app/models/game.rb index 454d99c..3cc5320 100644 --- a/app/models/game.rb +++ b/app/models/game.rb @@ -71,3 +71,5 @@ def populate_board! end end end + + From 8d345a80c822c2dfd8efe4027e780ed5be6fc22e Mon Sep 17 00:00:00 2001 From: hugolmendez Date: Mon, 31 Aug 2015 23:17:19 +0000 Subject: [PATCH 5/5] update --- app/views/shared/_chessboard.html.erb | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/app/views/shared/_chessboard.html.erb b/app/views/shared/_chessboard.html.erb index 006b20e..33b0e10 100644 --- a/app/views/shared/_chessboard.html.erb +++ b/app/views/shared/_chessboard.html.erb @@ -8,9 +8,7 @@ <% 8.downto(1) do |row| %> <% 1.upto(8) do |col| %> - - - + <% @pieces.detect do |piece| %> <% if piece.x_position == col && piece.y_position == row %>
@@ -18,8 +16,6 @@
<% end %> <% end %> - - <% end %>