<html>
<head>
    <title>Chess Board</title>
    <script src="js/underscore.js"></script>
    <script src="js/require.js"></script>
    <script>
    require.config({
        baseUrl: "js/",
    });
    require(["kinetic"], function(Kinetic) {
        var stage = new Kinetic.Stage({
            container: "board",
            width: 800,
            height: 600
        });

        var board = new Kinetic.Layer();
        stage.add(board);

        var SIZE = 50;
        _.each(_.range(8), function(sy) {
            _.each(_.range(8), function(sx) {
                var checker = (sx + sy) % 2 == 0 ? "white" : "black";
                var square = new Kinetic.Rect({
                    x: (sx * SIZE), y: (sy * SIZE), width: SIZE, height: SIZE,
                    fill: checker, stroke: "grey", strokeWidth: 2
                });
                board.add(square);
            });
        });

        stage.draw();

        var pieces = new Kinetic.Layer();
        stage.add(pieces);

        var img = new Image();
        img.onload = function() {
            var p = new Kinetic.Image({
                x: 0,
                y: 0,
                width: 50,
                height: 50,
                image: img
            });
            pieces.add(p);
            stage.draw();
        }
        img.src = "pieces/kd.svg"
    });
</script>
</head>
<body>
Chess.
<div id="board"></div>
</body>
</html>

<html>
<head>
    <title>Chess Board</title>
    <script src="js/underscore.js"></script>
    <script src="js/require.js"></script>
    <script>
    require.config({
        baseUrl: "js/",
    });
    require(["kinetic", "board"], function(Kinetic, Board) {
        var stage = new Kinetic.Stage({
            container: "board",
            width: 800,
            height: 600
        });

        var board = new Board(stage);
    });
</script>
</head>
<body>
Chess.
<div id="board"></div>
</body>
</html>

Load all pieces when creating the board.
Load all pieces when creating the board.
