gistfile1.txt

sc_require('sudoku/views/cell');

Sudoku.BoardSurface = SC.CompositeSurface.extend({
    backgroundColor: "#268bd2",
    contentBinding: SC.Binding.oneWay('Sudoku.cellsController.content'),
    numberOfRows: 9,
    numberOfColumns: 9,
    currentSelection: -1,

    contentDidChange: function() {
        console.log('cells changed, triggering rendering');
        if (this.getPath('content.length') !== 81) return;
        this._resetCellContent();
        this.triggerRendering();
    }.observes('*content.[]'),

    init: function() {
        console.log('board init');
        sc_super();

        this.triggerLayout();

        var subsurfaces = this.get('subsurfaces'),
            index = 0;

        for (var i = 0; i < 9; i++) {
            for (var j = 0; j < 9; j++) {
                var height = this._cellHeight || 66,
                    width = this._cellWidth || 66,
                    x, y, surface;


                x = j * width;
                y = i * height;

                surface = Sudoku.CellSurface.create({
                    viewIndex: index,
                    i: i,
                    j: j
                });
                surface.set('frame', SC.MakeRect(x, y, width, height));
                subsurfaces.pushObject(surface);
                index++;
            }
        }
    },

    updateLayout: function() {
        var frame = this.getPath('supersurface.frame'),
            w = Math.round(frame[2] / 2) - Math.round(594 / 2),
            h = 50;

        this.set('frame', SC.MakeRect(w, h, 594, 594));

        this._cellWidth = 594 / 9;
        this._cellHeight = 594 / 9;

        this.get('subsurfaces').invoke('updateLayout');
    },

    _resetCellContent: function() {
        var content = this.get('content'),
            cells = this.get('subsurfaces'),
            cellModel, cellView;

        sc_assert(content && content.get('length') === 81, 'cell models missing or not 81');
        sc_assert(cells && cells.get('length') === 81, 'cell views missing or not 81');

        for (var i = 0; i < 81; i++) {
            cellModel = content.objectAt(i);
            cellView = cells.objectAt(i);

            cellView.set('content', cellModel);
        }

    },

    keyDown: function(evt){
        console.log('key down', evt);
        var key = evt.which,
            handled = NO;

//        SC.LOG_OBSERVERS = true;

//        console.log('key down [%@]'.fmt(key));
        if (key === SC.Event.KEY_LEFT) {
            this.goLeft();
            handled = YES;
        } else if (key === SC.Event.KEY_RIGHT) {
            this.goRight();
            handled = YES;
        } else if (key === SC.Event.KEY_UP) {
            this.goUp();
            handled = YES;
        } else if (key === SC.Event.KEY_DOWN) {
            this.goDown();
            handled = YES;
        }

//        SC.LOG_OBSERVERS = false;
        return handled;
    },

    goLeft: function() {
        console.log('left')
        var currentSelection = this.get('currentSelection');
        if (currentSelection === 0) return;
        this._previousSelection = currentSelection;
        this.decrementProperty('currentSelection');
    },

    goRight: function() {
        console.log('right')
        var currentSelection = this.get('currentSelection');
        if (currentSelection === this.getPath('content.length') - 1) return;
        this._previousSelection = currentSelection;
        this.incrementProperty('currentSelection');
    },

    goUp: function() {
        console.log('up')
        var currentSelection = this.get('currentSelection'),
            numCols = this.get('numberOfColumns');
        if (currentSelection - numCols < 0) return;
        this._previousSelection = currentSelection;
        this.decrementProperty('currentSelection', numCols);
    },

    goDown: function() {
        console.log('down')
        var currentSelection = this.get('currentSelection'),
            numCols = this.get('numberOfColumns');
        if (currentSelection + numCols > this.getPath('content.length') - 1) return;
        this._previousSelection = currentSelection;
        this.incrementProperty('currentSelection', numCols);
    },

    highlightSelection: function() {
        var currentSelection = this.get('currentSelection'),
            childViews = this.get('subsurfaces');
        var view = childViews.objectAt(currentSelection);

        console.log('currentselection, view ', currentSelection, view);
        if (view) {
            if (this._lastFocused) this._lastFocused.setIfChanged('focus', false);
            view.set('focus', true);
            this._lastFocused = view;
        }
    }.observes('currentSelection'),

    mouseDown: function(evt){
        console.log('mouseDown');

    }


});


Sudoku.BoardSurface.MAX_WIDTH = 594;
Sudoku.BoardSurface.MAX_Height = 594;


---------

/**
 * An individual cell's surface
 * @author Michael Harris
 */
Sudoku.CellSurface = SC.View.extend(SC.ContentDisplay, {
    displayProperties: ['focus'],
    contentDisplayProperties: ['value'],
    content: null,
    focus: false,

    init: function() {
        sc_super();
        var layers = this.get('layers');

        this._valueLayer = Sudoku.ValueLayer.create({
            layout: {top: 0, left: 0, right: 0, bottom: 0}
        });

        layers.pushObject(this._valueLayer);
    },

    surface: function() {
        return this.get('supersurface');
    }.property(),

//    mouseEntered: function(evt){
//        console.log('mouse enetered', evt.target);
//    },

    willRenderLayers: function(ctx) {
        console.log('willRenderLayers ', this.get('isFirstResponder'));
        SC.Benchmark.start('cellUpdateDisplay');

        var w = this.get('frame')[2],
            h = this.get('frame')[3],
            i = this.get('i'),
            j = this.get('j'),
            normal = "#002b36",
            highlight = "#ccc",
            focus = this.get('focus');


//        if(!ctx.width || !ctx.height) return;
//        console.log('ctx.width and height', ctx.width, ctx.height)
        ctx.save();
        ctx.clearRect(0, 0, ctx.width, ctx.height);

        // Clear background.
        ctx.fillStyle = focus ? highlight : normal;
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "#aaa";
        ctx.strokeRect(0, 0, w, h);

        // top line
        if (i === 0) {
            ctx.beginPath();
            ctx.lineTo(0, 1);
            ctx.lineTo(w, 1);
            ctx.closePath();
//            ctx.strokeStyle = "#aaa";
            ctx.stroke();
        }

        // left line
        if (j === 0) {
            ctx.beginPath();
            ctx.lineTo(1, 1);
            ctx.lineTo(1, h);
            ctx.closePath();
//            ctx.strokeStyle = "#aaa";
            ctx.stroke();
        }

        // vertical lines, every 3x3
        if (i === 2 || i === 5 || i === 8) {
            ctx.beginPath();
            ctx.lineTo(0, h - 1);
            ctx.lineTo(w, h - 1);
            ctx.closePath();
            ctx.stroke();
        }

        // horizontal lines, every 3x3
        if (j === 2 || j === 5 || j === 8) {
            ctx.beginPath();
            ctx.lineTo(w - 1, 0);
            ctx.lineTo(w - 1, h);
            ctx.closePath();
            ctx.stroke();
        }

        ctx.restore();

        if (this.get('content')) {
            this._valueLayer.set('value', this.getPath('content.value'));
        }
        SC.Benchmark.end('cellUpdateDisplay');
    }
});