replay-viewer
Version:
Rocket League replay viewer React component and tooling
58 lines • 2.5 kB
JavaScript
var round = Math.round;
var Panel = /** @class */ (function () {
function Panel(name, fg, bg) {
this.min = Infinity;
this.max = 0;
this.name = name;
this.fg = fg;
this.bg = bg;
var _a = this.init(), canvas = _a.canvas, update = _a.update;
this.dom = canvas;
this.update = update;
}
Panel.prototype.init = function () {
var _this = this;
var PR = round(window.devicePixelRatio || 1);
var WIDTH = 80 * PR;
var HEIGHT = 48 * PR;
var TEXT_X = 3 * PR;
var TEXT_Y = 2 * PR;
var GRAPH_X = 3 * PR;
var GRAPH_Y = 15 * PR;
var GRAPH_WIDTH = 74 * PR;
var GRAPH_HEIGHT = 30 * PR;
var canvas = document.createElement("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.cssText = "width:80px;height:48px";
var context = canvas.getContext("2d");
context.font = "bold " + 9 * PR + "px Helvetica,Arial,sans-serif";
context.textBaseline = "top";
context.fillStyle = this.bg;
context.fillRect(0, 0, WIDTH, HEIGHT);
context.fillStyle = this.fg;
context.fillText(this.name, TEXT_X, TEXT_Y);
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
context.fillStyle = this.bg;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
var update = function (value, maxValue) {
_this.min = Math.min(_this.min, value);
_this.max = Math.max(_this.max, value);
context.fillStyle = _this.bg;
context.globalAlpha = 1;
context.fillRect(0, 0, WIDTH, GRAPH_Y);
context.fillStyle = _this.fg;
context.fillText("".concat(round(value), " ").concat(_this.name, " (").concat(round(_this.min), "-").concat(round(_this.max), ")"), TEXT_X, TEXT_Y);
context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
context.fillStyle = _this.bg;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - value / maxValue) * GRAPH_HEIGHT));
};
return { canvas: canvas, update: update };
};
return Panel;
}());
export { Panel };
//# sourceMappingURL=Panel.js.map