Checkers

A simple jQuery UI/CSS3 checkers implementation. The logic isn't quite complete yet, and there is no AI.

by thirdender

HTML

<div id="board"></div>

SCSS

/* TODO:
 * more (or fewer) browser prefixes
 */
html, body {
    height: 100%;
    overflow: auto;
}
body {
    text-align: center;
    padding: 20px;
    background: #f5f5f5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;
    display: box;
    box-align: center;
    box-pack: center;
}
#board, #board .cell, #board .piece {
    display: inline-block;
    vertical-align: top;
}
#board {
    position: relative;
    padding: 4px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, .1);
    width: 320px;
}
#board .cell {
    width: 40px;
    height: 40px;
}
#board .black {
    background: black;
}
#board .white {
    width: 38px;
    height: 38px;
    margin: 1px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .8);
}
#board.dragging .white.ui-droppable {
    background: rgba(0, 0, 128, .4);
}
#board.dragging .white.ui-droppable.ui-droppable-disabled {
    background: none;
}
#board .piece {
    position: absolute;
    border-radius: 17px;
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    border-color: rgba(0, 0, 0, .2);
    box-shadow: -1px 1px 2px rgba(255, 255, 255, .2) inset,
        -1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 29px;
    line-height: 32px;
    color: rgba(255, 255, 255, .9);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#board .redPiece {
    background: rgb(240, 0, 0);
}
#board .blackPiece {
    background: rgb(20, 20, 20);
}

JavaScript

// TODO:
// * multiple jumps are only partially complete…
// * turn indicator
// * move history/undo
var Checkers = function(selector) {
    var self = this,
        pieces = $(),
        cells = $(),
        board = [],
        activeDraggables,
        activeDroppables;

    function debug() {
        if (window.console) {
            var output = "",
                i, j, row, cell, piece;
            for (i = 0; row = board[i]; i++) {
                for (j = 0; cell = row[j]; j++) {
                    piece = cell.piece;
                    output += !piece ? "·" :
                        piece.data("color") === "red" ? "0" : "1";
                }
                output += "\n";
            }
            console.log(output);
        }
    }

    this.buildBoard = function () {
        var boardElement = $(selector),
            i, droppable, oddCell, column, row, oddRow, white;

        // Helper function to create a piece DIV with the right position
        function createPiece(className, color) {
            var piece = $("<div />").
                addClass("piece " + className).
                css({
                    "left": column * 40 + 7,
                    "top": row * 40 + 7
                }).
                data({
                    "column": column,
                    "row": row,
                    "color": color,
                    "king": false
                });
            // Mark spot as occupied
            $.extend(board[row][column], { "piece": piece });
            // Add piece to the piece collection
            pieces.push(piece.get(0));
        }

        // Create the board cells and pieces
        for (i = 0; i < 64; i++) {
            column = i % 8;
            row = 0|(i / 8);
            oddCell = !!(i % 2);
            oddRow = !!(row % 2);
            white = oddRow ? oddCell : !oddCell;
            droppable = $("<div />").
                addClass("cell " + (white ? "white" : "black")).
                data({
   ...