Low-res battle support

js/client-battle.js

@@ -51,7 +51,7 @@
 			this.add(data);
 		},
 		focus: function() {
-			this.battle.play();
+			if (this.battle.playbackState === 3) this.battle.play();
 			ConsoleRoom.prototype.focus.call(this);
 		},
 		blur: function() {
@@ -67,6 +67,7 @@
 			this.updateControls();
 		},
 		add: function(data) {
+			if (!data) return;
 			if (data.substr(0,6) === '|init|') {
 				return this.init(data);
 			}
@@ -104,12 +105,14 @@
 
 				// battle is seeking
 				this.$controls.html('');
+				this.controlsShown = false;
 				return;
 
 			} else if (this.battle.playbackState === 2 || this.battle.playbackState === 3) {
 
 				// battle is playing or paused
 				this.$controls.html('<p><button name="skipTurn">Skip turn <i class="icon-step-forward"></i></button></p>');
+				this.controlsShown = false;
 				return;
 
 			}
@@ -140,7 +143,7 @@
 			} else if (this.side) {
 
 				// player
-				this.updateControlsForPlayer()
+				this.updateControlsForPlayer(true);
 
 			} else if (this.battle.mySide.initialized && this.battle.yourSide.initialized) {
 
@@ -150,6 +153,7 @@
 			} else {
 
 				// empty battle
+				this.$controls.html('<p><em>Waiting for players...</em></p>');
 				this.$join = $('<div class="playbutton"><button name="joinBattle">Join Battle</button></div>');
 				this.$battle.append(this.$join);
 
@@ -158,8 +162,12 @@
 			// This intentionally doesn't happen if the battle is still playing,
 			// since those early-return.
 			app.topbar.updateTabbar();
+			if (!this.side) this.controlsShown = false;
 		},
-		updateControlsForPlayer: function() {
+		controlsShown: false,
+		updateControlsForPlayer: function(noForce) {
+			if (noForce && this.controlsShown) return false;
+			this.controlsShown = true;
 			if (!this.request) {
 				if (this.battle.kickingInactive) {
 					this.$controls.html('<div class="controls"><p><button name="setTimer" value="off"><small>Stop timer</small></button> <small>&larr; Your opponent has disconnected. Click this to delay your victory.</small></p></div>');

style/client.css

@@ -1060,55 +1060,17 @@ a.ilink:hover {
 	color: #EE4433;
 	border-color: #EE4433;
 }
-.tiny-layout .battlewrapper .battle-log,
-.tiny-layout .battlewrapper .battle-log-add,
-.small-layout .battlewrapper .battle-log,
-.small-layout .battlewrapper .battle-log-add {
-	display: none;
+@media (max-width:750px) {
+	.battle-log,
+	.battle-log-add {
+		display: none;
+	}
 }
 
-.tiny-height .controls {
-	position: absolute;
-	bottom: 10px;
-	left: 0;
-	right: 0;
-	background: #444444;
-	background: rgba(40,40,40,.85);
-	color: #FFFFFF;
-	padding: 4px 8px;
-}
-.tiny-height .battle-controls .whatdo {
-	color: #FFFFFF;
-}
-.tiny-height .battle-controls .whatdo small.weak {
-	color: #DDDD55;
-	border-color: #DDDD55;
-}
-.tiny-height .battle-controls .whatdo small.critical {
-	color: #FF7766;
-	border-color: #FF7766;
-}
-.tiny-height .movemenu {
-	display: none;
-	padding: 0 100px 0 90px;
-}
-.tiny-height .switchmenu {
-	display: none;
-	padding: 0 70px 0 180px;
-}
-.tiny-height .moveselect {
-	position: absolute;
-	left: 20px;
-	bottom: 20px;
-}
-.tiny-height .switchselect {
-	position: absolute;
-	right: 20px;
-	bottom: 20px;
-}
 .moveselect button,
 .switchselect button {
 	background: transparent;
+	cursor: default;
 	border: 0;
 	font-weight: bold;
 	font-style: italic;
@@ -1204,19 +1166,6 @@ a.ilink:hover {
 	background: #009AA4;
 }
 
-.tiny-height .battle-controls .whatdo {
-	padding-bottom: 50px;
-}
-.tiny-height .battle-controls .move-controls .whatdo,
-.tiny-height .battle-controls .switch-controls .whatdo {
-	padding-bottom: 5px;
-}
-.tiny-height .move-controls .movemenu,
-.tiny-height .switch-controls .switchmenu {
-	display: block;
-	margin-right: 0;
-}
-
 .movemenu button {
 	float: left;
 	display: block;
@@ -1298,6 +1247,71 @@ a.ilink:hover {
 	color: #777777 !important;
 }
 
+@media (max-height:571px) {
+	.controls {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		background: #444444;
+		background: rgba(40,40,40,.85);
+		color: #FFFFFF;
+		padding: 4px 8px;
+	}
+	.battle-controls .whatdo {
+		color: #FFFFFF;
+	}
+	.battle-controls .whatdo small.weak {
+		color: #DDDD55;
+		border-color: #DDDD55;
+	}
+	.battle-controls .whatdo small.critical {
+		color: #FF7766;
+		border-color: #FF7766;
+	}
+	.movemenu {
+		display: none;
+		padding: 0 100px 0 90px;
+	}
+	.switchmenu {
+		display: none;
+		padding: 0 70px 0 210px;
+	}
+	.moveselect {
+		position: absolute;
+		left: 20px;
+		bottom: 20px;
+	}
+	.switchselect {
+		position: absolute;
+		right: 20px;
+		bottom: 20px;
+	}
+	.moveselect button, .switchselect button {
+		cursor: pointer;
+		padding: 4px 8px;
+		border-radius: 6px;
+		background: #E5E5E5;
+	}
+
+	.battle-controls .whatdo {
+		padding-bottom: 50px;
+	}
+	.battle-controls .move-controls .whatdo,
+	.battle-controls .switch-controls .whatdo {
+		padding-bottom: 5px;
+	}
+	.move-controls .movemenu,
+	.switch-controls .switchmenu {
+		display: block;
+		margin-right: 0;
+	}
+	.move-controls .moveselect button,
+	.switch-controls .switchselect button {
+		background: #BBBBBB;
+	}
+}
+
 /****************/
 
 #tooltipwrapper {