Add new BattleScene animation engine

battle.js is probably PS's oldest code. It's received minor touch-ups:
a refactor to prototypes early on, and then a refactor to TypeScript
and classes recently, but otherwise it's had basically zero maintenance
until now.

That's probably why this refactor took me over a week.

The biggest change is that the animation engine strewn around
Pokemon, Side, and Battle has been broken out into a new class named
BattleScene.

Pokemon, Side, and Battle now only track state; all animation is now
done in BattleScene and PokemonSprite.

The fates of major classes:

battle.ts:Pokemon - animation has been moved, mostly to PokemonSprite
battle.ts:Side - animation has been moved, to PokemonSprite/BattleScene
battle.ts:Battle - animation has been moved, mostly to BattleScene

Major changes:

- Many many variables have been renamed to be much clearer about what
  they mean. For instance, `animationDelay` is now `timeOffset`, and
  `activityDelay` is now `minWait`. A few bugs relating to me mixing
  up these two variables have also been fixed. jQuery variables named
  like `fooElem` have been renamed like `$foo`.

- The unnecessarily complicated queue1/queue2/activeQueue system,
  previously used for telling the animation engine to stop after Pause
  was pressed, has been replaced with a simple `interruptionCount`
  counter.

- The entire scene can now be reconstructed from scratch, which means
  that the `fastForward` system no longer needs to touch the DOM
  outside of the battle log. "Prev turn" and "Skip to turn" should be
  faster in 1000-turn battles now.

- The animation engine now supports displaying weather and terrain
  simultaneously.

- During a replay, Team Preview is shown for a second (instead of
  immediately skipping to the battle).

- Various aspects of the animation engine should be much less brittle
  now.

- Many bugs were fixed (and new ones were introduced).

js/client-battle-tooltips.js

@@ -386,9 +386,9 @@ var BattleTooltips = (function () {
 		var template = Tools.getTemplate(pokemon.getSpecies ? pokemon.getSpecies() : pokemon.species);
 		if (pokemon.volatiles && pokemon.volatiles.formechange) {
 			if (pokemon.volatiles.transform) {
-				text += '<small>(Transformed into ' + pokemon.volatiles.formechange[2] + ')</small><br />';
+				text += '<small>(Transformed into ' + pokemon.volatiles.formechange[1] + ')</small><br />';
 			} else {
-				text += '<small>(Forme: ' + pokemon.volatiles.formechange[2] + ')</small><br />';
+				text += '<small>(Forme: ' + pokemon.volatiles.formechange[1] + ')</small><br />';
 			}
 		}
 
@@ -525,6 +525,9 @@ var BattleTooltips = (function () {
 			for (var i = 0; i < pokemon.moveTrack.length; i++) {
 				text += '&#8226; ' + this.getPPUseText(pokemon.moveTrack[i]) + '<br />';
 			}
+			if (pokemon.moveTrack.length > 4) {
+				text += '(More than 4 moves is usually a sign of Illusion Zoroark/Zorua.)';
+			}
 			text += '</p>';
 		}
 		text += '</div></div>';

js/client-battle.js

@@ -17,14 +17,14 @@
 			this.$controls = this.$el.find('.battle-controls');
 			this.$chatFrame = this.$el.find('.battle-log');
 			this.$chatAdd = this.$el.find('.battle-log-add');
-			this.$join = null;
 			this.$foeHint = this.$el.find('.foehint');
 
 			BattleSound.setMute(Tools.prefs('mute'));
 			this.battle = new Battle(this.$battle, this.$chatFrame, this.id);
 			this.tooltips = new BattleTooltips(this.battle, this);
 
 			this.battle.roomid = this.id;
+			this.battle.joinButtons = true;
 			this.users = {};
 			this.userCount = {users: 0};
 			this.$userList = this.$('.userlist');
@@ -36,7 +36,7 @@
 
 			this.$chat = this.$chatFrame.find('.inner');
 
-			this.$options = this.battle.optionsElem.html('<div style="padding-top: 3px; padding-right: 3px; text-align: right"><button class="icon button" name="openBattleOptions" title="Options">Battle Options</button></div>');
+			this.$options = this.battle.scene.$options.html('<div style="padding-top: 3px; padding-right: 3px; text-align: right"><button class="icon button" name="openBattleOptions" title="Options">Battle Options</button></div>');
 
 			var self = this;
 			this.battle.customCallback = function () { self.updateControls(); };
@@ -243,11 +243,6 @@
 		 *********************************************************/
 
 		updateControls: function (force) {
-			if (this.$join) {
-				this.$join.remove();
-				this.$join = null;
-			}
-
 			var controlsShown = this.controlsShown;
 			this.controlsShown = false;
 
@@ -297,12 +292,10 @@
 					this.updateTimer();
 				}
 
-			} else if (!this.battle.mySide.initialized || !this.battle.yourSide.initialized) {
+			} else if (!this.battle.mySide.name || !this.battle.yourSide.name) {
 
 				// 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);
 
 			} else {
 
@@ -795,7 +788,7 @@
 		updateWaitControls: function () {
 			var buf = '<div class="controls">';
 			buf += this.getPlayerChoicesHTML();
-			if (!this.battle.mySide.initialized || !this.battle.yourSide.initialized || !this.request) {
+			if (!this.battle.mySide.name || !this.battle.yourSide.name || !this.request) {
 				if (this.battle.kickingInactive) {
 					buf += '<p><button class="button" name="setTimer" value="off">Stop timer</button> <small>&larr; Your opponent has disconnected. This will give them more time to reconnect.</small></p>';
 				} else {