Visual effect for zebra special

dwyfl · Feb 26, 2012 · 7ca27c6 · 7ca27c6
1 parent d1cbcf6
commit 7ca27c6
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/www/css/style.css b/www/css/style.css
@@ -312,6 +312,10 @@ em.self { /* your name */
 	float: left;
 	width: 100%;
 }
+.column {
+	float: left;
+	width: 8px;
+}
 .cell {
 	float: left;
 	width: 8px;
@@ -323,6 +327,9 @@ em.self { /* your name */
 .self .row {
 	height: 16px;
 }
+.self .column {
+	width: 16px;
+}
 .self .cell {
 	width: 16px;
 	height: 16px;

diff --git a/www/js/player.js b/www/js/player.js
@@ -115,20 +115,26 @@ Player.prototype.at = function(x,y) {
 	if(this.ghostBlock && this.ghostBlock.hasPieceAt(x,y) && Settings.misc.ghost_block)
 		return 10;
 	if(this.invisible) {
-		if(this.currentBlock) {
-			var bx, by;
-			for(var i = 0; i < this.currentBlock.data.length; ++i) {
-				bx = this.currentBlock.x + this.currentBlock.data[i][0];
-				by = this.currentBlock.y + this.currentBlock.data[i][1];
-				if(Math.abs(x-bx) <= 4 && Math.abs(y-by) <= 4)
-					return this.data[y * this.width + x];
-			}
-		}
+		if(this.inBlockVisinity(x,y))
+			return this.data[y * this.width + x];
 		return 9;
 	}
 	return this.data[y * this.width + x];
 }
 
+Player.prototype.inBlockVisinity = function(x, y) {
+	if (this.currentBlock) {
+		var bx, by;
+		for (var i = 0; i < this.currentBlock.data.length; ++i) {
+			bx = this.currentBlock.x + this.currentBlock.data[i][0];
+			by = this.currentBlock.y + this.currentBlock.data[i][1];
+			if (Math.abs(x-bx) <= 4 && Math.abs(y-by) <= 4)
+				return true;
+		}
+	}
+	return false;
+}
+
 // override addLines-function
 Player.prototype.addLines = function(numLines) {
 	Board.prototype.addLines.call(this, numLines);
@@ -231,7 +237,7 @@ Player.prototype.setCurrentBlock = function(block) {
 	var bb = block.getBoundingBox();
 	var bw = bb.maxx - bb.minx + 1;
 	this.currentBlock = block;
-	this.currentBlock.x = Math.floor((this.width - bw) / 2);
+	this.currentBlock.x = -bb.minx + Math.floor((this.width - bw) / 2);
 	this.currentBlock.y = -bb.miny;
 	this.emit(Board.EVENT_UPDATE);
 	if (this.collide(this.currentBlock)) {

diff --git a/www/js/playerview.js b/www/js/playerview.js
@@ -33,6 +33,7 @@ function PlayerView(player) {
 			case Special.QUAKE: self.specialQuake(); break;
 			case Special.BOMB: self.specialBomb(); break;
 			case Special.MOSES: self.specialMoses(); break;
+			case Special.ZEBRA: self.specialZebra(); break;
 		}
 	});
 }
@@ -215,4 +216,31 @@ PlayerView.prototype.specialMoses = function() {
 		$nyancat.css({'-webkit-transform': 'scale(0.5)'});
 		$rainbow.css({'-webkit-transform': 'scaleX(0.5)'});
 	}
+}
+
+PlayerView.prototype.specialZebra = function() {
+	if (!this.isPlayer)
+		this.player.zebra = typeof this.player.zebra === 'undefined' ? false : !this.player.zebra;
+	var animationDir = this.player.zebra ? '-' : '+';
+	var animationLen = this.isPlayer ? 300 : 150;
+	var $rows = this.el.find('.board .row');
+	for (var x = (this.player.zebra ? 1 : 0), i = 0; x < this.player.width; x += 2, i++) {
+		var $column = $('<div class="column"/>');
+		for (var y = 0; y < this.player.height; y++) {
+			var b = this.player.data[y * this.player.width + x];
+			if (this.isPlayer && this.player.invisible) {
+				if (!this.player.inBlockVisinity(x, y))
+					b = 0;
+			}
+			var $cell = $('<div class="cell"/>');
+			$cell.addClass(b !== 0 ? (typeof b === 'string' ? 'special special-'+b : 'block block-'+b) : 'empty');
+			$column.append($cell);
+		}
+		$column.appendTo(this.el)
+			.css({position: 'absolute'})
+			.offset($rows.first().find('.cell').eq(x).offset());
+		setTimeout(function(obj){
+			obj.animate({top: animationDir+'='+animationLen+'px', opacity: 0}, 300, function(){ obj.remove(); });
+		}, i*100, $column);
+	}
 }