|
|
@@ -19,19 +19,34 @@
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div id="nav">
|
|
|
- <button id="levels">关卡</button>
|
|
|
- <button id="examples">实例</button>
|
|
|
- <button id="templates">模板</button>
|
|
|
+ <div id="hdr" style="background-color: antiquewhite;">
|
|
|
+ <input type="text" id="group-suffix" placeholder="分组文件的后缀">
|
|
|
+ <button id="load_grp">加载分组信息</button>
|
|
|
</div>
|
|
|
- <div id="content">
|
|
|
- <!-- 动态内容 -->
|
|
|
+ <div id="panels-area" style="display: flex; height: 95vh;">
|
|
|
+ <div id="nav" style="overflow-y: scroll; height: 90%; width: 5%; background-color: coral;">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <button id="levels">关卡</button>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <button id="examples">实例</button>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <button id="templates">模板</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div id="content" style="overflow-y: scroll; height: 90%; width: 85%; background-color: beige;">
|
|
|
+ <!-- 动态内容 -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
var levels = null;
|
|
|
var instances = null;
|
|
|
var templateFNs = null;
|
|
|
+ var templateFNsByDir = null;
|
|
|
|
|
|
function getInstanceByName(name) {
|
|
|
for (let i = 0; i < instances.length; i++) {
|
|
|
@@ -98,24 +113,46 @@
|
|
|
// 显示所有用到了该实例的关卡
|
|
|
const lvIds = getAllLvIdsByInstName(inst.lvinst);
|
|
|
div.innerHTML += `
|
|
|
- <p>用到了该实例的关卡: ${lvIds}</p>
|
|
|
+ <p style="display: inline;">用到了该实例的关卡: ${lvIds}</p>
|
|
|
`;
|
|
|
// 加入 template 下拉框
|
|
|
- div.innerHTML += `
|
|
|
- <p id='tempid-in-inst-detail'>模板名称: </p>
|
|
|
- `;
|
|
|
- const templateSelect = document.createElement('select');
|
|
|
- templateSelect.id = 'template-select';
|
|
|
- templateFNs.forEach(fn => {
|
|
|
- const option = document.createElement('option');
|
|
|
- option.value = fn;
|
|
|
- option.textContent = fn;
|
|
|
- if (fn == inst.template) {
|
|
|
- option.selected = true;
|
|
|
- }
|
|
|
- templateSelect.appendChild(option);
|
|
|
- });
|
|
|
- div.appendChild(templateSelect);
|
|
|
+ {
|
|
|
+ var div1 = document.createElement('div');
|
|
|
+ const p = document.createElement('p');
|
|
|
+ p.style.display = 'inline';
|
|
|
+ p.appendChild(document.createTextNode('模板名称: '));
|
|
|
+ div1.appendChild(p);
|
|
|
+
|
|
|
+ const templateSelect = document.createElement('select');
|
|
|
+ templateSelect.id = 'template-select';
|
|
|
+ templateFNs.forEach(fn => {
|
|
|
+ const option = document.createElement('option');
|
|
|
+ option.value = fn;
|
|
|
+ option.textContent = fn;
|
|
|
+ if (fn == inst.template) {
|
|
|
+ option.selected = true;
|
|
|
+ }
|
|
|
+ templateSelect.appendChild(option);
|
|
|
+ });
|
|
|
+ div1.appendChild(templateSelect);
|
|
|
+
|
|
|
+ // 增加一个编辑模板的按钮
|
|
|
+ const editTemplateButton = document.createElement('button');
|
|
|
+ editTemplateButton.id = 'edit-template-button';
|
|
|
+ editTemplateButton.textContent = '编辑模板';
|
|
|
+ editTemplateButton.addEventListener('click', () => {
|
|
|
+ // 判断模板是在哪个目录下
|
|
|
+ for (let dir in templateFNsByDir) {
|
|
|
+ if (templateFNsByDir[dir].has(inst.template)) {
|
|
|
+ window.electron.send('open-app', '/Applications/Tiled.app/Contents/MacOS/Tiled ' + dir + '/' + inst.template + '.json');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ div1.appendChild(editTemplateButton);
|
|
|
+
|
|
|
+ div.appendChild(div1);
|
|
|
+ }
|
|
|
// 加入表格
|
|
|
const table = document.createElement('table');
|
|
|
const thead = document.createElement('thead');
|
|
|
@@ -185,14 +222,34 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- function initData() {
|
|
|
+ // 过滤实例列表
|
|
|
+ function filterInstance() {
|
|
|
+ // 获取输入框的值
|
|
|
+ var filter = document.getElementById('instance-filter').value;
|
|
|
+ // 获取实例列表
|
|
|
+ var list = document.getElementById('instance-list').getElementsByTagName('li');
|
|
|
+ // 遍历实例列表
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ // 获取实例的名字
|
|
|
+ var name = list[i].innerHTML;
|
|
|
+ // 如果实例的名字包含输入框的值，显示实例
|
|
|
+ if (name.indexOf(filter) > -1) {
|
|
|
+ list[i].style.display = '';
|
|
|
+ } else {
|
|
|
+ // 否则隐藏实例
|
|
|
+ list[i].style.display = 'none';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function initData(suffix) {
|
|
|
// 读取关卡信息并填充到页面
|
|
|
if (levels == null) {
|
|
|
- window.electron.send('parse-csv', '../../conf/levelInfo.csv')
|
|
|
+ window.electron.send('parse-csv', '../../conf/levelInfo'+suffix+'.csv')
|
|
|
window.electron.receive('csv-data', (data) => {
|
|
|
if (levels == null) {
|
|
|
levels = data;
|
|
|
- window.electron.send('parse-csv', '../../conf/levelInstInfo.csv')
|
|
|
+ window.electron.send('parse-csv', '../../conf/levelInstInfo'+suffix+'.csv')
|
|
|
} else {
|
|
|
if (instances == null) {
|
|
|
instances = data
|
|
|
@@ -202,17 +259,20 @@
|
|
|
}
|
|
|
if (templateFNs == null) {
|
|
|
templateFNs = [];
|
|
|
+ templateFNsByDir = {};
|
|
|
window.electron.send('get-file-list', '../../tf_templates;../../miniGame')
|
|
|
window.electron.receive('file-list-error', (data) => {
|
|
|
console.error('Error reading directory: ', err);
|
|
|
});
|
|
|
- window.electron.receive('file-list-data', (data) => {
|
|
|
+ window.electron.receive('file-list-data', (data, path) => {
|
|
|
+ templateFNsByDir[path] = new Set();
|
|
|
// 过滤掉非 .json 后缀的文件
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
if (data[i].endsWith('.json')) {
|
|
|
// 去掉后缀
|
|
|
const name = data[i].substring(0, data[i].length - 5);
|
|
|
templateFNs.push(name);
|
|
|
+ templateFNsByDir[path].add(name);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
@@ -291,38 +351,46 @@
|
|
|
levelDetails.appendChild(instSelect);
|
|
|
}
|
|
|
// 加入一个按钮，点击后可以创建实例
|
|
|
- const createInstButton = document.createElement('button');
|
|
|
- createInstButton.id = 'create-instance-button';
|
|
|
- createInstButton.textContent = '创建新的实例';
|
|
|
- levelDetails.appendChild(createInstButton);
|
|
|
- // createInstButton.addEventListener('click', () => {
|
|
|
- // addNewInst(level);
|
|
|
- // });
|
|
|
- console.log(createInstButton.onclick);
|
|
|
-
|
|
|
- // 增加一个下拉框，选择类型：normal,hard,super-hard
|
|
|
- const type = level['type(normal=0,hard=1,superHard=2)'];
|
|
|
- const typeSelect = document.createElement('select');
|
|
|
- typeSelect.id = 'type-select-in-lvdetails';
|
|
|
- const normalOption = document.createElement('option');
|
|
|
- normalOption.value = '0';
|
|
|
- normalOption.textContent = 'normal';
|
|
|
- normalOption.selected = type == '0';
|
|
|
- const hardOption = document.createElement('option');
|
|
|
- hardOption.value = '1';
|
|
|
- hardOption.textContent = 'hard';
|
|
|
- hardOption.selected = type == '1';
|
|
|
- const superHardOption = document.createElement('option');
|
|
|
- superHardOption.value = '2';
|
|
|
- superHardOption.textContent = 'super-hard';
|
|
|
- superHardOption.selected = type == '2';
|
|
|
- typeSelect.appendChild(normalOption);
|
|
|
- typeSelect.appendChild(hardOption);
|
|
|
- typeSelect.appendChild(superHardOption);
|
|
|
- const p = document.createElement('p');
|
|
|
- p.appendChild(document.createTextNode('关卡难度级别：'));
|
|
|
- levelDetails.appendChild(p);
|
|
|
- levelDetails.appendChild(typeSelect);
|
|
|
+ {
|
|
|
+ const div = document.createElement('div');
|
|
|
+ const createInstButton = document.createElement('button');
|
|
|
+ createInstButton.id = 'create-instance-button';
|
|
|
+ createInstButton.textContent = '创建新的实例';
|
|
|
+ div.appendChild(createInstButton);
|
|
|
+ levelDetails.appendChild(div);
|
|
|
+ // createInstButton.addEventListener('click', () => {
|
|
|
+ // addNewInst(level);
|
|
|
+ // });
|
|
|
+ console.log(createInstButton.onclick);
|
|
|
+ }
|
|
|
+ {
|
|
|
+ const div = document.createElement('div');
|
|
|
+ // 增加一个下拉框，选择类型：normal,hard,super-hard
|
|
|
+ const type = level['type(normal=0,hard=1,superHard=2)'];
|
|
|
+ const typeSelect = document.createElement('select');
|
|
|
+ typeSelect.id = 'type-select-in-lvdetails';
|
|
|
+ const normalOption = document.createElement('option');
|
|
|
+ normalOption.value = '0';
|
|
|
+ normalOption.textContent = 'normal';
|
|
|
+ normalOption.selected = type == '0';
|
|
|
+ const hardOption = document.createElement('option');
|
|
|
+ hardOption.value = '1';
|
|
|
+ hardOption.textContent = 'hard';
|
|
|
+ hardOption.selected = type == '1';
|
|
|
+ const superHardOption = document.createElement('option');
|
|
|
+ superHardOption.value = '2';
|
|
|
+ superHardOption.textContent = 'super-hard';
|
|
|
+ superHardOption.selected = type == '2';
|
|
|
+ typeSelect.appendChild(normalOption);
|
|
|
+ typeSelect.appendChild(hardOption);
|
|
|
+ typeSelect.appendChild(superHardOption);
|
|
|
+ const p = document.createElement('p');
|
|
|
+ p.style.display = 'inline';
|
|
|
+ p.appendChild(document.createTextNode('关卡难度级别：'));
|
|
|
+ div.appendChild(p);
|
|
|
+ div.appendChild(typeSelect);
|
|
|
+ levelDetails.appendChild(div);
|
|
|
+ }
|
|
|
|
|
|
// 显示dda类型和参数
|
|
|
const ddatype = document.createElement('p');
|
|
|
@@ -460,6 +528,15 @@
|
|
|
showInstanceInfoAt(instDetails, inst);
|
|
|
});
|
|
|
|
|
|
+ document.getElementById('load_grp').addEventListener('click', function() {
|
|
|
+ const suffix = document.getElementById('group-suffix').value;
|
|
|
+ // 初始化数据
|
|
|
+ if (suffix == '') {
|
|
|
+ initData("");
|
|
|
+ } else {
|
|
|
+ initData("-"+suffix);
|
|
|
+ }
|
|
|
+ });
|
|
|
document.getElementById('levels').addEventListener('click', function() {
|
|
|
fetch('level.html')
|
|
|
.then(response => response.text())
|
|
|
@@ -481,6 +558,9 @@
|
|
|
.then(data => {
|
|
|
document.getElementById('content').innerHTML = data;
|
|
|
fillInstanceInfo();
|
|
|
+ // 给过滤按钮添加事件，点击时调用filterInstance函数
|
|
|
+ document.getElementById('intance-btn-filter').addEventListener('click', filterInstance);
|
|
|
+
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('Error loading the intance content:', error);
|
|
|
@@ -497,9 +577,6 @@
|
|
|
console.error('Error loading the intance content:', error);
|
|
|
});
|
|
|
});
|
|
|
-
|
|
|
- // 初始化数据
|
|
|
- initData();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
