From d9ed85b5180cbad0a753c2f3625260b2c5240e5f Mon Sep 17 00:00:00 2001
From: Robert Kolner <robert.kolner@gmail.com>
Date: Mon, 19 Mar 2012 17:49:45 +0100
Subject: [PATCH] Added next bricks.

---
 play.html         | 18 +++++++++---------
 tetris-control.js |  2 +-
 tetris.js         | 29 +++++++++++++++++++++++++++--
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/play.html b/play.html
index f4195c5..f0eb309 100755
--- a/play.html
+++ b/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>
diff --git a/tetris-control.js b/tetris-control.js
index e9d5a76..d65812b 100644
--- a/tetris-control.js
+++ b/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();
 });
diff --git a/tetris.js b/tetris.js
index 41f73ba..7644ca1 100644
--- a/tetris.js
+++ b/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);