Massively improve tooltips

- Tooltips work in replays now
- Calculation is better (correctly handles more corner cases)
- Explanations are better (better messages for Magic Room etc)
- Tooltips for sidebar pokemon
- Support "locking" tooltips with long-click / long-tap
- Can copy/paste from locked tooltips
- Increased font size

.eslintignore

@@ -12,3 +12,4 @@ node_modules/
 /js/battle-animations-moves.js
 /js/battle-scene-stub.js
 /js/battle-animations.js
+/js/battle-tooltips.js

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
 		"BattleFormats": false, "BattleFormatsData": false, "BattleLearnsets": false, "BattleItems": false, "BattleMoveAnims": false, "BattleMovedex": false, "BattleNatures": false,
 		"BattleOtherAnims": false,  "BattlePokedex": false,"BattlePokemonSprites": false, "BattlePokemonSpritesBW": false, "BattleSearchCountIndex": false, "BattleSearchIndex": false, "BattleArticleTitles": false,
 		"BattleSearchIndexOffset": false, "BattleSearchIndexType": false, "BattleStatIDs": false, "BattleStatNames": false, "BattleStats": false, "BattleStatusAnims": false, "BattleStatuses": false, "BattleTeambuilderTable": false,
+		"ModifiableValue": false,
 
 		// Generic global variables
 		"Config": false, "BattleSearch": false, "soundManager": false, "Storage": false, "Dex": false,

.gitignore

@@ -21,6 +21,7 @@ package-lock.json
 /js/battle-dex-data.js
 /js/battle-animations-moves.js
 /js/battle-animations.js
+/js/battle-tooltips.js
 /js/battle-scene-stub.js
 
 .vscode

data/text.js

@@ -124,21 +124,27 @@ exports.BattleText = {
 	// stats
 	hp: {
 		statName: "HP",
+		statShortName: "HP",
 	},
 	atk: {
 		statName: "Attack",
+		statShortName: "Atk",
 	},
 	def: {
 		statName: "Defense",
+		statShortName: "Def",
 	},
 	spa: {
 		statName: "Special Attack",
+		statShortName: "SpA",
 	},
 	spd: {
 		statName: "Special Defense",
+		statShortName: "SpD",
 	},
 	spe: {
 		statName: "Speed",
+		statShortName: "Spe",
 	},
 	accuracy: {
 		statName: "accuracy",
@@ -148,6 +154,7 @@ exports.BattleText = {
 	},
 	spc: {
 		statName: "Special",
+		statShortName: "Spc",
 	},
 	stats: {
 		statName: "stats",

index.template.html

@@ -134,7 +134,7 @@ <h3><button class="closebutton" tabindex="-1"><i class="fa fa-times-circle"></i>
 <script src="//play.pokemonshowdown.com/js/client-ladder.js?"></script>
 <script src="//play.pokemonshowdown.com/js/client-chat.js?"></script>
 <script src="//play.pokemonshowdown.com/js/client-chat-tournament.js?"></script>
-<script src="//play.pokemonshowdown.com/js/client-battle-tooltips.js?"></script>
+<script src="//play.pokemonshowdown.com/js/battle-tooltips.js?"></script>
 <script src="//play.pokemonshowdown.com/js/client-battle.js?"></script>
 <script src="//play.pokemonshowdown.com/js/client-rooms.js?"></script>
 <script src="//play.pokemonshowdown.com/data/graphics.js?"></script>

src/battle-animations.ts

@@ -60,6 +60,8 @@ class BattleScene {
 	$messagebar: JQuery = null!;
 	$delay: JQuery = null!;
 	$hiddenMessage: JQuery = null!;
+	$tooltips: JQuery = null!;
+	tooltips: BattleTooltips;
 
 	sideConditions: [{[id: string]: Sprite[]}, {[id: string]: Sprite[]}] = [{}, {}];
 
@@ -109,6 +111,8 @@ class BattleScene {
 			numericId = Math.floor(Math.random() * 1000000);
 		}
 		this.numericId = numericId;
+		this.tooltips = new BattleTooltips(battle);
+		this.tooltips.listen($frame[0]);
 
 		this.preloadEffects();
 		// reset() is called during battle initialization, so it doesn't need to be called here
@@ -156,6 +160,24 @@ class BattleScene {
 		this.$messagebar = $('<div class="messagebar message"></div>');
 		this.$delay = $('<div></div>');
 		this.$hiddenMessage = $('<div class="message" style="position:absolute;display:block;visibility:hidden"></div>');
+		this.$tooltips = $('<div class="tooltips"></div>');
+
+		let tooltipBuf = '';
+		const tooltips = {
+			p2c: {top: 70, left: 250, width: 80, height: 100, tooltip: 'activepokemon|1|2'},
+			p2b: {top: 85, left: 320, width: 90, height: 100, tooltip: 'activepokemon|1|1'},
+			p2a: {top: 90, left: 390, width: 100, height: 100, tooltip: 'activepokemon|1|0'},
+			p1a: {top: 200, left: 130, width: 120, height: 160, tooltip: 'activepokemon|0|0'},
+			p1b: {top: 200, left: 250, width: 150, height: 160, tooltip: 'activepokemon|0|1'},
+			p1c: {top: 200, left: 350, width: 150, height: 160, tooltip: 'activepokemon|0|2'},
+		};
+		for (const id in tooltips) {
+			let layout = tooltips[id as 'p1a'];
+			tooltipBuf += `<div class="has-tooltip" style="position:absolute;`;
+			tooltipBuf += `top:${layout.top}px;left:${layout.left}px;width:${layout.width}px;height:${layout.height}px;`;
+			tooltipBuf += `" data-id="${id}" data-tooltip="${layout.tooltip}" data-ownheight="1"></div>`;
+		}
+		this.$tooltips.html(tooltipBuf);
 
 		this.$battle.append(this.$bg);
 		this.$battle.append(this.$terrain);
@@ -170,6 +192,7 @@ class BattleScene {
 		this.$battle.append(this.$messagebar);
 		this.$battle.append(this.$delay);
 		this.$battle.append(this.$hiddenMessage);
+		this.$battle.append(this.$tooltips);
 
 		if (!this.animating) {
 			this.$battle.append('<div class="seeking"><strong>seeking...</strong></div>');
@@ -557,7 +580,7 @@ class BattleScene {
 		} else {
 			let statustext = '';
 			if (pokemon.hp !== pokemon.maxhp) {
-				statustext += pokemon.hpDisplay();
+				statustext += Pokemon.getHPText(pokemon);
 			}
 			if (pokemon.status) {
 				if (statustext) statustext += '|';
@@ -578,23 +601,23 @@ class BattleScene {
 		for (let i = 0; i < pokemonCount; i++) {
 			let poke = side.pokemon[i];
 			if (i >= side.totalPokemon && i >= side.pokemon.length) {
-				pokemonhtml += '<span class="picon" style="' + Dex.getPokemonIcon('pokeball-none') + '"></span>';
+				pokemonhtml += `<span class="picon" style="` + Dex.getPokemonIcon('pokeball-none') + `"></span>`;
 			} else if (noShow && poke && poke.fainted) {
-				pokemonhtml += '<span class="picon" style="' + Dex.getPokemonIcon('pokeball-fainted') + '" title="Fainted" aria-label="Fainted"></span>';
+				pokemonhtml += `<span class="picon has-tooltip" data-tooltip="pokemon|${side.n}|${i}" style="` + Dex.getPokemonIcon('pokeball-fainted') + `" title="Fainted" aria-label="Fainted"></span>`;
 			} else if (noShow && poke && poke.status) {
-				pokemonhtml += '<span class="picon" style="' + Dex.getPokemonIcon('pokeball-statused') + '" title="Status" aria-label="Status"></span>';
+				pokemonhtml += `<span class="picon has-tooltip" data-tooltip="pokemon|${side.n}|${i}" style="` + Dex.getPokemonIcon('pokeball-statused') + `" title="Status" aria-label="Status"></span>`;
 			} else if (noShow) {
-				pokemonhtml += '<span class="picon" style="' + Dex.getPokemonIcon('pokeball') + '" title="Non-statused" aria-label="Non-statused"></span>';
+				pokemonhtml += `<span class="picon has-tooltip" data-tooltip="pokemon|${side.n}|${i}" style="` + Dex.getPokemonIcon('pokeball') + `" title="Non-statused" aria-label="Non-statused"></span>`;
 			} else if (!poke) {
-				pokemonhtml += '<span class="picon" style="' + Dex.getPokemonIcon('pokeball') + '" title="Not revealed" aria-label="Not revealed"></span>';
+				pokemonhtml += `<span class="picon" style="` + Dex.getPokemonIcon('pokeball') + `" title="Not revealed" aria-label="Not revealed"></span>`;
 			} else if (!poke.ident && this.battle.teamPreviewCount && this.battle.teamPreviewCount < side.pokemon.length) {
 				const details = this.getDetailsText(poke);
-				pokemonhtml += '<span class="picon" style="' + Dex.getPokemonIcon(poke, !side.n) + ';opacity:0.6" title="' + details + '" aria-label="' + details + '"></span>';
+				pokemonhtml += `<span class="picon has-tooltip" data-tooltip="pokemon|${side.n}|${i}" style="` + Dex.getPokemonIcon(poke, !side.n) + `;opacity:0.6" title="` + details + `" aria-label="` + details + `"></span>`;
 			} else {
 				const details = this.getDetailsText(poke);
-				pokemonhtml += '<span class="picon" style="' + Dex.getPokemonIcon(poke, !side.n) + '" title="' + details + '" aria-label="' + details + '"></span>';
+				pokemonhtml += `<span class="picon has-tooltip" data-tooltip="pokemon|${side.n}|${i}" style="` + Dex.getPokemonIcon(poke, !side.n) + `" title="` + details + `" aria-label="` + details + `"></span>`;
 			}
-			if (i % 3 === 2) pokemonhtml += '</div><div class="teamicons">';
+			if (i % 3 === 2) pokemonhtml += `</div><div class="teamicons">`;
 		}
 		pokemonhtml = '<div class="teamicons">' + pokemonhtml + '</div>';
 		const $sidebar = (side.n ? this.$rightbar : this.$leftbar);