Merge pull request #612 from LYZhelloworld/feat/Helloworld/tools-copilot-parse-groups

作业生成器增加"分组"的功能
This commit is contained in:
MistEO
2022-05-29 22:38:37 +08:00
committed by GitHub
2 changed files with 315 additions and 591 deletions

View File

@@ -0,0 +1,249 @@
// 全局JSON数据
const data = {};
// 模板
const input_text = () => {
return $('<input type="text" class="form-control">');
};
const skill_usage = () => {
return $('<select id="skill_usage" class="form-control" style="width:auto">' +
'<option value=0>不自动使用</option>' +
'<option value=1>好了就用,有多少次用多少次</option>' +
'<option value=2>好了就用,仅使用一次</option>' +
'<option value=3>自动判断使用时机</option>' +
'</select>');
};
const delete_icon = () => {
return $('<button type="button" class="btn btn-default"><span class="ui-icon ui-icon-closethick"></span></button>')
};
const action_type = () => {
return $('<select id="type" class="form-control" style="width:auto">' +
'<option value="二倍速">二倍速</option>' +
'<option value="部署">部署</option>' +
'<option value="技能">技能</option>' +
'<option value="撤退">撤退</option>' +
'<option value="子弹时间">子弹时间</option>' +
'<option value="技能用法">技能用法</option>' +
'</select>');
};
const direction = () => {
return $('<select id="direction" class="form-control" style="width:auto">' +
'<option value=""></option>' +
'<option value="上">上</option>' +
'<option value="下">下</option>' +
'<option value="左">左</option>' +
'<option value="右">右</option>' +
'</select>');
}
const oper = (oper_data, delete_func) => {
const tr = $('<tr>');
// 干员名字
const name_input = input_text()
.val(oper_data.name ?? "")
.change(function () { oper_data.name = $(this).val(); });
tr.append($('<td>').append(name_input));
// 技能
const skill_input = input_text()
.attr('type', 'number')
.val(String(oper_data.skill ?? 0))
.change(function () { oper_data.skill = Number($(this).val()); });
tr.append($('<td>').append(skill_input));
// 技能用法
const skill_usage_input = skill_usage()
.val(String(oper_data.skill_usage ?? 0))
.change(function () { oper_data.skill_usage = Number($(this).val()); });
tr.append($('<td>').append(skill_usage_input));
// 删除
tr.append($('<td>').append(delete_icon().click(delete_func)));
return tr;
}
const action = (action_data) => {
const tr = $('<tr>');
// 类别
const type_input = action_type()
.val(action_data.type ?? "")
.change(function () { action_data.type = $(this).val(); });
tr.append($('<td>').append(type_input));
// 击杀数
const kills_input = input_text()
.attr('type', 'number')
.val(String(action_data.kills ?? ""))
.change(function () { action_data.kills = $(this).val !== "" ? Number($(this).val()) : undefined; });
tr.append($('<td>').append(kills_input));
// 费用变化
const cost_changes = input_text()
.attr('type', 'number')
.val(String(action_data.cost_changes ?? ""))
.change(function () { action_data.cost_changes = $(this).val !== "" ? Number($(this).val()) : undefined; });
tr.append($('<td>').append(cost_changes));
// 干员
const name_input = input_text()
.val(action_data.name ?? "")
.change(function () { action_data.name = $(this).val(); });
tr.append($('<td>').append(name_input));
// x坐标
const location_x_input = input_text()
.attr('type', 'number')
.val(String((action_data.location ?? [undefined, undefined])[0] ?? ""))
.change(function () {
action_data.location = action_data.location ?? [undefined, undefined];
action_data.location[0] = $(this).val() !== "" ? Number($(this).val()) : undefined;
});
tr.append($('<td>').append(location_x_input));
// y坐标
const location_y_input = input_text()
.attr('type', 'number')
.val(String((action_data.location ?? [undefined, undefined])[1] ?? ""))
.change(function () {
action_data.location = action_data.location ?? [undefined, undefined];
action_data.location[1] = $(this).val() !== "" ? Number($(this).val()) : undefined;
});
tr.append($('<td>').append(location_y_input));
// 方向
const direction_input = direction()
.val(action_data.direction ?? "")
.change(function () { action_data.direction = $(this).val(); });
tr.append($('<td>').append(direction_input));
// 前延迟
const pre_delay_input = input_text()
.attr('type', 'number')
.val(String(action_data.pre_delay ?? ""))
.change(function () { action_data.pre_delay = $(this).val() !== "" ? Number($(this).val()) : undefined; });
tr.append($('<td>').append(pre_delay_input));
// 后延迟
const rear_delay_input = input_text()
.attr('type', 'number')
.val(String(action_data.rear_delay ?? ""))
.change(function () { action_data.rear_delay = $(this).val() !== "" ? Number($(this).val()) : undefined; });
tr.append($('<td>').append(rear_delay_input));
// 文本
const doc_input = input_text()
.val(action_data.doc ?? "")
.change(function () { action_data.doc = $(this).val(); });
tr.append($('<td>').append(doc_input));
// 颜色
const doc_color_input = input_text()
.val(action_data.doc_color ?? "")
.change(function () { action_data.doc_color = $(this).val(); });
tr.append($('<td>').append(doc_color_input));
// 删除
tr.append($('<td>').append(delete_icon().click(() => {
data.actions = data.actions.filter(a => a !== action_data);
loadData();
})));
return tr;
};
const group = (group_data, delete_func) => {
// 群组名
const name_div_row = $('<div class="row">');
const name_div_col = $('<div class="col-11">');
const name_input = input_text()
.val(group_data.name ?? "")
.change(function () { group_data.name = $(this).val(); });
name_div_col.append(name_input);
const delete_col = $('<div class="col-1">');
delete_col.append(delete_icon().click(delete_func));
name_div_row.append(name_div_col).append(delete_col);
// 群组干员列表
const table = $('<table class="table table-bordered table-condensed table-striped">' +
'<thead>' +
'<tr>' +
'<th>干员名字</th>' +
'<th>技能</th>' +
'<th>技能用法</th>' +
'<th>删除</th>' +
'</tr>' +
'</thead>' +
'<tbody></tbody>' +
'</table>');
(group_data.opers ?? []).forEach(oper_data => table.find('tbody').append(oper(oper_data, () => {
group_data.opers = group_data.opers.filter(o => o !== oper_data);
loadData();
})));
return $('<div>')
.append(name_div_row)
.append(table);
};
// 加载数据
const loadData = () => {
$('#stage_name').text(data.stage_name ?? "");
$('#details').text(data.details ?? "");
$('#title').text(data.title ?? "");
// TODO: requirements
$('#opers tbody').html('');
(data.opers ?? []).forEach(oper_data => $('#opers tbody').append(oper(oper_data, () => {
data.opers = data.opers.filter(o => o !== oper_data);
loadData();
})));
$('#groups').html('');
(data.groups ?? []).forEach(group_data => $('#groups').append(group(group_data, () => {
data.groups = data.groups.filter(g => g !== group_data);
loadData();
})));
$('#actions tbody').html('');
(data.actions ?? []).forEach(action_data => $('#actions tbody').append(action(action_data)));
};
$(document).ready(() => {
// 绑定事件
$('#stage_name').change(() => data.stage_name = $('#stage_name').val());
$('#details').change(() => data.details = $('#details').val());
$('#title').change(() => data.title = $('#title').val());
$('#opers_new').click(() => {
data.opers = data.opers ?? [];
data.opers.push({});
loadData();
});
$('#actions_new').click(() => {
data.actions = data.actions ?? [];
data.actions.push({});
loadData();
});
$('#groups_new').click(() => {
data.groups = data.groups ?? [];
data.groups.push({});
loadData();
})
$('#download_json').click(() => {
const result = JSON.stringify(data, null, 4);
const file = new Blob([result], { type: 'application/json' });
const fileName = data.stage_name + '_' + data.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);
link.click();
});
$('#upload_json').click(() => $('#json_file').click());
$('#json_file').change(function (e) {
const files = e.target.files;
const f = files[0];
const reader = new FileReader();
reader.onload = (() => (e) => {
Object.assign(data, JSON.parse(e.target.result));
loadData();
})(f);
reader.readAsText(f);
});
loadData();
});

View File

@@ -9,602 +9,77 @@
<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>
<style>
.actiontitle {
font-size: 2rem;
line-height: .75em;
}
.tips {
font-weight: lighter;
font-size: 0.5em;
color: gray;
}
</style>
<script src="index.js" type="text/javascript"></script>
</head>
<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" />
<span class="tips">小贴士:填完关卡名后开一局,会在目录下生成 map.png 地图坐标图片</span>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 for="description">
文本
</h2>
<textarea type="text" class="form-control" id="description"></textarea>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 for="title">
标题
</h2>
<textarea type="text" class="form-control" id="title"></textarea>
</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 class="container">
<div class="row">
<div class="col-12">
<button id="download_json" class="btn btn-primary">下载JSON</button>
<input type="file" id="json_file" style="display: none;" name="files[]" size=1 />
<button id="upload_json" class="btn btn-primary">载入JSON</button>
</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-sm-12">
<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-12">
<p class="actiontitle">战斗流程 <span class="tips">小贴士:可以拖拽更改顺序</span></p>
</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>干员名字</th>
<th>x坐标</th>
<th>y坐标</th>
<th>方向</th>
<th>前延迟</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-2">
<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-2">
<label for="kill">
击杀数
</label>
<input type="number" class="form-control" id="kill" />
</div>
<div class="form-group col-sm-2">
<label for="cost_changes">
费用变化
</label>
<input type="number" class="form-control" id="cost_changes" />
</div>
</div>
<div class="row">
<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-2">
<label for="xcoordinate">
x坐标
</label>
<input type="number" class="form-control" id="xcoordinate" />
</div>
<div class="form-group col-sm-2">
<label for="ycoordinate">
y坐标
</label>
<input type="number" class="form-control" id="ycoordinate" />
</div>
<div class="form-group col-sm-2">
<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>
<div class="row">
<div class="form-group col-sm-2">
<label for="pre_delay">
前延迟(毫秒)
</label>
<input type="number" class="form-control" id="pre_delay" />
</div>
<div class="form-group col-sm-2">
<label for="rear_delay">
后延迟(毫秒)
</label>
<input type="number" class="form-control" id="rear_delay" />
</div>
<div class="form-group col-sm-4">
<label for="doc">
文本
</label>
<input type="text" class="form-control" id="doc" />
</div>
<div class="form-group col-sm-2">
<label for="doc_color">
文本颜色
</label>
<input type="text" class="form-control" id="doc_color" />
</div>
</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><!--JSON-->
<div class="row">
<div class="col-12">
<h1>关卡中文名</h1>
<span class="tips">小贴士:填完关卡名后开一局,会在目录下生成 map.png 地图坐标图片</span>
<input type="text" id="stage_name" class="form-control" placeholder="关卡中文名">
</div><!--关卡中文名-->
<div class="col-12">
<h2>文本</h2>
<textarea type="text" class="form-control" id="details" placeholder="文本"></textarea>
</div><!--文本-->
<div class="col-12">
<h2>标题</h2>
<input type="text" id="title" class="form-control" placeholder="标题">
</div><!--标题-->
<div class="col-12">
<h2>群组</h2>
<div id="groups"></div>
<button id="groups_new" class="btn btn-primary">添加群组</button>
</div><!--群组-->
<div class="col-12">
<h2>干员</h2>
<table id="opers" class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>干员名字</th>
<th>技能</th>
<th>技能用法</th>
<th>删除</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id="opers_new" class="btn btn-primary">新增</button>
</div><!--干员-->
<div class="col-12">
<h2>战斗流程</h2>
<table id="actions" class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>类别</th>
<th>击杀数</th>
<th>费用变化</th>
<th>干员名字</th>
<th>x坐标</th>
<th>y坐标</th>
<th>方向</th>
<th>前延迟</th>
<th>后延迟</th>
<th>文本</th>
<th>文本颜色</th>
<th>删除</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id="actions_new" class="btn btn-primary">新增</button>
</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())
$("#cost_changes").val($(cols[3]).text())
$("#operator").val($(cols[4]).text())
$("#xcoordinate").val($(cols[5]).text())
$("#ycoordinate").val($(cols[6]).text())
$("#direction").val($(cols[7]).text())
$("#pre_delay").val($(cols[8]).text())
$("#rear_delay").val($(cols[9]).text())
$("#doc").val($(cols[10]).text())
$("#doc_color").val($(cols[11]).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>");
let indexVal = parseInt($("#insertindex").val())
if (indexVal >= 0 && indexVal <= $("#actionTable tbody tr").length) {
var newRow = $(buildTableRow(type, data));
newRow.insertBefore($('#actionTable tbody tr:nth(' + indexVal + ')'));
}
else $("#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 draggable='true' ondragstart='start()' ondragover='dragover()'>" +
"<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.cost_changes ? data.cost_changes : "") + "</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>" +
"<td>" + (data.doc ? data.doc : "") + "</td>" +
"<td>" + (data.doc_color ? data.doc_color : "") + "</td>";
}
else {
datastring = "<td>" + $("#type").val() + "</td>" +
"<td>" + $("#kill").val() + "</td>" +
"<td>" + $("#cost_changes").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>" +
"<td>" + $("#doc").val() + "</td>" +
"<td>" + $("#doc_color").val() + "</td>";
}
var ret =
"<tr draggable='true' ondragstart='start()' ondragover='dragover()'>" +
"<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("");
$("#cost_changes").val("");
$("#operator").val("");
$("#xcoordinate").val("");
$("#ycoordinate").val("");
$("#direction").val("");
$("#pre_delay").val("");
$("#rear_delay").val("");
$("#doc").val("");
$("#doc_color").val("");
}
}
function prepareActionData(tr) {
var $tds = tr.find('td'),
type = $tds.eq(1).text(),
kills = $tds.eq(2).text(),
cost_changes = $tds.eq(3).text(),
name = $tds.eq(4).text(),
xcoordinate = $tds.eq(5).text(),
ycoordinate = $tds.eq(6).text(),
direction = $tds.eq(7).text(),
pre_delay = $tds.eq(8).text(),
rear_delay = $tds.eq(9).text(),
doc = $tds.eq(10).text(),
doc_color = $tds.eq(11).text();
kills = parseInt(kills)
cost_changes = parseInt(cost_changes)
pre_delay = parseInt(pre_delay)
rear_delay = parseInt(rear_delay)
xcoordinate = parseInt(xcoordinate)
ycoordinate = parseInt(ycoordinate)
let location = [xcoordinate, ycoordinate]
var actionData = { type, kills, cost_changes, name, location, direction, pre_delay, rear_delay, doc, doc_color };
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 jsonString = JSON.stringify(obj);
var jsonPretty = JSON.stringify(JSON.parse(jsonString), null, 4);
var file = new Blob([jsonPretty], { 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); });
$("#insertindex").val(-1)
$("#actionTable tbody tr").remove();
if (data.actions) data.actions.forEach(x => { addToTable("action", x) });
}
};
})(f);
reader.readAsText(f);
}
var row;
function start() {
row = event.target;
}
function dragover() {
var e = event;
e.preventDefault();
let children = Array.from(e.target.parentNode.parentNode.children);
if (children.indexOf(e.target.parentNode) > children.indexOf(row))
e.target.parentNode.after(row);
else
e.target.parentNode.before(row);
}
document.getElementById('selectedFile').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
</html>