jquery tweets
by turiyag
HTML
<script src="http://github.com/kerberoS/jQuery-Tweets/raw/master/js/jquery.tweets.0.1.js"></script>
<div id="gameboard">
</div>
<h2>Console</h2>
<div id="console">
</div>
CSS
h2 {
font-size:2em;
}
#gameboard {
padding: 20px;
}
#gameboard td {
width:40px;
height:40px;
vertical-align: top;
}
#gameboard td img {
top: 4px;
left: 4px;
}
.blackCell {
background: black;
color: white;
border: 2px solid white;
}
.validBlack {
background: #077;
border: 2px solid #0BB;
}
.whiteCell {
background: white;
color: black;
border: 2px solid black;
}
.validWhite {
background: #CFF;
border: 2px solid #088;
}
.over {
border: 2px solid #0F0;
}
JavaScript
var players = {
"red": {
"pieceurl" : "http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Red-icon.png"
},
"gray": {
"pieceurl" : "http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png"
},
}
var lastCell;
var isDragging = false;
$(function() {
drawBoard(8,8);
drawPiece(1,1,"red");
drawPiece(2,3,"red");
drawPiece(1,4,"red");
drawPiece(2,1,"red");
drawPiece(0,0,"gray");
drawPiece(1,0,"gray");
drawPiece(2,0,"gray");
drawPiece(5,6,"gray");
drawPiece(4,6,"gray");
$('img').draggable({});
$('#gameboard td').droppable({
hoverClass: 'over',
activate: function (event, ui) {
isDragging = true;
},
drop: function (event, ui) {
var img = ui.draggable;
if($(this).validMove()) {
movePiece(img, $(this));
markValidMoves($(this));
} else {
img.draggable('option', 'revert', true);
}
isDragging = false;
}
});
$('#gameboard td img').hover(function () {
if(!isDragging) {
markValidMoves($(this).parent());
}
}, function () {
if(!isDragging) {
unmarkValidMoves();
}
});
});
//Just a simple "console", which is actually a <div>
function log(data) {
$("#console").prepend("<p>" + data + "</p>");
if ($("#console p").length > 30) {
$("#console p:last").remove();
}
}
//Draws a board of width w, and height h
function drawBoard(w, h) {
var x, y;
var tbl = $("<table/>");
var thisrow;
var thiscell;
tbl.appendTo($("#gameboard"));
for(y = 0; y < h; y++) {
thisrow = $("<tr/>");
thisrow.appendTo(tbl);
for(x = 0; x < w; x++) {
thiscell = $("<td/>");
thiscell.data("x",x); //Remember the x and y coordinates for later use
thiscell.data("y",y);
//Paint every other cell black
if((x + y) % 2 == 0) {
thiscell.addClass("blackCell");
} else...