装备栏ui

This commit is contained in:
unanmed 2022-11-30 16:42:44 +08:00
parent 1dc79595e8
commit bde0a4d1c0
24 changed files with 824 additions and 843 deletions

2
components.d.ts vendored
View File

@ -8,6 +8,8 @@ export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
ADivider: typeof import('ant-design-vue/es')['Divider']
ASelect: typeof import('ant-design-vue/es')['Select']
ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
ASlider: typeof import('ant-design-vue/es')['Slider']
BoxAnimate: typeof import('./src/components/boxAnimate.vue')['default']
EnemyOne: typeof import('./src/components/enemyOne.vue')['default']

View File

@ -388,9 +388,6 @@ actions.prototype._sys_keyDown_lockControl = function (keyCode) {
case 'viewMaps':
this._keyDownViewMaps(keyCode);
break;
case 'equipbox':
this._keyDownEquipbox(keyCode);
break;
case 'toolbox':
this._keyDownToolbox(keyCode);
break;
@ -490,9 +487,6 @@ actions.prototype._sys_keyUp_lockControl = function (keyCode, altKey) {
case 'selectShop':
this._keyUpQuickShop(keyCode);
break;
case 'equipbox':
this._keyUpEquipbox(keyCode, altKey);
break;
case 'save':
case 'load':
case 'replayLoad':
@ -599,9 +593,6 @@ actions.prototype._sys_ondown_lockControl = function (x, y, px, py) {
case 'selectShop':
this._clickQuickShop(x, y, px, py);
break;
case 'equipbox':
this._clickEquipbox(x, y, px, py);
break;
case 'toolbox':
this._clickToolbox(x, y, px, py);
break;
@ -1816,402 +1807,6 @@ actions.prototype._keyUpQuickShop = function (keycode) {
return;
};
////// 工具栏界面时的点击操作 //////
actions.prototype._clickToolbox = function (x, y) {
var tools = core.getToolboxItems('tools'),
constants = core.getToolboxItems('constants');
// 装备栏
if (x >= this.LAST - 2 && y == 0) {
core.ui.closePanel();
if (core.isReplaying()) core.control._replay_equipbox();
else core.openEquipbox();
return;
}
if (x >= this.LAST - 2 && y === core._HEIGHT_ - 1) {
core.playSound('取消');
core.ui.closePanel();
var last = core.status.route[core.status.route.length - 1] || '';
if (last.startsWith('equip:') || last.startsWith('unEquip:')) {
core.status.route.push('no');
}
core.checkAutoEvents();
return;
}
var toolsPage = core.status.event.data.toolsPage;
var constantsPage = core.status.event.data.constantsPage;
// 上一页
if (x == this._HX_ - 2 || x == this._HX_ - 3) {
if (y === core._HEIGHT_ - 1 - 5 && toolsPage > 1) {
core.status.event.data.toolsPage--;
core.playSound('光标移动');
core.ui._drawToolbox(core.status.event.selection);
}
if (y === core._HEIGHT_ - 1 && constantsPage > 1) {
core.status.event.data.constantsPage--;
core.playSound('光标移动');
core.ui._drawToolbox(core.status.event.selection);
}
}
// 下一页
if (x == this._HX_ + 2 || x == this._HX_ + 3) {
if (
y === core._HEIGHT_ - 1 - 5 &&
toolsPage < Math.ceil(tools.length / this.LAST)
) {
core.status.event.data.toolsPage++;
core.playSound('光标移动');
core.ui._drawToolbox(core.status.event.selection);
}
if (
y === core._HEIGHT_ - 1 &&
constantsPage < Math.ceil(constants.length / this.LAST)
) {
core.status.event.data.constantsPage++;
core.playSound('光标移动');
core.ui._drawToolbox(core.status.event.selection);
}
}
var index = parseInt(x / 2);
if (y === core._HEIGHT_ - 1 - 8) index += 0;
else if (y === core._HEIGHT_ - 1 - 6) index += this._HX_;
else if (y === core._HEIGHT_ - 1 - 3) index += this.LAST;
else if (y === core._HEIGHT_ - 1 - 1) index += this.LAST + this._HX_;
else index = -1;
if (index >= 0) this._clickToolboxIndex(index);
};
////// 选择工具栏界面中某个Index后的操作 //////
actions.prototype._clickToolboxIndex = function (index) {
var tools = core.getToolboxItems('tools'),
constants = core.getToolboxItems('constants');
var items = null;
var select;
if (index < this.LAST) {
select = index + this.LAST * (core.status.event.data.toolsPage - 1);
items = tools;
} else {
select =
(index % this.LAST) +
this.LAST * (core.status.event.data.constantsPage - 1);
items = constants;
}
if (items == null) return;
if (select >= items.length) return;
var itemId = items[select];
if (itemId == core.status.event.data.selectId) {
if (core.isReplaying()) return;
core.events.tryUseItem(itemId);
} else {
core.playSound('光标移动');
core.ui._drawToolbox(index);
}
};
////// 工具栏界面时,按下某个键的操作 //////
actions.prototype._keyDownToolbox = function (keycode) {
if (core.status.event.data == null) return;
var last_index = this.LAST - 1;
var tools = core.getToolboxItems('tools'),
constants = core.getToolboxItems('constants');
var index = core.status.event.selection;
var toolsPage = core.status.event.data.toolsPage;
var constantsPage = core.status.event.data.constantsPage;
var toolsTotalPage = Math.ceil(tools.length / this.LAST);
var constantsTotalPage = Math.ceil(constants.length / this.LAST);
var toolsLastIndex =
toolsPage < toolsTotalPage
? last_index
: (tools.length + last_index) % this.LAST;
var constantsLastIndex =
this.LAST +
(constantsPage < constantsTotalPage
? last_index
: (constants.length + last_index) % this.LAST);
if (keycode == 37) {
// left
if (index == 0) {
// 处理向前翻页
if (toolsPage > 1) {
core.status.event.data.toolsPage--;
index = last_index;
} else return; // 第一页不向前翻
} else if (index == this.LAST) {
if (constantsPage == 1) {
if (toolsTotalPage == 0) return;
core.status.event.data.toolsPage = toolsTotalPage;
index = (tools.length + last_index) % this.LAST;
} else {
core.status.event.data.constantsPage--;
index = 2 * this.LAST - 1;
}
} else index -= 1;
this._clickToolboxIndex(index);
return;
}
if (keycode == 38) {
// up
if (index >= this.LAST && index < this.LAST + this._HX_) {
// 进入tools
if (toolsTotalPage == 0) return;
if (toolsLastIndex >= this._HX_)
index = Math.min(toolsLastIndex, index - this._HX_);
else index = Math.min(toolsLastIndex, index - this.LAST);
} else if (index < this._HX_) return; // 第一行没有向上
else index -= this._HX_;
this._clickToolboxIndex(index);
return;
}
if (keycode == 39) {
// right
if (toolsPage < toolsTotalPage && index == last_index) {
core.status.event.data.toolsPage++;
index = 0;
} else if (
constantsPage < constantsTotalPage &&
index == 2 * this.LAST - 1
) {
core.status.event.data.constantsPage++;
index = this.LAST;
} else if (index == toolsLastIndex) {
if (constantsTotalPage == 0) return;
core.status.event.data.constantsPage = 1;
index = this.LAST;
} else if (index == constantsLastIndex)
// 一个物品无操作
return;
else index++;
this._clickToolboxIndex(index);
return;
}
if (keycode == 40) {
// down
var nextIndex = null;
if (index < this._HX_) {
if (toolsLastIndex >= this._HX_)
nextIndex = Math.min(toolsLastIndex, index + this._HX_);
else index += this._HX_;
}
if (nextIndex == null && index < this.LAST) {
if (constantsTotalPage == 0) return;
nextIndex = Math.min(index + this._HX_, constantsLastIndex);
}
if (nextIndex == null && index < this.LAST + this._HX_) {
if (constantsLastIndex >= this.LAST + this._HX_)
nextIndex = Math.min(constantsLastIndex, index + this._HX_);
}
if (nextIndex != null) {
this._clickToolboxIndex(nextIndex);
}
return;
}
};
////// 装备栏界面时的点击操作 //////
actions.prototype._clickEquipbox = function (x, y, px, py) {
if (x >= this.LAST - 2 && y == 0) {
core.playSound('确定');
core.ui.closePanel();
if (core.isReplaying()) core.control._replay_toolbox();
else core.openToolbox();
return;
}
if (x >= this.LAST - 2 && y === core._HEIGHT_ - 1) {
core.playSound('取消');
core.ui.closePanel();
var last = core.status.route[core.status.route.length - 1] || '';
if (last.startsWith('equip:') || last.startsWith('unEquip:')) {
core.status.route.push('no');
}
core.checkAutoEvents();
return;
}
if ((x == this._HX_ - 2 || x == this._HX_ - 3) && y === core._HEIGHT_ - 1) {
if (core.status.event.data.page > 1) {
core.status.event.data.page--;
core.playSound('光标移动');
core.ui._drawEquipbox(core.status.event.selection);
}
return;
}
if ((x == this._HX_ + 2 || x == this._HX_ + 3) && y === core._HEIGHT_ - 1) {
var lastPage = Math.ceil(
core.getToolboxItems('equips').length / this.LAST
);
if (core.status.event.data.page < lastPage) {
core.status.event.data.page++;
core.playSound('光标移动');
core.ui._drawEquipbox(core.status.event.selection);
}
return;
}
var per_page = this._HX_ - 3,
v = core._WIDTH_ / per_page;
if (y === core._HEIGHT_ - 9) {
for (var i = 0; i < per_page; ++i)
if (x >= i * v && x <= (i + 1) * v)
return this._clickEquipboxIndex(i);
} else if (y === core._HEIGHT_ - 7) {
for (var i = 0; i < per_page; ++i)
if (x >= i * v && x <= (i + 1) * v)
return this._clickEquipboxIndex(per_page + i);
} else if (Math.abs(core._HEIGHT_ - 5 - py / 32) < 0.5) {
for (var i = 0; i < per_page; ++i)
if (x >= i * v && x <= (i + 1) * v)
return this._clickEquipboxIndex(2 * per_page + i);
} else if (y === core._HEIGHT_ - 4)
this._clickEquipboxIndex(this.LAST + parseInt(x / 2));
else if (y === core._HEIGHT_ - 2)
this._clickEquipboxIndex(this.LAST + this._HX_ + parseInt(x / 2));
};
////// 选择装备栏界面中某个Index后的操作 //////
actions.prototype._clickEquipboxIndex = function (index) {
if (index < this.LAST) {
if (index >= core.status.globalAttribute.equipName.length) return;
if (
index == core.status.event.selection &&
core.status.hero.equipment[index]
) {
if (core.isReplaying()) return;
core.unloadEquip(index);
core.status.route.push('unEquip:' + index);
} else core.playSound('光标移动');
} else {
var equips = core.getToolboxItems('equips');
if (index == core.status.event.selection) {
if (core.isReplaying()) return;
var equipId =
equips[
index -
this.LAST +
(core.status.event.data.page - 1) * this.LAST
];
core.loadEquip(equipId);
core.status.route.push('equip:' + equipId);
} else core.playSound('光标移动');
}
core.ui._drawEquipbox(index);
};
////// 装备栏界面时,按下某个键的操作 //////
actions.prototype._keyDownEquipbox = function (keycode) {
if (core.status.event.data == null) return;
var last_index = this.LAST - 1;
var per_line = this._HX_ - 3;
var equipCapacity = core.status.globalAttribute.equipName.length;
var ownEquipment = core.getToolboxItems('equips');
var index = core.status.event.selection;
var page = core.status.event.data.page;
var totalPage = Math.ceil(ownEquipment.length / this.LAST);
var totalLastIndex =
this.LAST +
(page < totalPage
? last_index
: (ownEquipment.length + last_index) % this.LAST);
if (keycode == 37) {
// left
if (index == 0) return;
if (index == this.LAST) {
if (page > 1) {
core.status.event.data.page--;
core.playSound('光标移动');
index = this.LAST + last_index;
} else if (page == 1) index = equipCapacity - 1;
else return;
} else index -= 1;
this._clickEquipboxIndex(index);
return;
}
if (keycode == 38) {
// up
if (index < per_line) return;
else if (index < 2 * per_line) index -= per_line;
else if (index < this.LAST + this._HX_) {
index = parseInt((index - this.LAST) / 2);
if (equipCapacity > per_line)
index = Math.min(equipCapacity - 1, index + per_line);
else index = Math.min(equipCapacity - 1, index);
} else index -= this._HX_;
this._clickEquipboxIndex(index);
return;
}
if (keycode == 39) {
// right
if (page < totalPage && index == this.LAST + last_index) {
core.status.event.data.page++;
core.playSound('光标移动');
index = this.LAST;
} else if (index == equipCapacity - 1) {
if (totalPage == 0) return;
index = this.LAST;
} else if (index == totalLastIndex) return;
else index++;
this._clickEquipboxIndex(index);
return;
}
if (keycode == 40) {
// down
if (index < per_line) {
if (equipCapacity > per_line)
index = Math.min(index + per_line, equipCapacity - 1);
else {
if (totalPage == 0) return;
index = Math.min(2 * index + 1 + this.LAST, totalLastIndex);
}
} else if (index < 2 * per_line) {
if (totalPage == 0) return;
index = Math.min(
2 * (index - per_line) + 1 + this.LAST,
totalLastIndex
);
} else if (index < this.LAST + this._HX_)
index = Math.min(index + this._HX_, totalLastIndex);
else return;
this._clickEquipboxIndex(index);
return;
}
};
////// 装备栏界面时,放开某个键的操作 //////
actions.prototype._keyUpEquipbox = function (keycode, altKey) {
if (altKey && keycode >= 48 && keycode <= 57) {
core.items.quickSaveEquip(keycode - 48);
return;
}
if (keycode == 84) {
core.playSound('确定');
core.ui.closePanel();
if (core.isReplaying()) core.control._replay_toolbox();
else core.openToolbox();
return;
}
if (keycode == 81 || keycode == 27 || keycode == 88) {
core.playSound('取消');
core.ui.closePanel();
var last = core.status.route[core.status.route.length - 1] || '';
if (last.startsWith('equip:') || last.startsWith('unEquip:')) {
core.status.route.push('no');
}
core.checkAutoEvents();
return;
}
if (!core.status.event.data.selectId) return;
if (keycode == 13 || keycode == 32 || keycode == 67) {
this._clickEquipboxIndex(core.status.event.selection);
return;
}
};
////// 存读档界面时的点击操作 //////
actions.prototype._clickSL = function (x, y) {
var page = core.status.event.data.page,

View File

@ -4163,7 +4163,7 @@ control.prototype.resize = function () {
clientHeight = main.dom.body.clientHeight;
var BORDER = 3;
var extendToolbar = core.flags.extendToolbar;
var BAR_WIDTH = extendToolbar ? 0 : Math.round(core._PY_ * 0.3);
var BAR_WIDTH = extendToolbar ? 0 : Math.round(core._PY_ * 0.31);
var horizontalMaxRatio =
(clientHeight - 2 * BORDER - (extendToolbar ? BORDER : 0)) /
@ -4321,6 +4321,7 @@ control.prototype._resize_canvas = function (obj) {
core.dom.gameDraw.style.top = obj.statusBarHeightInVertical + 'px';
core.dom.gameDraw.style.right = 0;
core.dom.gameDraw.style.border = obj.border;
core.dom.gameDraw.style.boxSizing = 'content-box';
// resize bigmap
core.bigmap.canvas.forEach(function (cn) {
var ratio = core.canvas[cn].canvas.hasAttribute('isHD')

View File

@ -3529,267 +3529,7 @@ ui.prototype._drawViewMaps_buildData = function (index, x, y) {
ui.prototype._drawToolbox = function (index) {};
////// 绘制装备界面 //////
ui.prototype._drawEquipbox = function (index) {
var info = this._drawEquipbox_getInfo(index);
this._drawToolbox_drawBackground();
core.setAlpha('ui', 1);
core.setStrokeStyle('ui', '#DDDDDD');
core.canvas.ui.lineWidth = 2;
core.canvas.ui.strokeWidth = 2;
core.setTextAlign('ui', 'right');
var line1 = core._PY_ - 306;
this._drawToolbox_drawLine(line1, '当前装备');
var line2 = core._PY_ - 146;
this._drawToolbox_drawLine(line2 + 9, '拥有装备');
this._drawEquipbox_description(info, line1);
this._drawEquipbox_drawEquiped(info, line1);
this._drawToolbox_drawContent(
info,
line2,
info.ownEquipment,
info.page,
true
);
this.drawPagination(info.page, info.totalPage);
core.setTextAlign('ui', 'center');
core.fillText(
'ui',
'[道具栏]',
core._PX_ - 46,
25,
'#DDDDDD',
this._buildFont(15, true)
);
core.fillText('ui', '返回游戏', core._PX_ - 46, core._PY_ - 13);
};
ui.prototype._drawEquipbox_getInfo = function (index) {
if (!core.status.event.data || core.status.event.data.page == null)
core.status.event.data = { page: 1, selectId: null };
var allEquips = core.status.globalAttribute.equipName;
var equipLength = allEquips.length;
if (!core.status.hero.equipment) core.status.hero.equipment = [];
var n = core._WIDTH_ - 1;
var equipEquipment = core.status.hero.equipment;
var ownEquipment = core.getToolboxItems('equips');
var page = core.status.event.data.page;
var totalPage = Math.ceil(ownEquipment.length / n);
// 处理index
if (index == null) {
if (equipLength > 0 && equipEquipment[0]) index = 0;
else if (ownEquipment.length > 0) index = n;
else index = 0;
}
if (index >= n && ownEquipment.length == 0) index = 0;
var selectId = null;
if (index < n) {
if (index >= equipLength) index = Math.max(0, equipLength - 1);
selectId = equipEquipment[index] || null;
} else {
if (page == totalPage)
index = Math.min(index, ((ownEquipment.length + n - 1) % n) + n);
selectId = ownEquipment[index - n + (page - 1) * n];
if (!core.hasItem(selectId)) selectId = null;
}
core.status.event.selection = index;
core.status.event.data.selectId = selectId;
return {
index: index,
selectId: selectId,
page: page,
totalPage: totalPage,
allEquips: allEquips,
equipLength: equipLength,
equipEquipment: equipEquipment,
ownEquipment: ownEquipment
};
};
ui.prototype._drawEquipbox_description = function (info, max_height) {
core.setTextAlign('ui', 'left');
if (!info.selectId) return;
var equip = core.material.items[info.selectId];
// --- 标题
if (!equip.equip) equip.equip = { type: 0 };
var equipType = equip.equip.type,
equipString;
if (typeof equipType === 'string') {
equipString = equipType || '未知部位';
equipType = core.items.getEquipTypeByName(equipType);
} else equipString = info.allEquips[equipType] || '未知部位';
core.fillText(
'ui',
equip.name + '' + equipString + '',
10,
32,
core.status.globalAttribute.selectColor,
this._buildFont(20, true)
);
// --- 描述
var text = equip.text || '该装备暂无描述。';
try {
text = core.replaceText(text);
} catch (e) {}
var height = null;
for (var fontSize = 17; fontSize >= 9; fontSize -= 2) {
var config = {
left: 10,
top: 46,
fontSize: fontSize,
maxWidth: core._PX_ - 15,
bold: false,
color: 'white'
};
height = 42 + core.getTextContentHeight(text, config);
if (height < max_height - 30 || fontSize == 9) {
core.drawTextContent('ui', text, config);
break;
}
}
// --- 变化值
this._drawEquipbox_drawStatusChanged(
info,
max_height - 15,
equip,
equipType
);
};
ui.prototype._drawEquipbox_getStatusChanged = function (
info,
equip,
equipType,
y
) {
if (info.index < core._WIDTH_ - 1) {
// 光标在装备栏上:查询卸下装备属性
return core.compareEquipment(null, info.selectId);
}
if (equipType < 0) {
// 没有空位
core.fillText(
'ui',
'<当前没有该装备的空位,请先卸下装备>',
10,
y,
'#CCCCCC',
this._buildFont(14, false)
);
return null;
}
// 光标在装备上:查询装上后的属性变化
return core.compareEquipment(info.selectId, info.equipEquipment[equipType]);
};
ui.prototype._drawEquipbox_drawStatusChanged = function (
info,
y,
equip,
equipType
) {
var compare = this._drawEquipbox_getStatusChanged(
info,
equip,
equipType,
y
);
if (compare == null) return;
var obj = { drawOffset: 10, y: y };
// --- 变化值...
core.setFont('ui', this._buildFont(14, true));
for (var name in core.status.hero) {
if (typeof core.status.hero[name] != 'number') continue;
var nowValue = core.getRealStatus(name);
// 查询新值
var newValue = Math.floor(
((core.getStatus(name) + (compare.value[name] || 0)) *
(core.getBuff(name) * 100 + (compare.percentage[name] || 0))) /
100
);
if (nowValue == newValue) continue;
var text = core.getStatusLabel(name);
this._drawEquipbox_drawStatusChanged_draw(text + ' ', '#CCCCCC', obj);
var color = newValue > nowValue ? '#00FF00' : '#FF0000';
nowValue = core.formatBigNumber(nowValue);
newValue = core.formatBigNumber(newValue);
this._drawEquipbox_drawStatusChanged_draw(
nowValue + '->',
'#CCCCCC',
obj
);
this._drawEquipbox_drawStatusChanged_draw(newValue, color, obj);
obj.drawOffset += 8;
}
};
ui.prototype._drawEquipbox_drawStatusChanged_draw = function (
text,
color,
obj
) {
var len = core.calWidth('ui', text);
if (obj.drawOffset + len >= core._PX_) {
// 换行
obj.y += 19;
obj.drawOffset = 10;
}
core.fillText('ui', text, obj.drawOffset, obj.y, color);
obj.drawOffset += len;
};
ui.prototype._drawEquipbox_drawEquiped = function (info, line) {
core.setTextAlign('ui', 'center');
var per_line = core._HALF_WIDTH_ - 3,
width = Math.floor(core._PX_ / (per_line + 0.25));
// 当前装备
for (var i = 0; i < info.equipLength; i++) {
var equipId = info.equipEquipment[i] || null;
// var offset_text = width * (i % per_line) + 56;
var offset_image = width * (i % per_line) + (width * 2) / 3;
var offset_text = offset_image - (width - 32) / 2;
var y = line + 54 * Math.floor(i / per_line) + 19;
if (equipId) {
var icon = core.material.icons.items[equipId];
core.drawImage(
'ui',
core.material.images.items,
0,
32 * icon,
32,
32,
offset_image,
y,
32,
32
);
}
core.fillText(
'ui',
info.allEquips[i] || '未知',
offset_text,
y + 27,
'#FFFFFF',
this._buildFont(16, true)
);
core.strokeRoundRect(
'ui',
offset_image - 4,
y - 4,
40,
40,
6,
info.index == i
? core.status.globalAttribute.selectColor
: '#FFFFFF'
);
}
};
ui.prototype._drawEquipbox = function (index) {};
////// 绘制存档/读档界面 //////
ui.prototype._drawSLPanel = function (index, refresh) {

View File

@ -79,7 +79,7 @@ main.floors.MT1=
[20042, 0, 0,201, 0, 0,141, 0,141,202, 17, 0, 0, 0,20040],
[20042,202, 17, 17, 0, 0,205, 31, 0, 28, 17, 28, 0, 32,20040],
[20042, 0, 27, 17, 31,141,141,141,141,201, 17, 17, 17, 17,20040],
[20042, 32, 0, 17, 0,201, 47, 0,201, 31,202, 0, 32, 0,20040],
[20042, 32, 0, 17, 0,201, 36, 35,201, 31,202, 0, 32, 0,20040],
[20036,20033,20033,20033,20033,20033,20034, 93,20032,20033,20033,20033,20033,20033,20035]
],
"bgmap": [

View File

@ -1389,7 +1389,7 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
floorId: core.status.floorId,
hero: core.clone(core.status.hero),
hard: core.status.hard,
maps: core.maps.saveMap(),
maps: core.clone(core.maps.saveMap()),
route: core.encodeRoute(core.status.route),
values: values,
version: core.firstData.version,
@ -1484,7 +1484,9 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
money: '金币',
exp: '经验',
point: '加点',
steps: '步数'
steps: '步数',
up: '升级',
none: '无'
}[name] || name
);
},

View File

@ -151,8 +151,8 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
"type": "武器",
"animate": "jianji",
"value": {
"mana": 10,
"atk": 15
"atk": 15,
"mana": 10
},
"percentage": {}
},

View File

@ -3361,12 +3361,29 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
}
},
itemDetail: function () {
/*
* 需要将 变量itemDetail改为true才可正常运行
* 请尽量减少勇士的属性数量否则可能会出现严重卡顿
* 注意这里的属性必须是core.status.hero里面的flag无法显示
* 如果不想显示可以core.setFlag("itemDetail", false);
* 然后再core.getItemDetail();
* 如有bug在大群或造塔群@古祠
*/
// 谁tm在即捡即用效果里面调用带有含刷新状态栏的函数
var origin = core.control.updateStatusBar;
core.updateStatusBar = core.control.updateStatusBar = function () {
if (core.getFlag('__statistics__')) return;
else return origin.apply(core.control, arguments);
};
core.bigmap.threshold = 256;
core.control.updateDamage = function (floorId, ctx) {
floorId = floorId || core.status.floorId;
if (!floorId || core.status.gameOver || main.mode != 'play') return;
var onMap = ctx == null;
// 没有怪物手册
if (!core.hasItem('book')) return;
core.status.damage.posX = core.bigmap.posX;
@ -3385,9 +3402,11 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
// 绘制地图显示
control.prototype._drawDamage_draw = function (ctx, onMap) {
if (!core.hasItem('book')) return;
core.setFont(ctx, '15px normal');
// *** 下一句话可以更改你想要的显示字体
core.setFont(ctx, '14px normal');
// ***
core.setTextAlign(ctx, 'left');
core.status.damage.data.forEach(one => {
core.status.damage.data.forEach(function (one) {
var px = one.px,
py = one.py;
if (onMap && core.bigmap.v2) {
@ -3395,16 +3414,16 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
py -= core.bigmap.posY * 32;
if (
px < -32 * 2 ||
px > core.__PIXELS__ + 32 ||
px > core.__PX__ + 32 ||
py < -32 ||
py > core.__PIXELS__ + 32
py > core.__PY__ + 32
)
return;
}
core.fillBoldText(ctx, one.text, px, py, one.color);
});
core.setTextAlign(ctx, 'center');
core.status.damage.extraData.forEach(one => {
core.status.damage.extraData.forEach(function (one) {
var px = one.px,
py = one.py;
if (onMap && core.bigmap.v2) {
@ -3412,69 +3431,25 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
py -= core.bigmap.posY * 32;
if (
px < -32 ||
px > core.__PIXELS__ + 32 ||
px > core.__PX__ + 32 ||
py < -32 ||
py > core.__PIXELS__ + 32
py > core.__PY__ + 32
)
return;
}
core.fillBoldText(ctx, one.text, px, py, one.color);
});
};
core.formatBigNumber = function (x, onMap, onCritical) {
x = Math.floor(parseFloat(x));
if (!core.isset(x) || !Number.isFinite(x)) return '???';
if (x > 1e24 || x < -1e24) return x.toExponential(2);
var c = x < 0 ? '-' : '';
if (onCritical) c = '-> ';
x = Math.abs(x);
if (x <= 9999 || (!onMap && x <= 999999)) return c + x;
var all = [
{ val: 1e20, c: 'g' },
{ val: 1e16, c: 'j' },
{ val: 1e12, c: 'z' },
{ val: 1e8, c: 'e' },
{ val: 1e4, c: 'w' }
];
for (var i = 0; i < all.length; i++) {
var one = all[i];
if (onMap) {
if (x >= one.val) {
var v = x / one.val;
return (
c +
v.toFixed(
Math.max(
0,
Math.floor(
(c == '-' ? 2 : 3) - Math.log10(v + 1)
)
)
) +
one.c
);
}
} else {
if (x >= 10 * one.val) {
var v = x / one.val;
return (
c +
v.toFixed(
Math.max(0, Math.floor(4 - Math.log10(v + 1)))
) +
one.c
);
}
}
}
return c + x;
};
// 获取宝石信息 并绘制
this.getItemDetail = function (floorId) {
if (!core.getFlag('itemDetail')) return;
floorId = floorId || core.status.thisMap.floorId;
core.status.maps[floorId].blocks.forEach(block => {
if (block.event.cls !== 'items') return;
core.status.maps[floorId].blocks.forEach(function (block) {
if (
block.event.cls !== 'items' ||
block.event.id === 'superPotion'
)
return;
var x = block.x,
y = block.y;
// v2优化只绘制范围内的部分
@ -3498,7 +3473,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
var item = core.material.items[id];
if (item.cls === 'equips') {
// 装备也显示
var diff = item.equip.value || {};
var diff = core.clone(item.equip.value || {});
var per = item.equip.percentage;
for (var name in per) {
diff[name + 'per'] = per[name].toString() + '%';
@ -3531,7 +3506,6 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
}
// 绘制
function drawItemDetail(diff, x, y) {
if (core.same(diff, {}) || !diff) return;
var px = 32 * x + 2,
py = 32 * y + 30;
var content = '';
@ -9291,14 +9265,17 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
},
uiChange: function () {
if (main.replayChecking) return;
ui.prototype.drawBook = function () {
if (main.replayChecking) return;
return (core.plugin.bookOpened.value = true);
};
ui.prototype._drawToolbox = function () {
if (main.replayChecking) return;
return (core.plugin.toolOpened.value = true);
};
ui.prototype._drawEquipbox = function () {
return (core.plugin.equipOpened.value = true);
};
}
};

View File

@ -20,7 +20,7 @@ import { uiStack } from './plugin/uiController';
overflow: hidden;
}
@media screen and(max-width:600px) {
@media screen and (max-width: 600px) {
#ui {
width: 100%;
height: 100%;

View File

@ -26,6 +26,7 @@ let ctx: CanvasRenderingContext2D;
let drawFn: () => void;
function draw() {
if (id === 'none') return;
if (has(drawFn)) removeAnimate(drawFn);
const cls = core.getClsFromId(props.id);
@ -46,7 +47,10 @@ function draw() {
c.height = scale * h;
ctx.scale(scale, scale);
if (frames === 1) {
if (props.id === 'hero') {
const img = core.material.images.hero;
ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4, 0, 0, w, h);
} else if (frames === 1) {
core.drawIcon(ctx, props.id, 0, 0, props.width, props.height);
} else {
drawFn = () => {

View File

@ -39,8 +39,8 @@ let ctx: CanvasRenderingContext2D;
let content: HTMLDivElement;
let fromSelf = false;
const resize = () => {
calHeight();
const resize = async () => {
await calHeight();
draw();
};
@ -80,9 +80,14 @@ function draw() {
/**
* 计算元素总长度
*/
function calHeight() {
const style = getComputedStyle(content);
total = parseFloat(style[canvasAttr]);
async function calHeight() {
await new Promise(res => {
requestAnimationFrame(() => {
const style = getComputedStyle(content);
total = parseFloat(style[canvasAttr]);
res('');
});
});
}
function scroll() {
@ -90,11 +95,11 @@ function scroll() {
content.style[cssTarget] = `${-now}px`;
}
onUpdated(() => {
onUpdated(async () => {
if (fromSelf) return;
now = props.now ?? now;
content.style.transition = `${cssTarget} 0.2s ease-out`;
calHeight();
await calHeight();
scroll();
});
@ -120,15 +125,12 @@ function contentDrag(x: number, y: number) {
scroll();
}
onMounted(() => {
onMounted(async () => {
const div = document.getElementById(`scroll-div-${id}`) as HTMLDivElement;
const canvas = document.getElementById(`scroll-${id}`) as HTMLCanvasElement;
const d = document.getElementById(`content-${id}`) as HTMLDivElement;
ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
content = d;
calHeight();
content.addEventListener('resize', resize);
const style = getComputedStyle(canvas);
canvas.style.width = `${width}px`;
@ -144,8 +146,6 @@ onMounted(() => {
canvas.height = width * scale;
}
draw();
//
useDrag(
canvas,
@ -190,10 +190,14 @@ onMounted(() => {
scroll();
fromSelf = false;
});
window.addEventListener('resize', resize);
await calHeight();
draw();
});
onUnmounted(() => {
content.removeEventListener('resize', resize);
window.removeEventListener('resize', resize);
cancelGlobalDrag(canvasDrag);
cancelGlobalDrag(contentDrag);
});

View File

@ -0,0 +1,92 @@
import { has } from '../utils';
/**
*
*/
export function getEquips() {
return Object.entries(core.status.hero.items.equips);
}
/**
*
* @param equip
*/
export function getAddStatus(equip: Equip) {
const toGet = Object.assign({}, equip.value, equip.percentage);
const keys = Object.keys(toGet);
return (
<div class="equip-add-detail">
{keys.map(v => {
const value =
(equip.value[v] ?? 0) +
core.status.hero[v] * (equip.percentage[v] ?? 0);
return (
<span style="display: flex">
<span style="flex-basis: 50%">
{core.getStatusLabel(v)}
</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span
style={{
color: value > 0 ? 'lightgreen' : 'lightsalmon'
}}
>
{value > 0 ? `+${value}` : value}
</span>
</span>
);
})}
</div>
);
}
/**
*
* @param nowEquip
*/
export function getNowStatus(nowEquip?: Equip) {
const toShow = ['hp', 'lv', 'atk', 'def', 'mdef', 'mana', 'hpmax', 'money'];
return (
<div id="hero-status">
{toShow.map(v => {
let status: string;
if (v === 'up') status = core.getNextLvUpNeed()?.toString();
else if (v === 'lv') status = core.getLvName() ?? '';
else status = core.getRealStatus(v)?.toString();
let add = 0;
if (has(nowEquip)) {
add += nowEquip.value[v] ?? 0;
const per = nowEquip.percentage[v] * core.getStatus(v);
add += isNaN(per) ? 0 : per;
}
return (
<div class="hero-status-one">
<span class="hero-status-label">
{core.getStatusLabel(v)}
</span>
<div class="hero-status-value">
<span style="margin-right: 20%">{status}</span>
{add !== 0 && (
<span
style={{
color:
add > 0
? 'lightgreen'
: 'lightsalmon'
}}
>
{add > 0 ? '+' + add : '-' + -add}
</span>
)}
</div>
</div>
);
})}
</div>
);
}

View File

@ -2,9 +2,11 @@ import { sleep } from 'mutate-animate';
import { Component, markRaw, ref, Ref, watch } from 'vue';
import Book from '../ui/book.vue';
import Toolbox from '../ui/toolbox.vue';
import Equipbox from '../ui/equipbox.vue';
export const bookOpened = ref(false);
export const toolOpened = ref(false);
export const equipOpened = ref(false);
export const transition = ref(true);
@ -13,7 +15,8 @@ let app: HTMLDivElement;
/** ui声明列表 */
const UI_LIST: [Ref<boolean>, Component][] = [
[bookOpened, Book],
[toolOpened, Toolbox]
[toolOpened, Toolbox],
[equipOpened, Equipbox]
];
/** ui栈 */
@ -36,7 +39,7 @@ export default function init() {
}
});
});
return { uiStack, bookOpened, toolOpened, transition };
return { uiStack, transition, bookOpened, toolOpened, equipOpened };
}
async function showApp() {

View File

@ -20,27 +20,38 @@ export const isMobile = matchMedia('(max-width: 600px)').matches;
/**
*
* @param ele
* @param ele
* @param fn x y和鼠标事件或点击事件
* @param ondown
* @param global
*/
export function useDrag(
ele: HTMLElement,
ele: HTMLElement | HTMLElement[],
fn: DragFn,
ondown?: DragFn,
onUp?: (e: MouseEvent | TouchEvent) => void,
onup?: (e: MouseEvent | TouchEvent) => void,
global: boolean = false
) {
let down = false;
ele.addEventListener('mousedown', e => {
const md = (e: MouseEvent) => {
down = true;
if (ondown) ondown(e.clientX, e.clientY, e);
});
ele.addEventListener('touchstart', e => {
};
const td = (e: TouchEvent) => {
down = true;
if (ondown) ondown(e.touches[0].clientX, e.touches[0].clientY, e);
});
};
if (ele instanceof Array) {
ele.forEach(v => {
v.addEventListener('mousedown', md);
v.addEventListener('touchstart', td);
});
} else {
ele.addEventListener('mousedown', md);
ele.addEventListener('touchstart', td);
}
const target = global ? document : ele;
@ -56,35 +67,30 @@ export function useDrag(
const mouseUp = (e: MouseEvent) => {
if (!down) return;
onUp && onUp(e);
onup && onup(e);
down = false;
};
const touchUp = (e: TouchEvent) => {
if (!down) return;
onUp && onUp(e);
onup && onup(e);
down = false;
};
target.addEventListener(
'mouseup',
mouseUp as EventListenerOrEventListenerObject
);
target.addEventListener(
'touchend',
touchUp as EventListenerOrEventListenerObject
);
if (target instanceof Array) {
target.forEach(v => {
v.addEventListener('mouseup', mouseUp);
v.addEventListener('touchend', touchUp);
v.addEventListener('mousemove', mouseFn);
v.addEventListener('touchmove', touchFn);
});
} else {
target.addEventListener('mouseup', mouseUp as EventListener);
target.addEventListener('touchend', touchUp as EventListener);
target.addEventListener('mousemove', mouseFn as EventListener);
target.addEventListener('touchmove', touchFn as EventListener);
}
dragFnMap.set(fn, [mouseFn, touchFn, mouseUp, touchUp]);
target.addEventListener(
'mousemove',
mouseFn as EventListenerOrEventListenerObject
);
target.addEventListener(
'touchmove',
touchFn as EventListenerOrEventListenerObject
);
}
/**
@ -131,3 +137,17 @@ export function useUp(ele: HTMLElement, fn: DragFn): void {
fn(e.touches[0].clientX, e.touches[0].clientY, e);
});
}
/**
*
* @param ele
* @param fn
*/
export function useDown(ele: HTMLElement, fn: DragFn): void {
ele.addEventListener('mousedown', e => {
fn(e.clientX, e.clientY, e);
});
ele.addEventListener('touchstart', e => {
fn(e.touches[0].clientX, e.touches[0].clientY, e);
});
}

View File

@ -73,7 +73,7 @@ export function parseCss(css: string): Partial<Record<CanParseCss, string>> {
for (const one of styles) {
const [key, data] = one.split(':');
const cssKey = key.replace(/\-([a-z])/g, $1 =>
const cssKey = key.replace(/\-([a-z])/g, (str, $1) =>
$1.toUpperCase()
) as CanParseCss;
res[cssKey] = data;
@ -84,16 +84,22 @@ export function parseCss(css: string): Partial<Record<CanParseCss, string>> {
/**
* 使
* @param str
* @param time 1
* @param time 1true时
* @param timing 线线
* @param avr
* @returns
*/
export function type(
str: string,
time: number = 1000,
timing: TimingFn = n => n
timing: TimingFn = n => n,
avr: boolean = false
): Ref<string> {
const toShow = eval('`' + str + '`') as string;
if (typeof toShow !== 'string') {
throw new TypeError('Error str type in typing!');
}
if (avr) time *= toShow.length;
const ani = new Animation();
const content = ref('');
const all = toShow.length;
@ -104,6 +110,7 @@ export function type(
content.value = toShow.slice(0, Math.floor(now));
if (Math.floor(now) === all) {
ani.ticker.destroy();
content.value = toShow;
}
};

View File

@ -1,3 +1,5 @@
// 部分全局css特效
#root {
position: absolute;
display: none;
@ -16,3 +18,35 @@
font-family: 'normal';
font-size: 1.6em;
}
.button-text {
cursor: pointer;
transition: color 0.2s linear;
}
.button-text:hover {
color: aqua;
}
.button-text:active {
color: aquamarine;
}
.selectable[selected='true'] {
animation: selected alternate 5s infinite ease-in-out;
}
@keyframes selected {
0% {
border: #0ff7 0.5px solid;
background-color: rgba(39, 251, 209, 0.143);
}
50% {
border: #0ffa 0.5px solid;
background-color: rgba(39, 251, 209, 0.284);
}
100% {
border: #0ff7 0.5px solid;
background-color: rgba(39, 251, 209, 0.143);
}
}

View File

@ -274,7 +274,7 @@ declare class control {
* @param lv
* @returns
*/
getLvName(lv?: number): string | number;
getLvName(lv?: number): string;
/**
*

1
src/types/core.d.ts vendored
View File

@ -42,6 +42,7 @@ type Core = {
npcs: HTMLImageElement;
npc48: HTMLImageElement;
terrains: HTMLImageElement;
hero: HTMLImageElement;
autotile: { [x: string]: HTMLImageElement };
images: { [x: string]: HTMLImageElement };
tilesets: { [x: string]: HTMLImageElement };

View File

@ -41,6 +41,9 @@ interface PluginDeclaration extends PluginUtils {
/** 道具栏是否打开 */
readonly toolOpened: Ref<boolean>;
/** 装备栏是否打开 */
readonly equipOpened: Ref<boolean>;
/** ui栈 */
readonly uiStack: Ref<Component[]>;

8
src/types/util.d.ts vendored
View File

@ -552,6 +552,13 @@ type DetailedEnemy = {
damageColor?: string;
};
type Equip = {
type: number | string;
animate: string;
value: Record<string, number>;
percentage: Record<string, number>;
};
type Item = {
name: string;
cls: 'items' | 'constants' | 'tools' | 'equips';
@ -559,6 +566,7 @@ type Item = {
hideInToolbox?: boolean;
color?: string;
css?: string;
equip?: Equip;
[key: string]: any;
};

View File

@ -2,7 +2,7 @@
<template>
<div id="book">
<div id="tools">
<span id="back" class="tools" @click="exit"
<span id="back" class="button-text tools" @click="exit"
><left-outlined />返回游戏</span
>
</div>
@ -11,7 +11,7 @@
</div>
<Scroll
v-else
style="width: 100%; height: 95%; font-family: normal"
style="width: 100%; height: 94%; font-family: normal"
v-model:now="scroll"
v-model:drag="drag"
>
@ -214,21 +214,11 @@ onUnmounted(async () => {
}
#tools {
height: 5%;
height: 6%;
}
.tools {
border-bottom: 1px solid #ddd4;
cursor: pointer;
transition: color 0.2s linear;
}
.tools:hover {
color: aqua;
}
.tools:active {
color: aquamarine;
}
#none {

View File

@ -22,7 +22,7 @@
<span></span>
<span
id="critical-more"
class="more"
class="button-text more"
@click="changePanel($event, 'critical')"
>详细临界信息 <right-outlined
/></span>
@ -34,7 +34,7 @@
>
<span
id="enemy-pos"
class="more"
class="button-text more"
@click="changePanel($event, 'special')"
><left-outlined /> 怪物特殊属性</span
>
@ -163,16 +163,6 @@ onUnmounted(() => {
.more {
user-select: none;
cursor: pointer;
transition: color 0.2s linear;
}
.more:hover {
color: aqua;
}
.more:active {
color: aquamarine;
}
.detail-enter-active,

537
src/ui/equipbox.vue Normal file
View File

@ -0,0 +1,537 @@
<template>
<div id="equipbox">
<div id="tools">
<span class="button-text tools" @click="exit"
><left-outlined /> 返回游戏</span
>
<span class="button-text tools">道具栏 <right-outlined /></span>
</div>
<div id="equipbox-main">
<div id="equip-list">
<div id="filter">
<a-select v-model:value="norm" class="select">
<a-select-option v-for="t of normList" :value="t">{{
t === 'none' ? '所有' : label(t)
}}</a-select-option>
</a-select>
<a-divider type="vertical" class="divider"></a-divider>
<a-select v-model:value="sType" class="select">
<a-select-option value="value">数值</a-select-option>
<a-select-option value="percentage"
>百分比</a-select-option
>
</a-select>
<a-divider type="vertical" class="divider"></a-divider>
<span
@click="changeSort()"
class="button-text"
id="sort-type"
>
<span v-if="sort === 'down'">
<sort-ascending-outlined />
</span>
<span v-else><sort-descending-outlined /></span>
</span>
</div>
<a-divider
dashed
style="border-color: #ddd4; margin: 1vh 0 1vh 0"
></a-divider>
<Scroll :width="10" id="equip-scroll"
><div
class="equip selectable"
v-for="([id, num], i) of toShow"
:selected="selected === i"
@mousedown="selected = i"
@touchstart="selected = i"
>
<div class="equip-icon">
<BoxAnimate
:id="id ?? 'none'"
:width="32"
:height="32"
:noborder="true"
></BoxAnimate>
<span class="equip-name">{{ all[id].name }}</span>
</div>
<span>×&nbsp;{{ num }}</span>
</div></Scroll
>
</div>
<div id="equip-status">
<a-divider
class="divider"
:type="isMobile ? 'horizontal' : 'vertical'"
dashed
style="border-color: #ddd4"
></a-divider>
<div id="equip-status-main">
<div id="equip-now">
<Scroll
style="width: 100%; height: 30vh"
:type="isMobile ? 'horizontal' : 'vertical'"
>
<div id="equip-now-div">
<div
v-for="(name, i) of equipCol"
class="equip-now-one"
>
<BoxAnimate
:id="equiped[i] ?? 'none'"
></BoxAnimate>
<span>{{ name }}</span>
</div>
</div>
</Scroll>
</div>
<a-divider
dashed
style="border-color: #ddd4; margin: 1vh 0 1vh 0"
></a-divider>
<div id="equip-hero" v-if="!isMobile">
<div id="hero-icon">
<BoxAnimate
id="hero"
:width="48"
:height="64"
noborder
></BoxAnimate>
</div>
<div id="hero-status">
<component :is="nowStatus"></component>
</div>
</div>
</div>
<a-divider
v-if="!isMobile"
class="divider"
type="vertical"
dashed
style="border-color: #ddd4"
></a-divider>
</div>
<div id="equip-desc">
<div id="equip-icon">
<BoxAnimate :id="toShow[selected]?.[0]"></BoxAnimate>
<span>{{ equip.name }}</span>
</div>
<div id="equip-type">
<span>装备孔{{ equip.equip?.type }}</span>
</div>
<a-divider
dashed
style="border-color: #ddd4; margin: 1vh 0 1vh 0"
></a-divider>
<div id="equip-add">
<span style="font-size: 3vh" id="title">增减属性</span>
<Scroll style="width: 100%; height: 100%">
<component :is="addStatus"></component>
</Scroll>
</div>
<a-divider
dashed
style="border-color: #ddd4; margin: 1vh 0 1vh 0"
></a-divider>
<div id="equip-desc-text">
<span style="font-size: 3vh" id="title">装备介绍</span>
<Scroll id="desc-text" style="height: 100%; width: 100%">
<div v-if="!descText.value.startsWith('!!html')">
{{ descText.value }}
</div>
<div v-else v-html="descText.value.slice(6)"></div>
</Scroll>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import {
LeftOutlined,
RightOutlined,
SortAscendingOutlined,
SortDescendingOutlined
} from '@ant-design/icons-vue';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import Scroll from '../components/scroll.vue';
import { getAddStatus, getEquips, getNowStatus } from '../plugin/ui/equipbox';
import BoxAnimate from '../components/boxAnimate.vue';
import { has, type } from '../plugin/utils';
import { cancelGlobalDrag, isMobile, useDrag } from '../plugin/use';
import { hyper } from 'mutate-animate';
const equips = getEquips();
const col = ref('all');
const all = core.material.items;
const selected = ref(0);
const equipCol = core.status.globalAttribute.equipName;
const equiped = core.status.hero.equipment;
const draged = ref(false);
/** 排序方式down表示下面大上面小 */
const sort = ref<'up' | 'down'>('down');
const norm = ref('none');
const sType = ref<'value' | 'percentage'>('value');
//
const normList = ['none', 'atk', 'def', 'hpmax', 'mana'];
const label = core.getStatusLabel;
watch(sort, n => {
selected.value = toShow.value.length - selected.value - 1;
});
watch(norm, n => {
selected.value = 0;
});
watch(sType, n => {
selected.value = 0;
});
/**
* 当前装备
*/
const equip = computed(() => {
const index = toShow.value[selected.value];
if (!has(index))
return {
name: '没有选择装备',
cls: 'equip',
text: '没有选择装备',
equip: { type: '无', value: {}, percentage: {}, animate: '' }
};
return all[index[0]];
});
const addStatus = computed(() => {
return getAddStatus(equip.value.equip!);
});
const descText = computed(() => {
if (equip.value.text.startsWith('!!html')) return ref(equip.value.text);
return type(equip.value.text, 25, hyper('sin', 'out'), true);
});
const nowStatus = computed(() => {
return getNowStatus(equip.value.equip);
});
/**
* 需要展示的装备需要排序等操作
*/
const toShow = computed(() => {
const sortType = sort.value;
const sortNorm = norm.value;
const sortBy = sType.value;
const res = equips.filter(v => {
const e = all[v[0]].equip!;
const t = e.type;
if (sortNorm !== 'none') {
if (!has(e[sortBy][sortNorm])) return false;
}
if (col.value === 'all') return true;
if (typeof t === 'string') return t === col.value;
else return core.status.globalAttribute.equipName[t] === col.value;
});
if (sortNorm === 'none') return res;
else {
if (sortType === 'down') {
return res.sort((a, b) => {
const ea = all[a[0]].equip!;
const eb = all[b[0]].equip!;
return ea[sortBy][sortNorm] - eb[sortBy][sortNorm];
});
} else {
return res.sort((a, b) => {
const ea = all[a[0]].equip!;
const eb = all[b[0]].equip!;
return eb[sortBy][sortNorm] - ea[sortBy][sortNorm];
});
}
}
});
function changeSort() {
if (sort.value === 'down') {
sort.value = 'up';
} else {
sort.value = 'down';
}
}
function exit() {
core.plugin.equipOpened.value = false;
}
// -----
let [fx, fy] = [0, 0];
function dragEquip(x: number, y: number) {
if ((x - fx) ** 2 + (y - fy) ** 2 > 10 ** 2) {
draged.value = true;
}
}
onMounted(() => {
const equips = Array.from(
document.querySelectorAll('.equip')
) as HTMLDivElement[];
// 使穿
useDrag(
equips,
dragEquip,
(x, y) => {
fx = x;
fy = y;
},
void 0,
true
);
});
onUnmounted(() => {
cancelGlobalDrag(dragEquip);
});
</script>
<style lang="less" scoped>
#equipbox {
width: 100%;
height: 100%;
user-select: none;
}
#tools {
width: 100%;
display: flex;
flex-direction: row;
font-size: 2em;
height: 5vh;
justify-content: space-between;
font-family: 'normal';
.tools {
white-space: nowrap;
}
}
#equipbox-main {
height: 85vh;
width: 100%;
display: flex;
flex-direction: row;
font-family: 'normal';
font-size: 2.5vh;
}
.divider {
height: 100%;
}
#equip-list {
display: flex;
flex-direction: column;
flex-basis: 25%;
#filter {
margin-top: 2vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.select {
width: 100%;
font-family: 'normal';
font-size: 1.9vh;
}
#sort-type {
font-size: 1.9vh;
white-space: nowrap;
}
}
#equip-scroll {
height: 100%;
}
}
#equip-status {
display: flex;
flex-basis: 50%;
flex-direction: row;
justify-content: space-between;
#equip-status-main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}
}
#equip-desc {
display: flex;
flex-basis: 25%;
flex-direction: column;
padding-top: 2vh;
align-items: center;
#equip-icon {
width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-bottom: 1px solid #ddd4;
padding-bottom: 1%;
span {
margin-left: 5%;
}
}
#equip-add {
height: 50%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
#title {
width: 100%;
text-align: center;
}
.equip-add-detail {
display: flex;
flex-direction: column;
width: 100%;
}
}
#equip-desc-text {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
#title {
width: 100%;
text-align: center;
}
}
}
#equip-now {
width: 100%;
#equip-now-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding-left: 5%;
.equip-now-one {
flex-basis: 33.3%;
display: flex;
flex-direction: row;
align-items: center;
margin: 3% 0 3% 0;
span {
margin-left: 10%;
}
}
}
}
#equip-hero {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#hero-icon {
display: flex;
align-items: center;
justify-content: center;
margin: 10% 0 10% 0;
}
#hero-status {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
.hero-status-one {
display: flex;
flex-direction: row;
flex-basis: 50%;
width: 100%;
text-align: right;
font-size: 2.9vh;
white-space: nowrap;
.hero-status-label {
width: 100%;
margin-right: 5%;
}
.hero-status-value {
display: flex;
flex-direction: row;
width: 100%;
}
}
}
.equip {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 1vh 1vw 0 0.5vw;
padding: 0.5vh 0.5vw 0.5vh 0.5vw;
border: #0000 0.5px solid;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.equip-icon {
display: flex;
flex-direction: row;
align-items: center;
.equip-name {
margin-left: 5%;
}
}
}
@media screen and (max-width: 600px) {
#equipbox {
padding: 5%;
}
#equipbox-main {
height: 100%;
flex-direction: column-reverse;
}
#equip-now-div {
flex-wrap: nowrap;
}
}
</style>

View File

@ -1,10 +1,10 @@
<template>
<div id="toolbox">
<div id="tools">
<span class="item-type-mobile tools" @click="exit"
<span class="button-text tools" @click="exit"
><left-outlined /> 返回游戏</span
>
<span class="item-type-mobile tools" @click="exit"
<span class="button-text tools" @click="exit"
>装备栏 <right-outlined
/></span>
</div>
@ -16,7 +16,7 @@
</div>
<div v-else id="item-type-mobile">
<span
class="item-type-mobile"
class="button-text"
@click="mode = 'tools'"
:selected="mode === 'tools'"
>消耗道具</span
@ -27,7 +27,7 @@
type="vertical"
></a-divider>
<span
class="item-type-mobile"
class="button-text"
@click="mode = 'constants'"
:selected="mode === 'constants'"
>永久道具</span
@ -39,7 +39,7 @@
></a-divider>
<Scroll class="item-list" :width="10">
<div
class="item"
class="item selectable"
v-for="[id, num] of items[cls]"
:selected="selected === id"
@click="
@ -145,7 +145,7 @@ const descText = computed(() => {
const s = selected.value;
if (s === 'none') return ref('没有选择道具');
if (all[s].text.startsWith('!!html')) return ref(all[s].text);
return type(all[s].text, 600, hyper('sin', 'out'));
return type(all[s].text, 25, hyper('sin', 'out'), true);
});
/**
@ -302,20 +302,10 @@ onUnmounted(() => {
align-items: center;
}
.item-type-mobile {
cursor: pointer;
transition: color 0.2s linear;
}
.item-type-mobile:hover,
.item-type-mobile[selected='true'] {
.button-text[selected='true'] {
color: aqua;
}
.item-type-mobile:active {
color: aquamarine;
}
.item {
display: flex;
flex-direction: row;
@ -339,10 +329,6 @@ onUnmounted(() => {
}
}
.item[selected='true'] {
animation: selected alternate 5s infinite ease-in-out;
}
.divider {
height: 100%;
}
@ -387,21 +373,6 @@ onUnmounted(() => {
}
}
@keyframes selected {
0% {
border: #0ff7 0.5px solid;
background-color: rgba(39, 251, 209, 0.143);
}
50% {
border: #0ffa 0.5px solid;
background-color: rgba(39, 251, 209, 0.284);
}
100% {
border: #0ff7 0.5px solid;
background-color: rgba(39, 251, 209, 0.143);
}
}
@media screen and (max-width: 600px) {
#toolbox {
padding: 5%;