mirror of
https://github.com/MaaAssistantArknights/MaaAssistantArknights.git
synced 2026-07-18 10:10:45 +08:00
533 lines
20 KiB
HTML
533 lines
20 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script type="text/javascript" src="../../resource/character_table.json"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
|
<title>自动战斗流程JSON生成器</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
|
|
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
|
|
|
|
<body>
|
|
<div class="row" style="margin: 50 50;">
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<div class="form-group">
|
|
<h2 for="stagename">
|
|
关卡名字
|
|
</h2>
|
|
<input type="text" class="form-control" id="stagename" />
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group">
|
|
<h2 for="description">
|
|
描述
|
|
</h2>
|
|
<input type="text" class="form-control" id="description" />
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="form-group">
|
|
<h2 for="title">
|
|
标题
|
|
</h2>
|
|
<input type="text" class="form-control" id="title" />
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<button type="button" id="toJson" class="btn btn-primary" onclick="toJSON()">下载JSON</button>
|
|
<input type="file" id="selectedFile" style="display: none;" name="files[]" size=1 />
|
|
<button class="btn btn-primary" onclick="document.getElementById('selectedFile').click();">载入JSON</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<h2>选择干员</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<table id="operatorTable" class="table table-bordered table-condensed table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>修改</th>
|
|
<th>干员名字</th>
|
|
<th>技能</th>
|
|
<th>技能用法</th>
|
|
<th>删除</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-body">
|
|
<div class="form-group">
|
|
<label for="operatorname">
|
|
干员名字
|
|
</label>
|
|
<input type="text" class="form-control" id="operatorname" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="skill">
|
|
技能
|
|
</label>
|
|
<input type="number" class="form-control" id="skill" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="skill_usage">
|
|
技能用法
|
|
</label>
|
|
<select id="skill_usage" class="form-control">
|
|
<option value=0>不自动使用</option>
|
|
<option value=1>好了就用，有多少次用多少次</option>
|
|
<option value=2>好了就用，仅使用一次</option>
|
|
<!-- <option value=3>自动判断使用时机</option> -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<button type="button" id="updateOperatorButton" class="btn btn-primary" onclick="update('operator');">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<h2>战斗流程</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-11">
|
|
<table id="actionTable" class="table table-bordered table-condensed table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>修改</th>
|
|
<th>类别</th>
|
|
<th>Kills</th>
|
|
<th>干员</th>
|
|
<th>x坐标</th>
|
|
<th>y坐标</th>
|
|
<th>方向</th>
|
|
<th>操作前延迟(毫秒)</th>
|
|
<th>操作后延迟(毫秒)</th>
|
|
<th>删除</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-11">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="form-group col-sm-3">
|
|
<label for="type">
|
|
类别
|
|
</label>
|
|
<select id="type" class="form-control">
|
|
<option value="二倍速">二倍速</option>
|
|
<option value="部署">部署</option>
|
|
<option value="技能">技能</option>
|
|
<option value="撤退">撤退</option>
|
|
<option value="子弹时间">子弹时间</option>
|
|
<option value="技能用法">技能用法</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-sm-3">
|
|
<label for="kill">
|
|
Kill
|
|
</label>
|
|
<input type="number" class="form-control" id="kill" />
|
|
</div>
|
|
<div class="form-group col-sm-3">
|
|
<label for="operator">
|
|
干员
|
|
</label>
|
|
<input type="text" id="operator" class="form-control">
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-sm-3">
|
|
<label for="xcoordinate">
|
|
x坐标
|
|
</label>
|
|
<input type="number" class="form-control" id="xcoordinate" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group col-sm-3">
|
|
<label for="direction">
|
|
方向
|
|
</label>
|
|
<select id="direction" class="form-control">
|
|
<option value=""></option>
|
|
<option value="上">上</option>
|
|
<option value="下">下</option>
|
|
<option value="左">左</option>
|
|
<option value="右">右</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-sm-3">
|
|
<label for="pre_delay">
|
|
操作前延迟(毫秒)
|
|
</label>
|
|
<input type="number" class="form-control" id="pre_delay" />
|
|
</div>
|
|
<div class="form-group col-sm-3">
|
|
<label for="rear_delay">
|
|
操作后延迟（毫秒）
|
|
</label>
|
|
<input type="number" class="form-control" id="rear_delay" />
|
|
</div>
|
|
<div class="form-group col-sm-3">
|
|
<label for="ycoordinate">
|
|
y坐标
|
|
</label>
|
|
<input type="number" class="form-control" id="ycoordinate" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<button type="button" id="updateActionButton" class="btn btn-primary" onclick="update('action');">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var operatorList = [];
|
|
var editRow = null;
|
|
var editRowName = null;
|
|
function load() {
|
|
return charName.map(x => ({ "label": x, value: x }));
|
|
}
|
|
|
|
$(function () {
|
|
var availableTags = load();
|
|
$("#operatorname").autocomplete({
|
|
source: availableTags
|
|
});
|
|
});
|
|
|
|
function display(ctl, type) {
|
|
editRow = $(ctl).parents("tr");
|
|
var cols = editRow.children("td");
|
|
if (type === 'operator') {
|
|
$("#operatorname").val($(cols[1]).text());
|
|
$("#skill").val($(cols[2]).text());
|
|
$("#skill_usage").val($(cols[3]).text());
|
|
$("#updateOperatorButton").text("Update");
|
|
editRowName = $(ctl).context.name.substring(4)
|
|
document.getElementById("operatorname").scrollIntoView();
|
|
}
|
|
else if (type === 'action') {
|
|
$("#type").val($(cols[1]).text())
|
|
$("#kill").val($(cols[2]).text())
|
|
$("#operator").val($(cols[3]).text())
|
|
$("#xcoordinate").val($(cols[4]).text())
|
|
$("#ycoordinate").val($(cols[5]).text())
|
|
$("#direction").val($(cols[6]).text())
|
|
$("#pre_delay").val($(cols[7]).text())
|
|
$("#rear_delay").val($(cols[8]).text())
|
|
$("#updateActionButton").text("Update");
|
|
document.getElementById("type").scrollIntoView();
|
|
}
|
|
|
|
}
|
|
|
|
function update(type) {
|
|
if (type === 'operator') {
|
|
if ($("#updateOperatorButton").text() == "Update") {
|
|
updateInTable(type);
|
|
}
|
|
else {
|
|
addToTable(type);
|
|
}
|
|
$("#operatorname").focus();
|
|
}
|
|
else if (type === 'action') {
|
|
if ($("#updateActionButton").text() == "Update") {
|
|
updateInTable(type);
|
|
}
|
|
else {
|
|
addToTable(type);
|
|
}
|
|
$("#type").focus();
|
|
}
|
|
formClear(type);
|
|
}
|
|
function addToTable(type, data = null) {
|
|
if (type === 'operator') {
|
|
if ($("#operatorTable tbody").length == 0) {
|
|
$("#operatorTable").append("<tbody></tbody>");
|
|
}
|
|
var result = buildTableRow(type, data);
|
|
if (result && result.html) $("#operatorTable tbody").append(result.html);
|
|
if (result && result.operatorName) updateOperatorList("add", result.operatorName);
|
|
}
|
|
else if (type === 'action') {
|
|
if ($("#actionTable tbody").length == 0) $("#actionTable").append("<tbody></tbody>");
|
|
$("#actionTable tbody").append(buildTableRow(type, data))
|
|
}
|
|
}
|
|
|
|
// Update operator in <table>
|
|
function updateInTable(type) {
|
|
var result = buildTableRow(type);
|
|
if (result.operatorName) {
|
|
updateOperatorList("update", editRowName, result.operatorName)
|
|
$(editRow).after(result.html);
|
|
}
|
|
else {
|
|
$(editRow).after(result);
|
|
}
|
|
$(editRow).remove();
|
|
formClear(type);
|
|
if (type == "operator") $("#updateOperatorButton").text("Add");
|
|
else if (type == "action") $("#updateActionButton").text("Add");
|
|
}
|
|
|
|
function buildTableRow(type, data = null) {
|
|
let datastring = '';
|
|
if (type === 'operator') {
|
|
if (($("#operatorname").val() && $("#skill").val()) || data) {
|
|
let obj = { name: "", skill: "", skill_usage: "" };
|
|
if (data == null) {
|
|
obj.name = $("#operatorname").val();
|
|
obj.skill = $("#skill").val();
|
|
obj.skill_usage = $("#skill_usage").val();
|
|
}
|
|
else {
|
|
obj.name = data.name;
|
|
obj.skill = data.skill;
|
|
obj.skill_usage = (data.skill_usage ? data.skill_usage : 0);
|
|
}
|
|
datastring = "<td>" + obj.name + "</td>" +
|
|
"<td>" + obj.skill + "</td>" +
|
|
"<td>" + (obj.skill_usage ? obj.skill_usage : 0) + "</td>";
|
|
var ret =
|
|
"<tr>" +
|
|
"<td>" +
|
|
"<button type='button' name =\"edit" + (data && data.name ? data.name : $("#operatorname").val()) + "\"" +
|
|
"onclick='display(this,\"operator\");' " +
|
|
"class='btn btn-default'>" +
|
|
"<span class='ui-icon ui-icon-pencil' />" +
|
|
"</button>" +
|
|
"</td>" + datastring +
|
|
"<td>" +
|
|
"<button type='button' name =\"" + (data && data.name ? data.name : $("#operatorname").val()) + "\"" +
|
|
"onclick='itemDelete(this);' " +
|
|
"class='btn btn-default'>" +
|
|
"<span class='ui-icon ui-icon-closethick' />" +
|
|
"</button>" +
|
|
"</td>" +
|
|
"</tr>"
|
|
return { html: ret, operatorName: $("#operatorname").val() };
|
|
}
|
|
else return;
|
|
}
|
|
else if (type === 'action') {
|
|
if (data) {
|
|
datastring = "<td>" + (data.type ? data.type : "") + "</td>" +
|
|
"<td>" + (data.kills ? data.kills : "") + "</td>" +
|
|
"<td>" + (data.name ? data.name : "") + "</td>" +
|
|
"<td>" + (data.location ? data.location[0] : "") + "</td>" +
|
|
"<td>" + (data.location ? data.location[1] : "") + "</td>" +
|
|
"<td>" + (data.direction ? data.direction : "") + "</td>" +
|
|
"<td>" + (data.pre_delay ? data.pre_delay : "") + "</td>" +
|
|
"<td>" + (data.rear_delay ? data.rear_delay : "") + "</td>";
|
|
}
|
|
else {
|
|
datastring = "<td>" + $("#type").val() + "</td>" +
|
|
"<td>" + $("#kill").val() + "</td>" +
|
|
"<td>" + $("#operator").val() + "</td>" +
|
|
"<td>" + $("#xcoordinate").val() + "</td>" +
|
|
"<td>" + $("#ycoordinate").val() + "</td>" +
|
|
"<td>" + $("#direction").val() + "</td>" +
|
|
"<td>" + $("#pre_delay").val() + "</td>" +
|
|
"<td>" + $("#rear_delay").val() + "</td>";
|
|
}
|
|
|
|
var ret =
|
|
"<tr>" +
|
|
"<td>" +
|
|
"<button type='button' " +
|
|
"onclick='display(this,\"action\");' " +
|
|
"class='btn btn-default'>" +
|
|
"<span class='ui-icon ui-icon-pencil' />" +
|
|
"</button>" +
|
|
"</td>" + datastring +
|
|
"<td>" +
|
|
"<button type='button' " +
|
|
"onclick='itemDelete(this);' " +
|
|
"class='btn btn-default'>" +
|
|
"<span class='ui-icon ui-icon-closethick' />" +
|
|
"</button>" +
|
|
"</td>" +
|
|
"</tr>"
|
|
return ret;
|
|
}
|
|
}
|
|
function itemDelete(ctl) {
|
|
updateOperatorList("delete", $(ctl).context.name)
|
|
$(ctl).parents("tr").remove();
|
|
}
|
|
function updateOperatorList(action, oldname, newName = "") {
|
|
var selectobject = document.getElementById("operator");
|
|
if (action == 'clean') {
|
|
operatorList = [];
|
|
operatorList.push({ label: "", value: "" })
|
|
}
|
|
else if (action == "add" && operatorList.findIndex(o => o.value == oldname) == -1) {
|
|
operatorList.push({ value: oldname, label: oldname });
|
|
}
|
|
else {
|
|
var index = operatorList.findIndex(x => x.value == oldname);
|
|
if (index > -1) {
|
|
operatorList.slice(index);
|
|
if (action == "update") {
|
|
operatorList[index].label = operatorList[index].value = newName;
|
|
// 把现有table干员名字替换
|
|
var actionTable = $("#actionTable tbody");
|
|
actionTable.find('tr').each(function (i, el) {
|
|
var actionData = prepareActionData($(this))
|
|
if (actionData.name == oldname) {
|
|
actionData.name = newName;
|
|
$(this).replaceWith(buildTableRow("action", actionData))
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
operatorList.slice(index);
|
|
}
|
|
}
|
|
}
|
|
$("#operator").autocomplete({
|
|
source: operatorList
|
|
});
|
|
}
|
|
function formClear(type) {
|
|
if (type == "operator") {
|
|
$("#operatorname").val("");
|
|
$("#skill").val("");
|
|
}
|
|
else if (type == "action") {
|
|
$("#type").val("");
|
|
$("#kill").val("");
|
|
$("#operator").val("");
|
|
$("#xcoordinate").val("");
|
|
$("#ycoordinate").val("");
|
|
$("#direction").val("");
|
|
$("#pre_delay").val("");
|
|
$("#rear_delay").val("");
|
|
}
|
|
}
|
|
function prepareActionData(tr) {
|
|
var $tds = tr.find('td'),
|
|
type = $tds.eq(1).text(),
|
|
kills = $tds.eq(2).text(),
|
|
name = $tds.eq(3).text(),
|
|
xcoordinate = $tds.eq(4).text(),
|
|
ycoordinate = $tds.eq(5).text(),
|
|
direction = $tds.eq(6).text(),
|
|
pre_delay = $tds.eq(7).text(),
|
|
rear_delay = $tds.eq(8).text();
|
|
kills = parseInt(kills)
|
|
pre_delay = parseInt(pre_delay)
|
|
rear_delay = parseInt(rear_delay)
|
|
xcoordinate = parseInt(xcoordinate)
|
|
ycoordinate = parseInt(ycoordinate)
|
|
let location = [xcoordinate, ycoordinate]
|
|
var actionData = { type, kills, name, location, direction, pre_delay, rear_delay };
|
|
if (isNaN(actionData.kills)) delete actionData.kills;
|
|
if (isNaN(actionData.pre_delay)) delete actionData.pre_delay;
|
|
if (isNaN(actionData.rear_delay)) delete actionData.rear_delay;
|
|
if (actionData.direction === "") delete actionData.direction;
|
|
if (isNaN(actionData.location[0]) || isNaN(actionData.location[1])) delete actionData.location;
|
|
return actionData;
|
|
}
|
|
function toJSON() {
|
|
var operatorTable = $("#operatorTable tbody");
|
|
var actionTable = $("#actionTable tbody");
|
|
var opers = [];
|
|
var actions = [];
|
|
operatorTable.find('tr').each(function (i, el) {
|
|
var $tds = $(this).find('td'),
|
|
name = $tds.eq(1).text(),
|
|
skill = $tds.eq(2).text(),
|
|
skill_usage = $tds.eq(3).text();
|
|
if (name && skill && skill_usage) {
|
|
skill_usage = parseInt(skill_usage)
|
|
skill = parseInt(skill)
|
|
opers.push({ name, skill, skill_usage });
|
|
}
|
|
});
|
|
actionTable.find('tr').each(function (i, el) {
|
|
var actionData = prepareActionData($(this));
|
|
actions.push(actionData);
|
|
});
|
|
var stage_name = document.getElementById("stagename").value;
|
|
var title = document.getElementById("title").value;
|
|
var details = document.getElementById("description").value;
|
|
var doc = { title, details };
|
|
var obj = { "minimum_required": "v4.0", doc, stage_name, opers, actions };
|
|
var file = new Blob([JSON.stringify(obj)], { type: 'text/plain' });
|
|
var fileName = obj.stage_name + '_' + opers.map(o => o.name).join('+') + '.json';
|
|
const url = window.URL.createObjectURL(file);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', fileName);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
}
|
|
function handleFileSelect(evt) {
|
|
let files = evt.target.files;
|
|
let f = files[0];
|
|
let reader = new FileReader();
|
|
reader.onload = (function (theFile) {
|
|
return function (e) {
|
|
let data = JSON.parse(e.target.result);
|
|
if (!data) alert("读取文件错误")
|
|
else {
|
|
document.getElementById("stagename").value = data.stage_name ? data.stage_name : "";
|
|
document.getElementById("title").value = data.doc.title ? data.doc.title : "";
|
|
document.getElementById("description").value = data.doc.details ? data.doc.details : "";
|
|
$("#operatorTable tbody tr").remove();
|
|
updateOperatorList("clean", "")
|
|
if (data.opers) data.opers.forEach(x => { addToTable("operator", x); updateOperatorList("add", x.name); });
|
|
$("#actionTable tbody tr").remove();
|
|
if (data.actions) data.actions.forEach(x => addToTable("action", x));
|
|
}
|
|
};
|
|
})(f);
|
|
reader.readAsText(f);
|
|
}
|
|
document.getElementById('selectedFile').addEventListener('change', handleFileSelect, false);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |