modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
104 lines • 6.23 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BonusQuestion = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const mobx_react_lite_1 = require("mobx-react-lite");
const react_1 = require("@fluentui/react");
const BonusQuestionController = __importStar(require("./BonusQuestionController"));
const PacketState = __importStar(require("../state/PacketState"));
const BonusQuestionPart_1 = require("./BonusQuestionPart");
require("../state/PacketState");
require("../state/Cycle");
const CancelButton_1 = require("./CancelButton");
const BonusProtestDialog_1 = require("./dialogs/BonusProtestDialog");
require("../state/AppState");
const FormattedText_1 = require("./FormattedText");
require("../parser/IFormattedText");
const PostQuestionMetadata_1 = require("./PostQuestionMetadata");
let bonusQuestionTextIdCounter = 0;
exports.BonusQuestion = mobx_react_lite_1.observer(function BonusQuestion(props) {
const throwOutClickHandler = React.useCallback(() => {
BonusQuestionController.throwOutBonus(props.cycle, props.bonusIndex);
}, [props]);
const formattedLeadin = React.useMemo(() => PacketState.getBonusWords(`${props.bonusIndex + 1}. ${props.bonus.leadin}`, props.appState.game.gameFormat), [props.bonusIndex, props.bonus.leadin, props.appState.game.gameFormat]);
const [lastBonus, setLastBonus] = React.useState(props.bonus);
// Unfortunately StackItems reset the font, so we have to override the font there
const fontSize = props.appState.uiState.questionFontSize;
const fontFamily = props.appState.uiState.fontFamily;
const stackItemStyles = {
root: {
fontFamily,
fontSize,
},
};
// Set the ID and bump it up for the next item
const [bonusId] = React.useState(bonusQuestionTextIdCounter);
React.useEffect(() => {
bonusQuestionTextIdCounter++;
}, []);
const bonusQuestionTextId = `bonusQuestionText${bonusId}`;
const hasBonusChanged = lastBonus !== props.bonus;
if (hasBonusChanged) {
setLastBonus(props.bonus);
// Because the bonus text has the scrollbar, and StackItem doesn't have a ref field, we have to get it manually
// from the DOM. We can't use a class name because it keeps changing, so we have to use an ID.
const bonusText = document.getElementById(bonusQuestionTextId);
if (bonusText != null) {
bonusText.scrollTop = 0;
}
}
const disabled = !props.inPlay;
const parts = props.bonus.parts.map((bonusPartProps, index) => {
return (jsx_runtime_1.jsx(BonusQuestionPart_1.BonusQuestionPart, { bonusPart: bonusPartProps, cycle: props.cycle, gameFormat: props.appState.game.gameFormat, partNumber: index + 1, teamNames: props.appState.game.teamNames, disabled: disabled }, index));
});
return (jsx_runtime_1.jsx(react_1.ThemeContext.Consumer, { children: (theme) => {
const fontSize = props.appState.uiState.questionFontSize;
const classes = getClassNames(theme, fontSize, !props.inPlay);
const metadata = props.bonus.metadata ? (jsx_runtime_1.jsx("div", Object.assign({ className: classes.bonusMetadata }, { children: jsx_runtime_1.jsx(PostQuestionMetadata_1.PostQuestionMetadata, { metadata: props.bonus.metadata }, void 0) }), void 0)) : undefined;
return (jsx_runtime_1.jsxs("div", Object.assign({ className: classes.bonusContainer }, { children: [jsx_runtime_1.jsx(BonusProtestDialog_1.BonusProtestDialog, { appState: props.appState, bonus: props.bonus, cycle: props.cycle }, void 0),
jsx_runtime_1.jsxs(react_1.Stack, Object.assign({ horizontal: true }, { children: [jsx_runtime_1.jsx(react_1.StackItem, Object.assign({ id: bonusQuestionTextId, styles: stackItemStyles }, { children: jsx_runtime_1.jsxs(react_1.FocusZone, Object.assign({ as: "div", shouldRaiseClicks: true, direction: react_1.FocusZoneDirection.vertical }, { children: [jsx_runtime_1.jsx(FormattedText_1.FormattedText, { className: classes.bonusLeadin, segments: formattedLeadin, disabled: disabled }, void 0), parts, metadata] }), void 0) }), void 0),
jsx_runtime_1.jsx(react_1.StackItem, Object.assign({ styles: stackItemStyles }, { children: jsx_runtime_1.jsx("div", {}, void 0) }), void 0),
jsx_runtime_1.jsx(react_1.StackItem, { children: jsx_runtime_1.jsx(CancelButton_1.CancelButton, { disabled: disabled, tooltip: "Throw out bonus", onClick: throwOutClickHandler }, void 0) }, void 0)] }), void 0)] }), void 0));
} }, void 0));
});
const getClassNames = (theme, fontSize, disabled) => react_1.mergeStyleSets({
bonusContainer: {
display: "flex",
justifyContent: "space-between",
},
bonusLeadin: [
{ paddingLeft: "24px", display: "inline-block", fontSize },
disabled && {
color: theme ? theme.palette.neutralSecondaryAlt : "#888888",
},
],
bonusMetadata: [
{
paddingLeft: 24,
},
disabled && {
color: theme ? theme.palette.neutralSecondaryAlt : "#888888",
},
],
});
//# sourceMappingURL=BonusQuestion.js.map