game009_weiren/assets/scripts/RosterManager.ts

import { _decorator, Component, Node, Button, Animation, Sprite, SpriteFrame, resources, assetManager } from 'cc';
const { ccclass, property } = _decorator;

/**
 * 名单管理器，控制名单UI的显示和隐藏，并管理学生头像显示
 */
@ccclass('RosterManager')
export class RosterManager extends Component {
    @property({
        type: Node,
        tooltip: '名单UI面板'
    })
    rosterPanel: Node = null;
    
    @property({
        type: Button,
        tooltip: '关闭按钮'
    })
    closeButton: Button = null;
    
    @property({
        type: Animation,
        tooltip: '名单动画组件(可选)'
    })
    rosterAnimation: Animation = null;
    
    @property({
        type: Node,
        tooltip: '学生头像容器(可选，用于未来功能)'
    })
    avatarContainer: Node = null;
    
    @property({
        tooltip: '头像资源路径(可选，用于未来功能)'
    })
    avatarResourcePath: string = "avatars/";
    
    // 保存头像引用的字典，用于未来功能
    private avatarMap: Map<string, SpriteFrame> = new Map();
    
    start() {
        // 初始化隐藏名单面板
        if (this.rosterPanel) {
            this.rosterPanel.active = false;
        }
        
        // 注册关闭按钮点击事件
        this.setupCloseButton();
    }
    
    /**
     * 设置关闭按钮事件
     */
    private setupCloseButton() {
        if (this.closeButton) {
            // 移除可能已存在的事件监听
            this.closeButton.node.off('click');
            
            // 使用按钮的点击事件监听方式
            this.closeButton.node.on('click', () => {
                console.log('名单关闭按钮被点击');
                this.hideRosterPanel();
            }, this);
            
            console.log('名单关闭按钮事件已注册');
        } else {
            console.error('名单关闭按钮未设置');
        }
    }
    
    /**
     * 显示名单面板
     */
    public showRosterPanel() {
        if (this.rosterPanel) {
            this.rosterPanel.active = true;
            
            // 确保面板在最前面
            this.rosterPanel.setSiblingIndex(999);
            
            // 播放打开动画(如果有)
            if (this.rosterAnimation) {
                this.rosterAnimation.play('roster_open');
            }
        } else {
            console.error('名单面板未设置');
        }
    }
    
    /**
     * 隐藏名单面板
     */
    public hideRosterPanel() {
        console.log('hideRosterPanel被调用');
        
        if (this.rosterPanel) {
            // 播放关闭动画，并在动画结束后隐藏面板
            if (this.rosterAnimation) {
                this.rosterAnimation.play('roster_close');
                this.scheduleOnce(() => {
                    this.rosterPanel.active = false;
                    console.log('名单面板已隐藏（动画后）');
                }, 0.5); // 假设动画时长为0.5秒
            } else {
                this.rosterPanel.active = false;
                console.log('名单面板已隐藏（立即）');
            }
        }
    }
    
    /**
     * 预加载头像资源（用于未来功能）
     * @param avatarIds 头像ID数组
     */
    public preloadAvatars(avatarIds: string[]) {
        if (!this.avatarContainer) {
            return;
        }
        
        avatarIds.forEach(id => {
            const path = `${this.avatarResourcePath}avatar_${id}`;
            resources.load(path, SpriteFrame, (err, spriteFrame) => {
                if (err) {
                    console.error(`加载头像 ${id} 失败:`, err);
                    return;
                }
                
                this.avatarMap.set(id, spriteFrame);
            });
        });
    }
    
    /**
     * 显示头像（用于未来功能）
     * @param slotId 头像位置ID
     * @param avatarId 头像资源ID
     */
    public showAvatar(slotId: string, avatarId: string) {
        if (!this.avatarContainer) {
            return;
        }
        
        // 查找对应的头像槽位
        const avatarSlot = this.avatarContainer.getChildByName(slotId);
        if (!avatarSlot) {
            console.error(`未找到头像槽位: ${slotId}`);
            return;
        }
        
        // 获取已加载的头像
        const spriteFrame = this.avatarMap.get(avatarId);
        if (spriteFrame) {
            const sprite = avatarSlot.getComponent(Sprite);
            if (sprite) {
                sprite.spriteFrame = spriteFrame;
            }
        } else {
            // 如果头像未预加载，则即时加载
            const path = `${this.avatarResourcePath}avatar_${avatarId}`;
            resources.load(path, SpriteFrame, (err, spriteFrame) => {
                if (err) {
                    console.error(`加载头像 ${avatarId} 失败:`, err);
                    return;
                }
                
                const sprite = avatarSlot.getComponent(Sprite);
                if (sprite) {
                    sprite.spriteFrame = spriteFrame;
                    // 保存引用以便下次使用
                    this.avatarMap.set(avatarId, spriteFrame);
                }
            });
        }
    }
    
    onDestroy() {
        // 移除按钮事件监听
        if (this.closeButton) {
            this.closeButton.node.off('click');
        }
        
        // 清理资源
        this.avatarMap.clear();
    }
}