Files
pixelheros/assets/script/game/map/EquipListComp.ts
pan 401b02be96 feat: 新增装备商店系统,调整英雄站位与抽卡逻辑
1.  重构抽卡函数,新增排除装备卡参数,装备卡改为商店直购
2.  添加装备商店面板,支持装备浏览与购买,跨波次保留购买记录
3.  调整英雄出场点位坐标,优化战场布局
4.  扩展技能卡槽位,新增两行技能槽位置
5.  重构EquipListComp组件,适配装备商店UI逻辑
6.  删除废弃的melist预制件与相关元文件
7.  调整hnode预制件布局参数
2026-07-22 10:44:01 +08:00

224 lines
7.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* @file EquipListComp.ts
* @description 装备商店单个装备项组件UI 视图层 + 购买逻辑)
*
* 职责:
* 1. 渲染单个装备卡的显示信息(名称、等级、属性词条、图标)。
* 2. 处理购买点击 → 扣费 → 派发 UseSkillCard 事件触发装备生效。
*
* 装备使用机制:
* 与技能卡使用流程一致——购买后派发 GameEvent.UseSkillCard
* 由 MissSkillsComp 接收并创建 SkillBoxComp 实体,
* SkillBoxComp 按 Field 类型被动驻场,属性加成由 FieldSkillHelper 全局聚合。
*/
import { mLogger } from "../common/Logger";
import { _decorator, Node, Sprite, Label, NodeEventType } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { CardConfig, CardPoolList } from "../common/config/CardSet";
import { FieldSkillSet } from "../common/config/SkillSet";
import { oops } from "db://oops-framework/core/Oops";
import { GameEvent } from "../common/config/GameEvent";
import { smc } from "../common/SingletonModuleComp";
import { MissionEconomy } from "./MissionEconomy";
const { ccclass, property } = _decorator;
/**
* EquipListComp —— 装备商店单个装备项
*
* 由 MissionCardComp.populateEquipments() 实例化。
* 以图标 + 名称 + 属性词条 + 购买按钮的形式呈现。
*/
@ccclass('EquipListComp')
@ecs.register('EquipListComp', false)
export class EquipListComp extends CCComp {
private debugMode: boolean = false;
// ======================== 编辑器绑定节点 ========================
/** 装备图标节点 */
@property({ type: Node })
private icon_node: Node = null;
/** 背景节点 */
@property({ type: Node })
private bg_node: Node = null;
/** 装备名称 */
@property(Label)
private name_label: Label = null;
/** 属性词条 1 */
@property(Label)
private fied1: Label = null;
/** 属性词条 2 */
@property(Label)
private fied2: Label = null;
/** 属性词条 3 */
@property(Label)
private fied3: Label = null;
/** 等级标签 */
@property(Label)
private level_label: Label = null;
/** 购买按钮节点 */
@property({ type: Node })
private buy_node: Node = null;
// ======================== 运行时状态 ========================
/** 当前装备的卡牌配置 */
private cardData: CardConfig | null = null;
/** 是否已购买 */
private isPurchased: boolean = false;
// ======================== 生命周期 ========================
onLoad() {
this.buy_node?.on(NodeEventType.TOUCH_END, this.onBuyClick, this);
}
onDestroy() {
super.onDestroy();
if (this.buy_node && this.buy_node.isValid) {
this.buy_node.off(NodeEventType.TOUCH_END, this.onBuyClick, this);
}
}
// ======================== 数据初始化 ========================
/**
* 初始化装备卡数据并渲染 UI
*
* @param data 装备卡配置(必须为 trigger_type=Field 的装备卡)
*/
applyCardData(data: CardConfig): void {
if (!data) return;
this.cardData = data;
this.isPurchased = false;
this.updateUI();
}
// ======================== UI 渲染 ========================
updateUI() {
if (!this.cardData) return;
const cardConfig = CardPoolList.find(c => c.uuid === this.cardData!.uuid);
// 名称
if (this.name_label) {
this.name_label.string = cardConfig?.name || "";
}
// 等级标签(★ 表示卡牌等级)
if (this.level_label) {
const lv = this.cardData.card_lv ?? 1;
this.level_label.string = lv >= 2 ? "★".repeat(lv - 1) : "";
}
// 属性词条(最多显示 3 条,对应 fied1/fied2/fied3
const fieldLabels = [this.fied1, this.fied2, this.fied3];
const fields = this.cardData.field || [];
for (let i = 0; i < fieldLabels.length; i++) {
if (!fieldLabels[i]) continue;
if (i < fields.length) {
const fieldConfig = FieldSkillSet[fields[i]];
fieldLabels[i].string = fieldConfig?.info || "";
fieldLabels[i].node.active = true;
} else {
fieldLabels[i].string = "";
fieldLabels[i].node.active = false;
}
}
// 图标(取第一个 field 词条的图标)
if (this.icon_node && fields.length > 0) {
const iconId = FieldSkillSet[fields[0]]?.icon || "";
this.updateIcon(this.icon_node, iconId);
}
// 购买按钮费用显示
if (this.buy_node) {
this.buy_node.active = true;
const costLabel = this.buy_node.getChildByName("num")?.getComponent(Label)
|| this.buy_node.getComponentInChildren(Label);
if (costLabel) {
costLabel.string = `${this.cardData.cost ?? 0}`;
}
}
}
/** 更新图标精灵 */
private updateIcon(node: Node, iconId: string) {
if (!node || !iconId) return;
const sprite = node.getComponent(Sprite) || node.getComponentInChildren(Sprite);
if (!sprite) return;
if (smc.uiconsAtlas) {
const frame = smc.uiconsAtlas.getSpriteFrame(iconId);
sprite.spriteFrame = frame || null;
}
}
// ======================== 购买逻辑 ========================
/**
* 购买点击处理:
* 1. 扣除金币(失败则提示并中止)。
* 2. 派发 UseSkillCard 事件,触发与技能卡相同的生效流程。
* 3. 标记已购买,隐藏购买按钮。
*
* 装备生效链路:
* UseSkillCard → MissSkillsComp.addSkill() → SBox ECS 实体 → SkillBoxComp(Field 类型)
* → FieldSkillHelper.getFieldSkillTotalValue() 全局聚合属性加成
*/
private onBuyClick() {
if (!this.cardData || this.isPurchased) return;
oops.audio.playEffect("music/button");
// 扣费
const cost = this.cardData.cost ?? 0;
const success = MissionEconomy.spendCoin(cost);
if (!success) {
oops.message.dispatchEvent(GameEvent.ShowSmallTip, "buy_coin");
mLogger.log(this.debugMode, "EquipListComp", "purchase failed: not enough coin", {
uuid: this.cardData.uuid,
cost
});
return;
}
// 派发 UseSkillCard装备生效流程与技能卡一致
oops.message.dispatchEvent(GameEvent.UseSkillCard, this.cardData);
// 标记已购买
this.isPurchased = true;
if (this.buy_node) {
this.buy_node.active = false;
}
mLogger.log(this.debugMode, "EquipListComp", "equipment purchased", {
uuid: this.cardData.uuid,
cost
});
}
/** 标记为已购买状态(用于跨波次保持购买记录) */
setPurchased(): void {
this.isPurchased = true;
if (this.buy_node) {
this.buy_node.active = false;
}
}
/** ECS 组件移除时销毁节点 */
reset() {
if (this.node && this.node.isValid) {
this.node.destroy();
}
}
}