mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-01-19 04:19:30 +08:00
装备栏ui
This commit is contained in:
parent
1dc79595e8
commit
bde0a4d1c0
2
components.d.ts
vendored
2
components.d.ts
vendored
@ -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']
|
||||
|
@ -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,
|
||||
|
@ -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')
|
||||
|
@ -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) {
|
||||
|
@ -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": [
|
||||
|
@ -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
|
||||
);
|
||||
},
|
||||
|
@ -151,8 +151,8 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
|
||||
"type": "武器",
|
||||
"animate": "jianji",
|
||||
"value": {
|
||||
"mana": 10,
|
||||
"atk": 15
|
||||
"atk": 15,
|
||||
"mana": 10
|
||||
},
|
||||
"percentage": {}
|
||||
},
|
||||
|
@ -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);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
@ -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%;
|
||||
|
@ -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 = () => {
|
||||
|
@ -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);
|
||||
});
|
||||
|
92
src/plugin/ui/equipbox.tsx
Normal file
92
src/plugin/ui/equipbox.tsx
Normal 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>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
@ -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() {
|
||||
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
@ -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 打出总用时,默认1秒,当第四个参数是true时,该项为每个字的平均时间
|
||||
* @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;
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
2
src/types/control.d.ts
vendored
2
src/types/control.d.ts
vendored
@ -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
1
src/types/core.d.ts
vendored
@ -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 };
|
||||
|
3
src/types/plugin.d.ts
vendored
3
src/types/plugin.d.ts
vendored
@ -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
8
src/types/util.d.ts
vendored
@ -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;
|
||||
};
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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
537
src/ui/equipbox.vue
Normal 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>× {{ 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>
|
@ -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%;
|
||||
|
Loading…
Reference in New Issue
Block a user