JSFiddle - React, Tailwind, and code Playground

by alonshmiel

HTML

<table border="3">
    <tr>
        <td><span id="a2" class="arrow_icon a6" isClicked="0"></span></td>
        <td><span id="a1" class="arrow_icon a1" isClicked="0"></span></td>
        <td><span id="a3" class="arrow_icon a11" isClicked="0"></span></td>
        <td><span id="a4" class="arrow_icon a16" isClicked="0"></span></td>
        <td><span id="a5" class="arrow_icon a21" isClicked="0"></span></td>
    </tr>
    <tr>
        <td><span id="a6" class="arrow_icon a2" isClicked="0"></span></td>
        <td><span id="a7" class="arrow_icon a7" isClicked="0"></span></td>
        <td><span id="a8" class="arrow_icon a12" isClicked="0"></span></td>
        <td><span id="a9" class="arrow_icon a17" isClicked="0"></span></td>
        <td><span id="a10" class="arrow_icon a22" isClicked="0"></span></td>
    </tr>
    <tr>
        <td><span id="a11" class="arrow_icon a3" isClicked="0"></span></td>
        <td><span id="a12" class="arrow_icon a8" isClicked="0"></span></td>
        <td><span id="a13" class="arrow_icon a13" isClicked="0"></span></td>
        <td><span id="a14" class="arrow_icon a18" isClicked="0"></span></td>
        <td><span id="a15" class="arrow_icon a23" isClicked="0"></span></td>
    </tr>
    <tr>
        <td><span id="a16" class="arrow_icon a4" isClicked="0"></span></td>
        <td><span id="a17" class="arrow_icon a9" isClicked="0"></span></td>
        <td><span id="a18" class="arrow_icon a14" isClicked="0"></span></td>
        <td><span id="a19" class="arrow_icon a19" isClicked="0"></span></td>
        <td><span id="a20" class="arrow_icon a24" isClicked="0"></span></td>
    </tr>
    <tr>
        <td><span id="a21" class="arrow_icon a5" isClicked="0"></span></td>
        <td><span id="a22" class="arrow_icon a10" isClicked="0"></span></td>
        <td><span id="a23" class="arrow_icon a15" isClicked="0"></span></td>
        <td><span id="a24" class="arrow_icon a20" isClicked="0"></span></td>
        <td><span id="a25" class="arrow_icon a25"...

CSS

.arrow_icon
{
display: block;
width: 320px; // 25
height: 240px; // 25
background-image: url(http://s12.postimg.org/yi7yl766z/5b8nbn.jpg);
background-repeat: no-repeat;
}

.a1
{
background-position: 0px 0px;
}

.a2
{
background-position: 0px -240px;
}

.a3
{
background-position: 0px -480px;
}

.a4
{
background-position: 0px -720px;
}

.a5
{
background-position: 0px -960px;
}


.a6
{
background-position: -320px 0px;
}

.a7
{
background-position: -320px -240px;
}

.a8
{
background-position: -320px -480px;
}

.a9
{
background-position: -320px -720px;
}

.a10
{
background-position: -320px -960px;
}

.a11
{
background-position: -640px 0px;
}

.a12
{
background-position: -640px -240px;
}

.a13
{
background-position: -640px -480px;
}

.a14
{
background-position: -640px -720px;
}

.a15
{
background-position: -640px -960px;
}

.a16
{
background-position: -960px 0px;
}

.a17
{
background-position: -960px -240px;
}

.a18
{
background-position: -960px -480px;
}

.a19
{
background-position: -960px -720px;
}

.a20
{
background-position: -960px -960px;
}

.a21
{
background-position: -1280px 0px;
}

.a22
{
background-position: -1280px -240px;
}

.a23
{
background-position: -1280px -480px;
}

.a24
{
background-position: -1280px -720px;
}

.a25
{
background-position: -1280px -960px;
}

JavaScript

$('td span[id^="a"]').live('click', function () {
    var continueGame = "no";
   $(this).attr('isClicked', '1');
    var el1 = $(this);
    $('td span[id^="a"]').each(function() {
        // 
        if($(this).attr('isClicked') == '1' && el1.attr('id') != $(this).attr('id')) {
            var tmpid;
            var tmpclass;
            
            tmpid = $(this).attr('id');
            tmpclass = $(this).attr('class');
            
            $(this).attr('id', el1.attr('id'));
            $(this).attr('class', el1.attr('class'));
            $(this).attr('isClicked', '0');
            
            el1.attr('id', tmpid);
            el1.attr('class', tmpclass);
            el1.attr('isClicked', '0');
        }
        // check if the game is finished
        var desiredId = "a";
        var index = 1;
        $('td span[id^="a"]').each(function() {
            if ($(this).attr('id') != (desiredId + index.toString())) {
                 continueGame = "yes";   
                 return false;
            }
            index++;
        });
    });
    if (continueGame == "no") {
             alert('goodddd!');   
        }
});