根据现有json移除actiontable增加判定+契合实际json+修复bug

This commit is contained in:
Shawnsdaddy
2022-05-23 19:47:11 -07:00
parent b95a34b4e0
commit 097a4b7a6e

View File

@@ -8,8 +8,6 @@
<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>
<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>
@@ -41,10 +39,9 @@
</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;" />
<button class="btn btn-primary" onclick="document.getElementById('selectedFile').click();">读取JSON</button> -->
<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>
@@ -123,9 +120,10 @@
<tr>
<th>修改</th>
<th>类别</th>
<th>Kill</th>
<th>Kills</th>
<th>干员</th>
<th>坐标</th>
<th>x坐标</th>
<th>y坐标</th>
<th>方向</th>
<th>操作前延迟(毫秒)</th>
<th>操作后延迟(毫秒)</th>
@@ -139,61 +137,72 @@
<div class="col-sm-11">
<div class="panel panel-primary">
<div class="panel-body">
<div class="form-group">
<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>
</select>
<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="form-group">
<label for="kill">
Kill
</label>
<input type="number" class="form-control" id="kill" />
<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 class="form-group">
<label for="operator">
干员
</label>
<select id="operator" class="form-control">
</select>
</div>
<div class="form-group">
<label for="coordinate">
坐标
</label>
<input type="text" class="form-control" id="coordinate" />
</div>
<div class="form-group">
<label for="direction">
方向
</label>
<select id="direction" class="form-control">
<option value="上"></option>
<option value="下"></option>
<option value="左"></option>
<option value="右"></option>
</select>
</div>
<div class="form-group">
<label for="pre_delay">
操作前延迟(毫秒)
</label>
<input type="number" class="form-control" id="pre_delay" />
</div>
<div class="form-group">
<label for="rear_delay">
操作后延迟(毫秒)
</label>
<input type="number" class="form-control" id="rear_delay" />
</div>
</div>
<div class="panel-footer">
<div class="row">
@@ -210,6 +219,7 @@
</div>
</div>
<script>
var operatorList = [];
var editRow = null;
var editRowName = null;
function load() {
@@ -232,16 +242,19 @@
$("#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())
$("#coordinate").val($(cols[4]).text())
$("#direction").val($(cols[5]).text())
$("#pre_delay").val($(cols[6]).text())
$("#rear_delay").val($(cols[7]).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();
}
}
@@ -267,25 +280,19 @@
}
formClear(type);
}
function addToTable(type) {
function addToTable(type, data = null) {
if (type === 'operator') {
if ($("#operatorTable tbody").length == 0) {
$("#operatorTable").append("<tbody></tbody>");
}
// Append operator to table
var result = buildTableRow(type);
if (result.html) $("#operatorTable tbody").append(result.html);
updateOperatorList("add", result.operatorName);
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));
if ($("#actionTable tbody").length == 0) $("#actionTable").append("<tbody></tbody>");
$("#actionTable tbody").append(buildTableRow(type, data))
}
}
// Update operator in <table>
@@ -304,23 +311,35 @@
else if (type == "action") $("#updateActionButton").text("Add");
}
function buildTableRow(type) {
function buildTableRow(type, data = null) {
let datastring = '';
if (type === 'operator') {
if ($("#operatorname").val() && $("#skill").val()) {
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" + $("#operatorname").val() + "\"" +
"<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>" +
"<td>" + $("#operatorname").val() + "</td>" +
"<td>" + $("#skill").val() + "</td>" +
"<td>" + $("#skill_usage").val() + "</td>" +
"</td>" + datastring +
"<td>" +
"<button type='button' name =\"" + $("#operatorname").val() + "\"" +
"<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' />" +
@@ -332,33 +351,45 @@
else return;
}
else if (type === 'action') {
if ($("#type").val() && $("#kill").val() && $("#operator").val() && $("#coordinate").val() && $("#direction").val() && $("#pre_delay").val() && $("#rear_delay").val()) {
var ret =
"<tr>" +
"<td>" +
"<button type='button' " +
"onclick='display(this,\"action\");' " +
"class='btn btn-default'>" +
"<span class='ui-icon ui-icon-pencil' />" +
"</button>" +
"</td>" +
"<td>" + $("#type").val() + "</td>" +
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>" + $("#coordinate").val() + "</td>" +
"<td>" + $("#xcoordinate").val() + "</td>" +
"<td>" + $("#ycoordinate").val() + "</td>" +
"<td>" + $("#direction").val() + "</td>" +
"<td>" + $("#pre_delay").val() + "</td>" +
"<td>" + $("#rear_delay").val() + "</td>" +
"<td>" +
"<button type='button' " +
"onclick='itemDelete(this);' " +
"class='btn btn-default'>" +
"<span class='ui-icon ui-icon-closethick' />" +
"</button>" +
"</td>" +
"</tr>"
return ret;
"<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) {
@@ -367,19 +398,38 @@
}
function updateOperatorList(action, oldname, newName = "") {
var selectobject = document.getElementById("operator");
if (action == "add" && Array.apply(null, selectobject.options).findIndex(o => o.value == oldname) == -1) {
$('#operator').append($('<option>', { value: oldname, text: oldname }));
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 {
for (var i = 0; i < selectobject.length; i++) {
if (selectobject.options[i].value == oldname) {
selectobject.remove(i);
if (action == "update") $('#operator').append($('<option>', { value: newName, text: newName }));
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("");
@@ -389,15 +439,40 @@
$("#type").val("");
$("#kill").val("");
$("#operator").val("");
$("#coordinate").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");
var actionTable = $("#actionTable");
var operatorTable = $("#operatorTable tbody");
var actionTable = $("#actionTable tbody");
var opers = [];
var actions = [];
operatorTable.find('tr').each(function (i, el) {
@@ -407,34 +482,51 @@
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 $tds = $(this).find('td'),
type = $tds.eq(1).text(),
kills = $tds.eq(2).text(),
name = $tds.eq(3).text(),
location = $tds.eq(4).text(),
direction = $tds.eq(5).text(),
pre_delay = $tds.eq(6).text(),
rear_delay = $tds.eq(7).text();
if (type && kills && name && location && direction && pre_delay && rear_delay) {
kills = parseInt(kills)
pre_delay = parseInt(pre_delay)
rear_delay = parseInt(rear_delay)
actions.push({ type, kills, name, location, direction, pre_delay, rear_delay });
}
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 desc = { title, details };
var obj = { stage_name, opers, actions, desc };
console.log(obj)
navigator.clipboard.writeText(JSON.stringify(obj));
alert("已经复制JSON到剪切板")
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>