modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
82 lines • 4.53 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.QuestionViewer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const mobx_react_lite_1 = require("mobx-react-lite");
require("../state/UIState");
require("../state/GameState");
const TossupQuestion_1 = require("./TossupQuestion");
const BonusQuestion_1 = require("./BonusQuestion");
require("../state/Cycle");
const react_2 = require("@fluentui/react");
require("../state/AppState");
const StateContext_1 = require("../contexts/StateContext");
const separatorStyles = {
root: {
margin: "15px 10px",
},
};
exports.QuestionViewer = mobx_react_lite_1.observer(function QuestionViewer() {
const appState = react_1.default.useContext(StateContext_1.StateContext);
const fontSize = appState.uiState.questionFontSize;
const fontFamily = appState.uiState.fontFamily;
const classes = getClassNames(appState.uiState.questionFontColor, fontSize);
const game = appState.game;
const uiState = appState.uiState;
const cycle = game.playableCycles[uiState.cycleIndex];
const tossupIndex = game.getTossupIndex(uiState.cycleIndex);
const bonusIndex = game.getBonusIndex(uiState.cycleIndex);
// Unfortunately StackItems reset the font, so we have to override the font there
const stackItemStyles = {
root: {
fontFamily,
fontSize,
},
};
let bonus = null;
const bonusInPlay = cycle.correctBuzz != undefined;
if (bonusIndex < 0 || bonusIndex >= game.packet.bonuses.length) {
// TODO: Allow users to add more bonuses (maybe by appending to a packet)
bonus = (jsx_runtime_1.jsx("div", { children: "No more bonuses available. You will need to get some bonuses elsewhere, and tally this score elsewhere." }, void 0));
}
else if (!game.gameFormat.overtimeIncludesBonuses &&
uiState.cycleIndex >= game.gameFormat.regulationTossupCount) {
bonus = jsx_runtime_1.jsx("div", { children: "No bonuses during overtime." }, void 0);
}
else if (!uiState.hideBonusOnDeadTossup || cycle.correctBuzz != undefined) {
bonus = (jsx_runtime_1.jsx(BonusQuestion_1.BonusQuestion, { appState: appState, bonus: game.packet.bonuses[bonusIndex], bonusIndex: bonusIndex, cycle: cycle, inPlay: bonusInPlay }, void 0));
}
let tossup = null;
if (tossupIndex >= 0 && tossupIndex < game.packet.tossups.length) {
tossup = (jsx_runtime_1.jsx(TossupQuestion_1.TossupQuestion, { appState: appState, bonusIndex: bonusIndex, tossupNumber: tossupIndex + 1, cycle: cycle, tossup: game.packet.tossups[tossupIndex] }, void 0));
}
else {
// TODO: Allow users to add more tossups (maybe by appending to a packet)
// TODO: Move this and the bonus error message inside the components? Then it would be styled properly
tossup = (jsx_runtime_1.jsx("div", { children: "No more tossups available. You will need to get tiebreaker questions, and tally this score elsewhere." }, void 0));
}
// TODO: Handle the case where tossup is undefined. Alternatively, we need to disable the throw out question button
// when we're on the last tossup.
// This also means we need a way to import more questions when we need tiebreakers.
return (jsx_runtime_1.jsx("div", Object.assign({ className: classes.questionViewer }, { children: jsx_runtime_1.jsxs(react_2.Stack, { children: [jsx_runtime_1.jsx(react_2.StackItem, Object.assign({ styles: stackItemStyles }, { children: tossup }), void 0),
jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsx(react_2.Separator, { styles: separatorStyles }, void 0) }, void 0),
jsx_runtime_1.jsx(react_2.StackItem, Object.assign({ styles: stackItemStyles }, { children: bonus }), void 0)] }, void 0) }), void 0));
});
const getClassNames = react_2.memoizeFunction((fontColor, fontSize) => react_2.mergeStyleSets({
questionViewer: {
border: "1px solid darkgray",
padding: "5px 10px",
fontSize,
color: fontColor,
lineHeight: "1.4",
},
separator: {
borderTop: "1px dotted black",
margin: "10px 0",
},
}));
//# sourceMappingURL=QuestionViewer.js.map