296 lines
9.5 KiB
TypeScript
296 lines
9.5 KiB
TypeScript
import { _decorator, Component, Node, Label, Sprite, resources, SpriteFrame, input, Input, EventTouch, EventMouse, Vec3, Vec2, UITransform, Color } from 'cc';
|
|
import { Items } from '../common/config/Items';
|
|
import { QualitySet } from '../common/config/BoxSet';
|
|
import { oops } from 'db://oops-framework/core/Oops';
|
|
const { ccclass, property } = _decorator;
|
|
|
|
@ccclass('ItemInfoComp')
|
|
export class ItemInfoComp extends Component {
|
|
item_uuid: number = 0;
|
|
item_count: number = 1;
|
|
|
|
// 触摸监听相关
|
|
private touchListener: any = null;
|
|
private isListening: boolean = false;
|
|
|
|
start() {
|
|
console.log("[ItemInfoComp]:start");
|
|
}
|
|
|
|
onAdded(args: any) {
|
|
console.log("[ItemInfoComp]:onAdded", args);
|
|
this.setupTouchListener();
|
|
this.update_data(args);
|
|
}
|
|
|
|
update(deltaTime: number) {
|
|
|
|
}
|
|
|
|
onDestroy() {
|
|
this.removeTouchListener();
|
|
}
|
|
|
|
/**
|
|
* 设置触摸监听
|
|
*/
|
|
private setupTouchListener() {
|
|
if (this.isListening) return;
|
|
// 监听触摸开始事件
|
|
this.touchListener = input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
|
|
this.isListening = true;
|
|
|
|
console.log("[ItemInfoComp]: Touch listener setup");
|
|
}
|
|
|
|
/**
|
|
* 移除触摸监听
|
|
*/
|
|
private removeTouchListener() {
|
|
if (this.touchListener && this.isListening) {
|
|
input.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
|
|
this.isListening = false;
|
|
this.touchListener = null;
|
|
|
|
console.log("[ItemInfoComp]: Touch listener removed");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 触摸开始事件处理
|
|
* @param event 触摸事件
|
|
*/
|
|
private onTouchStart(event: EventTouch) {
|
|
const touchPos = event.getLocation();
|
|
const nodePos = this.node.getWorldPosition();
|
|
|
|
// 检查触摸点是否在弹窗范围内
|
|
if (!this.isTouchInNodeBounds(touchPos, nodePos)) {
|
|
console.log("[ItemInfoComp]: Touch outside bounds, closing popup");
|
|
this.closeItemInfo();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 检查触摸点是否在节点范围内
|
|
* @param touchPos 触摸点世界坐标
|
|
* @param nodePos 节点世界坐标
|
|
* @returns 是否在范围内
|
|
*/
|
|
private isTouchInNodeBounds(touchPos: Vec2, nodePos: Vec3): boolean {
|
|
const nodeSize = this.node.getComponent(UITransform)?.contentSize;
|
|
if (!nodeSize) return false;
|
|
|
|
// 计算节点的边界
|
|
const halfWidth = nodeSize.width * 0.5;
|
|
const halfHeight = nodeSize.height * 0.5;
|
|
|
|
// 检查触摸点是否在节点范围内
|
|
const inX = Math.abs(touchPos.x - nodePos.x) <= halfWidth;
|
|
const inY = Math.abs(touchPos.y - nodePos.y) <= halfHeight;
|
|
|
|
return inX && inY;
|
|
}
|
|
|
|
/**
|
|
* 更新物品数据
|
|
* @param args 物品参数 {item_uuid: number, count?: number}
|
|
*/
|
|
update_data(args: any) {
|
|
console.log("[ItemInfoComp]:update_data", args);
|
|
|
|
if (!args || !args.item_uuid) {
|
|
console.error("[ItemInfoComp]: Invalid args", args);
|
|
return;
|
|
}
|
|
|
|
this.item_uuid = args.item_uuid;
|
|
this.item_count = args.count || 1;
|
|
|
|
// 获取物品配置
|
|
const itemData = Items[this.item_uuid];
|
|
if (!itemData) {
|
|
console.error("[ItemInfoComp]: Item not found", this.item_uuid);
|
|
return;
|
|
}
|
|
|
|
// 设置物品图标
|
|
this.setItemIcon(itemData.path);
|
|
|
|
// 设置品质边框
|
|
this.setQualityFrame(itemData.quality);
|
|
|
|
// 设置品质文字描述
|
|
this.setQualityText(itemData.quality);
|
|
|
|
// 设置数量显示
|
|
this.setItemCount(this.item_count);
|
|
|
|
// 设置物品名称
|
|
this.setItemName(itemData.name);
|
|
|
|
// 设置物品描述
|
|
this.setItemInfo(itemData.info);
|
|
}
|
|
|
|
/**
|
|
* 设置物品图标
|
|
* @param iconPath 图标路径
|
|
*/
|
|
private setItemIcon(iconPath: string) {
|
|
let path=`gui/items/${iconPath}`
|
|
console.log("[ItemComp]: setItemIcon", path);
|
|
resources.load(path, SpriteFrame, (err, spriteFrame) => {
|
|
if (err) {
|
|
console.error("[ItemComp]: Failed to load item icon", iconPath, err);
|
|
return;
|
|
}
|
|
console.log("[ItemComp]: setItemIcon", iconPath, spriteFrame);
|
|
this.node.getChildByName("item").getChildByName("icon").getComponent(Sprite)!.spriteFrame = spriteFrame;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 设置品质边框
|
|
* @param quality 品质类型
|
|
*/
|
|
private setQualityFrame(quality: QualitySet) {
|
|
// 隐藏所有品质边框
|
|
this.hideAllQualityFrames();
|
|
|
|
// 根据品质显示对应边框
|
|
switch (quality) {
|
|
case QualitySet.GREEN:
|
|
this.node.getChildByName("item").getChildByName("q1").active = true;
|
|
break;
|
|
case QualitySet.BLUE:
|
|
this.node.getChildByName("item").getChildByName("q2").active = true;
|
|
break;
|
|
case QualitySet.PURPLE:
|
|
this.node.getChildByName("item").getChildByName("q3").active = true;
|
|
break;
|
|
case QualitySet.ORANGE:
|
|
this.node.getChildByName("item").getChildByName("q4").active = true;
|
|
break;
|
|
default:
|
|
// 默认使用绿色边框
|
|
this.node.getChildByName("item").getChildByName("q").active = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 隐藏所有品质边框
|
|
*/
|
|
private hideAllQualityFrames() {
|
|
this.node.getChildByName("item").getChildByName("q").active = false;
|
|
this.node.getChildByName("item").getChildByName("q1").active = false;
|
|
this.node.getChildByName("item").getChildByName("q2").active = false;
|
|
this.node.getChildByName("item").getChildByName("q3").active = false;
|
|
this.node.getChildByName("item").getChildByName("q4").active = false;
|
|
}
|
|
|
|
/**
|
|
* 设置物品数量
|
|
* @param count 数量
|
|
*/
|
|
private setItemCount(count: number) {
|
|
if (count > 1) {
|
|
this.node.getChildByName("item").getChildByName("num").getComponent(Label)!.string = count.toString();
|
|
this.node.getChildByName("item").getChildByName("num").active = true;
|
|
} else {
|
|
this.node.getChildByName("item").getChildByName("num").active = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 设置物品名称
|
|
* @param name 物品名称
|
|
*/
|
|
private setItemName(name: string) {
|
|
this.node.getChildByName("name").getComponent(Label)!.string = name;
|
|
}
|
|
|
|
/**
|
|
* 设置物品描述
|
|
* @param info 物品描述
|
|
*/
|
|
private setItemInfo(info: string) {
|
|
this.node.getChildByName("info").getComponent(Label)!.string = info;
|
|
}
|
|
|
|
/**
|
|
* 设置品质文字描述
|
|
* @param quality 品质类型
|
|
*/
|
|
private setQualityText(quality: QualitySet) {
|
|
|
|
switch (quality) {
|
|
case QualitySet.GREEN:
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.string = "优秀";
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.color = new Color(76, 175, 80, 255); // 现代绿色
|
|
break;
|
|
case QualitySet.BLUE:
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.string = "精良";
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.color = new Color(33, 150, 243, 255); // 现代蓝色
|
|
break;
|
|
case QualitySet.PURPLE:
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.string = "史诗";
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.color = new Color(156, 39, 176, 255); // 现代紫色
|
|
break;
|
|
case QualitySet.ORANGE:
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.string = "传说";
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.color = new Color(255, 87, 34, 255); // 现代橙色
|
|
break;
|
|
default:
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.string = "普通";
|
|
this.node.getChildByName("quality").getChildByName("Label").getComponent(Label)!.color = new Color(158, 158, 158, 255); // 现代灰色
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* 获取物品UUID
|
|
*/
|
|
getItemUUID(): number {
|
|
return this.item_uuid;
|
|
}
|
|
|
|
/**
|
|
* 获取物品数量
|
|
*/
|
|
getItemCount(): number {
|
|
return this.item_count;
|
|
}
|
|
|
|
/**
|
|
* 关闭物品信息弹窗
|
|
*/
|
|
closeItemInfo() {
|
|
console.log("[ItemInfoComp]: Close item info");
|
|
this.removeTouchListener();
|
|
oops.gui.removeByNode(this.node)
|
|
}
|
|
|
|
/**
|
|
* 使用物品
|
|
*/
|
|
useItem() {
|
|
console.log("[ItemInfoComp]: Use item", this.item_uuid);
|
|
// 这里可以添加使用物品的逻辑
|
|
// 比如消耗物品、触发效果等
|
|
}
|
|
|
|
/**
|
|
* 丢弃物品
|
|
*/
|
|
dropItem() {
|
|
console.log("[ItemInfoComp]: Drop item", this.item_uuid);
|
|
// 这里可以添加丢弃物品的逻辑
|
|
// 比如从背包中移除、显示确认对话框等
|
|
}
|
|
}
|
|
|
|
|