如何在Dulst中为卡牌添加除Atk、Health外的新主属性

1. 注册新属性的全局元数据 #

首先在项目的CardDataDefs.js（或你的卡牌数据定义入口文件）中新增属性注册配置，这里以新增「法力消耗（Mana）」属性为例：

// 在全局卡牌属性注册区段新增代码
Dulst.Card.registerPrimaryAttribute({
  key: "mana",
  displayName: "法力值",
  valueType: "number", // 可选值：number/string/enum
  defaultValue: 0,
  // 配置属性排序优先级，数值越高显示顺序越靠前
  sortOrder: 1,
  // 配置属性是否参与数据同步、存档导出
  syncable: true
})

如果你的属性是枚举类型，需要额外新增enumValues字段配置可选值和对应显示名

2. 配置鼠标悬停详情页的显示规则 #

在CardTooltip.js（悬停提示组件配置文件）中新增属性渲染逻辑：

• 找到悬停详情的属性渲染区段，在Atk、Health属性的渲染逻辑后插入新增属性的渲染代码：

if (card.mana !== undefined) {
  tooltipElement.append(`
    <div class="tooltip-attr-row">
      <span class="attr-label">法力值</span>
      <span class="attr-value">${card.mana}</span>
    </div>
  `)
}

如果需要给属性加特殊样式，在对应css文件中新增.tooltip-attr-row .attr-label.mana的样式规则即可。

3. 配置场地卡牌容器的显示逻辑 #

在BoardCard.js（场地卡牌容器组件）中新增属性的渲染配置：

• 首先在卡牌容器的模板中预留属性显示的位置，然后在数据更新钩子中写入属性值：

// BoardCard组件的render方法中，在Atk、Health的渲染逻辑旁新增
const manaBadge = document.createElement('div')
manaBadge.className = 'card-badge mana-badge'
manaBadge.textContent = this.cardData.mana
this.element.appendChild(manaBadge)

// 监听卡牌属性变更事件，实现属性值实时更新
Dulst.Event.on('card:attrUpdate:mana', (cardId, newValue) => {
  if (this.cardData.id === cardId) {
    this.element.querySelector('.mana-badge').textContent = newValue
  }
})

如果你需要属性显示在卡牌的特定位置，调整css中mana-badge的定位参数即可

4. 数据绑定与测试 #

在你的卡牌csv/json配置表中新增mana列，填入对应卡牌的数值，启动游戏后验证两项显示要求：

• 鼠标悬停卡牌时，详情页正确显示法力值属性
• 卡牌放置到场地上后，卡牌容器上正确显示法力值角标
• 修改卡牌的mana属性值，两个位置的显示会同步更新

内容的提问来源于stack exchange，提问作者Xha