sudoku game

by octatone

HTML

<script src="http://raymondmayjr.com/sudoku/js/sudoku.js"></script>
<div id="game">
</div>

CSS

#game {
    padding: 10px;
}
tr,td {
    margin:0;
    padding:0;
}
.cell {
    text-align: center;
    font-size: 24px;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid lightgray;
}
.first-row {
    border-top: 1px solid #000;
}
.first-col {
    border-left: 1px solid #000;
}
.mini-right {
    border-right: 1px solid #000;
}
.mini-bottom {
    border-bottom: 1px solid #000;
}

/* individual cells */
.cell-selected {
    background: lightBlue;
}
.game-value {
    font-weight: bold;
}
.conflict {
    color: red;
}

/* dialog */
.input-dialog {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 48px;
    height: 48px;
    background: white;
    border: 1px solid blue;
    box-shadow: 0 0 10px #000;
}
.input-input {
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    font-size: 24px;
}

JavaScript

//Generate a complete puzzle
var grid = CU.Sudoku.generate();
 
//Clear 60 cells from the puzzle
CU.Sudoku.cull(grid, 60);

var Display = {
    /* show game table */
    gameTable: function(){
        var table = $(document.createElement('table'));
        for(var r = 0; r < 9; r++){
            var tr = $(document.createElement('tr')).addClass('game-row');
            for(var c = 0; c < 9; c++){
                var td = $(document.createElement('td')).addClass('cell');
                if(grid.rows[r][c] !== 0){
                    td.html(grid.rows[r][c]).addClass('game-value');
                }
                if(r === 0){
                    td.addClass('first-row');
                }
                if(c === 0){
                    td.addClass('first-col');
                }
                if((c+1) % 3 === 0){
                    td.addClass('mini-right');
                }
                if((r+1) % 3 === 0){
                    td.addClass('mini-bottom');
                }
                tr.append(td);
            }
            table.append(tr);
        }
        $('#game').append(table);
        Binds.tableBinds();
    },
    
    entryDialog: function(cell){
        var $this = $(cell);
        /* dialog to enter value */
        var dialog = $(document.createElement('div')).addClass('input-dialog').hide();
        var form = $(document.createElement('form')).addClass('input-form');
        var input = $('<input type="text" size="1">').val($this.html()).addClass('input-input');
        dialog.append(form.append(input));
        /* display dialog */
        $('.input-dialog').remove();
        var cords = $this.offset();
        dialog.offset({top: cords.top + $this.height()/2, left: (cords.left + $this.width()/2)});
        $('body').append(dialog.fadeIn(200));
        $('.input-input').focus();
        $('.input-form').submit(function(){
            Binds.inputSubmit();
            dialog.fadeOut(200, function(){remove()});
            return false;
 ...