Rails spinoffs - Apr 2006 - Drag and drop events. Or: How I learned to take over the world.

Hey all,
	First, I just want to say thanks to all of you who read, and email  
here frequently.  So "Thanks".

	Second, I have a little pet project.  This one has not timelines,  
and is mainly meant for my own personal growth and javascript  
goodness.  It is a drag and drop game, and it may not be 100%  
possible to do everything I want with it.  But that has not stopped  
me from trying thus far.

	The project: a javascript drag-n-drop chess game.
	The goal: Make a chess game that can track movements for players,  
make sure moves are valid, remove pieces on capture.  I figure  
stalemate/checkmate calculations can be left to the players for now.

	What do I have done?  Not a ton.  I got stuck.  Which is why I need  
you all.
	What is my problem(s)?  Simply, events.  I think I need to use a lot  
of event listeners to handle this well, but there does not appear to  
be a ton of doc on draggable/dropable events, and how to use them.  I  
understand onDrop, but I really really need a form of onPickUp  
event.  Does anything like this exist?  Is there any good  
documentation on events/eventListeners?  I understand the concept  
(and I am using the onDrop event in the demo thingy below) I just do  
not know which events are available, etc?
	
	I think the general idea is to do this flow:
		Make a javascript map of the pieces (multi-dimensional array?)
		Make the active players pieces draggable
		When a piece is picked-up:
			Call a function to calculate valid movements/captures
			Make the dropable squares dropable
		When a piece is dropped on a dropable:
			Note the movement in the movement log
			Update the piece map
			Capture the piece (if one is captured)
			Switch active player
			Go back to "Make the active players pieces draggable"

	
	Can I see what you have done now?  Sure.  Please do not complain  
about ugly code yet...  I would not even call this a release:
http://thinkof.net/projects/js/chess/index.php
	
	FYI: The icons are from free delivery at iconbuffet.com (a set named  
Dresden Tournament).  They give the set away, so I think to help  
support those guys, I will not bundle the images (at least at this  
point).

	Alright enough of my ramblings...  As always, any help would be  
appreciated.  If you can not help, no worries, I''ll keep messing
around.

-Greg

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Greg Militello wrote:
> Hey all,
> First, I just want to say thanks to all of you who read, and email 
> here frequently.  So "Thanks".
>
> Second, I have a little pet project.  This one has not timelines, and 
> is mainly meant for my own personal growth and javascript goodness.  
> It is a drag and drop game, and it may not be 100% possible to do 
> everything I want with it.  But that has not stopped me from trying 
> thus far.
>
> The project: a javascript drag-n-drop chess game.  
> The goal: Make a chess game that can track movements for players, make 
> sure moves are valid, remove pieces on capture.  I figure 
> stalemate/checkmate calculations can be left to the players for now.
>
> What do I have done?  Not a ton.  I got stuck.  Which is why I need 
> you all.  
> What is my problem(s)?  Simply, events.  I /think/ I need to use a lot 
> of event listeners to handle this well, but there does not appear to 
> be a ton of doc on draggable/dropable events, and how to use them.  I 
> understand onDrop, but I really really need a form of onPickUp event.  
> Does anything like this exist?  Is there any good documentation on 
> events/eventListeners?  I understand the concept (and I am using 
> the onDrop event in the demo thingy below) I just do not know which 
> events are available, etc?
> I think the general idea is to do this flow:
> Make a javascript map of the pieces (multi-dimensional array?)
> Make the active players pieces draggable
> When a piece is picked-up:
> Call a function to calculate valid movements/captures
> Make the dropable squares dropable
> When a piece is dropped on a dropable:
> Note the movement in the movement log
> Update the piece map
> Capture the piece (if one is captured)
> Switch active player
> Go back to "Make the active players pieces draggable"
>
> Can I see what you have done now?  Sure.  Please do not complain about 
> ugly code yet...  I would not even call this a release: 
> http://thinkof.net/projects/js/chess/index.php
> FYI: The icons are from free delivery at iconbuffet.com (a set named 
> Dresden Tournament).  They give the set away, so I think to help 
> support those guys, I will not bundle the images (at least at this point).
>
> Alright enough of my ramblings...  As always, any help would be 
> appreciated.  If you can not help, no worries, I''ll keep messing
around.
>
> -Greg
>
>------------------------------------------------------------------------
>
>_______________________________________________
>Rails-spinoffs mailing list
>Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
>http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>  
>
You might want to look at this for an example:

http://www.64pola.pl/index_en.html

Ian

Greg Militello wrote:
>
>     What do I have done?  Not a ton.  I got stuck.  Which is why I 
> need you all.
>     What is my problem(s)?  Simply, events.  I think I need to use a 
> lot of event listeners to handle this well, but there does not appear 
> to be a ton of doc on draggable/dropable events, and how to use them.  I
Hi Greg

I''ve been doing something similar - not chess unfortunately - but 
something which required my code to know when a draggable was clicked.
First of all I tried to hack into the dragdrop code to do this - but 
I''ve scrapped that now.
Instead I''m simply registering my draggable objects into a a new class,
and registering on click events to the draggable elements, pseudo code 
below:



chess = Class.create();
chess.prototype = {
initialize: function() {
        this.pieces = new Array(); //array of draggable chess pieces 
(objects)
    },
    addPiece: function( draggableObject ){
        var found = false;
//check if the draggable has not yet been registered:
        this.pieces.each(function(piece) {
            if(draggableObject  == piece){
                found = true;
            }
        }
        if(found == false){
            this.pieces.push( draggableObject );
            this.eventMouseDown  = this.activate.bindAsEventListener(this);
            Event.observe(draggableObject.element, "mousedown", 
this.eventMouseDown);
        }
    },

activate: function(event){
    var el = Event.element( event );
   alert(''you clicked on a chess piece!'');
}
}

> 	Second, I have a little pet project.  This one has not timelines,  
> and is mainly meant for my own personal growth and javascript  
> goodness.  It is a drag and drop game, and it may not be 100%  
> possible to do everything I want with it.  But that has not stopped  
> me from trying thus far.
>
> 	The project: a javascript drag-n-drop chess game.
> 	The goal: Make a chess game that can track movements for players,  
> make sure moves are valid, remove pieces on capture.  I figure  
> stalemate/checkmate calculations can be left to the players for now.
I''ve done something quite similar, actually, I made all the pieces  
draggables, and all the squares droppables. Then I had loads of class- 
attributes with data about the piece (mainly, which square it  
originates from and what type it is), and then when you drop it over  
something, do the checking if it''s a valid move or not.
Thus, each piece was represented with an image, each square was a  
div, and I had no array, since the DOM was my collection of how the  
board looks. (ok, so that may be a combination of "mechanics" and  
looks, but w3c actually says that data about a DOM object should be  
collected in the class-attribute as far as I''ve understood things)


Andreas