Refactor avatar popup

This commit is contained in:
Guangcong Luo 2025-04-26 06:02:18 -07:00
parent 94a1876f61
commit 8ba60e45b2
2 changed files with 24 additions and 38 deletions

View File

@ -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, {

View File

@ -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>