From 8ba60e45b218dc0103da019a872729a01fa79580 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Sat, 26 Apr 2025 06:02:18 -0700
Subject: [PATCH] Refactor avatar popup

---
 play.pokemonshowdown.com/src/client-main.ts   | 19 ++++++--
 play.pokemonshowdown.com/src/panel-popups.tsx | 43 ++++---------------
 2 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/play.pokemonshowdown.com/src/client-main.ts b/play.pokemonshowdown.com/src/client-main.ts
index c8feb7ecb..a4441ec85 100644
--- a/play.pokemonshowdown.com/src/client-main.ts
+++ b/play.pokemonshowdown.com/src/client-main.ts
@@ -386,7 +386,7 @@ class PSUser extends PSStreamModel<PSLoginState | null> {
 	userid = "" as ID;
 	named = false;
 	registered: { name: string, userid: ID } | null = null;
-	avatar = "1";
+	avatar = "lucas";
 	challstr = '';
 	loggingIn: string | null = null;
 	initializing = true;
@@ -858,10 +858,12 @@ export class PSRoom extends PSStreamModel<Args | null> implements RoomOptions {
 	 * Used only by commands; messages from the server go directly from
 	 * `PS.receive` to `room.receiveLine`
 	 */
-	add(line: string) {
+	add(line: string, ifChat?: boolean) {
 		if (this.type !== 'chat' && this.type !== 'battle') {
-			PS.mainmenu.handlePM(PS.user.userid, PS.user.userid);
-			PS.rooms['dm-' as RoomID]?.receiveLine(BattleTextParser.parseLine(line));
+			if (!ifChat) {
+				PS.mainmenu.handlePM(PS.user.userid, PS.user.userid);
+				PS.rooms['dm-' as RoomID]?.receiveLine(BattleTextParser.parseLine(line));
+			}
 		} else {
 			this.receiveLine(BattleTextParser.parseLine(line));
 		}
@@ -954,6 +956,15 @@ export class PSRoom extends PSStreamModel<Args | null> implements RoomOptions {
 				PS.join('login' as RoomID);
 			}
 		},
+		'avatar'(target) {
+			const avatar = window.BattleAvatarNumbers?.[toID(target)] || toID(target);
+			PS.user.avatar = avatar;
+			if (this.type !== 'chat' && this.type !== 'battle') {
+				PS.send(`|/avatar ${avatar}`);
+			} else {
+				this.send(`/avatar ${avatar}`);
+			}
+		},
 		'open,user'(target) {
 			let roomid = `user-${toID(target)}` as RoomID;
 			PS.join(roomid, {
diff --git a/play.pokemonshowdown.com/src/panel-popups.tsx b/play.pokemonshowdown.com/src/panel-popups.tsx
index adceaa803..304015fbf 100644
--- a/play.pokemonshowdown.com/src/panel-popups.tsx
+++ b/play.pokemonshowdown.com/src/panel-popups.tsx
@@ -912,26 +912,13 @@ class AvatarsPanel extends PSRoomPanel {
 	static readonly routes = ['avatars'];
 	static readonly location = 'semimodal-popup';
 
-	handleAvatar = (ev: Event) => {
-		let curtarget = ev.currentTarget as HTMLButtonElement;
-		let avatar = curtarget.value;
-		if (window.BattleAvatarNumbers) {
-			if (window.BattleAvatarNumbers[avatar]) avatar = window.BattleAvatarNumbers[avatar];
-		}
-		PS.rooms['']?.send('/avatar ' + avatar);
-		PS.user.avatar = avatar;
-		ev.preventDefault();
-		this.close();
-	};
-
 	override render() {
 		const room = this.props.room;
-		let avatars: number[] = [];
-		let cur = Number(PS.user.avatar);
 
+		const avatars: [number, string][] = [];
 		for (let i = 1; i <= 293; i++) {
 			if (i === 162 || i === 168) continue;
-			avatars.push(i);
+			avatars.push([i, window.BattleAvatarNumbers?.[i] || `${i}`]);
 		}
 
 		return <PSPanelWrapper room={room} width={1210}><div class="pad">
@@ -939,25 +926,13 @@ class AvatarsPanel extends PSRoomPanel {
 				<button class="button" onClick={() => this.close()}> Cancel</button>
 			</label>
 			<div class="avatarlist">
-				{avatars.map(i => {
-					const offset = `-${((i - 1) % 16) * 80 + 1}px -${Math.floor((i - 1) / 16) * 80 + 1}px`;
-					const style = {
-						backgroundPosition: offset,
-					};
-					const className = `option pixelated${i === cur ? ' cur' : ''}`;
-
-					return (
-						<button
-							key={i}
-							value={i}
-							style={style}
-							className={className}
-							title={`/avatar ${i}`}
-							onClick={this.handleAvatar}
-						/>
-					);
-				})}
-
+				{avatars.map(([i, avatar]) => (
+					<button
+						data-cmd={`/closeand /avatar ${avatar}`} title={`/avatar ${avatar}`}
+						class={`option pixelated${avatar === PS.user.avatar ? ' cur' : ''}`}
+						style={`background-position: -${((i - 1) % 16) * 80 + 1}px -${Math.floor((i - 1) / 16) * 80 + 1}px`}
+					></button>
+				))}
 			</div>
 			<div style="clear:left"></div>
 			<p><button class="button" data-cmd="/close">Cancel</button></p>