gistfile1.js

var DIMENSION = 20;
var board;
var context;

var boardState = new Array(18);

function drawRPGBoard() {
    board = document.getElementById('board');
    context = board.getContext('2d');

    for (var row = 0; row < boardState.length; row++) {
        boardState[row] = new Array(36);
    
        for (var column = 0; column < boardState[row].length; column++) {
            boardState[row][column] = '';
        }
    }

    // Bind event listener to grab the clicked grid tile
    board.addEventListener('click', function(e) { 
        var x = Math.floor((e.clientX - board.offsetLeft) / DIMENSION);
        var y = Math.floor((e.clientY - board.offsetTop) / DIMENSION);
        var fillColor = '#000000';

        if (boardState[x][y] == 'X') {
            fillColor = '#ffffff';
            boardState[x][y] = '';
        } else {
            boardState[x][y] = 'X';
        }

        context.fillStyle = fillColor;
        context.fillRect((x * DIMENSION - 1), (y * DIMENSION - 1), DIMENSION - 1, DIMENSION - 1);

        wave.getState().submitDelta({'coord': String((x * DIMENSION - 1) + ',' + (y * DIMENSION - 1))});
    }, 
    false);

    // Build a 36x18 grid
    for (var x = DIMENSION; x < 720; x += DIMENSION) { 
        context.moveTo(x, 0); 
        context.lineTo(x, 360); 
    }

    for (var y = DIMENSION; y < 360; y += DIMENSION) { 
        context.moveTo(0, y); 
        context.lineTo(720, y); 
    }

    context.stroke()
}

function boardUpdated() { 
    var coordinates = wave.getState().get('coord');
    var x = Number(coordinates.split(',')[0]);
    var y = Number(coordinates.split(',')[1]);

    context.fillRect(x, y, DIMENSION - 1, DIMENSION - 1);

    document.getElementById('message').innerHTML = 'X: ' + x + ' Y: ' + y;
}

function init() {
    drawRPGBoard();

    if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(boardUpdated);
    }
}

gadgets.util.registerOnLoadHandler(init);