auto ticks and naming

This commit is contained in:
Robin Appelman 2022-04-23 15:56:58 +02:00
commit d151938cc8
5 changed files with 43 additions and 18 deletions

View file

@ -1 +1 @@
4377cdb6395a8fecc6a6ab757a541d87 d9ca1dea07b67577d3418087152c4e24

View file

@ -1 +1 @@
6346c2553bc2c8189eebccf743248bbe 5ef6f0843192808428e9aeb26dddbace

View file

@ -1 +1 @@
810f6572596b4f536d6aa74f09422c81 b239e76e228dcfde7188c3fc7ce468de

View file

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Demo cutter</title> <title>Demo cutter</title>
<style> <style>
input[disabled] { input[disabled] {
opacity: 0.5; opacity: 0.5;
} }
</style> </style>
</head> </head>
<body> <body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript> <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
@ -16,19 +16,25 @@
Cut down a demo file to a specific tick range. Cut down a demo file to a specific tick range.
<p>Set the start and end tick and select a demo file below to begin processing, once processed the file will be presented as download</p> <p>
Set the start and end tick, select a demo file and press the cut button to begin processing, once processed the file
will be presented as download
</p>
<p>Processing demo files can take a while</p> <p>Processing demo files can take a while</p>
<form> <form>
<input type="number" id="start" value="30000"> <p>
<input type="number" id="end" value="50000"> <input type="number" id="start" value="30000">
<input type="file" id="file"> <input type="number" id="end" value="50000">
<input type="file" id="file">
</p>
<p><input type="button" id="cut" value="Cut demo"></p>
</form> </form>
<p> <p>
Note: Note:
</p> </p>
<ul> <ul>
<li>The resulting demo might not work or crash tf2 on playback, blame valve for making bad code</li> <li>The resulting demo might not work or crash tf2 on playback, blame valve for making bad code</li>
</ul> </ul>
</body> </body>
</html> </html>

View file

@ -4,7 +4,11 @@ import {cut} from "democutter";
let fileSelect = document.getElementById('file'); let fileSelect = document.getElementById('file');
let startInput = document.getElementById('start'); let startInput = document.getElementById('start');
let endInput = document.getElementById('end'); let endInput = document.getElementById('end');
fileSelect.addEventListener('change', (event) => { let cutButton = document.getElementById('cut');
let outputName = "cut.dem";
cutButton.addEventListener('click', (event) => {
let start = parseInt(startInput.value); let start = parseInt(startInput.value);
let end = parseInt(endInput.value); let end = parseInt(endInput.value);
console.log(start, end); console.log(start, end);
@ -15,10 +19,25 @@ fileSelect.addEventListener('change', (event) => {
console.log(reader.result); console.log(reader.result);
let result = cut(new Uint8Array(reader.result), start, end); let result = cut(new Uint8Array(reader.result), start, end);
fileSelect.disabled = false; fileSelect.disabled = false;
save(result, "cut.dem"); save(result, outputName);
}); });
}); });
fileSelect.addEventListener('change', (event) => {
const tickRate = 66;
let name = fileSelect.files[0].name;
let match = name.match(/^([^_]+)_(\d+)\.dem$/);
if (match) {
let highlightTick = parseInt(match[2]);
startInput.value = highlightTick - tickRate * 10;
endInput.value = highlightTick + tickRate * 5 * 60;
outputName = `${match[1]}_${tickRate * 10}.dem`;
} else {
outputName = name.replace(/\.dem/, "_cut.dem");
}
});
function save(data, fileName) { function save(data, fileName) {
let a = document.createElement("a"); let a = document.createElement("a");
document.body.appendChild(a); document.body.appendChild(a);