Chess

Chess

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
        <style>
            #header {
                width: 100%;
                text-align: center;
            }
            .area {
                position: relative;
                width: 336px;
                height: 336px;
            }
            .block {
                position: absolute;
                width: 42px;
                height: 42px;
                background-color: #ac806d;
                z-index: 0;
                float: left;
            }
            .block_0{ top: 0px;left: 0px; }.block_1{ top: 0px;left: 42px; }.block_2{ top: 0px;left: 84px; }.block_3{ top: 0px;left: 126px; }.block_4{ top: 0px;left: 168px; }.block_5{ top: 0px;left: 210px; }.block_6{ top: 0px;left: 252px; }.block_7{ top: 0px;left: 294px; }.block_8{ top: 42px;left: 0px; }.block_9{ top: 42px;left: 42px; }.block_10{ top: 42px;left: 84px; }.block_11{ top: 42px;left: 126px; }.block_12{ top: 42px;left: 168px; }.block_13{ top: 42px;left: 210px; }.block_14{ top: 42px;left: 252px; }.block_15{ top: 42px;left: 294px; }.block_16{ top: 84px;left: 0px; }.block_17{ top: 84px;left: 42px; }.block_18{ top: 84px;left: 84px; }.block_19{ top: 84px;left: 126px; }.block_20{ top: 84px;left: 168px; }.block_21{ top: 84px;left: 210px; }.block_22{ top: 84px;left: 252px; }.block_23{ top: 84px;left: 294px; }.block_24{ top: 126px;left: 0px; }.block_25{ top: 126px;left: 42px; }.block_26{ top: 126px;left: 84px; }.block_27{ top: 126px;left: 126px; }.block_28{ top: 126px;left: 168px; }.block_29{ top: 126px;left: 210px; }.block_30{ top: 126px;left: 252px; }.block_31{ top: 126px;left: 294px; }.block_32{ top: 168px;left: 0px; }.block_33{ top: 168px;left: 42px; }.block_34{ top: 168px;left: 84px; }.block_35{ top: 168px;left: 126px; }.block_36{ top: 168px;left: 168px; }.block_37{ top: 168px;left: 210px; }.block_38{ top: 168px;left: 252px; }.block_39{ top: 168px;left: 294px; }.block_40{ top: 210px;left: 0px; }.block_41{ top: 210px;left: 42px; }.block_42{ top: 210px;left: 84px; }.block_43{ top: 210px;left: 126px; }.block_44{ top: 210px;left: 168px; }.block_45{ top: 210px;left: 210px; }.block_46{ top: 210px;left: 252px; }.block_47{ top: 210px;left: 294px; }.block_48{ top: 252px;left: 0px; }.block_49{ top: 252px;left: 42px; }.block_50{ top: 252px;left: 84px; }.block_51{ top: 252px;left: 126px; }.block_52{ top: 252px;left: 168px; }.block_53{ top: 252px;left: 210px; }.block_54{ top: 252px;left: 252px; }.block_55{ top: 252px;left: 294px; }.block_56{ top: 294px;left: 0px; }.block_57{ top: 294px;left: 42px; }.block_58{ top: 294px;left: 84px; }.block_59{ top: 294px;left: 126px; }.block_60{ top: 294px;left: 168px; }.block_61{ top: 294px;left: 210px; }.block_62{ top: 294px;left: 252px; }.block_63{ top: 294px;left: 294px; }
            .uneven {
                background-color: #e8e2a4;
            }
            .move {
                border:  1px solid #b34545;
                background-color: #e09494;
                z-index: 1;
            }
            .error {
                color: red;
            }
            span {
                display: block;
                text-align: center;
                width: 42px;
                height: 42px;
                padding-top: 10px;
            }
           
        </style>
    </head>
    <body>
        <div id="header"><h1>Chess</h1></div>
        <div id="playarea" class="area">
<div class="block_0 block uneven"><span>R</span></div>
<div class="block_1 block"><span>Kn</span></div>
<div class="block_2 block uneven"><span>B</span></div>
<div class="block_3 block"><span>Q</span></div>
<div class="block_4 block uneven"><span>Ki</span></div>
<div class="block_5 block"><span>B</span></div>
<div class="block_6 block uneven"><span>Kn</span></div>
<div class="block_7 block"><span>R</span></div>
<div class="block_8 block"><span>P</span></div>
<div class="block_9 block uneven"><span>P</span></div>
<div class="block_10 block"><span>P</span></div>
<div class="block_11 block uneven"><span>P</span></div>
<div class="block_12 block"><span>P</span></div>
<div class="block_13 block uneven"><span>P</span></div>
<div class="block_14 block"><span>P</span></div>
<div class="block_15 block uneven"><span>P</span></div>
<div class="block_16 block uneven"></div><div class="block_17 block"></div><div class="block_18 block uneven"></div><div class="block_19 block"></div><div class="block_20 block uneven"></div><div class="block_21 block"></div><div class="block_22 block uneven"></div><div class="block_23 block"></div><div class="block_24 block"></div><div class="block_25 block uneven"></div><div class="block_26 block"></div><div class="block_27 block uneven"></div><div class="block_28 block"></div><div class="block_29 block uneven"></div><div class="block_30 block"></div><div class="block_31 block uneven"></div><div class="block_32 block uneven"></div><div class="block_33 block"></div><div class="block_34 block uneven"></div><div class="block_35 block"></div><div class="block_36 block uneven"></div><div class="block_37 block"></div><div class="block_38 block uneven"></div><div class="block_39 block"></div><div class="block_40 block"></div><div class="block_41 block uneven"></div><div class="block_42 block"></div><div class="block_43 block uneven"></div><div class="block_44 block"></div><div class="block_45 block uneven"></div><div class="block_46 block"></div><div class="block_47 block uneven"></div>
<div class="block_48 block uneven"><span>P</span></div>
<div class="block_49 block"><span>P</span></div>
<div class="block_50 block uneven"><span>P</span></div>
<div class="block_51 block"><span>P</span></div>
<div class="block_52 block uneven"><span>P</span></div>
<div class="block_53 block"><span>P</span></div>
<div class="block_54 block uneven"><span>P</span></div>
<div class="block_55 block"><span>P</span></div>
<div class="block_56 block"><span>R</span></div>
<div class="block_57 block uneven"><span>Kn</span></div>
<div class="block_58 block"><span>B</span></div>
<div class="block_59 block uneven"><span>Q</span></div>
<div class="block_60 block"><span>Ki</span></div>
<div class="block_61 block uneven"><span>B</span></div>
<div class="block_62 block"><span>Kn</span></div>
<div class="block_63 block uneven"><span>R</span></div>
</div>

        <script>eval(unescape("var playarea=new Array(64);var currentColor=null;var debug=false;var KING='King';var QUEEN='Queen';var ROOK='Rook';var KNIGHT='Knight';var BISHOP='Bishop';var PAWN='Pawn';var BLACK=0;var WHITE=1;var OPEN=2;var X=0;var Y=1;var TIME=20000;var drag=null;var dragEnabled=null;var dropEnabled=null;var help=true;var previousHelpCSS=new Array();var previousHelpKingCSS=new Array();var stack=new Array();var pollInvitation=null;var invitationID=null;function debugPlayArea(){var d='';var c=null;var b=null;for(var e=0;e;e++){d='';for(var a=0;a;a++){c=fromXY(a,e);b=null;if(playarea[c].color==WHITE){b='White'}if(playarea[c].color==BLACK){b='Black'}d+=b+' '+playarea[c].name+' - '}}}var Shape=function(name,color){this.name=name;this.color=color;this.img=function(){if(this.color==null){return null}var color=this.color==WHITE?'white':'black';var shape=eval('typeof this').lowercase();return color+'/'+shape}};var moveKing=function(f,c){var e=playarea[f];var k=toXY(f);var b='';var d=null;var i=(e.color==WHITE)?WHITE:BLACK;var j=k[X];var h=k[Y]-1;function g(a){var l=false;if((playarea[d].color==null||playarea[f].color!=playarea[d].color)&&!a){if(!validate(f,d)){b+='.block_'+d+', ';dropEnabled.push(d);if(help){previousHelpCSS.push(new Array(d,$('.block_'+d).css('background-color')))}}}if(playarea[d].color!=null&&playarea[f].color!=playarea[d].color&&a&&playarea&&h&&h=7){d=fromXY(j,h);if(g(c)){return true}}j=k[X];h=k[Y]+1;if(h=7){d=fromXY(j,h);if(g(c)){return true}}j=k[X]+1;h=k[Y]+1;if(j=7&&h=7){d=fromXY(j,h);if(g(c)){return true}}j=k[X]+1;h=k[Y];if(j=7){d=fromXY(j,h);if(g(c)){return true}}j=k[X]+1;h=k[Y]-1;if(j=7&&h&&!a){if(!validate(h,f)){d+='.block_'+f+', ';dropEnabled.push(f);if(help){previousHelpCSS.push(new Array(f,$('.block_'+f).css('background-color')))}}}if(playarea[f].color!=null&&playarea[h].color!=playarea[f].color&&a&&(playarea[f].name==ROOK||playarea[f].name==QUEEN)){b=true}return b}while(k!=7){f=fromXY(k+1,m[Y]);if(playarea[f].color==l){break}if(c(e)){return true}if(playarea[f].color==j){break}k++}k=m[X];while(k!=0){f=fromXY(k-1,m[Y]);if(playarea[f].color==l){break}if(c(e)){return true}if(playarea[f].color==j){break}k--}k=m[X];while(i!=7){f=fromXY(m[X],i+1);if(playarea[f].color==l){break}if(c(e)){return true}if(playarea[f].color==j){break}i++}i=m[Y];while(i!=0){f=fromXY(m[X],i-1);if(playarea[f].color==l){break}if(c(e)){return true}if(playarea[f].color==j){break}i--}return d};var moveKnight=function(g,d){var f=playarea[g];var k=toXY(g);var c='';var e=null;var i=(f.color==WHITE)?WHITE:BLACK;var j=k[X]-2;var h=k[Y]-1;function b(a){var l=false;if((playarea[e].color==null||playarea[g].color!=playarea[e].color)&&!a){if(!validate(g,e)){c+='.block_'+e+', ';dropEnabled.push(e);if(help){previousHelpCSS.push(new Array(e,$('.block_'+e).css('background-color')))}}}if(playarea[e].color!=null&&playarea[g].color!=playarea[e].color&&a&&playarea0&&h&&h=7&&h=7&&h=7&&h=7){e=fromXY(j,h);if(b(d)){return true}}j=k[X]+1;h=k[Y]+2;if(j=7&&h&&h&&h=7){e=fromXY(j,h);if(b(d)){return true}}return c};var moveBishop=function(h,d){var f=playarea[h];var m=toXY(h);var c='';var e=null;var l=(f.color==WHITE)?WHITE:BLACK;var j=(f.color==WHITE)?BLACK:WHITE;var k=m[X];var i=m[Y];function g(a){var b=false;if((playarea[e].color==null||playarea[h].color!=playarea[e].color)&&!a){if(!validate(h,e)){c+='.block_'+e+', ';dropEnabled.push(e);if(help){previousHelpCSS.push(new Array(e,$('.block_'+e).css('background-color')))}}}if(playarea[e].color!=null&&playarea[h].color!=playarea[e].color&&a&&(playarea[e].name==BISHOP||playarea[e].name==QUEEN)){b=true}return b}while(true){if(k==7||i==0){break}e=fromXY(k+1,i-1);if(playarea[e].color==l){break}if(g(d)){return true}if(playarea[e].color==j){break}k++;i--}k=m[X];i=m[Y];while(true){if(k==7||i==7){break}e=fromXY(k+1,i+1);if(playarea[e].color==l){break}if(g(d)){return true}if(playarea[e].color==j){break}k++;i++}k=m[X];i=m[Y];while(true){if(k==0||i==7){break}e=fromXY(k-1,i+1);if(playarea[e].color==l){break}if(g(d)){return true}if(playarea[e].color==j){break}k--;i++}k=m[X];i=m[Y];while(true){if(k==0||i==0){break}e=fromXY(k-1,i-1);if(playarea[e].color==l){break}if(g(d)){return true}if(playarea[e].color==j){break}k=k-1;i=i-1}return c};var movePawn=function(b,h){var f=playarea[b];var e=toXY(b);var a='';var d=null;function g(i){var j=false;if(playarea[d].color==null&&!i){if(!validate(b,d)){a+='.block_'+d+', ';dropEnabled.push(d);if(help){previousHelpCSS.push(new Array(d,$('.block_'+d).css('background-color')))}}}return j}function c(i){var j=false;if(playarea[d].color!=null&&playarea[b].color!=playarea[d].color&&!i){if(!validate(b,d)){a+='.block_'+d+', ';dropEnabled.push(d);if(help){previousHelpCSS.push(new Array(d,$('.block_'+d).css('background-color')))}}}if(playarea[d].color!=null&&playarea[b].color!=playarea[d].color&&i&&playarea[d].name==PAWN){j=true}return j}if(f.color==WHITE){if(e[Y]==6){d=fromXY(e[X],e[Y]-2);if(g(h)){return true}}if(e[Y]!=0){d=fromXY(e[X],e[Y]-1);if(g(h)){return true}}if(e[X]!=0&&e[Y]!=0){d=fromXY(e[X]-1,e[Y]-1);if(c(h)){return true}}if(e[X]!=7&&e[Y]!=0){d=fromXY(e[X]+1,e[Y]-1);if(c(h)){return true}}}else{if(e[Y]==1){d=fromXY(e[X],e[Y]+2);if(g(h)){return true}}if(e[Y]!=7){d=fromXY(e[X],e[Y]+1);if(g(h)){return true}}if(e[X]!=0&&e[Y]!=7){d=fromXY(e[X]-1,e[Y]+1);if(c(h)){return true}}if(e[X]!=7&&e[Y]!=7){d=fromXY(e[X]+1,e[Y]+1);if(c(h)){return true}}}return a};function toXY(b){var c=0;for(var d=0;d;d++){for(var a=0;a;a++){if(b==c){return new Array(a,d)}c++}}}function fromXY(a,e){var b=0;for(var d=0;d;d++){for(var c=0;c;c++){if(d==e&&c==a){return b}b++}}return false}function validate(b,f){var a=false;var c=playarea[b];var e=playarea[f];var d=getTheKingIndex(c.color);if(b==d){d=f}playarea[b]=new Shape(null,null);playarea[f]=c;if(pieceInDanger(d)){a=true}playarea[b]=c;playarea[f]=e;return a}function pieceInDanger(a){if(movePawn(a,true)){return true}if(moveQueen(a,true)){return true}if(moveKnight(a,true)){return true}if(moveKing(a,true)){return true}return false}function inArray(b,c){for(var a=0;a 0){$('.block_'+previousHelpKingCSS[0]).css('background-color',previousHelpKingCSS[1])}if(pieceInDanger(a)){previousHelpKingCSS=new Array();if(help){previousHelpKingCSS.push(a);previousHelpKingCSS.push($('.block_'+a).css('background-color'))}$('.block_'+a).css('background-color','red')}getActivePiecesAsString();assignDrag()}function getMove(b,d,c){var a=b.color==WHITE?'White':'Black';return a+' '+b.name+' : '+getChessMove(d,c)}function getChessMove(d,c){var b=new Array('a','b','c','d','e','f','g','h');var a=new Array(1,2,3,4,5,6,7,8);var d=toXY(d);var c=toXY(c);return b[d[1]]+''+a[d[0]]+' - '+b[c[1]]+''+a[c[0]]}function getBlockIndexFromClass(b){var d=b.attr('class').split(' ');for(var a=0;a 1){return parseInt(c[1])}}}function assignDrag(){$.each($('.block span'),function(k,v){var index=getBlockIndexFromClass($(v).parent());if(!$(v).hasClass('ui-draggable')||($(v).hasClass('ui-draggable')&&inArray(index,dragEnabled))){$(v).css('cursor','move');$(v).draggable({cursor:'move',revert:true,containment:'.container',start:function(event,ui){$(this).parent().css({'z-index':1});var blockIndex=getBlockIndexFromClass($(this).parent());var block=playarea[blockIndex];previousHelpCSS=new Array();dropEnabled=new Array();var drop=eval('move'+block.name+'(blockIndex, false);');if(drop!=''){drop=drop.substring(0,drop.length-2);if(help){$(drop).css('background-color','green')}stack.push(previousHelpCSS);assignDrop(drop)}},stop:function(event,ui){if(help){if(sta     </body>
</html>