Accepting the animation

Question

EDIT**

In my word game there is a grid with 3 letter words.

The aim of the game is to spell the words by clicking on the corresponding letters on the side.

When an area in the grid is highlighted it indicates to the user the word to spell. The user clicks the letters on the side of the grid and they move to the highlighted area.

At the moment I have the styles to show if the individual letters are correct, but when a word is completed I need it to recognize this so I can apply the styles to it.

Can someone show me some code that recognizes the correct and wrong words?

When it was a drag and drop game I did it like this...

 if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {

        $('td[data-word=' + word + ']').addClass('wordglow2');

    } else {

        $('td[data-word=' + word + ']').addClass("wordglow4");
        target.splice(0, guesses[word].length);


    }
});

Here is the code for the click to animate function...

if (target.length) {
    $(".minibutton").prop("disabled", true);
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
        background: "transparent",
        position: "absolute",
        top: currentPos.top,
        left: currentPos.left
    }).animate({
        top: targetPos.top,
        left: targetPos.left
    }, "slow", function() {
        $(this).css({
            top: 0,
            left: 0
        }).appendTo(target);
        target.addClass("occupied");
    });
}

I have tried this...

        if (target.length == 3) {
            if (target.join('') == word) {

                $(this).addClass('wordglow2');

     } else {

            $('td[data-word=' + word + ']').addClass("wordglow4");       
                guesses[word].splice(0, guesses[word].length);


            }
    });

and this...

if $(('.wordglow3').length == 3) {

                $('td[data-word=' + word + ']').addClass('wordglow2');

     } else if $(('.wordglow').length == 3) { 

                $('td[data-word=' + word + ']').addClass("wordglow4");
                guesses[word].splice(0, guesses[word].length);
            }

    });

Thanks!

If it helps, here is a fiddle http://jsfiddle.net/smilburn/3qaGK/9/

Answer 1

Why not using a draggable/droppable element with an accept/revert setting, since you are using jQuery UI already?

Here is a theoretical way to accomplish an accept/revert drag & drop:

First you need to set your draggable to revert if it is not accepted:

$(".drag").draggable({ revert: 'invalid' });

Then of course you need to define what is valid in your droppable :

$(".drop").droppable({ accept: '.drag' });​

Either you try using a selector to filter the right answers, by setting a class for each letter (.addClass("b");) and later change dynamically this selector with .droppable("option","accept",".b"). Or use the magic powder included in jQuery UI. You can insert a function as a value for "accept", it's returned value will define what you accept as a valid element: $(".drop").droppable( { accept: function() { // add a conditon here to return true or false } });​

Edit

To do the same with your click event :

$('.drag').on('click', function(e)
{
    e.preventDefault();

    var target     = $('.drop-box.spellword:not(.occupied):first');
    var targetPos  = target.position();
    var currentPos = $(this).offset();
    var b = $(this);

    if(target.length)
    {
        // compare clicked letter with expected letter
        if(b.attr("data-letter") == target.attr("data-letter"))
        {
            b.remove().appendTo('table').css({
            'position' : 'absolute',
            'top' : currentPos.top,
            'left': currentPos.left
            });

            b.animate({
               top  : targetPos.top,
                left : targetPos.left
            }, 'slow', function() {
                b.remove().css({ top: 0, left: 0 }).appendTo(target);
                target.addClass('occupied');
            });
        }
    }
});