replay-viewer
Version:
Rocket League replay viewer React component and tooling
103 lines • 6.33 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
import debounce from "lodash.debounce";
import React, { PureComponent } from "react";
import styled from "styled-components";
import { addFrameListener, removeFrameListener, } from "../../eventbus/events/frame";
import DataManager from "../../managers/DataManager";
import { getGameTime } from "../../operators/frameGetters";
import { getPlayerById } from "../../operators/metadataGetters";
var Scoreboard = /** @class */ (function (_super) {
__extends(Scoreboard, _super);
function Scoreboard(props) {
var _this = _super.call(this, props) || this;
_this.onFrame = debounce(function (_a) {
var frame = _a.frame;
var data = DataManager.getInstance().data;
var gameTime = getGameTime(data, frame);
if (gameTime !== _this.state.gameTime) {
_this.setState({ gameTime: gameTime });
}
_this.updateGameScore(frame);
}, 250, { maxWait: 250 });
_this.state = {
team0Score: 0,
team1Score: 0,
gameTime: 300,
};
addFrameListener(_this.onFrame);
return _this;
}
Scoreboard.prototype.componentWillUnmount = function () {
removeFrameListener(this.onFrame);
this.onFrame.cancel();
};
Scoreboard.prototype.getTimerString = function () {
var gameTime = this.state.gameTime;
// The frame is filled as -100 when the data is missing, so we set the minimum to 0
gameTime = gameTime < 0 ? 0 : gameTime;
var seconds = gameTime % 60;
var minutes = (gameTime - seconds) / 60;
var secondsString = seconds < 10 ? "0".concat(seconds) : seconds;
return "".concat(minutes, ":").concat(secondsString);
};
Scoreboard.prototype.render = function () {
var _a = this.state, team0Score = _a.team0Score, team1Score = _a.team1Score;
return (React.createElement(ScoreContainer, null,
React.createElement(BlueScoreCard, null,
React.createElement(Score, null, team0Score)),
React.createElement(GameTimeCard, null,
React.createElement(GameTime, null, this.getTimerString())),
React.createElement(OrangeScoreCard, null,
React.createElement(Score, null, team1Score))));
};
Scoreboard.prototype.updateGameScore = function (frameNumber) {
var metadata = DataManager.getInstance().metadata;
var team0Score = 0;
var team1Score = 0;
metadata.gameMetadata.goals.forEach(function (goal) {
if (goal.frameNumber <= frameNumber) {
var player = getPlayerById(metadata, goal.playerId.id);
if (player) {
if (player.isOrange) {
team1Score++;
}
else {
team0Score++;
}
}
}
});
if (team0Score !== this.state.team0Score ||
team1Score !== this.state.team1Score) {
this.setState({ team0Score: team0Score, team1Score: team1Score });
}
};
return Scoreboard;
}(PureComponent));
export default Scoreboard;
var ScoreContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: stretch;\n top: 0;\n position: absolute;\n z-index: 10;\n left: 50%;\n text-align: center;\n transform: translateX(-50%);\n width: 400px;\n border-style: solid;\n border-width: 3px;\n border-color: #fffa;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n"], ["\n display: flex;\n align-items: stretch;\n top: 0;\n position: absolute;\n z-index: 10;\n left: 50%;\n text-align: center;\n transform: translateX(-50%);\n width: 400px;\n border-style: solid;\n border-width: 3px;\n border-color: #fffa;\n border-bottom-right-radius: 10px;\n border-bottom-left-radius: 10px;\n"])));
var OrangeScoreCard = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: #e27740aa;\n border-bottom-right-radius: 5px;\n flex: 1;\n"], ["\n background-color: #e27740aa;\n border-bottom-right-radius: 5px;\n flex: 1;\n"])));
var BlueScoreCard = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: #4874efaa;\n border-bottom-left-radius: 5px;\n flex: 1;\n"], ["\n background-color: #4874efaa;\n border-bottom-left-radius: 5px;\n flex: 1;\n"])));
var Score = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: #fff;\n font-family: monospace;\n font-size: xx-large;\n"], ["\n color: #fff;\n font-family: monospace;\n font-size: xx-large;\n"])));
var GameTimeCard = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: #000a;\n"], ["\n background-color: #000a;\n"])));
var GameTime = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: #fff;\n font-family: monospace;\n font-size: xx-large;\n width: 100px;\n"], ["\n color: #fff;\n font-family: monospace;\n font-size: xx-large;\n width: 100px;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=ScoreBoard.js.map