modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
130 lines • 7.41 kB
JavaScript
;
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BonusQuestionPart = 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");
const PacketState = __importStar(require("../state/PacketState"));
require("../state/PacketState");
require("../state/Cycle");
const Answer_1 = require("./Answer");
const FormattedText_1 = require("./FormattedText");
require("../parser/IFormattedText");
require("../state/IGameFormat");
const StateContext_1 = require("../contexts/StateContext");
require("../state/AppState");
const bouncebackCorrectnessStyles = {
root: {
// We don't want the dropdown to push off the whole bonus part text, so show at least the first few letters
// of the team name
maxWidth: 100,
marginRight: 5,
},
};
exports.BonusQuestionPart = mobx_react_lite_1.observer(function BonusQuestionPart(props) {
var _a, _b, _c, _d, _e, _f;
const appState = react_1.default.useContext(StateContext_1.StateContext);
const onCheckboxChangeHandler = react_1.default.useCallback((ev, checked) => onCorrectChange(props, ev, checked), [props]);
const onDropdownChangeHandler = react_1.default.useCallback((ev, option) => onTeamAnswerChange(props, ev, option), [props]);
const highlightBackground = !appState.uiState.noBonusHighlight;
const isCorrect = ((_b = (_a = props.cycle.bonusAnswer) === null || _a === void 0 ? void 0 : _a.parts[props.partNumber - 1].points) !== null && _b !== void 0 ? _b : 0) > 0;
// TODO: Make more efficient. Right now O(n^2), but generally not bad because n is almost always 3
// Looks for a correct part after this one to determine if this is incorrect, since we don't know if it is incorrect
// or if they are still reading the part
const isWrong = !isCorrect && ((_d = (_c = props.cycle.bonusAnswer) === null || _c === void 0 ? void 0 : _c.parts.slice(props.partNumber)) === null || _d === void 0 ? void 0 : _d.some((part) => part.points > 0)) === true;
let correctnessMarker = undefined;
if (props.gameFormat.bonusesBounceBack) {
// Need to see if the bonus answer team name matches the correct buzz
const partTeamName = (_f = (_e = props.cycle.bonusAnswer) === null || _e === void 0 ? void 0 : _e.parts[props.partNumber - 1].teamName) !== null && _f !== void 0 ? _f : "";
const options = [
{
key: "",
text: "",
selected: partTeamName === "",
},
].concat(props.teamNames.map((teamName, index) => {
return {
key: teamName,
text: `${index + 1}. ${teamName}`,
selected: partTeamName === teamName,
};
}));
correctnessMarker = (jsx_runtime_1.jsx(react_2.Dropdown, { disabled: props.disabled, options: options, onChange: onDropdownChangeHandler, selectedKey: partTeamName, styles: bouncebackCorrectnessStyles }, void 0));
}
else {
correctnessMarker = (jsx_runtime_1.jsx(react_2.Checkbox, { disabled: props.disabled, checked: isCorrect, ariaLabel: `Part ${props.partNumber}: ${isCorrect ? "Correct" : "Missed"}`, onChange: onCheckboxChangeHandler }, void 0));
}
const bonusPartText = react_1.default.useMemo(() => PacketState.getBonusWords(props.bonusPart.question, props.gameFormat), [props.bonusPart.question, props.gameFormat]);
// TODO: We should try to resize the checkbox's box to match the font size
return (jsx_runtime_1.jsx(react_2.ThemeContext.Consumer, { children: (theme) => {
const classes = getClassNames(theme, props.disabled, isCorrect, isWrong, highlightBackground);
return (jsx_runtime_1.jsxs("div", Object.assign({ className: classes.bonusPartContainer }, { children: [jsx_runtime_1.jsxs("div", Object.assign({ className: classes.bonusPartQuestionText }, { children: [correctnessMarker, jsx_runtime_1.jsxs("span", { children: ["[", props.bonusPart.value, props.bonusPart.difficultyModifier, "]", " ", jsx_runtime_1.jsx(FormattedText_1.FormattedText, { segments: bonusPartText, disabled: props.disabled }, void 0)] }, void 0)] }), void 0),
jsx_runtime_1.jsx("div", Object.assign({ className: classes.bonusPartAnswerSpacer }, { children: jsx_runtime_1.jsx(Answer_1.Answer, { className: classes.bonusPartAnswer, text: props.bonusPart.answer.trimStart(), disabled: props.disabled }, void 0) }), void 0)] }), void 0));
} }, void 0));
});
function onCorrectChange(props, ev, checked) {
if (props.cycle.correctBuzz == undefined) {
return;
}
const isCorrect = checked !== null && checked !== void 0 ? checked : false;
// If bouncebacks aren't supported, use the correct buzzer's team
const teamName = props.cycle.correctBuzz.marker.player.teamName;
props.cycle.setBonusPartAnswer(props.partNumber - 1, teamName, isCorrect ? props.bonusPart.value : 0);
}
function onTeamAnswerChange(props, ev, option) {
if (props.cycle.correctBuzz == undefined ||
option == undefined ||
option.key == undefined ||
typeof option.key !== "string") {
return;
}
props.cycle.setBonusPartAnswer(props.partNumber - 1, option.key, option.key === "" ? 0 : props.bonusPart.value);
}
const getClassNames = (theme, disabled, isCorrect, isWrong, highlightBackground) => react_2.mergeStyleSets({
bonusPartContainer: [
highlightBackground &&
isCorrect && {
background: theme ? theme.palette.tealLight + "20" : "rbg(0, 128, 128)",
},
highlightBackground &&
isWrong && {
background: theme ? theme.palette.red + "20" : "rgb(128, 0, 0)",
},
],
bonusPartQuestionText: [
{ display: "flex", paddingTop: "1em" },
disabled && {
color: theme ? theme.palette.neutralSecondaryAlt : "#888888",
},
],
bonusPartAnswer: [
disabled && {
color: theme ? theme.palette.neutralSecondaryAlt : "#888888",
},
],
bonusPartAnswerSpacer: { padding: "0.25em 24px 0 24px" },
});
//# sourceMappingURL=BonusQuestionPart.js.map