From cb63860e4068e2c36066d1bbe6a19c554f8f0ef6 Mon Sep 17 00:00:00 2001
From: Robert Kolner <robert.kolner@gmail.com>
Date: Sun, 18 Mar 2012 21:22:39 +0100
Subject: [PATCH] Added score.

---
 play.html         | 32 ++++++++++++++++++++++++++++++++
 tetris-canvas.js  | 19 ++++++++++++++++---
 tetris-control.js |  2 +-
 tetris.js         |  9 +++++++--
 4 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100755 play.html

diff --git a/play.html b/play.html
new file mode 100755
index 0000000..f4195c5
--- /dev/null
+++ b/play.html
@@ -0,0 +1,32 @@
+<html>
+	<head>
+		<script src="jquery-1.7.1.js"></script>
+		<script src="utils.js"></script>
+		<script src="tetris-canvas.js"></script>
+		<script src="tetris.js"></script>
+		<script src="tetris-control.js"></script>
+		
+		<style>
+			#tetris-board {
+				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:
+				<li>a,d - left/right</li>
+				<li>w - rotate</li>
+				<li>s - down</li>
+				<li>space - hard drop</li>
+			</ul>
+		</div>
+	</body>
+</html>
diff --git a/tetris-canvas.js b/tetris-canvas.js
index 3af3c9e..20b2ad7 100644
--- a/tetris-canvas.js
+++ b/tetris-canvas.js
@@ -1,4 +1,4 @@
-function TetrisCanvas(id, width, height) {
+function TetrisCanvas(id, width, height, linesId) {
 	/***********/
 	/* Colors: */
 	/***********/
@@ -28,6 +28,9 @@ function TetrisCanvas(id, width, height) {
 	this.sWidth = width;
 	this.sHeight = height;
 
+	/* Score box: */
+	this.linesElement = 0;
+
 	/**************/
 	/* Functions: */
 	/**************/
@@ -51,17 +54,27 @@ function TetrisCanvas(id, width, height) {
 		}
 	}
 
+	this.updateLines = function(newLines) {
+		if (this.linesElement != 0) {
+			this.linesElement.html(newLines);
+		}
+	}
+
 	/***************/
 	/* Constructor */
 	/***************/
-	this.TetrisCanvas = function(id) {
+	this.TetrisCanvas = function(id, linesId) {
 		var canvas = document.getElementById(id);
 		this.pxHeight = $("#"+id).height();
 		this.pxWidth = $("#"+id).width();
 		this.pxRectSize = (this.pxWidth - (this.pxSeparatorSize * this.sWidth)) / (this.sWidth);
 		
 		this.context = canvas.getContext("2d");
+		
+		if (linesId) {
+			this.linesElement = $("#"+linesId);
+		}
 	}
 	
-	this.TetrisCanvas(id);
+	this.TetrisCanvas(id, linesId);
 }
diff --git a/tetris-control.js b/tetris-control.js
index 8693be3..e9d5a76 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");
+	game = new TetrisGame("tetris-board", "lines");
 	game.startGame();
 });
diff --git a/tetris.js b/tetris.js
index d2d72bf..a349109 100644
--- a/tetris.js
+++ b/tetris.js
@@ -1,4 +1,4 @@
-function TetrisGame(id) {
+function TetrisGame(id, linesId) {
 	/*********/
 	/* Enum: */
 	/*********/
@@ -28,10 +28,11 @@ function TetrisGame(id) {
 	/* Variables: */
 	/**************/
 	this.gameIsOver = false;
+	this.linesCleared = 0;
 
 	this.width = 10;
 	this.height = 15;
-	this.canvas = new TetrisCanvas(id, this.width, this.height);
+	this.canvas = new TetrisCanvas(id, this.width, this.height, linesId);
 	this.board = createArray(this.width, this.height);
 	
 	this.currentBrickId = 0;
@@ -253,6 +254,10 @@ function TetrisGame(id) {
 		for (var i = 0; i < filledLines.length; i++) {
 			this.removeLine(filledLines[i]-i);
 		}
+
+		this.linesCleared += filledLines.length;
+		this.canvas.updateLines(this.linesCleared);
+
 		this.drawUnlock();
 		this.redraw();