Warpten/board.js

## board.js
(function () {
    var Game = (function() {
        var Game = function(domElem) {
            var objInstance = new Game.fn.init(domElem);

            // Append click handler
            $(domElem).click(function(eventData) {
                Game.fn.onClick(eventData.pageX, eventData.pageY, objInstance);
            });

            return objInstance;
        };

        Game.fn = Game.prototype = {
            constructor: Game,

            init: function(dom) {
                return this;
            },

            setRenderer: function(renderer) { this._renderer = renderer; },
            getRenderer: function()         { return this._renderer; },

            /*
             * Initiates a new game
             */
            newGame: function(starterSide) {

            },

            /*
             * Handles click event
             */
            onClick: function(x, y, obj) {

            },
        };

        return Game;
    })();

    // Give the init function the Game prototype for later instantiation
    Game.fn.init.prototype = Game.fn;

    // Expose Game to the global scope
    window.Game = Game;
})(window);

## enums.js
(function (window, undefined) {
    var ChessEnums = {
        Piece: {
            KING:   1 << 0,
            QUEEN:  1 << 1,
            KNIGHT: 1 << 2,
            BISHOP: 1 << 3,
            ROOK:   1 << 4,
            PAWN:   1 << 5,

            BLACK:  1 << 6,
            WHITE:  1 << 7,
        },

        State: {
            STATE_DUMP_ACS: false,   // Dump attack cells
            STATE_TESTING:  false,   // Enables/Disables side toggling after a move has been done
        },
    };

    window.ChessEnums = ChessEnums;
})(window);

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>EcmaChess v1.0</title>

    <style type="text/css">
        canvas#diagram {
            display: block;
            border-radius: 3px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid black;
            box-shadow: -1px -1px 2px rgba(9, 9, 9, 0.2), 1px -1px 2px rgba(9, 9, 9, 0.2), 1px 1px 2px rgba(9, 9, 9, 0.2), -1px 1px 2px rgba(9, 9, 9, 0.2);
            background-image: url(./imgs/boardbg.png);
            background-size: 100%;
            background-position: 0 0;
        }

        body {
            width: 500px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }

        div#wrapper { position: relative; }
        div#content { margin-top: 10px; }

        div#content select {
            border: 1px solid black;
            padding: 4px;
            border-radius: 3px;
            width: 120px;
        }

        div#content input[type="button"] {
            border: 1px solid black;
            padding: 4px;
            border-radius: 3px;
            background: white;
        }

        div#wrapper canvas  { position: absolute; }
        canvas#diagram      { z-index: 100; }
        canvas#highlighter  { z-index: 200; }
        canvas#piecesHolder { z-index: 300; }
    </style>
</head>

<body>
    <div id="wrapper">
        <canvas id="diagram"></canvas>
        <canvas id="highlighter"></canvas>
        <canvas id="piecesHolder">Your browser needs to handle canvas for this demo to work.</canvas>
    </div>

    <div id="content">Play as <select name="startSide">
        <option value="64" selected="selected">White</option>
        <option value="128">Black</option>
    </select> <input type="button" value="Start a new game" id="newGame" /></div>

    <!-- Using non-minimized version for development -->
    <script src="./js/libs/jquery-1.6.2.js"></script>

    <script type="text/javascript" src="./js/renderer.js"></script>
    <script type="text/javascript" src="./js/board.js"></script>

    <script type="text/javascript">
    $(function() {
        var diagramNode   = document.getElementById("diagram");
        var highlightNode = document.getElementById("highlighter");
        var piecesHolder  = document.getElementById("piecesHolder");

        var game = new Game();
        game.setRenderer(new Renderer(diagramNode, highlightNode, piecesHolder, document.getElementById("wrapper")));

        $("input#newGame").click(function() {
            game.newGame(parseInt($("select[name='startSide'] option:selected").val()));
        });
    });
    </script>
</body>

## piece.js
(function (window, undefined) {
    var Piece = (function() {
        var Piece = function(typeMask, x, y, plrControl) {
            return new Piece.fn.init(typeMask);
        };

        Piece.fn = Piece.prototype = {
            constructor: Piece,

            init: function() {

                return this;
            },
        };

        return Piece;
    })();

    // Give the init function the Piece prototype for later instantiation
    Piece.fn.init.prototype = Piece.fn;

    // Expose Piece to the global scope
    window.Piece = Piece;
})(window);

## renderer.js
(function () {
    var Renderer = (function() {
        var Renderer = function(diagramLayer, highlighter, piecesLayer, wrapper) {
            return new Renderer.fn.init(diagramLayer, highlighter, piecesLayer, wrapper);
        };

        Renderer.fn = Renderer.prototype = {
            constructor: Renderer,

            init: function(diagramLayer, highlighter, piecesLayer, wrapper) {
                this._diagramLayer  = diagramLayer;
                this._highlighter   = highlighter;
                this._piecesLayer   = piecesLayer;

                this.setCellSize(40);

                var setSizing = function(obj, size) {
                    $(obj).css({
                        'width': size + 'px',
                        'height': size + 'px',
                    });

                    obj.width = obj.height = size;
                };

                setSizing(diagramLayer, this.getCellSize() * 8);
                setSizing(highlighter,  this.getCellSize() * 8);
                setSizing(piecesLayer,  this.getCellSize() * 8);
                setSizing(wrapper,      this.getCellSize() * 8);

                this._positionOffset = $(diagramLayer).offset();

                return this;
            },

            setCellSize: function(size) { this._cellSize = size; },
            getCellSize: function()     { return this._cellSize; },

            initBoard: function() {

            },
        };

        return Renderer;
    })();

    // Give the init function the Renderer prototype for later instantiation
    Renderer.fn.init.prototype = Renderer.fn;

    // Expose Renderer to the global scope
    window.Renderer = Renderer;
})(window);
	(function () {
	var Game = (function() {
	var Game = function(domElem) {
	var objInstance = new Game.fn.init(domElem);

	// Append click handler
	$(domElem).click(function(eventData) {
	Game.fn.onClick(eventData.pageX, eventData.pageY, objInstance);
	});

	return objInstance;
	};

	Game.fn = Game.prototype = {
	constructor: Game,

	init: function(dom) {
	return this;
	},

	setRenderer: function(renderer) { this._renderer = renderer; },
	getRenderer: function() { return this._renderer; },

	/*
	* Initiates a new game
	*/
	newGame: function(starterSide) {

	},

	/*
	* Handles click event
	*/
	onClick: function(x, y, obj) {

	},
	};

	return Game;
	})();

	// Give the init function the Game prototype for later instantiation
	Game.fn.init.prototype = Game.fn;

	// Expose Game to the global scope
	window.Game = Game;
	})(window);
	(function (window, undefined) {
	var ChessEnums = {
	Piece: {
	KING: 1 << 0,
	QUEEN: 1 << 1,
	KNIGHT: 1 << 2,
	BISHOP: 1 << 3,
	ROOK: 1 << 4,
	PAWN: 1 << 5,

	BLACK: 1 << 6,
	WHITE: 1 << 7,
	},

	State: {
	STATE_DUMP_ACS: false, // Dump attack cells
	STATE_TESTING: false, // Enables/Disables side toggling after a move has been done
	},
	};

	window.ChessEnums = ChessEnums;
	})(window);
	<!DOCTYPE html>
	<html>
	<head>
	<title>EcmaChess v1.0</title>

	<style type="text/css">
	canvas#diagram {
	display: block;
	border-radius: 3px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	box-shadow: -1px -1px 2px rgba(9, 9, 9, 0.2), 1px -1px 2px rgba(9, 9, 9, 0.2), 1px 1px 2px rgba(9, 9, 9, 0.2), -1px 1px 2px rgba(9, 9, 9, 0.2);
	background-image: url(./imgs/boardbg.png);
	background-size: 100%;
	background-position: 0 0;
	}

	body {
	width: 500px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	}

	div#wrapper { position: relative; }
	div#content { margin-top: 10px; }

	div#content select {
	border: 1px solid black;
	padding: 4px;
	border-radius: 3px;
	width: 120px;
	}

	div#content input[type="button"] {
	border: 1px solid black;
	padding: 4px;
	border-radius: 3px;
	background: white;
	}

	div#wrapper canvas { position: absolute; }
	canvas#diagram { z-index: 100; }
	canvas#highlighter { z-index: 200; }
	canvas#piecesHolder { z-index: 300; }
	</style>
	</head>

	<body>
	<div id="wrapper">
	<canvas id="diagram"></canvas>
	<canvas id="highlighter"></canvas>
	<canvas id="piecesHolder">Your browser needs to handle canvas for this demo to work.</canvas>
	</div>

	<div id="content">Play as <select name="startSide">
	<option value="64" selected="selected">White</option>
	<option value="128">Black</option>
	</select> <input type="button" value="Start a new game" id="newGame" /></div>

	<!-- Using non-minimized version for development -->
	<script src="./js/libs/jquery-1.6.2.js"></script>

	<script type="text/javascript" src="./js/renderer.js"></script>
	<script type="text/javascript" src="./js/board.js"></script>

	<script type="text/javascript">
	$(function() {
	var diagramNode = document.getElementById("diagram");
	var highlightNode = document.getElementById("highlighter");
	var piecesHolder = document.getElementById("piecesHolder");

	var game = new Game();
	game.setRenderer(new Renderer(diagramNode, highlightNode, piecesHolder, document.getElementById("wrapper")));

	$("input#newGame").click(function() {
	game.newGame(parseInt($("select[name='startSide'] option:selected").val()));
	});
	});
	</script>
	</body>
	(function (window, undefined) {
	var Piece = (function() {
	var Piece = function(typeMask, x, y, plrControl) {
	return new Piece.fn.init(typeMask);
	};

	Piece.fn = Piece.prototype = {
	constructor: Piece,

	init: function() {

	return this;
	},
	};

	return Piece;
	})();

	// Give the init function the Piece prototype for later instantiation
	Piece.fn.init.prototype = Piece.fn;

	// Expose Piece to the global scope
	window.Piece = Piece;
	})(window);
	(function () {
	var Renderer = (function() {
	var Renderer = function(diagramLayer, highlighter, piecesLayer, wrapper) {
	return new Renderer.fn.init(diagramLayer, highlighter, piecesLayer, wrapper);
	};

	Renderer.fn = Renderer.prototype = {
	constructor: Renderer,

	init: function(diagramLayer, highlighter, piecesLayer, wrapper) {
	this._diagramLayer = diagramLayer;
	this._highlighter = highlighter;
	this._piecesLayer = piecesLayer;

	this.setCellSize(40);

	var setSizing = function(obj, size) {
	$(obj).css({
	'width': size + 'px',
	'height': size + 'px',
	});

	obj.width = obj.height = size;
	};

	setSizing(diagramLayer, this.getCellSize() * 8);
	setSizing(highlighter, this.getCellSize() * 8);
	setSizing(piecesLayer, this.getCellSize() * 8);
	setSizing(wrapper, this.getCellSize() * 8);

	this._positionOffset = $(diagramLayer).offset();

	return this;
	},

	setCellSize: function(size) { this._cellSize = size; },
	getCellSize: function() { return this._cellSize; },

	initBoard: function() {

	},
	};

	return Renderer;
	})();

	// Give the init function the Renderer prototype for later instantiation
	Renderer.fn.init.prototype = Renderer.fn;

	// Expose Renderer to the global scope
	window.Renderer = Renderer;
	})(window);