game.js
/* Draw the given game to the given context.
 * Game may be null, in which case the display is cleared.
 */
Draw the given game to the given context.
Game may be null, in which case the display is cleared.
Draw the given game to the given context . Game may be null in which case the display is cleared .
function draw(ctx, game) {
    let cw = ctx.canvas.width;
    let ch = ctx.canvas.height;
    ctx.fillStyle = color(...COLORS);
    ctx.fillRect(0, 0, cw, ch);
    if (!game)
        return;
    let w = game.width;
    let h = game.height;
    let grid = game.grid;
    let s;
    if (cw / ch < w / h)
        s = cw / w;
    else
        s = ch / h;
    ctx.save();
    let tx = (cw - w  * s) / 2;
    let ty = (ch - h * s) / 2;
    let xf = affine(tx, ty, s, 0);
    game.inv = invert(xf);
    ctx.transform(...xf);
    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            let i = y * w + x;
            let v = grid[i];
            let r = COLORS[v * 3 + 0]
            let g = COLORS[v * 3 + 1]
            let b = COLORS[v * 3 + 2]
            if (game.marked[i]) {
                r = Math.pow(r,0.25);
                g = Math.pow(g,0.25);
                b = Math.pow(b,0.25);
            }
            ctx.fillStyle = color(r, g, b);
            ctx.fillRect(x, y, 1 + 1 / s, 1 + 1 / s);
        }
    }
    ctx.lineWidth = 1 / s;
    ctx.strokeStyle = '#000';
    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            let c = grid[y * w + x];
            let e = x < w - 1 ? grid[y * w + x + 1] : c;
            let s = y < h - 1 ? grid[(y + 1) * w + x] : c;
            ctx.beginPath();
            if (e !== c) {
                ctx.moveTo(x + 1, y);
                ctx.lineTo(x + 1, y + 1);
            } else {
                ctx.moveTo(x + 1, y + 1);
            }
            if (s !== c) {
                ctx.lineTo(x, y + 1);
            }
            ctx.stroke();
        }
    }
    ctx.restore();
}
function draw ( ctx , game ) { let cw = ctx . canvas . width ; let ch = ctx . canvas . height ; ctx . fillStyle = color ( ... COLORS ) ; ctx . fillRect ( 0 , 0 , cw , ch ) ; if ( ! game ) return ; let w = game . width ; let h = game . height ; let grid = game . grid ; let s ; if ( cw / ch < w / h ) s = cw / w ; else s = ch / h ; ctx . save ( ) ; let tx = ( cw - w * s ) / 2 ; let ty = ( ch - h * s ) / 2 ; let xf = affine ( tx , ty , s , 0 ) ; game . inv = invert ( xf ) ; ctx . transform ( ... xf ) ; for ( let y = 0 ; y < h ; y ++ ) { for ( let x = 0 ; x < w ; x ++ ) { let i = y * w + x ; let v = grid [ i ] ; let r = COLORS [ v * 3 + 0 ] let g = COLORS [ v * 3 + 1 ] let b = COLORS [ v * 3 + 2 ] if ( game . marked [ i ] ) { r = Math . pow ( r , 0.25 ) ; g = Math . pow ( g , 0.25 ) ; b = Math . pow ( b , 0.25 ) ; } ctx . fillStyle = color ( r , g , b ) ; ctx . fillRect ( x , y , 1 + 1 / s , 1 + 1 / s ) ; } } ctx . lineWidth = 1 / s ; ctx . strokeStyle = '#000' ; for ( let y = 0 ; y < h ; y ++ ) { for ( let x = 0 ; x < w ; x ++ ) { let c = grid [ y * w + x ] ; let e = x < w - 1 ? grid [ y * w + x + 1 ] : c ; let s = y < h - 1 ? grid [ ( y + 1 ) * w + x ] : c ; ctx . beginPath ( ) ; if ( e !== c ) { ctx . moveTo ( x + 1 , y ) ; ctx . lineTo ( x + 1 , y + 1 ) ; } else { ctx . moveTo ( x + 1 , y + 1 ) ; } if ( s !== c ) { ctx . lineTo ( x , y + 1 ) ; } ctx . stroke ( ) ; } } ctx . restore ( ) ; }
Draw the given game to the given context.
Draw the given game to the given context .