Merge pull request deadbeef84#20 from dwyfl/master

Stunning visual effects!

www/css/style.css

@@ -258,46 +258,43 @@ em.self { /* your name */
 }
 
 /* popup when someone attacks */
-@-webkit-keyframes attack-popup-blink {
-	0% { background: #ffe8e8; border-color: red; }
-	100% { background: #ffeeee; border-color: #fcc; }
-}
-.player p.attack {
+.player p.notification {
 	text-align: center;
 	position: fixed;
 	top: 0;
 	left: 20px;
-	color: #600;
-	border: 3px solid #fcc;
-	background: #ffe8e8;
+	color: black;
+	border: 3px solid #ccc;
+	background: #e8e8e8;
 	-webkit-border-radius: 8px;
-	-webkit-animation-name: attack-popup-blink;
-	-webkit-animation-direction: alternate;
-	-webkit-animation-duration: 0.5s;
-	-webkit-animation-iteration-count: infinite;
 	padding: 0 16px;
 	line-height: 34px;
 }
-.player p.message {
-	text-align: center;
-	position: fixed;
-	top: 0;
-	left: 20px;
+.player p.notification.message {
 	color: #060;
 	border: 3px solid #cfc;
 	background: #e8ffe8;
-	-webkit-border-radius: 8px;
-	padding: 0 16px;
-	line-height: 34px;
+}
+@-webkit-keyframes attack-popup-blink {
+	0% { background: #ffe8e8; border-color: red; }
+	100% { background: #ffeeee; border-color: #fcc; }
+}
+.player p.notification.attack {
+	color: #600;
+	border: 3px solid #fcc;
+	background: #ffe8e8;
+	-webkit-animation-name: attack-popup-blink;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-duration: 0.5s;
+	-webkit-animation-iteration-count: infinite;
 }
 @media screen and (max-width: 1500px) {
-	.player p.attack {
+	.player p.notification {
 		left: auto;
 		right: 20px;
 	}
 }
 
-
 /* the board */
 .board-wrapper {
 	width: 96px;
@@ -312,6 +309,10 @@ em.self { /* your name */
 	float: left;
 	width: 100%;
 }
+.column {
+	float: left;
+	width: 8px;
+}
 .cell {
 	float: left;
 	width: 8px;
@@ -323,6 +324,9 @@ em.self { /* your name */
 .self .row {
 	height: 16px;
 }
+.self .column {
+	width: 16px;
+}
 .self .cell {
 	width: 16px;
 	height: 16px;
@@ -411,6 +415,15 @@ em.self { /* your name */
 	position: absolute;
 	z-index: 10;
 }
+/* sparkle */
+.sparkle {
+	background-image: url('../images/sparkle.gif');
+	width: 32px;
+	height: 32px;
+	position: absolute;
+	margin: -8px -8px;
+	z-index: 10;
+}
 /* rickrolling */
 .rickroll-1 .player.self .board::after {
 	opacity: 0.5;

www/index.php

@@ -133,7 +133,8 @@ function start(name) {
 	      <p><label for="settings_km_drop">Hard drop</label><input id="settings_km_drop" class="keycode_listener" type="text" name="drop" /></p>
         <p><label for="settings_km_softdrop">Sonic drop</label><input id="settings_km_softdrop" class="keycode_listener" type="text" name="soft_drop" /></p>
         <p><label for="settings_km_hold">Hold piece</label><input id="settings_km_hold" class="keycode_listener" type="text" name="hold" /></p>
-	      <p><label for="settings_km_rotatecw">Rotate CW</label><input id="settings_km_rotatecw" class="keycode_listener" type="text" name="rotate_cw" /></p>
+        <p><label for="settings_km_talk">Talk</label><input id="settings_km_talk" class="keycode_listener" type="text" name="talk" /></p>
+        <p><label for="settings_km_rotatecw">Rotate CW</label><input id="settings_km_rotatecw" class="keycode_listener" type="text" name="rotate_cw" /></p>
 	      <p><label for="settings_km_rotateccw">Rotate CCW</label><input id="settings_km_rotateccw" class="keycode_listener" type="text" name="rotate_ccw" /></p>
 	      <p><label for="settings_km_self">Self</label><input id="settings_km_self" class="keycode_listener" type="text" name="inventory_self" /></p>
 	      <p><label for="settings_km_targetleft">Target left</label><input id="settings_km_targetleft" class="keycode_listener" type="text" name="inventory_target_left" /></p>

www/js/game.js

@@ -303,7 +303,7 @@ Game.prototype.handleMessage = function(msg) {
 					}
 					self.linesRemoved += l;
 					if (self.lastDropTspin) {
-						self.player.view.notify('<p class="message">T-spin' + (self.backToBack?' back-to-back! WOW!':'! Nice job!') + '</p>');
+						self.player.emit(Player.EVENT_NOTIFY, '<p class="notification message">T-spin' + (self.backToBack?' back-to-back! WOW!':'! Nice job!') + '</p>');
 					}
 					self.backToBack = self.lastDropTspin;
 				});
@@ -435,7 +435,7 @@ Game.prototype.handleMessage = function(msg) {
 						}
 					} else {
 						if (Settings.misc.attack_notifications) {
-							this.player.view.notify('<p class="attack"><em>' + sourcePlayer.name + '</em> ' + (msg.reflect ? 'reflected' : 'used') + ' special <em>' + Special.getSpecial(msg.s).name + '</em></p>');
+							this.player.emit(Player.EVENT_NOTIFY, '<p class="notification attack"><em>' + sourcePlayer.name + '</em> ' + (msg.reflect ? 'reflected' : 'used') + ' special <em>' + Special.getSpecial(msg.s).name + '</em></p>');
 						}
 						this.player.use(msg);
 					}

www/js/gameview.js

@@ -50,7 +50,7 @@ GameView.prototype.init = function() {
 		}
 	}
 
-	var keydownHandler = function(e) {
+	$(document).keydown(function(e) {
 
 		if (document.activeElement && $(document.activeElement).filter(':text').length)
 			return;
@@ -76,9 +76,8 @@ GameView.prototype.init = function() {
 			}
 			return false;
 		}
-	};
+	});
 
-	$(document).keydown(keydownHandler);
 	$(document).keyup(function(e){
 		self.keypressActive[e.which] = false;
 		if (self.keypressTimers[e.which]) {

www/js/player.js

@@ -38,7 +38,8 @@ Player.EVENT_GAMEOVER = "gameover";
 Player.EVENT_INVENTORY = "inventory";
 Player.EVENT_NEW_BLOCK = "new_block";
 Player.EVENT_DROP = "drop";
-Player.EVENT_SPECIAL = "SPECIAL";
+Player.EVENT_SPECIAL = "special";
+Player.EVENT_NOTIFY = "notify";
 
 Player.ROTATION_SYSTEM_CLASSIC = 0;
 Player.ROTATION_SYSTEM_SRS = 1;
@@ -127,20 +128,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);
@@ -243,7 +250,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)) {

www/js/playerview.js

@@ -33,25 +33,25 @@ 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;
+			case Special.CLEAR_SPECIALS: self.specialClearSpecials(); break;
 		}
 	});
-}
-
-PlayerView.prototype.notify = function(msg) {
-	var self = this;
-	var offset = 0;
-	var $msg = $(msg);
-	for (var i = 0; this.notifierSlots[i]; i++, offset++) ;
-	this.notifierSlots[offset] = true;
-	$msg.data('offset', offset);
-	$msg.css('top', offset * 50);
-	setTimeout(function(obj){
-		obj.animate({'opacity':0}, 500, function(){
-			self.notifierSlots[$(this).data('offset')] = false;
-			$(this).remove();
-		});
-	}, 2000, $msg);
-	this.el.append($msg);
+	this.player.on(Player.EVENT_NOTIFY, function(msg) {
+		var offset = 0;
+		var $msg = $(msg);
+		for (var i = 0; self.notifierSlots[i]; i++, offset++) ;
+		self.notifierSlots[offset] = true;
+		$msg.data('offset', offset);
+		$msg.css('top', offset * 50);
+		setTimeout(function(obj){
+			obj.animate({'opacity':0}, 500, function(){
+				self.notifierSlots[obj.data('offset')] = false;
+				obj.remove();
+			});
+		}, 2000, $msg);
+		self.el.append($msg);
+	});
 }
 
 PlayerView.prototype.render = function() {
@@ -196,7 +196,7 @@ PlayerView.prototype.specialBomb = function() {
 PlayerView.prototype.specialMoses = function() {
 	var $rainbow = $('<div class="nyancat-rainbow" />');
 	var $nyancat = $('<div class="nyancat" />');
-	var centerOffset = this.el.find('.board .row:first > .cell:eq(' + Math.floor(this.player.width/2) + ')').offset();
+	var centerOffset = this.el.find('.board .row:first .cell').eq(Math.floor(this.player.width/2)).offset();
 	var boardHeight = this.el.find('.board').height();
 	centerOffset.left -= 3;
 	$rainbow.appendTo('#container')
@@ -209,4 +209,53 @@ PlayerView.prototype.specialMoses = function() {
 		.offset(centerOffset)
 		.css({ top: centerOffset.top - 8 })
 		.animate({ top: '+='+boardHeight }, 1000, function(){ $(this).remove(); });
+	if (!this.isPlayer) {
+		centerOffset.left -= 5;
+		$nyancat.add($rainbow).offset(centerOffset);
+		$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);
+	}
+}
+
+PlayerView.prototype.specialClearSpecials = function() {
+	var self = this;
+	//var nodes = $();
+	this.el.find('.board .special').each(function() {
+		var node = $('<div class="sparkle" />')
+			.offset($(this).offset())
+			.appendTo('#container')
+			.css({'background-image': "url('../images/sparkle.gif?" + Date.now() + "')"});
+		if (!self.isPlayer)
+			node.css({'-webkit-transform': 'scale(0.5)', margin: '-4px -4px'});
+		//nodes.add(node);
+		node.fadeOut(2000, function(){ node.remove(); });
+	});
+	//setTimeout(function(obj){ obj.fadeOut(500, function(){ obj.remove(); }); }, 500, nodes);
 }