Add support for adding badges in battle (#2235)

* Add support for adding badges in battle

* oops

Forgot these needed to be below the avatar per latest spec, not above

* Move |badge| message handling to battle.ts

* Update play.pokemonshowdown.com/src/battle.ts

Co-authored-by: Karthik <[email protected]>

* Style button on ladder page, also add custom badges for ou/rands

* change some badge filename stuff

* more css stuff, final version

---------

Co-authored-by: Karthik <[email protected]>

Author: mia-pi-git

play.pokemonshowdown.com/js/client-ladder.js

@@ -161,6 +161,7 @@
 					}, function (data) {
 						if (self.curFormat !== format) return;
 						var buf = '<div class="ladder pad"><p><button name="selectFormat"><i class="fa fa-chevron-left"></i> Format List</button></p><p><button class="button" name="refresh"><i class="fa fa-refresh"></i> Refresh</button>';
+						buf += '&nbsp;<button class="button" name="send" value="/join view-seasonladder-' + format + '"><i class="fa fa-trophy"></i> Season rankings</button>';
 						buf += '<form class="search"><input type="text" name="searchval" class="textbox searchinput" value="' + BattleLog.escapeHTML(self.curSearchVal || '') + '" placeholder="username prefix" /><button type="submit"> Search</button></form></p>';
 						buf += '<h3>' + BattleLog.escapeFormat(format) + ' Top ' + BattleLog.escapeHTML(self.curSearchVal ? "- '" + self.curSearchVal + "'" : '500') + '</h3>';
 						buf += data + '</div>';

play.pokemonshowdown.com/src/battle-animations.ts

@@ -690,7 +690,34 @@ export class BattleScene implements BattleSceneStub {
 		pokemonhtml = '<div class="teamicons">' + pokemonhtml + '</div>';
 		const ratinghtml = side.rating ? ` title="Rating: ${BattleLog.escapeHTML(side.rating)}"` : ``;
 		const faded = side.name ? `` : ` style="opacity: 0.4"`;
-		return `<div class="trainer trainer-${posStr}"${faded}><strong>${BattleLog.escapeHTML(side.name)}</strong><div class="trainersprite"${ratinghtml} style="background-image:url(${Dex.resolveAvatar(side.avatar)})"></div>${pokemonhtml}</div>`;
+		let badgehtml = '';
+		if (side.badges.length) {
+			badgehtml = '<span class="badges">';
+			// hard limiting it to only ever 3 allowed at a time
+			// that's what the server limit is anyway but there should be a client limit too
+			// just in case
+			for (const badgeData of side.badges.slice(0, 3)) {
+				// ${badge.type}|${badge.format}|${BADGE_THRESHOLDS[badge.type]}-${badge.season}
+				const [type, format, details] = badgeData.split('|');
+				// todo, maybe make this more easily configured if we ever add badges for other stuff?
+				// but idk that we're planning that for now so
+				const [threshold] = details.split('-');
+				const hover = `User is Top ${threshold} on the ${format} Ladder`;
+				// ou and randbats get diff badges from everyone else, find it
+				// (regex futureproofs for double digit gens)
+				let formatType = format.split(/gen\d+/)[1] || 'none';
+				if (!['ou', 'randombattle'].includes(formatType)) {
+					formatType = 'rotating';
+				}
+				badgehtml += `<img src="${Dex.resourcePrefix}/sprites/misc/${formatType}_${type}.png" style="padding: 0px 1px 0px 1px" width="16px" height="16px" title="${hover}" />`;
+			}
+			badgehtml += '</span>';
+		}
+		return (
+			`<div class="trainer trainer-${posStr}"${faded}><strong>${BattleLog.escapeHTML(side.name)}</strong>` +
+			`<div class="trainersprite"${ratinghtml} style="background-image:url(${Dex.resolveAvatar(side.avatar)})">` +
+			`</div>${badgehtml}${pokemonhtml}</div>`
+		);
 	}
 	updateSidebar(side: Side) {
 		if (this.battle.gameType === 'freeforall') {

play.pokemonshowdown.com/src/battle.ts

@@ -607,6 +607,7 @@ export class Side {
 	foe: Side = null!;
 	ally: Side | null = null;
 	avatar: string = 'unknown';
+	badges: string[] = [];
 	rating: string = '';
 	totalPokemon = 6;
 	x = 0;
@@ -3535,6 +3536,15 @@ export class Battle {
 			this.scene.updateSidebar(side);
 			break;
 		}
+		case 'badge': {
+			let side = this.getSide(args[1]);
+			// handle all the rendering further down
+			const badge = args.slice(2).join('|');
+			// (don't allow duping)
+			if (!side.badges.includes(badge)) side.badges.push(badge);
+			this.scene.updateSidebar(side);
+			break;
+		}
 		case 'teamsize': {
 			let side = this.getSide(args[1]);
 			side.totalPokemon = parseInt(args[2], 10);