Add support for adding badges in battle

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 += '<button class="button" name="send" value="/join view-seasonladder-' + format + '">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,28 @@ 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, season] = details.split('-');
+				const hover = `Top ${threshold} in ${format} during ladder season ${season}`;
+				badgehtml += `<img src="${Dex.resourcePrefix}/sprites/misc/${type}.png" width="20px" height="20px" 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': {
+			const slot = args[1] as SideID;
+			var side = this[slot];
+			if (!side) return; // weird
+			// handle all the rendering further down
+			side.badges.push(args.slice(2).join('|'));
+			this.scene.updateSidebar(side);
+			break;
+		}
 		case 'teamsize': {
 			let side = this.getSide(args[1]);
 			side.totalPokemon = parseInt(args[2], 10);