modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
57 lines • 3.35 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Scoreboard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const mobx_react_lite_1 = require("mobx-react-lite");
require("../state/AppState");
const StateContext_1 = require("../contexts/StateContext");
const labelStyles = {
root: {
fontSize: 18,
},
};
const scoreCellStyle = {
paddingLeft: 5,
};
exports.Scoreboard = mobx_react_lite_1.observer(function Scoreboard() {
const appState = react_1.default.useContext(StateContext_1.StateContext);
const classes = getClassNames();
const scores = appState.game.finalScore;
const teamNames = appState.game.teamNames;
let label;
if (appState.uiState.isScoreVertical) {
label = (jsx_runtime_1.jsx("table", { children: jsx_runtime_1.jsx("tbody", { children: teamNames.map((teamName, index) => (jsx_runtime_1.jsxs("tr", { children: [jsx_runtime_1.jsx("td", { children: jsx_runtime_1.jsx(react_2.Label, Object.assign({ styles: labelStyles }, { children: teamName }), void 0) }, void 0),
jsx_runtime_1.jsx("td", Object.assign({ style: scoreCellStyle }, { children: jsx_runtime_1.jsx(react_2.Label, Object.assign({ styles: labelStyles }, { children: scores[index] }), void 0) }), void 0)] }, teamName))) }, void 0) }, void 0));
}
else {
label = (jsx_runtime_1.jsx(react_2.Label, Object.assign({ styles: labelStyles }, { children: teamNames.map((teamName, index) => `${teamName}: ${scores[index]}`).join(", ") }), void 0));
}
const protestIndicator = jsx_runtime_1.jsx(ProtestIndicator, {}, void 0);
return (jsx_runtime_1.jsx("div", Object.assign({ className: classes.board }, { children: jsx_runtime_1.jsxs(react_2.Stack, { children: [jsx_runtime_1.jsx(react_2.StackItem, { children: label }, void 0),
protestIndicator != undefined && (jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsx(ProtestIndicator, {}, void 0) }, void 0))] }, void 0) }), void 0));
});
const ProtestIndicator = mobx_react_lite_1.observer(function ProtestIndicator() {
const appState = react_1.default.useContext(StateContext_1.StateContext);
return appState.game.protestsMatter ? (jsx_runtime_1.jsxs(react_2.Stack, Object.assign({ horizontal: true }, { children: [jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsx(react_2.Icon, { iconName: "Warning", styles: warningIconStyles }, void 0) }, void 0),
jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsx(react_2.Label, { children: "Protests can affect the game, resolve them before exporting" }, void 0) }, void 0)] }), void 0)) : (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0));
});
const warningIconStyles = {
root: {
marginRight: 5,
fontSize: 22,
},
};
const getClassNames = () => react_2.mergeStyleSets({
board: {
display: "flex",
justifyContent: "center",
textAlign: "center",
padding: "5px 10px",
},
});
//# sourceMappingURL=Scoreboard.js.map