Added next bricks.

play.html

@@ -7,26 +7,26 @@
 		<script src="tetris-control.js"></script>
 		
 		<style>
-			#tetris-board {
+			#tetris-board, #next-bricks {
 				background-color:black;
-				margin-left:auto;
-				margin-right:auto;
 			}
 		</style>
 	</head>
 
 	<body>
-		<div><canvas id="tetris-board" height="720" width="480" /></div>
-		<div>
-			<p>Lines: <span id="lines">0</span></p>
-		</div>
-		<div>
-			<ul style>Controls:
+		<div style="position:relative;"><canvas id="tetris-board" height="720px" width="480px" /></div>
+		<div id="infobox" style="position:absolute;top:20px;left:520px;width:200px;">
+			<ul>Controls:
 				<li>a,d - left/right</li>
 				<li>w - rotate</li>
 				<li>s - down</li>
 				<li>space - hard drop</li>
 			</ul>
+			<hr />
+			<p style="text-align:center;">Lines: <span id="lines">0</span></p>
+			<hr />
+			<p>Next bricks:</p>
+			<div><canvas id="next-bricks" height="500px" width="100px" /></div>
 		</div>
 	</body>
 </html>

tetris-control.js

@@ -62,6 +62,6 @@ function onKeyUp(e) {
 
 $(document).ready(function() {
 	initControls();
-	game = new TetrisGame("tetris-board", "lines");
+	game = new TetrisGame("tetris-board", "lines", "next-bricks");
 	game.startGame();
 });

tetris.js

@@ -32,8 +32,9 @@ function TetrisGame(canvasId, linesCounterId, nextBricksCanvasId) {
 	
 	this.width = 10;
 	this.height = 15;
-	this.canvas = new TetrisCanvas(canvasId, this.width, this.height, linesCounterId, nextBricksCanvasId);
+	this.canvas = new TetrisCanvas(canvasId, this.width, this.height);
 	this.lineCounterElement = 0;
+	this.nextBricksCanvas = nextBricksCanvasId ? new TetrisCanvas(nextBricksCanvasId, 5, 25) : null;
 	this.board = createArray(this.width, this.height);
 	
 	this.currentBrickId = 0;
@@ -57,6 +58,30 @@ function TetrisGame(canvasId, linesCounterId, nextBricksCanvasId) {
 
 		this.canvas.drawBoard(this.board);
 		this.drawCurrentBrick();
+		this.redrawNextBrickCanvas();
+	}
+	
+	this.redrawNextBrickCanvas = function() {
+		if (this.nextBricksCanvas != null) {
+			for (var x = 0; x < this.nextBricksCanvas.sWidth; x++) {
+				for (var y = 0; y < this.nextBricksCanvas.sHeight; y++) {
+					this.nextBricksCanvas.drawRectangle(x,y,0);
+				}
+			}
+
+
+			for (var counter = 0; counter < this.nextBrickArray.length; counter++) {
+				var nextBrickId = this.nextBrickArray[(this.nextBrickArrayIndex + counter) % this.nextBrickArray.length];
+				
+				var shape = this.brickShape(nextBrickId, 2);
+				for (var i = 0; i < 4; i++) {
+					var x = 2 + shape[i][0];
+					var y = this.nextBricksCanvas.sHeight - (counter * 5 + 3 + shape[i][1]);
+
+					this.nextBricksCanvas.drawRectangle(x,y,this.bricks[nextBrickId]);
+				}
+			}	
+		}
 	}
 	
 	this.xyToTileIndex = function(x,y) {
@@ -103,7 +128,7 @@ function TetrisGame(canvasId, linesCounterId, nextBricksCanvasId) {
 			this.redraw();
 		}
 	}
-	
+
 	this.brickShape = function(brickId, brickRot) {
 		var glob_shape = this.brickShapes[brickId];
 		var shape = createArray(4,2);