mirror of
https://codeberg.org/demostf/frontend.git
synced 2026-06-03 18:24:12 +02:00
import analyser and migrate to solidjs, untested
This commit is contained in:
parent
95d48e48e2
commit
fff554c3d3
42 changed files with 2910 additions and 4 deletions
|
|
@ -33,6 +33,7 @@
|
|||
openssl
|
||||
nodejs
|
||||
nodePackages.svgo
|
||||
typescript
|
||||
];
|
||||
};
|
||||
});
|
||||
|
|
|
|||
98
package-lock.json
generated
98
package-lock.json
generated
|
|
@ -5,10 +5,23 @@
|
|||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@demostf/parser-worker": "^0.1.1",
|
||||
"@thisbeyond/solid-select": "^0.13.0",
|
||||
"solid-js": "^1.7.3"
|
||||
"@types/throttle-debounce": "^5.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"solid-js": "^1.7.3",
|
||||
"throttle-debounce": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.35"
|
||||
}
|
||||
},
|
||||
"node_modules/@demostf/parser-worker": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@demostf/parser-worker/-/parser-worker-0.1.1.tgz",
|
||||
"integrity": "sha512-BDCN1G5bZkD46MlIUJz8z/ALP1ZTL4SF8Ygwp739+RqlmPj5k7ptrFHagnIqAvnsrlEwwaMtuOpWRkJLANLDVA=="
|
||||
},
|
||||
"node_modules/@thisbeyond/solid-select": {
|
||||
"version": "0.13.0",
|
||||
"resolved": "https://registry.npmjs.org/@thisbeyond/solid-select/-/solid-select-0.13.0.tgz",
|
||||
|
|
@ -17,11 +30,86 @@
|
|||
"solid-js": "^1.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
|
||||
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.0.35",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.35.tgz",
|
||||
"integrity": "sha512-6Laome31HpetaIUGFWl1VQ3mdSImwxtFZ39rh059a1MNnKGqBpC88J6NJ8n/Is3Qx7CefDGLgf/KhN/sYCf7ag==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
|
||||
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/throttle-debounce": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
|
||||
"integrity": "sha512-Pb7k35iCGFcGPECoNE4DYp3Oyf2xcTd3FbFQxXUI9hEYKUl6YX+KLf7HrBmgVcD05nl50LIH6i+80js4iYmWbw=="
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
|
||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/seroval": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/seroval/-/seroval-0.5.1.tgz",
|
||||
|
|
@ -38,6 +126,14 @@
|
|||
"csstype": "^3.1.0",
|
||||
"seroval": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/throttle-debounce": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
|
||||
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
|
||||
"engines": {
|
||||
"node": ">=12.22"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -1,6 +1,14 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"@demostf/parser-worker": "^0.1.1",
|
||||
"@thisbeyond/solid-select": "^0.13.0",
|
||||
"solid-js": "^1.7.3"
|
||||
"@types/throttle-debounce": "^5.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"solid-js": "^1.7.3",
|
||||
"throttle-debounce": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.35"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
103
script/api.js
Normal file
103
script/api.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
"use strict";
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
exports.__esModule = true;
|
||||
exports.Api = void 0;
|
||||
var Api = /** @class */ (function () {
|
||||
function Api(base) {
|
||||
this.base = base;
|
||||
}
|
||||
Api.prototype.getApiUrl = function (url) {
|
||||
return this.base + url;
|
||||
};
|
||||
Api.prototype.request = function (url, params, json) {
|
||||
if (params === void 0) { params = {}; }
|
||||
if (json === void 0) { json = true; }
|
||||
var queryParams = new URLSearchParams(params);
|
||||
return fetch(this.getApiUrl(url) + '?' + queryParams)
|
||||
.then(function (response) {
|
||||
if (json) {
|
||||
return response.json();
|
||||
}
|
||||
else {
|
||||
return response.text();
|
||||
}
|
||||
});
|
||||
};
|
||||
Api.prototype.searchPlayer = function (query) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var players, _i, players_1, player;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
if (query.length < 2) {
|
||||
return [2 /*return*/, []];
|
||||
}
|
||||
return [4 /*yield*/, this.request('users/search', { query: query })];
|
||||
case 1:
|
||||
players = _a.sent();
|
||||
for (_i = 0, players_1 = players; _i < players_1.length; _i++) {
|
||||
player = players_1[_i];
|
||||
localStorage.setItem("player.".concat(player.steamid), JSON.stringify(player));
|
||||
}
|
||||
return [2 /*return*/, players];
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
Api.prototype.getPlayer = function (id) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var cached, player;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
cached = localStorage.getItem("player.".concat(id));
|
||||
if (cached) {
|
||||
return [2 /*return*/, JSON.parse(cached)];
|
||||
}
|
||||
return [4 /*yield*/, this.request("users/".concat(id), {})];
|
||||
case 1:
|
||||
player = _a.sent();
|
||||
localStorage.setItem("player.".concat(id), JSON.stringify(player));
|
||||
return [2 /*return*/, player];
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
return Api;
|
||||
}());
|
||||
exports.Api = Api;
|
||||
61
script/filterbar.jsx
Normal file
61
script/filterbar.jsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
"use strict";
|
||||
var __assign = (this && this.__assign) || function () {
|
||||
__assign = Object.assign || function(t) {
|
||||
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||
s = arguments[i];
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||
t[p] = s[p];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
return __assign.apply(this, arguments);
|
||||
};
|
||||
exports.__esModule = true;
|
||||
exports.queryForFilter = exports.Reset = exports.FilterBar = void 0;
|
||||
var solid_select_1 = require("@thisbeyond/solid-select");
|
||||
var solid_js_1 = require("solid-js");
|
||||
var FilterBar = function (_a) {
|
||||
var maps = _a.maps, api = _a.api, onChange = _a.onChange, initialFilter = _a.initialFilter;
|
||||
var modes = (0, solid_select_1.createOptions)(["4v4", "6v6", "Highlander"]);
|
||||
var mapOptions = (0, solid_select_1.createOptions)(maps, {
|
||||
createable: true
|
||||
});
|
||||
var playerOptions = (0, solid_select_1.createAsyncOptions)(function (search) { return api.searchPlayer(search); });
|
||||
var playerFormat = function (player) { return player.name; };
|
||||
var _b = (0, solid_js_1.createSignal)(initialFilter.mode, { equals: false }), initialMode = _b[0], setInitialMode = _b[1];
|
||||
var _c = (0, solid_js_1.createSignal)(initialFilter.map, { equals: false }), initialMap = _c[0], setInitialMap = _c[1];
|
||||
var _d = (0, solid_js_1.createSignal)(initialFilter), filterSet = _d[0], setFilterSet = _d[1];
|
||||
(0, solid_js_1.createEffect)(function () { return onChange(filterSet()); });
|
||||
return <div class="filter-bar">
|
||||
<solid_select_1.Select class="mode" onChange={function (mode) { return setFilterSet(__assign(__assign({}, filterSet()), { mode: mode })); }} initialValue={initialMode()} placeholder="All Types" {...modes}/>
|
||||
<exports.Reset reset={function () {
|
||||
setInitialMode("");
|
||||
onChange(__assign(__assign({}, filterSet()), { mode: "" }));
|
||||
}}/>
|
||||
<solid_select_1.Select class="maps" onChange={function (map) { return setFilterSet(__assign(__assign({}, filterSet()), { map: map })); }} initialValue={initialMap()} placeholder="All Maps" {...mapOptions}/>
|
||||
<exports.Reset reset={function () {
|
||||
setInitialMap("");
|
||||
console.log(__assign(__assign({}, filterSet()), { map: "" }));
|
||||
onChange(__assign(__assign({}, filterSet()), { map: "" }));
|
||||
}}/>
|
||||
<solid_select_1.Select class="players" initialValue={initialFilter.players} onChange={function (players) { return setFilterSet(__assign(__assign({}, filterSet()), { players: players })); }} multiple placeholder="All Players" format={playerFormat} {...playerOptions}/>
|
||||
</div>;
|
||||
};
|
||||
exports.FilterBar = FilterBar;
|
||||
var Reset = function (_a) {
|
||||
var reset = _a.reset;
|
||||
return <button onMouseDown={reset} class="reset">X</button>;
|
||||
};
|
||||
exports.Reset = Reset;
|
||||
function queryForFilter(filter) {
|
||||
var queryParams = new URLSearchParams({
|
||||
players: filter.players.map(function (player) { return player.steamid; }).join(','),
|
||||
mode: (filter.mode || "").toLowerCase(),
|
||||
map: filter.map || ""
|
||||
});
|
||||
if (filter.uploader) {
|
||||
queryParams.set("uploader", filter.uploader);
|
||||
}
|
||||
return queryParams;
|
||||
}
|
||||
exports.queryForFilter = queryForFilter;
|
||||
88
script/header.js
Normal file
88
script/header.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
"use strict";
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
exports.__esModule = true;
|
||||
exports.parseHeader = void 0;
|
||||
DataView.prototype["getString"] = function (offset, length) {
|
||||
var end = typeof length == 'number' ? offset + length : this.byteLength;
|
||||
var text = '';
|
||||
var val = -1;
|
||||
while (offset < this.byteLength && offset < end) {
|
||||
val = this.getUint8(offset++);
|
||||
if (val === 0)
|
||||
break;
|
||||
text += String.fromCharCode(val);
|
||||
}
|
||||
return text;
|
||||
};
|
||||
function parseHeader(file) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var data, view;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0: return [4 /*yield*/, readFile(file)];
|
||||
case 1:
|
||||
data = _a.sent();
|
||||
view = new DataView(data);
|
||||
return [2 /*return*/, {
|
||||
'type': view.getString(0, 8),
|
||||
'server': view.getString(16, 260),
|
||||
'nick': view.getString(276, 260),
|
||||
'map': view.getString(536, 260),
|
||||
'game': view.getString(796, 260),
|
||||
'duration': view.getFloat32(1056, true),
|
||||
'ticks': view.getUint32(1060, true)
|
||||
}];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
exports.parseHeader = parseHeader;
|
||||
function readFile(file) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
return __generator(this, function (_a) {
|
||||
return [2 /*return*/, new Promise(function (resolve, reject) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function () {
|
||||
resolve(reader.result);
|
||||
};
|
||||
reader.onerror = reject;
|
||||
reader.readAsArrayBuffer(file);
|
||||
})];
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ async function readFile(file: File): Promise<ArrayBuffer> {
|
|||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function () {
|
||||
resolve(reader.result)
|
||||
resolve(reader.result as ArrayBuffer)
|
||||
};
|
||||
reader.onerror = reject;
|
||||
|
||||
|
|
|
|||
12
script/ready.js
Normal file
12
script/ready.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
"use strict";
|
||||
exports.__esModule = true;
|
||||
exports.ready = void 0;
|
||||
function ready(cb) {
|
||||
if (document.readyState === "complete") {
|
||||
cb();
|
||||
}
|
||||
else {
|
||||
document.addEventListener("DOMContentLoaded", cb);
|
||||
}
|
||||
}
|
||||
exports.ready = ready;
|
||||
21
script/time.js
Normal file
21
script/time.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
"use strict";
|
||||
exports.__esModule = true;
|
||||
exports.formatDuration = void 0;
|
||||
function formatDuration(input) {
|
||||
if (!input) {
|
||||
return '0:00';
|
||||
}
|
||||
var hours = Math.floor(input / 3600);
|
||||
var minutes = Math.floor((input - (hours * 3600)) / 60);
|
||||
var seconds = Math.floor(input - (hours * 3600) - (minutes * 60));
|
||||
var hourString = (hours < 10) ? "0" + hours : "" + hours;
|
||||
var minuteString = (minutes < 10) ? "0" + minutes : "" + minutes;
|
||||
var secondString = (seconds < 10) ? "0" + seconds : "" + seconds;
|
||||
if (hourString !== '00') {
|
||||
return hourString + ':' + minuteString + ':' + secondString;
|
||||
}
|
||||
else {
|
||||
return minuteString + ':' + secondString;
|
||||
}
|
||||
}
|
||||
exports.formatDuration = formatDuration;
|
||||
9
script/tsconfig.json
Normal file
9
script/tsconfig.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"noEmit": true,
|
||||
"lib": ["es2020", "dom"],
|
||||
"module": "ES2020",
|
||||
}
|
||||
}
|
||||
144
script/upload.js
Normal file
144
script/upload.js
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
"use strict";
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
exports.__esModule = true;
|
||||
var ready_1 = require("./ready");
|
||||
var header_1 = require("./header");
|
||||
var time_1 = require("./time");
|
||||
(0, ready_1.ready)(function () {
|
||||
var red_name = document.querySelector(".red input");
|
||||
var blue_name = document.querySelector(".blue input");
|
||||
var file = document.querySelector(".dropzone input[type=\"file\"]");
|
||||
var drop_text = document.querySelector(".dropzone .text");
|
||||
var button = document.querySelector(".upload > button");
|
||||
var map = document.querySelector(".demo-info .map");
|
||||
var time = document.querySelector(".demo-info .time");
|
||||
var apiBase = document.querySelector("input[name=\"api\"]").value;
|
||||
var key = document.querySelector(".key").textContent;
|
||||
var selectedFile = null;
|
||||
console.log(key);
|
||||
file.addEventListener("change", function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
||||
var file, header;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
file = event.target.files[0];
|
||||
drop_text.textContent = file.name;
|
||||
return [4 /*yield*/, (0, header_1.parseHeader)(file)];
|
||||
case 1:
|
||||
header = _a.sent();
|
||||
if (header.type === "HL2DEMO" && header.game === "tf") {
|
||||
map.textContent = header.map;
|
||||
time.textContent = (0, time_1.formatDuration)(header.duration);
|
||||
button.removeAttribute("disabled");
|
||||
selectedFile = file;
|
||||
}
|
||||
else {
|
||||
drop_text.textContent = "Malformed demo or not a TF2 demo";
|
||||
map.textContent = "";
|
||||
time.textContent = "";
|
||||
button.setAttribute("disabled", "disabled");
|
||||
selectedFile = null;
|
||||
}
|
||||
return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
}); });
|
||||
button.addEventListener("click", function () { return __awaiter(void 0, void 0, void 0, function () {
|
||||
var _a, e_1;
|
||||
return __generator(this, function (_b) {
|
||||
switch (_b.label) {
|
||||
case 0:
|
||||
button.setAttribute("disabled", "disabled");
|
||||
if (!selectedFile) {
|
||||
return [2 /*return*/];
|
||||
}
|
||||
drop_text.textContent = "Uploading...";
|
||||
_b.label = 1;
|
||||
case 1:
|
||||
_b.trys.push([1, 3, , 4]);
|
||||
_a = window.location;
|
||||
return [4 /*yield*/, uploadDemo(apiBase, key, red_name.value || 'RED', blue_name.value || 'BLU', selectedFile.name, selectedFile)];
|
||||
case 2:
|
||||
_a.href = _b.sent();
|
||||
return [3 /*break*/, 4];
|
||||
case 3:
|
||||
e_1 = _b.sent();
|
||||
drop_text.textContent = "Error ".concat(e_1.message);
|
||||
return [3 /*break*/, 4];
|
||||
case 4: return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
}); });
|
||||
});
|
||||
function uploadDemo(apiBase, key, red, blue, name, demo) {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var data, response, _a, body, matches;
|
||||
return __generator(this, function (_b) {
|
||||
switch (_b.label) {
|
||||
case 0:
|
||||
data = new FormData();
|
||||
data.append('key', key);
|
||||
data.append('red', red);
|
||||
data.append('blu', blue);
|
||||
data.append('name', name);
|
||||
data.append('demo', demo, demo.name);
|
||||
return [4 /*yield*/, fetch(apiBase + "upload", {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})];
|
||||
case 1:
|
||||
response = _b.sent();
|
||||
if (!(response.status >= 400)) return [3 /*break*/, 3];
|
||||
_a = Error.bind;
|
||||
return [4 /*yield*/, response.text()];
|
||||
case 2: throw new (_a.apply(Error, [void 0, _b.sent()]))();
|
||||
case 3: return [4 /*yield*/, response.text()];
|
||||
case 4:
|
||||
body = _b.sent();
|
||||
matches = body.match(/STV available at: https?:\/\/[^/]+\/(\d+)/);
|
||||
if (matches) {
|
||||
return [2 /*return*/, matches[1]];
|
||||
}
|
||||
else {
|
||||
throw new Error(body);
|
||||
}
|
||||
return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ ready(() => {
|
|||
console.log(key);
|
||||
|
||||
file.addEventListener("change", async (event: InputEvent) => {
|
||||
let file = event.target.files[0];
|
||||
let file = (event.target as HTMLInputElement).files[0];
|
||||
drop_text.textContent = file.name;
|
||||
const header = await parseHeader(file)
|
||||
|
||||
|
|
|
|||
42
script/viewer/Analyse/AnalyseMenu.css
Normal file
42
script/viewer/Analyse/AnalyseMenu.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.analyse-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.share-session {
|
||||
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
font-size: 200%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-image: url("../images/link_white.svg");
|
||||
background-size: contain;
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.share-text {
|
||||
color: var(--primary-color);
|
||||
background-color: var(--text-secondary);
|
||||
padding: 5px;
|
||||
margin-top: 0;
|
||||
border: 1px #888 solid;
|
||||
border-radius: 5px;
|
||||
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
script/viewer/Analyse/AnalyseMenu.tsx
Normal file
26
script/viewer/Analyse/AnalyseMenu.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
export interface AnalyseMenuProps {
|
||||
sessionName: string;
|
||||
onShare: Function;
|
||||
canShare: boolean;
|
||||
isShared: boolean;
|
||||
}
|
||||
|
||||
export function AnalyseMenu({sessionName, onShare, canShare, isShared}:AnalyseMenuProps) {
|
||||
|
||||
const loc = window.location.toString().replace(/\#.+/, '') + '#' + sessionName;
|
||||
const shareText = (isShared) ?
|
||||
<input class="share-text" value={loc} readOnly={true}
|
||||
title="Use this link to join the current session"
|
||||
style={{width: `${(loc.length*8)}px`}}
|
||||
onFocus={(event)=>{(event.target as HTMLInputElement).select()}}/> : '';
|
||||
|
||||
const shareButton = (canShare) ? <div class="analyse-menu">
|
||||
<button class="share-session" title="Start a shared session"
|
||||
onClick={()=>{onShare()}}/>
|
||||
{shareText}
|
||||
</div>: '';
|
||||
|
||||
return (<div>
|
||||
{shareButton}
|
||||
</div>)
|
||||
}
|
||||
75
script/viewer/Analyse/Analyser.css
Normal file
75
script/viewer/Analyse/Analyser.css
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
.map-holder {
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 32px - 100px);
|
||||
}
|
||||
|
||||
.time-control {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: var(--primary-color-accent);
|
||||
|
||||
.timeline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 64px;
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.play-pause-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100px;
|
||||
width: 64px;
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
font-size: 200%;
|
||||
border: none;
|
||||
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-holder {
|
||||
.error-image {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 250%;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-image: url('../images/teleporter.png');
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: #FF9494;
|
||||
line-height: 32px;
|
||||
margin: 0 -30px;
|
||||
padding: 32px;
|
||||
padding-left: 74px;
|
||||
background-image: url('../images/error.png');
|
||||
background-size: 32px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 32px 32px;
|
||||
|
||||
.error-hint {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
199
script/viewer/Analyse/Analyser.tsx
Normal file
199
script/viewer/Analyse/Analyser.tsx
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
import {MapRender} from './MapRender';
|
||||
import {MapContainer} from "./MapContainer";
|
||||
import {throttle, debounce} from 'throttle-debounce';
|
||||
import {Timeline} from './Render/Timeline';
|
||||
import {SpecHUD} from './Render/SpecHUD';
|
||||
import {AnalyseMenu} from './AnalyseMenu'
|
||||
import {Header, WorldBoundaries} from "@demostf/parser-worker";
|
||||
|
||||
import {AsyncParser} from "./Data/AsyncParser";
|
||||
import {getMapBoundaries} from "./MapBoundries";
|
||||
import {createSignal} from "solid-js";
|
||||
import {Session, StateUpdate} from "./Session";
|
||||
|
||||
export interface AnalyseProps {
|
||||
header: Header;
|
||||
isStored: boolean;
|
||||
parser: AsyncParser;
|
||||
}
|
||||
|
||||
export interface AnalyseState {
|
||||
worldSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
backgroundBoundaries: WorldBoundaries;
|
||||
tick: number;
|
||||
playing: boolean;
|
||||
scale: number;
|
||||
error?: string;
|
||||
isShared: boolean;
|
||||
}
|
||||
|
||||
|
||||
export const Analyser = (props: AnalyseProps) => {
|
||||
const parser = props.parser;
|
||||
const intervalPerTick = props.header.interval_per_tick;
|
||||
|
||||
const [tick, setTick] = createSignal<number>();
|
||||
const [scale, setScale] = createSignal<number>();
|
||||
const [playing, setPlaying] = createSignal<boolean>();
|
||||
const [sessionName, setSessionName] = createSignal<string>();
|
||||
|
||||
let lastFrameTime = 0;
|
||||
let playStartTick = 0;
|
||||
let playStartTime = 0;
|
||||
|
||||
const onUpdate = (update: StateUpdate) => {
|
||||
if (update["tick"]) {
|
||||
setTick(update["tick"]);
|
||||
}
|
||||
if (update["playing"]) {
|
||||
setPlaying(update["playing"]);
|
||||
}
|
||||
}
|
||||
|
||||
let session: Session | null = null;
|
||||
if (props.isStored && window.location.hash) {
|
||||
const parsed = parseInt(window.location.hash.substr(1), 10);
|
||||
if (('#' + parsed) === window.location.hash) {
|
||||
setTick(Math.floor(parsed));
|
||||
} else {
|
||||
const name = window.location.hash.substring(1);
|
||||
Session.join(name, onUpdate);
|
||||
setSessionName(name);
|
||||
}
|
||||
}
|
||||
|
||||
const map = parser.demo.header.map;
|
||||
const backgroundBoundaries = getMapBoundaries(map);
|
||||
if (!backgroundBoundaries) {
|
||||
throw new Error(`Map not supported "${map}".`);
|
||||
}
|
||||
const worldSize = {
|
||||
width: backgroundBoundaries.boundary_max.x - backgroundBoundaries.boundary_min.x,
|
||||
height: backgroundBoundaries.boundary_max.y - backgroundBoundaries.boundary_min.y,
|
||||
};
|
||||
|
||||
const setTickNow = (tick) => {
|
||||
lastFrameTime = 0;
|
||||
playStartTick = tick;
|
||||
playStartTime = window.performance.now();
|
||||
setTick(tick);
|
||||
setHash(tick);
|
||||
if (session) {
|
||||
session.update({tick});
|
||||
}
|
||||
}
|
||||
|
||||
const pause = () => {
|
||||
setPlaying(false);
|
||||
lastFrameTime = 0;
|
||||
if (session) {
|
||||
session.update({playing: false});
|
||||
}
|
||||
}
|
||||
|
||||
const play = () => {
|
||||
playStartTick = tick();
|
||||
playStartTime = window.performance.now();
|
||||
setPlaying(true);
|
||||
requestAnimationFrame(animFrame);
|
||||
if (session) {
|
||||
session.update({playing: false});
|
||||
}
|
||||
}
|
||||
|
||||
const togglePlay = () => {
|
||||
if (playing()) {
|
||||
pause();
|
||||
} else {
|
||||
play();
|
||||
}
|
||||
}
|
||||
|
||||
const syncPlayTick = debounce(500, () => {
|
||||
if (session) {
|
||||
session.update({
|
||||
playing: playing(),
|
||||
tick: tick(),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const setHash = debounce(250, (tick) => {
|
||||
if (!session && props.isStored) {
|
||||
history.replaceState('', '', '#' + tick);
|
||||
}
|
||||
});
|
||||
|
||||
const animFrame = (timestamp:number) => {
|
||||
const timePassed = (timestamp - playStartTime) / 1000;
|
||||
const targetTick = playStartTick + (Math.round(timePassed / intervalPerTick));
|
||||
lastFrameTime = timestamp;
|
||||
if (targetTick >= (parser.demo.tick - 1)) {
|
||||
pause();
|
||||
}
|
||||
setHash(targetTick);
|
||||
setTick(targetTick);
|
||||
syncPlayTick();
|
||||
|
||||
if (playing()) {
|
||||
requestAnimationFrame(animFrame);
|
||||
}
|
||||
}
|
||||
|
||||
const players = () => parser.getPlayersAtTick(tick());
|
||||
const buildings = () => parser.getBuildingsAtTick(tick());
|
||||
const kills = parser.getKills();
|
||||
const playButtonText = () => (playing()) ? '⏸' : '▶️';
|
||||
const disabled = session && !session.isOwner();
|
||||
const isShared = () => sessionName() !== '';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div class="map-holder">
|
||||
<MapContainer contentSize={worldSize}
|
||||
onScale={setScale}>
|
||||
<MapRender size={worldSize}
|
||||
players={players()}
|
||||
buildings={buildings()}
|
||||
header={props.header}
|
||||
world={backgroundBoundaries}
|
||||
scale={scale()}/>
|
||||
</MapContainer>
|
||||
<AnalyseMenu sessionName={sessionName()}
|
||||
onShare={() => {
|
||||
session = Session.create({
|
||||
tick: tick(),
|
||||
playing: playing()
|
||||
});
|
||||
setSessionName(session.sessionName);
|
||||
}}
|
||||
canShare={props.isStored && !disabled}
|
||||
isShared={isShared()}
|
||||
/>
|
||||
<SpecHUD parser={parser} tick={tick()}
|
||||
players={players()} kills={kills}/>
|
||||
</div>
|
||||
<div class="time-control"
|
||||
title={`${tickToTime(tick(), intervalPerTick)} (tick ${tick()})`}>
|
||||
<input class="play-pause-button" type="button"
|
||||
onClick={togglePlay}
|
||||
value={playButtonText()}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<Timeline parser={parser} tick={tick()}
|
||||
onSetTick={throttle(50, (tick) => {
|
||||
setTickNow(tick);
|
||||
})}
|
||||
disabled={disabled}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function tickToTime(tick: number, intervalPerTick: number): string {
|
||||
let seconds = Math.floor(tick * intervalPerTick);
|
||||
return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
|
||||
}
|
||||
58
script/viewer/Analyse/Data/AsyncParser.js
Normal file
58
script/viewer/Analyse/Data/AsyncParser.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
"use strict";
|
||||
exports.__esModule = true;
|
||||
exports.AsyncParser = void 0;
|
||||
var parser_worker_1 = require("@demostf/parser-worker");
|
||||
var AsyncParser = /** @class */ (function () {
|
||||
function AsyncParser(buffer, progressCallback) {
|
||||
this.buffer = buffer;
|
||||
this.progressCallback = progressCallback;
|
||||
}
|
||||
AsyncParser.prototype.cache = function () {
|
||||
var _this = this;
|
||||
return new Promise(function (resolve, reject) {
|
||||
var worker = new Worker(new URL('./ParseWorker.ts', import.meta.url));
|
||||
worker.postMessage({
|
||||
buffer: _this.buffer
|
||||
}, [_this.buffer]);
|
||||
worker.onmessage = function (event) {
|
||||
if (event.data.error) {
|
||||
reject(event.data.error);
|
||||
return;
|
||||
}
|
||||
else if (event.data.progress) {
|
||||
_this.progressCallback(event.data.progress);
|
||||
return;
|
||||
}
|
||||
else if (event.data.demo) {
|
||||
var cachedData = event.data.demo;
|
||||
console.log("packed data: ".concat((cachedData.data.length / (1024 * 1024)).toFixed(1), "MB"));
|
||||
_this.world = cachedData.world;
|
||||
_this.demo = new parser_worker_1.ParsedDemo(cachedData.playerCount, cachedData.buildingCount, cachedData.world, cachedData.header, cachedData.data, cachedData.kills, cachedData.playerInfo, cachedData.tickCount);
|
||||
resolve(_this.demo);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
AsyncParser.prototype.getPlayersAtTick = function (tick) {
|
||||
var players = [];
|
||||
for (var i = 0; i < this.demo.playerCount; i++) {
|
||||
players.push(this.demo.getPlayer(tick, i));
|
||||
}
|
||||
return players;
|
||||
};
|
||||
AsyncParser.prototype.getBuildingsAtTick = function (tick) {
|
||||
var buildings = [];
|
||||
for (var i = 0; i < this.demo.buildingCount; i++) {
|
||||
var building = this.demo.getBuilding(tick, i);
|
||||
if (building.health > 0) {
|
||||
buildings.push(building);
|
||||
}
|
||||
}
|
||||
return buildings;
|
||||
};
|
||||
AsyncParser.prototype.getKills = function () {
|
||||
return this.demo.kills;
|
||||
};
|
||||
return AsyncParser;
|
||||
}());
|
||||
exports.AsyncParser = AsyncParser;
|
||||
63
script/viewer/Analyse/Data/AsyncParser.ts
Normal file
63
script/viewer/Analyse/Data/AsyncParser.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import {ParsedDemo, PlayerState, WorldBoundaries, Header, Kill, BuildingState} from "@demostf/parser-worker";
|
||||
import {getMapBoundaries} from "../MapBoundries";
|
||||
|
||||
export class AsyncParser {
|
||||
buffer: ArrayBuffer;
|
||||
demo: ParsedDemo;
|
||||
world: WorldBoundaries;
|
||||
progressCallback: (progress: number) => void;
|
||||
|
||||
constructor(buffer: ArrayBuffer, progressCallback: (progress: number) => void) {
|
||||
this.buffer = buffer;
|
||||
this.progressCallback = progressCallback;
|
||||
}
|
||||
|
||||
cache(): Promise<ParsedDemo> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const worker = new Worker(new URL('./ParseWorker.ts', import.meta.url));
|
||||
worker.postMessage({
|
||||
buffer: this.buffer
|
||||
}, [this.buffer]);
|
||||
worker.onmessage = (event) => {
|
||||
if (event.data.error) {
|
||||
reject(event.data.error);
|
||||
return;
|
||||
} else if (event.data.progress) {
|
||||
this.progressCallback(event.data.progress);
|
||||
return;
|
||||
} else if (event.data.demo) {
|
||||
const cachedData: ParsedDemo = event.data.demo;
|
||||
console.log(`packed data: ${(cachedData.data.length / (1024 * 1024)).toFixed(1)}MB`);
|
||||
this.world = cachedData.world;
|
||||
this.demo = new ParsedDemo(cachedData.playerCount, cachedData.buildingCount, cachedData.world, cachedData.header, cachedData.data, cachedData.kills, cachedData.playerInfo, cachedData.tickCount);
|
||||
resolve(this.demo);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getPlayersAtTick(tick: number): PlayerState[] {
|
||||
const players: PlayerState[] = [];
|
||||
for (let i = 0; i < this.demo.playerCount; i++) {
|
||||
players.push(this.demo.getPlayer(tick, i));
|
||||
}
|
||||
|
||||
return players;
|
||||
}
|
||||
|
||||
getBuildingsAtTick(tick: number): BuildingState[] {
|
||||
const buildings: BuildingState[] = [];
|
||||
for (let i = 0; i < this.demo.buildingCount; i++) {
|
||||
const building = this.demo.getBuilding(tick, i);
|
||||
if (building.health > 0) {
|
||||
buildings.push(building);
|
||||
}
|
||||
}
|
||||
|
||||
return buildings;
|
||||
}
|
||||
|
||||
getKills(): Kill[] {
|
||||
return this.demo.kills
|
||||
}
|
||||
}
|
||||
25
script/viewer/Analyse/Data/ParseWorker.js
Normal file
25
script/viewer/Analyse/Data/ParseWorker.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
"use strict";
|
||||
exports.__esModule = true;
|
||||
var parser_worker_1 = require("@demostf/parser-worker");
|
||||
/**
|
||||
* @global postMessage
|
||||
* @param event
|
||||
*/
|
||||
onmessage = function (event) {
|
||||
var buffer = event.data.buffer;
|
||||
var bytes = new Uint8Array(buffer);
|
||||
(0, parser_worker_1.parseDemo)(bytes, function (progress) {
|
||||
postMessage({
|
||||
progress: progress
|
||||
});
|
||||
}).then(function (parsed) {
|
||||
postMessage({
|
||||
demo: parsed
|
||||
}, [parsed.data.buffer]);
|
||||
})["catch"](function (e) {
|
||||
console.error(e);
|
||||
postMessage({
|
||||
error: e.message
|
||||
});
|
||||
});
|
||||
};
|
||||
27
script/viewer/Analyse/Data/ParseWorker.ts
Normal file
27
script/viewer/Analyse/Data/ParseWorker.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import {parseDemo} from "@demostf/parser-worker";
|
||||
|
||||
declare function postMessage(message: any, transfer?: any[]): void;
|
||||
|
||||
/**
|
||||
* @global postMessage
|
||||
* @param event
|
||||
*/
|
||||
onmessage = (event: MessageEvent) => {
|
||||
const buffer: ArrayBuffer = event.data.buffer;
|
||||
const bytes = new Uint8Array(buffer);
|
||||
parseDemo(bytes, (progress) => {
|
||||
postMessage({
|
||||
progress
|
||||
});
|
||||
}).then(parsed => {
|
||||
postMessage({
|
||||
demo: parsed
|
||||
}, [parsed.data.buffer]);
|
||||
}).catch(e => {
|
||||
console.error(e);
|
||||
postMessage({
|
||||
error: e.message
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
60
script/viewer/Analyse/MapBoundries.ts
Normal file
60
script/viewer/Analyse/MapBoundries.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import {mapBoundaries} from './boundaries';
|
||||
|
||||
mapBoundaries['koth_viaduct'] = mapBoundaries['koth_product_rc8'];
|
||||
mapBoundaries['cp_prolands'] = mapBoundaries['cp_badlands'];
|
||||
|
||||
const mapAliases = new Map<string, string>([
|
||||
['cp_prolands', 'cp_badlands']
|
||||
]);
|
||||
|
||||
function getMapBasename(map: string): string {
|
||||
if (map.startsWith('cp_gullywash_f') && !map.startsWith('cp_gullywash_final')) {
|
||||
return 'cp_gullywash_f6';
|
||||
}
|
||||
if (mapBoundaries[map]) {
|
||||
return map;
|
||||
}
|
||||
const trimMapName = (map) => {
|
||||
while (map.lastIndexOf('_') > map.indexOf('_')) {
|
||||
map = map.substr(0, map.lastIndexOf('_'));
|
||||
}
|
||||
return map;
|
||||
};
|
||||
const trimmed = trimMapName(map);
|
||||
if (mapBoundaries[trimmed]) {
|
||||
return trimmed;
|
||||
}
|
||||
for (const existingMap of Object.keys(mapBoundaries)) {
|
||||
if (trimMapName(existingMap) === map) {
|
||||
return existingMap;
|
||||
}
|
||||
}
|
||||
for (const existingMap of Object.keys(mapBoundaries)) {
|
||||
if (trimMapName(existingMap) === trimmed) {
|
||||
return existingMap;
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
export function findMapAlias(map: string): string {
|
||||
const baseName = getMapBasename(map);
|
||||
const alias = mapAliases.get(baseName);
|
||||
return alias ? alias : baseName;
|
||||
}
|
||||
|
||||
export interface MapBoundries {
|
||||
boundary_min: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
boundary_max: {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
}
|
||||
|
||||
export function getMapBoundaries(map: string): MapBoundries | null {
|
||||
const mapAlias = findMapAlias(map);
|
||||
return mapBoundaries[mapAlias];
|
||||
}
|
||||
5
script/viewer/Analyse/MapContainer.css
Normal file
5
script/viewer/Analyse/MapContainer.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
34
script/viewer/Analyse/MapContainer.tsx
Normal file
34
script/viewer/Analyse/MapContainer.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import {Panner} from "../Panner/Panner";
|
||||
import {createEffect, createSignal} from "solid-js";
|
||||
|
||||
export class MapContainerProps {
|
||||
contentSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
onScale?: (scale: number) => any;
|
||||
children: Element;
|
||||
}
|
||||
|
||||
export const MapContainer = ({children, contentSize, onScale}: MapContainerProps) => {
|
||||
const [container, setContainer] = createSignal<Element>();
|
||||
const scale = () => Math.min(
|
||||
container().clientWidth / contentSize.width,
|
||||
container().clientHeight / contentSize.height
|
||||
);
|
||||
createEffect(() => {
|
||||
if (isFinite(scale())) {
|
||||
onScale && onScale(scale());
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="map-container" ref={setContainer}>
|
||||
<Panner width={container().clientWidth} height={container().clientHeight}
|
||||
scale={scale()} contentSize={contentSize}
|
||||
onScale={onScale}>
|
||||
{children}
|
||||
</Panner>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
9
script/viewer/Analyse/MapRender.css
Normal file
9
script/viewer/Analyse/MapRender.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.map-background {
|
||||
/*width: 1000px;*/
|
||||
/*height: 1000px;*/
|
||||
min-height: 500px;
|
||||
min-width: 700px;
|
||||
background: black no-repeat;
|
||||
background-position: bottom left;
|
||||
background-size: contain;
|
||||
}
|
||||
51
script/viewer/Analyse/MapRender.tsx
Normal file
51
script/viewer/Analyse/MapRender.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import {Player as PlayerDot} from './Render/Player';
|
||||
import {Building as BuildingDot} from './Render/Building';
|
||||
import {findMapAlias} from './MapBoundries';
|
||||
import {PlayerState, Header, WorldBoundaries, BuildingState} from "@demostf/parser-worker";
|
||||
|
||||
export interface MapRenderProps {
|
||||
header: Header;
|
||||
players: PlayerState[];
|
||||
buildings: BuildingState[];
|
||||
size: {
|
||||
width: number;
|
||||
height: number;
|
||||
},
|
||||
world: WorldBoundaries;
|
||||
scale: number;
|
||||
}
|
||||
|
||||
declare const require: {
|
||||
<T>(path: string): T;
|
||||
(paths: string[], callback: (...modules: any[]) => void): void;
|
||||
ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
|
||||
};
|
||||
|
||||
export function MapRender({header, players, size, world, scale, buildings}: MapRenderProps) {
|
||||
const mapAlias = findMapAlias(header.map);
|
||||
const image = `images/leveloverview/dist/${mapAlias}.webp`;
|
||||
const background = `url(${image})`;
|
||||
|
||||
const playerDots = players
|
||||
.filter((player: PlayerState) => player.health)
|
||||
.map((player: PlayerState) => {
|
||||
return <PlayerDot player={player} mapBoundary={world}
|
||||
targetSize={size} scale={scale} />
|
||||
});
|
||||
|
||||
const buildingDots = buildings
|
||||
.filter((building: PlayerState) => building.position.x)
|
||||
.map((building: PlayerState) => {
|
||||
return <BuildingDot building={building}
|
||||
mapBoundary={world}
|
||||
targetSize={size} scale={scale}/>
|
||||
});
|
||||
|
||||
return (
|
||||
<svg class="map-background" width={size.width} height={size.height}
|
||||
style={{"background-image": background}}>
|
||||
{playerDots}
|
||||
{buildingDots}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
74
script/viewer/Analyse/Render/Building.tsx
Normal file
74
script/viewer/Analyse/Render/Building.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
import {BuildingState, WorldBoundaries, BuildingType, Team} from "@demostf/parser-worker";
|
||||
|
||||
export interface BuildingProp {
|
||||
building: BuildingState;
|
||||
mapBoundary: WorldBoundaries;
|
||||
targetSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
scale: number;
|
||||
}
|
||||
|
||||
const healthMap = [0, 150, 180, 216];
|
||||
|
||||
function getBuildingType(type: BuildingType) {
|
||||
switch (type) {
|
||||
case BuildingType.TeleporterEntrance:
|
||||
return 'tele_entrance';
|
||||
case BuildingType.TeleporterExit:
|
||||
return 'tele_exit';
|
||||
case BuildingType.Dispenser:
|
||||
return 'dispenser';
|
||||
case BuildingType.Level1Sentry:
|
||||
return 'sentry_1';
|
||||
case BuildingType.Level2Sentry:
|
||||
return 'sentry_2';
|
||||
case BuildingType.Level3Sentry:
|
||||
return 'sentry_3';
|
||||
case BuildingType.MiniSentry:
|
||||
return 'sentry_1';
|
||||
default:
|
||||
return 'unknown';
|
||||
}
|
||||
}
|
||||
|
||||
function getIcon(building: BuildingState) {
|
||||
const icon = getBuildingType(building.buildingType);
|
||||
const team = building.team === Team.Red ? 'red' : 'blue';
|
||||
return `/images/building_icons/${icon}_${team}.png`;
|
||||
}
|
||||
|
||||
export function Building({building, mapBoundary, targetSize, scale}: BuildingProp) {
|
||||
const worldWidth = mapBoundary.boundary_max.x - mapBoundary.boundary_min.x;
|
||||
const worldHeight = mapBoundary.boundary_max.y - mapBoundary.boundary_min.y;
|
||||
const x = building.position.x - mapBoundary.boundary_min.x;
|
||||
const y = building.position.y - mapBoundary.boundary_min.y;
|
||||
const scaledX = x / worldWidth * targetSize.width;
|
||||
const scaledY = (worldHeight - y) / worldHeight * targetSize.height;
|
||||
const maxHealth = healthMap[building.level];
|
||||
if (!maxHealth) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const alpha = building.health / maxHealth;
|
||||
try {
|
||||
const image = getIcon(building);
|
||||
|
||||
const angle = (building.angle) ?
|
||||
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
|
||||
transform={`rotate(${270 - building.angle})`}/> : '';
|
||||
|
||||
return <g transform={`translate(${scaledX} ${scaledY}) scale(${1 / scale})`}
|
||||
opacity={alpha}>
|
||||
{angle}
|
||||
<image href={image} class={"player-icon"} height={32}
|
||||
width={32}
|
||||
transform={`translate(-16 -16)`}/>
|
||||
</g>
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
45
script/viewer/Analyse/Render/KillFeed.css
Normal file
45
script/viewer/Analyse/Render/KillFeed.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.killfeed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 15px;
|
||||
user-select: none;
|
||||
|
||||
.kill {
|
||||
.red {
|
||||
color: #a75d50;
|
||||
}
|
||||
.blue {
|
||||
color: #5b818f;
|
||||
}
|
||||
|
||||
&.active-player {
|
||||
background-color: #ddcfb2;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
white-space: nowrap;
|
||||
background-color: #2d2727cc;
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
width: auto;
|
||||
text-align: right;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
clear: both;
|
||||
|
||||
.player {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kill-icon {
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
filter: brightness(600%);
|
||||
}
|
||||
65
script/viewer/Analyse/Render/KillFeed.tsx
Normal file
65
script/viewer/Analyse/Render/KillFeed.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import {Kill, PlayerState} from "@demostf/parser-worker";
|
||||
import {killAlias} from "./killAlias";
|
||||
|
||||
export interface KillFeedProps {
|
||||
kills: Kill[],
|
||||
tick: number;
|
||||
players: PlayerState[];
|
||||
}
|
||||
|
||||
export function KillFeed({kills, tick, players}: KillFeedProps) {
|
||||
let relevantKills: Kill[] = kills.filter(kill => kill.tick <= tick && kill.tick >= (tick - 30 * 10));
|
||||
|
||||
return <div class="killfeed">
|
||||
{relevantKills.map((kill, i) => <KillFeedItem kill={kill} players={players}/>)}
|
||||
</div>
|
||||
}
|
||||
|
||||
const teamMap = {
|
||||
0: 'unknown',
|
||||
2: 'red',
|
||||
3: 'blue'
|
||||
};
|
||||
|
||||
export function KillFeedItem({kill, players}: { kill: Kill, players: PlayerState[] }) {
|
||||
const alias = killAlias[kill.weapon] ? killAlias[kill.weapon] : kill.weapon;
|
||||
const attacker = getPlayer(players, kill.attacker);
|
||||
const assister = getPlayer(players, kill.assister);
|
||||
let victim = getPlayer(players, kill.victim);
|
||||
let killIcon;
|
||||
try {
|
||||
killIcon = `/images/kill_icons/${alias}.png`;
|
||||
} catch (e) {
|
||||
console.log(alias);
|
||||
killIcon = `/images/kill_icons/skull.png`;
|
||||
}
|
||||
if (!victim) {
|
||||
victim = {
|
||||
team: 0,
|
||||
info: {
|
||||
name: 'Missing player'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return <div class="kill">
|
||||
{(attacker && kill.attacker !== kill.victim) ?
|
||||
<span class={"player " + teamMap[attacker.team]}>
|
||||
{attacker.info.name}
|
||||
</span> : ''}
|
||||
{(assister && kill.assister !== kill.victim) ?
|
||||
<span class={teamMap[assister.team]}>﹢</span> : ''}
|
||||
{(assister && kill.assister !== kill.victim) ?
|
||||
(<span class={"player " + teamMap[assister.team]}>
|
||||
{assister.info.name}
|
||||
</span>) : ''}
|
||||
<img src={killIcon} class={`kill-icon ${kill.weapon}`}/>
|
||||
<span class={"player " + teamMap[victim.team]}>
|
||||
{victim.info.name}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
function getPlayer(players: PlayerState[], entityId: number): PlayerState {
|
||||
return players.find(player => player.info.userId == entityId);
|
||||
}
|
||||
4
script/viewer/Analyse/Render/Player.css
Normal file
4
script/viewer/Analyse/Render/Player.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.player-icon {
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
73
script/viewer/Analyse/Render/Player.tsx
Normal file
73
script/viewer/Analyse/Render/Player.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import {PlayerState, WorldBoundaries, Team} from "@demostf/parser-worker";
|
||||
|
||||
export interface PlayerProp {
|
||||
player: PlayerState;
|
||||
mapBoundary: WorldBoundaries;
|
||||
targetSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
scale: number;
|
||||
}
|
||||
|
||||
const healthMap = {
|
||||
0: 100, //fallback
|
||||
1: 125,//scout
|
||||
2: 150,//sniper
|
||||
3: 200,//soldier,
|
||||
4: 175,//demoman,
|
||||
5: 150,//medic,
|
||||
6: 300,//heavy,
|
||||
7: 175,//pyro
|
||||
8: 125,//spy
|
||||
9: 125,//engineer
|
||||
};
|
||||
|
||||
const classMap = {
|
||||
0: "empty",
|
||||
1: "scout",
|
||||
2: "sniper",
|
||||
3: "soldier",
|
||||
4: "demoman",
|
||||
5: "medic",
|
||||
6: "heavy",
|
||||
7: "pyro",
|
||||
8: "spy",
|
||||
9: "engineer"
|
||||
};
|
||||
|
||||
export function Player({player, mapBoundary, targetSize, scale}: PlayerProp) {
|
||||
const worldWidth = mapBoundary.boundary_max.x - mapBoundary.boundary_min.x;
|
||||
const worldHeight = mapBoundary.boundary_max.y - mapBoundary.boundary_min.y;
|
||||
const x = player.position.x - mapBoundary.boundary_min.x;
|
||||
const y = player.position.y - mapBoundary.boundary_min.y;
|
||||
const scaledX = x / worldWidth * targetSize.width;
|
||||
const scaledY = (worldHeight - y) / worldHeight * targetSize.height;
|
||||
const maxHealth = healthMap[player.playerClass];
|
||||
const alpha = player.health / maxHealth;
|
||||
const teamColor = (player.team === Team.Red) ? '#a75d50' : '#5b818f';
|
||||
const imageOpacity = player.health === 0 ? 0 : (1 + alpha) / 2;
|
||||
|
||||
return <g
|
||||
transform={`translate(${scaledX} ${scaledY}) scale(${1 / scale})`}>
|
||||
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
|
||||
opacity={imageOpacity}
|
||||
transform={`rotate(${270 - player.angle})`}/>
|
||||
<circle r={16} stroke-width={1} stroke="white" fill={teamColor}
|
||||
opacity={alpha}/>
|
||||
{getClassImage(player, imageOpacity)}
|
||||
</g>
|
||||
}
|
||||
|
||||
function getClassImage(player: PlayerState, imageOpacity: number) {
|
||||
if (!classMap[player.playerClass]) {
|
||||
return [];
|
||||
}
|
||||
const image = `/images/class_icons/${classMap[player.playerClass]}.svg`;
|
||||
return <image href={image}
|
||||
class={"player-icon " + player.team}
|
||||
opacity={imageOpacity}
|
||||
height={32}
|
||||
width={32}
|
||||
transform={`translate(-16 -16)`}/>
|
||||
}
|
||||
218
script/viewer/Analyse/Render/PlayerSpec.css
Normal file
218
script/viewer/Analyse/Render/PlayerSpec.css
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
.blueSpecHolder {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.redSpecHolder {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.playerspec {
|
||||
background-color: black;
|
||||
color: white;
|
||||
height: 42px;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
margin-bottom: 2px;
|
||||
user-select: none;
|
||||
|
||||
&.uber {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.class-icon, .steam-avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-position: top left;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&.uber {
|
||||
height: 28px;
|
||||
background-size: 28px 28px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.player-name {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.health-container {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 42px;
|
||||
top: 0;
|
||||
height: 28px;
|
||||
width: calc(100% - 42px);
|
||||
line-height: 28px;
|
||||
font-weight: bold;
|
||||
.health {
|
||||
position: relative;
|
||||
float: right;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.healthbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&.red {
|
||||
.health-container {
|
||||
background-color: #a75d50aa;
|
||||
}
|
||||
|
||||
.healthbar {
|
||||
background-color: #a75d50;
|
||||
}
|
||||
|
||||
.class-icon.scout {
|
||||
background-image: url('../../images/class_portraits/Icon_scout.jpg');
|
||||
}
|
||||
.class-icon.soldier {
|
||||
background-image: url('../../images/class_portraits/Icon_soldier.jpg');
|
||||
}
|
||||
.class-icon.pyro {
|
||||
background-image: url('../../images/class_portraits/Icon_pyro.jpg');
|
||||
}
|
||||
.class-icon.demoman {
|
||||
background-image: url('../../images/class_portraits/Icon_demoman.jpg');
|
||||
}
|
||||
.class-icon.engineer {
|
||||
background-image: url('../../images/class_portraits/Icon_engineer.jpg');
|
||||
}
|
||||
.class-icon.heavy {
|
||||
background-image: url('../../images/class_portraits/Icon_heavy.jpg');
|
||||
}
|
||||
.class-icon.medic {
|
||||
background-image: url('../../images/class_portraits/Icon_medic.jpg');
|
||||
}
|
||||
.class-icon.sniper {
|
||||
background-image: url('../../images/class_portraits/Icon_sniper.jpg');
|
||||
}
|
||||
.class-icon.spy{
|
||||
background-image: url('../../images/class_portraits/Icon_spy.jpg');
|
||||
}
|
||||
.class-icon.uber {
|
||||
background-image: url('../../images/charge_red.svg');
|
||||
}
|
||||
|
||||
.class-icon, .steam-avatar {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.health-container {
|
||||
right: 42px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.health {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
float: right;
|
||||
direction: ltr;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.blue {
|
||||
.health-container {
|
||||
background-color: #5b818faa;
|
||||
}
|
||||
|
||||
.healthbar {
|
||||
background-color: #5b818f;
|
||||
}
|
||||
|
||||
.class-icon.scout {
|
||||
background-image: url('../../images/class_portraits/Icon_scout_blue.jpg');
|
||||
}
|
||||
.class-icon.soldier {
|
||||
background-image: url('../../images/class_portraits/Icon_soldier_blue.jpg');
|
||||
}
|
||||
.class-icon.pyro {
|
||||
background-image: url('../../images/class_portraits/Icon_pyro_blue.jpg');
|
||||
}
|
||||
.class-icon.demoman {
|
||||
background-image: url('../../images/class_portraits/Icon_demoman_blue.jpg');
|
||||
}
|
||||
.class-icon.engineer {
|
||||
background-image: url('../../images/class_portraits/Icon_engineer_blue.jpg');
|
||||
}
|
||||
.class-icon.heavy {
|
||||
background-image: url('../../images/class_portraits/Icon_heavy_blue.jpg');
|
||||
}
|
||||
.class-icon.medic {
|
||||
background-image: url('../../images/class_portraits/Icon_medic_blue.jpg');
|
||||
}
|
||||
.class-icon.sniper {
|
||||
background-image: url('../../images/class_portraits/Icon_sniper_blue.jpg');
|
||||
}
|
||||
.class-icon.spy {
|
||||
background-image: url('../../images/class_portraits/Icon_spy_blue.jpg');
|
||||
}
|
||||
.class-icon.uber {
|
||||
background-image: url('../../images/charge_blue.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.overhealed {
|
||||
.health {
|
||||
color: #79d297;
|
||||
}
|
||||
|
||||
.health:after {
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
right: 0;
|
||||
padding: 0 5px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
content: 'OVERHEALED'
|
||||
}
|
||||
|
||||
&.red .health:after {
|
||||
position: absolute;
|
||||
top: 21px;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.dead {
|
||||
.healthbar, .health {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.health-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.class-icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
139
script/viewer/Analyse/Render/PlayerSpec.tsx
Normal file
139
script/viewer/Analyse/Render/PlayerSpec.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import {PlayerState} from "@demostf/parser-worker";
|
||||
|
||||
export interface PlayerSpecProps {
|
||||
player: PlayerState;
|
||||
}
|
||||
|
||||
const healthMap = {
|
||||
0: 100, //fallback
|
||||
1: 125, //scout
|
||||
2: 150, //sniper
|
||||
3: 200, //soldier,
|
||||
4: 175, //demoman,
|
||||
5: 150, //medic,
|
||||
6: 300, //heavy,
|
||||
7: 175, //pyro
|
||||
8: 125, //spy
|
||||
9: 125, //engineer
|
||||
};
|
||||
|
||||
const classMap = {
|
||||
1: "scout",
|
||||
2: "sniper",
|
||||
3: "soldier",
|
||||
4: "demoman",
|
||||
5: "medic",
|
||||
6: "heavy",
|
||||
7: "pyro",
|
||||
8: "spy",
|
||||
9: "engineer"
|
||||
};
|
||||
|
||||
const classSort = {
|
||||
1: 1, //scout
|
||||
3: 2, //soldier
|
||||
7: 3, //pyro
|
||||
4: 4, //demoman
|
||||
6: 5, //heavy
|
||||
9: 6, //engineer
|
||||
5: 7, //medic
|
||||
2: 8, //sniper
|
||||
8: 9, //spy
|
||||
};
|
||||
|
||||
const teamMap = {
|
||||
0: "other",
|
||||
1: "spectator",
|
||||
2: "red",
|
||||
3: "blue",
|
||||
}
|
||||
|
||||
export interface PlayersSpecProps {
|
||||
players: PlayerState[];
|
||||
}
|
||||
|
||||
export function PlayersSpec({players}: PlayersSpecProps) {
|
||||
const redPlayers = players
|
||||
.filter((player) => player.team === 2);
|
||||
const bluePlayers = players
|
||||
.filter((player) => player.team === 3);
|
||||
redPlayers.sort((a, b) => classSort[a.playerClass] - classSort[b.playerClass]);
|
||||
bluePlayers.sort((a, b) => classSort[a.playerClass] - classSort[b.playerClass]);
|
||||
|
||||
const redPlayerSpecs = redPlayers
|
||||
.map((player, i) => <PlayerSpec player={player}/>)
|
||||
.concat(
|
||||
redPlayers
|
||||
.filter(player => player.playerClass === 5)
|
||||
.map((player, i) => <UberSpec
|
||||
team={teamMap[player.team]}
|
||||
chargeLevel={player.charge}
|
||||
isDeath={player.health < 1}
|
||||
/>)
|
||||
);
|
||||
const bluePlayerSpecs = bluePlayers
|
||||
.map((player, i) => <PlayerSpec player={player}/>).concat(
|
||||
bluePlayers
|
||||
.filter(player => player.playerClass === 5)
|
||||
.map((player, i) => {
|
||||
// console.log(player);
|
||||
return (<UberSpec
|
||||
team={teamMap[player.team]}
|
||||
chargeLevel={player.charge}
|
||||
isDeath={player.health < 1}
|
||||
/>)
|
||||
})
|
||||
);
|
||||
|
||||
return (<div>
|
||||
<div class="redSpecHolder">{redPlayerSpecs}</div>
|
||||
<div class="blueSpecHolder">{bluePlayerSpecs}</div>
|
||||
</div>);
|
||||
}
|
||||
|
||||
export function PlayerSpec({player}: PlayerSpecProps) {
|
||||
const healthPercent = Math.min(100, player.health / healthMap[player.playerClass] * 100);
|
||||
const healthStatusClass = (player.health > healthMap[player.playerClass]) ? 'overhealed' : (player.health <= 0 ? 'dead' : '');
|
||||
|
||||
return (
|
||||
<div
|
||||
class={"playerspec " + teamMap[player.team] + " webp " + healthStatusClass}>
|
||||
{getPlayerIcon(player)}
|
||||
<div class="health-container">
|
||||
<div class="healthbar"
|
||||
style={{width: healthPercent + '%'}}/>
|
||||
<span class="player-name">{player.info.name}</span>
|
||||
<span class="health">{player.health}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getPlayerIcon(player: PlayerState) {
|
||||
if (classMap[player.playerClass]) {
|
||||
return <div class={classMap[player.playerClass] + " class-icon"}/>
|
||||
} else {
|
||||
return <div class={"class-icon"}/>
|
||||
}
|
||||
}
|
||||
|
||||
export interface UberSpecProps {
|
||||
chargeLevel: number;
|
||||
team: string;
|
||||
isDeath: boolean;
|
||||
}
|
||||
|
||||
export function UberSpec({chargeLevel, team, isDeath}: UberSpecProps) {
|
||||
const healthStatusClass = (isDeath) ? 'dead' : '';
|
||||
return (
|
||||
<div class={`playerspec uber ${team} ${healthStatusClass}`}>
|
||||
<div class={"uber class-icon"}/>
|
||||
<div class="health-container">
|
||||
<div class="healthbar"
|
||||
style={{width: chargeLevel + '%'}}/>
|
||||
<span class="player-name">Charge</span>
|
||||
<span class="health">{Math.round(chargeLevel)}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
script/viewer/Analyse/Render/SpecHUD.tsx
Normal file
19
script/viewer/Analyse/Render/SpecHUD.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import {PlayersSpec} from './PlayerSpec';
|
||||
import {KillFeed} from './KillFeed';
|
||||
import {AsyncParser} from "../Data/AsyncParser";
|
||||
import {PlayerState, Kill} from "@demostf/parser-worker";
|
||||
|
||||
export interface SpecHUDProps {
|
||||
tick: number;
|
||||
parser: AsyncParser;
|
||||
players: PlayerState[];
|
||||
kills: Kill[]
|
||||
}
|
||||
|
||||
export function SpecHUD({tick, parser, players, kills}: SpecHUDProps) {
|
||||
return (<div class="spechud">
|
||||
<KillFeed tick={tick} kills={kills} players={players}/>
|
||||
<PlayersSpec players={players}/>
|
||||
</div>)
|
||||
}
|
||||
|
||||
23
script/viewer/Analyse/Render/Timeline.css
Normal file
23
script/viewer/Analyse/Render/Timeline.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.timeline {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
/*bottom: 0;*/
|
||||
/*position: relative;*/
|
||||
}
|
||||
|
||||
.timeline-progress {
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.timeline-background {
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 78px;
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
69
script/viewer/Analyse/Render/Timeline.tsx
Normal file
69
script/viewer/Analyse/Render/Timeline.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import {ParsedDemo, PlayerState, Header, WorldBoundaries, Team} from "@demostf/parser-worker";
|
||||
|
||||
export interface TimelineProps {
|
||||
parser: AsyncParser;
|
||||
tick: number;
|
||||
onSetTick: (tick: number) => any;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const Timeline = ({parser, tick, onSetTick, disabled}) => {
|
||||
const background = <TimeLineBackground parser={parser}/>;
|
||||
|
||||
return (<div class="timeline">
|
||||
{background}
|
||||
<input class="timeline-progress" type="range" min={0}
|
||||
max={parser.demo.tickCount} value={tick}
|
||||
disabled={disabled}
|
||||
onChange={(event) => {onSetTick(parseInt(event.target.value, 10))}}
|
||||
/>
|
||||
</div>);
|
||||
}
|
||||
|
||||
import {AsyncParser} from "../Data/AsyncParser";
|
||||
import {createSignal} from "solid-js";
|
||||
|
||||
function TimeLineBackground({parser}:{parser: AsyncParser}) {
|
||||
const length = Math.floor(parser.demo.tickCount / 30);
|
||||
const blueHealth = new Uint16Array(length);
|
||||
const redHealth = new Uint16Array(length);
|
||||
let index = 0;
|
||||
let maxHealth = 0;
|
||||
for (let tick = 0; tick < parser.demo.tickCount; tick += 30) {
|
||||
index++;
|
||||
const players = parser.getPlayersAtTick(tick);
|
||||
for (const player of players) {
|
||||
if (player.team === 2) {
|
||||
redHealth[index] += player.health;
|
||||
} else if (player.team === 3) {
|
||||
blueHealth[index] += player.health;
|
||||
}
|
||||
}
|
||||
if (blueHealth[index] > 0 && redHealth[index] > 0) {
|
||||
maxHealth = Math.max(maxHealth, blueHealth[index], redHealth[index]);
|
||||
}
|
||||
}
|
||||
|
||||
let darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
let redStroke = darkMode ? '#ff756bff' : '#ff000088';
|
||||
let blueStroke = darkMode ? '#7378ffff' : '#0000ff88';
|
||||
|
||||
const redHealthPath = redHealth.reduce(pathReducer, 'M 0 0');
|
||||
const blueHealthPath = blueHealth.reduce(pathReducer, 'M 0 0');
|
||||
|
||||
return (
|
||||
<svg class="timeline-background"
|
||||
viewBox={`0 0 ${length} ${maxHealth}`}
|
||||
preserveAspectRatio="none">
|
||||
<path d={redHealthPath} stroke={redStroke} stroke-width={2}
|
||||
fill="transparent"
|
||||
vector-effect="non-scaling-stroke"/>
|
||||
<path d={blueHealthPath} stroke={blueStroke} stroke-width={2}
|
||||
fill="transparent"
|
||||
vector-effect="non-scaling-stroke"/>
|
||||
</svg>);
|
||||
}
|
||||
|
||||
function pathReducer(path, y, x) {
|
||||
return `${path} L ${x} ${y}`
|
||||
}
|
||||
38
script/viewer/Analyse/Render/killAlias.ts
Normal file
38
script/viewer/Analyse/Render/killAlias.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
export const killAlias = {
|
||||
'world': 'skull',
|
||||
'player': 'skull',
|
||||
'telefrag': 'skull',
|
||||
'shotgun_pyro': 'shotgun',
|
||||
'tf_projectile_pipe_remote': 'stickybomb_launcher',
|
||||
'the_classic': 'classic',
|
||||
'tf_projectile_arrow': 'huntsman',
|
||||
'club': 'kukri',
|
||||
'shotgun_primary': 'shotgun',
|
||||
'shotgun_soldier': 'shotgun',
|
||||
'shotgun_hwg': 'shotgun',
|
||||
'pickaxe': 'escape_plan',
|
||||
'tf_projectile_pipe': 'grenade_launcher',
|
||||
'obj_sentrygun': 'sentrygun1',
|
||||
'steel_fists': 'fists_of_steel',
|
||||
'tf_projectile_rocket': 'rocket_launcher',
|
||||
'obj_sentrygun3': 'sentrygun3',
|
||||
'obj_sentrygun2': 'sentrygun2',
|
||||
'worldspawn': 'skull',
|
||||
'nonnonviolent_protest': 'conscientious_objector',
|
||||
'deflect_promode': 'deflect_rocket',
|
||||
'trigger_hurt': 'bleed',
|
||||
'quake_rl': 'original',
|
||||
'wrangler_kill': 'wrangler',
|
||||
'obj_minisentry': 'minisentry',
|
||||
'pistol_scout': 'pistol',
|
||||
'bleed_kill': 'bleed',
|
||||
'maxgun': 'lugermorph',
|
||||
'rocketlauncher_directhit': 'direct_hit',
|
||||
'frontier_kill': 'frontier_justice',
|
||||
'robot_arm_kill': 'gunslinger',
|
||||
'wrench_jag': 'jag',
|
||||
'loose_cannon_explosion': 'loose_cannon',
|
||||
'samrevolver': 'big_kill',
|
||||
'long_heatmaker': 'huo-long_heater',
|
||||
'pep_pistol': 'pistol'
|
||||
};
|
||||
152
script/viewer/Analyse/Session.ts
Normal file
152
script/viewer/Analyse/Session.ts
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import {ownKeys} from "solid-js/store/types/store";
|
||||
|
||||
const syncUri = 'wss://sync.demos.tf';
|
||||
|
||||
export class Session {
|
||||
public readonly owner_token: string | null;
|
||||
private socket: WebSocket | null;
|
||||
public readonly sessionName: string;
|
||||
private initialState: PlaybackState | null;
|
||||
private readonly onState: (StateUpdate) => void | null;
|
||||
|
||||
constructor(name: string, owner_token: string | null = null, initialState: PlaybackState | null, onState: (StateUpdate) => void | null = null) {
|
||||
this.owner_token = owner_token;
|
||||
this.sessionName = name;
|
||||
this.initialState = initialState;
|
||||
this.onState = onState;
|
||||
}
|
||||
|
||||
public static create(state: PlaybackState): Session {
|
||||
return new Session(generateToken(), generateToken(), state)
|
||||
}
|
||||
|
||||
public static join(name: string, onState: (StateUpdate) => void): Session {
|
||||
return new Session(name, null, null, onState);
|
||||
}
|
||||
|
||||
private open() {
|
||||
if (this.socket) {
|
||||
return;
|
||||
}
|
||||
this.socket = new WebSocket(syncUri);
|
||||
this.socket.onopen = () => {
|
||||
if (this.socket) {
|
||||
if (this.owner_token) {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'create',
|
||||
session: this.sessionName,
|
||||
token: this.owner_token
|
||||
}));
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'tick',
|
||||
session: this.sessionName,
|
||||
tick: this.initialState.tick
|
||||
}));
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'play',
|
||||
session: this.sessionName,
|
||||
play: this.initialState.playing
|
||||
}));
|
||||
this.initialState = null;
|
||||
} else {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'join',
|
||||
session: this.sessionName
|
||||
}));
|
||||
this.socket.onmessage = (event) => {
|
||||
const packet = JSON.parse(event.data) as Packet;
|
||||
if (packet.type === 'tick') {
|
||||
this.onState({
|
||||
tick: packet.tick
|
||||
});
|
||||
}
|
||||
if (packet.type === 'play') {
|
||||
if (packet.play || packet.tick) {
|
||||
this.onState({
|
||||
playing: true
|
||||
});
|
||||
} else {
|
||||
this.onState({
|
||||
playing: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
this.socket.onclose = () => {
|
||||
this.socket = null;
|
||||
setTimeout(this.open.bind(this), 250);
|
||||
};
|
||||
this.socket.onerror = () => {
|
||||
this.socket = null;
|
||||
setTimeout(this.open.bind(this), 250);
|
||||
};
|
||||
}
|
||||
|
||||
public isOwner(): boolean {
|
||||
return this.owner_token !== null;
|
||||
}
|
||||
|
||||
public update(update: StateUpdate): void {
|
||||
if (this.socket && this.isOwner()) {
|
||||
if (update["tick"]) {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'tick',
|
||||
session: this.sessionName,
|
||||
tick: update["tick"]
|
||||
}));
|
||||
}
|
||||
if (update["playing"]) {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'play',
|
||||
session: this.sessionName,
|
||||
play: update["playing"]
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateToken(): string {
|
||||
let string = "";
|
||||
const alphabet = "abcdefghijklmnopqrstuvwxyz";
|
||||
|
||||
while (string.length < 6) {
|
||||
string += alphabet[Math.floor(Math.random() * alphabet.length)];
|
||||
}
|
||||
return string;
|
||||
}
|
||||
|
||||
export interface PlaybackState {
|
||||
tick: number,
|
||||
playing: boolean,
|
||||
}
|
||||
|
||||
export type StateUpdate = Partial<PlaybackState>;
|
||||
|
||||
interface JoinPacket {
|
||||
type: 'join';
|
||||
session: string;
|
||||
}
|
||||
|
||||
interface CreatePacket {
|
||||
type: 'create';
|
||||
session: string;
|
||||
}
|
||||
|
||||
export interface TickPacket {
|
||||
type: 'tick';
|
||||
session: string;
|
||||
tick: number;
|
||||
}
|
||||
|
||||
export interface PlayPacket {
|
||||
type: 'play';
|
||||
session: string;
|
||||
play?: boolean;
|
||||
tick?: boolean; //old sync server
|
||||
}
|
||||
|
||||
export type Packet = JoinPacket | CreatePacket | TickPacket | PlayPacket;
|
||||
462
script/viewer/Analyse/boundaries.ts
Normal file
462
script/viewer/Analyse/boundaries.ts
Normal file
|
|
@ -0,0 +1,462 @@
|
|||
export const mapBoundaries = {
|
||||
"pl_badwater_pro_v9": {
|
||||
"boundary_min": {
|
||||
"x": -2427,
|
||||
"y": -3340
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 3785,
|
||||
"y": 2922
|
||||
}
|
||||
},
|
||||
"cp_gullywash_final1": {
|
||||
"boundary_min": {
|
||||
"x": -4050,
|
||||
"y": -2950
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 5432,
|
||||
"y": 2260
|
||||
}
|
||||
},
|
||||
"cp_gullywash_f6": {
|
||||
"boundary_min": {
|
||||
"x": -4717,
|
||||
"y": -2643
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 4765,
|
||||
"y": 2567
|
||||
}
|
||||
},
|
||||
"cp_process_final": {
|
||||
"boundary_min": {
|
||||
"x": -5222,
|
||||
"y": -3146
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 5216,
|
||||
"y": 3128
|
||||
}
|
||||
},
|
||||
"cp_badlands": {
|
||||
"boundary_min": {
|
||||
"x": -4285,
|
||||
"y": -4898
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2577,
|
||||
"y": 4858
|
||||
}
|
||||
},
|
||||
"pl_upward": {
|
||||
"boundary_min": {
|
||||
"x": -2653,
|
||||
"y": -4344
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 3097,
|
||||
"y": 2180
|
||||
}
|
||||
},
|
||||
"koth_product_rc8": {
|
||||
"boundary_min": {
|
||||
"x": -2859,
|
||||
"y": -3668
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": -171,
|
||||
"y": 3776
|
||||
}
|
||||
},
|
||||
"cp_snakewater_final1": {
|
||||
"boundary_min": {
|
||||
"x": -5671,
|
||||
"y": -2649
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 6687,
|
||||
"y": 2961
|
||||
}
|
||||
},
|
||||
"ultiduo_baloo_v2": {
|
||||
"boundary_min": {
|
||||
"x": -1678,
|
||||
"y": -1964
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1678,
|
||||
"y": 1964
|
||||
}
|
||||
},
|
||||
"cp_sunshine": {
|
||||
"boundary_min": {
|
||||
"x": -8798,
|
||||
"y": 173
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": -2502,
|
||||
"y": 10279
|
||||
}
|
||||
},
|
||||
"cp_metalworks_rc7": {
|
||||
"boundary_min": {
|
||||
"x": -3034,
|
||||
"y": -6699
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 3374,
|
||||
"y": 4939
|
||||
}
|
||||
},
|
||||
"cp_steel": {
|
||||
"boundary_min": {
|
||||
"x": -2406,
|
||||
"y": -3422
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2924,
|
||||
"y": 2684
|
||||
}
|
||||
},
|
||||
"koth_lakeside_final": {
|
||||
"boundary_min": {
|
||||
"x": -4617,
|
||||
"y": -2160
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 4491,
|
||||
"y": 1114
|
||||
}
|
||||
},
|
||||
"cp_granary_pro_b10": {
|
||||
"boundary_min": {
|
||||
"x": -3069,
|
||||
"y": -6539
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 7,
|
||||
"y": 6263
|
||||
}
|
||||
},
|
||||
"koth_ashville_rc1": {
|
||||
"boundary_min": {
|
||||
"x": -1423,
|
||||
"y": -3920
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1501,
|
||||
"y": 3890
|
||||
}
|
||||
},
|
||||
"cp_reckoner_b3a": {
|
||||
"boundary_min": {
|
||||
"x": -3800,
|
||||
"y": -4921
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 3794,
|
||||
"y": 4879
|
||||
}
|
||||
},
|
||||
"pl_borneo": {
|
||||
"boundary_min": {
|
||||
"x": -3470,
|
||||
"y": -8160
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 3168,
|
||||
"y": 3786
|
||||
}
|
||||
},
|
||||
"pl_swiftwater_final1": {
|
||||
"boundary_min": {
|
||||
"x": 408,
|
||||
"y": -6128
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 6296,
|
||||
"y": 2624
|
||||
}
|
||||
},
|
||||
"ultiduo_grove_b2": {
|
||||
"boundary_min": {
|
||||
"x": -2099,
|
||||
"y": -1793
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2099,
|
||||
"y": 1793
|
||||
}
|
||||
},
|
||||
"pl_vigil_b2": {
|
||||
"boundary_min": {
|
||||
"x": -1019,
|
||||
"y": -2070
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 4875,
|
||||
"y": 4784
|
||||
}
|
||||
},
|
||||
"koth_bagel_rc4": {
|
||||
"boundary_min": {
|
||||
"x": -4286,
|
||||
"y": -1234
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 4196,
|
||||
"y": 1150
|
||||
}
|
||||
},
|
||||
"ctf_ballin_sky": {
|
||||
"boundary_min": {
|
||||
"x": -1024,
|
||||
"y": -1504
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1024,
|
||||
"y": 1504
|
||||
}
|
||||
},
|
||||
"koth_ultiduo_r_b7": {
|
||||
"boundary_min": {
|
||||
"x": -1337,
|
||||
"y": -1313
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1337,
|
||||
"y": 1313
|
||||
}
|
||||
},
|
||||
"koth_warmtic_rc4": {
|
||||
"boundary_min": {
|
||||
"x": -1337,
|
||||
"y": -4437
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2099,
|
||||
"y": 4547
|
||||
}
|
||||
},
|
||||
"cp_alloy_rc2a": {
|
||||
"boundary_min": {
|
||||
"x": -4271,
|
||||
"y": -3262
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1801,
|
||||
"y": 5492
|
||||
}
|
||||
},
|
||||
"pl_millstone_ugc_7": {
|
||||
"boundary_min": {
|
||||
"x": -3349,
|
||||
"y": -1776
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2709,
|
||||
"y": 4840
|
||||
}
|
||||
},
|
||||
"cp_vanguard": {
|
||||
"boundary_min": {
|
||||
"x": -5585,
|
||||
"y": -1896
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 5585,
|
||||
"y": 1896
|
||||
}
|
||||
},
|
||||
"koth_cascade_b6": {
|
||||
"boundary_min": {
|
||||
"x": -1682,
|
||||
"y": -3807
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1714,
|
||||
"y": 3735
|
||||
}
|
||||
},
|
||||
"koth_coalplant_b8": {
|
||||
"boundary_min": {
|
||||
"x": -1513,
|
||||
"y": -4089
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1527,
|
||||
"y": 4083
|
||||
}
|
||||
},
|
||||
"koth_ramjam_rc1": {
|
||||
"boundary_min": {
|
||||
"x": -3464,
|
||||
"y": -1865
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 3464,
|
||||
"y": 1851
|
||||
}
|
||||
},
|
||||
"dm_airfusion_final": {
|
||||
"boundary_min": {
|
||||
"x": -855,
|
||||
"y": -2533
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2315,
|
||||
"y": 337
|
||||
}
|
||||
},
|
||||
"dm_biohazard_cal": {
|
||||
"boundary_min": {
|
||||
"x": 422,
|
||||
"y": 366
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2486,
|
||||
"y": 1942
|
||||
}
|
||||
},
|
||||
"dm_caverns_r1": {
|
||||
"boundary_min": {
|
||||
"x": -1979,
|
||||
"y": -1476
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1091,
|
||||
"y": 1884
|
||||
}
|
||||
},
|
||||
"dm_ethic": {
|
||||
"boundary_min": {
|
||||
"x": -1549,
|
||||
"y": -1537
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 273,
|
||||
"y": -19
|
||||
}
|
||||
},
|
||||
"dm_killbox_kbh_2p": {
|
||||
"boundary_min": {
|
||||
"x": -1510,
|
||||
"y": -1017
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1010,
|
||||
"y": 1017
|
||||
}
|
||||
},
|
||||
"dm_lockdown_r6": {
|
||||
"boundary_min": {
|
||||
"x": -4670,
|
||||
"y": 1257
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": -2382,
|
||||
"y": 6343
|
||||
}
|
||||
},
|
||||
"dm_lostarena": {
|
||||
"boundary_min": {
|
||||
"x": -867,
|
||||
"y": -1421
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1277,
|
||||
"y": 1041
|
||||
}
|
||||
},
|
||||
"dm_lostvillage_v3": {
|
||||
"boundary_min": {
|
||||
"x": -513,
|
||||
"y": -1830
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 2163,
|
||||
"y": 2000
|
||||
}
|
||||
},
|
||||
"dm_tigcrik_r2": {
|
||||
"boundary_min": {
|
||||
"x": -1608,
|
||||
"y": -402
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 264,
|
||||
"y": 1268
|
||||
}
|
||||
},
|
||||
"cp_kalinka": {
|
||||
"boundary_min": {
|
||||
"x": -4117,
|
||||
"y": -5036
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 4117,
|
||||
"y": 4740
|
||||
}
|
||||
},
|
||||
"cp_cardinal": {
|
||||
"boundary_min": {
|
||||
"x": -6716,
|
||||
"y": -1782
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 6716,
|
||||
"y": 1782
|
||||
}
|
||||
},
|
||||
"koth_airfield": {
|
||||
"boundary_min": {
|
||||
"x": -3102,
|
||||
"y": -2094
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 3102,
|
||||
"y": 2094
|
||||
}
|
||||
},
|
||||
"koth_clearcut": {
|
||||
"boundary_min": {
|
||||
"x": -4432,
|
||||
"y": -1283
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 4438,
|
||||
"y": 1255
|
||||
}
|
||||
},
|
||||
"cp_villa": {
|
||||
"boundary_min": {
|
||||
"x": -5988,
|
||||
"y": -2466
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 5988,
|
||||
"y": 2466
|
||||
}
|
||||
},
|
||||
"cp_gravelpit": {
|
||||
"boundary_min": {
|
||||
"x": -5359,
|
||||
"y": -328
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1795,
|
||||
"y": 5610
|
||||
}
|
||||
},
|
||||
"koth_proplant": {
|
||||
"boundary_min": {
|
||||
"x": -1530,
|
||||
"y": -4109
|
||||
},
|
||||
"boundary_max": {
|
||||
"x": 1530,
|
||||
"y": 4071
|
||||
}
|
||||
}
|
||||
}
|
||||
102
script/viewer/Panner/CenteredPanZoom.ts
Normal file
102
script/viewer/Panner/CenteredPanZoom.ts
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import {Viewport, Point} from './Viewport';
|
||||
|
||||
export interface CenteredPanZoomOptions {
|
||||
screenWidth: number;
|
||||
screenHeight: number;
|
||||
scale?: number;
|
||||
contentSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
}
|
||||
|
||||
export class CenteredPanZoom {
|
||||
screen: Viewport;
|
||||
viewport: Viewport;
|
||||
scale: number;
|
||||
contentSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
constructor(options: CenteredPanZoomOptions) {
|
||||
this.screen = new Viewport({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: options.screenWidth,
|
||||
height: options.screenHeight
|
||||
});
|
||||
this.viewport = new Viewport({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: options.screenWidth,
|
||||
height: options.screenHeight
|
||||
});
|
||||
this.scale = options.scale || 1;
|
||||
this.contentSize = options.contentSize;
|
||||
}
|
||||
|
||||
setSize(width, height) {
|
||||
this.screen.width = width;
|
||||
this.screen.height = height;
|
||||
this.viewport.width = width * this.scale;
|
||||
this.viewport.height = height * this.scale;
|
||||
this.constrainPan(true);
|
||||
}
|
||||
|
||||
setContentSize(width, height) {
|
||||
this.contentSize = {width, height};
|
||||
this.constrainPan(true);
|
||||
}
|
||||
|
||||
pan(screenX, screenY) {
|
||||
this.viewport.x = this.viewport.x + screenX;
|
||||
this.viewport.y = this.viewport.y + screenY;
|
||||
this.constrainPan();
|
||||
}
|
||||
|
||||
constrainPan(strict = false) {
|
||||
const minX = (strict) ? 0 : this.screen.width * 0.5;
|
||||
const minY = (strict) ? 0 : this.screen.height * 0.5;
|
||||
this.viewport.x = Math.min(minX, this.viewport.x);
|
||||
this.viewport.y = Math.min(minY * 0.5, this.viewport.y);
|
||||
const maxY = (this.screen.height - (this.contentSize.height * this.scale)) - (strict ? 0 : this.screen.height * 0.5);
|
||||
const maxX = (this.screen.width - (this.contentSize.width * this.scale)) - (strict ? 0 : this.screen.width * 0.5);
|
||||
this.viewport.y = Math.max(maxY, this.viewport.y);
|
||||
this.viewport.x = Math.max(maxX, this.viewport.x);
|
||||
if (maxY > ((strict) ? 0 : this.screen.height * 0.5)) {
|
||||
this.viewport.y = Math.floor(maxY / 2);
|
||||
}
|
||||
if (maxX > ((strict) ? 0 : this.screen.width * 0.5)) {
|
||||
this.viewport.x = Math.floor(maxX / 2);
|
||||
}
|
||||
}
|
||||
|
||||
panFrom(screenStart: Point, screenEnd: Point) {
|
||||
this.pan(screenEnd.x - screenStart.x, screenEnd.y - screenStart.y);
|
||||
}
|
||||
|
||||
//find zoom point in pre-zoom viewport
|
||||
//make that point the same in the post-zoom viewport
|
||||
zoom(scale: number, screenCenter: Point) {
|
||||
const v1 = Viewport.convert(screenCenter, {
|
||||
from: this.screen,
|
||||
to: this.viewport
|
||||
});
|
||||
this.viewport.x = this.viewport.x * (scale / this.scale);
|
||||
this.viewport.y = this.viewport.y * (scale / this.scale);
|
||||
this.viewport.width = this.screen.width * scale;
|
||||
this.viewport.height = this.screen.height * scale;
|
||||
const minScale = Math.min(this.screen.width / this.contentSize.width, this.screen.height / this.contentSize.height);
|
||||
scale = Math.max(minScale, scale);
|
||||
this.scale = scale;
|
||||
|
||||
const v2 = Viewport.convert(screenCenter, {
|
||||
from: this.screen,
|
||||
to: this.viewport
|
||||
});
|
||||
const deltaX = v2.x - v1.x;
|
||||
const deltaY = v2.y - v1.y;
|
||||
this.pan(deltaX * scale, deltaY * scale);
|
||||
}
|
||||
}
|
||||
54
script/viewer/Panner/Panner.css
Normal file
54
script/viewer/Panner/Panner.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
.pan-zoom-element {
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
|
||||
.content-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.noselect {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.zoommenu {
|
||||
position: fixed;
|
||||
color: #888;
|
||||
|
||||
bottom: 100px;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
font-size: 200%;
|
||||
|
||||
opacity: 0.5;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 5px;
|
||||
|
||||
div {
|
||||
transition: all 0.5s;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
116
script/viewer/Panner/Panner.tsx
Normal file
116
script/viewer/Panner/Panner.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import {CenteredPanZoom} from './CenteredPanZoom';
|
||||
import {createSignal} from "solid-js";
|
||||
|
||||
export interface PannerProps {
|
||||
width: number;
|
||||
height: number;
|
||||
scale: number;
|
||||
contentSize: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
onScale?: (scale: number) => any;
|
||||
children: Element;
|
||||
}
|
||||
|
||||
export const Panner = (props: PannerProps) => {
|
||||
const [scale, setScale] = createSignal(0);
|
||||
const [translateX, setTranslateX] = createSignal(0);
|
||||
const [translateY, setTranslateY] = createSignal(0);
|
||||
|
||||
const panner = new CenteredPanZoom({
|
||||
screenHeight: props.height,
|
||||
screenWidth: props.width,
|
||||
scale: props.scale,
|
||||
contentSize: props.contentSize
|
||||
});
|
||||
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
|
||||
const mouseMove = (event) => {
|
||||
const {pageX, pageY} = event;
|
||||
panner.panFrom(
|
||||
{
|
||||
x: startX,
|
||||
y: startY
|
||||
},
|
||||
{
|
||||
x: pageX,
|
||||
y: pageY
|
||||
}
|
||||
);
|
||||
startX = event.pageX;
|
||||
startY = event.pageY;
|
||||
|
||||
setTranslateX(panner.viewport.x);
|
||||
setTranslateY(panner.viewport.y);
|
||||
setScale(panner.scale);
|
||||
}
|
||||
|
||||
const mouseDown = (event) => {
|
||||
startX = event.pageX;
|
||||
startY = event.pageY;
|
||||
|
||||
const mouseUp = () => {
|
||||
document.removeEventListener('mouseup', mouseUp, true);
|
||||
document.removeEventListener('mousemove', mouseMove, true);
|
||||
};
|
||||
document.addEventListener('mouseup', mouseUp, true);
|
||||
document.addEventListener('mousemove', mouseMove, true);
|
||||
}
|
||||
|
||||
const applyZoom = (factor: number, center) => {
|
||||
panner.zoom(factor, center);
|
||||
|
||||
setTranslateX(panner.viewport.x);
|
||||
setTranslateY(panner.viewport.y);
|
||||
setScale(panner.scale);
|
||||
|
||||
if (props.onScale) {
|
||||
props.onScale(panner.scale);
|
||||
}
|
||||
}
|
||||
|
||||
const mouseWheel = (event) => {
|
||||
event.preventDefault();
|
||||
const center = {x: event.pageX, y: event.pageY};
|
||||
let zoomFactor = (event.deltaY < 0) ? 1.05 : 0.95;
|
||||
|
||||
const factor = scale() * zoomFactor;
|
||||
applyZoom(factor, center);
|
||||
}
|
||||
|
||||
const center = () => ({
|
||||
x: Math.floor(panner.screen.width / 2),
|
||||
y: Math.floor(panner.screen.height / 2)
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="pan-zoom-element"
|
||||
style={{width: `${props.width}px`, height: `${props.height}px`}}
|
||||
onMouseDown={mouseDown}
|
||||
onWheel={mouseWheel}>
|
||||
<div class="content-container noselect"
|
||||
style={{
|
||||
transform: `translate(${translateX()}px, ${translateY()}px) scale(${scale()})`,
|
||||
"transform-origin": 'top left'
|
||||
}}>
|
||||
{props.children}
|
||||
</div>
|
||||
<div class="zoommenu">
|
||||
<div class="plus"
|
||||
onClick={() => {
|
||||
applyZoom(1.10, center())
|
||||
}}>+
|
||||
</div>
|
||||
<div class="minus"
|
||||
onClick={() => {
|
||||
applyZoom(0.90, center())
|
||||
}}>
|
||||
-
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
script/viewer/Panner/Viewport.ts
Normal file
36
script/viewer/Panner/Viewport.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
export interface ViewPortOptions {
|
||||
x?: number;
|
||||
y?: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export class Viewport {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
|
||||
constructor(options: ViewPortOptions) {
|
||||
this.x = options.x || 0;
|
||||
this.y = options.y || 0;
|
||||
this.width = options.width;
|
||||
this.height = options.height;
|
||||
}
|
||||
|
||||
static convert(point: Point, {from, to}: {from: Viewport, to: Viewport}): Point {
|
||||
const widthScale = from.width / to.width;
|
||||
const heightScale = from.height / to.height;
|
||||
|
||||
return {
|
||||
x: point.x * widthScale - to.x * widthScale,
|
||||
y: point.y * heightScale - to.y * heightScale
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue