client side rust webview

'use strict';

var rpc = undefined;

var crossStr =
'<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n'+
'width="469.785px" height="469.785px"\n'+
'viewBox="0 0 469.785 469.785" style="enable-background:new 0 0 469.785 469.785;" xml:space="preserve">\n'+
'<g transform="matrix(1.25 0 0 -1.25 0 45)">\n'+
'   <path style="fill:#DD2E44;" d="M228.294-151.753L367.489-12.558c11.116,11.105,11.116,29.116,0,40.22\n'+
'       c-11.105,11.116-29.104,11.116-40.22,0L188.073-111.533L48.866,27.663c-11.093,11.116-29.116,11.116-40.22,0\n'+
'       c-11.105-11.105-11.105-29.116,0-40.22l139.207-139.196L8.338-291.268c-11.116-11.116-11.116-29.116,0-40.22\n'+
'       c5.552-5.564,12.834-8.34,20.116-8.34c7.27,0,14.552,2.776,20.105,8.34l139.514,139.514l139.196-139.196\n'+
'       c5.564-5.552,12.834-8.34,20.116-8.34c7.27,0,14.552,2.788,20.105,8.34c11.116,11.105,11.116,29.104,0,40.22L228.294-151.753z"/>\n'+
'</g>\n'+
'</svg>\n';

var circleStr =
'<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n'+
'    width="438.533px" height="438.533px" viewBox="0 0 438.533 438.533" style="enable-background:new 0 0 438.533 438.533;"\n'+
'    xml:space="preserve">\n'+
'   <g>\n'+
'       <path d="M409.133,109.203c-19.608-33.592-46.205-60.189-79.798-79.796C295.736,9.801,259.058,0,219.273,0\n'+
'           c-39.781,0-76.47,9.801-110.063,29.407c-33.595,19.604-60.192,46.201-79.8,79.796C9.801,142.8,0,179.489,0,219.267\n'+
'           c0,39.78,9.804,76.463,29.407,110.062c19.607,33.592,46.204,60.189,79.799,79.798c33.597,19.605,70.283,29.407,110.063,29.407\n'+
'           s76.47-9.802,110.065-29.407c33.593-19.602,60.189-46.206,79.795-79.798c19.603-33.596,29.403-70.284,29.403-110.062\n'+
'           C438.533,179.485,428.732,142.795,409.133,109.203z M353.742,297.208c-13.894,23.791-32.736,42.633-56.527,56.534\n'+
'           c-23.791,13.894-49.771,20.834-77.945,20.834c-28.167,0-54.149-6.94-77.943-20.834c-23.791-13.901-42.633-32.743-56.527-56.534\n'+
'           c-13.897-23.791-20.843-49.772-20.843-77.941c0-28.171,6.949-54.152,20.843-77.943c13.891-23.791,32.738-42.637,56.527-56.53\n'+
'           c23.791-13.895,49.772-20.84,77.943-20.84c28.173,0,54.154,6.945,77.945,20.84c23.791,13.894,42.634,32.739,56.527,56.53\n'+
'           c13.895,23.791,20.838,49.772,20.838,77.943C374.58,247.436,367.637,273.417,353.742,297.208z"/>\n'+
'   </g>\n'+
'</svg>\n';

function load(){
    var BOARD_SIZE = 300;
    var SQUARE_SIZE = parseInt(BOARD_SIZE / 3);
    var PIECE_SIZE = parseInt(SQUARE_SIZE * 0.8);
    var PIECE_CELL_INSET = (SQUARE_SIZE - PIECE_SIZE) / 2;

    function drawBoardLines(canvas) {
        for (var i = 0; i < 2; i++){
            var hLine = new fabric.Rect({
                left: 10,
                width: 280,
                top: SQUARE_SIZE * (i+1) - 5,
                height: 10,
                selectable: false,
            });
            canvas.add(hLine);

            var vLine = new fabric.Rect({
                top: 10,
                height: 280,
                left: SQUARE_SIZE * (i+1) - 5,
                width: 10,
                selectable: false,
            });
            canvas.add(vLine);
        }

        canvas.renderAll();
    }

    var canvas = new fabric.Canvas('c', {
        backgroundColor: 'rgb(200,200,200)',
        selectionColor: 'black',
        selectionLineWidth: 2
    });

    var elements = [];

    drawBoardLines(canvas);

    var addCross = function(cellX, cellY) {
        fabric.loadSVGFromString(crossStr,function(objects, options) {
            var obj = fabric.util.groupSVGElements(objects, options);
            obj.set({ left: SQUARE_SIZE * (cellX+1) + PIECE_CELL_INSET,
                    top: SQUARE_SIZE * (cellY+1) + PIECE_CELL_INSET,
                })
                .setCoords();
            obj.scaleToWidth(PIECE_SIZE);
            obj.scaleToHeight(PIECE_SIZE);

            canvas.add(obj).renderAll();
        });
    }

    var addCircle = function(cellX, cellY) {
        fabric.loadSVGFromString(circleStr,function(objects, options) {
            var obj = fabric.util.groupSVGElements(objects, options);
            obj.scaleToHeight(PIECE_SIZE)
                .set({ left: SQUARE_SIZE * (cellX+1) + PIECE_CELL_INSET,
                    top: SQUARE_SIZE * (cellY+1) + PIECE_CELL_INSET,
                })
                .setCoords();
            obj.scaleToWidth(PIECE_SIZE);
            obj.scaleToHeight(PIECE_SIZE);

            canvas.add(obj).renderAll();
        });
    }

    var consume_piece_cb = undefined;
    var consume_turn_cb = undefined;

    rpc = {
        invoke : function(arg) { window.external.invoke(JSON.stringify(arg)); },

        set_consume_piece_callback: function(cb){
            consume_piece_cb = cb;
        },

        set_consume_turn_callback: function(cb){
            consume_turn_cb = cb;
        },

        init: function() {
            rpc.invoke({cmd: 'Init'});
        },

        play: function(cell_x, cell_y) {
            rpc.invoke({cmd: 'Play', cell_x, cell_y});
        },

        reset: function() {
            rpc.invoke({cmd: 'Reset'});
        },

        load_piece_at: function(cell_x, cell_y) {
            rpc.invoke({cmd: 'GetPieceAt', cell_x, cell_y})
        },

        consume_piece: function(piece, cell_x, cell_y) {
            consume_piece_cb(piece, cell_x, cell_y);
        },

        consume_turn: function(turn) {
            consume_turn_cb(turn);
        },

        render: function(board) {
            var clear = function(){
                for (var i = 0; i < elements.length; i++){
                    var currElt = elements[i];
                    canvas.remove(currElt);
                }
            }

            clear();

            for (var cellY = 0; cellY < 3; cellY++)
            {
                for (var cellX = 0; cellX < 3; cellX++)
                {
                    rpc.load_piece_at(cellX, cellY);
                }
            }
        }
    }

    rpc.init();

    rpc.set_consume_piece_callback(function(piece, cellX, cellY) {
        if (piece == 'Cross') addCross(cellX, cellY);
        else if (piece == 'Circle') addCircle(cellX, cellY);
    });

    canvas.on('mouse:down', function(evt){
        var x = parseInt(evt.pointer.x);
        var y = parseInt(evt.pointer.y);

        var cellX = parseInt(x / SQUARE_SIZE);
        var cellY = parseInt(y / SQUARE_SIZE);

        if (cellX < 0 || cellX > 2) return;
        if (cellY < 0 || cellY > 2) return;

        rpc.play(cellX, cellY);
    });
}